/* ============================================================
   MINISTRY OF FINANCE LEBANON
   Main Stylesheet — Part 1
   ============================================================ */

/* ── Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap');

/* ── Design Tokens ── */
:root {
  /* ── Official depth / structure ── */
  --mof-navy:        #0B1F3A;
  --mof-navy-dark:   #071527;
  --mof-navy-mid:    #122848;

  /* ── Primary action blue (#4491FF government-blue system) ── */
  --mof-blue:        #4491FF;   /* primary CTA / accent — replaces old #1E4E8C */
  --mof-blue-light:  #1F6FE5;   /* hover / pressed shade */
  --mof-bg-light:    #EEF6FF;   /* soft primary panel background */
  --mof-primary-border: #CFE3FF; /* soft primary border / divider */

  /* ── Limited gold — retained only for statistics KPI numbers ── */
  --mof-gold:        #C4A44A;
  --mof-gold-light:  #d4b76a;
  --mof-gold-dark:   #a88c38;

  /* ── Neutral surface system ── */
  --mof-white:       #FFFFFF;
  --mof-grey-bg:     #F6F9FC;   /* cooler off-white — was #F5F7FA */
  --mof-grey-border: #DDE7F0;   /* cooler border — was #E2E8F0 */
  --mof-grey-mid:    #94A3B8;

  /* ── Typography ── */
  --mof-text:        #0B1F33;   /* deep navy text — was #1F2937 */
  --mof-text-light:  #3D5166;   /* cooler muted — was #4B5563 */
  --mof-text-muted:  #5B6B7C;   /* cooler muted — was #6B7280 */

  --mof-shadow-sm:   0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --mof-shadow-md:   0 4px 12px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --mof-shadow-lg:   0 10px 30px rgba(0,0,0,.10), 0 4px 10px rgba(0,0,0,.06);
  --mof-shadow-xl:   0 20px 50px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.07);

  --mof-radius-sm:   4px;
  --mof-radius:      8px;
  --mof-radius-md:   12px;
  --mof-radius-lg:   16px;
  --mof-radius-xl:   24px;

  --mof-transition:  all 0.22s cubic-bezier(.4,0,.2,1);
  --mof-transition-slow: all 0.38s cubic-bezier(.4,0,.2,1);

  --mof-container:   1320px;
  --mof-gap:         32px;

  --mof-font-en:     'Inter', Arial, sans-serif;
  --mof-font-heading:'Playfair Display', Georgia, serif;
  --mof-font-ar:     'Noto Sans Arabic', Arial, sans-serif;

  --mof-z-header:    100;
  --mof-z-dropdown:  150;
  --mof-z-overlay:   200;
  --mof-z-modal:     300;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--mof-font-en);
  font-size: 16px;
  line-height: 1.6;
  color: var(--mof-text);
  background: var(--mof-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; }
input, textarea, select { font: inherit; }

/* ── Skip Link ── */
.mof-skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 10px 20px;
  background: var(--mof-blue);
  color: var(--mof-navy);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--mof-radius-sm);
  transition: top 0.2s ease;
}
.mof-skip-link:focus {
  top: 16px;
  outline: 3px solid var(--mof-navy);
  outline-offset: 2px;
}

/* ── Container ── */
.mof-container {
  max-width: var(--mof-container);
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Utility ── */
.mof-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mof-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mof-badge--category {
  background: var(--mof-bg-light);
  color: var(--mof-blue);
  border: 1px solid rgba(68,145,255,.15);
}
.mof-badge--type {
  background: rgba(68,145,255,.12);
  color: var(--mof-blue-light);
  border: 1px solid rgba(68,145,255,.25);
}
.mof-badge--new {
  background: #DCFCE7;
  color: #166534;
  border: 1px solid #BBF7D0;
}

/* ── Focus visible ── */
:focus-visible {
  outline: 2px solid var(--mof-blue);
  outline-offset: 3px;
  border-radius: var(--mof-radius-sm);
}

/* ============================================================
   ANNOUNCEMENT BAR
   ============================================================ */
.mof-announcement-bar {
  background: var(--mof-navy-dark);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  line-height: 1;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.mof-announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  gap: 24px;
}
.mof-announcement-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}
.mof-announcement-bar__alert {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  background: rgba(68,145,255,.18);
  border: 1px solid rgba(68,145,255,.3);
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.mof-announcement-bar__alert-dot {
  width: 6px;
  height: 6px;
  background: var(--mof-blue);
  border-radius: 50%;
  animation: mof-pulse 1.8s ease-in-out infinite;
}
.mof-announcement-bar__alert span {
  font-size: 12px;
  font-weight: 500;
  color: var(--mof-blue);
}
.mof-announcement-bar__text {
  font-size: 12.5px;
  color: rgba(255,255,255,.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mof-announcement-bar__right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.mof-announcement-bar__contact {
  display: flex;
  align-items: center;
  gap: 16px;
}
.mof-announcement-bar__contact a {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.7);
  font-size: 12.5px;
  transition: var(--mof-transition);
}
.mof-announcement-bar__contact a:hover { color: var(--mof-blue); }
.mof-announcement-bar__contact svg { flex-shrink: 0; }
.mof-announcement-bar__divider {
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.15);
}
.mof-lang-toggle {
  display: flex;
  align-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 20px;
  overflow: hidden;
}
.mof-lang-toggle a {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  transition: var(--mof-transition);
  letter-spacing: .03em;
}
.mof-lang-toggle a.mof-active,
.mof-lang-toggle a:hover {
  background: var(--mof-blue);
  color: var(--mof-white);
}
.mof-lang-toggle a.mof-active { font-weight: 700; color: var(--mof-white); }

/* ============================================================
   HEADER
   ============================================================ */
.mof-header {
  position: sticky;
  top: 0;
  z-index: var(--mof-z-header);
  background: var(--mof-white);
  border-bottom: 1px solid var(--mof-grey-border);
  transition: box-shadow 0.25s ease;
}
.mof-header.mof-is-scrolled {
  box-shadow: var(--mof-shadow-md);
}
.mof-header__inner {
  display: flex;
  align-items: center;
  height: 76px;
  gap: 32px;
}
.mof-header__brand {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  text-decoration: none;
}
.mof-header__logo {
  height: 52px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  flex-shrink: 0;
}
.mof-header__brand-text { line-height: 1.25; }
.mof-header__brand-en {
  display: block;
  font-family: var(--mof-font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--mof-navy);
  letter-spacing: .01em;
}
.mof-header__brand-ar {
  display: block;
  font-family: var(--mof-font-ar);
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-text-light);
  margin-top: 1px;
}
.mof-header__nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mof-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mof-header__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--mof-radius);
  color: var(--mof-text-light);
  transition: var(--mof-transition);
}
.mof-header__search-btn:hover {
  background: var(--mof-bg-light);
  color: var(--mof-navy);
}
.mof-btn-eservices {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  background: linear-gradient(135deg, var(--mof-blue) 0%, var(--mof-blue-light) 100%);
  color: var(--mof-navy);
  font-size: 13.5px;
  font-weight: 700;
  border-radius: var(--mof-radius);
  letter-spacing: .02em;
  transition: var(--mof-transition);
  box-shadow: 0 2px 8px rgba(68,145,255,.35);
  white-space: nowrap;
}
.mof-btn-eservices:hover {
  background: linear-gradient(135deg, var(--mof-blue-light) 0%, var(--mof-blue) 100%);
  box-shadow: 0 4px 14px rgba(68,145,255,.5);
  transform: translateY(-1px);
  color: var(--mof-navy);
}
.mof-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  gap: 5px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
  color: var(--mof-navy);
}
.mof-hamburger:hover { background: var(--mof-bg-light); }

/* ── Main Navigation ── */
.mof-nav {
  display: flex;
  align-items: center;
  gap: 2px;
}
.mof-nav__item {
  position: relative;
}
.mof-nav__link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mof-text);
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
  white-space: nowrap;
  letter-spacing: .01em;
}
.mof-nav__link:hover,
.mof-nav__item.mof-is-active > .mof-nav__link {
  color: var(--mof-blue);
  background: var(--mof-bg-light);
}
.mof-nav__item.mof-is-active > .mof-nav__link {
  font-weight: 600;
}
.mof-nav__link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--mof-blue);
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transform: scaleX(0);
  transition: var(--mof-transition);
}
.mof-nav__item.mof-is-active > .mof-nav__link::after,
.mof-nav__link:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* ── Dropdown Navigation ── */
.mof-nav__item.mof-has-dropdown {
  display: flex;
  align-items: center;
  position: relative;
}

/* Suppress the link's own underline for dropdown items */
.mof-nav__item.mof-has-dropdown > .mof-nav__link::after { display: none; }

/* Centered underline on the item — uses explicit width+translate so it
   spans text+chevron and stays RTL-safe (avoids left:0/right:0 stretching) */
.mof-nav__item.mof-has-dropdown::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: calc(100% - 28px);
  height: 2px;
  background: var(--mof-blue);
  border-radius: 2px 2px 0 0;
  opacity: 0;
  transform: translateX(-50%) scaleX(0);
  transition: var(--mof-transition);
}
.mof-nav__item.mof-has-dropdown:hover::after,
.mof-nav__item.mof-has-dropdown.mof-dropdown-open::after,
.mof-nav__item.mof-is-active.mof-has-dropdown::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
}

/* Background covers the whole item (link + chevron) on hover/active */
.mof-nav__item.mof-has-dropdown:hover,
.mof-nav__item.mof-has-dropdown.mof-dropdown-open,
.mof-nav__item.mof-is-active.mof-has-dropdown {
  background: var(--mof-bg-light);
  border-radius: var(--mof-radius);
}
/* Remove the per-link background so it doesn't double up */
.mof-nav__item.mof-has-dropdown:hover > .mof-nav__link,
.mof-nav__item.mof-has-dropdown.mof-dropdown-open > .mof-nav__link,
.mof-nav__item.mof-is-active.mof-has-dropdown > .mof-nav__link {
  background: transparent;
}
.mof-nav__dropdown-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: -6px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mof-text-muted);
  border-radius: 4px;
  transition: var(--mof-transition);
  flex-shrink: 0;
}
.mof-nav__dropdown-btn:hover,
.mof-nav__dropdown-btn[aria-expanded="true"] {
  color: var(--mof-blue);
}
.mof-nav__dropdown-btn svg {
  transition: transform 0.2s ease;
}
.mof-nav__dropdown-btn[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
/* LEVEL 1 — opens directly UNDER the nav item. */
.mof-nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 230px;
  background: var(--mof-white);
  border-radius: var(--mof-radius-md);
  box-shadow: 0 8px 32px rgba(11,31,58,.14), 0 2px 8px rgba(11,31,58,.08);
  border: 1px solid var(--mof-grey-border);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: var(--mof-z-dropdown);
}
.mof-nav__dropdown::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--mof-white);
  border-top: 1px solid var(--mof-grey-border);
  border-left: 1px solid var(--mof-grey-border);
  transform: rotate(45deg);
}
.mof-nav__item.mof-has-dropdown:hover .mof-nav__dropdown,
.mof-nav__item.mof-has-dropdown.mof-dropdown-open .mof-nav__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.mof-nav__dropdown-link {
  display: block;
  padding: 9px 20px;
  font-size: 13.5px;
  font-weight: 400;
  color: var(--mof-text);
  transition: var(--mof-transition);
  white-space: nowrap;
}
.mof-nav__dropdown-link:hover {
  background: var(--mof-bg-light);
  color: var(--mof-blue);
  padding-left: 26px;
}

/* ── LEVEL 2 — cascading flyout ──
   A dropdown row that has children of its own opens a second panel BESIDE it: to the right
   in LTR, mirrored to the left in RTL (rtl.css). The row is the positioning context, so the
   flyout tracks it as the list scrolls or reflows.

   The panel is flush against the row (left: 100%), which means the pointer crosses no dead
   gap on its way over and the flyout cannot flicker shut. */
.mof-nav__dropdown > li {
  position: relative;
}
/* Row marker + the little right-pointing chevron that advertises a submenu. */
.mof-nav__dropdown > li.mof-has-flyout > .mof-nav__dropdown-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mof-nav__dropdown > li.mof-has-flyout > .mof-nav__dropdown-link::after {
  content: '';
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}
.mof-nav__dropdown > li.mof-has-flyout:hover > .mof-nav__dropdown-link {
  background: var(--mof-bg-light);
  color: var(--mof-blue);
}
.mof-nav__flyout {
  position: absolute;
  top: -6px;
  left: 100%;
  right: auto;
  min-width: 235px;
  max-width: 330px;
  background: var(--mof-white);
  border-radius: var(--mof-radius-md);
  box-shadow: 0 8px 32px rgba(11,31,58,.14), 0 2px 8px rgba(11,31,58,.08);
  border: 1px solid var(--mof-grey-border);
  padding: 6px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
  z-index: calc(var(--mof-z-dropdown) + 1);
}
.mof-nav__dropdown > li.mof-has-flyout:hover > .mof-nav__flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}
/* No room on the default side — navigation.js measures and mirrors it. */
.mof-nav__flyout.mof-flyout-flip {
  left: auto;
  right: 100%;
  transform: translateX(6px);
}
.mof-nav__dropdown > li.mof-has-flyout:hover > .mof-nav__flyout.mof-flyout-flip {
  transform: translateX(0);
}
.mof-nav__flyout-link {
  display: block;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 400;
  color: var(--mof-text-light);
  transition: var(--mof-transition);
  /* Wraps: the panel is width-capped and second-level labels get long. */
  white-space: normal;
  line-height: 1.45;
}
.mof-nav__flyout-link:hover {
  background: var(--mof-bg-light);
  color: var(--mof-blue);
}

/* ── Multi-column flyout (desktop only) ──
   A long submenu is made SHORTER rather than scrollable: 18 items in one column stood 773px
   tall and ran past the bottom of the window. Multi-column (not grid) is deliberate — it
   flows top-to-bottom then across, which is how a menu list reads, and it reverses to
   right-to-left on its own inside dir="rtl".

   Guarded by min-width so mobile keeps its single-column inline accordion; the panel itself
   is already display:none below this width. */
@media (min-width: 1025px) {
  .mof-nav__flyout--cols-2,
  .mof-nav__flyout--cols-3 {
    max-width: none;
    column-gap: 0;
    column-rule: 1px solid var(--mof-grey-border);
  }
  .mof-nav__flyout--cols-2 {
    width: min(520px, 46vw);
    columns: 2;
  }
  .mof-nav__flyout--cols-3 {
    width: min(770px, 62vw);
    columns: 3;
  }
  /* Never let one entry be split down the middle across a column break. */
  .mof-nav__flyout--cols-2 > li,
  .mof-nav__flyout--cols-3 > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  /* Last resort only. Columns plus the vertical nudge in navigation.js keep every current
     submenu fully on screen, so this never engages today — it exists so a future menu that
     is enormous degrades to a scroll instead of hiding items. */
  .mof-nav__flyout {
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* Announcement bar link */
.mof-announcement-bar__more {
  color: var(--mof-blue);
  text-decoration: underline;
}
.mof-announcement-bar__more:hover {
  color: var(--mof-white);
}

/* ============================================================
   MOBILE NAVIGATION
   ============================================================ */
.mof-mobile-nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,21,39,.6);
  backdrop-filter: blur(4px);
  z-index: calc(var(--mof-z-overlay) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mof-mobile-nav-overlay.mof-is-open { opacity: 1; pointer-events: all; }

.mof-mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 90vw);
  background: var(--mof-white);
  z-index: var(--mof-z-overlay);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--mof-shadow-xl);
  overflow-y: auto;
}
.mof-mobile-nav.mof-is-open { transform: translateX(0); }

.mof-mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid var(--mof-grey-border);
  background: var(--mof-navy);
  flex-shrink: 0;
}
.mof-mobile-nav__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mof-mobile-nav__brand img { height: 40px; width: auto; }
/* English (LTR) mobile menu logo — larger; Arabic (RTL) keeps the base size. */
[dir="ltr"] .mof-mobile-nav__brand img { height: 56px; }
.mof-mobile-nav__brand-en {
  font-family: var(--mof-font-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--mof-white);
}
.mof-mobile-nav__close {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--mof-radius);
  color: rgba(255,255,255,.7);
  transition: var(--mof-transition);
}
.mof-mobile-nav__close:hover { background: rgba(255,255,255,.1); color: var(--mof-white); }

.mof-mobile-nav__body { flex: 1; padding: 16px; }
.mof-mobile-nav__links { display: flex; flex-direction: column; gap: 2px; }
.mof-mobile-nav__link {
  display: flex;
  align-items: center;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 500;
  color: var(--mof-text);
  border-radius: var(--mof-radius);
  border-left: 3px solid transparent;
  transition: var(--mof-transition);
}
.mof-mobile-nav__link:hover {
  background: var(--mof-bg-light);
  border-left-color: var(--mof-blue);
  color: var(--mof-navy);
  padding-left: 20px;
}
.mof-mobile-nav__footer {
  padding: 20px 24px;
  border-top: 1px solid var(--mof-grey-border);
  flex-shrink: 0;
}
.mof-mobile-nav__eservices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--mof-blue) 0%, var(--mof-blue-light) 100%);
  color: var(--mof-navy);
  font-weight: 700;
  font-size: 14.5px;
  border-radius: var(--mof-radius);
  letter-spacing: .02em;
}

/* ── Mobile Nav Accordion Sub-menus ── */
.mof-mobile-nav__item--has-sub { position: relative; }
.mof-mobile-nav__link-row {
  display: flex;
  align-items: center;
}
.mof-mobile-nav__link-row .mof-mobile-nav__link {
  flex: 1;
}
.mof-mobile-nav__sub-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mof-text-muted);
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
}
.mof-mobile-nav__sub-toggle:hover {
  background: var(--mof-bg-light);
  color: var(--mof-blue);
}
.mof-mobile-nav__sub-toggle[aria-expanded="true"] {
  color: var(--mof-blue);
  background: var(--mof-bg-light);
}
.mof-mobile-nav__sub-toggle svg {
  transition: transform 0.22s ease;
}
.mof-mobile-nav__sub-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.mof-mobile-nav__sub {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  padding: 0 0 0 12px;
}
/* Generous ceiling: Finance alone has 18 first-level rows, several of which expand again.
   The old 500px silently clipped the list — it is only an animation bound, not a design size. */
.mof-mobile-nav__sub.mof-is-open {
  max-height: 3000px;
}
.mof-mobile-nav__sub-link {
  display: block;
  padding: 9px 16px;
  font-size: 13.5px;
  color: var(--mof-text-light);
  border-left: 2px solid var(--mof-grey-border);
  border-radius: 0 var(--mof-radius-sm) var(--mof-radius-sm) 0;
  transition: var(--mof-transition);
  margin-bottom: 1px;
}
.mof-mobile-nav__sub-link:hover {
  color: var(--mof-blue);
  border-left-color: var(--mof-blue);
  background: var(--mof-bg-light);
  padding-left: 20px;
}

