/* ==========================================================================
   ALBI HOME — SITE HEADER
   --------------------------------------------------------------------------
   Geometry is 1:1 with ALBI-HOME-final.fig at 1440px, then made fluid:

     header        130px  = 50px utility strip + 80px main bar
     content       1296px inside 72px gutters
     logo          134x100, centred on the FULL 130px header (not the bar)
     links         16px, 67px gaps, right edge 126px clear of the CTA
     CTA           213x56, 1px gold border, 6px radius
     logo panel    white, right edge 294px @ y0 -> 236px @ y130  (-24deg)
     gold edge     28px wide, same lean
     utility slab  left edge 617px @ y0 -> 641px @ y50  (+26deg)

   !! DO NOT add transform / filter / backdrop-filter / contain to
      .site-header or .site-header__decor. Any of those turns the header into
      a containing block for position:fixed descendants, which would trap the
      drawer and scrim inside a 130px-tall box.
   ========================================================================== */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: var(--z-sticky);
  background-color: var(--bg-nav);
  transition: box-shadow var(--dur-slow) var(--ease-out);

  /* Distance from the viewport edge to the container's content edge.
     Below 1440 the container fills the viewport, so this is just the gutter;
     above it the container stops growing and centres, so this grows with the
     viewport. The logo is placed at this offset — which means the diagonal
     has to be measured from it too, or the panel stays pinned to the left
     edge while the logo drifts to the middle on wide screens. */
  --container-inset: max(var(--gutter), (100% - var(--content-max)) / 2);

  /* How far the panel's top edge sits past the container edge.
     222px at 1440 puts it at 72 + 222 = 294, the Figma value exactly. */
  --panel-lead: clamp(150px, 15.4vw, 222px);
  --panel-right: calc(var(--container-inset) + var(--panel-lead));
  --panel-overhang: 160px;
  --edge-w: clamp(14px, 1.95vw, 28px);
}

.site-header.is-stuck { box-shadow: var(--shadow-nav); }

/* Holds the header's height in normal flow. Because the spacer never changes
   when the bar condenses, no content shifts on scroll. */
.site-header-spacer { height: var(--header-h); }

/* --------------------------------------------------------------------------
   1. DECOR — the three skewed slabs
   Purely visual. No text lives here, so the skew can never distort a glyph.
   -------------------------------------------------------------------------- */
.site-header__decor {
  position: absolute;
  inset: 0;
  z-index: var(--z-decor);
  overflow: hidden;       /* clips the overhangs */
  pointer-events: none;
}

.decor {
  position: absolute;
  display: block;
  transform-origin: top left;
}

/* The utility strip's ground. Warmer than the main bar — #1E1D19 vs #000000,
   measured off the export. Full width; the gold slab and the white panel
   paint over it. */
.decor--utilbg {
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-util-h);
  background-color: var(--bg-nav-util);
  transition: height var(--dur-slow) var(--ease-out);
}

/* Gold utility slab, top-right. Leans the opposite way to the logo panel.
   Measured from the container edge for the same reason the panel is, so the
   dark gap between the two keeps its proportions on wide screens. */
.decor--strip {
  top: 0;
  left: calc(var(--container-inset) + clamp(360px, 37.85vw, 545px));
  right: calc(-1 * var(--panel-overhang));
  height: var(--header-util-h);
  background-color: var(--gold-500);
  transform: skewX(var(--skew-strip));
  transition: height var(--dur-slow) var(--ease-out);
}

/* Gold hairline between the white panel and the black bar. Drawn first and
   tucked 2px under the panel so no sub-pixel seam can show through. */
.decor--edge {
  top: 0;
  bottom: 0;
  left: calc(var(--panel-right) - 2px);
  width: calc(var(--edge-w) + 2px);
  background-color: var(--gold-500);
  transform: skewX(var(--skew-panel));
}

/* White logo panel. Overhangs the left edge so the lean never exposes a gap. */
.decor--panel {
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--panel-overhang));
  width: calc(var(--panel-right) + var(--panel-overhang));
  background-color: var(--bg-panel);
  transform: skewX(var(--skew-panel));
}

/* --------------------------------------------------------------------------
   2. UTILITY STRIP
   -------------------------------------------------------------------------- */
.nav-util {
  position: relative;
  z-index: var(--z-content);
  height: var(--header-util-h);
  overflow: hidden;
  transition: height var(--dur-slow) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
}

.nav-util__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-4);
  height: var(--header-util-h);
}

.nav-util__label {
  font-family: var(--font-display);
  font-size: var(--fs-body);
  color: var(--text-primary);
  white-space: nowrap;
}

.nav-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-social__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 33px;
  height: 33px;
  border: 1.5px solid var(--a-white-68);
  border-radius: var(--radius-pill);
  color: var(--text-primary);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

