/* ============================================================
   Layout globale: header, navigazione, footer
   Mobile-first: le regole base sono per smartphone, si aggiunge
   layout da tablet/desktop in su con min-width.
   ============================================================ */

/* --- Header: sempre visibile, trasparente. Il colore del testo segue
   lo sfondo su cui si trova (app.js aggiunge .is-on-dark sopra le
   sezioni con data-dark). --- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  background: transparent;
  color: var(--ink);
  transition: color 0.35s ease, background-color 0.35s ease, backdrop-filter 0.35s ease;
}
/* Appena si scorre, un velo di sfocatura tiene leggibile il menu senza
   perdere la trasparenza. */
.site-header.is-scrolled {
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
}
.site-header.is-on-dark { color: var(--paper); }
/* sopra le sezioni scure o colorate (terracotta) la sfocatura senza saturazione:
   il colore resta quello vero e non diventa arancione acceso */
.site-header.is-on-dark.is-scrolled {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.site-header__inner {
  height: var(--header-height);
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.site-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.wordmark {
  font-family: var(--font-logo);
  color: inherit;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0;
}
.wordmark em { font-style: italic; }
.wordmark--sm { font-size: 2rem; }

/* Pulsante hamburger, visibile solo su mobile */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target-min);
  height: var(--tap-target-min);
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  position: relative;
  z-index: 2;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-full);
  position: relative;
  transition: transform 0.3s var(--ease-out), opacity 0.2s ease, background-color 0.2s;
}
.nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile: pannello a tutto schermo che compare sfumando */
.site-nav {
  position: fixed;
  inset: 0;
  background: var(--paper);
  color: var(--ink);
  padding: calc(var(--header-height) + var(--space-6)) var(--gutter) var(--space-6);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease-out), visibility 0.35s;
  overflow-y: auto;
}
.site-nav.is-open { opacity: 1; visibility: visible; }
/* Con il menu aperto niente sfocatura: backdrop-filter renderebbe l'header
   il contenitore del pannello fisso, che resterebbe alto solo 64px. */
.site-header.is-menu-open { color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target-min);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: inherit;
  text-decoration: none;
}
.site-nav.is-open .site-nav__list li {
  animation: nav-in 0.5s var(--ease-out) both;
}
.site-nav.is-open .site-nav__list li:nth-child(2) { animation-delay: 40ms; }
.site-nav.is-open .site-nav__list li:nth-child(3) { animation-delay: 80ms; }
.site-nav.is-open .site-nav__list li:nth-child(4) { animation-delay: 120ms; }
.site-nav.is-open .site-nav__list li:nth-child(5) { animation-delay: 160ms; }
@keyframes nav-in {
  from { opacity: 0; transform: translateY(16px); filter: blur(4px); }
  to { opacity: 1; transform: none; filter: none; }
}
.site-nav__cta { margin-top: var(--space-5); }
.site-nav__cta .btn { font-size: var(--fs-base); min-height: var(--tap-target-min); }

/* Il bottone "Entra" inverte i colori rispetto allo sfondo */
.site-nav__cta .btn-pill { background: var(--ink); color: var(--paper); }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .site-nav {
    position: static;
    opacity: 1;
    visibility: visible;
    background: transparent;
    color: inherit;
    padding: 0;
    overflow: visible;
  }
  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-5);
  }
  .site-nav__list a {
    min-height: auto;
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0;
    opacity: 0.85;
    transition: opacity 0.2s;
  }
  .site-nav__list a:hover { opacity: 1; }
  /* pagina corrente: sottolineatura sottile */
  .site-nav__list a[aria-current="page"]:not(.btn) {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
  }
  .site-nav__cta { margin-top: 0; }
  .site-nav__cta .btn { font-size: var(--fs-sm); min-height: 36px; opacity: 1; }
  .site-header.is-on-dark .site-nav__cta .btn-pill { background: var(--paper); color: var(--ink); }
}

/* Pagine interne: il contenuto scende sotto l'header fisso */
.main-page {
  padding-top: calc(var(--header-height) + var(--space-7));
  padding-bottom: var(--space-9);
  min-height: 60vh;
}

/* ============================================================
   Footer scuro con "I AM WHO I AM" gigante, tagliato in basso
   ============================================================ */
.site-footer {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.site-footer a { color: inherit; text-decoration: none; transition: opacity 0.2s; }
.site-footer a:hover { opacity: 0.6; }

/* Riga alta: navigazione */
.site-footer__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-8) var(--gutter) var(--space-6);
}
.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* Riga bassa: dettagli in piccolo, separati da una linea sottile */
.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
  margin: 0 var(--gutter);
  padding: var(--space-4) 0 var(--space-6);
  font-size: var(--fs-xs);
  color: rgba(253, 253, 253, 0.5);
}
.site-footer__links, .site-footer__end { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }

/* Telefono: footer compatto, niente doppioni */
@media (max-width: 599px) {
  .site-footer__top {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-6) var(--gutter) var(--space-4);
  }
  .site-footer__nav {
    flex: 1;
    justify-content: flex-start;
    gap: var(--space-1) var(--space-4);
    font-size: var(--fs-xs);
  }
  /* email e Instagram sono già nella sezione contatti */
  .site-footer__links { display: none; }
  .site-footer__bottom { padding: var(--space-3) 0 var(--space-4); }
}

