/* header.css — header sito (1920×81 a desktop full)
   Strategia: layout flex su site-header con 4 figli posizionati (logo / nav / preventivo / contattaci).
   Su HOME (.site-header--overlay) il header è in overlay trasparente sopra l'hero image.
   Su altre pagine (.site-header--solid) sarà bianco solido. */

/* Mai scroll orizzontale: il drawer mobile (.site-nav, sotto) è off-canvas a destra
   (position:fixed; translateX(100%)). Chromium lo ignora, ma Safari include gli elementi
   fixed fuori schermo nella larghezza scrollabile → scrollbar laterale ("il sito diventa
   scrollabile, responsive bloccato"). `clip` (non `hidden`) NON crea un contenitore di
   scroll → la sticky header (.site-header--solid) e lo scroll verticale restano intatti.
   NB: qui (header.css, <link> con ?v=build_ts) e non in reset.css, perché gli @import
   base hanno una versione statica → un loro edit non arriva ai browser con cache. */
html { overflow-x: clip; }

.site-header {
  position: absolute;       /* su home: overlay sopra hero */
  top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: stretch;
  font-family: var(--font-sans);
  color: var(--c-white);
}

/* ===== ZONA 1 — LOGO (banda 220×81, fill trasparente + stroke bianco) ===== */
.site-header__logo {
  width: var(--header-logo-w);   /* 220px */
  background: transparent;
  border: 1px solid var(--c-white);   /* stroke bianco come le voci menu */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.site-header__logo img {
  height: 54px;
  width: auto;
  display: block;
}

/* ===== ZONA 2 — NAV (10 voci box uniformi, stroke bianco + fill bianco 10%) ===== */
.site-nav { flex: 1; display: flex; align-items: stretch; }
.site-nav__list { display: flex; align-items: stretch; gap: 0; flex: 1; }
.site-nav__item {
  position: relative;
  display: flex;
  align-items: stretch;
  min-width: 0;
}
.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 8px;
  width: 100%;
  height: 100%;                                  /* riempie altezza voce sia su <a> che su <button> */
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 20px;
  color: var(--c-white);
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.1);          /* fill bianco 10% */
  border: 1px solid var(--c-white);              /* stroke bianco */
  cursor: pointer;                                /* button HTML perde questo default */
  appearance: none;                               /* reset stili browser per <button> */
  transition: color var(--t-fast), background var(--t-fast);
}

/* Variante "Contatti": fill bianco 100%, testo verde scuro */
.site-nav__link--filled {
  background: var(--c-white);
  color: var(--c-green-dark);
  border-color: var(--c-white);
}
.site-nav__link--filled:hover,
.site-nav__link--filled[aria-current="page"] {
  box-shadow: inset 0 -2px 0 var(--c-green-dark);
}
.site-nav__link--filled .site-nav__arrow { color: var(--c-green); }

/* Variante "Preventivo": resta come default (stroke bianco + fill 10%) */
.site-nav__link--cta .site-nav__arrow { color: var(--c-white); }

/* Freccia laterale generica */
.site-nav__arrow { flex-shrink: 0; }

/* Proporzioni della nav (somma 1698 a fianco del logo 220). Uso flex-grow proporzionale
   così la nav riempie sempre la larghezza disponibile mantenendo i rapporti tra voci,
   indipendentemente dalla risoluzione del viewport. */
.site-nav__item:nth-child(1)  { flex: 150 1 0; }  /* Chi siamo */
.site-nav__item:nth-child(2)  { flex: 218 1 0; }  /* Pulizie Condomini */
.site-nav__item:nth-child(3)  { flex: 157 1 0; }  /* Pulizia Case */
.site-nav__item:nth-child(4)  { flex: 175 1 0; }  /* Pulizie Studi */
.site-nav__item:nth-child(5)  { flex: 180 1 0; }  /* Cura del verde */
.site-nav__item:nth-child(6)  { flex: 207 1 0; }  /* Servizi di pulizia */
.site-nav__item:nth-child(7)  { flex: 158 1 0; }  /* Kit Monouso */
.site-nav__item:nth-child(8)  { flex:  88 1 0; }  /* Blog */
.site-nav__item:nth-child(9)  { flex: 185 1 0; }  /* Preventivo */
.site-nav__item:nth-child(10) { flex: 180 1 0; }  /* Contatti */
.site-nav__link:hover,
.site-nav__link[aria-current="page"],
.site-nav__link[aria-expanded="true"] {
  box-shadow: inset 0 -2px 0 var(--c-white);   /* linea bianca sul bordo inferiore (non cambia colore testo) */
}
/* Chevron SVG inline nelle voci con submenu */
.site-nav__chevron {
  display: block;
  flex-shrink: 0;
  position: relative;
  top: 2px;             /* abbassato per centrare otticamente col testo */
  transition: transform var(--t-fast);
}
.site-nav__link[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }

/* ===== MEGAMENU DROPDOWN ===== */
.megamenu {
  position: absolute;
  top: 100%; left: 0;
  min-width: 280px;
  background: var(--c-white);
  color: var(--c-title);
  box-shadow: var(--sh-overlay);
  padding: 12px 0;
  z-index: var(--z-mega);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-fast), visibility var(--t-fast), transform var(--t-fast);
  transform: translateY(-8px);
}
.site-nav__item[data-open="true"] > .megamenu,
.site-nav__item:hover > .megamenu {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
}
.megamenu__list { display: grid; }
.megamenu__link {
  display: block;
  padding: 12px 24px;
  color: var(--c-title);
  font-size: 17px;
  font-weight: 500;
  transition: background var(--t-fast), color var(--t-fast);
}
.megamenu__link:hover { background: var(--c-bg-soft); color: var(--c-green); }