/* ── Mobile third level ──
   On mobile there is no side flyout: a first-level row that has children expands INLINE
   underneath itself, one indent deeper than its parent. */
.mof-mobile-nav__sub-row {
  display: flex;
  align-items: center;
}
.mof-mobile-nav__sub-row .mof-mobile-nav__sub-link {
  flex: 1;
}
.mof-mobile-nav__sub2-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mof-text-muted);
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
}
.mof-mobile-nav__sub2-toggle:hover,
.mof-mobile-nav__sub2-toggle[aria-expanded="true"] {
  color: var(--mof-blue);
  background: var(--mof-bg-light);
}
.mof-mobile-nav__sub2-toggle svg {
  transition: transform 0.22s ease;
}
.mof-mobile-nav__sub2-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.mof-mobile-nav__sub2 {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease;
  padding: 0 0 0 14px;
}
.mof-mobile-nav__sub2.mof-is-open {
  max-height: 2000px;
}
.mof-mobile-nav__sub2-link {
  display: block;
  padding: 8px 16px;
  font-size: 12.5px;
  color: var(--mof-text-muted);
  border-left: 2px solid var(--mof-grey-border);
  border-radius: 0 var(--mof-radius-sm) var(--mof-radius-sm) 0;
  transition: var(--mof-transition);
}
.mof-mobile-nav__sub2-link:hover {
  color: var(--mof-blue);
  border-left-color: var(--mof-blue);
  background: var(--mof-bg-light);
}

/* ============================================================
   SEARCH OVERLAY
   ============================================================ */
.mof-search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,21,39,.92);
  backdrop-filter: blur(12px);
  z-index: var(--mof-z-modal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mof-search-overlay.mof-is-open {
  opacity: 1;
  pointer-events: all;
}
.mof-search-overlay__inner {
  width: 100%;
  max-width: 760px;
  transform: translateY(-20px);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1);
}
.mof-search-overlay.mof-is-open .mof-search-overlay__inner {
  transform: translateY(0);
}
.mof-search-overlay__close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--mof-radius);
  color: rgba(255,255,255,.7);
  font-size: 24px;
  transition: var(--mof-transition);
}
.mof-search-overlay__close:hover { background: rgba(255,255,255,.1); color: var(--mof-white); }
.mof-search-overlay__label {
  font-family: var(--mof-font-heading);
  font-size: 28px;
  font-weight: 600;
  color: var(--mof-white);
  margin-bottom: 24px;
}
.mof-search-overlay__form { position: relative; margin-bottom: 24px; }
.mof-search-overlay__input {
  width: 100%;
  height: 60px;
  padding: 0 120px 0 56px;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--mof-radius-md);
  color: var(--mof-white);
  font-size: 18px;
  transition: var(--mof-transition);
}
.mof-search-overlay__input::placeholder { color: rgba(255,255,255,.35); }
.mof-search-overlay__input:focus {
  outline: none;
  border-color: var(--mof-blue);
  background: rgba(255,255,255,.1);
}
.mof-search-overlay__icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,.5);
  pointer-events: none;
}
.mof-search-overlay__submit {
  position: absolute;
  right: 8px;
  top: 8px;
  height: 44px;
  padding: 0 24px;
  background: var(--mof-blue);
  color: var(--mof-navy);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
}
.mof-search-overlay__submit:hover { background: var(--mof-blue-light); }
.mof-search-overlay__suggestions {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--mof-radius-md);
  overflow: hidden;
  display: none;
}
.mof-search-overlay__suggestions.mof-is-visible { display: block; }
.mof-search-overlay__suggestion {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: rgba(255,255,255,.8);
  font-size: 15px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  cursor: pointer;
  transition: var(--mof-transition);
}
.mof-search-overlay__suggestion:last-child { border-bottom: none; }
.mof-search-overlay__suggestion:hover {
  background: rgba(255,255,255,.07);
  color: var(--mof-white);
  padding-left: 28px;
}
.mof-search-overlay__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}
.mof-search-overlay__tag {
  padding: 7px 16px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 20px;
  color: rgba(255,255,255,.75);
  font-size: 13px;
  cursor: pointer;
  transition: var(--mof-transition);
}
.mof-search-overlay__tag:hover {
  background: var(--mof-blue);
  border-color: var(--mof-blue);
  color: var(--mof-navy);
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.mof-hero {
  position: relative;
  background: var(--mof-navy);
  overflow: hidden;
  padding: 80px 0 120px;
  isolation: isolate;
}
/* Subtle pattern overlay */
.mof-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 50%, rgba(68,145,255,.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(68,145,255,.08) 0%, transparent 40%);
  z-index: 0;
}
/* Geometric grid lines */
.mof-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}
.mof-hero__container {
  position: relative;
  z-index: 1;
}
.mof-hero__layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 60px;
  align-items: start;
}
.mof-hero__content { max-width: 680px; }
.mof-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px 6px 8px;
  background: rgba(68,145,255,.15);
  border: 1px solid rgba(68,145,255,.35);
  border-radius: 20px;
  margin-bottom: 28px;
}
.mof-hero__badge-dot {
  width: 8px; height: 8px;
  background: var(--mof-blue);
  border-radius: 50%;
}
.mof-hero__badge-text {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mof-blue);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mof-hero__heading {
  font-family: var(--mof-font-heading);
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 700;
  color: var(--mof-white);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.mof-hero__heading em {
  font-style: italic;
  color: var(--mof-blue);
}
.mof-hero__subtitle {
  font-size: 17px;
  color: rgba(255,255,255,.68);
  line-height: 1.7;
  margin-bottom: 40px;
  max-width: 580px;
}
/* Hero Search */
.mof-hero__search {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--mof-radius-lg);
  padding: 6px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 0;
  transition: var(--mof-transition);
}
.mof-hero__search:focus-within {
  border-color: rgba(68,145,255,.6);
  background: rgba(255,255,255,.1);
}
.mof-hero__search-icon {
  flex-shrink: 0;
  padding: 0 14px;
  color: rgba(255,255,255,.45);
}
.mof-hero__search-input {
  flex: 1;
  height: 50px;
  background: transparent;
  border: none;
  color: var(--mof-white);
  font-size: 15.5px;
  outline: none;
}
.mof-hero__search-input::placeholder { color: rgba(255,255,255,.38); }
.mof-hero__search-btn {
  flex-shrink: 0;
  height: 50px;
  padding: 0 28px;
  background: var(--mof-blue);
  color: var(--mof-navy);
  font-weight: 700;
  font-size: 14.5px;
  border-radius: 10px;
  letter-spacing: .02em;
  transition: var(--mof-transition);
}
.mof-hero__search-btn:hover {
  background: var(--mof-blue);
  transform: scale(1.02);
}
/* Quick search tags */
.mof-hero__quick-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.mof-hero__quick-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mof-hero__quick-tag {
  padding: 6px 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 20px;
  font-size: 13px;
  color: rgba(255,255,255,.72);
  transition: var(--mof-transition);
  cursor: pointer;
}
.mof-hero__quick-tag:hover {
  background: rgba(68,145,255,.18);
  border-color: rgba(68,145,255,.4);
  color: var(--mof-blue);
}
/* Gold bottom border on hero */
.mof-hero__gold-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--mof-blue), transparent);
}

/* News Ticker */
.mof-news-ticker {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--mof-radius-md);
  padding: 20px 24px;
  margin-top: 40px;
}
.mof-news-ticker__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mof-blue);
  margin-bottom: 14px;
}
.mof-news-ticker__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mof-news-ticker__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
}
.mof-news-ticker__date {
  font-size: 11px;
  color: rgba(255,255,255,.4);
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
}
.mof-news-ticker__link {
  color: rgba(255,255,255,.78);
  line-height: 1.4;
  transition: var(--mof-transition);
}
.mof-news-ticker__link:hover { color: var(--mof-blue); }

/* Minister Panel */
.mof-minister-panel {
  background: var(--mof-white);
  border-radius: var(--mof-radius-lg);
  box-shadow: var(--mof-shadow-xl);
  overflow: hidden;
  border: 1px solid rgba(68,145,255,.15);
}
.mof-minister-panel__image-wrap {
  position: relative;
  height: 200px;
  background: linear-gradient(160deg, var(--mof-navy-mid), var(--mof-blue));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}
.mof-minister-panel__image-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: linear-gradient(transparent, var(--mof-white));
}
.mof-minister-panel__image {
  width: 130px;
  height: 160px;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}
.mof-minister-panel__body { padding: 20px 24px; }
.mof-minister-panel__name {
  font-family: var(--mof-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--mof-navy);
  margin-bottom: 2px;
}
.mof-minister-panel__title {
  font-size: 12px;
  font-weight: 600;
  color: var(--mof-blue);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 14px;
}
.mof-minister-panel__quote {
  font-style: italic;
  font-size: 13.5px;
  color: var(--mof-text-light);
  line-height: 1.6;
  border-left: 3px solid var(--mof-blue);
  padding-left: 14px;
  margin-bottom: 18px;
}
.mof-minister-panel__statements-heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mof-text-muted);
  margin-bottom: 10px;
}
.mof-minister-panel__statements {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mof-minister-panel__statement {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  padding: 9px 12px;
  background: var(--mof-grey-bg);
  border-radius: var(--mof-radius);
  border-left: 2px solid transparent;
  transition: var(--mof-transition);
  cursor: pointer;
}
.mof-minister-panel__statement:hover {
  border-left-color: var(--mof-blue);
  background: var(--mof-bg-light);
}
.mof-minister-panel__statement-date {
  font-size: 11px;
  color: var(--mof-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.mof-minister-panel__statement-text {
  color: var(--mof-text);
  line-height: 1.4;
}

/* ============================================================
   ESERVICES SECTION
   ============================================================ */
.mof-eservices {
  padding: 80px 0;
  background: var(--mof-grey-bg);
}
.mof-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 40px;
  gap: 24px;
}
.mof-section-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mof-blue);
  margin-bottom: 8px;
}
.mof-section-title {
  font-family: var(--mof-font-heading);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 700;
  color: var(--mof-navy);
  line-height: 1.2;
}
.mof-section-title span {
  color: var(--mof-blue);
}
.mof-section-subtitle {
  font-size: 15.5px;
  color: var(--mof-text-light);
  margin-top: 8px;
  max-width: 520px;
  line-height: 1.6;
}
.mof-section-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--mof-blue);
  white-space: nowrap;
  transition: var(--mof-transition);
  padding: 8px 0;
  flex-shrink: 0;
}
.mof-section-link:hover { color: var(--mof-navy); gap: 10px; }
.mof-section-link svg { transition: var(--mof-transition); }

.mof-eservices__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 16px;
}

.mof-eservice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 16px 24px;
  background: var(--mof-white);
  border-radius: var(--mof-radius-md);
  border: 1px solid var(--mof-grey-border);
  text-decoration: none;
  transition: var(--mof-transition);
  position: relative;
  overflow: hidden;
}
.mof-eservice-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mof-blue), var(--mof-blue-light));
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.mof-eservice-card:hover {
  border-color: rgba(68,145,255,.3);
  box-shadow: var(--mof-shadow-lg);
  transform: translateY(-4px);
}
.mof-eservice-card:hover::before { transform: scaleX(1); }
.mof-eservice-card__icon {
  width: 56px;
  height: 56px;
  background: var(--mof-bg-light);
  border-radius: var(--mof-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: var(--mof-transition);
  color: var(--mof-blue);
}
.mof-eservice-card:hover .mof-eservice-card__icon {
  background: linear-gradient(135deg, var(--mof-navy), var(--mof-blue));
  color: var(--mof-white);
}
.mof-eservice-card__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-text);
  line-height: 1.4;
  margin-bottom: 8px;
  transition: var(--mof-transition);
}
.mof-eservice-card:hover .mof-eservice-card__title { color: var(--mof-navy); }
.mof-eservice-card__arrow {
  margin-top: auto;
  width: 28px; height: 28px;
  background: var(--mof-grey-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mof-text-muted);
  transition: var(--mof-transition);
}
.mof-eservice-card:hover .mof-eservice-card__arrow {
  background: var(--mof-blue);
  color: var(--mof-navy);
}

/* ============================================================
   PUBLICATIONS SECTION
   ============================================================ */
.mof-publications {
  padding: 80px 0;
  background: var(--mof-white);
}
.mof-publications__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  overflow: hidden;
}
.mof-pub-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 18px 24px;
  border-bottom: 1px solid var(--mof-grey-border);
  background: var(--mof-white);
  transition: var(--mof-transition);
  border-left: 4px solid transparent;
  position: relative;
}
.mof-pub-row:last-child { border-bottom: none; }
.mof-pub-row:hover {
  background: var(--mof-grey-bg);
  border-left-color: var(--mof-blue);
  padding-left: 28px;
}
.mof-pub-row__date {
  font-size: 12px;
  font-weight: 600;
  color: var(--mof-text-muted);
  white-space: nowrap;
  min-width: 80px;
  flex-shrink: 0;
}
.mof-pub-row__content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mof-pub-row__title {
  flex: 1;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--mof-text);
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: var(--mof-transition);
}
.mof-pub-row:hover .mof-pub-row__title { color: var(--mof-navy); }
.mof-pub-row__badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mof-pub-row__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mof-pub-row__btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
}
.mof-pub-row__btn--view {
  color: var(--mof-blue);
  background: var(--mof-bg-light);
  border: 1px solid rgba(68,145,255,.15);
}
.mof-pub-row__btn--view:hover {
  background: var(--mof-blue);
  color: var(--mof-white);
  border-color: var(--mof-blue);
}
.mof-pub-row__btn--download {
  color: var(--mof-text-muted);
  background: transparent;
  border: 1px solid var(--mof-grey-border);
}
.mof-pub-row__btn--download:hover {
  color: var(--mof-blue-light);
  border-color: var(--mof-blue);
  background: rgba(68,145,255,.07);
}

.mof-show-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}
.mof-btn-show-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  /* Now rendered as an <a> (it navigates to the full publications listing) rather than a
     <button>, so the anchor underline and inherited link colour have to be cleared for it
     to keep looking exactly like the button it replaced. */
  text-decoration: none;
  padding: 11px 28px;
  background: var(--mof-white);
  color: var(--mof-navy);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--mof-radius);
  border: 2px solid var(--mof-grey-border);
  transition: var(--mof-transition);
}
.mof-btn-show-more:hover {
  border-color: var(--mof-blue);
  color: var(--mof-blue-light);
  background: rgba(68,145,255,.04);
}
.mof-pub-row.mof-hidden { display: none; }

/* ============================================================
   STATISTICS BAR
   ============================================================ */
.mof-statistics {
  background: linear-gradient(135deg, var(--mof-navy-dark) 0%, var(--mof-navy-mid) 50%, var(--mof-navy) 100%);
  padding: 60px 0;
  position: relative;
  overflow: hidden;
}
.mof-statistics::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 25% 50%, rgba(68,145,255,.35) 0%, transparent 50%),
    radial-gradient(circle at 75% 50%, rgba(68,145,255,.07) 0%, transparent 40%);
}
.mof-statistics__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.mof-stat-item {
  text-align: center;
  padding: 32px 24px;
  position: relative;
}
.mof-stat-item::after {
  content: '';
  position: absolute;
  right: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: rgba(255,255,255,.1);
}
.mof-stat-item:last-child::after { display: none; }
.mof-stat-item__number {
  font-family: var(--mof-font-heading);
  font-size: clamp(34px, 4vw, 46px);
  font-weight: 700;
  color: var(--mof-gold);       /* intentional: gold reserved for KPI statistics emphasis */
  line-height: 1;
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.mof-stat-item__suffix {
  font-size: 22px;
  color: var(--mof-gold-light); /* matches number gold */
}
.mof-stat-item__label {
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  line-height: 1.4;
  max-width: 140px;
  margin: 0 auto;
}

/* ============================================================
   USEFUL LINKS
   ============================================================ */
.mof-useful-links {
  padding: 80px 0;
  background: var(--mof-bg-light);
}
.mof-useful-links__grid {
  /* Flex (not grid) so an incomplete last row centres — e.g. 4 + 3 cards. */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}
.mof-useful-link-card {
  flex: 0 1 calc(25% - 12px);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 22px;
  background: var(--mof-white);
  border-radius: var(--mof-radius-md);
  border: 1px solid rgba(68,145,255,.1);
  transition: var(--mof-transition);
  text-decoration: none;
}
.mof-useful-link-card:hover {
  box-shadow: var(--mof-shadow-md);
  border-color: rgba(68,145,255,.3);
  transform: translateY(-2px);
}
.mof-useful-link-card__icon {
  width: 44px; height: 44px;
  background: var(--mof-bg-light);
  border-radius: var(--mof-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mof-blue);
  flex-shrink: 0;
  transition: var(--mof-transition);
}
.mof-useful-link-card:hover .mof-useful-link-card__icon {
  background: var(--mof-navy);
  color: var(--mof-blue);
}
.mof-useful-link-card__body { flex: 1; min-width: 0; }
.mof-useful-link-card__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mof-navy);
  margin-bottom: 2px;
  line-height: 1.3;
  transition: var(--mof-transition);
}
.mof-useful-link-card:hover .mof-useful-link-card__title { color: var(--mof-blue); }
.mof-useful-link-card__domain {
  font-size: 11.5px;
  color: var(--mof-text-muted);
}
.mof-useful-link-card__ext {
  flex-shrink: 0;
  color: var(--mof-grey-mid);
  transition: var(--mof-transition);
}
.mof-useful-link-card:hover .mof-useful-link-card__ext { color: var(--mof-blue); }

/* ============================================================
   CONNECT SECTION (Map / Social / Newsletter)
   ============================================================ */
.mof-connect {
  padding: 80px 0;
  background: var(--mof-white);
}
.mof-connect__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.mof-connect-col__heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mof-blue);
  margin-bottom: 10px;
}
.mof-connect-col__title {
  font-family: var(--mof-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--mof-navy);
  margin-bottom: 20px;
}

/* Map */
.mof-map-placeholder {
  width: 100%;
  height: 220px;
  border-radius: var(--mof-radius-md);
  overflow: hidden;
  margin-bottom: 20px;
  background: var(--mof-bg-light);
  position: relative;
  border: 1px solid var(--mof-grey-border);
}
.mof-map-placeholder img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.mof-address-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mof-address-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--mof-text-light);
}
.mof-address-item__icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--mof-bg-light);
  border-radius: var(--mof-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mof-blue);
  margin-top: 1px;
}
.mof-address-item a { color: var(--mof-blue); transition: var(--mof-transition); }
.mof-address-item a:hover { color: var(--mof-navy); }

