/* ==========================================================================
   Site header — floating bar with the burger menu, logo, phone/CTA and the
   AR/EN switch (links to this page in the other language). Behaviour:
   js/components/site-header.js (shrinks on scroll) and nav-menu.js.
   ========================================================================== */

/* --- Header -----------------------------------------------------------------
   A floating bar, fixed and pulled out of normal flow so it reads as part
   of the hero's own visual layout, floating over the top of the banner
   photo (the header stays a sibling of <main> in the DOM, not nested
   inside the hero, so its "banner" landmark role and the #main skip-link
   both still work — only its CSS position changes).

   Same geometric treatment as .hero-strip further down — solid
   --color-bg fill, --radius-lg rounded corners, --shadow-lg — rather than
   its own one-off shape, so the two floating cards read as one consistent
   visual language instead of two different edge styles.

   Reproducing a fixed reference layout (menu cluster / logo / actions
   cluster, left to right), not a mirrorable one — direction:ltr on
   .head-inner pins that physical order regardless of the page's own
   [dir="rtl"], same technique already used for .cp-grid and .hero-copy.
   Arabic glyph shaping is unaffected by a container's direction; only
   start/end alignment defaults flip with it, which nothing here relies on.
   #navMain itself sits outside that scope (a sibling of .head-inner) so its
   Arabic link list keeps its own natural RTL alignment, and it's a plain
   burger-triggered dropdown at every width now — no inline desktop row. */
.site-head {
  position: fixed; z-index: 30;
  top: var(--space-4); inset-inline: var(--space-4);
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: padding 0.25s ease, box-shadow 0.25s ease, top 0.25s ease;
  padding: var(--space-3) 0;
}
.site-head.is-small { padding: var(--space-2) 0; top: var(--space-2); box-shadow: var(--shadow-lg); }
.head-inner {
  position: relative; display: grid; direction: ltr;
  grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-6);
}

.brand { display: flex; align-items: center; justify-self: center; text-decoration: none; color: var(--color-text); }
.brand-logo { display: block; height: 76px; width: auto; transition: height 0.25s ease; }
.is-small .brand-logo { height: 58px; }
/* jitha-logo.svg has 22% empty space above and below the artwork, so the
   header logo is scaled up into that space rather than given a taller box:
   the mark reads bigger while the bar keeps its height at every breakpoint.
   Change the factor to resize it (up to ~1.7 before it outgrows its box). */
.brand .brand-logo { transform: scale(1.3); }

.head-cluster { display: flex; align-items: center; gap: var(--space-3); }
.head-phone, .head-cta { flex: none; }

/* — language switch —
   Two copies of the same control exist: .head-lang-switch lives in the
   header bar (desktop), .nav-lang-switch lives inside the mobile nav
   dropdown (≤720px, see the media query below) — never both at once.
   Each is a pair of links to this page in Arabic and English; the current
   language's link is .is-active (aria-current="page"). */
.lang-switch {
  display: inline-flex; align-items: center; overflow: hidden; flex: none;
  border: 1px solid var(--color-divider); border-radius: 999px;
}
.nav-lang-switch { display: none; margin-bottom: var(--space-2); }
.lang-opt {
  border: 0; background: none; cursor: pointer; font: inherit; text-decoration: none; text-align: center;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  /* "AR"/"EN" are always Latin codes regardless of dir, so this tracking
     is intentionally not tokenized to --tracking-* like the Arabic-facing rules. */
  font-size: 12px; letter-spacing: 0.03em; padding: 7px 14px;
  color: color-mix(in srgb, var(--color-text) 65%, transparent); /* 55% was 3.8:1 — under AA */
  transition: background-color 0.2s ease, color 0.2s ease;
}
.lang-opt:hover { color: var(--color-text); }
.lang-opt.is-active { background: var(--color-accent); color: var(--color-text); }

/* — nav: burger-triggered dropdown at every width, anchored under the
   burger's fixed physical-left position (not .head-inner's direction:ltr
   scope, so its own Arabic link list keeps normal RTL alignment). — */