/* Preventivo e Contatti sono ora voci normali della nav-list (vedi sopra) */

/* ===== VARIANTE SOLID (pagine non-home) ===== */
.site-header--solid {
  position: sticky;
  top: 0;
  background: var(--c-white);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.site-header--solid .site-nav__link {
  color: var(--c-title);
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.12);
}
.site-header--solid .site-nav__link:hover,
.site-header--solid .site-nav__link[aria-current="page"],
.site-header--solid .site-nav__link[aria-expanded="true"] {
  box-shadow: inset 0 -2px 0 var(--c-green-dark);   /* linea verde scuro sulle pagine non-home */
}

/* ===== BURGER MOBILE ===== */
.burger {
  display: none;
  width: 56px; height: var(--header-h);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}
.burger span {
  display: block; width: 24px; height: 2px;
  background: currentColor;
  transition: transform var(--t-fast), opacity var(--t-fast);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.site-header--overlay .burger { color: var(--c-white); }
.site-header--solid .burger { color: var(--c-title); }

/* Resize-guard (set da nav.js): durante il ridimensionamento del viewport disattiva
   le transition del nav, così il drawer NON anima lo scivolamento quando si attraversa
   il breakpoint del burger (anima solo all'apertura/chiusura col burger). */
html.nav-no-anim .site-header,
html.nav-no-anim .site-header * { transition: none !important; }

/* ===== RESPONSIVE ===== */
/* Barra COMPATTA sotto i monitor grandi. Le 10 voci a font 17px richiedono ~1700px
   per stare su una riga: sotto quella soglia, invece di andare in overflow orizzontale
   (scrollbar laterale → "il sito non si riorganizza quando rimpicciolisco la finestra"),
   riduco font/padding/logo così le voci stanno su una riga fino a ~1353px. */
@media (max-width: 1700px) {
  .site-nav__link { font-size: 15px; padding: 0 6px; gap: 3px; }
  .site-nav__chevron { top: 1px; }
  .site-header__logo { width: 172px; }
  .site-header__logo img { height: 44px; }
}
/* Sotto ~1400px nemmeno la barra compatta sta su una riga → menu a tendina (burger).
   Prima il burger scattava solo a ≤1024px, lasciando l'intera fascia 1025–1400px (tutti
   i laptop, incl. MacBook Air ~1440px) in overflow orizzontale invece che riorganizzata. */
@media (max-width: 1400px) {
  .site-header__contattaci { display: none; }
  .site-header__cta-preventivo { display: none; }
  .burger { display: inline-flex; margin-left: auto; padding-right: 16px; }
  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    background: var(--c-green-dark);
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--t-normal);
    overflow-y: auto;
    padding: 24px 20px;
  }
  .site-nav[data-open="true"] { transform: translateX(0); }
  .site-nav__list { flex-direction: column; align-items: stretch; flex: 0; width: 100%; }
  .site-nav__item {
    width: 100%;
    flex-direction: column;          /* link e megamenu impilati, non affiancati */
    align-items: stretch;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }
  .site-nav__link {
    padding: 15px 0;
    width: 100%;
    height: auto;                    /* annulla "height: 100%" del desktop:
                                         in flex column gonfiava il link sulle voci aperte */
    justify-content: space-between;
    color: var(--c-white);
    background: transparent;        /* niente fill 10% in mobile */
    border: 0;                       /* niente stroke di contorno in mobile */
    font-size: 17px;                 /* nel drawer le voci tornano a 17px = come i sotto-link
                                         .megamenu__link: il 15px compatto serve SOLO alla barra
                                         orizzontale (≤1700), qui creerebbe voci disuniformi. */
  }
  .site-nav__link:hover,
  .site-nav__link[aria-current="page"],
  .site-nav__link[aria-expanded="true"] {
    box-shadow: none;                /* niente underline residua sul drawer */
  }
  /* Variante "Contatti" e CTA: in mobile diventano voci normali del drawer */
  .site-nav__link--filled,
  .site-nav__link--cta {
    background: transparent;
    color: var(--c-white);
    border: 0;
  }
  .site-nav__link--filled .site-nav__arrow,
  .site-nav__link--cta .site-nav__arrow { color: var(--c-white); }
  .site-header--solid .site-nav__link {
    color: var(--c-white);
    background: transparent;
    border: 0;
  }
  .site-header--solid .site-nav__link:hover,
  .site-header--solid .site-nav__link[aria-current="page"],
  .site-header--solid .site-nav__link[aria-expanded="true"] {
    box-shadow: none;
  }
  .megamenu {
    position: static; box-shadow: none;
    padding: 0;                       /* niente indent: sotto-voci allineate ai macro */
    background: transparent; color: var(--c-white);
    max-height: 0; overflow: hidden;
    /* max-height effettiva settata da JS (nav.js setItemOpen) allo scrollHeight
       reale → l'animazione copre solo il contenuto, non spazio vuoto. */
    transition: max-height 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  }
  .megamenu__list { display: block; }
  .megamenu__link {
    display: block;
    color: rgba(255,255,255,0.85);
    padding: 8px 0;                  /* stesso ritmo verticale delle voci principali */
    border: 0;
    background: transparent;
  }
  .megamenu__link:hover { background: transparent; color: var(--c-white); }
  .site-header__logo { width: 160px; border: 0; }
  .site-header__logo img { height: 40px; }
}