/* ============================================================
   MINISTRY OF FINANCE LEBANON
   RTL Stylesheet (Arabic / Right-to-Left)
   Loaded only on [dir="rtl"] pages.
   ============================================================ */

/* ── Base RTL ── */
[dir="rtl"] body {
  font-family: var(--mof-font-ar);
}

/* Arabic header logo size (English logo unchanged) */
[dir="rtl"] .mof-header__logo { height: 52px; max-width: 180px; }

[dir="rtl"] .mof-hero__heading,
[dir="rtl"] .mof-section-title,
[dir="rtl"] .mof-footer__brand-name,
[dir="rtl"] .mof-connect-col__title,
[dir="rtl"] .mof-minister-panel__name {
  font-family: var(--mof-font-ar);
  letter-spacing: 0;
}

/* ── Skip link ── */
[dir="rtl"] .mof-skip-link { left: auto; right: 16px; }

/* ── Announcement bar ── */
/* direction:rtl from html[dir="rtl"] makes flex-direction:row start from the right —
   row-reverse would cancel that back to LTR, so no flex-direction override needed here */

/* ── Header ── */
/* Same principle: direction:rtl handles visual ordering for all header flex containers */
[dir="rtl"] .mof-header__brand-text { text-align: right; }

/* Brand text — Arabic version uses Arabic font for primary name line */
[dir="rtl"] .mof-header__brand-en {
  font-family: var(--mof-font-ar);
  letter-spacing: 0;
  font-size: 15px;
}
[dir="rtl"] .mof-header__brand-ar {
  font-family: var(--mof-font-ar);
  font-weight: 400;
}

/* Nav active underline — flip from left to right */
[dir="rtl"] .mof-nav__link::after {
  left: 14px;
  right: 14px;
}

/* ── Mobile nav ── */
[dir="rtl"] .mof-mobile-nav { right: auto; left: 0; transform: translateX(-100%); }
[dir="rtl"] .mof-mobile-nav.mof-is-open { transform: translateX(0); }
/* direction:rtl handles mobile nav header/brand ordering naturally */
[dir="rtl"] .mof-mobile-nav__link {
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  padding-left: 16px;
  padding-right: 16px;
}
[dir="rtl"] .mof-mobile-nav__link:hover {
  border-right-color: var(--mof-blue);
  border-left-color: transparent;
  padding-right: 20px;
  padding-left: 16px;
}

/* ── Search overlay ── */
[dir="rtl"] .mof-search-overlay__close { right: auto; left: 32px; }
[dir="rtl"] .mof-search-overlay__input { padding: 0 56px 0 120px; }
[dir="rtl"] .mof-search-overlay__icon { left: auto; right: 18px; }
[dir="rtl"] .mof-search-overlay__submit { right: auto; left: 8px; }

/* ── Hero ── */
[dir="rtl"] .mof-hero__layout { direction: rtl; }
[dir="rtl"] .mof-hero__content { text-align: right; }
[dir="rtl"] .mof-hero__badge { flex-direction: row-reverse; }
[dir="rtl"] .mof-hero__search { flex-direction: row-reverse; }
[dir="rtl"] .mof-hero__search-icon { padding: 0 14px; }
[dir="rtl"] .mof-hero__quick-tags { flex-direction: row-reverse; justify-content: flex-start; }

/* News ticker */
[dir="rtl"] .mof-news-ticker__heading { flex-direction: row-reverse; }
[dir="rtl"] .mof-news-ticker__item { flex-direction: row-reverse; }

/* Minister panel */
[dir="rtl"] .mof-minister-panel__body { text-align: right; }
[dir="rtl"] .mof-minister-panel__quote {
  border-left: none;
  border-right: 3px solid var(--mof-blue);
  padding-left: 0;
  padding-right: 14px;
}
[dir="rtl"] .mof-minister-panel__statement {
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  flex-direction: row;
}
[dir="rtl"] .mof-minister-panel__statement:hover {
  border-right-color: var(--mof-blue);
  border-left-color: transparent;
}

/* ── Section header ── */
[dir="rtl"] .mof-section-header { flex-direction: row-reverse; text-align: right; }
[dir="rtl"] .mof-section-header > div { text-align: right; }

/* ── eServices ── */
[dir="rtl"] .mof-eservice-card { direction: rtl; }
/* row (not row-reverse) so inherited rtl + space-between puts the title block
   on the right and the "view all" link on the left */
