/* Overehab — sito vetrina. Foglio unico. */

/* Archivo servito da qui, non da Google Fonts: aprire la pagina non manda
   l'indirizzo di rete a nessuno. Un file solo copre tutti i pesi (carattere
   variabile); licenza in assets/fonts/OFL.txt. */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --color-bg: #0a0a0a;
  --color-bg-raised: #141414;
  --color-fg: #f6f6f6;
  --color-fg-muted: rgba(246, 246, 246, 0.7);
  --color-border: rgba(246, 246, 246, 0.12);
  --color-accent: #ff691e;
  --color-accent-fg: #0a0a0a;
  --nav-height: 64px;
  --content-max: 1120px;

  /* Curve condivise. La prima ha un leggero sovraelongamento: è ciò che
     distingue un movimento "a molla" da un ease-out, che arriva e si ferma. */
  --spring-out: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family:
    "Archivo",
    system-ui,
    -apple-system,
    "Segoe UI",
    sans-serif;
  font-optical-sizing: auto;
  line-height: 1.6;
  /* overflow-x: hidden su body può spostare il contenitore di scroll e
     rompere position: sticky. overflow-x: clip taglia senza creare un
     contesto di scorrimento; hidden resta come ripiego per i browser vecchi. */
  overflow-x: hidden;
}

@supports (overflow: clip) {
  body {
    overflow-x: clip;
  }
}

h1,
h2,
h3 {
  font-weight: 800;
  margin: 0;
}

p {
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
}

/* senza questa regola, gli elementi con display impostato in classe (.field,
   .btn, ecc.) ignorerebbero l'attributo "hidden" impostato da script.js */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

/* scorrimento fluido, ma solo per chi non ha chiesto di ridurre il movimento */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* focus da tastiera sempre visibile */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex="-1"]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 700;
  z-index: 200;
  transition: top 150ms ease-out;
}

.skip-link:focus {
  top: 1rem;
}

@media (prefers-reduced-motion: reduce) {
  .skip-link {
    transition: none;
  }
}

/* ---------- Comparse legate allo scorrimento ---------- */
/* Lo stato nascosto NON sta qui. Viene messo da script.js, in linea, solo
   sugli elementi che sta per animare davvero. Nasconderli via CSS in attesa
   che JS li riveli è la forma di errore che ha già prodotto due difetti: basta
   che un elemento sfugga alla selezione (un clone, una sezione esclusa) e
   resta a opacità 0 per sempre, senza che niente lo segnali. Con lo stato
   iniziale in linea il caso peggiore è un elemento che non si anima — visibile. */

/* ---------- Barra ---------- */

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  background: rgba(10, 10, 10, 0);
  backdrop-filter: blur(0px) saturate(180%);
  -webkit-backdrop-filter: blur(0px) saturate(180%);
  border-bottom: 1px solid transparent;
  z-index: 100;
  transition:
    background-color 400ms var(--ease-out),
    backdrop-filter 400ms var(--ease-out),
    -webkit-backdrop-filter 400ms var(--ease-out),
    border-color 400ms var(--ease-out);
}

/* la barra non è sempre uguale: sull'apertura è trasparente e si materializza
   appena si comincia a scorrere */
.topbar.is-scrolled {
  background: rgba(10, 10, 10, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--color-border);
}

