/* ==========================================================================
   Layout — container, header, nav, footer, section, grid
   Breakpoint: mobile <600px · tablet 600–899px · desktop 900–1279px · wide ≥1280px
   ========================================================================== */

.vt-container{
  max-width: var(--vt-container-max);
  margin-inline: auto;
  padding-inline: var(--vt-gutter);
}

/* Campo macchie a livello di intera pagina — <main> è l'unico contenitore di
   riferimento per le macchie decorative (mai per-sezione, per evitare la "linea di
   cucitura" fra un blocco e l'altro): tutte le .vt-macchia vivono come figlie dirette
   di <main>, PRIMA delle sezioni di contenuto, posizionate con top in percentuale
   sull'altezza totale della pagina. header/footer restano fuori da questo campo. */
main{
  position: relative;
  overflow: hidden;
}

/* Header — fondo lilla pieno (tema chiaro dello strumento gemello) */
.vt-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--vt-testata-fondo);
}

.vt-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--vt-space-3);
}

/* Blocco marchio condiviso da header e footer (.vt-brand): logo a sinistra, centrato in
   verticale sul blocco a due righe formato da nome + tagline (spigoli sinistri allineati,
   tagline a 4px sotto il nome). Si parametrizza solo con le variabili:
   --vt-brand-logo (lato del logo), --vt-brand-name-size (corpo del nome),
   --vt-brand-tagline-size (corpo della tagline), --vt-brand-gap (logo–testo). */
.vt-brand{
  --vt-brand-logo: 72px;
  --vt-brand-name-size: 17px;
  --vt-brand-tagline-size: 14px;
  --vt-brand-gap: var(--vt-space-2);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--vt-brand-gap);
  row-gap: var(--vt-space-1);
  align-items: center;
  text-decoration: none;
}

.vt-brand__logo{
  grid-column: 1;
  grid-row: 1 / span 2;
  align-self: center;
  width: var(--vt-brand-logo);
  height: var(--vt-brand-logo);
  min-width: var(--vt-brand-logo); /* mai rimpicciolito dalla griglia */
  max-width: none;
  flex-shrink: 0;
}

.vt-brand__name{
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-family: var(--vt-font-titolo);
  font-weight: 700;
  font-size: var(--vt-brand-name-size);
  line-height: 1.25;
  color: var(--vt-bianco);
}

.vt-brand__tagline{
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  font-size: var(--vt-brand-tagline-size);
  line-height: 1.4;
  color: var(--vt-bianco-lilla);
}

/* Header e footer usano ESATTAMENTE lo stesso blocco (stessi valori di default sopra);
   qui sotto solo le regole dell'header, dove lo spazio è poco */
.vt-header__logo .vt-brand__name,
.vt-header__logo .vt-brand__tagline{
  white-space: nowrap;
}

/* Schermi piccoli: logo e nome più piccoli, uguali in header e footer */
@media (max-width: 599px){
  .vt-brand{
    --vt-brand-logo: 56px;
    --vt-brand-name-size: 14px;
  }
}

/* Telefoni stretti (≤419px): il nome va su due righe (altrimenti il selettore tema si
   sovrappone) e la tagline scende a 12px */
@media (max-width: 419px){
  .vt-header__inner{
    gap: var(--vt-space-2);
  }
  .vt-header__logo{
    --vt-brand-tagline-size: 11px;
    min-width: 0;
  }
  .vt-header__logo .vt-brand__name{
    white-space: normal;
    line-height: 1.15;
  }
  .vt-header__actions{
    gap: 6px;
    flex-shrink: 0;
  }
  /* selettore tema un po' più compatto per far stare la tagline */
  .vt-header .vt-tema-selector{
    padding: 2px;
  }
  .vt-header .vt-tema-selector__opt{
    width: 28px;
    height: 28px;
  }
}

/* Schermi sotto i 370px: non c'è spazio per la tagline accanto a selettore tema e hamburger;
   il nome resta (nel footer la tagline è sempre visibile) */
@media (max-width: 369px){
  .vt-header__logo .vt-brand__tagline{
    display: none;
  }
}

/* Gruppo di destra nell'header: nav + selettore tema + hamburger, insieme come un solo
   figlio flex di .vt-header__inner (che è space-between fra logo e questo gruppo) */
.vt-header__actions{
  display: flex;
  align-items: center;
  gap: var(--vt-space-3);
}

/* Focus visibile su fondo lilla pieno: l'outline lilla-600 globale non contrasta (1,1:1), qui bianco */
.vt-header :focus-visible,
.vt-nav__drawer :focus-visible{
  outline-color: var(--vt-bianco);
}