/* Social */
.mof-social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.mof-social-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border-radius: var(--mof-radius-md);
  border: 1px solid var(--mof-grey-border);
  text-decoration: none;
  transition: var(--mof-transition);
  overflow: hidden;
  position: relative;
}
.mof-social-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.25s ease;
  /* Default overlay so EVERY card darkens on hover, including a platform nobody has styled
     yet. Without it the overlay is transparent while :hover still forces the icon and label
     to white — white on an unchanged white card, which reads as the card going blank.
     Both stops are dark on purpose: --mof-blue is light enough that white text on it only
     reaches ~3:1. */
  background: linear-gradient(135deg, var(--mof-navy), #1c4f8f);
}
.mof-social-card--fb::before  { background: linear-gradient(135deg, #1877F2, #0d5dbf); }
.mof-social-card--tw::before  { background: linear-gradient(135deg, #000000, #333); }
.mof-social-card--li::before  { background: linear-gradient(135deg, #0A66C2, #064e95); }
.mof-social-card--yt::before  { background: linear-gradient(135deg, #FF0000, #cc0000); }
.mof-social-card--ig::before  { background: linear-gradient(135deg, #E1306C, #833AB4); }
/* TikTok: black into a deep magenta. Both stops stay dark enough for the white label and
   icon — the brand cyan (#25F4EE) is far too light to sit white text on. */
.mof-social-card--tt::before  { background: linear-gradient(135deg, #010101, #C8103A); }
.mof-social-card:hover::before { opacity: 1; }
.mof-social-card__icon {
  position: relative;
  z-index: 1;
  width: 38px; height: 38px;
  border-radius: var(--mof-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--mof-grey-bg);
  transition: var(--mof-transition);
  flex-shrink: 0;
}
.mof-social-card--fb .mof-social-card__icon { color: #1877F2; }
.mof-social-card--tw .mof-social-card__icon { color: #000; }
.mof-social-card--li .mof-social-card__icon { color: #0A66C2; }
.mof-social-card--yt .mof-social-card__icon { color: #FF0000; }
.mof-social-card--ig .mof-social-card__icon { color: #E1306C; }
.mof-social-card--tt .mof-social-card__icon { color: #010101; }
/* Unrecognised platform: house colour rather than the inherited body text colour. */
.mof-social-card--generic .mof-social-card__icon { color: var(--mof-navy); }
.mof-social-card:hover .mof-social-card__icon { background: rgba(255,255,255,.2); color: #fff; }
/* Glyphs must follow the icon colour on hover. Anything with a hardcoded fill in its own
   markup would stay dark against the overlay; forcing currentColor keeps new icons visible
   without needing a per-platform rule. The YouTube play triangle is the one exception and is
   restored just below. */
.mof-social-card:hover .mof-social-card__icon svg,
.mof-social-card:hover .mof-social-card__icon svg path,
.mof-social-card:hover .mof-social-card__icon svg circle { fill: currentColor; }
/* keep the YouTube play triangle visible on hover (icon body turns white) */
.mof-social-card--yt:hover .mof-social-card__icon polygon { fill: #FF0000; }
.mof-social-card__label {
  position: relative;
  z-index: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-text);
  transition: var(--mof-transition);
}
.mof-social-card:hover .mof-social-card__label { color: var(--mof-white); }

/* Newsletter */
.mof-newsletter-form { display: flex; flex-direction: column; gap: 12px; }
.mof-newsletter-form__desc {
  font-size: 14px;
  color: var(--mof-text-light);
  line-height: 1.6;
  margin-bottom: 4px;
}
.mof-form-group { display: flex; flex-direction: column; gap: 6px; }
.mof-form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-text);
}
.mof-form-input {
  height: 46px;
  padding: 0 16px;
  background: var(--mof-grey-bg);
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  font-size: 14.5px;
  color: var(--mof-text);
  transition: var(--mof-transition);
  width: 100%;
}
.mof-form-input:focus {
  outline: none;
  border-color: var(--mof-blue);
  background: var(--mof-white);
  box-shadow: 0 0 0 3px rgba(68,145,255,.1);
}
.mof-form-input::placeholder { color: var(--mof-text-muted); }
.mof-btn-subscribe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  background: linear-gradient(135deg, var(--mof-navy), var(--mof-blue));
  color: var(--mof-white);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
  letter-spacing: .02em;
  border: none;
  cursor: pointer;
}
.mof-btn-subscribe:hover {
  background: linear-gradient(135deg, var(--mof-blue), var(--mof-blue-light));
  box-shadow: 0 4px 14px rgba(68,145,255,.35);
  transform: translateY(-1px);
}
/* Disabled until the newsletter form's required fields + consent are valid. */
.mof-btn-subscribe:disabled,
.mof-btn-subscribe:disabled:hover {
  opacity: .55;
  cursor: not-allowed;
  background: linear-gradient(135deg, var(--mof-navy), var(--mof-blue));
  box-shadow: none;
  transform: none;
}
/* Newsletter submit feedback (success / validation). */
.mof-newsletter-success {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
}
.mof-newsletter-success--error {
  color: #EF4444;
}
/* "Already subscribed" is not a failure, so it gets a neutral notice tone rather than the
   red used for validation/error — clear without being alarming. */
.mof-newsletter-success--notice {
  color: #B45309;
}
/* While the request is in flight the button is disabled; soften it so the pending state
   reads as busy rather than broken. Scoped to the newsletter form. */
.mof-newsletter-form[aria-busy="true"] .mof-btn-subscribe {
  opacity: .75;
  cursor: progress;
}
.mof-newsletter-success[hidden] {
  display: none;
}
/* Newsletter honeypot: removed from the layout and from the accessibility tree, so a
   person never sees or tabs into it and only an automated filler populates it. Uses
   position/clip rather than display:none because some bots skip display:none inputs.
   Scoped to the newsletter form's own wrapper class. */
.mof-form-hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
.mof-form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--mof-text-light);
  cursor: pointer;
  line-height: 1.5;
}
.mof-form-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--mof-blue);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

/* ============================================================
   FOOTER
   ============================================================ */
.mof-footer {
  background: var(--mof-navy-dark);
  color: rgba(255,255,255,.72);
  border-top: 3px solid var(--mof-blue);
}
.mof-footer__main {
  padding: 64px 0 48px;
}
.mof-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1.4fr;
  gap: 48px;
}
.mof-footer__brand { display: flex; flex-direction: column; gap: 16px; }
.mof-footer__brand-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
/* English (LTR) footer logo size. Arabic (RTL) is overridden in rtl.css. */
.mof-footer__brand-logo img { height: 64px; width: auto; }
.mof-footer__brand-name {
  font-family: var(--mof-font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--mof-white);
  line-height: 1.3;
}
.mof-footer__brand-desc {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255,255,255,.55);
  max-width: 280px;
}
.mof-footer__socials {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.mof-footer__social-btn {
  width: 34px; height: 34px;
  border-radius: var(--mof-radius);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.6);
  transition: var(--mof-transition);
}
.mof-footer__social-btn:hover {
  background: var(--mof-blue);
  border-color: var(--mof-blue);
  color: var(--mof-navy);
}
.mof-footer__col-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mof-blue);
  margin-bottom: 18px;
}
.mof-footer__links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mof-footer__link {
  font-size: 13.5px;
  color: rgba(255,255,255,.6);
  transition: var(--mof-transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.mof-footer__link::before {
  content: '';
  width: 4px; height: 4px;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  flex-shrink: 0;
  transition: var(--mof-transition);
}
.mof-footer__link:hover { color: var(--mof-blue); padding-left: 4px; }
.mof-footer__link:hover::before { background: var(--mof-blue); }
.mof-footer__contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mof-footer__contact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: rgba(255,255,255,.6);
  line-height: 1.5;
}
.mof-footer__contact-item svg { flex-shrink: 0; margin-top: 2px; color: var(--mof-blue); }
.mof-footer__contact-item a { color: rgba(255,255,255,.7); transition: var(--mof-transition); }
.mof-footer__contact-item a:hover { color: var(--mof-blue); }

/* Sub-footer */
.mof-footer__sub {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 20px 0;
}
.mof-footer__sub-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.mof-footer__copyright {
  font-size: 12.5px;
  color: rgba(255,255,255,.4);
}
.mof-footer__copyright strong { color: rgba(255,255,255,.6); }
/* CMS-selected "powered by" mark, shown inline after the copyright text. Sized by
   height with width:auto so any aspect ratio is preserved and never distorted.
   margin-inline-start keeps the gap on the correct side in both LTR and RTL, and
   because the image is inline it wraps with the text on narrow screens instead of
   overflowing. Scoped to this one class — no other image on the site is affected. */
.mof-footer__powered-logo {
  display: inline-block;
  height: 24px;
  width: auto;
  max-width: 160px;
  margin-inline-start: 8px;
  vertical-align: middle;
  object-fit: contain;
}
.mof-footer__sub-links {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.mof-footer__sub-link {
  font-size: 12.5px;
  color: rgba(255,255,255,.45);
  transition: var(--mof-transition);
}
.mof-footer__sub-link:hover { color: var(--mof-blue); }
.mof-footer__sub-divider {
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.15);
}

/* ── Footer Mobile App Section ── */
.mof-footer__app {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.mof-footer__app-title {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.4);
  margin-bottom: 10px;
}
.mof-footer__app-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.mof-footer__app-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 9px;
  color: var(--mof-white);
  text-decoration: none;
  transition: var(--mof-transition);
  min-width: 126px;
}
.mof-footer__app-btn:hover {
  background: rgba(255,255,255,.13);
  border-color: rgba(255,255,255,.28);
  transform: translateY(-1px);
}
.mof-footer__app-btn svg {
  flex-shrink: 0;
  opacity: .9;
}
.mof-footer__app-btn-text {
  display: flex;
  flex-direction: column;
}
.mof-footer__app-btn-sub {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .03em;
  color: rgba(255,255,255,.55);
  line-height: 1;
}
.mof-footer__app-btn-main {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.3;
  margin-top: 2px;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes mof-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .6; transform: scale(0.85); }
}
@keyframes mof-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mof-slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.mof-animate-in {
  animation: mof-fade-in 0.45s cubic-bezier(.4,0,.2,1) forwards;
}

/* ============================================================
   PART 2 — INTERNAL PAGES
   ============================================================ */

/* ── Content Hero (inner pages) ── */
.mof-content-hero {
  position: relative;
  background: var(--mof-navy);
  overflow: hidden;
  padding: 48px 0 60px;
  isolation: isolate;
}
.mof-content-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 15% 60%, rgba(68,145,255,.45) 0%, transparent 55%),
    radial-gradient(circle at 85% 20%, rgba(68,145,255,.06) 0%, transparent 40%);
  z-index: 0;
}
.mof-content-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px);
  background-size: 60px 60px;
  z-index: 0;
}
.mof-content-hero__inner {
  position: relative;
  z-index: 1;
}
.mof-content-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mof-blue);
  margin-bottom: 16px;
}
.mof-content-hero__title {
  font-family: var(--mof-font-heading);
  font-size: clamp(26px, 3.5vw, 42px);
  font-weight: 700;
  color: var(--mof-white);
  line-height: 1.18;
  letter-spacing: -.015em;
  margin-bottom: 12px;
}
.mof-content-hero__subtitle {
  font-size: 16px;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
  max-width: 600px;
}
.mof-content-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 18px;
}
.mof-content-hero__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
}
.mof-content-hero__meta-item svg { color: var(--mof-blue); flex-shrink: 0; }
.mof-content-hero__gold-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--mof-blue), transparent);
}
/* Two-column hero variant */
.mof-content-hero--split .mof-content-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 40px;
}
/* Minister hero — compact portrait card, styled to match the home page
   spotlight minister panel (.mof-minister-panel__image-wrap). Scoped to the
   Minister page so the generic split hero is unaffected. The photo fills the
   card (object-fit: cover, kept from the top so the face is never cropped);
   the gradient backdrop means any area the portrait doesn't cover reads as an
   intentional card rather than empty white space. RTL is handled by the inner
   grid's direction (the image column simply flips to the start side). */
.mof-content-hero--minister .mof-content-hero__inner {
  align-items: center;
}
.mof-content-hero--minister .mof-content-hero__img-col {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Actions sit inside the text column here (not a separate grid cell), so they
   need explicit spacing below the description; wrap on narrow screens. */
.mof-content-hero--minister .mof-content-hero__actions {
  margin-top: 24px;
  flex-wrap: wrap;
}
.mof-content-hero__photo-frame {
  position: relative;
  width: min(320px, 100%);
  height: 360px;
  background: linear-gradient(160deg, var(--mof-navy-mid), var(--mof-blue));
  border: 1px solid rgba(68, 145, 255, .25);
  border-radius: var(--mof-radius-lg);
  box-shadow: var(--mof-shadow-xl);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mof-content-hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}
.mof-content-hero__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.mof-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 24px;
  background: var(--mof-blue);
  color: var(--mof-navy);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--mof-radius);
  letter-spacing: .02em;
  transition: var(--mof-transition);
  box-shadow: 0 2px 8px rgba(68,145,255,.3);
}
.mof-btn-primary:hover {
  background: var(--mof-blue-light);
  box-shadow: 0 4px 14px rgba(68,145,255,.45);
  transform: translateY(-1px);
}
.mof-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.25);
  color: rgba(255,255,255,.85);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
}
.mof-btn-secondary:hover {
  background: rgba(255,255,255,.15);
  border-color: rgba(255,255,255,.45);
  color: var(--mof-white);
}
.mof-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: transparent;
  border: 1.5px solid var(--mof-grey-border);
  color: var(--mof-text);
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
}
.mof-btn-outline:hover {
  border-color: var(--mof-blue);
  color: var(--mof-blue-light);
  background: rgba(68,145,255,.05);
}

/* ── Breadcrumb ── */
.mof-breadcrumb {
  padding: 14px 0;
  border-bottom: 1px solid var(--mof-grey-border);
  background: var(--mof-white);
}
.mof-breadcrumb--on-hero {
  padding: 0;
  border-bottom: none;
  background: transparent;
  margin-bottom: 20px;
}
.mof-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
}
.mof-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 0;
}
.mof-breadcrumb__link {
  font-size: 13px;
  color: rgba(255,255,255,.5);
  transition: var(--mof-transition);
  padding: 2px 4px;
}
.mof-breadcrumb__link:hover { color: var(--mof-blue); }
.mof-breadcrumb--light .mof-breadcrumb__link {
  color: var(--mof-text-muted);
}
.mof-breadcrumb--light .mof-breadcrumb__link:hover { color: var(--mof-blue); }
.mof-breadcrumb__sep {
  color: rgba(255,255,255,.25);
  font-size: 12px;
  margin: 0 4px;
  user-select: none;
}
.mof-breadcrumb--light .mof-breadcrumb__sep { color: var(--mof-grey-mid); }
.mof-breadcrumb__current {
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-blue);
  padding: 2px 4px;
}
.mof-breadcrumb--light .mof-breadcrumb__current { color: var(--mof-text); }

/* Breadcrumb shown above listing content on mobile only (replaces the
   section sidebar on small screens). Hidden on desktop; shown ≤1024px. */
.mof-breadcrumb--listing-mobile {
  display: none;
  padding: 0;
  background: transparent;
  border-bottom: none;
  margin-bottom: 20px;
}

/* ── Page Layout (content + sidebar) ── */
.mof-page-layout {
  padding: 48px 0 72px;
}
.mof-page-layout__grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
.mof-page-layout__grid--no-sidebar {
  grid-template-columns: 1fr;
  max-width: 840px;
}
.mof-page-layout__main { min-width: 0; }
.mof-page-layout__sidebar { min-width: 0; }

/* ── Listing layout with a left section sidebar (Finance, Taxation, …) ──
   Reusable: pair with .mof-sidebar / .mof-sidebar-nav for any section index. */
.mof-listing-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
}
.mof-listing-layout__sidebar { min-width: 0; }
.mof-listing-layout__main { min-width: 0; }
/* The section sidebar can be long — keep it visible while the list scrolls. */
.mof-sidebar--section { position: sticky; top: 96px; }
/* Inside the narrower main column the listing header no longer needs the
   centring .mof-container wrapper; let its inner row span the full width. */
.mof-listing-layout__main .mof-listing-header { display: block; }

/* ── Mobile section menu (bottom sheet) ──
   Base state is HIDDEN: the sheet is a mobile-only affordance and must never appear on
   desktop, where the real section sidebar is present. responsive.css turns it on at
   <=1024px — the same breakpoint that hides that sidebar, so exactly one of the two is
   ever visible and there is no width at which the section menu is unreachable.
   Everything else about the sheet lives in responsive.css alongside that rule. */
.mof-section-sheet { display: none; }
/* Locks the page behind the open sheet. The sheet's own body keeps its scrollbar, so the
   menu stays scrollable while the page underneath does not move. */
html.mof-sheet-open, body.mof-sheet-open { overflow: hidden; }

/* ── Sidebar ── */
.mof-sidebar {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.mof-sidebar__block {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  overflow: hidden;
}
.mof-sidebar__block-title {
  padding: 14px 18px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mof-white);
  background: var(--mof-navy);
  border-bottom: 2px solid var(--mof-blue);
}
.mof-sidebar__block-body { padding: 16px 18px; }

/* Sidebar navigation */
.mof-sidebar-nav { display: flex; flex-direction: column; gap: 2px; }
.mof-sidebar-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mof-text);
  border-radius: var(--mof-radius);
  border-left: 3px solid transparent;
  transition: var(--mof-transition);
}
.mof-sidebar-nav__link:hover {
  background: var(--mof-bg-light);
  border-left-color: var(--mof-blue);
  color: var(--mof-navy);
  padding-left: 16px;
}
.mof-sidebar-nav__link.mof-is-active {
  background: var(--mof-bg-light);
  border-left-color: var(--mof-blue);
  color: var(--mof-navy);
  font-weight: 600;
}
.mof-sidebar-nav__count {
  font-size: 11px;
  color: var(--mof-text-muted);
  background: var(--mof-grey-bg);
  padding: 1px 7px;
  border-radius: 20px;
}