@media (prefers-reduced-motion: reduce) {
  .topbar {
    transition: none;
    background: rgba(10, 10, 10, 0.72);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom-color: var(--color-border);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .topbar.is-scrolled {
    background: var(--color-bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.topbar-inner {
  max-width: var(--content-max);
  height: 100%;
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.topbar-brand {
  display: flex;
  align-items: center;
}

.topbar-nav {
  display: flex;
  gap: 1.5rem;
  margin-right: auto;
}

.topbar-nav a {
  position: relative;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--color-fg-muted);
  padding: 0.4rem 0;
  transition: color 200ms var(--ease-out);
}

/* sottolineatura che cresce dal centro invece di comparire di colpo */
.topbar-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 300ms var(--spring-out);
}

/* Su touch :hover resta "attaccato" dopo il tocco: la sottolineatura non se ne
   andava più dall'ultima voce toccata. Tutti gli stati hover del sito sono
   dietro questa media query. */
@media (hover: hover) {
  .topbar-nav a:hover {
    color: var(--color-fg);
  }

  .topbar-nav a:hover::after {
    transform: scaleX(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar-nav a::after {
    transition: none;
  }
}

/* ---------- Menu su telefono ---------- */
/* Prima, sotto i 640px, le tre voci sparivano e basta: su un sito che verrà
   guardato soprattutto dal telefono significava lasciare il pubblico
   principale senza navigazione, con l'unica via lo scorrimento a mano. */

.topbar-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--color-fg);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.topbar-toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform 300ms var(--ease-out),
    opacity 200ms var(--ease-out);
}

.topbar-toggle[aria-expanded="true"] .topbar-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.topbar-toggle[aria-expanded="true"] .topbar-toggle-bar:nth-child(2) {
  opacity: 0;
}

.topbar-toggle[aria-expanded="true"] .topbar-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .topbar-toggle-bar {
    transition: none;
  }
}

.menu-panel {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  z-index: 99;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--color-border);
  padding: 0.5rem 1.25rem 1.5rem;
}

.menu-panel nav {
  display: flex;
  flex-direction: column;
}

.menu-panel a {
  /* riga piena e alta: si tocca senza mirare */
  display: flex;
  align-items: center;
  min-height: 52px;
  font-size: 1.15rem;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.menu-panel a:last-child {
  border-bottom: 0;
}

@media (max-width: 640px) {
  .topbar-nav {
    display: none;
  }

  .topbar-toggle {
    display: flex;
  }

  /* la barra su telefono tiene marchio, menu e il bottone di contatto */
  .topbar-inner {
    gap: 0.75rem;
  }
}

@media (min-width: 641px) {
  /* oltre il telefono il pannello non serve mai, nemmeno se resta aperto
     mentre si ruota il dispositivo */
  .menu-panel {
    display: none;
  }
}

@media (max-width: 719px) {
  /* blur(20px) a tutta larghezza su una pagina che scorre costa caro sui
     telefoni di fascia media: dimezzato, la differenza visiva è minima */
  .topbar.is-scrolled {
    backdrop-filter: blur(10px) saturate(160%);
    -webkit-backdrop-filter: blur(10px) saturate(160%);
  }
}

/* ---------- Bottoni ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  padding: 0.85rem 1.6rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px; /* minimo per un'area di tocco secondo le linee guida Apple */
  /* 100ms ease-out arriva e si ferma. 420ms con sovraelongamento restituisce
     la sensazione di massa: è il dettaglio che si nota senza saperlo dire. */
  transition:
    transform 420ms var(--spring-out),
    background-color 200ms var(--ease-out),
    border-color 200ms var(--ease-out),
    box-shadow 300ms var(--ease-out);
}

@media (hover: hover) {
  .btn:hover {
    transform: translateY(-1px);
  }
}

.btn:active {
  transform: scale(0.96);
  transition-duration: 90ms;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition:
      background-color 150ms ease-out,
      border-color 150ms ease-out;
  }
  .btn:hover,
  .btn:active {
    transform: none;
  }
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-fg);
}

@media (hover: hover) {
  .btn-primary:hover {
    background: #ff7c3a;
    box-shadow: 0 8px 24px -8px rgba(255, 105, 30, 0.6);
  }
}

.btn-secondary {
  background: transparent;
  color: var(--color-fg);
  border: 1px solid rgba(246, 246, 246, 0.35);
}

@media (hover: hover) {
  .btn-secondary:hover {
    border-color: var(--color-accent);
  }
}

.btn-small {
  /* resta visivamente compatto ma non scende sotto i 44px di altezza: è il
     bottone principale della barra, cioè il bersaglio più toccato del sito */
  padding: 0.6rem 1.25rem;
  font-size: 0.9rem;
}

/* ---------- Apertura ---------- */
/* "Si entra dentro" la V, filigrana che prende corpo. Scritto mobile-first:
   la base è il telefono (corsa corta, 180vh, la V già grande), il desktop
   allarga tutto da 720px in su (250vh, la V parte più piccola). .hero-stage
   resta fissa (sticky) mentre si scorre l'eccedenza sopra i 100vh dello
   stage — quell'eccedenza è la corsa su cui script.js calcola il progresso.

   RISOLTO (era lo stato noto in sospeso): la banda arancione e i quattro
   angoli neri a fine corsa. Non era un problema di scala né di origine: la
   V ha spazio negativo, il centro del suo riquadro cade nella tacca vuota,
   quindi il suo inchiostro non raggiunge MAI gli angoli per quanto si
   ingrandisca. Spostare transform-origin dentro il braccio non poteva
   funzionare perché mask-position resta ancorata al riquadro: la maschera
   si sposta col contenuto e la V si taglia — esattamente gli artefatti
   osservati. La soluzione è smettere di ingrandire e cominciare a
   dissolvere: .hero-flood porta la stessa sezione senza maschera e sale in
   opacità nell'ultimo tratto. Gli angoli si riempiono, la V sfuma, e la
   percezione è quella voluta (la finestra che si apre del tutto). */

