/*
 * Header: barra bianca a pillola centrata su fondo scuro (il fondo continua nell'apertura della pagina).
 * Logo, voci di menu (la corrente ha un pallino sotto), pulsante; sotto i 1000px logo + hamburger (JS: components/menu.js).
 * Sticky su tutti i formati, senza un fondo proprio: resta sempre solo la barra. Il verde scuro dietro la barra in cima
 * alla pagina è il fondo del body (alto --site-header-h, continua nell'apertura) e scorre via con la pagina: scorrendo
 * non resta mai una fascia bianca sopra la prima sezione. Scorrendo (classe is-scrolled, JS: components/header-scroll.js)
 * la barra si rimpicciolisce un po' e prende un'ombra. L'altezza dell'header non cambia (--site-header-h): la pagina sotto non salta.
 * --site-header-sticky = dove finiscono la barra rimpicciolita e un piccolo margine: gli elementi sticky della pagina
 * (es. la barra dei filtri) si fermano lì.
 */
@layer components {
  :root { --site-header-h: 98px; --site-header-sticky: 88px; }
  body {
    background:
      linear-gradient(var(--site-header-bg, var(--color-primary-dark)) 0 0) top / 100% var(--site-header-h) no-repeat,
      var(--color-bg);
  }
  .site-header {
    position: sticky; top: 0; z-index: 30; height: var(--site-header-h);
    padding: 24px var(--gutter) 0;
    transition: padding .25s;
  }
  .admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
  /* Scorrendo resta solo la barra: la fascia trasparente intorno lascia passare i clic al contenuto sotto */
  .site-header.is-scrolled { padding-top: 12px; pointer-events: none; --site-header-logo-h: 40px; }
  .site-header.is-scrolled .site-header__bar { pointer-events: auto; }
  .site-header__bar {
    position: relative; width: 100%; max-width: 960px; margin-inline: auto;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: 10px 10px 10px 22px; border-radius: var(--radius-pill); background: var(--color-bg);
    transition: padding .25s, box-shadow .25s;
  }
  .site-header.is-scrolled .site-header__bar {
    padding: 7px 7px 7px 20px;
    box-shadow: 0 0 0 1px rgb(20 35 29 / 0.06), 0 12px 32px -8px rgb(20 35 29 / 0.22);
  }
  .site-header__logo { flex: none; display: flex; }
  .site-header__logo img { height: var(--site-header-logo-h, 52px); width: auto; transition: height .25s; }
  .site-header__nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: center; }
  .site-header__link {
    position: relative; padding: 10px; font-size: 16px; color: var(--color-ink);
    &:hover { color: var(--color-primary); }
    &.is-current::after {
      content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; margin-left: -2.5px;
      border-radius: 50%; background: var(--color-primary);
    }
  }
  /* Voce con sottomenu: link + freccia (pulsante "disclosure") + pannello sotto la barra. JS: components/menu.js */
  .site-header__item { display: flex; align-items: center; margin-right: -4px; }
  .site-header__more {
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    background: transparent; color: var(--color-ink);
    & svg { transition: transform .2s; }
    &:hover { color: var(--color-primary); background: var(--color-surface); }
    &[aria-expanded="true"] svg { transform: rotate(180deg); }
  }
  .site-header__panel {
    position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; z-index: 40;
    width: min(960px, calc(100vw - 2 * var(--gutter))); padding: 16px;
    border-radius: var(--radius-xl); background: var(--color-bg);
    box-shadow: 0 1px 0 var(--color-line), 0 24px 48px -16px rgb(0 0 0 / 0.25);
    &[hidden] { display: none; }
    /* Ponte invisibile sopra il pannello: passando dal link al pannello col mouse non si chiude */
    &::before { content: ""; position: absolute; inset: -12px 0 100%; }
  }
  /* Senza JS il pannello si apre al passaggio del mouse o con il focus */
  html:not(.js) .site-header__item:is(:hover, :focus-within) .site-header__panel { display: block; }
  html:not(.js) .site-header__more { display: none; }

  .site-header__toggle {
    display: none; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; flex: none;
    align-items: center; justify-content: center; cursor: pointer;
    background: var(--color-primary); color: var(--color-on-primary);
  }

  /* Sotto i 1000px: logo + hamburger */
  @media (max-width: 1000px) {
    :root { --site-header-h: 92px; --site-header-sticky: 80px; }
    .site-header { padding-top: 16px; --site-header-logo-h: 42px; }
    .site-header.is-scrolled { padding-top: 10px; --site-header-logo-h: 38px; }
    .site-header__bar, .site-header.is-scrolled .site-header__bar { padding: 8px 8px 8px 18px; }
    .site-header__nav, .site-header__cta { display: none; }
    .site-header__toggle { display: flex; }
  }
}