/* ============================================================
   Villa San Vigilio — COMPONENTI CONDIVISI (header, footer, nav-list)
   Usati su >1 pagina => vivono QUI (mai dentro un page-*.css).
   ============================================================ */

/* ---------------- HEADER / NAV ---------------- */
/* Nav in banda alta ~109px, sovrapposta al contenuto (absolute), navy uppercase. */
.site-header {
  position: absolute;
  top: 0;
  inset-inline: 0;
  z-index: 30;
}
.site-header .container { padding-inline: 0; }   /* nav a tutta larghezza (slot pari 0–1920, come nel Figma) */

.site-nav__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);   /* colonne DAVVERO uguali (minmax(auto,1fr) sbilancia col testo lungo) */
  align-items: center;
  min-height: 6.8125rem;      /* 109px */
}
.site-nav__link {
  display: block;              /* riempie la cella grid → il testo si centra davvero nello slot */
  font-family: var(--font-serif);
  font-size: var(--fs-nav);    /* 26px */
  font-weight: 400;
  line-height: var(--lh-nav);  /* 0.96 */
  color: var(--c-navy);
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.01em;
  transition: opacity .25s ease;
}
.site-nav__link:hover { opacity: .6; }
.site-nav__link.is-active { text-decoration: underline; text-underline-offset: 0.35em; }
/* pagina corrente: omessa dalla nav (come nel Figma) -> rimuove la sua colonna dalla griglia */
.site-nav__list li:has(> .is-current) { display: none; }

/* toggle mobile (checkbox-hack, JS-free) */
.nav-toggle, .nav-toggle-label { display: none; }

@media (max-width: 1024px) {
  .site-header { position: absolute; }
  .site-nav__list {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    background: var(--c-sky);
    padding: 1.5rem 0;
    gap: 1.25rem;
    align-content: start;            /* voci in alto: il pannello è alto quanto lo schermo */
    /* il pannello arriva fino in fondo: sotto le voci non resta contenuto della pagina
       che si possa confondere con una voce del menu (es. il "1520" della home) */
    height: calc(100vh - 4.5rem);    /* fallback per i browser senza dvh (iOS <=15.3) */
    height: calc(100dvh - 4.5rem);   /* dvh e non svh: segue l'area visibile anche con le
                                        barre del browser ritratte. 4.5rem = barra MENU */
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .35s ease, opacity .25s ease;
  }
  .nav-toggle-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 4.5rem;
    padding-inline: var(--gutter);
    font-family: var(--font-serif);
    font-size: 1.1rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--c-navy);
  }
  .nav-toggle-label::after { content: "☰"; margin-left: .6em; font-size: 1.4em; line-height: 1; }
  /* la lista sta dentro <nav>, quindi il fratello da agganciare è .site-nav */
  .nav-toggle:checked ~ .site-nav .site-nav__list {
    max-height: calc(100vh - 4.5rem);
    max-height: calc(100dvh - 4.5rem);
    overflow-y: auto;                /* telefono in orizzontale: le voci restano raggiungibili */
    overscroll-behavior: contain;    /* arrivati in fondo alle voci non trascina la pagina */
    opacity: 1;
    pointer-events: auto;
  }
  /* col menu aperto la pagina dietro non si scrolla. `overflow:hidden` non basta (lo scroll
     che arriva dal pannello la trascina comunque): col body fisso il documento non ha
     proprio nulla da scorrere. Il menu si apre solo da cima pagina (l'header sta lì),
     quindi non si perde la posizione. Dove :has() manca (iOS <=15.3) si comporta come prima. */
  body:has(.nav-toggle:checked) {
    position: fixed;
    inset: 0;
    width: 100%;
    overflow: hidden;
  }
  .nav-toggle:checked ~ .nav-toggle-label::after { content: "✕"; }
  /* a menu aperto anche la barra MENU prende il fondo del pannello (niente striscia di
     foto in cima) e la ✕ torna navy: i colori per pagina servono solo sopra l'hero */
  .nav-toggle:checked ~ .nav-toggle-label { background: var(--c-sky); color: var(--c-navy); }
  .site-nav__link { font-size: 1.35rem; padding: .35rem 0; }
  /* nel pannello aperto lo sfondo è chiaro: i link tornano navy anche dove la
     pagina li colora di chiaro per la foto dell'hero */
  .nav-toggle:checked ~ .site-nav .site-nav__list .site-nav__link { color: var(--c-navy); }
}

/* ---------------- NAV-LIST secondaria (homepage, su immagine cielo) ---------------- */
.navlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.navlist__link {
  font-family: var(--font-serif);
  font-size: var(--fs-navlist);   /* 40px */
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-navy);
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 0.12em;
  text-align: center;
}
.navlist__link:hover { opacity: .65; }

/* ---------------- FOOTER ---------------- */
.site-footer {
  background: var(--c-navy);
  color: var(--c-on-navy);
  min-height: 22.625rem;          /* 362px */
  display: flex;
  align-items: center;
  padding-block: 5.125rem;        /* ~82px top offset del Figma */
}
.site-footer__cols {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
}
.site-footer__col {
  width: 27.3125rem;              /* 437px */
  max-width: 100%;
  font-size: var(--fs-footer);    /* 24px */
  line-height: var(--lh-body);
}
.site-footer__col p { margin: 0; }
.site-footer__col h2,
.site-footer__col .site-footer__title {
  font-size: var(--fs-footer);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: calc(var(--fs-footer) * var(--lh-body));  /* una riga vuota dopo il titolo (come nel Figma) */
}
/* riga vuota intenzionale prima di un blocco (es. copyright) */
.site-footer__col .site-footer__gap-top { margin-top: calc(var(--fs-footer) * var(--lh-body)); }
.site-footer__col a { text-decoration: underline; text-underline-offset: .18em; }
.site-footer__col a:hover { opacity: .7; }

/* Il footer cambia colore per pagina (= accento della pagina). Default = home (navy). */
body[data-page="storia"]    .site-footer { background: var(--c-terracotta); }
body[data-page="contatti"]  .site-footer { background: var(--c-olive); }
body[data-page="matrimoni"] .site-footer { background: var(--c-rosewood); }
body[data-page="servizi"]   .site-footer { background: var(--c-brown); }
body[data-page="cultura"]   .site-footer { background: var(--c-forest); }

@media (max-width: 1024px) {
  .site-footer { min-height: 0; padding-block: 3rem; }
  .site-footer__cols { flex-wrap: wrap; gap: 2.5rem 2rem; }
  .site-footer__col { width: calc(50% - 1rem); font-size: 1rem; }
}
@media (max-width: 560px) {
  .site-footer__col { width: 100%; }
}