/* ============================================================
   HEADER.CSS
   Site header, desktop navigation, CTA button,
   hamburger toggle, and mobile navigation drawer.
   ============================================================ */


/* ------------------------------------------------------------
   1. HEADER SHELL
   ------------------------------------------------------------ */
.site-header {
  position: relative;
  z-index: var(--z-ui);
  padding: 17px var(--sp-11) 10px;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/* ------------------------------------------------------------
   2. LOGO
   ------------------------------------------------------------ */
.logo {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.logo__icon {
  width: 35px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}

.logo__wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-logo);
  color: var(--clr-white);
  letter-spacing: 1.78px;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ------------------------------------------------------------
   3. DESKTOP NAVIGATION
   ------------------------------------------------------------ */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-10);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-links__item > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-nav);
  color: var(--clr-white);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  transition: opacity var(--ease-default);
}

.nav-links__item > a:hover {
  opacity: 0.75;
}

/* Active state — filled white pill */
.nav-links__item--active > a {
  background: var(--clr-nav-active-bg);
  color: var(--clr-nav-active-txt);
  padding: 7px 15px 7px 13px;
  border-radius: var(--radius-pill);
}

/* Dropdown chevron wrapper — keeps the img inline-flex inside the <a> */
.nav-links__chevron-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Chevron icon from Figma.
   The SVG path is oriented upward; Figma flips it with scaleY(-1) to point down.
   Width/height match Figma's 3.81 × 3.75 px icon, bumped to 5px for HiDPI legibility. */
.nav-links__chevron {
  display: block;
  width:  5px;
  height: 5px;
  flex-shrink: 0;
  transform: scaleY(-1);     /* mirrors Figma's -scale-y-100 wrapper */
  object-fit: contain;
}


/* ------------------------------------------------------------
   4. CTA BUTTON  ("Get in touch")
   ------------------------------------------------------------ */
.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 148px;
  padding: 13px 24px;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-nav);
  color: var(--clr-white);
  white-space: nowrap;
  background: transparent;
  transition:
    background   var(--ease-default),
    border-color var(--ease-default);
}

.btn-cta:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--clr-white);
}


/* ------------------------------------------------------------
   5. HAMBURGER BUTTON  (mobile only)
   ------------------------------------------------------------ */
.hamburger {
  display: none;          /* shown via media query */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  border-radius: var(--radius-sm);
  color: var(--clr-white);
  font-size: 18px;
  line-height: 1;
  transition: border-color var(--ease-default);
  cursor: pointer;
}

.hamburger:hover {
  border-color: var(--clr-white);
}

/* Toggle icon states via JS-added class */
.hamburger[aria-expanded="true"]  .hamburger__icon-open  { display: none; }
.hamburger[aria-expanded="true"]  .hamburger__icon-close { display: block; }
.hamburger[aria-expanded="false"] .hamburger__icon-open  { display: block; }
.hamburger[aria-expanded="false"] .hamburger__icon-close { display: none; }


/* ------------------------------------------------------------
   6. MOBILE NAV DRAWER
   ------------------------------------------------------------ */