/* Sidebar related docs */
.mof-sidebar-docs { display: flex; flex-direction: column; gap: 12px; }
.mof-sidebar-doc {
  display: flex;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mof-grey-border);
  cursor: pointer;
  transition: var(--mof-transition);
}
.mof-sidebar-doc:last-child { border-bottom: none; padding-bottom: 0; }
.mof-sidebar-doc:hover .mof-sidebar-doc__title { color: var(--mof-blue); }
.mof-sidebar-doc__icon {
  width: 36px; height: 36px;
  background: var(--mof-bg-light);
  border-radius: var(--mof-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--mof-blue);
  flex-shrink: 0;
}
.mof-sidebar-doc__title {
  font-size: 13px;
  font-weight: 500;
  color: var(--mof-text);
  line-height: 1.4;
  margin-bottom: 3px;
  transition: var(--mof-transition);
}
.mof-sidebar-doc__meta {
  font-size: 11px;
  color: var(--mof-text-muted);
}

/* ── Filter Bar ── */
.mof-filter-bar {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  padding: 18px 22px;
  margin-bottom: 28px;
}
.mof-filter-bar__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.mof-filter-bar__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.mof-filter-bar__select {
  height: 40px;
  padding: 0 32px 0 12px;
  background: var(--mof-grey-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  font-size: 13.5px;
  color: var(--mof-text);
  appearance: none;
  cursor: pointer;
  transition: var(--mof-transition);
  font-family: var(--mof-font-en);
  min-width: 140px;
}
.mof-filter-bar__select:focus {
  outline: none;
  border-color: var(--mof-blue);
  background-color: var(--mof-white);
}
/* Month/year period picker (native <input type="month">) — matches the select field.
   The field wrapper is the positioning context for the "YYYY MM" hint below. */
.mof-filter-bar__field { position: relative; }
.mof-filter-bar__month {
  height: 40px;
  padding: 0 12px;
  background: var(--mof-grey-bg);
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  font-size: 13.5px;
  color: var(--mof-text);
  cursor: pointer;
  transition: var(--mof-transition);
  font-family: var(--mof-font-en);
  min-width: 190px;
}
.mof-filter-bar__month:hover { border-color: var(--mof-blue); }
.mof-filter-bar__month:focus {
  outline: none;
  border-color: var(--mof-blue);
  background-color: var(--mof-white);
  box-shadow: 0 0 0 3px rgba(68,145,255,.08);
}
.mof-filter-bar__month::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .55;
}
.mof-filter-bar__month::-webkit-calendar-picker-indicator:hover { opacity: .85; }

/* "YYYY MM" hint for the empty period picker.
   <input type="month"> ignores `placeholder`, so the browser's own empty segments
   ("----------") are hidden with transparent text while the field is empty, and this
   span is shown over them. On focus the native segments come back so the user can see
   what they are typing, and the hint hides. Both states are driven by .mof-is-empty,
   which main.js toggles — with JS off nothing here applies and the native rendering
   stands. inset-inline-start keeps it correct in RTL without a separate override. */
.mof-filter-bar__month-hint {
  position: absolute;
  inset-inline-start: 13.5px; /* 1.5px border + 12px input padding */
  top: 50%;
  transform: translateY(-50%);
  display: none;
  font-family: var(--mof-font-en);
  font-size: 13.5px;
  line-height: 1;
  letter-spacing: .02em;
  color: var(--mof-text-muted);
  pointer-events: none; /* clicks/the picker icon still reach the input */
  user-select: none;
}
.mof-filter-bar__field.mof-is-empty .mof-filter-bar__month-hint { display: block; }
.mof-filter-bar__field.mof-is-empty .mof-filter-bar__month,
.mof-filter-bar__field.mof-is-empty .mof-filter-bar__month::-webkit-datetime-edit {
  color: transparent;
}
.mof-filter-bar__field.mof-is-empty .mof-filter-bar__month:focus,
.mof-filter-bar__field.mof-is-empty .mof-filter-bar__month:focus::-webkit-datetime-edit {
  color: var(--mof-text);
}
.mof-filter-bar__field.mof-is-empty .mof-filter-bar__month:focus ~ .mof-filter-bar__month-hint {
  display: none;
}
/* ── Listing loader (filters / sort / pagination GET navigations) ── */
.mof-listing-results { position: relative; }
.mof-listing-loader {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 96px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  border-radius: var(--mof-radius-md);
}
.mof-listing-loader[hidden] { display: none; }
.mof-listing-loader__box {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  box-shadow: 0 8px 24px rgba(15, 31, 68, .12);
  font-size: 14px;
  font-weight: 600;
  color: var(--mof-navy);
}
.mof-listing-loader__spinner {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border: 2.5px solid rgba(68, 145, 255, .25);
  border-top-color: var(--mof-blue);
  border-radius: 50%;
  animation: mof-listing-spin .7s linear infinite;
}
@keyframes mof-listing-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .mof-listing-loader__spinner { animation-duration: 1.6s; }
}
.mof-filter-bar__search {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 200px;
  height: 40px;
  background: var(--mof-grey-bg);
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  padding: 0 12px;
  transition: var(--mof-transition);
}
.mof-filter-bar__search:focus-within {
  border-color: var(--mof-blue);
  background: var(--mof-white);
  box-shadow: 0 0 0 3px rgba(68,145,255,.08);
}
.mof-filter-bar__search input {
  flex: 1;
  background: transparent;
  border: none;
  font-size: 13.5px;
  color: var(--mof-text);
  outline: none;
}
.mof-filter-bar__search input::placeholder { color: var(--mof-text-muted); }
.mof-filter-bar__search svg { color: var(--mof-text-muted); flex-shrink: 0; }
/* Clear is an <a>, not a <button>, so it defaulted to display:inline — the 40px height
   then had nothing to centre the label against and the text sat high. inline-flex +
   centring matches .mof-filter-bar__apply exactly. Scoped to this one class so no other
   link or button on the site is affected. */
.mof-filter-bar__reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 40px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-text-muted);
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  background: transparent;
  cursor: pointer;
  transition: var(--mof-transition);
  white-space: nowrap;
}
.mof-filter-bar__reset:hover {
  color: var(--mof-text);
  border-color: var(--mof-text-light);
}
.mof-filter-bar__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mof-navy);
  background: var(--mof-blue);
  border: none;
  border-radius: var(--mof-radius);
  cursor: pointer;
  transition: var(--mof-transition);
  white-space: nowrap;
}
.mof-filter-bar__apply:hover { background: var(--mof-blue-light); }
.mof-filter-bar__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mof-grey-border);
}
.mof-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 10px;
  background: rgba(68,145,255,.08);
  border: 1px solid rgba(68,145,255,.18);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mof-blue);
  cursor: pointer;
  transition: var(--mof-transition);
}
.mof-filter-tag:hover { background: rgba(68,145,255,.14); }
.mof-filter-tag__remove {
  width: 14px; height: 14px;
  background: rgba(68,145,255,.2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  color: var(--mof-blue);
  line-height: 1;
  font-weight: 700;
}

/* ── Listing Header ── */
.mof-listing-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}
.mof-listing-header__count {
  font-size: 14px;
  color: var(--mof-text-muted);
}
.mof-listing-header__count strong { color: var(--mof-text); font-weight: 600; }
.mof-listing-header__controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mof-listing-header__sort {
  display: flex;
  align-items: center;
  gap: 8px;
}
.mof-view-toggle {
  display: flex;
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  overflow: hidden;
}
.mof-view-toggle__btn {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mof-text-muted);
  background: var(--mof-grey-bg);
  border-right: 1px solid var(--mof-grey-border);
  transition: var(--mof-transition);
  cursor: pointer;
}
.mof-view-toggle__btn:last-child { border-right: none; }
.mof-view-toggle__btn.mof-is-active,
.mof-view-toggle__btn:hover {
  background: var(--mof-navy);
  color: var(--mof-white);
}

/* ── Document Card (grid view) ── */
.mof-document-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* Static HTML-content page body (PageDisplayMode = "html"): readable prose in the
   main column, no document cards. Inherits RTL from the Arabic layout; the modifier
   forces right alignment as a safeguard. */
.mof-page-content {
  max-width: 860px;
  color: var(--mof-text, #1f2937);
  font-size: 16px;
  line-height: 1.75;
}
.mof-page-content > *:first-child { margin-top: 0; }
.mof-page-content h2 { font-size: 22px; margin: 28px 0 10px; }
.mof-page-content h3 { font-size: 18px; margin: 22px 0 8px; }
.mof-page-content p { margin: 0 0 14px; }
/* CMS HTML-mode body (MOFListingPage html pages). The global `ul, ol { list-style: none }`
   reset strips markers site-wide; re-enable them ONLY inside .mof-page-content so ordered
   lists show numbers and unordered lists show bullets. padding-inline-start is a logical
   property, so markers sit on the left in LTR and on the right in RTL (.mof-page-content--rtl)
   automatically — no direction-specific override needed. Scoped to .mof-page-content, which
   wraps only the CMS HTML content, so sidebar/header/footer/cards/pagination are untouched. */
.mof-page-content ul,
.mof-page-content ol { margin: 0 0 14px; padding-inline-start: 22px; list-style-position: outside; }
.mof-page-content ul { list-style-type: disc; }
.mof-page-content ol { list-style-type: decimal; }
.mof-page-content ul ul { list-style-type: circle; }
.mof-page-content ul ul ul { list-style-type: square; }
.mof-page-content ol ol { list-style-type: lower-alpha; }
.mof-page-content ol ol ol { list-style-type: lower-roman; }
.mof-page-content li { margin: 4px 0; display: list-item; }
.mof-page-content a { color: var(--mof-blue, #1d4ed8); text-decoration: underline; }
.mof-page-content table { border-collapse: collapse; width: 100%; margin: 0 0 16px; }
.mof-page-content th,
.mof-page-content td { border: 1px solid var(--mof-grey-border, #e5e7eb); padding: 8px 12px; text-align: start; }
.mof-page-content--rtl { direction: rtl; text-align: right; }
.mof-document-card {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--mof-transition);
  position: relative;
  overflow: hidden;
}
.mof-document-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mof-blue), var(--mof-blue-light));
  transform: scaleX(0);
  transition: transform 0.25s ease;
}
.mof-document-card:hover {
  box-shadow: var(--mof-shadow-md);
  border-color: rgba(68,145,255,.25);
  transform: translateY(-2px);
}
.mof-document-card:hover::before { transform: scaleX(1); }
.mof-document-card__type-icon {
  width: 44px; height: 44px;
  border-radius: var(--mof-radius);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mof-document-card__type-icon--pdf { background: rgba(239,68,68,.1); color: #EF4444; }
.mof-document-card__type-icon--xls { background: rgba(34,197,94,.1); color: #22C55E; }
.mof-document-card__type-icon--doc { background: rgba(59,130,246,.1); color: #3B82F6; }
.mof-document-card__type-icon--default { background: var(--mof-bg-light); color: var(--mof-blue); }
.mof-document-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.mof-document-card__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.mof-document-card__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--mof-text);
  line-height: 1.45;
  flex: 1;
  transition: var(--mof-transition);
}
.mof-document-card:hover .mof-document-card__title { color: var(--mof-navy); }
.mof-document-card__meta {
  font-size: 12.5px;
  color: var(--mof-text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
}
.mof-document-card__actions {
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--mof-grey-border);
}

/* ── Document listing: LIST view ── */
/* double class so it wins over responsive .mof-document-grid column rules */
.mof-document-grid.mof-document-grid--list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mof-document-grid--list .mof-document-card {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 18px;
  row-gap: 8px;
  padding: 16px 20px;
}
.mof-document-grid--list .mof-document-card__header {
  flex: 0 0 auto;
  align-items: center;
}
.mof-document-grid--list .mof-document-card__title {
  flex: 1 1 240px;
  margin: 0;
}
.mof-document-grid--list .mof-document-card__excerpt {
  flex: 1 1 100%;
  margin: 0;
}
.mof-document-grid--list .mof-document-card__meta {
  flex: 0 0 auto;
}
/* List view: the actions sit on their own full-width row, trailing-aligned, so the
   card looks identical whether it has 1 button or several (multi-format items). */
.mof-document-grid--list .mof-document-card__actions {
  flex: 1 1 100%;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 0;
  border-top: none;
}
/* Buttons keep their natural width in list view (don't stretch to fill). */
.mof-document-grid--list .mof-document-card__actions .mof-document-card__btn {
  flex: 0 0 auto;
}

/* ── News Card ── */
.mof-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.mof-news-card {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  overflow: hidden;
  transition: var(--mof-transition);
  display: flex;
  flex-direction: column;
}
.mof-news-card:hover {
  box-shadow: var(--mof-shadow-lg);
  transform: translateY(-4px);
  border-color: rgba(68,145,255,.15);
}
.mof-news-card__image {
  height: 190px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--mof-navy-mid), var(--mof-blue));
  flex-shrink: 0;
}
.mof-news-card__image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.mof-news-card:hover .mof-news-card__image img { transform: scale(1.05); }
.mof-news-card__image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgba(0,0,0,.4));
}
.mof-news-card__category {
  position: absolute;
  top: 14px; left: 14px;
  padding: 4px 12px;
  background: var(--mof-blue);
  color: var(--mof-navy);
  font-size: 11px;
  font-weight: 700;
  border-radius: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.mof-news-card__body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mof-news-card__date {
  font-size: 12px;
  color: var(--mof-text-muted);
  font-weight: 500;
}
.mof-news-card__title {
  font-family: var(--mof-font-heading);
  font-size: 16.5px;
  font-weight: 700;
  color: var(--mof-navy);
  line-height: 1.35;
  transition: var(--mof-transition);
}
.mof-news-card:hover .mof-news-card__title { color: var(--mof-blue); }
.mof-news-card__excerpt {
  font-size: 13.5px;
  color: var(--mof-text-light);
  line-height: 1.6;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mof-news-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-blue);
  transition: var(--mof-transition);
  margin-top: auto;
}
.mof-news-card__link:hover { color: var(--mof-navy); gap: 10px; }
/* Featured news card */
.mof-news-card--featured {
  grid-column: 1 / -1;
  flex-direction: row;
}
.mof-news-card--featured .mof-news-card__image {
  width: 420px;
  height: auto;
  flex-shrink: 0;
  border-radius: 0;
}
.mof-news-card--featured .mof-news-card__body { padding: 32px; }
.mof-news-card--featured .mof-news-card__title { font-size: 22px; }
.mof-news-card--featured .mof-news-card__excerpt { -webkit-line-clamp: 5; }

/* News-listing card variant (classes from news-listing.html: __img-wrap / __img /
   __read-more / __meta / __reading-time), used by the Media listing. The image
   fills its container edge-to-edge (no white gap) for placeholder and uploaded
   images alike. */
.mof-news-card__img-link { display: block; position: relative; }
.mof-news-card__img-wrap {
  height: 200px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, var(--mof-navy-mid), var(--mof-blue));
}
.mof-news-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.mof-news-card:hover .mof-news-card__img { transform: scale(1.05); }
.mof-news-card__category--featured { top: 18px; left: 18px; }
.mof-news-card__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--mof-text-muted);
  font-weight: 500;
}
.mof-news-card__reading-time { color: var(--mof-text-muted); }
.mof-news-card__title--featured { font-size: 22px; }
.mof-news-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-blue);
  transition: var(--mof-transition);
  margin-top: auto;
}
.mof-news-card__read-more:hover { color: var(--mof-navy); gap: 10px; }
/* Featured card: the image column fills the left side of the row layout. */
.mof-news-card--featured .mof-news-card__img-link { width: 420px; flex-shrink: 0; }
.mof-news-card--featured .mof-news-card__img-wrap { height: 100%; min-height: 300px; }

/* Image placeholder gradients for news */
.mof-img-placeholder--1 { background: linear-gradient(135deg, #0B1F3A, #1E4E8C); }
.mof-img-placeholder--2 { background: linear-gradient(135deg, #122848, #2563b0); }
.mof-img-placeholder--3 { background: linear-gradient(135deg, #0B1F3A, #0d4a6e); }
.mof-img-placeholder__label {
  position: absolute;
  bottom: 12px; left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: rgba(255,255,255,.3);
  white-space: nowrap;
}

/* ── Pagination ── */
.mof-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 32px 0 8px;
}
.mof-pagination__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: var(--mof-radius);
  border: 1.5px solid var(--mof-grey-border);
  background: var(--mof-white);
  color: var(--mof-text-light);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: var(--mof-transition);
  font-family: var(--mof-font-en);
}
.mof-pagination__btn:hover {
  border-color: var(--mof-blue);
  color: var(--mof-blue);
  background: var(--mof-bg-light);
}
.mof-pagination__btn.mof-is-active {
  background: var(--mof-navy);
  border-color: var(--mof-navy);
  color: var(--mof-white);
  font-weight: 700;
}
.mof-pagination__btn--prev,
.mof-pagination__btn--next {
  width: auto;
  padding: 0 16px;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
}
.mof-pagination__btn--prev:hover svg { transform: translateX(-2px); }
.mof-pagination__btn--next:hover svg { transform: translateX(2px); }
.mof-pagination__btn:disabled {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}
.mof-pagination__btn--active,
.mof-pagination__btn.mof-pagination__btn--active {
  background: var(--mof-navy);
  border-color: var(--mof-navy);
  color: var(--mof-white);
  font-weight: 700;
}
.mof-pagination__ellipsis {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--mof-text-muted);
  font-size: 14px;
}

/* ── Publication Detail ── */
.mof-pub-detail-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 40px;
  align-items: start;
}
.mof-pub-meta-card {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  overflow: hidden;
  box-shadow: var(--mof-shadow-sm);
  position: sticky;
  top: 100px;
}
.mof-pub-meta-card__header {
  padding: 20px;
  background: linear-gradient(135deg, var(--mof-navy), var(--mof-navy-mid));
  border-bottom: 2px solid var(--mof-blue);
}
.mof-pub-meta-card__type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  background: rgba(68,145,255,.2);
  border: 1px solid rgba(68,145,255,.4);
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  color: var(--mof-blue);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mof-pub-meta-card__title {
  font-family: var(--mof-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--mof-white);
  line-height: 1.4;
}
.mof-pub-meta-card__body { padding: 20px; }
.mof-pub-meta-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-radius: var(--mof-radius);
  overflow: hidden;
  border: 1px solid var(--mof-grey-border);
  margin-bottom: 20px;
}
.mof-pub-meta-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--mof-grey-border);
  font-size: 13px;
}
.mof-pub-meta-item:last-child { border-bottom: none; }
.mof-pub-meta-item__label {
  font-weight: 600;
  color: var(--mof-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.mof-pub-meta-item__value { color: var(--mof-text); text-align: right; }
.mof-btn-download-large {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, var(--mof-navy), var(--mof-blue));
  color: var(--mof-white);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
  border: none;
  cursor: pointer;
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.mof-btn-download-large:hover {
  background: linear-gradient(135deg, var(--mof-navy-mid), var(--mof-blue-light));
  box-shadow: 0 4px 14px rgba(68,145,255,.35);
  transform: translateY(-1px);
}
.mof-btn-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px;
  background: var(--mof-grey-bg);
  color: var(--mof-text-light);
  font-weight: 600;
  font-size: 13.5px;
  border-radius: var(--mof-radius);
  border: 1.5px solid var(--mof-grey-border);
  cursor: pointer;
  transition: var(--mof-transition);
}
.mof-btn-preview:hover {
  background: var(--mof-bg-light);
  border-color: var(--mof-blue);
  color: var(--mof-blue);
}

/* Article content styling */
.mof-article-content {
  font-size: 15.5px;
  line-height: 1.8;
  color: var(--mof-text);
}
.mof-article-content h2 {
  font-family: var(--mof-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--mof-navy);
  margin: 36px 0 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--mof-grey-border);
}
.mof-article-content h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--mof-navy);
  margin: 28px 0 12px;
}
.mof-article-content p { margin-bottom: 18px; }
.mof-article-content ul,
.mof-article-content ol {
  margin: 0 0 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mof-article-content ul { list-style: disc; }
.mof-article-content ol { list-style: decimal; }
.mof-article-content blockquote {
  border-left: 4px solid var(--mof-blue);
  padding: 16px 20px;
  background: var(--mof-bg-light);
  border-radius: 0 var(--mof-radius) var(--mof-radius) 0;
  margin: 24px 0;
  font-style: italic;
  color: var(--mof-text-light);
}
.mof-article-content a {
  color: var(--mof-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.mof-article-content a:hover { color: var(--mof-navy); }

/* ── Search Results ── */
.mof-search-bar-page {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  box-shadow: var(--mof-shadow-sm);
}
.mof-search-bar-page__icon { padding: 0 12px; color: var(--mof-text-muted); flex-shrink: 0; }
.mof-search-bar-page__input {
  flex: 1;
  height: 46px;
  background: transparent;
  border: none;
  font-size: 15px;
  color: var(--mof-text);
  outline: none;
}
.mof-search-bar-page__input::placeholder { color: var(--mof-text-muted); }
.mof-search-bar-page__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  background: var(--mof-navy);
  color: var(--mof-white);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
  white-space: nowrap;
  flex-shrink: 0;
}
.mof-search-bar-page__submit:hover { background: var(--mof-blue); }
.mof-search-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--mof-grey-border);
  margin-bottom: 24px;
  overflow-x: auto;
}
.mof-search-tab {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mof-text-light);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--mof-transition);
}
.mof-search-tab.mof-is-active {
  color: var(--mof-navy);
  font-weight: 700;
  border-bottom-color: var(--mof-blue);
}
.mof-search-tab:hover:not(.mof-is-active) { color: var(--mof-text); border-bottom-color: var(--mof-grey-border); }
.mof-result-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--mof-grey-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mof-result-item:last-child { border-bottom: none; }
.mof-result-item__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.mof-result-item__title {
  font-family: var(--mof-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--mof-blue);
  transition: var(--mof-transition);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(68,145,255,.3);
}
.mof-result-item__title:hover { color: var(--mof-navy); }
.mof-result-item__excerpt {
  font-size: 14px;
  color: var(--mof-text-light);
  line-height: 1.6;
}
.mof-result-item__excerpt mark {
  background: rgba(68,145,255,.25);
  border-radius: 2px;
  padding: 0 2px;
  font-style: normal;
}
.mof-result-item__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  color: var(--mof-text-muted);
}

