/* layout.css — guscio di pagina, testata N6, colophon Ft4, ritmo delle sezioni */

.shell {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.shell--narrow { max-width: 58rem; }

/* ══ Testata · N12 adattata ═════════════════════════════════
   Due piani. Sopra, una fascia di servizio con i dati che qualificano
   (albo, sede, telefono): sta ferma quando la pagina e' in cima e si
   ritrae quando si scende, perche' e' informazione da consultare, non
   da inseguire. Sotto, la barra vera, che resta sempre.
   Sopra l'immagine di apertura la testata e' trasparente e chiara;
   appena si scrolla diventa carta piena. Un solo DOM, due stati.       */

.topbar {
  position: fixed;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: var(--z-sticky);
  transform: translateY(0);
  transition: transform var(--dur-short) var(--ease-out),
              background-color var(--dur-short) var(--ease-out);
}
.topbar.is-compact { transform: translateY(calc(var(--strip-h) * -1)); }

/* ── Piano 1 · fascia di servizio ── */

.topbar__strip {
  height: var(--strip-h);
  display: flex;
  align-items: center;
  border-block-end: var(--rule-hair) solid transparent;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.topbar__strip .shell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
}
.topbar__strip p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__strip a { text-decoration: none; }
.topbar__strip-alt { display: none; }

@media (min-width: 48rem) {
  .topbar__strip-alt { display: block; }
}

/* ── Piano 2 · barra ── */

.topbar__bar {
  min-height: var(--bar-h);
  display: flex;
  align-items: center;
  border-block-end: var(--rule-hair) solid transparent;
}
.topbar__bar .shell {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
}

.topbar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  margin-inline-end: auto;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  font-weight: 500;
  letter-spacing: var(--track-title);
  line-height: 1.05;
  min-width: 0;
}
.topbar__brand a { text-decoration: none; display: flex; align-items: center; gap: var(--space-sm); }
.topbar__brand a:hover { color: inherit; }
.topbar__brand img { height: clamp(2.25rem, 5vw, 3rem); width: auto; }
.topbar__brand-name { overflow-wrap: anywhere; min-width: 0; }

/* Su mobile il richiamo alla prenotazione vive nella barra fissa in
   basso: ripeterlo anche in testata sarebbe lo stesso bottone due volte
   nella stessa schermata. */
/* Specificita' doppia: .btn dichiara inline-flex in components.css,
   che viene caricato dopo questo foglio. */
.topbar .topbar__cta { display: none; flex: 0 0 auto; }

/* Bottone pieno, non fantasma. Sopra l'apertura il fondo e' una
   fotografia: un contorno sottile su sfondo variabile non si vede, e
   quel bottone e' il richiamo principale del sito. Il verde pieno si
   legge su qualunque immagine e su qualunque superficie. */
.topbar .topbar__cta {
  min-height: 2.5rem;
  padding-inline: var(--space-lg);
  box-shadow: var(--shadow-soft);
}

@media (min-width: 60rem) {
  .topbar .topbar__cta { display: inline-flex; }
  /* La voce «Prenota» del menu si eclissa dove c'e' il bottone dedicato;
     nel cassetto mobile invece resta, ed e' utile. */
  .topbar__nav .is-cta,
  .topbar__nav .mast__cta { display: none; }
}

/* ── Navigazione ── */

.topbar__nav ul {
  display: flex;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar__nav a {
  display: block;
  padding-block: var(--space-2xs);
  font-size: var(--text-sm);
  letter-spacing: var(--track-body);
  text-decoration: none;
  white-space: nowrap;
  border-block-end: var(--rule-firm) solid transparent;
  transition: border-color var(--dur-micro) var(--ease-out);
}


/* Sotto i 60rem la navigazione e' un cassetto a tutta altezza. */
.topbar__toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 auto;
  padding: 0;
  order: -1;
  border: var(--rule-hair) solid currentColor;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out);
}
.topbar__burger { width: 18px; height: 12px; position: relative; }
.topbar__burger::before,
.topbar__burger::after,
.topbar__burger i {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: var(--rule-firm);
  background: currentColor;
  transition: transform var(--dur-short) var(--ease-out),
              opacity var(--dur-micro) var(--ease-out);
}
.topbar__burger::before { top: 0; }
.topbar__burger i { top: 5px; }
.topbar__burger::after { bottom: 0; }
[aria-expanded="true"] .topbar__burger::before { transform: translateY(5px) rotate(45deg); }
[aria-expanded="true"] .topbar__burger i { opacity: 0; }
[aria-expanded="true"] .topbar__burger::after { transform: translateY(-5px) rotate(-45deg); }