.giant-word {
  padding: 0 var(--gutter);
}
.giant-word__text {
  display: block;
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--paper);
  /* Valore di partenza: app.js lo ricalcola perché la scritta riempia
     esattamente la larghezza, da telefono come da desktop. */
  font-size: 13.4vw;
  /* line-height ≈ altezza delle maiuscole di Inter: il box coincide con le
     lettere, e l'altezza al 75% taglia via l'ultimo quarto. */
  line-height: 0.73;
  /* si vede circa l'85% delle lettere: il resto è tagliato dal bordo pagina */
  height: calc(0.727em * 0.85);
  overflow: hidden;
  transform: translateY(calc((1 - var(--p, 1)) * 30%));
}

/* ------------------------------------------------------------
   Popup dei cookie: una card bianca in basso, testo nero,
   un solo dettaglio terracotta (il pallino del titolo)
   ------------------------------------------------------------ */
.consent {
  position: fixed;
  left: var(--gutter);
  right: var(--gutter);
  bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  max-width: 440px;
  padding: var(--space-5);
  border-radius: 20px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 18px 50px rgba(34, 34, 34, 0.16), 0 0 0 1px rgba(34, 34, 34, 0.06);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.consent[hidden] { display: none; }
.consent.is-in { opacity: 1; transform: none; }
.consent__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 var(--space-2);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.consent__title::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.consent__text { margin: 0 0 var(--space-4); font-size: var(--fs-sm); line-height: 1.55; color: var(--ink); }
.consent__actions { display: flex; gap: var(--space-2); }
.consent__actions .btn { flex: 1; }
/* durante l'intro della home non si vede: compare quando arriva il logo */
html.is-intro-playing .consent { display: none; }
/* nel pannello, sul telefono, sta sopra la barra delle schede */
@media (max-width: 767px) {
  .consent { left: 12px; right: 12px; padding: var(--space-4); }
  .is-panel .consent { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* Contenuto esterno non ancora caricato (mappa, video): riquadro con "Mostra …" */
.consent-embed { position: relative; }
.consent-embed__cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-5);
  text-align: center;
  background: var(--color-surface-alt, #f2f2f2);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}
.consent-embed__cover p { margin: 0; max-width: 30ch; }
.consent-embed.is-loaded .consent-embed__cover { display: none; }
.video-embed.consent-embed:not(.is-loaded) { aspect-ratio: 16 / 9; }

/* ------------------------------------------------------------
   Pagina Privacy e cookie: leggibile, ordinata, un solo dettaglio terracotta
   ------------------------------------------------------------ */
.legal { max-width: 1060px; margin: 0 auto; padding-bottom: var(--space-8); }
.legal__head { max-width: 720px; margin-bottom: var(--space-6); }
.legal__head h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.02; margin: 0 0 var(--space-4); }
.legal__head .lead { margin: 0 0 var(--space-3); }
.legal__date { margin: 0; font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }

.legal__summary {
  margin-bottom: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-radius: 20px;
  background: var(--color-surface-alt, #f4f4f4);
  border-left: 3px solid var(--accent);
}
.legal__summary-title { margin: 0 0 var(--space-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.legal__summary ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2); }
.legal__summary li { position: relative; padding-left: 1.4em; line-height: 1.5; }
.legal__summary li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }

.legal__layout { display: grid; gap: var(--space-6); }
.legal__toc-title { margin: 0 0 var(--space-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); }
.legal__toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; counter-reset: toc; }
.legal__toc li { counter-increment: toc; }
.legal__toc a { display: flex; gap: 10px; font-size: var(--fs-sm); color: var(--color-text-muted); text-decoration: none; transition: color 0.2s; }
.legal__toc a::before { content: counter(toc, decimal-leading-zero); font-variant-numeric: tabular-nums; opacity: 0.6; }
.legal__toc a:hover { color: var(--ink); }
.legal__body { max-width: 68ch; }
.legal__body section { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); scroll-margin-top: calc(var(--header-height) + 16px); }
.legal__body section:first-child { border-top: 0; padding-top: 0; }
.legal__body h2 { font-size: var(--fs-xl); letter-spacing: -0.02em; margin: 0 0 var(--space-3); }
.legal__body p, .legal__body li, .legal__body dd { line-height: 1.6; }
.legal__body p { margin: 0 0 var(--space-3); }
.legal__body ul { margin: 0 0 var(--space-3); padding-left: 1.1em; display: grid; gap: var(--space-2); }
.legal__body a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.legal__list { margin: 0; display: grid; gap: var(--space-3); }
.legal__list dt { font-weight: 600; }
.legal__list dd { margin: 2px 0 0; color: var(--color-text-muted); }
.legal__table { margin: var(--space-3) 0 var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--fs-sm); }
.legal__row { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.legal__row--head { font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.legal__row code { font-size: 0.92em; }

@media (min-width: 900px) {
  .legal__layout { grid-template-columns: 220px minmax(0, 1fr); gap: var(--space-9); }
  .legal__toc { position: sticky; top: calc(var(--header-height) + 24px); align-self: start; }
}
@media (max-width: 599px) {
  .legal__summary { padding: var(--space-4); margin-bottom: var(--space-6); }
  .legal__toc { display: none; }
  .legal__row { grid-template-columns: 1fr; gap: 2px; }
  .legal__row--head { display: none; }
  .legal__row span:first-child { font-weight: 600; }
}

/* link "Privacy" dentro il popup dei cookie */
.consent__text a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
/* nota sotto il modulo di registrazione */
.form-note { margin: var(--space-3) 0 0; font-size: var(--fs-xs); color: var(--color-text-muted); text-align: center; }
.form-note a { color: inherit; }