/* ── Contact Page ── */
.mof-dept-card {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  transition: var(--mof-transition);
  border-top: 3px solid transparent;
}
.mof-dept-card:hover {
  box-shadow: var(--mof-shadow-md);
  border-top-color: var(--mof-blue);
  transform: translateY(-2px);
}
.mof-dept-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--mof-radius);
  background: var(--mof-bg-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--mof-blue);
  flex-shrink: 0;
  margin-bottom: 4px;
}
.mof-dept-card__name {
  font-size: 15px;
  font-weight: 700;
  color: var(--mof-navy);
  margin: 0;
}
.mof-dept-card__dept {
  font-size: 13px;
  color: var(--mof-text-muted);
  margin: 0;
}
.mof-dept-card__info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  min-width: 0;
}
.mof-dept-card__contact {
  font-size: 13px;
  color: var(--mof-blue);
  transition: var(--mof-transition);
  word-break: break-word;
}
.mof-dept-card__contact:hover { color: var(--mof-navy); }
.mof-dept-card__hours {
  font-size: 12px;
  color: var(--mof-text-muted);
  margin: 0;
}

/* ── Contact page: sidebar card body padding & form spacing ── */
.mof-sidebar--contact .mof-sidebar__block { padding: 0 18px 18px; }
.mof-sidebar--contact .mof-sidebar__block-title { margin: 0 -18px 18px; }
.mof-contact-form .mof-form-group--full { margin: 24px 0 20px; }
.mof-contact-form .mof-form-checkbox { gap: 12px; }
.mof-contact-form .mof-form-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── About page / values ── */
.mof-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mof-value-card {
  padding: 28px 22px;
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  transition: var(--mof-transition);
  position: relative;
  overflow: hidden;
}
.mof-value-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mof-blue), var(--mof-blue-light));
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.mof-value-card:hover { box-shadow: var(--mof-shadow-md); transform: translateY(-3px); }
.mof-value-card:hover::after { transform: scaleX(1); }
.mof-value-card__num {
  font-family: var(--mof-font-heading);
  font-size: 36px;
  font-weight: 700;
  color: rgba(68,145,255,.2);
  line-height: 1;
  margin-bottom: 16px;
}
.mof-value-card__icon {
  width: 48px; height: 48px;
  background: var(--mof-bg-light);
  border-radius: var(--mof-radius);
  display: flex; align-items: center; justify-content: center;
  color: var(--mof-blue);
  margin-bottom: 14px;
}
.mof-value-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mof-navy);
  margin-bottom: 8px;
}
.mof-value-card__desc {
  font-size: 13.5px;
  color: var(--mof-text-light);
  line-height: 1.6;
}

/* Mission/Vision split */
.mof-mission-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mof-mission-block {
  padding: 36px 32px;
  border-radius: var(--mof-radius-md);
  position: relative;
  overflow: hidden;
}
.mof-mission-block--mission {
  background: var(--mof-navy);
  color: var(--mof-white);
}
.mof-mission-block--vision {
  background: var(--mof-bg-light);
  border: 1px solid rgba(68,145,255,.12);
}
.mof-mission-block__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mof-blue);
  margin-bottom: 12px;
}
.mof-mission-block__title {
  font-family: var(--mof-font-heading);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
  line-height: 1.2;
}
.mof-mission-block--mission .mof-mission-block__title { color: var(--mof-white); }
.mof-mission-block--vision .mof-mission-block__title { color: var(--mof-navy); }
.mof-mission-block__text {
  font-size: 14.5px;
  line-height: 1.75;
}
.mof-mission-block--mission .mof-mission-block__text { color: rgba(255,255,255,.72); }
.mof-mission-block--vision .mof-mission-block__text { color: var(--mof-text-light); }

/* Leadership card */
.mof-leadership-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  transition: var(--mof-transition);
}
.mof-leadership-card:hover { box-shadow: var(--mof-shadow-md); transform: translateY(-2px); border-color: rgba(68,145,255,.2); }
.mof-leadership-card__photo {
  width: 76px; height: 96px;
  border-radius: var(--mof-radius);
  background: linear-gradient(160deg, var(--mof-navy-mid), var(--mof-blue));
  flex-shrink: 0;
  overflow: hidden;
  object-fit: cover;
}
.mof-leadership-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.mof-leadership-card__name {
  font-family: var(--mof-font-heading);
  font-size: 17px;
  font-weight: 700;
  color: var(--mof-navy);
  margin-bottom: 3px;
}
.mof-leadership-card__title {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mof-blue);
  margin-bottom: 10px;
}
.mof-leadership-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-text-muted);
  transition: var(--mof-transition);
}
.mof-leadership-card__link:hover { color: var(--mof-blue); gap: 8px; }

/* Minister bio */
.mof-minister-bio {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  align-items: start;
}
.mof-minister-bio__photo {
  border-radius: var(--mof-radius-md);
  overflow: hidden;
  box-shadow: var(--mof-shadow-lg);
  border: 3px solid var(--mof-blue);
  position: sticky;
  top: 100px;
}
.mof-minister-bio__photo img {
  width: 100%;
  display: block;
}
.mof-minister-bio__caption {
  background: var(--mof-navy);
  padding: 16px;
  text-align: center;
}
.mof-minister-bio__caption-name {
  font-family: var(--mof-font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--mof-white);
  margin-bottom: 3px;
}
.mof-minister-bio__caption-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mof-blue);
}
.mof-minister-bio__quote-block {
  background: var(--mof-bg-light);
  border: 1px solid rgba(68,145,255,.12);
  border-left: 5px solid var(--mof-blue);
  border-radius: 0 var(--mof-radius-md) var(--mof-radius-md) 0;
  padding: 24px 28px;
  margin: 28px 0;
}
.mof-minister-bio__quote-text {
  font-family: var(--mof-font-heading);
  font-size: 19px;
  font-style: italic;
  color: var(--mof-navy);
  line-height: 1.6;
  margin-bottom: 12px;
}
.mof-minister-bio__quote-attr {
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-blue-light);
}

/* Share bar */
.mof-share-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0;
  border-top: 1px solid var(--mof-grey-border);
  border-bottom: 1px solid var(--mof-grey-border);
  flex-wrap: wrap;
}
.mof-share-bar__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-text-muted);
  margin-right: 4px;
}
.mof-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--mof-radius);
  font-size: 13px;
  font-weight: 600;
  transition: var(--mof-transition);
  cursor: pointer;
  border: 1.5px solid var(--mof-grey-border);
  background: var(--mof-white);
  color: var(--mof-text);
}
.mof-share-btn:hover { transform: translateY(-1px); box-shadow: var(--mof-shadow-sm); }
.mof-share-btn--fb:hover { background: #1877F2; color: #fff; border-color: #1877F2; }
.mof-share-btn--tw:hover { background: #000; color: #fff; border-color: #000; }
.mof-share-btn--li:hover { background: #0A66C2; color: #fff; border-color: #0A66C2; }
.mof-share-btn--copy:hover { background: var(--mof-navy); color: #fff; border-color: var(--mof-navy); }

/* Related section */
.mof-related { padding-top: 48px; border-top: 1px solid var(--mof-grey-border); margin-top: 48px; }
.mof-related__title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mof-blue);
  margin-bottom: 8px;
}
.mof-related__heading {
  font-family: var(--mof-font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--mof-navy);
  margin-bottom: 24px;
}

/* ── Sitemap ── */
/* Multi-column rather than a grid: the sections are generated from the CMS menus and their
   lengths vary wildly (one menu has 18 children, several have one). CSS grid sizes every row
   to its tallest cell, which left large holes beside the short sections; columns flow the
   blocks so they pack. Each section is kept whole with break-inside. */
.mof-sitemap__grid {
  columns: 3;
  column-gap: 40px;
}
.mof-sitemap__section {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 40px;
}
.mof-sitemap__section-title {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mof-blue-light);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--mof-blue);
  display: inline-block;
}
.mof-sitemap__links {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mof-sitemap__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 14px;
  color: var(--mof-text-light);
  border-bottom: 1px solid var(--mof-grey-border);
  transition: var(--mof-transition);
}
/* Each link is the only child of its <li>, so `.mof-sitemap__link:last-child` matched every
   one of them and removed all the separators. Target the last ROW instead. */
.mof-sitemap__links > li:last-child > .mof-sitemap__link { border-bottom: none; }
/* Logical property: the nudge follows the reading direction, so it shifts right in English
   and left in Arabic with no RTL override. */
.mof-sitemap__link:hover { color: var(--mof-navy); padding-inline-start: 6px; }
.mof-sitemap__link::before {
  content: '';
  width: 5px; height: 5px;
  background: var(--mof-blue);
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .6;
}
/* Section heading that points somewhere — the heading keeps its own styling. */
.mof-sitemap__section-link { color: inherit; }
.mof-sitemap__section-link:hover { color: var(--mof-navy); }
/* Menu item with no URL: shown as a label, so it must not look or behave like a link. */
.mof-sitemap__link--text { cursor: default; opacity: .75; }
.mof-sitemap__link--text:hover { color: var(--mof-text-light); padding-inline-start: 0; }
.mof-sitemap__empty {
  font-size: 15px;
  color: var(--mof-text-light);
}

/* ── Legal Content ── */
.mof-legal-content {
  max-width: 800px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--mof-text);
}
.mof-legal-content h2 {
  font-family: var(--mof-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--mof-navy);
  margin: 36px 0 14px;
  padding-left: 14px;
  border-left: 3px solid var(--mof-blue);
}
.mof-legal-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--mof-navy);
  margin: 24px 0 10px;
}
.mof-legal-content p { margin-bottom: 16px; }
.mof-legal-content ul {
  margin: 0 0 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  list-style: disc;
}
.mof-legal-toc {
  background: var(--mof-bg-light);
  border: 1px solid rgba(68,145,255,.12);
  border-left: 3px solid var(--mof-blue);
  border-radius: 0 var(--mof-radius) var(--mof-radius) 0;
  padding: 20px 24px;
  margin-bottom: 36px;
}
.mof-legal-toc__title {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mof-blue);
  margin-bottom: 12px;
}
.mof-legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  list-style: decimal;
  padding-left: 18px;
}
.mof-legal-toc__list a {
  font-size: 13.5px;
  color: var(--mof-blue);
  transition: var(--mof-transition);
}
.mof-legal-toc__list a:hover { color: var(--mof-navy); }
.mof-legal-update {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--mof-grey-bg);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  font-size: 13px;
  color: var(--mof-text-muted);
  margin-bottom: 28px;
}
.mof-legal-update svg { color: var(--mof-blue); }

/* ── 404 Page ── */
.mof-404 {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  text-align: center;
}
.mof-404__inner { max-width: 720px; width: 100%; }
.mof-404__code {
  font-family: var(--mof-font-heading);
  font-size: clamp(80px, 14vw, 140px);
  font-weight: 700;
  color: var(--mof-blue);
  line-height: 1;
  letter-spacing: -.04em;
  margin-bottom: 4px;
  opacity: .25;
}
.mof-404__title {
  font-family: var(--mof-font-heading);
  font-size: clamp(22px, 3.5vw, 32px);
  font-weight: 700;
  color: var(--mof-navy);
  margin-bottom: 14px;
}
.mof-404__desc {
  font-size: 16px;
  color: var(--mof-text-light);
  line-height: 1.65;
  margin-bottom: 32px;
}
.mof-404__search {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--mof-grey-bg);
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  padding: 4px;
  margin-bottom: 20px;
}
.mof-404__search input {
  flex: 1;
  height: 46px;
  background: transparent;
  border: none;
  padding: 0 12px;
  font-size: 15px;
  color: var(--mof-text);
  outline: none;
}
.mof-404__search input::placeholder { color: var(--mof-text-muted); }
.mof-404__search button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  background: var(--mof-navy);
  color: var(--mof-white);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
  flex-shrink: 0;
  white-space: nowrap;
}
.mof-404__search button:hover { background: var(--mof-blue); }
.mof-404__links {
  margin-top: 16px;
}
.mof-404__quick-link {
  padding: 8px 18px;
  background: var(--mof-bg-light);
  border: 1px solid rgba(68,145,255,.12);
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mof-blue);
  transition: var(--mof-transition);
}
.mof-404__quick-link:hover {
  background: var(--mof-navy);
  color: var(--mof-white);
  border-color: var(--mof-navy);
}

/* ── Taxation page ── */
.mof-tax-categories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.mof-tax-cat-card {
  padding: 28px;
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  transition: var(--mof-transition);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
}
.mof-tax-cat-card:hover {
  box-shadow: var(--mof-shadow-md);
  transform: translateY(-3px);
  border-color: rgba(68,145,255,.25);
}
.mof-tax-cat-card__icon {
  width: 52px; height: 52px;
  border-radius: var(--mof-radius-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--mof-bg-light);
  color: var(--mof-blue);
  transition: var(--mof-transition);
}
.mof-tax-cat-card:hover .mof-tax-cat-card__icon {
  background: linear-gradient(135deg, var(--mof-navy), var(--mof-blue));
  color: var(--mof-white);
}
.mof-tax-cat-card__title {
  font-family: var(--mof-font-heading);
  font-size: 19px;
  font-weight: 700;
  color: var(--mof-navy);
}
.mof-tax-cat-card__desc {
  font-size: 14px;
  color: var(--mof-text-light);
  line-height: 1.65;
  flex: 1;
}
.mof-tax-cat-card__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mof-blue);
  transition: var(--mof-transition);
}
.mof-tax-cat-card__link:hover { color: var(--mof-navy); gap: 10px; }

/* Tax calendar table */
.mof-tax-calendar {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--mof-radius-md);
  overflow: hidden;
  border: 1px solid var(--mof-grey-border);
  font-size: 14px;
}
.mof-tax-calendar thead tr {
  background: var(--mof-navy);
  color: var(--mof-white);
}
.mof-tax-calendar th {
  padding: 14px 16px;
  text-align: left;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .04em;
}
.mof-tax-calendar tbody tr {
  border-bottom: 1px solid var(--mof-grey-border);
  transition: var(--mof-transition);
}
.mof-tax-calendar tbody tr:last-child { border-bottom: none; }
.mof-tax-calendar tbody tr:hover { background: var(--mof-bg-light); }
.mof-tax-calendar td { padding: 13px 16px; color: var(--mof-text); vertical-align: middle; }
.mof-tax-calendar td:first-child { font-weight: 600; color: var(--mof-navy); }
.mof-tax-calendar__deadline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--mof-text);
}
.mof-tax-calendar__deadline--urgent { color: #DC2626; }
.mof-tax-calendar__deadline--soon   { color: #D97706; }
.mof-tax-calendar__deadline--ok     { color: #16A34A; }

/* Highlight card (featured doc) */
.mof-highlight-card {
  background: linear-gradient(135deg, var(--mof-navy), var(--mof-navy-mid));
  border-radius: var(--mof-radius-md);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 32px;
  margin-bottom: 32px;
  border: 1px solid rgba(68,145,255,.2);
  position: relative;
  overflow: hidden;
}
.mof-highlight-card::before {
  content: '';
  position: absolute;
  right: -40px; top: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(68,145,255,.12) 0%, transparent 70%);
}
.mof-highlight-card__icon {
  width: 64px; height: 64px;
  border-radius: var(--mof-radius-md);
  background: rgba(68,145,255,.15);
  border: 1px solid rgba(68,145,255,.3);
  display: flex; align-items: center; justify-content: center;
  color: var(--mof-blue);
  flex-shrink: 0;
}
.mof-highlight-card__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mof-blue);
  margin-bottom: 6px;
}
.mof-highlight-card__title {
  font-family: var(--mof-font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--mof-white);
  margin-bottom: 8px;
}
.mof-highlight-card__meta {
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 16px;
}
.mof-highlight-card__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Section utility */
.mof-section-spacer { padding: 72px 0; }
.mof-section-spacer--sm { padding: 48px 0; }
.mof-divider {
  height: 1px;
  background: var(--mof-grey-border);
  margin: 40px 0;
}
.mof-callout {
  background: var(--mof-bg-light);
  border: 1px solid rgba(68,145,255,.12);
  border-left: 4px solid var(--mof-blue);
  border-radius: 0 var(--mof-radius) var(--mof-radius) 0;
  padding: 18px 22px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin: 24px 0;
}
.mof-callout--gold { border-left-color: var(--mof-blue); }
.mof-callout__icon { color: var(--mof-blue); flex-shrink: 0; margin-top: 1px; }
.mof-callout--gold .mof-callout__icon { color: var(--mof-blue-light); }
.mof-callout__text { font-size: 14.5px; color: var(--mof-text-light); line-height: 1.65; }
.mof-callout__text strong { color: var(--mof-text); }