/* Extends the hit area to 45px without changing the visual circle. */
.nav-social__link::after {
  content: "";
  position: absolute;
  inset: -6px;
}

.nav-social__link:hover {
  border-color: var(--white);
  background-color: var(--white);
  color: var(--gold-600);
}

/* --------------------------------------------------------------------------
   3. MAIN BAR
   -------------------------------------------------------------------------- */
.nav-main {
  position: relative;
  z-index: var(--z-content);
  height: var(--header-main-h);
  transition: height var(--dur-slow) var(--ease-out);
}

.nav-main__inner {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

/* --- Logo ---------------------------------------------------------------
   Absolutely placed so it can centre on the whole 130px header the way the
   design does, while still taking its left edge from the container gutter. */
.nav-logo {
  position: absolute;
  left: var(--gutter);
  top: calc(-1 * var(--header-util-h));
  height: var(--header-h);
  display: flex;
  align-items: center;
  border-radius: var(--radius-xs);
  transition: top var(--dur-slow) var(--ease-out),
              height var(--dur-slow) var(--ease-out);
}

/* Sized by HEIGHT, not width. The mark is 1.348:1, so a width-based rule makes
   it taller than the bar once the bar condenses and the dark wordmark spills
   off the white panel onto the photo. Height-first can never do that.
   100px tall at 1440 = 134px wide, which is the Figma size exactly. */
.nav-logo img {
  height: clamp(48px, 6.94vw, 100px);   /* 100 / 1440 */
  width: auto;
  transition: height var(--dur-slow) var(--ease-out);
}

/* --- Primary links -------------------------------------------------------
   margin-left:auto plus the CTA gap reproduces the design's asymmetric
   placement exactly at 1440 and stays proportional below it. */
.nav-primary { margin-left: auto; }

.nav-primary__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 4.65vw, 67px);   /* 67 / 1440 */
}

.nav-primary__link {
  position: relative;
  display: block;
  padding-block: 10px;          /* 26px line + 20px = 46px, clears the 44px floor */
  color: var(--text-primary);
  font-size: var(--fs-nav);
  font-weight: var(--fw-regular);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-base) var(--ease-out);
}

.nav-primary__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-base) var(--ease-out);
}

.nav-primary__link:hover { color: var(--gold-400); }
.nav-primary__link:hover::after { transform: scaleX(1); }

.nav-primary__link[aria-current="page"] { color: var(--gold-400); }
.nav-primary__link[aria-current="page"]::after { transform: scaleX(1); }

/* --- WhatsApp CTA -------------------------------------------------------- */
.nav-cta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: clamp(1.5rem, 8.75vw, 126px);   /* 126 / 1440 */
  padding: 0 17px 0 10px;
  height: 56px;
  border: 1px solid var(--border-gold);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}

.nav-cta:hover {
  border-color: var(--gold-400);
  background-color: var(--a-gold-12);
  color: var(--text-primary);
  box-shadow: var(--shadow-gold);
}

.nav-cta__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.05;
}

.nav-cta__label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--text-secondary);
}

.nav-cta__number {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   4. HAMBURGER
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  position: relative;
  margin-left: auto;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-line);
  border-radius: var(--radius-sm);
  background-color: var(--a-white-04);
  transition: border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.nav-toggle:hover { border-color: var(--border-gold); background-color: var(--a-gold-12); }