.mobile-nav {
  display: none;            /* flex when .is-open via JS */
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  background: rgba(8, 8, 15, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  padding: 8px 24px 24px;
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav__link {
  display: block;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 13px;
  color: var(--clr-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity var(--ease-default);
}

.mobile-nav__link:last-of-type {
  border-bottom: none;
}

.mobile-nav__link:hover {
  opacity: 0.7;
}

.mobile-nav__cta {
  display: block;
  margin-top: var(--sp-4);
  padding: 13px 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: 12px;
  color: var(--clr-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  transition: background var(--ease-default), border-color var(--ease-default);
}

.mobile-nav__cta:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--clr-white);
}


/* ------------------------------------------------------------
   7. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .site-header {
    padding: 16px 28px 10px;
  }

  .nav-links {
    gap: 18px;
  }

  .site-nav {
    gap: 24px;
  }

  .btn-cta {
    min-width: 120px;
    padding: 11px 18px;
  }
}

@media (max-width: 767px) {
  .site-header {
    padding: 14px 20px 12px;
  }

  /* Hide desktop nav, reveal hamburger */
  .site-nav  { display: none; }
  .hamburger { display: inline-flex; }

  .logo__wordmark {
    font-size: 18px;
  }
}


/* ------------------------------------------------------------
   8. LOGO ICON SWAP (default vs scroll)
   ------------------------------------------------------------ */

/* Scroll icon hidden by default */
.logo__icon--scroll {
  display: none;
}


/* ------------------------------------------------------------
   9. SCROLLED STATE
   JS adds .is-scrolled to .site-header after 80px scroll.
   Figma ref: node 3413-8002

   Layout  : fixed white bar, bottom corners rounded 16px
   Content : centered inner block max-width 1282px (79px side
             padding at 1440 — matches Figma's absolute centering)
   Shadow  : drop-shadow(0px 4px 7.5px rgba(0,0,0,0.08))
   Logo    : coloured ◇ icon + #111 wordmark
   Nav     : dark #333, 8px gap, pill hover area, #e9ebed active
   CTA     : 14px / 12px 32px, dark border + dark text
   ------------------------------------------------------------ */

/* Slide-in animation — fires each time the class is applied */
@keyframes headerSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ── Shell ── */
.site-header.is-scrolled {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-modal);

  /* Figma: inner content w=1283px centred in full-width bar.
     At 1440px viewport: side padding = (1440-1283)/2 = 78.5px.
     Formula: (100% - 1283px) / 2, clamped for narrow screens. */
  padding: 15px clamp(20px, calc((100% - 1283px) / 2), 9999px);

  background: #ffffff;
  border-radius: 0 0 var(--radius-md) var(--radius-md);

  /* Figma: drop-shadow(0px 4px 7.5px rgba(0,0,0,0.08)) */
  box-shadow: 0px 4px 7.5px rgba(0, 0, 0, 0.08);

  animation: headerSlideDown 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* ── Logo icon: swap white → coloured ── */
.site-header.is-scrolled .logo__icon--default { display: none; }
.site-header.is-scrolled .logo__icon--scroll  { display: block; }

/* ── Logo wordmark → dark ── */
.site-header.is-scrolled .logo__wordmark {
  color: #111111;
}

/* ── Site-nav: set gap between nav-links group and CTA
   Figma: gap-[40.5px] between the two children of the right flex group ── */
.site-header.is-scrolled .site-nav {
  gap: 40.5px;
}

/* ── Nav links group: Figma gap-[30px] between items ── */
.site-header.is-scrolled .nav-links {
  gap: 30px;
}

/* ── Non-active nav links: NO padding — Figma shows bare flex items
   (gap-[8.25px] only, no surrounding pad). Small symmetric pad kept
   so the hover pill has a visible hit area. ── */
.site-header.is-scrolled .nav-links__item > a {
  color: #333333;
  gap: 8.25px;                  /* Figma: gap-[8.25px] text → chevron */
  padding: 6.75px 0;            /* no horizontal pad on non-active items */
  border-radius: var(--radius-pill);
  transition: background var(--ease-default);
}

/* Hover: expand padding just enough for the pill bg to look right */
.site-header.is-scrolled .nav-links__item > a:hover {
  opacity: 1;
  padding: 6.75px 10px;
  background: rgba(51, 51, 51, 0.07);
}

/* ── Active pill: #e9ebed, exactly 74.88px wide
   Figma: pill w=74.88px  →  16px + text(30.821) + gap(8.25) + chevron(3.81) + 16px = 74.881px ✓
   Figma: pill h=29.25px  →  v-pad = (29.25 - 15.75lh) / 2 = 6.75px ✓ ── */
.site-header.is-scrolled .nav-links__item--active > a {
  background: #e9ebed;
  color: #333333;
  padding: 6.75px 16px;         /* symmetric 16px → pill = 74.88px */
}

.site-header.is-scrolled .nav-links__item--active > a:hover {
  background: #dde0e2;
}

/* ── Chevrons → dark (brightness(0) turns white → black) ── */
.site-header.is-scrolled .nav-links__chevron {
  filter: brightness(0);
}

/* ── CTA button
   Figma: h=45.735px w=148.5px border-[1.5px] border-[#333] text-[10.5px] lh=20.25px
   v-pad = (45.735 - 20.25) / 2 = 12.7425px ≈ 12.75px ── */
.site-header.is-scrolled .btn-cta {
  font-size: var(--fs-nav);     /* 10.5px — matches Figma */
  line-height: 20.25px;         /* Figma: leading-[20.25px] */
  padding: 12.75px 24px;        /* gives h ≈ 45.75px matching Figma 45.735px */
  min-width: 148.5px;           /* Figma: w-[148.5px] */
  background: transparent;
  border-color: #333333;
  color: #333333;
}

.site-header.is-scrolled .btn-cta:hover {
  background: rgba(51, 51, 51, 0.06);
  border-color: #111111;
}

/* ── Hamburger → dark (mobile) ── */
.site-header.is-scrolled .hamburger {
  border-color: rgba(51, 51, 51, 0.4);
  color: #333333;
}

.site-header.is-scrolled .hamburger:hover {
  border-color: #333333;
}

/* ── Scrolled responsive ── */
@media (max-width: 1024px) {
  .site-header.is-scrolled {
    padding: 15px 24px;
  }
}

@media (max-width: 767px) {
  .site-header.is-scrolled {
    padding: 14px 20px;
  }
}


/* ─────────────────────────────────────────────────────────────
   PAGE-LEVEL HEADER OVERRIDE — HOMEPAGE
   Matches the same corner-radius behaviour as Services / About /
   Case Study / Blogs:
   • All 4 corners rounded when the bar first appears (slide-in)
   • Top corners flatten to 0 once the user is scrolled (is-stuck)
   ───────────────────────────────────────────────────────────── */
body.page--home .site-header.is-scrolled {
  border-radius: var(--radius-md); /* all 4 corners while sliding in */
}

body.page--home .site-header.is-scrolled.is-stuck {
  border-radius: 0 0 var(--radius-md) var(--radius-md); /* flatten top corners */
}