/* Il pannello e' ancorato alla testata, non alla finestra.
   .topbar porta un transform — serve alla ritrazione — e un transform
   diverso da none rende l'elemento il blocco contenitore dei discendenti
   position: fixed. Un figlio fisso si sarebbe quindi misurato sui 104px
   della testata invece che sull'altezza della finestra, collassando a un
   paio di righe. Con absolute + top:100% il pannello pende da sotto la
   barra e si muove con lei, che e' il comportamento voluto. */
.js .topbar__nav {
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  max-height: calc(100dvh - var(--strip-h) - var(--bar-h) - var(--space-md));
  padding: var(--space-md) var(--page-gutter) var(--space-xl);
  border-block-end: var(--rule-hair) solid var(--color-hairline-sand);
  background-color: var(--color-sand);
  background-image: var(--grain);
  background-size: var(--grain-size);
  background-blend-mode: multiply;
  color: var(--color-ink);
  box-shadow: var(--shadow-soft);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.js .topbar__nav[hidden] { display: none; }
.js .topbar__nav ul { display: grid; gap: 0; }
.js .topbar__nav a {
  padding-block: var(--space-md);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  letter-spacing: var(--track-lead);
}
.js .topbar__nav .current-menu-item > a { color: var(--color-accent); }

@media (min-width: 60rem) {
  .topbar__toggle { display: none; }
  .js .topbar__nav,
  .topbar__nav {
    position: static;
    inset: auto;
    max-height: none;
    padding: 0;
    border-block-end: 0;
    background: none;
    color: inherit;
    box-shadow: none;
    overflow: visible;
    margin-inline-end: var(--space-lg);
  }
  .js .topbar__nav[hidden] { display: block; }
  .js .topbar__nav ul { display: flex; gap: var(--space-lg); }
  .js .topbar__nav a {
    padding-block: var(--space-2xs);
    border-block-end: var(--rule-firm) solid transparent;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--track-body);
  }
  .js .topbar__nav .current-menu-item > a { color: inherit; border-block-end-color: currentColor; }
}

/* ── Stato A · sopra l'immagine di apertura ── */

.topbar[data-over="1"] {
  color: var(--color-on-ink);
  /* Velo dall'alto: rende leggibile marchio e voci su qualunque fotografia. */
  /* Sette fermate invece di quattro. Su una fascia larga un gradiente a
     tre passaggi mostra le bande, e una banda visibile e' la cosa che
     tradisce subito un velo messo li' per necessita'. */
  background: linear-gradient(to bottom,
              var(--color-scrim-head-1) 0%,
              var(--color-scrim-head-1) 40%,
              var(--color-scrim-head-2) 66%,
              var(--color-scrim-head-3) 80%,
              var(--color-scrim-head-4) 91%,
              var(--color-scrim-head-5) 97%,
              transparent 100%);
}
.topbar[data-over="1"] .topbar__strip { border-block-end-color: var(--color-over-rule); }
.topbar[data-over="1"] .topbar__strip p { color: var(--color-over-text); }

/* ── Stato B · su carta ── */

.topbar[data-over="0"],
.topbar.is-solid {
  /* Testata colorata: sabbia calda, non carta. E' quello che la stacca
     dal corpo della pagina senza aggiungere un filetto piu' pesante. */
  background-color: color-mix(in oklab, var(--color-sand) 84%, transparent);
  background-image: var(--grain);
  background-size: var(--grain-size);
  background-blend-mode: multiply;
  color: var(--color-ink);
  --color-neutral: var(--color-neutral-sand);
  --color-field: var(--color-field-sand);
  backdrop-filter: var(--material);
  -webkit-backdrop-filter: var(--material);
}

/* Se il browser non sa sfocare, la barra torna opaca: una barra
   semitrasparente senza sfocatura rende illeggibile cio' che copre. */