/* ── Inline focus for article ── */
.mof-reduce-motion * { animation: none !important; transition: none !important; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  .mof-announcement-bar,
  .mof-header__actions,
  .mof-mobile-nav,
  .mof-search-overlay,
  .mof-footer__sub { display: none !important; }
}

/* ============================================================
   PART 3 — FIXES, ALIASES & UI IMPROVEMENTS
   Bridges inconsistencies between Part 1 (home) and Part 2
   (inner pages) class naming conventions.
   ============================================================ */

/* ── Active nav via aria-current (inner pages) ── */
.mof-nav__link[aria-current="page"] {
  color: var(--mof-blue);
  background: var(--mof-bg-light);
  font-weight: 600;
}
.mof-nav__link[aria-current="page"]::after {
  opacity: 1;
  transform: scaleX(1);
}
.mof-mobile-nav__link[aria-current="page"],
.mof-mobile-nav__link.mof-is-active {
  background: var(--mof-bg-light);
  border-left-color: var(--mof-blue);
  color: var(--mof-navy);
  font-weight: 600;
  padding-left: 20px;
}

/* ── Search button (inner pages use .mof-btn-search) ── */
.mof-btn-search {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--mof-radius);
  color: var(--mof-text-light);
  transition: var(--mof-transition);
  background: transparent;
}
.mof-btn-search:hover {
  background: var(--mof-bg-light);
  color: var(--mof-navy);
}

/* ── Hamburger bar spans ── */
.mof-hamburger__bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--mof-navy);
  border-radius: 2px;
  transition: var(--mof-transition);
}

/* ── Language toggle BEM modifier (inner pages) ── */
.mof-lang-toggle__btn {
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  transition: var(--mof-transition);
  letter-spacing: .03em;
}
.mof-lang-toggle__btn--active,
.mof-lang-toggle__btn:hover {
  background: var(--mof-blue);
  color: var(--mof-white);
  font-weight: 700;
}
.mof-lang-toggle__divider {
  padding: 0 3px;
  color: rgba(255,255,255,.3);
  font-size: 11px;
  user-select: none;
}

/* ── Header brand country ── */
.mof-header__brand-country {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mof-blue);
  margin-top: 2px;
}

/* ── Content hero section label alias ── */
.mof-content-hero__section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mof-blue);
  margin-bottom: 16px;
}
/* Gold bar accent below content hero */
.mof-content-hero__gold-bar {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--mof-blue) 40%, var(--mof-blue) 60%, transparent 100%);
}

/* ── Section wrapper ── */
.mof-section {
  padding: 64px 0;
}
.mof-section--grey { background: var(--mof-grey-bg); }
.mof-section--navy { background: var(--mof-navy); color: var(--mof-white); }

/* ── Announcement bar alert icon ── */
.mof-announcement-bar__alert-icon {
  color: var(--mof-blue);
  flex-shrink: 0;
  opacity: .85;
}
.mof-announcement-bar__alert {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Breadcrumb current item (text node in li) ── */
.mof-breadcrumb__item--current {
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-blue);
  padding: 2px 4px;
}
/* On light breadcrumb variant */
.mof-breadcrumb--light .mof-breadcrumb__item--current { color: var(--mof-text); }

/* ── Search overlay bar (inner pages use __bar, home uses __form) ── */
.mof-search-overlay__bar {
  position: relative;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.07);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--mof-radius-md);
  transition: var(--mof-transition);
  overflow: hidden;
}
.mof-search-overlay__bar:focus-within {
  border-color: var(--mof-blue);
  background: rgba(255,255,255,.1);
}
.mof-search-overlay__bar .mof-search-overlay__icon {
  position: static;
  transform: none;
  padding: 0 16px;
  flex-shrink: 0;
}
.mof-search-overlay__bar .mof-search-overlay__input {
  flex: 1;
  height: 60px;
  padding: 0 8px;
  background: transparent;
  border: none;
  color: var(--mof-white);
  font-size: 18px;
}
.mof-search-overlay__bar .mof-search-overlay__input:focus { outline: none; }
.mof-search-overlay__bar .mof-search-overlay__submit {
  position: static;
  margin: 8px;
  flex-shrink: 0;
}

/* ── Search overlay suggestions list ── */
.mof-search-overlay__suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mof-search-overlay__suggestion-type {
  margin-left: auto;
  font-size: 11px;
  opacity: .5;
  flex-shrink: 0;
}
/* ── Public search results page (/search, /ar/search) ──
   Light-theme page (unlike the dark overlay). Logical properties throughout, so the Arabic
   page mirrors from dir="rtl" with no separate rules. */
.mof-search-page__form {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  margin: 18px 0 22px;
  max-width: 720px;
  border: 2px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  background: var(--mof-white);
  padding: 6px 6px 6px 14px;
}
.mof-search-page__form:focus-within { border-color: var(--mof-blue); }
.mof-search-page__icon { display: flex; color: var(--mof-grey-text); flex-shrink: 0; }
.mof-search-page__input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  font-size: 15px;
  padding: 10px 4px;
  color: var(--mof-navy);
}
.mof-search-page__submit {
  flex-shrink: 0;
  background: var(--mof-blue);
  color: var(--mof-white);
  border: 0;
  border-radius: var(--mof-radius-sm, 8px);
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: var(--mof-transition);
}
.mof-search-page__submit:hover { background: var(--mof-navy); }

.mof-search-page__summary { margin: 0 0 18px; font-size: 14px; color: var(--mof-grey-text); }
.mof-search-page__showing { display: block; font-weight: 600; color: var(--mof-navy); }
.mof-search-page__count { display: block; margin-top: 2px; }
.mof-search-page__empty { font-size: 15px; color: var(--mof-grey-text); }

.mof-search-page__list { list-style: none; margin: 0; padding: 0; }
.mof-search-page__item {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--mof-grey-border);
}
.mof-search-page__item:last-child { border-bottom: none; }
.mof-search-page__item-main { flex: 1; min-width: 0; }
.mof-search-page__item-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--mof-navy);
  text-decoration: none;
  line-height: 1.4;
}
.mof-search-page__item-title:hover { color: var(--mof-blue); text-decoration: underline; }
.mof-search-page__item-snippet {
  margin: 5px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--mof-grey-text);
}
.mof-search-page__item-meta {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--mof-grey-text);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
/* The raw URL can be very long (nested media paths) — never let it stretch the row. */
.mof-search-page__item-url {
  opacity: .7;
  overflow-wrap: anywhere;
}
.mof-search-page__item-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}
.mof-search-page__item-actions { display: flex; gap: 8px; }
.mof-search-page__action {
  font-size: 12px;
  font-weight: 600;
  color: var(--mof-blue);
  text-decoration: none;
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-sm, 8px);
  padding: 5px 12px;
  white-space: nowrap;
  transition: var(--mof-transition);
}
.mof-search-page__action:hover { border-color: var(--mof-blue); background: rgba(68,145,255,.06); }

/* ── Live search results ──
   Results reuse .mof-search-overlay__suggestion for the row chrome (padding, divider,
   hover) and add a stacked title/snippet/meta block. Rows are real <a> elements now, so
   the anchor underline and link colour are cleared to keep the original look. */
.mof-search-overlay__suggestions { max-height: 60vh; overflow-y: auto; }
.mof-search-result {
  text-decoration: none;
  align-items: flex-start;
}
.mof-search-result__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;          /* lets long titles ellipsize instead of stretching the row */
  flex: 1;
}
.mof-search-result__title {
  font-weight: 600;
  color: var(--mof-white);
  line-height: 1.35;
}
.mof-search-result__snippet {
  font-size: 13px;
  opacity: .65;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mof-search-result__meta { font-size: 11px; opacity: .5; }
/* Keyboard selection mirrors :hover so both look identical. */
.mof-search-result.mof-is-active {
  background: rgba(255,255,255,.07);
  color: var(--mof-white);
}
/* Loading / no-results / error rows are not clickable. */
.mof-search-overlay__state { cursor: default; opacity: .7; }
.mof-search-overlay__state:hover { background: none; padding-left: 20px; }

/* Highlight within suggestions */
.mof-search-overlay__suggestion mark {
  background: rgba(68,145,255,.35);
  color: inherit;
  border-radius: 2px;
  font-style: normal;
}

/* ── Quick tags in search overlay ── */
.mof-search-overlay__quick-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}
.mof-search-overlay__quick-label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  text-transform: uppercase;
  letter-spacing: .08em;
}

/* ── Mobile nav list (inner pages use __list, home uses __links wrapper) ── */
.mof-mobile-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 16px;
  flex: 1;
  list-style: none;
  margin: 0;
}

/* ── Overlay backdrop (inner pages use .mof-overlay) ── */
.mof-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7,21,39,.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: calc(var(--mof-z-overlay) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mof-overlay.mof-is-open { opacity: 1; pointer-events: all; }

/* ── Responsive layout aliases (used in responsive.css) ── */
.mof-dept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mof-leadership-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.mof-contact-cols {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
.mof-legal-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 48px;
  align-items: start;
}
/* Filter bar inner wrapper alias */
.mof-filter-bar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.mof-filter-bar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.mof-filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mof-grey-border);
}
/* Listing header inner wrapper alias */
.mof-listing-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* Sidebar nav list/item aliases */
.mof-sidebar-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
}
/* Block (not flex) so a nested child sublist stacks BELOW the parent link,
   never beside it. The link itself is display:flex and fills the width. */
.mof-sidebar-nav__item { display: block; }
.mof-sidebar-nav__item > .mof-sidebar-nav__link { width: 100%; }

/* Nested child items: shown only under the active/open parent, rendered as an
   indented bullet list BELOW the parent link (RTL-aware via logical props). */
.mof-sidebar-nav__sublist {
  list-style: disc;
  margin: 4px 0 8px;
  padding: 0;
  padding-inline-start: 28px;
}
.mof-sidebar-nav__subitem {
  display: list-item;
  color: var(--mof-grey-mid);
}
.mof-sidebar-nav__sublink {
  display: block;
  padding: 5px 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mof-text-muted);
  text-decoration: none;
  transition: var(--mof-transition);
}
.mof-sidebar-nav__sublink:hover { color: var(--mof-blue); }
.mof-sidebar-nav__sublink.mof-is-active {
  color: var(--mof-blue);
  font-weight: 700;
}

/* Third-level sidebar items (e.g. Tax on … Profits → General Information …). */
.mof-sidebar-nav__subsublist {
  list-style: circle;
  margin: 2px 0 6px;
  padding: 0;
  padding-inline-start: 22px;
}
.mof-sidebar-nav__subsubitem { display: list-item; }
.mof-sidebar-nav__subsublink {
  display: block;
  padding: 4px 4px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mof-text-muted);
  text-decoration: none;
  transition: var(--mof-transition);
}
.mof-sidebar-nav__subsublink:hover { color: var(--mof-blue); }
.mof-sidebar-nav__subsublink.mof-is-active {
  color: var(--mof-blue);
  font-weight: 700;
}

/* Fourth-level sidebar items (e.g. General Information → Taxpayers, Exemptions …). */
.mof-sidebar-nav__subsubsublist {
  list-style: square;
  margin: 2px 0 6px;
  padding: 0;
  padding-inline-start: 20px;
}
.mof-sidebar-nav__subsubsubitem { display: list-item; }
.mof-sidebar-nav__subsubsublink {
  display: block;
  padding: 4px 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mof-text-muted);
  text-decoration: none;
  transition: var(--mof-transition);
}
.mof-sidebar-nav__subsubsublink:hover { color: var(--mof-blue); }
.mof-sidebar-nav__subsubsublink.mof-is-active {
  color: var(--mof-blue);
  font-weight: 700;
}

/* ============================================================
   UI IMPROVEMENTS
   ============================================================ */

/* ── Enhanced sticky header ── */
.mof-header {
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.mof-header:not(.mof-is-scrolled) {
  border-bottom-color: var(--mof-grey-border);
}
.mof-header.mof-is-scrolled {
  box-shadow: 0 4px 20px rgba(11,31,58,.1), 0 1px 6px rgba(11,31,58,.06);
  border-bottom-color: rgba(68,145,255,.2);
}
/* Subtle gold underline pulse on active nav item */
.mof-nav__item.mof-is-active > .mof-nav__link,
.mof-nav__link[aria-current="page"] {
  position: relative;
}

/* ── Enhanced card hover effects ── */
.mof-document-card:hover {
  box-shadow: 0 8px 28px rgba(11,31,58,.1), 0 2px 8px rgba(68,145,255,.08);
  transform: translateY(-3px);
}
.mof-news-card:hover {
  box-shadow: 0 12px 36px rgba(11,31,58,.12), 0 3px 10px rgba(11,31,58,.05);
  transform: translateY(-5px);
}
.mof-eservice-card:hover {
  box-shadow: 0 10px 32px rgba(11,31,58,.1), 0 2px 8px rgba(68,145,255,.1);
  transform: translateY(-5px);
}
.mof-value-card:hover {
  box-shadow: 0 8px 24px rgba(11,31,58,.09);
  transform: translateY(-4px);
}
.mof-leadership-card:hover {
  box-shadow: 0 8px 24px rgba(11,31,58,.09);
  transform: translateY(-3px);
}
.mof-dept-card:hover {
  box-shadow: 0 8px 24px rgba(11,31,58,.09);
  transform: translateY(-3px);
}
.mof-tax-cat-card:hover {
  box-shadow: 0 8px 24px rgba(11,31,58,.09);
  transform: translateY(-4px);
}
.mof-useful-link-card:hover {
  box-shadow: 0 6px 20px rgba(11,31,58,.08);
  transform: translateY(-3px);
}

/* ── Improved publication row ── */
.mof-pub-row {
  position: relative;
}
.mof-pub-row:hover {
  background: linear-gradient(90deg, var(--mof-bg-light), var(--mof-white));
  border-left-color: var(--mof-blue);
}

/* ── Improved document card type icons ── */
.mof-document-card__type-icon--pdf {
  background: rgba(239,68,68,.08);
  border: 1px solid rgba(239,68,68,.15);
  color: #DC2626;
}
.mof-document-card__type-icon--xls {
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.15);
  color: #15803D;
}
.mof-document-card__type-icon--doc {
  background: rgba(59,130,246,.08);
  border: 1px solid rgba(59,130,246,.15);
  color: #1D4ED8;
}
/* PPT/PPTX → orange, ZIP → sky blue, images → violet, generic → neutral grey.
   (The inline SVG fill also uses the matching colour from FileIconColor.) */
.mof-document-card__type-icon--ppt {
  background: rgba(234,88,12,.08);
  border: 1px solid rgba(234,88,12,.15);
  color: #EA580C;
}
.mof-document-card__type-icon--zip {
  background: rgba(2,132,199,.08);
  border: 1px solid rgba(2,132,199,.15);
  color: #0284C7;
}
.mof-document-card__type-icon--img {
  background: rgba(124,58,237,.08);
  border: 1px solid rgba(124,58,237,.15);
  color: #7C3AED;
}
.mof-document-card__type-icon--file {
  background: rgba(100,116,139,.08);
  border: 1px solid rgba(100,116,139,.15);
  color: #64748B;
}

/* ── Improved button hover states ── */
.mof-btn-primary {
  position: relative;
  overflow: hidden;
}
.mof-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.15) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.mof-btn-primary:hover::after { opacity: 1; }

/* ── Document card action buttons ── */
.mof-document-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
  cursor: pointer;
  border: 1.5px solid var(--mof-grey-border);
  background: var(--mof-white);
  color: var(--mof-text-light);
  flex: 1;
  justify-content: center;
}
.mof-document-card__btn--download:hover {
  background: var(--mof-navy);
  color: var(--mof-white);
  border-color: var(--mof-navy);
}
.mof-document-card__btn--view:hover {
  background: var(--mof-bg-light);
  color: var(--mof-blue);
  border-color: var(--mof-blue);
}
.mof-document-card__btn--share:hover {
  background: rgba(68,145,255,.08);
  color: var(--mof-blue-light);
  border-color: var(--mof-blue);
}
/* Link-less document button (no resolvable URL): visually disabled, not clickable. */
.mof-document-card__btn.mof-is-disabled {
  opacity: .5;
  pointer-events: none;
  cursor: default;
}

/* Per-format download-button hover colors (default state unchanged): PDF → red,
   Excel (XLS/XLSX) → green, ZIP/other → blue. The two-class selectors outrank the
   generic .mof-document-card__btn--download:hover (navy). */
.mof-document-card__btn.download-pdf:hover {
  background: #DC2626; color: #fff; border-color: #DC2626;
}
.mof-document-card__btn.download-xls:hover,
.mof-document-card__btn.download-xlsx:hover {
  background: #16A34A; color: #fff; border-color: #16A34A;
}
.mof-document-card__btn.download-zip:hover,
.mof-document-card__btn.download-file:hover {
  background: var(--mof-blue); color: #fff; border-color: var(--mof-blue);
}
/* Images (JPG/JPEG/PNG) → violet, distinct from PDF red / Excel green / ZIP blue. */
.mof-document-card__btn.download-img:hover {
  background: #7C3AED; color: #fff; border-color: #7C3AED;
}
/* PowerPoint (PPT/PPTX) → orange, distinct from PDF red / Excel green / ZIP blue / image violet. */
.mof-document-card__btn.download-ppt:hover {
  background: #EA580C; color: #fff; border-color: #EA580C;
}

/* Disabled pager control (rendered as a <span> at the first/last page). */
.mof-pagination__btn.mof-is-disabled {
  opacity: .45;
  pointer-events: none;
  cursor: default;
}
.mof-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  color: var(--mof-text-muted);
}