[dir="rtl"] .mof-eservices .mof-section-header { flex-direction: row; }

/* ── Publications ── */
/* row (not row-reverse) so inherited rtl puts the title block right, link left */
[dir="rtl"] .mof-publications .mof-section-header { flex-direction: row; }
/* row so each row reads rtl: date right, title/content next, actions left */
[dir="rtl"] .mof-pub-row {
  flex-direction: row;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
[dir="rtl"] .mof-pub-row:hover {
  border-right-color: var(--mof-blue);
  border-left-color: transparent;
  padding-right: 28px;
  padding-left: 24px;
}
/* row so title sits right (after date) with badges/tags to its left */
[dir="rtl"] .mof-pub-row__content { flex-direction: row; }

/* ── Statistics ── */
[dir="rtl"] .mof-statistics__grid { direction: rtl; }
[dir="rtl"] .mof-stat-item::after {
  right: auto;
  left: 0;
}

/* ── Useful links ── */
/* row (not row-reverse) so inherited rtl puts the label/title block on the right */
[dir="rtl"] .mof-useful-links .mof-section-header { flex-direction: row; }
/* row (not row-reverse) so inherited rtl puts icon right, text to its left, ext icon far left */
[dir="rtl"] .mof-useful-link-card { flex-direction: row; }
[dir="rtl"] .mof-useful-link-card__body { text-align: right; }

/* ── Connect ── */
[dir="rtl"] .mof-connect__grid { direction: rtl; }
[dir="rtl"] .mof-connect-col__heading { text-align: right; }
[dir="rtl"] .mof-connect-col__title { text-align: right; }
/* row so inherited rtl puts the icon on the right, text to its left (right-aligned) */
[dir="rtl"] .mof-address-item { flex-direction: row; text-align: right; }
[dir="rtl"] .mof-social-grid { direction: rtl; }
[dir="rtl"] .mof-social-card { flex-direction: row-reverse; }
[dir="rtl"] .mof-newsletter-form { direction: rtl; text-align: right; }
/* row so inherited rtl puts the checkbox on the right, consent text to its left */
[dir="rtl"] .mof-form-checkbox { flex-direction: row; }

/* ── Footer ── */
[dir="rtl"] .mof-footer { direction: rtl; }
[dir="rtl"] .mof-footer__grid { direction: rtl; }
/* footer is direction:rtl; use flex-start (=right) and row (not row-reverse) so it reads RTL */
[dir="rtl"] .mof-footer__brand { align-items: flex-start; }
[dir="rtl"] .mof-footer__brand-logo { flex-direction: row; }
[dir="rtl"] .mof-footer__brand-desc { text-align: right; }
/* Arabic footer logo larger (English footer logo unchanged) */
[dir="rtl"] .mof-footer__brand-logo img { height: 72px; width: auto; }
/* Arabic mobile menu logo larger (English mobile logo handled in main.css) */
[dir="rtl"] .mof-mobile-nav__brand img { height: 56px; width: auto; }
[dir="rtl"] .mof-footer__socials { flex-direction: row; }
[dir="rtl"] .mof-footer__col-title { text-align: right; }
[dir="rtl"] .mof-footer__links { align-items: flex-start; }
[dir="rtl"] .mof-footer__link { flex-direction: row; padding-left: 0; }
[dir="rtl"] .mof-footer__link:hover { padding-right: 4px; padding-left: 0; }
[dir="rtl"] .mof-footer__contact-list { align-items: flex-start; }
[dir="rtl"] .mof-footer__contact-item { flex-direction: row; text-align: right; }
[dir="rtl"] .mof-footer__sub-inner { flex-direction: row; }
[dir="rtl"] .mof-footer__sub-links { flex-direction: row; }
[dir="rtl"] .mof-footer__copyright { text-align: right; }

/* ── Badge and typography tweaks ── */
[dir="rtl"] .mof-badge { font-family: var(--mof-font-ar); letter-spacing: 0; }
[dir="rtl"] .mof-section-label { letter-spacing: 0; font-family: var(--mof-font-ar); }
[dir="rtl"] .mof-footer__col-title { letter-spacing: 0; }

/* ── Arabic-specific font sizes ── */
[dir="rtl"] .mof-hero__subtitle { font-size: 16px; }
[dir="rtl"] .mof-pub-row__title { font-size: 15px; }
[dir="rtl"] .mof-footer__link { font-size: 14px; }
[dir="rtl"] .mof-nav__link { font-size: 15px; }

/* ============================================================
   PART 2 — INNER PAGES RTL
   ============================================================ */

/* ── Content hero ── */
[dir="rtl"] .mof-content-hero__inner { direction: rtl; }
[dir="rtl"] .mof-content-hero__title,
[dir="rtl"] .mof-content-hero__subtitle { text-align: right; }
[dir="rtl"] .mof-content-hero__meta { flex-direction: row-reverse; justify-content: flex-end; }
[dir="rtl"] .mof-content-hero__meta-item { flex-direction: row-reverse; }
[dir="rtl"] .mof-content-hero__actions { flex-direction: row-reverse; }

/* Minister hero: actions live inside the (right-aligned) text column, so align
   them to the start (right) and let the RTL direction order them — no extra
   row-reverse (which double-flips and pushes the buttons to the wrong side).
   The breadcrumb uses explicit __sep spans, so drop the injected '/' and the
   list row-reverse and let direction:rtl handle the right-to-left order. */
[dir="rtl"] .mof-content-hero--minister .mof-content-hero__actions {
  flex-direction: row;
  justify-content: flex-start;
}
[dir="rtl"] .mof-content-hero--minister .mof-breadcrumb__list {
  flex-direction: row;
  justify-content: flex-start;
}
[dir="rtl"] .mof-content-hero--minister .mof-breadcrumb__item::before { content: none; }

/* ── Minister content sections (About / Office / Former Ministers) ── */
[dir="rtl"] .mof-minister-section__title,
[dir="rtl"] .mof-minister-section__intro,
[dir="rtl"] .mof-article-content { text-align: right; }
[dir="rtl"] .mof-article-content ul,
[dir="rtl"] .mof-article-content ol { padding-right: 22px; padding-left: 0; }
[dir="rtl"] .mof-data-table thead th,
[dir="rtl"] .mof-table-scroll table thead th,
[dir="rtl"] .mof-data-table td,
[dir="rtl"] .mof-table-scroll table td { text-align: right; }

/* ── Link directory (About → Other Links) ── */
[dir="rtl"] .mof-link-directory__group-title { text-align: right; }
[dir="rtl"] .mof-link-card {
  border-left: 1px solid var(--mof-grey-border);
  border-right: 3px solid var(--mof-blue);
  text-align: right;
}
[dir="rtl"] .mof-link-card:hover { border-right-color: var(--mof-navy); }

/* ── Contact page: Ministry Contacts cards ──
   align-items:flex-start (set in main.css) already puts the icon/title/links on
   the start = right edge in RTL; just right-align the wrapped text. Phone/email
   keep LTR direction via .mof-ltr-text. */
[dir="rtl"] .mof-contact-section__intro,
[dir="rtl"] .mof-contact-card { text-align: right; }

/* ── Contact page: Send us a Message ── */
[dir="rtl"] .mof-contact-message__title,
[dir="rtl"] .mof-contact-info-card__header,
[dir="rtl"] .mof-contact-info-card__body { text-align: right; }
[dir="rtl"] .mof-contact-info-card__link { text-align: right; }
/* Office-hours: label right (start), value flips to the left (end). */
[dir="rtl"] .mof-office-hours td { text-align: right; }
[dir="rtl"] .mof-office-hours td:last-child { text-align: left; }

/* ── Breadcrumb ──
   RTL order comes from direction:rtl ALONE. Do NOT add flex-direction:row-reverse
   (it double-flips inside an already-RTL container) and do NOT inject a '/' via
   ::before — every breadcrumb in the app renders explicit __sep spans, so the
   injected slash only produced duplicates. Applies to all listing + minister
   breadcrumbs. justify-content:flex-start keeps it hugging the start (right) edge. */
[dir="rtl"] .mof-breadcrumb { direction: rtl; }
[dir="rtl"] .mof-breadcrumb__list { justify-content: flex-start; }

/* The listing/link-directory section header has a SINGLE child (eyebrow + title).
   The base RTL rule sets flex-direction:row-reverse, which — in an already-RTL
   container — moves the lone child to the LEFT. Keep it row so it stays on the
   right (mirrors the home eServices/Publications overrides). */
[dir="rtl"] .mof-section-header--stack { flex-direction: row; }

/* ── Page layout ── */
[dir="rtl"] .mof-page-layout__grid { direction: rtl; }
[dir="rtl"] .mof-page-section-header { text-align: right; }
[dir="rtl"] .mof-page-section-header .mof-section-label { display: block; text-align: right; }

/* ── Sidebar ── */
[dir="rtl"] .mof-sidebar { direction: rtl; }
[dir="rtl"] .mof-sidebar__block-title { text-align: right; }

/* Sidebar navigation */
[dir="rtl"] .mof-sidebar-nav__link {
  text-align: right;
  border-left: none;
  border-right: 3px solid transparent;
  padding-left: 12px;
  padding-right: 14px;
}
[dir="rtl"] .mof-sidebar-nav__link:hover,
[dir="rtl"] .mof-sidebar-nav__link[aria-current="page"] {
  border-right-color: var(--mof-blue);
  border-left-color: transparent;
  padding-right: 20px;
  padding-left: 12px;
}

/* Sidebar document */
[dir="rtl"] .mof-sidebar-doc { flex-direction: row-reverse; text-align: right; }

/* ── Filter bar ── */
[dir="rtl"] .mof-filter-bar__inner { flex-direction: row-reverse; }
[dir="rtl"] .mof-filter-bar__select,
[dir="rtl"] .mof-filter-bar__month,
[dir="rtl"] .mof-filter-bar__search { direction: rtl; }
[dir="rtl"] .mof-filter-bar__search input { text-align: right; }
/* Listing loader: keep the spinner→text order natural in RTL. */
[dir="rtl"] .mof-listing-loader__box { direction: rtl; }
[dir="rtl"] .mof-filter-tags { flex-direction: row-reverse; }
[dir="rtl"] .mof-filter-bar__actions { flex-direction: row-reverse; }

/* ── Listing header ── */
[dir="rtl"] .mof-listing-header__inner { flex-direction: row-reverse; }
[dir="rtl"] .mof-listing-header__title { text-align: right; }
[dir="rtl"] .mof-listing-header__count { text-align: right; }
[dir="rtl"] .mof-view-toggle { flex-direction: row-reverse; }

/* ── Document card ──
   The card carries `direction: rtl`, so its flex children must use plain `row`
   (NOT row-reverse) — direction:rtl alone lays them right-to-left. Using
   row-reverse here double-flips back to LTR (icon lands on the left, buttons in
   reverse order). With `row`:
   - card: icon/header first → far RIGHT, then title, then meta on the left;
   - header: icon on the far right, badges to its left;
   - actions: full-width row, justify-content:flex-end resolves to the LEFT in RTL
     (button group on the far left), ordered تحميل PDF → … → عرض (right → left);
   - meta: date on the right, file size to its left. */
[dir="rtl"] .mof-document-card { direction: rtl; text-align: right; }
[dir="rtl"] .mof-document-card__header { flex-direction: row; }
[dir="rtl"] .mof-document-card__meta { flex-direction: row; flex-wrap: wrap; }
[dir="rtl"] .mof-document-card__actions { flex-direction: row; }
[dir="rtl"] .mof-document-card__title { text-align: right; }

/* ── News card ── */
[dir="rtl"] .mof-news-card { direction: rtl; }
[dir="rtl"] .mof-news-card__meta { flex-direction: row-reverse; }
[dir="rtl"] .mof-news-card__body { text-align: right; }
[dir="rtl"] .mof-news-card__title { text-align: right; }
[dir="rtl"] .mof-news-card__read-more { flex-direction: row-reverse; margin-right: 0; margin-left: auto; }
/* The read-more arrow points right (→) in LTR; flip it to point left (←) in RTL. */
[dir="rtl"] .mof-news-card__read-more svg { transform: scaleX(-1); }
/* Category pill overlays the top-right of the image in RTL. */
[dir="rtl"] .mof-news-card__category { left: auto; right: 14px; }
[dir="rtl"] .mof-news-card__category--featured { left: auto; right: 18px; }

/* ── Media listing tabs ──
   The base RTL rule sets .mof-search-tabs to row-reverse, which — inside the
   already-RTL page — pushes the tabs to the LEFT. Keep them row so they start at
   the right (English is unaffected; this is scoped to the media listing). */
[dir="rtl"] .mof-media-listing .mof-search-tabs { flex-direction: row; }
[dir="rtl"] .mof-media-empty { text-align: center; }

/* ── Pagination ── */
[dir="rtl"] .mof-pagination__inner { flex-direction: row-reverse; }
[dir="rtl"] .mof-pagination__btn--prev svg { transform: scaleX(-1); }
[dir="rtl"] .mof-pagination__btn--next svg { transform: scaleX(-1); }
/* Media pager: the DOM order is [Prev, 1…, Next]; direction:rtl alone lays it out
   right-to-left (Prev rightmost / Next leftmost). Keep flex-direction:row here so
   the global row-reverse above doesn't double-flip it back to Prev-on-the-left. */
[dir="rtl"] .mof-media-listing .mof-pagination__inner { flex-direction: row; }
/* Same guard for the Finance/Taxation/About listing pager (also inside a
   direction:rtl page): use plain row so Prev lands on the right, Next on the left. */
[dir="rtl"] .mof-listing-layout__main .mof-pagination__inner { flex-direction: row; }

/* ── Publication detail ── */
[dir="rtl"] .mof-pub-detail-layout { direction: rtl; }
[dir="rtl"] .mof-pub-meta-list { direction: rtl; }
[dir="rtl"] .mof-pub-meta-list dt { text-align: right; }
[dir="rtl"] .mof-pub-meta-list dd { text-align: right; }
[dir="rtl"] .mof-btn-download-large,
[dir="rtl"] .mof-btn-preview { flex-direction: row-reverse; }

/* ── Article content ── */
[dir="rtl"] .mof-article-content { direction: rtl; text-align: right; }
[dir="rtl"] .mof-article-content ul,
[dir="rtl"] .mof-article-content ol { padding-left: 0; padding-right: 24px; }
[dir="rtl"] .mof-article-content blockquote {
  border-left: none;
  border-right: 4px solid var(--mof-blue);
  padding-left: 0;
  padding-right: 20px;
  text-align: right;
}

/* ── Share bar ── */
[dir="rtl"] .mof-share-bar { flex-direction: row-reverse; }

/* Media detail: the share bar and sidebar-doc already live inside a
   direction:rtl layout (.mof-page-layout__grid), so the generic row-reverse
   above double-flips them back to LTR. Scope a plain `row` to this page so
   direction:rtl alone orders them (label/icon on the right). Only affects the
   media detail page. */
[dir="rtl"] .mof-media-detail .mof-share-bar { flex-direction: row; }
[dir="rtl"] .mof-media-detail .mof-share-bar__label { margin-right: 0; margin-left: 4px; }
[dir="rtl"] .mof-media-detail .mof-sidebar-doc { flex-direction: row; }

/* Article Details rows align to the right in Arabic. */
[dir="rtl"] .mof-media-detail .mof-article-detail-row { align-items: flex-end; text-align: right; }
[dir="rtl"] .mof-media-detail .mof-article-detail-row__badge { align-self: flex-end; }

/* ── Related section ── */
[dir="rtl"] .mof-related__grid { direction: rtl; }

/* ── Search results ── */
[dir="rtl"] .mof-search-bar-page { flex-direction: row-reverse; }
[dir="rtl"] .mof-search-bar-page input { text-align: right; }
[dir="rtl"] .mof-search-tabs { flex-direction: row-reverse; }
[dir="rtl"] .mof-result-item { direction: rtl; text-align: right; }
[dir="rtl"] .mof-result-item__meta { flex-direction: row-reverse; }

/* ── About page ── */
[dir="rtl"] .mof-mission-split { direction: rtl; }
[dir="rtl"] .mof-mission-block { text-align: right; direction: rtl; }
[dir="rtl"] .mof-mission-block__icon { margin-right: 0; margin-left: auto; }
[dir="rtl"] .mof-values-grid { direction: rtl; }
[dir="rtl"] .mof-value-card { direction: rtl; text-align: right; }
[dir="rtl"] .mof-leadership-card { direction: rtl; text-align: center; }

/* ── Minister bio ── */
[dir="rtl"] .mof-minister-bio { direction: rtl; }
[dir="rtl"] .mof-minister-bio__text { text-align: right; }
[dir="rtl"] .mof-minister-bio__quote-block {
  border-left: none;
  border-right: 4px solid var(--mof-blue);
  padding-left: 0;
  padding-right: 24px;
  text-align: right;
}

/* ── Contact page ── */
[dir="rtl"] .mof-dept-card { direction: rtl; text-align: right; }
[dir="rtl"] .mof-dept-card__info { flex-direction: row-reverse; }
[dir="rtl"] .mof-contact-form { direction: rtl; }
[dir="rtl"] .mof-contact-form label { text-align: right; }
[dir="rtl"] .mof-contact-form input,
[dir="rtl"] .mof-contact-form select,
[dir="rtl"] .mof-contact-form textarea { text-align: right; direction: rtl; }
/* Consent row: keep flex-direction:row so, inside the already-RTL form, the
   checkbox (first child) sits at the start = RIGHT and the text follows to its
   left. row-reverse double-flipped it and pushed the checkbox to the left. */
[dir="rtl"] .mof-contact-form .mof-form-checkbox { flex-direction: row; }

/* ── Sitemap ── */
[dir="rtl"] .mof-sitemap__grid { direction: rtl; }
[dir="rtl"] .mof-sitemap__section-title { text-align: right; }
/* Rows must stay full width. Shrink-wrapping them with align-items:flex-end would leave each
   separator only as wide as its own label instead of spanning the column. */
[dir="rtl"] .mof-sitemap__links { align-items: stretch; }
/* The row is ALREADY mirrored by direction:rtl — the flex main axis runs right-to-left, so the
   ::before bullet lands at the start = right and the label follows to its left. Adding
   row-reverse flipped it a second time, which is what pushed the bullet to the far left and
   left the Arabic text hugging the wrong edge. Same trap as .mof-contact-form
   .mof-form-checkbox above; the fix is the same — state row explicitly so the design-system
   default cannot creep back. */
[dir="rtl"] .mof-sitemap__link { flex-direction: row; }

/* ── Legal content (privacy, accessibility) ── */
[dir="rtl"] .mof-legal-content { direction: rtl; text-align: right; }
[dir="rtl"] .mof-legal-toc { direction: rtl; text-align: right; }
[dir="rtl"] .mof-legal-toc a { flex-direction: row-reverse; }
[dir="rtl"] .mof-legal-update { text-align: right; flex-direction: row-reverse; }

/* ── 404 page ── */
[dir="rtl"] .mof-404 { direction: rtl; }
[dir="rtl"] .mof-404__search { flex-direction: row-reverse; }
[dir="rtl"] .mof-404__search input { text-align: right; }
[dir="rtl"] .mof-404__links { direction: rtl; }
[dir="rtl"] .mof-404__quick-link { flex-direction: row-reverse; text-align: right; }

/* ── Taxation page ── */
[dir="rtl"] .mof-tax-categories { direction: rtl; }
[dir="rtl"] .mof-tax-cat-card { direction: rtl; text-align: right; }
[dir="rtl"] .mof-tax-calendar { direction: rtl; }
[dir="rtl"] .mof-tax-calendar th,
[dir="rtl"] .mof-tax-calendar td { text-align: right; }

/* ── Highlight card ── */
[dir="rtl"] .mof-highlight-card { direction: rtl; }
[dir="rtl"] .mof-highlight-card__inner { flex-direction: row-reverse; }
[dir="rtl"] .mof-highlight-card__body { text-align: right; }

/* ── Callout ── */
[dir="rtl"] .mof-callout { direction: rtl; text-align: right; }
[dir="rtl"] .mof-callout--gold {
  border-left: none;
  border-right: 4px solid var(--mof-blue);
  padding-left: 16px;
  padding-right: 20px;
}

/* ── Arabic-specific font sizes — Part 2 ── */
[dir="rtl"] .mof-content-hero__title { font-size: clamp(22px, 3vw, 38px); letter-spacing: 0; }
[dir="rtl"] .mof-minister-bio__quote { font-size: 18px; }
[dir="rtl"] .mof-document-card__title { font-size: 15px; }
[dir="rtl"] .mof-news-card__title { font-size: 17px; }

/* ============================================================
   PART 3 — RTL ALIAS FIXES
   Matches Part 3 CSS class aliases added to main.css
   ============================================================ */

/* ── Language toggle (inner pages BEM modifiers) ── */
[dir="rtl"] .mof-lang-toggle__btn { direction: rtl; }
[dir="rtl"] .mof-lang-toggle--mobile { flex-direction: row-reverse; }

/* ── Breadcrumb current item ── */
[dir="rtl"] .mof-breadcrumb__item--current { text-align: right; }

/* ── Overlay backdrop ── */
[dir="rtl"] .mof-overlay { direction: rtl; }

/* ── Mobile nav list (inner pages) ── */
[dir="rtl"] .mof-mobile-nav__list { direction: rtl; }
[dir="rtl"] .mof-mobile-nav__link {
  text-align: right;
  flex-direction: row;
  justify-content: flex-start;
  border-left: none;
  border-right: 3px solid transparent;
  padding-left: 16px;
  padding-right: 16px;
}
[dir="rtl"] .mof-mobile-nav__link:hover,
[dir="rtl"] .mof-mobile-nav__link.mof-is-active,
[dir="rtl"] .mof-mobile-nav__link[aria-current="page"] {
  border-right-color: var(--mof-blue);
  border-left-color: transparent;
  padding-right: 20px;
  padding-left: 16px;
}

/* ── Section wrapper ── */
[dir="rtl"] .mof-section { direction: rtl; }

/* ── Header brand country ── */
[dir="rtl"] .mof-header__brand-country { letter-spacing: 0; }

/* ── Search overlay bar ── */
[dir="rtl"] .mof-search-overlay__bar { flex-direction: row-reverse; }
[dir="rtl"] .mof-search-overlay__bar .mof-search-overlay__icon {
  order: 2;
  padding: 0 14px;
}
[dir="rtl"] .mof-search-overlay__bar .mof-search-overlay__input {
  text-align: right;
  direction: rtl;
}
[dir="rtl"] .mof-search-overlay__bar .mof-search-overlay__submit {
  order: 1;
  margin: 8px 8px 8px 0;
}

/* ── Layout aliases ── */
[dir="rtl"] .mof-dept-grid { direction: rtl; }
[dir="rtl"] .mof-leadership-grid { direction: rtl; }
[dir="rtl"] .mof-contact-cols { direction: rtl; }
[dir="rtl"] .mof-legal-layout { direction: rtl; }
[dir="rtl"] .mof-filter-bar__row { flex-direction: row-reverse; }
[dir="rtl"] .mof-listing-header { flex-direction: row-reverse; }
[dir="rtl"] .mof-listing-header__controls { flex-direction: row-reverse; }

/* ── Dropdown navigation RTL ── */
/* Level 1 opens UNDER the nav item in both directions; only its edge alignment mirrors. */
[dir="rtl"] .mof-nav__dropdown {
  left: auto;
  right: 0;
}
[dir="rtl"] .mof-nav__dropdown::before {
  left: auto;
  right: 24px;
}
/* Level 2 cascades to the LEFT in Arabic, with its chevron pointing left to match. */
[dir="rtl"] .mof-nav__flyout {
  left: auto;
  right: 100%;
  transform: translateX(6px);
}
[dir="rtl"] .mof-nav__dropdown > li.mof-has-flyout:hover > .mof-nav__flyout {
  transform: translateX(0);
}
[dir="rtl"] .mof-nav__dropdown > li.mof-has-flyout > .mof-nav__dropdown-link::after {
  transform: rotate(-135deg);
}
[dir="rtl"] .mof-nav__flyout.mof-flyout-flip {
  right: auto;
  left: 100%;
  transform: translateX(-6px);
}
[dir="rtl"] .mof-nav__dropdown > li.mof-has-flyout:hover > .mof-nav__flyout.mof-flyout-flip {
  transform: translateX(0);
}
/* Indent guides sit on the right in Arabic. */
[dir="rtl"] .mof-mobile-nav__sub2 {
  padding: 0 14px 0 0;
}
[dir="rtl"] .mof-mobile-nav__sub2-link {
  border-left: none;
  border-right: 2px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-sm) 0 0 var(--mof-radius-sm);
}
[dir="rtl"] .mof-mobile-nav__sub2-link:hover {
  border-right-color: var(--mof-blue);
}
[dir="rtl"] .mof-nav__dropdown-link:hover {
  padding-left: 20px;
  padding-right: 26px;
}
/* direction:rtl already places dropdown-btn to the left of the link text (correct RTL convention) */
[dir="rtl"] .mof-nav__dropdown-btn {
  margin-left: 0;
  margin-right: -6px;
}

