/* ==========================================================================
   BAR3AM — header
   Figma: 2475:2074 (bar) / 2475:2075 (row) — 1280 x 144, RTL
   Every desktop number below is the literal Figma value at 1280:
     bar     144 tall, 2px #C0C0C0 bottom rule, no fill (hero wash shows through)
     row     1200 wide, 97 tall, gap 123, centred  ->  54.5px slack each side
     CTA     161 x 45, r10, #135BB0, Tajawal Bold 18 / #F7F7FB
     nav     gap 19, 28 tall, Bold 16 #5A5A5A, active Bold 18 #135BB0
     rule    1 x 27.074 between items
     logo    86 x 75, object-cover
   ========================================================================== */

.header {
  --header-height:  var(--header-h);   /* 144px — Figma 2475:2074 */
  --header-row:     1200px;            /* Figma 2475:2075 */
  --header-pad:     40px;              /* row sits at x=40 on the 1280 canvas */
  --header-gap:     123px;             /* logo | nav | CTA */
  --header-nav-gap: 38px;              /* 19px each side of the 1px rule */

  position: sticky;
  inset-block-start: 0;
  z-index: 100;

  inline-size: 100%;
  block-size: var(--header-height);

  /* No fill in Figma — the hero wash (2475:2031) starts at canvas y=0 and
     runs behind the bar. Same gradient + same 1280x832 box as .hero, anchored
     at the top, so the two line up seamlessly across the rule. */
  background: var(--grad-hero) 50% 0 / 100% var(--grad-hero-h) no-repeat,
              var(--c-card);
  border-block-end: 2px solid var(--c-hairline);

  transition: block-size var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}

/* ---- Scrolled state (js/main.js toggles the class) ----------------------
   Not in Figma — the design only specifies the at-rest bar. Once the page
   moves, a transparent bar would sit on top of whatever section scrolls
   under it, so it turns into a frosted white sheet. */
.header--scrolled {
  --header-height: 92px;
  background: color-mix(in srgb, var(--c-card) 92%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: var(--sh-sm);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header--scrolled { background: var(--c-card); }
}

/* ---- Row ---------------------------------------------------------------
   Figma centres the three blocks inside the 1200 row with a fixed 123px gap;
   it is NOT space-between. Content is 161 + 598 + 86 + 2x123 = 1091, leaving
   54.5px of slack on each side — that slack is what the design shows. */
.header__inner {
  block-size: 100%;
  inline-size: 100%;
  max-inline-size: calc(var(--header-row) + 2 * var(--header-pad));
  margin-inline: auto;
  padding-inline: var(--header-pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--header-gap);
}

/* ---- Logo (2475:2088) — 86 x 75 ----------------------------------------- */
.header__logo {
  display: flex;
  align-items: center;
  flex: none;
  transition: transform var(--dur) var(--ease);
}
.header__logo:hover { transform: scale(1.04); }

/* Figma's mark is 86 x 75 (1.147:1); the real brand mark (logo-stacked.svg)
   is 327.92 x 213.68 (1.535:1). Height is what the eye reads in a header row,
   so the 75px slot height is kept and the width follows the real artwork. */
.header__logo-img {
  block-size: 75px;
  inline-size: auto;
  max-inline-size: none;
  transition: block-size var(--dur) var(--ease);
}
.header--scrolled .header__logo-img { block-size: 56px; }

/* ---- Nav (2475:2078) — 598 x 28 ----------------------------------------- */
.header__nav { flex: 0 1 auto; min-inline-size: 0; }

.header__list {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 28px;
}

.header__item {
  position: relative;
  display: flex;
  align-items: center;
  padding-inline: calc(var(--header-nav-gap) / 2);
}

/* 2475:2080 / 2082 / 2084 / 2086 — 1 x 27.074 rule, centred in the 19+19 gap */
.header__item + .header__item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 1px;
  block-size: 27.074px;
  background: var(--c-hairline);
  pointer-events: none;
}

.header__link {
  position: relative;
  display: inline-block;
  font-size: var(--fs-body);        /* 16px */
  font-weight: var(--fw-bold);
  line-height: 1;                   /* Figma lineHeight 100 */
  color: var(--c-ink-500);          /* #5A5A5A */
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}