.nav-toggle__bars {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.nav-toggle__bars > span {
  position: absolute;
  height: 2px;
  border-radius: 2px;
  background-color: var(--text-primary);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              width var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.nav-toggle__bars > span:nth-child(1) { width: 21px; transform: translateY(-6px); }
.nav-toggle__bars > span:nth-child(2) { width: 14px; }
.nav-toggle__bars > span:nth-child(3) { width: 21px; transform: translateY(6px); }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(1) {
  transform: rotate(45deg);
  background-color: var(--gold-400);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(2) {
  width: 0;
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars > span:nth-child(3) {
  transform: rotate(-45deg);
  background-color: var(--gold-400);
}

/* --------------------------------------------------------------------------
   5. DRAWER + SCRIM
   -------------------------------------------------------------------------- */
/* Starts below the bar so the header — and therefore the close button the
   visitor just used to open this thing — stays fully lit and clickable. */
.nav-scrim {
  position: fixed;
  inset: var(--header-h) 0 0;
  z-index: var(--z-scrim);
  background-color: var(--a-black-64);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
}
.nav-scrim.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-slow) var(--ease-out), visibility 0s;
}

.nav-drawer {
  position: fixed;
  top: var(--header-h);
  right: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: min(380px, 86vw);
  padding:
    var(--space-5)
    max(var(--gutter), env(safe-area-inset-right))
    calc(var(--space-6) + env(safe-area-inset-bottom))
    var(--gutter);
  background-color: var(--ink-900);
  border-left: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  visibility: hidden;
  transform: translateX(100%);
  transition: transform var(--dur-slow) var(--ease-out),
              visibility 0s linear var(--dur-slow);
}
.nav-drawer.is-open {
  visibility: visible;
  transform: translateX(0);
  transition: transform var(--dur-slow) var(--ease-out), visibility 0s;
}

.nav-drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 52px;                       /* comfortably over the 44px floor */
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  font-size: var(--fs-nav);
  letter-spacing: .05em;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}
.nav-drawer__link:hover { color: var(--gold-400); padding-left: var(--space-2); }
.nav-drawer__link[aria-current="page"] { color: var(--gold-400); }

.nav-drawer__chevron {
  color: var(--gold-500);
  opacity: .7;
  transition: transform var(--dur-base) var(--ease-out);
}
.nav-drawer__link:hover .nav-drawer__chevron { transform: translateX(3px); opacity: 1; }

.nav-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.nav-drawer__foot {
  margin-top: auto;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.nav-drawer__foot-label {
  margin-bottom: var(--space-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.nav-social--drawer { gap: var(--space-3); }
.nav-social--drawer .nav-social__link { width: 44px; height: 44px; }
.nav-social--drawer .nav-social__link::after { inset: 0; }

/* ==========================================================================
   6. BREAKPOINTS
   ========================================================================== */

/* --- 1200-1439: the CTA loses its two text lines but keeps the mark ------- */
@media (max-width: 1199.98px) {
  .nav-cta {
    gap: 0;
    padding: 0;
    width: 56px;
    height: 56px;
    justify-content: center;
  }
  .nav-cta__text { display: none; }
}

/* --- <=1023: hamburger territory ----------------------------------------- */
@media (max-width: 1023.98px) {
  .nav-util,
  .decor--utilbg,
  .decor--strip { display: none; }

  .nav-primary { display: none; }

  .nav-toggle { display: block; }

  /* The CTA sits beside the burger and shrinks to a tap-sized square. */
  .nav-cta {
    margin-left: auto;
    width: 46px;
    height: 46px;
  }
  .nav-cta + .nav-toggle { margin-left: var(--space-3); }

  .nav-cta .bubble { width: 28px; height: 28px; }
}

/* --- <=767: narrow the diagonal so the logo keeps its clearance ----------- */
@media (max-width: 767.98px) {
  .site-header {
    --panel-lead: clamp(104px, 30vw, 150px);
    --edge-w: 12px;
  }
  .nav-logo img { height: clamp(40px, 12vw, 50px); }
  .nav-drawer { width: 100%; border-left: 0; }
}

/* --------------------------------------------------------------------------
   7. STUCK STATE
   The strip folds away and the bar compresses. The spacer is untouched, so
   nothing below the header moves.
   -------------------------------------------------------------------------- */
.site-header.is-stuck .nav-util,
.site-header.is-stuck .decor--utilbg,
.site-header.is-stuck .decor--strip { height: 0; }
.site-header.is-stuck .nav-util { opacity: 0; }
.site-header.is-stuck .nav-main { height: var(--header-h-stuck); }
.site-header.is-stuck .nav-logo { top: 0; height: var(--header-h-stuck); }
.site-header.is-stuck .nav-logo img { height: 44px; }   /* 59px wide inside a 64px bar */
.site-header.is-stuck .nav-cta { height: 46px; }

/* Below 1024 the bar is already compact, so it does not condense further. */
@media (max-width: 1023.98px) {
  .site-header.is-stuck .nav-main { height: var(--header-main-h); }
  .site-header.is-stuck .nav-logo { height: var(--header-h); }
  .site-header.is-stuck .nav-logo img { height: clamp(40px, 12vw, 54px); }
}

/* --------------------------------------------------------------------------
   8. NO-JS FALLBACK
   Without the script the drawer can never be toggled, so the header stops
   being fixed and the menu simply renders as a list under the bar.
   -------------------------------------------------------------------------- */
.no-js .site-header { position: static; }
.no-js .site-header-spacer,
.no-js .nav-toggle,
.no-js .nav-scrim { display: none; }

/* The decor is inset:0 on the header so it tracks the bar as it condenses.
   Without JS the drawer sits inside the header in normal flow, which makes
   the header tall — so the slabs must be pinned to the bar height instead,
   or the white panel paints straight over the menu. */
.no-js .site-header__decor {
  height: var(--header-h);
  bottom: auto;
}

@media (max-width: 1023.98px) {
  .no-js .nav-drawer {
    position: static;
    width: 100%;
    visibility: visible;
    transform: none;
    border-left: 0;
    border-top: 1px solid var(--border-subtle);
    box-shadow: none;
  }
}