.hero {
  position: relative;
  z-index: 2; /* sopra #allenamenti, che le si sovrappone finché la scena non si nasconde */
  /* 210 e non 180: le fasi sono quattro (titolo, colore, apertura, tuffo) e
     in 180 finivano una sull'altra proprio dove il pubblico è maggiore.

     lvh e non svh: vedi la nota su .hero-stage. Le tre misure che si devono
     corrispondere — altezza della corsa, altezza della scena e margine
     negativo di #allenamenti — usano tutte la stessa unità, altrimenti lo
     scambio finale non combacia.

     247 = 210 più la pausa: l'animazione usa i primi 3/4 della corsa
     (HOLD in script.js), l'ultimo quarto tiene la sezione ferma e leggibile
     prima che la pagina riprenda a scorrere. */
  height: 247vh; /* fallback per i browser senza lvh */
  height: 247lvh;
  scroll-margin-top: var(--nav-height);
}

.hero-stage {
  position: sticky;
  top: 0;
  /* lvh = altezza del viewport con la barra del browser RITRATTA, cioè la
     massima. È l'unica unità corretta per una scena sticky che deve coprire
     lo schermo su telefono:
       svh  è la minima: appena la barra si ritrae il viewport diventa più
            alto della scena e sotto spunta la sezione successiva
       dvh  segue il viewport istante per istante, quindi la scena si
            ridimensiona MENTRE l'animazione gira: tremolio e misure che
            cambiano sotto i piedi al calcolo della corsa
       lvh  è statica e non è mai più bassa del visibile: quando la barra è
            mostrata l'eccedenza finisce sotto di essa, invisibile e innocua
     Il prezzo è solo quel po' di scena nascosta sotto la barra, che qui è
     fondo pieno. */
  height: 100vh; /* fallback per i browser senza lvh */
  height: 100lvh;
  overflow: hidden;
  /* fondo pieno: da qui in poi #allenamenti si sovrappone esattamente sotto
     (margin-top negativo), e senza uno sfondo opaco qui si vedrebbe in
     trasparenza ovunque la V non copre */
  background: var(--color-bg);
}

/* dal basso: la V, la finestra mascherata, la sezione piena, il testo. */
.hero-motif {
  z-index: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  /* 62vw e non 90vw: a 90 la V occupava quasi tutto lo schermo del telefono e
     non restava spazio per farla crescere — lo spiraglio deve essere stretto
     perché l'ingrandimento si legga */
  width: 62vw;
  opacity: 0.11;
  transform: translate(-50%, -50%);
  transform-origin: center;
  pointer-events: none;
}

/* .hero-through è grande quanto tutta la scena: la maschera (piccola, dietro
   il titolo) sta dentro di lei e cresce solo perché tutto l'elemento viene
   scalato. Dentro, .hero-through-inner porta la sezione vera clonata, a
   grandezza naturale e ferma: la contro-scala annulla esattamente lo scale
   del genitore, perché condividono lo stesso centro come origine. */
.hero-through {
  z-index: 2;
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: url("assets/monogramma-v.svg");
  mask-image: url("assets/monogramma-v.svg");
  -webkit-mask-mode: alpha;
  mask-mode: alpha; /* solo la sagoma conta: il colore del file di maschera non c'entra */
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 62vw auto;
  mask-size: 62vw auto;
  opacity: 0;
  pointer-events: none;
}

