/* ---------------------------------------------------------------------------
   Sticky header: logo + nav + CTA.

   mobile   (< 768)   logo + hamburger        — the CTA lives inside the menu panel
   tablet   (768+)    logo + hamburger + CTA
   desktop  (1025+)   logo + inline nav + CTA — no hamburger

   Breakpoints and the values below are all measured on the live site's
   rendered DOM, not guessed — confirmed still hamburger at 1024px, already
   inline nav at 1025px (the same threshold used everywhere else on this
   site); CTA hidden at 767px, visible at 768px.
   --------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--surface-page);
  box-shadow: inset 0 -1px 0 var(--border-subtle);
}

/* Band height measured directly on the live site (not just at the tier
   edges): a flat 86px below 768px, 96px from 768px through most of the
   tablet range, 92px from 1025px up — driven there by the nav links'
   own 92px height (36px vertical padding + line height), not by the
   header's own padding, which is 0 at that tier. */
.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 86px;
}

@media (min-width: 768px) {
  .site-header__inner { min-height: 96px; }
}

@media (min-width: 1025px) {
  .site-header__inner { min-height: 92px; }
}

.site-header__logo { display: flex; align-items: center; }

@media (max-width: 1024px) {
  .site-header__logo { margin-right: auto; }
}

/* Fixed 150px below 1025px. */
.site-header__logo img {
  width: 150px;
  height: auto;
}

/* Desktop, per direct request: the logo has to be legible next to the nav.
   The live site runs a fluid 10vw capped at 114px here, which left the mark
   29px tall — smaller on a wide desktop than on a phone, with the
   "Acceleration program in Florence" line too fine to read. This is a
   deliberate deviation from the live site, not a match.

   clamp() keeps three things true at once: never smaller than the 150px the
   narrower breakpoints already use, growing with the viewport, and capped at
   240px (62px tall — comfortable inside the 92px header band). The bar has
   room for it: the nav links need 543px and the CTA 190px, so even at 1025px
   the logo could take ~180px before anything would be squeezed. */
@media (min-width: 1025px) {
  .site-header__logo img { width: clamp(150px, 14vw, 240px); }
}

/* --- CTA ---------------------------------------------------------------- */

/* Sizing/typography now live on the shared .ils-btn component itself
   (components.css) — this only needs to toggle visibility per breakpoint.
   flex-shrink: 0 keeps it from ever being squeezed narrower than its
   nowrap content in the tight logo+CTA+hamburger row on tablet, which
   would otherwise wrap "Candidati ora" onto two lines. */
.site-header__cta { display: none; flex-shrink: 0; order: 3; }

@media (min-width: 768px) {
  /* This one button is genuinely taller on tablet than everywhere else it
     appears — measured on the live site at a flat 56px from 768px up to
     991px, then back to the shared 40px from 992px. Every other "Candidati
     ora" instance (hero, mobile panel, bottom CTA) stays its normal height
     across this range; only the header one has this extra tier. */
  .site-header__cta { display: inline-flex; height: 56px; }
}

@media (min-width: 992px) {
  .site-header__cta { height: 40px; }
}

/* --- Hamburger ---------------------------------------------------------- */

.site-header__toggle {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  order: 2;
}

/* Live site's icon uses a bold ~4px stroke, not a thin 2px line. */
.site-header__burger,
.site-header__burger::before,
.site-header__burger::after {
  display: block;
  width: 26px;
  height: 4px;
  background: currentColor;
  transition: transform var(--dur-base) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard);
}

.site-header__burger { position: relative; }
.site-header__burger::before,
.site-header__burger::after { content: ""; position: absolute; left: 0; }
.site-header__burger::before { top: -8px; }
.site-header__burger::after { top: 8px; }

.site-header__toggle[aria-expanded="true"] .site-header__burger { background: transparent; }
.site-header__toggle[aria-expanded="true"] .site-header__burger::before { top: 0; transform: rotate(45deg); }
.site-header__toggle[aria-expanded="true"] .site-header__burger::after { top: 0; transform: rotate(-45deg); }

/* Mobile only, per direct request — rounded caps on the 3 lines. Scoped to
   <768px so it doesn't touch the already-approved tablet hamburger. */
@media (max-width: 767px) {
  .site-header__burger,
  .site-header__burger::before,
  .site-header__burger::after {
    border-radius: 2px;
  }
}

/* --- Nav ---------------------------------------------------------------- */