@supports not (backdrop-filter: blur(1px)) {
  .topbar[data-over="0"],
  .topbar.is-solid { background-color: var(--color-sand); }
}
.topbar[data-over="0"] .topbar__strip,
.topbar.is-solid .topbar__strip { border-block-end-color: var(--color-hairline-sand); }
.topbar[data-over="0"] .topbar__strip p,
.topbar.is-solid .topbar__strip p { color: var(--color-neutral); }
.topbar[data-over="0"] .topbar__bar,
.topbar.is-solid .topbar__bar { border-block-end-color: var(--color-hairline-sand); }

/* ── Stati delle voci di menu ──────────────────────────────
   Stanno qui in fondo di proposito: il blocco desktop qui sopra
   ridichiara il bordo delle voci, e a parita' di specificita' vince
   l'ultima regola scritta. Messe prima, l'hover non si vedeva.

   Due trattamenti diversi perche' i due fondi sono diversi. Sopra la
   fotografia il fondo cambia a ogni pixel, quindi un hover a colore
   sarebbe una scommessa: il segnale lo fa la sottolineatura piena, sul
   testo panna che e' gia' leggibile. Sulla sabbia invece il fondo e'
   noto e il colore puo' fare il lavoro, insieme alla sottolineatura. */

.topbar__nav a:hover,
.topbar__nav a:focus-visible,
.topbar__nav .current-menu-item > a {
  border-block-end-color: currentColor;
}

.topbar[data-over="1"]:not(.is-solid) .topbar__nav a:hover,
.topbar[data-over="1"]:not(.is-solid) .topbar__nav .current-menu-item > a {
  color: var(--color-on-ink);
  border-block-end-color: var(--color-on-ink);
}

.topbar[data-over="0"] .topbar__nav a:hover,
.topbar[data-over="0"] .topbar__nav .current-menu-item > a,
.topbar.is-solid .topbar__nav a:hover,
.topbar.is-solid .topbar__nav .current-menu-item > a {
  color: var(--color-accent-deep);
  border-block-end-color: var(--color-accent-deep);
}

.topbar__nav a {
  transition: color var(--dur-micro) var(--ease-out),
              border-color var(--dur-micro) var(--ease-out);
}

/* Le pagine senza apertura a immagine partono dalla testata solida. */
body:not(.home) { padding-block-start: calc(var(--strip-h) + var(--bar-h)); }

@media (prefers-reduced-motion: reduce) {
  .topbar { transition: background-color 150ms linear; }
  .topbar.is-compact { transform: none; }
}

/* ══ Barra fissa di prenotazione — solo mobile ═══════════════ */

/* Niente contenitore: un riquadro attorno a un bottone e' una cornice
   attorno a una cornice. Galleggiano i bottoni, ciascuno col proprio
   materiale, e sotto si continua a vedere la pagina scorrere. */
.dock {
  position: fixed;
  inset-inline: var(--space-md);
  inset-block-end: max(var(--space-md), env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: flex;
  gap: var(--space-sm);
  pointer-events: none;   /* il vuoto fra i bottoni lascia passare i tocchi */
}
.dock > * { pointer-events: auto; }

/* Senza JS la barra c'e' e basta. Con JS entra in scena solo quando il
   richiamo dell'apertura e' uscito dallo schermo: finche' quel bottone
   e' visibile, una barra che gli si siede sopra e' lo stesso invito
   ripetuto due volte, uno dei quali copre l'altro. */
.js .dock {
  visibility: hidden;
  opacity: 0;
  transform: translateY(calc(100% + var(--space-md)));
  transition: transform var(--dur-short) var(--ease-out),
              opacity var(--dur-short) var(--ease-out),
              visibility 0s linear var(--dur-short);
}
.js .dock.is-in {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: transform var(--dur-short) var(--ease-out),
              opacity var(--dur-short) var(--ease-out),
              visibility 0s;
}

@media (prefers-reduced-motion: reduce) {
  .js .dock { transform: none; transition: opacity 150ms linear, visibility 0s linear 150ms; }
  .js .dock.is-in { transition: opacity 150ms linear, visibility 0s; }
}
.dock .btn {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dock);
}
/* Il secondario deve restare leggibile sia su carta sia sopra una
   fotografia: si porta dietro il proprio fondo. */