/* ── Mobile accordion RTL ── */
/* row (not row-reverse) so inherited direction:rtl puts text right, arrow left */
[dir="rtl"] .mof-mobile-nav__link-row { flex-direction: row; }
[dir="rtl"] .mof-mobile-nav__sub { padding: 0 12px 0 0; }
[dir="rtl"] .mof-mobile-nav__sub-link {
  border-left: none;
  border-right: 2px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-sm) 0 0 var(--mof-radius-sm);
}
[dir="rtl"] .mof-mobile-nav__sub-link:hover {
  padding-left: 16px;
  padding-right: 20px;
  border-right-color: var(--mof-blue);
}

/* ── Footer app buttons RTL ── */
[dir="rtl"] .mof-footer__app-buttons { flex-direction: row; }

/* ============================================================
   HERO SLIDER — RTL
   ============================================================ */

/* Slide content flows right-to-left */
[dir="rtl"] .mof-slider__content { text-align: right; }
[dir="rtl"] .mof-slider__title { letter-spacing: 0; font-family: var(--mof-font-ar); }
[dir="rtl"] .mof-slider__badge { letter-spacing: 0; }

/* Controls: mirror to bottom-left */
[dir="rtl"] .mof-slider__controls {
  right: auto;
  left: 40px;
}

/* Flip arrow icons so prev → points right, next → points left (RTL convention) */
[dir="rtl"] .mof-slider__btn svg { transform: scaleX(-1); }