/* 2475:2087 — the active item is a step larger and brand blue */
.header__link--active,
.header__link.is-active {
  font-size: var(--fs-body-lg);     /* 18px */
  color: var(--c-primary);
}

.header__link:hover { color: var(--c-primary); }

/* Underline grows from the inline-start edge */
.header__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: -7px;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 100% 50%;       /* = inline-start under RTL */
  transition: transform var(--dur) var(--ease);
}
.header__link:hover::after,
.header__link:focus-visible::after { transform: scaleX(1); }

/* ---- Actions ------------------------------------------------------------ */
.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}

/* 2475:2076 — 161 x 45, r10, #135BB0, Bold 18 on #F7F7FB, no shadow */
.header__cta {
  inline-size: 161px;
  block-size: 45px;
  padding-inline: 10px;
  border-radius: 10px;
  font-size: var(--fs-body-lg);
  line-height: 1;
  color: var(--c-bg);
  box-shadow: none;
}

/* ---- Burger (mobile only) ----------------------------------------------- */
.header__burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  inline-size: 44px;
  block-size: 44px;
  border-radius: var(--r-sm);
  flex: none;
  transition: background-color var(--dur-fast) var(--ease);
}
.header__burger:hover { background: color-mix(in srgb, var(--c-primary) 8%, transparent); }

.header__burger-bar {
  inline-size: 22px;
  block-size: 2px;
  border-radius: 2px;
  background: var(--c-primary);
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}

.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(1) {
  transform: translateY(7px) rotate(-45deg);
}
.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.2);
}
.header__burger[aria-expanded="true"] .header__burger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(45deg);
}

/* ==========================================================================
   RESPONSIVE — Figma stops at 1280, everything below is ours.
   The 123px gap is the first thing to go: it is pure breathing room, so it
   collapses before any type or the logo is touched.
   ========================================================================== */

@media (max-width: 1200px) {
  .header {
    --header-gap:     clamp(20px, 3.6vw, 48px);
    --header-nav-gap: clamp(20px, 2.8vw, 34px);
    --header-pad:     clamp(16px, 3vw, 40px);
  }
  .header__inner { justify-content: space-between; }
}

@media (max-width: 1000px) {
  .header { --header-height: 112px; }
  .header--scrolled { --header-height: 84px; }
  .header__logo-img { block-size: 60px; }
  .header__link { font-size: var(--fs-sm); }
  .header__link--active,
  .header__link.is-active { font-size: var(--fs-body); }
}

/* Inline nav no longer fits — collapse it into a burger panel. */
@media (max-width: 900px) {
  .header {
    --header-height: 76px;
    --header-nav-gap: 0px;
  }
  .header--scrolled { --header-height: 68px; }

  .header__inner { gap: 12px; }

  .header__logo-img { block-size: 48px; }
  .header--scrolled .header__logo-img { block-size: 42px; }

  .header__burger { display: flex; }
  .header__cta { display: none; }

  .header__nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    background: var(--c-card);
    border-block-end: 1px solid var(--c-line);
    box-shadow: var(--sh-md);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
  }

  .header__nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .header__list {
    flex-direction: column;
    align-items: stretch;
    block-size: auto;
    padding-block: 8px 16px;
    padding-inline: 24px;
  }

  .header__item { padding-inline: 0; }

  /* The vertical rule becomes a full-width horizontal one */
  .header__item + .header__item::before {
    inset-inline: 0;
    inset-block-start: 0;
    translate: none;
    inline-size: 100%;
    block-size: 1px;
  }

  .header__link {
    display: block;
    padding-block: 14px;
    font-size: var(--fs-body);
    line-height: var(--lh-tight);
  }
  .header__link--active,
  .header__link.is-active { font-size: var(--fs-body); }

  .header__link::after { inset-inline-end: auto; inline-size: 34px; inset-block-end: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .header,
  .header__nav,
  .header__logo,
  .header__logo-img,
  .header__link::after,
  .header__burger-bar { transition: none; }
}