/* header-v2.css — clean header from scratch
 * Loaded AFTER styles.css to override the broken legacy header rules.
 * Layout: [brand] | [nav inline at desktop / panel at <=1280] | [tools]
 * Logo crossfades colored<->white based on header surface state.
 * No fixed pixel grid columns. No overflow:auto inside nav.
 */

/* Header re-skinned to the association's approved identity (navy/teal/gold,
   CLAUDE.md §6) instead of the green tokens it shipped with — #12525C never
   appeared in that palette; it was a leftover from the donor-repo theme.

   Bar colour follows what was actually measured on three live UAE charity
   sites (Al Ihsan, Fujairah Charity, Dubai Charity — 10 Sep 2026): all three
   run a WHITE working nav, none a solid colour block. Only the sector
   convention for the bar itself; the accent colours stay the association's
   own navy/teal/gold, not any competitor's palette. The dark navy masthead
   above (.hotline-strip — phone, WhatsApp, the DCD licence number) is kept:
   no competitor runs one, but it is the one place the licence disclosure
   lives, and Fujairah's own thin utility row shows the pattern (a compact
   info bar above the real nav) is not out of place in this sector.

   --nav-ink / --nav-ink-muted / --nav-hover-bg / --nav-hover-ink drive the
   PRIMARY nav link colours only (brand-mark, hamburger, language switch, the
   donate pill are not affected: 45 pages, so a single re-skin has to hold
   everywhere). They flip once, in the <=1280 media query below, because at
   that width .site-menu stops being part of the light bar and becomes a
   dark floating panel — same tokens, two different surfaces. */
:root {
  --header-bg: #FFFFFF;
}

/* ------ root header ------ */
.site-header,
header.site-header,
header.site-header[data-header],
header.site-header[data-static-header],
header.site-header[data-relief-header] {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0.75rem clamp(1rem, 4vw, 2.5rem);
  background: var(--header-bg);
  color: #0A2A3D;
  border-block-end: 1px solid rgba(10, 42, 61, 0.08);
  box-shadow: 0 4px 18px rgba(10, 42, 61, 0.06);
  transition: background-color 220ms ease, box-shadow 220ms ease;
  --nav-ink: #0A2A3D;
  --nav-ink-muted: rgba(10, 42, 61, 0.72);
  --nav-hover-bg: rgba(10, 42, 61, 0.07);
  --nav-hover-ink: #0A2A3D;
}
.hotline-strip + .site-header,
.site-header[data-header]:not([data-static-header]):not([data-relief-header]) {
  /* sits below the hotline strip on the homepage */
  inset-block-start: 2.25rem;
}

/* Scrolled / open state — same white surface, slightly firmer shadow so the
   bar reads as "settled" once content has scrolled beneath it. */
.site-header.is-scrolled,
.site-header[data-static-header],
.site-header[data-relief-header],
.site-header.is-menu-open {
  background: var(--header-bg);
  box-shadow: 0 8px 24px rgba(10, 42, 61, 0.1);
  inset-block-start: 0;
}

/* ------ brand-mark ------ */
.site-header .brand-mark {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  height: 3rem;
  width: 3rem;
  isolation: isolate;
  text-decoration: none;
  transition: transform 220ms ease;
}
.site-header .brand-mark:hover { transform: scale(1.04); }
.site-header .brand-mark img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.15rem 0.4rem rgba(10, 42, 61, 0.12));
  transition: opacity 220ms ease;
  pointer-events: none;
}
/* Colored logo on the white bar (the white variant existed for a dark bar,
   which the bar no longer is). On 45 pages this was the one asset the
   redesign was explicitly asked to foreground ("مع اللوجو").
   These two lines are NOT what decides it, though — v9-design-system.css
   carries the same rule with !important, loads after this file, and is the
   actual final authority (confirmed by measurement: editing only here left
   the logo inverted). That file was corrected to match. Kept here anyway so
   a reader of just this file sees the intended state, not just the working
   one three files away. */
.site-header .brand-logo--colored { opacity: 1; }
.site-header .brand-logo--white { opacity: 0; }