/* Nav */
.vt-nav{
  display: none;
  align-items: center;
  gap: var(--vt-space-2);
}

/* Con 5 voci la nav orizzontale entra solo da 1040px in su (sotto: menu a hamburger);
   fra 1040 e 1179px padding e gap dei link sono un po' più compatti */
@media (min-width: 1040px){
  .vt-nav{
    display: flex;
  }
}

@media (min-width: 1040px) and (max-width: 1179px){
  .vt-nav{
    gap: 2px;
  }
  .vt-nav .vt-nav__link{
    padding-inline: 11px;
  }
}

.vt-nav__toggle{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 1040px){
  .vt-nav__toggle{
    display: none;
  }
}

.vt-nav__drawer{
  position: fixed;
  inset: 0;
  background: var(--vt-testata-fondo);
  z-index: 100;
  overflow-y: auto;
}

.vt-nav__drawer[hidden]{
  display: none;
}

.vt-nav__drawer-inner{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vt-space-6);
  padding-block: var(--vt-space-6);
  min-height: 100%;
}

.vt-nav__drawer-links{
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-4);
  margin-top: var(--vt-space-7);
}

.vt-nav__drawer-links .vt-nav__link{
  font-size: 22px;
}

/* Footer — stessa base lilla dell'header, struttura lockup + due colonne (§5.5, adattata a sito) */
.vt-footer{
  background: var(--vt-testata-fondo);
  padding-block: var(--vt-space-6) var(--vt-space-4);
}

.vt-footer__grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--vt-space-6);
  padding-bottom: var(--vt-space-5);
  border-bottom: 1px solid rgba(255,255,255,.28); /* decorativo */
}

@media (max-width: 699px){
  .vt-footer__grid{
    grid-template-columns: 1fr;
    gap: var(--vt-space-5);
  }
}

/* Marchio nel footer: usa .vt-brand con gli stessi valori dell'header (72px / 17px / 14px; 56px / 14px sotto i 600px) */

/* Colonna "Pagine" — due sotto-colonne di 2 link ciascuna, per ridurre l'altezza totale */
.vt-footer__pagine{
  display: flex;
  gap: var(--vt-space-5);
}

.vt-footer__col-title{
  font-family: var(--vt-font-etichetta);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--vt-bianco-lilla);
  margin: 0 0 var(--vt-space-3);
}

.vt-footer__col ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--vt-space-2);
}

.vt-footer__col a,
.vt-footer__col span{
  color: var(--vt-bianco);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.vt-footer__col a:hover,
.vt-footer__col a:focus-visible{
  text-decoration: underline;
}

/* Link Instagram nel footer — icona + testo, bersaglio di tocco ≥44px; la sottolineatura
   che scorre (motion.css) resta sotto il testo grazie a background-origin sul solo contenuto */
.vt-footer__col a.vt-footer__social{
  display: inline-flex;
  align-items: center;
  gap: var(--vt-space-2);
  min-height: 44px;
  padding-block: 10px;
  background-origin: content-box;
}

/* Il fondo lilla della testata assorbe l'outline lilla-600 globale: nel footer il focus è bianco */
.vt-footer a:focus-visible{
  outline-color: var(--vt-bianco);
}

.vt-footer__bottom{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--vt-space-3);
  padding-top: var(--vt-space-4);
}

.vt-footer__bottom p{
  margin: 0;
  color: var(--vt-bianco-lilla);
  font-family: var(--vt-font-etichetta);
  font-size: 11px;
}

.vt-footer__legal{
  display: flex;
  gap: var(--vt-space-4);
  flex-wrap: wrap;
}

.vt-footer__legal a{
  color: var(--vt-bianco-lilla);
  font-family: var(--vt-font-etichetta);
  font-size: 11px;
  text-decoration: none;
}

.vt-footer__legal a:hover,
.vt-footer__legal a:focus-visible{
  text-decoration: underline;
  color: var(--vt-bianco);
}

/* Section */
.vt-section{
  padding-block: var(--vt-space-8);
}

@media (max-width: 599px){
  .vt-section{
    padding-block: var(--vt-space-6);
  }
}

/* Sezione a due colonne (testo + immagine/bolla) — usata es. in Chi sono */
.vt-split{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--vt-space-6);
  align-items: center;
}

@media (min-width: 900px){
  .vt-split{
    grid-template-columns: 1.2fr 0.8fr;
  }
}

/* Griglia responsive generica */
.vt-grid{
  display: grid;
  gap: var(--vt-space-5);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}