.nav-main {
  position: absolute; top: 100%; left: var(--space-4); margin-top: var(--space-3);
  min-width: 220px; z-index: 5;
  display: flex; flex-direction: column; align-items: stretch; gap: var(--space-2);
  background: var(--color-bg); border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); padding: var(--space-4);
  box-shadow: var(--shadow-lg);
}
.nav-main:not(.is-open) { display: none; }
.nav-main.is-open { animation: rise 0.22s ease both; }
.nav-main > a {
  text-decoration: none; color: var(--color-text); font-size: 15px;
  padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-main > a:hover { color: var(--color-accent-700); background: color-mix(in srgb, var(--color-text) 6%, transparent); }

.burger { flex: none; flex-direction: column; gap: 4px; border-color: var(--color-divider); }
.burger:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.burger span { display: block; width: 16px; height: 2px; border-radius: 999px; background: var(--color-text); transition: transform 0.2s ease, opacity 0.2s ease; }
.burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2) { opacity: 0; }
.burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }


@media (prefers-reduced-motion: reduce) { .nav-main.is-open { animation: none; } }

@media (max-width: 1020px) {
  /* Same gap as the hero-copy fix above: this was only becoming a
     full-width dropdown at ≤720px, so 721-1020px (tablet/phablet) still
     got the desktop rule — a narrow 220px box anchored to the left with
     nothing filling the rest of the header's width when open. */
  .nav-main { inset-inline: var(--space-4); }
}

@media (max-width: 720px) {
  .head-inner { gap: var(--space-2); }
  /* Header bar is back on mobile — burger cluster first (physical-left,
     per .head-inner's own fixed direction:ltr order), logo centered in
     the grid's middle 1fr track, phone cluster last. The lang switch
     moves out of the bar and into the burger's own dropdown (a matching
     control already lives there) so the bar itself only ever holds
     burger + logo + phone — "browse products" gives way to the phone
     icon for the same reason. */
  .head-lang-switch { display: none; }
  .head-cta { display: none; }
  .head-phone { display: inline-flex; }
  /* Mobile logo sized up from the shared desktop value, by request — burger
     and phone clusters are both plain icon-only controls at this width
     (nav links/lang-switch moved into the dropdown above), so the middle
     1fr track has the slack to give the brand mark more presence than it
     needs on the wider desktop bar. */
  .brand-logo { height: 88px; }
  .is-small .brand-logo { height: 70px; }
  /* Was a tiny compact pill sized to fit the cramped header bar — now that
     it lives inside the dropdown instead, it gets the room to be a proper
     full-width segmented control: a tinted track so the two halves read as
     one control at a glance, equal-width AR/EN segments sized for a
     thumb tap, and its own bottom margin (base rule) keeping it a clearly
     separate "settings" row above the nav links rather than blending into
     the list. */
  .nav-lang-switch {
    display: flex; width: 100%;
    background: var(--color-neutral-100);
  }
  .nav-lang-switch .lang-opt {
    flex: 1; text-align: center;
    padding: 11px 14px; font-size: 13px;
  }
}

/* The 720px step above (hide phone, shrink the CTA/lang-switch) still isn't
   enough room once the header's own .wrap padding + .site-head's floating-
   card inset are added in: at a 320-375px viewport (iPhone SE/mini, most
   budget Android), burger + lang-switch + logo + CTA button add up to more
   than the space actually left after that padding — the CTA button in
   particular was overflowing/crowding into the logo rather than sitting on
   its own baseline. Reclaims room from the chrome around the content
   (header padding, floating-card inset) before shrinking the content
   itself, and only shrinks what's left after that. */
@media (max-width: 480px) {
  .site-head { inset-inline: var(--space-2); }
  .head-inner { padding-inline: var(--space-3); }
  .head-cluster { gap: var(--space-2); }
  .head-cta { padding: 6px 10px; font-size: 11px; }
  .lang-opt { padding: 5px 8px; font-size: 10px; }
  .brand-logo, .is-small .brand-logo { height: 52px; }
}

/* Below this, even the 480px tier's reductions leave the 3-column grid
   itself (auto 1fr auto, gap included) tight — the grid's own inter-column
   gap is the one thing that step doesn't touch. */
@media (max-width: 400px) {
  .head-inner { gap: 4px; }
}