/* ------ menu-toggle (hamburger) ------ */
.site-header .menu-toggle {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  margin: 0;
  background: rgba(10, 42, 61, 0.05);
  border: 1px solid rgba(10, 42, 61, 0.14);
  border-radius: 0.65rem;
  color: #0A2A3D;
  cursor: pointer;
  transition: background-color 180ms ease, transform 180ms ease;
}
.site-header .menu-toggle:hover { background: rgba(10, 42, 61, 0.1); }
.site-header .menu-toggle span:not(.sr-only) {
  display: block;
  width: 1.15rem;
  height: 0.12rem;
  background: currentColor;
  border-radius: 999px;
  margin: 0.18rem 0;
  transition: transform 220ms ease, opacity 220ms ease;
}
.site-header.is-menu-open .menu-toggle span:nth-child(1) { transform: translateY(0.3rem) rotate(45deg); }
.site-header.is-menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.site-header.is-menu-open .menu-toggle span:nth-child(3) { transform: translateY(-0.3rem) rotate(-45deg); }

/* ------ nav: inline at desktop, panel at <=1280 ------ */
.site-header .site-menu {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: visible;
}
.site-header .site-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 2.4rem;
  padding: 0 0.85rem;
  border-radius: 0.55rem;
  color: var(--nav-ink-muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: color 180ms ease, background-color 180ms ease;
}
.site-header .site-menu a:hover {
  color: var(--nav-hover-ink);
  background: var(--nav-hover-bg);
}
/* Split from :hover, and the `outline: 0` removed.
   At specificity (0,3,1) that reset beat the site's real ring --
   motion-fixes.css sets :focus-visible { outline: 3px solid } at (0,1,0) -- so
   the primary navigation had NO focus indicator at all. Its only cue was the
   hover background. And sharing one rule with :hover made focus and hover
   indistinguishable, so a keyboard user could not tell them apart. 2.4.7. */
