/* ==========================================================================
   ALBINI E CASTELLI — Header
   ========================================================================== */

/* ==========================================================================
   HEADER — Figma 88:305. 1440x123.
   Logo 190x54 @ (80,45); nav row 34px tall @ y=55 → both centre on y=72,
   which is why the inner row is padded 21px from the top rather than
   vertically centred (that would land on 61.5).
   ========================================================================== */
.site-header {
  position: relative;
  z-index: var(--z-header);
  width: 100%;
  background: var(--c-surface);
  transition: background var(--dur) var(--ease);
}
/* Width/gutter come from the shared band rule in base.css. */
.site-header__inner {
  display: flex;
  align-items: center;
  height: var(--h-header);
  padding-top: 21px;                 /* puts the optical centre on y=72 */
}

/* Logo — two files, cross-faded so the variant swap needs no JS re-render. */
.site-header__logo {
  position: relative;
  width: var(--logo-w);
  aspect-ratio: var(--logo-ratio);
  flex: none;
}
.site-header__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity var(--dur) var(--ease);
}
.site-header__logo .logo--negative { opacity: 0; }
.site-header__logo .logo--color    { opacity: 1; }

/* --- Nav ---------------------------------------------------------------
   Figma x: 623 / 749 / 855 / 977 / 1056 / 1227 / 1348 → a uniform 51px gap. */
/* The nav is right-anchored. Figma's IT chip spans 1343–1365, i.e. it
   deliberately overhangs the 1280 container's right edge (1360) by 5px, so
   the whole row is pulled 5px past the gutter to match. */
.site-nav { margin-left: auto; margin-right: -5px; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: 51px;
}
.site-nav__link {
  display: block;
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  line-height: var(--lh-nav);
  text-transform: uppercase;
  color: var(--c-text-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.site-nav__link:hover,
.site-nav__item.is-open > .site-nav__link,
.site-nav__item.is-current > .site-nav__link { color: var(--c-accent); }
/* The current item is Medium as well as red — confirmed on three independent
   header instances (`77:345` SERVIZI, `77:430` PROGETTI, `104:1142` ESG), all
   Roboto Medium + #af1e2d. Only the colour was being applied. The slot
   min-widths below already carry the extra width this adds. */
.site-nav__item.is-current > .site-nav__link { font-weight: 500; }

/* Figma stores each label's box at a whole pixel; the browser renders Roboto
   0.3–1px narrower per label, which compounds to ~5px of drift by the right
   edge. Pinning min-width per slot reproduces the Figma x-positions exactly
   without clipping — a longer label simply grows past its minimum.
   Desktop only; the drawer stacks and needs no pinning. */
@media (min-width: 1025px) {
  .site-nav__list > .site-nav__item:nth-child(1) .site-nav__link { min-width: 75px; }
  .site-nav__list > .site-nav__item:nth-child(2) .site-nav__link { min-width: 54px; }
  .site-nav__list > .site-nav__item:nth-child(3) .site-nav__link { min-width: 71px; }
  /* Figma's Servizi→Progetti gap is 52px where every other gap is 51px. */
  .site-nav__list > .site-nav__item:nth-child(3) { margin-left: 1px; }
  .site-nav__list > .site-nav__item:nth-child(4) .site-nav__link { min-width: 28px; }
  .site-nav__list > .site-nav__item:nth-child(5) .site-nav__link { min-width: 120px; }
  .site-nav__list > .site-nav__item:nth-child(6) .site-nav__link { min-width: 70px; }
}

/* --- IT/EN switcher — 22x22 chip, 0.4px border, radius 2 ----------------
   -5px margin absorbs the chip's own padding so the "IT" glyph still
   lands on x=1348 inside the 51px rhythm. Inert by design (WPML hook). */
.lang-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: -5px;
  border: 0.4px solid rgba(140, 130, 121, .9);
  border-radius: var(--radius-chip);
  font-weight: var(--fw-nav);
  font-size: var(--fs-nav);
  line-height: 1;
  color: var(--c-text-muted);
  cursor: default;
}

/* --- Variant: transparent over the hero (Figma "Default", 88:304) ------- */
.site-header--over {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
}
.site-header--over .logo--negative { opacity: 1; }
.site-header--over .logo--color    { opacity: 0; }
.site-header--over .site-nav__link,
.site-header--over .lang-switch { color: var(--c-text-invert); }
.site-header--over .lang-switch { border-color: rgba(255, 255, 255, .9); }
.site-header--over .site-nav__link:hover,
.site-header--over .site-nav__item.is-open > .site-nav__link { color: var(--c-accent); }

/* Once scrolled past the hero it solidifies back to Variant2. */
.site-header--over.is-stuck {
  position: fixed;
  background: var(--c-surface);
  box-shadow: 0 1px 0 rgba(30, 30, 30, .06);
}
.site-header--over.is-stuck .logo--negative { opacity: 0; }
.site-header--over.is-stuck .logo--color    { opacity: 1; }
.site-header--over.is-stuck .site-nav__link,
.site-header--over.is-stuck .lang-switch { color: var(--c-text-muted); }
.site-header--over.is-stuck .lang-switch { border-color: rgba(140, 130, 121, .9); }

/* ==========================================================================
   HEADER — mobile metrics (Figma 104:1380: logo 109px @ x=25, y=23)
   ========================================================================== */
@media (max-width: 1024px) {
  .site-header__inner { height: 78px; padding-top: 0; }
  .site-header__logo { width: 109px; }   /* Figma 104:1380 */
}