/* ── Improved mobile menu ── */
.mof-mobile-nav__footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mof-mobile-nav__eservices {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px;
  background: linear-gradient(135deg, var(--mof-blue) 0%, var(--mof-blue-light) 100%);
  color: var(--mof-navy);
  font-weight: 700;
  font-size: 14.5px;
  border-radius: var(--mof-radius);
  letter-spacing: .02em;
  text-decoration: none;
  text-align: center;
  transition: var(--mof-transition);
}
.mof-mobile-nav__eservices:hover {
  background: linear-gradient(135deg, var(--mof-blue-light) 0%, var(--mof-blue) 100%);
  box-shadow: 0 4px 14px rgba(68,145,255,.4);
}
/* Lang toggle inside mobile nav */
.mof-lang-toggle--mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 0;
  overflow: visible;
}
.mof-lang-toggle--mobile .mof-lang-toggle__btn {
  padding: 5px 16px;
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  color: var(--mof-text-light);
  font-size: 13px;
}
.mof-lang-toggle--mobile .mof-lang-toggle__btn--active,
.mof-lang-toggle--mobile .mof-active {
  background: var(--mof-navy);
  color: var(--mof-white);
  border-color: var(--mof-navy);
  font-weight: 700;
}
.mof-lang-toggle--mobile .mof-lang-toggle__divider {
  color: var(--mof-grey-mid);
}

/* ── Improved search overlay ── */
.mof-search-overlay__content {
  position: relative;
}
.mof-search-overlay__close {
  position: absolute;
  top: 24px;
  right: 32px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--mof-radius);
  color: rgba(255,255,255,.65);
  transition: var(--mof-transition);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
}
.mof-search-overlay__close:hover {
  background: rgba(255,255,255,.14);
  color: var(--mof-white);
  border-color: rgba(255,255,255,.2);
}

/* ── Improved form styles ── */
.mof-form-input:focus,
.mof-form-textarea:focus,
.mof-form-select:focus {
  outline: none;
  border-color: var(--mof-blue);
  background: var(--mof-white);
  box-shadow: 0 0 0 3px rgba(68,145,255,.12);
}
.mof-form-input.mof-is-error,
.mof-form-textarea.mof-is-error {
  border-color: #EF4444;
  box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}
.mof-form-error {
  font-size: 12.5px;
  color: #DC2626;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.mof-form-textarea {
  width: 100%;
  padding: 12px 16px;
  background: var(--mof-grey-bg);
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  font-size: 14.5px;
  color: var(--mof-text);
  transition: var(--mof-transition);
  resize: vertical;
  min-height: 140px;
  font-family: var(--mof-font-en);
  line-height: 1.6;
}
.mof-form-textarea::placeholder { color: var(--mof-text-muted); }
.mof-form-select {
  height: 46px;
  padding: 0 36px 0 16px;
  background: var(--mof-grey-bg)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E")
    no-repeat right 12px center;
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  font-size: 14.5px;
  color: var(--mof-text);
  appearance: none;
  width: 100%;
  font-family: var(--mof-font-en);
  cursor: pointer;
  transition: var(--mof-transition);
}
.mof-char-counter {
  font-size: 12px;
  color: var(--mof-text-muted);
  text-align: right;
  margin-top: 4px;
}
.mof-char-counter--near-limit { color: #D97706; }
.mof-form-status {
  padding: 14px 18px;
  border-radius: var(--mof-radius);
  font-size: 14px;
  font-weight: 500;
  display: none;
}
.mof-form-status:not(:empty) { display: block; }
.mof-form-status--success {
  background: #DCFCE7;
  border: 1px solid #BBF7D0;
  color: #166534;
}
.mof-form-status--error {
  background: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

/* ── Improved footer ── */
.mof-footer {
  position: relative;
}
.mof-footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--mof-navy-dark) 0%,
    var(--mof-blue) 35%,
    var(--mof-blue) 50%,
    var(--mof-blue) 65%,
    var(--mof-navy-dark) 100%
  );
}
.mof-footer__brand-country {
  font-size: 11px;
  font-weight: 500;
  color: var(--mof-blue);
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* Footer newsletter embed */
.mof-footer__newsletter { margin-top: 8px; }
.mof-footer__newsletter-input {
  width: 100%;
  height: 42px;
  padding: 0 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--mof-radius);
  color: var(--mof-white);
  font-size: 13.5px;
  font-family: var(--mof-font-en);
  margin-bottom: 8px;
  transition: var(--mof-transition);
}
.mof-footer__newsletter-input::placeholder { color: rgba(255,255,255,.35); }
.mof-footer__newsletter-input:focus {
  outline: none;
  border-color: var(--mof-blue);
  background: rgba(255,255,255,.1);
}
.mof-footer__newsletter-btn {
  width: 100%;
  height: 42px;
  background: linear-gradient(135deg, var(--mof-blue) 0%, var(--mof-blue-light) 100%);
  color: var(--mof-navy);
  font-weight: 700;
  font-size: 13.5px;
  border-radius: var(--mof-radius);
  border: none;
  cursor: pointer;
  transition: var(--mof-transition);
  letter-spacing: .02em;
}
.mof-footer__newsletter-btn:hover {
  background: linear-gradient(135deg, var(--mof-blue-light) 0%, var(--mof-blue) 100%);
  box-shadow: 0 4px 14px rgba(68,145,255,.35);
}

/* ── In-view animations ── */
.mof-eservice-card,
.mof-pub-row,
.mof-stat-item,
.mof-useful-link-card,
.mof-social-card,
.mof-document-card,
.mof-news-card,
.mof-value-card,
.mof-leadership-card,
.mof-dept-card,
.mof-tax-cat-card,
.mof-result-item {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.42s cubic-bezier(.4,0,.2,1),
              transform 0.42s cubic-bezier(.4,0,.2,1);
}
.mof-eservice-card.mof-in-view,
.mof-pub-row.mof-in-view,
.mof-stat-item.mof-in-view,
.mof-useful-link-card.mof-in-view,
.mof-social-card.mof-in-view,
.mof-document-card.mof-in-view,
.mof-news-card.mof-in-view,
.mof-value-card.mof-in-view,
.mof-leadership-card.mof-in-view,
.mof-dept-card.mof-in-view,
.mof-tax-cat-card.mof-in-view,
.mof-result-item.mof-in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger delay for grid items */
.mof-eservice-card:nth-child(2)  { transition-delay: .05s; }
.mof-eservice-card:nth-child(3)  { transition-delay: .10s; }
.mof-eservice-card:nth-child(4)  { transition-delay: .15s; }
.mof-eservice-card:nth-child(5)  { transition-delay: .20s; }
.mof-eservice-card:nth-child(6)  { transition-delay: .25s; }
.mof-eservice-card:nth-child(7)  { transition-delay: .30s; }
.mof-document-card:nth-child(2)  { transition-delay: .06s; }
.mof-document-card:nth-child(3)  { transition-delay: .12s; }
.mof-news-card:nth-child(2)      { transition-delay: .07s; }
.mof-news-card:nth-child(3)      { transition-delay: .14s; }
.mof-value-card:nth-child(2)     { transition-delay: .05s; }
.mof-value-card:nth-child(3)     { transition-delay: .10s; }
.mof-value-card:nth-child(4)     { transition-delay: .15s; }
.mof-value-card:nth-child(5)     { transition-delay: .20s; }
.mof-value-card:nth-child(6)     { transition-delay: .25s; }

/* ── Reduced motion overrides ── */
@media (prefers-reduced-motion: reduce) {
  .mof-eservice-card,
  .mof-pub-row,
  .mof-stat-item,
  .mof-useful-link-card,
  .mof-social-card,
  .mof-document-card,
  .mof-news-card,
  .mof-value-card,
  .mof-leadership-card,
  .mof-dept-card,
  .mof-tax-cat-card,
  .mof-result-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mof-announcement-bar__alert-dot { animation: none; }
  .mof-eservice-card,
  .mof-news-card,
  .mof-document-card,
  .mof-value-card,
  .mof-leadership-card,
  .mof-dept-card,
  .mof-tax-cat-card {
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
  }
  .mof-eservice-card:hover,
  .mof-news-card:hover,
  .mof-document-card:hover,
  .mof-value-card:hover,
  .mof-leadership-card:hover,
  .mof-dept-card:hover,
  .mof-tax-cat-card:hover {
    transform: none;
  }
}

/* ── Print improvements ── */
@media print {
  .mof-announcement-bar,
  .mof-header__actions,
  .mof-mobile-nav,
  .mof-overlay,
  .mof-mobile-nav-overlay,
  .mof-search-overlay,
  .mof-share-bar,
  .mof-filter-bar,
  .mof-pagination,
  .mof-footer__sub,
  .mof-footer__newsletter { display: none !important; }
  .mof-header { position: static; }
  .mof-content-hero {
    background: var(--mof-navy) !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

/* ============================================================
   PART 4 — UI FIXES (404, Pagination, Buttons, Search, Filters)
   ============================================================ */

/* ── Global: Pagination inner list must be flex ── */
.mof-pagination__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.mof-pagination__inner li {
  display: flex;
}
/* Active state: HTML uses --active modifier, CSS had .mof-is-active — support both */
.mof-pagination__btn--active,
.mof-pagination__btn.mof-pagination__btn--active {
  background: var(--mof-navy);
  border-color: var(--mof-navy);
  color: var(--mof-white);
  font-weight: 700;
}
/* Prev / Next: ensure icon + label are always horizontal */
.mof-pagination__btn--prev,
.mof-pagination__btn--next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}

/* ── Global: Filter bar Apply button icon+text alignment ── */
.mof-filter-bar__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* ── Global: Listing header Sort By dropdown ── */
.mof-listing-header__sort {
  display: flex;
  align-items: center;
  gap: 8px;
  height: auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  appearance: unset;
  font-size: unset;
  color: unset;
  cursor: unset;
}
.mof-listing-header__sort-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mof-text-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.mof-listing-header__sort-select {
  height: 36px;
  padding: 0 28px 0 10px;
  background: var(--mof-grey-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E") no-repeat right 9px center;
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius);
  font-size: 13px;
  color: var(--mof-text);
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font-family: var(--mof-font-en);
  transition: var(--mof-transition);
  min-width: 140px;
}
.mof-listing-header__sort-select:focus {
  outline: none;
  border-color: var(--mof-blue);
  background-color: var(--mof-white);
  box-shadow: 0 0 0 3px rgba(68,145,255,.08);
}
.mof-listing-header__sort-select:hover {
  border-color: var(--mof-blue);
}

/* ── Highlight card inner layout fix ── */
.mof-highlight-card__inner {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}
.mof-highlight-card__body {
  flex: 1;
  min-width: 0;
}
.mof-highlight-card__meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  margin-bottom: 20px;
}
.mof-highlight-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── 404 Page Fixes ── */
/* max-width bump to accommodate 4-wide quick-link grid */
.mof-404__inner {
  max-width: 720px;
  width: 100%;
}
/* Alias for .mof-404__desc used in HTML */
.mof-404__message {
  font-size: 16px;
  color: var(--mof-text-light);
  line-height: 1.65;
  margin-bottom: 32px;
}
/* Content block */
.mof-404__content {
  margin-bottom: 8px;
}
/* Gap between message and search form is already handled by margin-bottom on message.
   Add top margin on the search block for extra breathing room. */
.mof-404__search {
  margin-top: 8px;
  margin-bottom: 20px;
}
/* Search button: fix icon + text stacking */
.mof-404__search button,
.mof-404__search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 22px;
  background: var(--mof-navy);
  color: var(--mof-white);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
  flex-shrink: 0;
  white-space: nowrap;
  line-height: 1;
}
.mof-404__search button:hover,
.mof-404__search-btn:hover { background: var(--mof-blue); }

/* Home button spacing */
.mof-404__home-btn {
  margin-top: 4px;
  margin-bottom: 0;
}

/* "You might be looking for" nav */
.mof-404__links {
  display: block;
  margin-top: 40px;
  text-align: center;
}
.mof-404__links-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mof-text-muted);
  margin-bottom: 16px;
}
.mof-404__links-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  align-items: stretch;
}
/* Quick-link cards: proper icon+text horizontal layout */
.mof-404__quick-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  padding: 10px 18px;
  background: var(--mof-bg-light);
  border: 1px solid rgba(68,145,255,.12);
  border-radius: var(--mof-radius);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mof-blue);
  transition: var(--mof-transition);
  min-width: 155px;
  text-align: left;
  line-height: 1.3;
}
.mof-404__quick-link svg {
  flex-shrink: 0;
  color: var(--mof-blue);
  transition: var(--mof-transition);
}
.mof-404__quick-link:hover {
  background: var(--mof-navy);
  color: var(--mof-white);
  border-color: var(--mof-navy);
}
.mof-404__quick-link:hover svg { color: var(--mof-blue); }
.mof-404__quick-link:focus-visible {
  outline: 2px solid var(--mof-blue);
  outline-offset: 3px;
}

/* ── Search results page fixes ── */
/* Button class in HTML is __btn; CSS had __submit — support both */
.mof-search-bar-page__submit,
.mof-search-bar-page__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 46px;
  padding: 0 24px;
  background: var(--mof-navy);
  color: var(--mof-white);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--mof-radius);
  transition: var(--mof-transition);
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}
.mof-search-bar-page__submit:hover,
.mof-search-bar-page__btn:hover { background: var(--mof-blue); }

/* Search tabs: hide ugly scrollbar, keep clean horizontal scroll */
.mof-search-tabs {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.mof-search-tabs::-webkit-scrollbar { display: none; }

/* Active tab: HTML uses --active modifier, CSS had .mof-is-active — support both */
.mof-search-tab--active,
.mof-search-tab.mof-search-tab--active {
  color: var(--mof-navy);
  font-weight: 700;
  border-bottom-color: var(--mof-blue);
}

/* ── Responsive fixes ── */
@media (max-width: 768px) {
  /* 404 quick links: 2 columns on tablet */
  .mof-404__links-grid {
    gap: 8px;
  }
  .mof-404__quick-link {
    min-width: calc(50% - 4px);
    flex: 1 1 calc(50% - 4px);
    max-width: calc(50% - 4px);
  }
  /* Highlight card: stack vertically on mobile */
  .mof-highlight-card__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  /* Listing header: wrap controls */
  .mof-listing-header__inner {
    flex-wrap: wrap;
    gap: 12px;
  }
  /* Search tabs: allow horizontal scroll, no overflow visible */
  .mof-search-tabs {
    gap: 0;
    padding-bottom: 2px;
  }
  /* Pagination: allow wrap */
  .mof-pagination__inner {
    gap: 3px;
  }
}
@media (max-width: 480px) {
  /* 404 quick links: single column on small phones */
  .mof-404__quick-link {
    min-width: 100%;
    max-width: 100%;
    flex: 1 1 100%;
    justify-content: flex-start;
  }
  /* Search: stack on tiny screens */
  .mof-search-bar-page {
    flex-wrap: wrap;
  }
  .mof-search-bar-page__submit,
  .mof-search-bar-page__btn {
    width: 100%;
    justify-content: center;
  }
  /* 404 search: stack on tiny screens */
  .mof-404__search {
    flex-wrap: wrap;
  }
  .mof-404__search-btn {
    width: 100%;
    justify-content: center;
  }
  /* Filter bar actions: stack */
  .mof-filter-bar__actions {
    width: 100%;
  }
  .mof-filter-bar__apply,
  .mof-filter-bar__reset {
    flex: 1;
    justify-content: center;
  }
  /* Period picker + search take the full row on mobile */
  .mof-filter-bar__field,
  .mof-filter-bar__month {
    width: 100%;
  }
  .mof-filter-bar__search {
    flex: 1 1 100%;
  }
}

/* ============================================================
   HERO SLIDER  (mof-hero-slider)
   Full-width image carousel replacing the old mof-hero section.
   To use real photos, replace each .mof-slider__bg--N background
   with: background-image: url('../images/slide-n.jpg'),
         linear-gradient(...); background-size: cover;
   ============================================================ */
.mof-hero-slider {
  position: relative;
  overflow: hidden;
  background: var(--mof-navy-dark);
  height: 520px;
}
.mof-slider__track {
  position: relative;
  width: 100%;
  height: 100%;
}
.mof-slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.75s ease;
  pointer-events: none;
}
.mof-slider__slide--active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .mof-slider__slide { transition: none; }
}

/* Gradient placeholder backgrounds — swap for real image paths */
.mof-slider__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: #0B1F3A;
  /* Per-slide image is supplied inline as --mof-slide-desktop / --mof-slide-mobile. */
  background-image: var(--mof-slide-desktop, none);
}
@media (max-width: 576px) {
  .mof-slider__bg { background-image: var(--mof-slide-mobile, var(--mof-slide-desktop, none)); }
}
.mof-slider__bg--1 {
  /* Real photo on slide 1; gradient stays as a fallback if the image fails.
     background-size: cover / position: center are inherited from .mof-slider__bg. */
  background-color: #071527;
  background-image: url('../images/slider1.jpg');
}
.mof-slider__bg--2 {
  /* Real photo on slide 2; gradient stays as a fallback if the image fails.
     background-size: cover / position: center are inherited from .mof-slider__bg. */
  background-color: #071527;
  background-image: url('../images/slider2.jpg');
}
.mof-slider__bg--3 {
  /* Real photo on slide 3; gradient stays as a fallback if the image fails.
     background-size: cover / position: center are inherited from .mof-slider__bg. */
  background-color: #0B1F3A;
  background-image: url('../images/slider3.png');
}
.mof-slider__overlay {
  position: absolute;
  inset: 0;
  background: rgba(7, 21, 39, 0.52);
  z-index: 1;
}