.hero-through-inner {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

/* la stessa sezione senza maschera, a grandezza naturale e ferma: essendo
   allineata al viewport come il clone dentro la finestra, la dissolvenza fra
   i due è invisibile — si percepisce solo il nero degli angoli che si riempie */
.hero-flood {
  z-index: 2;
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background: var(--color-bg);
}

.hero-flood-inner {
  position: absolute;
  inset: 0;
  transform-origin: center; /* stessa origine del clone mascherato: i due devono scalare identici */
}

.hero-content {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* la scena è alta lvh, ma il titolo va centrato su quello che l'utente vede
     DAVVERO in questo istante: dvh. Qui il ridimensionamento non dà fastidio,
     perché è testo che sfuma nel primo quarto di corsa e non entra in nessun
     calcolo di scala. */
  height: 100dvh;
  max-height: 100%;
  padding: calc(var(--nav-height) + 2rem) 1.25rem 3rem;
}

/* will-change solo mentre la scena si muove davvero: script.js aggiunge e
   toglie .is-animating. Lasciarlo fisso tiene i layer promossi per sempre. */
.hero-stage.is-animating .hero-motif,
.hero-stage.is-animating .hero-through,
.hero-stage.is-animating .hero-flood {
  will-change: transform, opacity;
}

.hero-stage.is-animating .hero-through-inner {
  will-change: transform;
}

.hero-stage.is-animating .hero-content {
  will-change: opacity;
}

@media (min-width: 720px) {
  .hero {
    height: 300vh; /* 250 più la pausa, come sopra */
    height: 300lvh;
  }

  .hero-stage {
    height: 100vh;
    height: 100lvh;
  }

  .hero-motif {
    width: 40vh;
  }

  .hero-through {
    -webkit-mask-size: 40vh auto;
    mask-size: 40vh auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* la pagina resta identica, ferma: niente corsa di scroll, niente sticky.
     .hero-motif resta alla sua filigrana di riposo e .hero-through resta
     invisibile: script.js non parte, quindi nessuno dei due viene animato. */
  .hero {
    height: 100vh;
    height: 100dvh;
  }

  .hero-stage {
    position: static;
    height: 100%;
  }
}

.hero h1 {
  font-size: clamp(2.5rem, 8.5vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}

@media (min-width: 720px) {
  /* «Better every day» su una riga sola da qui in su */
  .hero h1 {
    white-space: nowrap;
    font-size: clamp(2.6rem, 6.6vw, 6.2rem);
  }
}

.hero-sub {
  margin-top: 1.5rem;
  max-width: 640px;
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.6;
  color: var(--color-fg-muted);
}

.hero-actions {
  margin-top: 2.25rem;
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---------- Sezioni generiche ---------- */

.section {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 5rem 1.25rem;
  scroll-margin-top: var(--nav-height);
}

/* si sovrappone alla scena dell'apertura, di tanto quanto è alta la scena:
   a fine corsa il suo bordo superiore coincide esattamente con quello del
   clone dentro la V, così lo scambio è invisibile */
#allenamenti {
  position: relative;
  z-index: 1;
  /* deve corrispondere esattamente all'altezza di .hero-stage, stessa unità */
  margin-top: -100vh; /* fallback per i browser senza lvh */
  margin-top: -100lvh;
}

@media (prefers-reduced-motion: reduce) {
  /* Va DOPO la regola qui sopra: stessa specificità, vince l'ultima scritta.
     Il margine negativo serve solo a far combaciare la sezione col clone a
     fine tuffo. Senza tuffo tirava #allenamenti dietro l'apertura opaca e la
     sezione spariva: si passava dal titolo direttamente a «Dove siamo».
     Difetto preesistente, visibile solo con movimento ridotto. */
  #allenamenti {
    margin-top: 0;
  }
}

.section h2 {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.section-sub {
  margin-top: 0.75rem;
  color: var(--color-fg-muted);
  font-size: 1.05rem;
}

/* ---------- Chi siamo ---------- */

/* colonna stretta: è un testo da leggere, non da scorrere */
.about > p {
  max-width: 42rem;
}

.about > p {
  margin-top: 1.25rem;
  color: var(--color-fg-muted);
  font-size: 1.1rem;
  line-height: 1.7;
}

.about-quote {
  margin: 2.5rem 0 1rem;
  padding-left: 1.25rem;
  border-left: 3px solid var(--color-accent);
  color: var(--color-fg);
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 700;
  line-height: 1.3;
}

/* una frase per riga, e dentro ogni frase righe di lunghezza simile:
   niente parola sola a fine frase sul telefono */
.about-quote span {
  display: block;
  text-wrap: balance;
}

.about > .about-sign {
  margin-top: 2rem;
  color: var(--color-accent);
  font-weight: 700;
}

/* ---------- Allenamenti ---------- */

.cards {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.25rem;
}

.card {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 1.75rem;
  transition:
    transform 500ms var(--spring-out),
    border-color 300ms var(--ease-out),
    background-color 300ms var(--ease-out);
}

@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 105, 30, 0.35);
    background: #171717;
  }
}

@media (prefers-reduced-motion: reduce) {
  .card {
    transition: border-color 200ms ease-out;
  }
  .card:hover {
    transform: none;
  }
}

/* il clone dentro l'apertura non deve reagire al passaggio del mouse:
   è un'immagine, non un'interfaccia */
.hero-through .card:hover,
.hero-flood .card:hover {
  transform: none;
  border-color: var(--color-border);
  background: var(--color-bg-raised);
}

.card-icon {
  width: 32px;
  height: 32px;
  color: var(--color-accent);
}

.card h3 {
  margin-top: 1rem;
  font-size: 1.25rem;
}