/* ============================================================
   SPOTLIGHT SECTION — RTL
   ============================================================ */

/* Grid direction */
[dir="rtl"] .mof-spotlight__grid { direction: rtl; }
[dir="rtl"] .mof-spotlight__search-col { text-align: right; }

/* Heading */
[dir="rtl"] .mof-spotlight__heading {
  font-family: var(--mof-font-ar);
  letter-spacing: 0;
}

/* Search bar */
[dir="rtl"] .mof-spotlight__search-wrap { flex-direction: row-reverse; }
/* right-aligned placeholder needs space before the search button */
[dir="rtl"] .mof-spotlight__search-input { text-align: right; padding-right: 14px; }

/* Quick tags — row (not row-reverse) so inherited rtl puts label right, tags flow left */
[dir="rtl"] .mof-spotlight__quick-tags { flex-direction: row; }
[dir="rtl"] .mof-spotlight__quick-label { letter-spacing: 0; font-family: var(--mof-font-ar); }

/* News ticker — row so heading/date sit right, text flows left (rtl) */
[dir="rtl"] .mof-spotlight__ticker-heading { flex-direction: row; }
[dir="rtl"] .mof-spotlight__ticker-item { flex-direction: row; }

/* ≤1024px: shift controls to bottom-left to mirror LTR bottom-right */
@media (max-width: 1024px) {
  [dir="rtl"] .mof-slider__controls { left: 28px; right: auto; }
}