/* Content — centred vertically inside each slide */
.mof-slider__content-outer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
}
.mof-slider__content-outer .mof-container { width: 100%; }
.mof-slider__content {
  max-width: 620px;
  padding-bottom: 32px; /* slight downward offset for visual balance */
}
.mof-slider__badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 14px;
  background: rgba(68,145,255,.18);
  border: 1px solid rgba(68,145,255,.38);
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mof-blue);
  letter-spacing: .07em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.mof-slider__title {
  font-family: var(--mof-font-heading);
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 700;
  color: var(--mof-white);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin-bottom: 14px;
}
.mof-slider__title em {
  font-style: italic;
  color: var(--mof-blue);
}
.mof-slider__desc {
  font-size: 16px;
  color: rgba(255,255,255,.72);
  line-height: 1.65;
  margin-bottom: 28px;
  max-width: 500px;
}
.mof-slider__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--mof-blue);
  color: var(--mof-navy);
  font-weight: 700;
  font-size: 14px;
  border-radius: var(--mof-radius);
  text-decoration: none;
  letter-spacing: .02em;
  transition: var(--mof-transition);
}
.mof-slider__cta:hover {
  background: var(--mof-blue-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(68,145,255,.3);
}
.mof-slider__cta:focus-visible {
  outline: 2px solid var(--mof-blue);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .mof-slider__cta { transition: none; transform: none !important; }
}

/* Controls: prev button — dot indicators — next button */
.mof-slider__controls {
  position: absolute;
  bottom: 28px;
  right: 40px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mof-slider__btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: var(--mof-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--mof-transition);
  flex-shrink: 0;
}
.mof-slider__btn:hover {
  background: var(--mof-blue);
  border-color: var(--mof-blue);
  color: var(--mof-navy);
}
.mof-slider__btn:focus-visible {
  outline: 2px solid var(--mof-blue);
  outline-offset: 3px;
}
.mof-slider__dots {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mof-slider__dot {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: rgba(255,255,255,.35);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: var(--mof-transition);
  flex-shrink: 0;
}
.mof-slider__dot--active,
.mof-slider__dot:hover {
  background: var(--mof-blue);
  width: 22px;
}
.mof-slider__dot:focus-visible {
  outline: 2px solid var(--mof-blue);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .mof-slider__btn { transition: none; }
  .mof-slider__dot { transition: none; width: 8px !important; }
}

/* ============================================================
   SPOTLIGHT SECTION  (mof-spotlight)
   Two-column section directly below the hero slider.
   Left:  prominent search bar + quick tags + news ticker
   Right: minister panel with gold top-accent
   ============================================================ */
.mof-spotlight {
  background: var(--mof-white);
  padding: 64px 0;
  border-bottom: 1px solid var(--mof-grey-border);
}
.mof-spotlight__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: center;
}

/* Section heading */
.mof-spotlight__heading {
  font-family: var(--mof-font-heading);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  color: var(--mof-navy);
  line-height: 1.2;
  letter-spacing: -.01em;
  margin-bottom: 28px;
}
.mof-spotlight__heading em {
  font-style: italic;
  color: var(--mof-blue);
}

/* Search bar — light-background variant */
.mof-spotlight__search-wrap {
  display: flex;
  align-items: center;
  background: var(--mof-grey-bg);
  border: 1.5px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-lg);
  padding: 6px;
  margin-bottom: 16px;
  transition: var(--mof-transition);
}
.mof-spotlight__search-wrap:focus-within {
  border-color: var(--mof-blue);
  background: var(--mof-white);
  box-shadow: 0 0 0 3px rgba(68,145,255,.12);
}
.mof-spotlight__search-icon {
  flex-shrink: 0;
  padding: 0 14px;
  color: var(--mof-blue);
}
.mof-spotlight__search-input {
  flex: 1;
  height: 52px;
  border: none;
  background: transparent;
  color: var(--mof-text);
  font-size: 15.5px;
  outline: none;
  cursor: pointer;
}
.mof-spotlight__search-input::placeholder { color: var(--mof-text-muted); }
.mof-spotlight__search-btn {
  flex-shrink: 0;
  height: 52px;
  padding: 0 30px;
  background: var(--mof-navy);
  color: var(--mof-white);
  font-weight: 700;
  font-size: 14.5px;
  border-radius: 10px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: var(--mof-transition);
}
.mof-spotlight__search-btn:hover { background: var(--mof-blue); }
.mof-spotlight__search-btn:focus-visible {
  outline: 2px solid var(--mof-blue);
  outline-offset: 3px;
}

/* Quick tags — light-background variant */
.mof-spotlight__quick-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}
.mof-spotlight__quick-label {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mof-text-muted);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.mof-spotlight__quick-tag {
  padding: 6px 14px;
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: 20px;
  font-size: 13px;
  color: var(--mof-text-light);
  cursor: pointer;
  transition: var(--mof-transition);
}
.mof-spotlight__quick-tag:hover {
  background: rgba(68,145,255,.08);
  border-color: var(--mof-blue);
  color: var(--mof-navy);
}
.mof-spotlight__quick-tag:focus-visible {
  outline: 2px solid var(--mof-blue);
  outline-offset: 2px;
}

/* News ticker — light-background variant */
.mof-spotlight__news-ticker {
  background: var(--mof-grey-bg);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  padding: 20px 24px;
}
.mof-spotlight__ticker-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mof-navy);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mof-grey-border);
  margin-bottom: 14px;
}
.mof-spotlight__ticker-heading svg { color: var(--mof-blue); flex-shrink: 0; }
.mof-spotlight__ticker-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mof-spotlight__ticker-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
}
.mof-spotlight__ticker-date {
  font-size: 11px;
  color: var(--mof-text-muted);
  white-space: nowrap;
  font-weight: 500;
  flex-shrink: 0;
}
.mof-spotlight__ticker-link {
  color: var(--mof-text);
  line-height: 1.4;
  transition: var(--mof-transition);
}
.mof-spotlight__ticker-link:hover { color: var(--mof-blue); }

/* Search block removed: Latest News card sizes to its content and is
   vertically centred against the minister card (see .mof-spotlight__grid).
   Items use even padding + separators for consistent spacing. */
.mof-spotlight__ticker-heading { font-size: 13px; }
.mof-spotlight__ticker-list { gap: 0; }
.mof-spotlight__ticker-item {
  font-size: 14.5px;
  padding: 14px 0;
  border-bottom: 1px solid var(--mof-grey-border);
}
.mof-spotlight__ticker-item:first-child { padding-top: 4px; }
.mof-spotlight__ticker-item:last-child { padding-bottom: 0; border-bottom: none; }

/* "Show More" link under the Latest News ticker (→ /media, /ar/media).
   The last ticker item drops its separator, so this restores one above the link
   and keeps the card's 14px rhythm. Alignment uses flex end rather than
   text-align, so RTL mirrors it with no rtl.css override. */
.mof-spotlight__ticker-more {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mof-grey-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--mof-blue);
  text-decoration: none;
  transition: var(--mof-transition);
}
.mof-spotlight__ticker-more:hover { color: var(--mof-navy); gap: 9px; }
.mof-spotlight__ticker-more svg { flex-shrink: 0; }

/* Minister column — gold top accent on the existing panel */
.mof-spotlight__minister-col .mof-minister-panel {
  border-top: 3px solid var(--mof-blue);
  box-shadow: 0 8px 40px rgba(11,31,58,.1);
}

/* Force left-to-right rendering for neutral data (phone, email) inside RTL,
   so numbers/addresses stay readable and unreversed in the Arabic layout. */
.mof-ltr-text {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════
   MINISTER PAGE CONTENT SECTIONS  (About / Office / Former Ministers)
   ══════════════════════════════════════════════════════════ */
.mof-minister-section { margin-bottom: 44px; scroll-margin-top: 100px; }
.mof-minister-section:last-child { margin-bottom: 0; }
.mof-minister-section__title {
  font-family: var(--mof-font-heading);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--mof-navy);
  line-height: 1.25;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--mof-grey-border);
}
.mof-minister-section__intro {
  font-size: 15.5px;
  color: var(--mof-text-muted);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 720px;
}

/* Minister's Office contact card */
.mof-office-card {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-top: 3px solid var(--mof-blue);
  border-radius: var(--mof-radius-md);
  box-shadow: var(--mof-shadow-sm);
  padding: 24px 26px;
}
.mof-office-card__list { display: flex; flex-direction: column; gap: 18px; }
.mof-office-card__row { display: flex; align-items: flex-start; gap: 14px; }
.mof-office-card__icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mof-bg-light);
  color: var(--mof-blue);
  border-radius: 10px;
}
.mof-office-card__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mof-office-card__label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mof-text-muted);
}
.mof-office-card__value {
  font-size: 15px; font-weight: 500; color: var(--mof-navy);
  line-height: 1.6; word-break: break-word;
}
a.mof-office-card__value { color: var(--mof-blue); transition: var(--mof-transition); }
a.mof-office-card__value:hover { color: var(--mof-navy); text-decoration: underline; }
.mof-office-card__extra { margin-top: 18px; }

/* Responsive data table — Former Ministers and any pasted table. Styling is
   applied to both .mof-data-table and any <table> inside .mof-table-scroll so
   admin-pasted tables inherit the site look instead of SharePoint defaults. */
.mof-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  box-shadow: var(--mof-shadow-sm);
}
.mof-table-scroll:focus-visible { outline: 2px solid var(--mof-blue); outline-offset: 2px; }
.mof-data-table,
.mof-table-scroll table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 14.5px;
  background: var(--mof-white);
}
.mof-data-table thead th,
.mof-table-scroll table thead th {
  background: var(--mof-navy);
  color: var(--mof-white);
  font-weight: 600;
  text-align: left;
  padding: 12px 16px;
  white-space: nowrap;
  border-bottom: 2px solid var(--mof-blue);
}
.mof-data-table td,
.mof-table-scroll table td {
  padding: 11px 16px;
  color: var(--mof-text);
  border-bottom: 1px solid var(--mof-grey-border);
  vertical-align: top;
}
.mof-data-table tbody tr:nth-child(even),
.mof-table-scroll table tbody tr:nth-child(even) { background: var(--mof-bg-light); }
.mof-data-table tbody tr:hover,
.mof-table-scroll table tbody tr:hover { background: rgba(68,145,255,.07); }
.mof-data-table tbody tr:last-child td,
.mof-table-scroll table tbody tr:last-child td { border-bottom: none; }

/* ══════════════════════════════════════════════════════════
   LINK DIRECTORY  (About → Other Links, TemplateKey = link-directory)
   ══════════════════════════════════════════════════════════ */
.mof-link-directory { display: flex; flex-direction: column; gap: 40px; }
.mof-link-directory__group-title {
  font-family: var(--mof-font-heading);
  font-size: 18px;
  font-weight: 700;
  color: var(--mof-navy);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--mof-grey-border);
}
.mof-link-directory__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.mof-link-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-left: 3px solid var(--mof-blue);
  border-radius: var(--mof-radius-md);
  box-shadow: var(--mof-shadow-sm);
  transition: var(--mof-transition);
}
.mof-link-card:hover {
  box-shadow: var(--mof-shadow-md);
  border-left-color: var(--mof-navy);
  transform: translateY(-2px);
}
.mof-link-card__icon {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--mof-bg-light);
  color: var(--mof-blue);
  border-radius: 8px;
}
.mof-link-card__content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mof-link-card__title { font-size: 14.5px; font-weight: 600; color: var(--mof-navy); line-height: 1.4; }
.mof-link-card:hover .mof-link-card__title { color: var(--mof-blue); }
.mof-link-card__desc { font-size: 13px; color: var(--mof-text-muted); line-height: 1.5; }
.mof-link-card__url { font-size: 12.5px; color: var(--mof-blue-light); word-break: break-all; }

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE — Ministry Contacts cards
   ══════════════════════════════════════════════════════════ */
.mof-contact-section__intro {
  font-size: 15.5px;
  color: var(--mof-text-muted);
  line-height: 1.7;
  margin-top: 6px;
  max-width: 640px;
}
.mof-contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.mof-contact-card {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-top: 3px solid transparent;
  border-radius: var(--mof-radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  transition: var(--mof-transition);
}
.mof-contact-card:hover {
  box-shadow: var(--mof-shadow-md);
  border-top-color: var(--mof-blue);
  transform: translateY(-2px);
}
.mof-contact-card__icon {
  width: 48px; height: 48px;
  border-radius: var(--mof-radius);
  background: var(--mof-bg-light);
  display: flex; align-items: center; justify-content: center;
  color: var(--mof-blue);
  flex-shrink: 0;
  margin-bottom: 4px;
}
.mof-contact-card__title { font-size: 15px; font-weight: 700; color: var(--mof-navy); margin: 0; }
.mof-contact-card__subtitle { font-size: 13px; color: var(--mof-text-muted); margin: 0; }
.mof-contact-card__info { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; min-width: 0; }
.mof-contact-card__link { font-size: 13px; color: var(--mof-blue); transition: var(--mof-transition); word-break: break-word; }
.mof-contact-card__link:hover { color: var(--mof-navy); }
.mof-contact-card__meta { font-size: 12px; color: var(--mof-text-muted); margin: 4px 0 0; }

/* ══════════════════════════════════════════════════════════
   CONTACT PAGE — Send us a Message (form + info cards)
   ══════════════════════════════════════════════════════════ */
.mof-contact-message-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}
.mof-contact-message-main { min-width: 0; }
.mof-contact-message__title { margin-bottom: 22px; }
.mof-contact-info-stack { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.mof-contact-info-card {
  background: var(--mof-white);
  border: 1px solid var(--mof-grey-border);
  border-radius: var(--mof-radius-md);
  overflow: hidden;
}
.mof-contact-info-card__header {
  padding: 12px 18px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--mof-white);
  background: var(--mof-navy);
  border-bottom: 2px solid var(--mof-blue);
}
.mof-contact-info-card__body { padding: 18px; font-size: 14px; color: var(--mof-text-light); line-height: 1.7; }
.mof-contact-info-card__name { font-weight: 700; color: var(--mof-navy); margin: 0 0 6px; }
.mof-contact-info-card__address { font-style: normal; margin: 0 0 10px; }
.mof-contact-info-card__link { display: block; color: var(--mof-blue); word-break: break-word; transition: var(--mof-transition); }
.mof-contact-info-card__link:hover { color: var(--mof-navy); }
.mof-map-preview {
  border-radius: var(--mof-radius);
  overflow: hidden;
  border: 1px solid var(--mof-grey-border);
}
.mof-map-preview img { width: 100%; height: auto; display: block; }
.mof-map-preview__btn { width: 100%; justify-content: center; margin-top: 12px; }
.mof-office-hours { width: 100%; font-size: 13px; color: var(--mof-text-light); border-collapse: collapse; }
.mof-office-hours td { padding: 6px 0; }
.mof-office-hours td:last-child { text-align: right; font-weight: 500; color: var(--mof-text); }

/* ══════════════════════════════════════════════════════════
   MEDIA / News listing (reuses .mof-news-grid / .mof-news-card / .mof-search-tabs)
   ══════════════════════════════════════════════════════════ */
.mof-media-tabs { margin-bottom: 32px; }
.mof-media-tab { cursor: pointer; }
.mof-media-empty {
  text-align: center;
  color: var(--mof-text-muted);
  font-size: 15px;
  padding: 40px 0;
  margin: 0;
}

/* ── Media detail: Article Details sidebar rows ──
   Polished label/value rows inside the shared .mof-sidebar__block card so the
   Article Details card matches the Related Document / Latest News cards. */
.mof-article-detail-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--mof-grey-border);
}
.mof-article-detail-row:first-child { padding-top: 0; }
.mof-article-detail-row:last-child { padding-bottom: 0; border-bottom: none; }
.mof-article-detail-row__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--mof-text-muted);
}
.mof-article-detail-row__value {
  font-size: 14px;
  font-weight: 500;
  color: var(--mof-text);
  line-height: 1.4;
}
.mof-article-detail-row__badge {
  align-self: flex-start;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--mof-navy);
  background: var(--mof-bg-light);
  border: 1px solid rgba(68, 145, 255, .18);
}

/* ============================================================
   PRIMARY BLUE BUTTONS — white label + white icons
   ============================================================

   The palette moved --mof-blue to a lighter #4491FF ("replaces old #1E4E8C", :17) but the
   controls painted with it kept `color: var(--mof-navy)`, so every primary action rendered a
   near-black label on blue. This block supersedes those earlier declarations in one place
   rather than editing a dozen scattered rules — the originals are left intact so the change
   is a single reviewable hunk and reverts by deleting this section.

   Scope is deliberately "interactive controls with a MOF-blue background", which is why
   hover-only blue controls (tag chips, social buttons, slider arrows) are included and
   non-interactive blue chips such as .mof-news-card__category are not.
   ============================================================ */

:root {
  --mof-btn-primary-text: #ffffff;
}

/* Controls that are blue at rest. */
.mof-skip-link,
.mof-btn-eservices,
.mof-mobile-nav__eservices,
.mof-search-overlay__submit,
.mof-hero__search-btn,
.mof-btn-primary,
.mof-filter-bar__apply,
.mof-footer__newsletter-btn,
.mof-slider__cta {
  color: var(--mof-btn-primary-text);
}

/* Every interactive state keeps the label white — including the ones that only turn blue on
   hover, which previously swapped in navy text at that exact moment. */
:is(
  .mof-skip-link,
  .mof-btn-eservices,
  .mof-mobile-nav__eservices,
  .mof-search-overlay__submit,
  .mof-hero__search-btn,
  .mof-btn-primary,
  .mof-filter-bar__apply,
  .mof-footer__newsletter-btn,
  .mof-slider__cta,
  .mof-search-overlay__tag,
  .mof-footer__social-btn,
  .mof-slider__btn
):is(:hover, :focus, :focus-visible, :active) {
  color: var(--mof-btn-primary-text);
}

/* Icons follow the label. The guards matter: these glyphs are outline icons drawn with
   fill="none" + stroke="currentColor", and forcing a fill on them would turn each one into a
   solid white blob. Only attributes that already carry a real paint value are re-pointed. */
:is(
  .mof-skip-link,
  .mof-btn-eservices,
  .mof-mobile-nav__eservices,
  .mof-search-overlay__submit,
  .mof-hero__search-btn,
  .mof-btn-primary,
  .mof-filter-bar__apply,
  .mof-footer__newsletter-btn,
  .mof-slider__cta,
  .mof-search-overlay__tag:hover,
  .mof-footer__social-btn:hover,
  .mof-slider__btn:hover
) :is(svg, i) {
  color: currentColor;
}
:is(
  .mof-skip-link,
  .mof-btn-eservices,
  .mof-mobile-nav__eservices,
  .mof-search-overlay__submit,
  .mof-hero__search-btn,
  .mof-btn-primary,
  .mof-filter-bar__apply,
  .mof-footer__newsletter-btn,
  .mof-slider__cta,
  .mof-search-overlay__tag:hover,
  .mof-footer__social-btn:hover,
  .mof-slider__btn:hover
) svg :is([fill]:not([fill="none"])) {
  fill: currentColor;
}
:is(
  .mof-skip-link,
  .mof-btn-eservices,
  .mof-mobile-nav__eservices,
  .mof-search-overlay__submit,
  .mof-hero__search-btn,
  .mof-btn-primary,
  .mof-filter-bar__apply,
  .mof-footer__newsletter-btn,
  .mof-slider__cta,
  .mof-search-overlay__tag:hover,
  .mof-footer__social-btn:hover,
  .mof-slider__btn:hover
) svg :is([stroke]:not([stroke="none"])) {
  stroke: currentColor;
}