.card p {
  margin-top: 0.65rem;
  color: var(--color-fg-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.card-disciplines {
  margin-top: 1rem;
  color: var(--color-fg);
  font-weight: 500;
  font-size: 0.9rem;
}

/* ---------- Dove siamo ---------- */

.address {
  margin-top: 1.25rem;
  font-size: 1.1rem;
  color: var(--color-fg-muted);
}

.hours {
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-size: 0.95rem;
}

.hours > div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: 320px;
}

.hours dt {
  color: var(--color-fg-muted);
  flex: 1;
  min-width: 140px;
}

.hours dd {
  margin: 0;
  font-weight: 500;
}

.map-frame {
  margin-top: 1.5rem;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-raised);
}

.map-frame iframe {
  width: 100%;
  height: 100%;
  flex: 1;
  border: 0;
  /* la mappa OpenStreetMap resta a colori naturali: invertirla per il tema
     scuro la rende illeggibile, qui si smorza solo lo stacco di luminosità */
  filter: brightness(0.92) contrast(1.05);
}

.link-maps {
  display: inline-block;
  margin-top: 1rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Contatti ---------- */

#contact-form {
  margin-top: 2.5rem;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: 0.9rem;
  font-weight: 500;
}

.optional {
  color: var(--color-fg-muted);
  font-weight: 400;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea {
  background: var(--color-bg-raised);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  color: var(--color-fg);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
  transition:
    border-color 200ms var(--ease-out),
    box-shadow 200ms var(--ease-out);
}

.field input:focus,
.field textarea:focus {
  border-color: rgba(255, 105, 30, 0.5);
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-color: #ff8a65;
}

@media (prefers-reduced-motion: reduce) {
  .field input,
  .field textarea {
    transition: none;
  }
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.checkbox-row input {
  margin-top: 0.1rem;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.checkbox-row label {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-fg-muted);
}

.checkbox-row label a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.error {
  min-height: 1.1em;
  color: #ff8a65;
  font-size: 0.85rem;
}

/* la trappola per i bot: fuori dallo schermo e non `display: none`, che alcuni
   bot riconoscono e saltano */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

#contact-form .btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.success-box {
  margin-top: 2.5rem;
  max-width: 480px;
  scroll-margin-top: var(
    --nav-height
  ); /* il fuoco sul titolo non deve finire sotto la barra fissa */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 250ms var(--ease-out),
    transform 400ms var(--spring-out);
}

.success-box.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.success-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-fg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.success-icon svg {
  width: 20px;
  height: 20px;
}

.success-box h3 {
  font-size: 1.4rem;
  line-height: 1.2;
  scroll-margin-top: calc(
    var(--nav-height) + 1rem
  ); /* riceve il fuoco: non deve finire sotto la barra fissa */
}

.success-box p {
  color: var(--color-fg-muted);
}

.success-box a {
  margin-top: 0.5rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .success-box {
    transition: none;
  }
}

.contact-alt {
  margin-top: 1.75rem;
  color: var(--color-fg-muted);
  font-size: 0.95rem;
}

.contact-alt a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Piè di pagina ---------- */

.footer {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  border-top: 1px solid var(--color-border);
}

.footer-brand {
  opacity: 0.8;
}

.footer-copy {
  color: var(--color-fg-muted);
  font-size: 0.85rem;
}

.footer-link {
  color: var(--color-fg-muted);
  font-size: 0.85rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.store-badges {
  margin-left: auto;
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.store-badge {
  /* "spento": bordo appena visibile, nessun'altra proprietà interattiva.
     Niente opacity qui: sommata al colore già smorzato del testo scende
     sotto la soglia di contrasto 4,5:1 richiesta su ogni testo. */
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.8rem;
  color: var(--color-fg-muted);
}

/* il badge di uno store dove l'app c'è già: acceso, e si apre */
a.store-badge {
  color: var(--color-fg);
  text-decoration: none;
  transition: border-color 200ms var(--ease-out);
}

a.store-badge:hover,
a.store-badge:focus-visible {
  border-color: var(--color-accent);
}

/* ---------- Pagina privacy ---------- */

.doc {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--nav-height) + 4rem) 1.25rem 5rem;
}

.doc h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.02em;
}

.doc h2 {
  margin-top: 2.5rem;
  font-size: 1.3rem;
}

.doc h3 {
  margin-top: 1.75rem;
  font-size: 1.05rem;
}

.doc p,
.doc li {
  margin-top: 0.85rem;
  color: var(--color-fg-muted);
}

.doc ul {
  padding-left: 1.2rem;
}

.doc mark {
  color: var(--color-accent-fg);
  background: var(--color-accent);
}

.doc .todo {
  border: 1px dashed var(--color-accent);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-top: 2rem;
  color: var(--color-fg);
}