/* ≤768px: match LTR centred-controls position exactly */
@media (max-width: 768px) {
  [dir="rtl"] .mof-slider__controls {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}

/* ≤576px: stacked search — drop row-reverse so stacked full-width blocks read correctly */
@media (max-width: 576px) {
  [dir="rtl"] .mof-spotlight__search-wrap { flex-direction: column; }
  [dir="rtl"] .mof-spotlight__search-input { text-align: right; }
  [dir="rtl"] .mof-spotlight__search-btn { direction: rtl; text-align: center; }
}

/* ============================================================
   eSERVICES SECTION — RTL MOBILE FIX
   The desktop RTL rule (line ~113) forces the eservices section
   header to flex-direction:row. On mobile that keeps the long
   "view all" link inline next to the title and pushes it outside
   the container (horizontal overflow), and squeezes the title/
   description block. Restore the English mobile behaviour for RTL:
   stack the header into a column, keep the title/description block
   full width and right-aligned, and let the link sit in normal flow,
   right-aligned and wrapping so it can never overflow.
   `html[dir="rtl"]` raises specificity above the desktop rule, so the
   stack wins regardless of source order. English (LTR) is untouched.
   ============================================================ */
@media (max-width: 768px) {
  html[dir="rtl"] .mof-eservices .mof-section-header {
    flex-direction: column;
    align-items: flex-start;   /* cross-start = the right edge in RTL */
    text-align: right;
  }

  /* Title / eyebrow / description block: full width, right-aligned. */
  html[dir="rtl"] .mof-eservices .mof-section-header > div {
    width: 100%;
    text-align: right;
  }

  /* "View all eServices" link: stay in flow at the right edge and wrap
     so the long Arabic label never spills outside the container. */
  html[dir="rtl"] .mof-eservices .mof-section-link {
    align-self: flex-start;    /* right edge in RTL */
    max-width: 100%;
    white-space: normal;
  }
}