.site-nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  padding: var(--space-5) var(--container-pad-sm) var(--space-7);
  background: var(--surface-page);
  box-shadow: 0 12px 24px rgba(28, 28, 28, 0.08);
}

.site-nav[data-open="true"] { display: block; }

.site-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

/* Measured on the live site: Space Grotesk Semibold 13px at 1.4px tracking
   — the shared --type-eyebrow-* tokens are close but not exact (Medium
   14px at 0.12em) and are used elsewhere for actual eyebrow labels, so
   this gets its own values instead of bending that shared token. Colors
   are a genuine grey/green pair this palette doesn't have tokens for
   (#54595F inactive) — used as literal hex here rather than forcing the
   nearest existing token. Hover and the current-section state are two
   distinct greens on the live site, not the same one: hover uses the
   site's regular dark green (--e-global-color-secondary, #0F6A38 — same
   as --text-eco) with an underline in that color; the current section
   uses the brighter accent green (--e-global-color-accent, #61CE70) for
   both text and underline. */
.site-nav__link {
  display: inline-block;
  font-family: var(--type-eyebrow-family);
  font-weight: var(--fw-semibold);
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: var(--type-eyebrow-transform);
  color: #54595f;
  text-decoration: none;
  box-shadow: inset 0 -2px 0 transparent;
  transition: color var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}

.site-nav__link:hover {
  color: var(--text-eco);
  box-shadow: inset 0 -2px 0 var(--text-eco);
}

.site-nav__link[aria-current="true"] {
  color: #61ce70;
  box-shadow: inset 0 -2px 0 #61ce70;
}

/* Tablet only (768–1024px), per direct request: the menu items in the
   disclosure panel are centered and larger — 20px instead of 13px, with more
   room between them. On tablet this panel is the whole navigation and it has
   a full-width dropdown to itself, so the small left-flush 13px labels
   measured off the live site read as an afterthought there.

   Scoped to the tablet band on purpose: mobile (<768px) keeps the approved
   left-flush 13px items, and from 1025px the nav is the inline bar instead.
   Note this is the nav panel only — it does not reopen the site-wide rule
   that titles and body copy are left-aligned below 1025px. */
@media (min-width: 768px) and (max-width: 1024px) {
  .site-nav__list {
    align-items: center;
    gap: var(--space-6);
  }

  .site-nav__link {
    font-size: 20px;
    letter-spacing: 2px; /* 1.4px is tuned for 13px; keeps the same ratio */
  }
}

/* The CTA is duplicated inside the panel: below 768px it is the only way in. */
.site-nav__cta { display: inline-flex; }

@media (min-width: 768px) {
  .site-nav__cta { display: none; }
}

@media (min-width: 1025px) {
  .site-header__toggle { display: none; }

  /* flex: 1 gives the nav the whole space between the logo and the CTA,
     so the links can center inside it instead of just trailing the CTA.
     align-self: stretch (overriding .site-header__inner's own
     align-items: center just for this one child) carries the nav's box
     down to the header's full height, so each link's hover/current-state
     underline — drawn at the link's own bottom edge — lands on the line
     that divides the header from the page below, not floating under the
     text partway up the band. */
  .site-nav {
    flex: 1 1 auto;
    align-self: stretch;
    position: static;
    display: flex;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }

  .site-nav__list {
    /* Needs its own width: 100% now that .site-nav is a flex container —
       as a flex item the list would otherwise shrink to its content width
       and sit at the start of .site-nav, leaving justify-content: center
       with no extra space to center within (the links visibly drifted
       left of true center). */
    width: 100%;
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: var(--space-6);
    margin: 0;
  }

  .site-nav__link {
    display: flex;
    align-items: center;
    height: 100%;
    padding-block: 0;

    /* Larger than the live site's 13px, per direct request — but fluid, not a
       flat bump, because this bar is tight at both ends of the range:
         - at 1025px the links need 543px of the 574px between logo and CTA
         - past ~1440px the container stops growing at --container-max, while
           the logo reaches its 240px cap, leaving the nav only 658px
       A flat 16px measured 646px, which fits the second case by 12px — enough
       to wrap the menu onto two lines the moment a font falls back. 15px
       leaves ~46px there instead, and still reads clearly bigger.
       Tracking moves to em so it keeps the live site's 1.4px-at-13px ratio at
       every size in between (13px x 0.1077 = 1.4px, unchanged at the low end). */
    font-size: clamp(13px, 1.2vw, 15px);
    letter-spacing: 0.1077em;
  }
}