.site-header .site-menu a:focus-visible {
  color: var(--nav-hover-ink);
  background: var(--nav-hover-bg);
  outline: 3px solid var(--gold-500, #C9A227);
  outline-offset: 2px;
}
.site-header .site-menu a[aria-current="page"],
.site-header .site-menu a.active {
  color: var(--nav-hover-ink);
  background: rgba(201, 162, 39, 0.16);
  box-shadow: inset 0 -2px 0 var(--gold-500, #C9A227);
}

/* «تبرع الآن» reads as the header's one CTA on every page, not just a link
   among ten others — the association's own conversion path, echoed by
   competitor headers (Al Ihsan's pill "تبرعات" button), not a flat list. */
.site-header .site-menu a[href="donate"] {
  margin-inline-start: 0.35rem;
  padding-inline: 1.1rem;
  background: linear-gradient(135deg, #C9A227, #E3C15A);
  color: #0A2A3D;
  font-weight: 800;
  box-shadow: 0 6px 16px rgba(201, 162, 39, 0.35);
}
.site-header .site-menu a[href="donate"]:hover,
.site-header .site-menu a[href="donate"]:focus-visible {
  color: #0A2A3D;
  background: linear-gradient(135deg, #D8B13A, #EFD583);
  outline-offset: 3px;
}
.site-header .site-menu a[href="donate"][aria-current="page"] {
  box-shadow: inset 0 -2px 0 rgba(10, 42, 61, 0.45), 0 6px 16px rgba(201, 162, 39, 0.35);
}

/* ------ header tools ------ */
.site-header .header-tools {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.site-header .language-switch {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0.2rem;
  background: rgba(10, 42, 61, 0.05);
  border: 1px solid rgba(10, 42, 61, 0.14);
  border-radius: 999px;
}
.site-header .language-switch button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.85rem;
  min-width: 2.4rem;
  padding: 0 0.6rem;
  background: transparent;
  border: 0;
  border-radius: 999px;
  color: rgba(10, 42, 61, 0.65);
  font-family: "Alexandria", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.site-header .language-switch button:hover { color: #0A2A3D; }
.site-header .language-switch button.active {
  /* White pill, navy text — not the reverse. aegov-dls.css forces this
     button's `color` with !important (a fixed white-fill assumption it
     documents inline); a navy fill here would have paired navy-on-navy at
     1:1, invisible. Loaded after this file, it would always win the tie. */
  background: #fff;
  color: #0A2A3D;
}

.site-header .command-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.2rem;
  padding: 0 0.85rem;
  background: rgba(10, 42, 61, 0.05);
  border: 1px solid rgba(10, 42, 61, 0.14);
  border-radius: 999px;
  color: rgba(10, 42, 61, 0.75);
  font-family: "Alexandria", sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}
.site-header .command-trigger:hover { background: rgba(10, 42, 61, 0.1); color: #0A2A3D; }
.site-header .command-trigger > span {
  display: inline-grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  background: rgba(10, 42, 61, 0.1);
  border-radius: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
}
.site-header .command-trigger[data-open-command] > .command-trigger__icon {
  background: rgba(10, 42, 61, 0.1);
}
.site-header .command-trigger__icon svg {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-header .header-action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.4rem;
  padding: 0 1rem;
  /* An OUTLINE, not a gold fill.
     --gold-500 used to resolve to green (motion.min.css redefined the gold
     variables with green values), so this button was never gold and never
     competed with anything. Correcting those variables turned it into a solid
     gold disc sitting beside the gold «تبرع الآن» CTA -- two identical primary
     weights in one header, and six solid gold blocks in the first screen.
     Gold is the association's ACCENT, and an accent that fills every action
     stops marking anything. One gold fill per view: the donate CTA. */
  background: transparent;
  border: 1px solid rgba(201, 162, 39, 0.6);
  border-radius: 999px;
  color: #0A2A3D;
  font-family: "Alexandria", sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.site-header .header-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(201, 162, 39, 0.25);
}
.site-header .header-action .bag-count {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  background: rgba(10, 42, 61, 0.12);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

/* ------ collapse below 1280: hamburger + slide-down panel ------ */
@media (max-width: 1280px) {
  /* .site-menu leaves the white bar and becomes a dark floating panel here —
     these four tokens are the only re-declaration the light/dark swap needs.
     Selector list matched to the root header rule's exactly: the page's real
     element is header.site-header[data-static-header], specificity (0,2,1),
     which beats a plain .site-header (0,1,0) regardless of source order or
     @media — custom-property cascade follows normal specificity, a media
     query does not raise it. A plain .site-header override here silently
     lost to the base rule and the mobile panel rendered navy-on-navy. */
  .site-header,
  header.site-header,
  header.site-header[data-header],
  header.site-header[data-static-header],
  header.site-header[data-relief-header] {
    --nav-ink: #fff;
    --nav-ink-muted: rgba(255, 255, 255, 0.86);
    --nav-hover-bg: rgba(255, 255, 255, 0.1);
    --nav-hover-ink: #fff;
  }
  .site-header .site-menu {
    position: fixed;
    inset-block-start: 4.5rem;
    inset-inline-end: clamp(0.75rem, 3vw, 1.5rem);
    inset-inline-start: clamp(0.75rem, 3vw, 1.5rem);
    z-index: 1100;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.4rem;
    padding: 1rem;
    background: rgba(10, 42, 61, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    box-shadow: 0 24px 60px rgba(10, 42, 61, 0.4);
    transform: translateY(-0.5rem);
    opacity: 0;
    pointer-events: none;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .site-header.is-menu-open .site-menu {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-header .site-menu a {
    height: auto;
    padding: 0.7rem 0.95rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.04);
  }
  .site-header .site-menu a:hover {
    background: rgba(255, 255, 255, 0.1);
  }

  /* tools shrink */
  .site-header .command-trigger b { display: none; }
  .site-header .command-trigger { padding: 0 0.6rem; }
  .site-header .header-action b { display: none; }
  .site-header .header-action { padding: 0 0.85rem; }
}

/* hide hamburger above the breakpoint */
@media (min-width: 1281px) {
  .site-header .menu-toggle {
    display: none;
  }
}

@media (max-width: 640px) {
  .site-header { gap: 0.6rem; padding: 0.6rem 0.85rem; }
  .site-header .language-switch { display: none; }
  .site-header .command-trigger { display: none; }
}

/* Hotline strip — the dark navy masthead above the now-white working nav;
   see the long comment at the top of the file for why it stays dark. */
.hotline-strip {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 1011;
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 0.5rem 1rem;
  background: #0a2a3d;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.78rem;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.hotline-strip b { color: var(--gold-500, #C9A227); }
@media (max-width: 1280px) {
  .hotline-strip { display: none; }
}

/* Header sits beneath the hotline strip when one is present, top:0 otherwise. */
.site-header,
header.site-header,
header.site-header[data-header],
header.site-header[data-static-header],
header.site-header[data-relief-header] {
  inset-block-start: 2.25rem;
}
@media (max-width: 1280px) {
  .site-header,
  header.site-header,
  header.site-header[data-header],
  header.site-header[data-static-header],
  header.site-header[data-relief-header] {
    inset-block-start: 0;
  }
}
/* Pages with no hotline strip — header at top:0. Detected via :not pseudo on body. */
body:not(:has(.hotline-strip)) .site-header { inset-block-start: 0 !important; }

/* Hero brand logo — large white mark, top-left of hero in RTL (= visual right). */
.hero-brand-logo {
  display: block;
  width: clamp(140px, 18vw, 220px);
  height: auto;
  margin-block-end: 1.5rem;
  filter: drop-shadow(0 0.6rem 1.4rem rgba(0, 0, 0, 0.45));
}

/* keep main content clear of the fixed header + hotline */
body {
  scroll-padding-block-start: 7rem;
}
main, main#main {
  padding-block-start: 6.75rem;
}
@media (max-width: 1280px) {
  main, main#main { padding-block-start: 4.5rem; }
}

/* ------ dropdown submenus (6-section nav) ------ */
.site-header .site-menu .nav-item.has-submenu {
  position: relative;
  display: inline-flex;
}
.site-header .site-menu .nav-parent {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  height: 2.4rem;
  padding: 0 0.85rem;
  border: 0;
  background: transparent;
  color: var(--nav-ink-muted);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.55rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 180ms ease, background-color 180ms ease;
}
.site-header .site-menu .nav-parent:focus-visible {
  outline: 3px solid var(--gold-500, #C9A227);
  outline-offset: 2px;
}
/* Same split and the same reason as .site-menu a above. */
.site-header .site-menu .nav-parent:hover,
.site-header .site-menu .nav-parent:focus-visible {
  color: var(--nav-hover-ink);
  background: var(--nav-hover-bg);
  outline: 0;
}
.site-header .site-menu .nav-item.is-active > .nav-parent {
  color: var(--nav-hover-ink);
  background: rgba(201, 162, 39, 0.16);
  box-shadow: inset 0 -2px 0 var(--gold-500, #C9A227);
}
.site-header .site-menu .caret {
  width: 0;
  height: 0;
  border-inline: 0.3rem solid transparent;
  border-block-start: 0.32rem solid currentColor;
  opacity: 0.8;
  transition: transform 180ms ease;
}
.site-header .site-menu .nav-item.open > .nav-parent .caret { transform: rotate(180deg); }
.site-header .site-menu .submenu {
  position: absolute;
  inset-block-start: calc(100% + 0.4rem);
  inset-inline-end: 0;
  min-width: 12rem;
  display: grid;
  gap: 0.15rem;
  padding: 0.4rem;
  margin: 0;
  background: rgba(10, 42, 61, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  box-shadow: 0 18px 44px rgba(10, 42, 61, 0.4);
  opacity: 0;
  transform: translateY(-0.4rem);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
  z-index: 1100;
}
.site-header .site-menu .nav-item.has-submenu:hover > .submenu,
.site-header .site-menu .nav-item.has-submenu:focus-within > .submenu,
.site-header .site-menu .nav-item.open > .submenu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.site-header .site-menu .submenu a {
  height: auto;
  padding: 0.55rem 0.7rem;
  background: transparent;
  /* Explicit, not var(--nav-ink-muted): the popover itself is always a dark
     navy panel (both the desktop hover-popover and the mobile accordion sit
     on rgba(10,42,61,…)), independent of whether the bar around it is
     currently light (desktop) or dark (mobile) — see .submenu above. */
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.site-header .site-menu .submenu a:hover,
.site-header .site-menu .submenu a:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

/* mobile: submenus render inline as an accordion */
@media (max-width: 1280px) {
  .site-header .site-menu .nav-item.has-submenu { display: block; }
  .site-header .site-menu .nav-parent {
    width: 100%;
    justify-content: space-between;
    height: auto;
    padding: 0.7rem 0.95rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 0.6rem;
  }
  .site-header .site-menu .submenu {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    min-width: 0;
    margin-block-start: 0.3rem;
    margin-inline-start: 0.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
    display: none;
  }
  .site-header .site-menu .nav-item.open > .submenu { display: grid; }
}