.dock .btn--ghost {
  border-color: var(--color-hairline);
  background: color-mix(in oklab, var(--color-paper) 84%, transparent);
  color: var(--color-ink);
  backdrop-filter: var(--material);
  -webkit-backdrop-filter: var(--material);
}
.dock .btn--ghost:hover { background: var(--color-paper); }

@supports not (backdrop-filter: blur(1px)) {
  .dock .btn--ghost { background: var(--color-paper); }
}
.dock > * { flex: 1 1 auto; }
body.has-dock { padding-block-end: 5.5rem; }   /* bottone 3rem + scarto dal bordo */

@media (min-width: 60rem) {
  .dock { display: none; }
  body.has-dock { padding-block-end: 0; }
}

/* ══ Ritmo delle sezioni ════════════════════════════════════ */
/* Padding deliberatamente disomogeneo: generoso in alto, stretto in basso. */

.section { padding-block: var(--space-2xl) var(--space-xl); }
.section--open  { padding-block: var(--space-3xl) var(--space-2xl); }
.section--tight { padding-block: var(--space-xl) var(--space-lg); }
.section--ink {
  background: var(--color-ink-deep);
  color: var(--color-on-ink);
}
.section--ink a { color: inherit; }
.section--ink .muted { color: var(--color-on-ink-mute); }
/* Ogni superficie ridefinisce il proprio capello: le regole a valle
   continuano a scrivere var(--color-hairline) e prendono il valore
   giusto senza sapere su che fondo si trovano.
   Le superfici che dichiarano un fondo coprono la grana del documento,
   quindi se la ristendono da sole. */
.section--tinted,
.section--sand,
.section--tint {
  background-image: var(--grain);
  background-size: var(--grain-size);
  background-blend-mode: multiply;
}

.section--tinted {
  background-color: var(--color-paper-2);
  --color-hairline: var(--color-hairline-tint);
}
.section--sand {
  background-color: var(--color-sand);
  --color-hairline: var(--color-hairline-sand);
  --color-neutral: var(--color-neutral-sand);
  --color-field: var(--color-field-sand);
  --color-paper-2: var(--color-sand-2);   /* sfondo hover delle domande */
}
.section--tint {
  background-color: var(--color-tint);
  --color-hairline: var(--color-tint-hair);
}

.section__head { display: grid; gap: var(--space-sm); max-width: var(--measure); }
.section__head p { color: var(--color-muted); }

@media (min-width: 60rem) {
  .section { padding-block: var(--space-3xl) var(--space-2xl); }
  .section--open { padding-block: var(--space-4xl) var(--space-3xl); }
}

/* ══ Colophon · Ft4 ═════════════════════════════════════════ */

.colophon {
  padding-block: var(--space-2xl) var(--space-lg);
  border-block-start: var(--rule-hair) solid var(--color-hairline-sand);
  background-color: var(--color-sand);
  background-image: var(--grain);
  background-size: var(--grain-size);
  background-blend-mode: multiply;
  --color-hairline: var(--color-hairline-sand);
  --color-neutral: var(--color-neutral-sand);
  color: var(--color-muted);
  font-size: var(--text-sm);
}
.colophon__grid {
  display: grid;
  gap: var(--space-lg);
}
.colophon h2 {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 400;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--color-neutral);
  margin-block-end: var(--space-xs);
}
.colophon ul { list-style: none; padding: 0; }
.colophon li + li { margin-block-start: var(--space-2xs); }
.colophon a { text-decoration: none; }
.colophon a:hover { text-decoration: underline; }
.colophon__legal {
  margin-block-start: var(--space-lg);
  padding-block-start: var(--space-md);
  border-block-start: var(--rule-hair) solid var(--color-hairline);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.7;
  letter-spacing: var(--track-label);
  color: var(--color-neutral);
}

@media (min-width: 40rem) {
  .colophon__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); }
}
@media (min-width: 60rem) {
  .colophon { padding-block: var(--space-2xl) var(--space-xl); }
  .colophon__grid { grid-template-columns: 1.4fr 1fr 1fr 1.1fr; }
}

/* Sigla del giorno nel colophon: colonna stretta, l'orario deve
   cominciare sempre allo stesso punto. */
.colophon li:has(.colophon__giorno) {
  display: grid;
  grid-template-columns: 3.75rem minmax(0, 1fr);
  gap: var(--space-xs);
}
.colophon__giorno { color: var(--color-neutral); }