/* Country as can be — Verbania
   Interfaccia orientata alle azioni. Palette derivata dalla bandiera
   americana, desaturata: mattone, blu polvere, sabbia. */

:root{
  --carta:#FAF8F4;
  --sabbia:#F4EFE6;
  --cielo:#EDF0F5;
  --superficie:#FFFFFF;

  --inchiostro:#1C1D24;
  --testo:#43454F;
  --tenue:#787A85;
  --bordo:#E4E0D8;
  --bordo-blu:#D5DBE6;

  --rosso:#A6544C;
  --rosso-chiaro:#F3E7E4;
  --blu:#4C5A80;
  --blu-scuro:#2B3247;
  --verde:#3F7D5E;

  --r:12px;
  --mx:clamp(1rem,4vw,3rem);
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--carta);color:var(--testo);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
.contenitore{max-width:var(--max);margin-inline:auto;padding-inline:var(--mx)}

h1,h2,h3{color:var(--inchiostro);line-height:1.14;letter-spacing:-.022em}
h1{font-variation-settings:"wdth" 110;font-weight:700;font-size:clamp(1.9rem,1.25rem + 2.8vw,3.15rem)}
h2{font-weight:700;font-size:clamp(1.3rem,1.1rem + .9vw,1.75rem);margin-bottom:.5rem}
h3{font-weight:650;font-size:1.0625rem;letter-spacing:-.012em}
p{max-width:62ch}
.guida{font-size:clamp(1.0625rem,1rem + .4vw,1.25rem);line-height:1.5;color:var(--testo)}
.minuto{font-size:.875rem;color:var(--tenue);line-height:1.55}
.etichetta{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--blu)}

/* ── Barra superiore ───────────────────────────────────────── */
.barra{position:sticky;top:0;z-index:40;background:rgba(250,248,244,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--bordo)}
.barra .contenitore{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:58px}
.marchio{font-weight:700;font-variation-settings:"wdth" 108;color:var(--inchiostro);font-size:1rem;letter-spacing:-.02em}
.barra nav{display:flex;gap:1.35rem}
.barra nav a{font-size:.875rem;color:var(--testo);padding:.5rem 0;border-bottom:2px solid transparent}
.barra nav a:hover{color:var(--inchiostro)}
.barra nav a[aria-current="page"]{color:var(--inchiostro);font-weight:600;border-bottom-color:var(--rosso)}
@media (max-width:46rem){ .barra nav{display:none} }

/* ── Apertura: testo e immagine affiancati ─────────────────── */
.ingresso{
  background:var(--sabbia);border-bottom:1px solid var(--bordo);
  padding-block:clamp(1.75rem,4vw,3.25rem);
}
.ingresso .contenitore{
  display:grid;gap:clamp(1.5rem,3.5vw,3rem);align-items:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
}
@media (max-width:52rem){ .ingresso .contenitore{grid-template-columns:1fr} }
.ingresso h1{margin-bottom:.65rem}
.ingresso .guida{margin-bottom:1.15rem;max-width:44ch}
.ritratto-apertura{border-radius:var(--r);overflow:hidden;border:1px solid var(--bordo);box-shadow:0 1px 2px rgba(28,29,36,.05),0 8px 24px -12px rgba(28,29,36,.18)}
.ritratto-apertura img{aspect-ratio:4/5;object-fit:cover}
@media (max-width:52rem){ .ritratto-apertura img{aspect-ratio:16/10} }

/* Stato apertura */
.stato{display:inline-flex;align-items:center;gap:.5rem;font-size:.9375rem;font-weight:600;margin-bottom:1.15rem;
  padding:.35rem .75rem .35rem .6rem;border-radius:999px;background:var(--superficie);border:1px solid var(--bordo)}
.stato .pallino{width:8px;height:8px;border-radius:50%;flex:none;background:var(--tenue)}
.stato.aperto{color:var(--verde);border-color:#CFE0D6} .stato.aperto .pallino{background:var(--verde)}
.stato.chiuso{color:var(--rosso);border-color:#E7D2CE} .stato.chiuso .pallino{background:var(--rosso)}

/* Azioni */
.azioni{display:flex;flex-wrap:wrap;gap:.625rem}
.bottone{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:.75rem 1.35rem;border-radius:var(--r);
  font-size:.9375rem;font-weight:600;
  border:1px solid var(--blu-scuro);background:var(--blu-scuro);color:#fff;
  transition:background .15s ease,border-color .15s ease;
}
.bottone:hover{background:#39415B;border-color:#39415B}
.bottone.secondario{background:var(--superficie);color:var(--blu-scuro);border-color:var(--bordo-blu)}
.bottone.secondario:hover{background:var(--cielo);border-color:var(--blu)}
.bottone svg{width:18px;height:18px;flex:none}

/* ── Sezioni ───────────────────────────────────────────────── */
section{padding-block:clamp(2.25rem,5vw,3.75rem)}
.sez-cielo{background:var(--cielo);border-block:1px solid var(--bordo-blu)}
.sez-sabbia{background:var(--sabbia);border-block:1px solid var(--bordo)}
.intestazione-sez{margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}

/* ── Schede categoria ──────────────────────────────────────── */
.schede{display:grid;gap:clamp(.75rem,1.8vw,1.25rem);grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr))}
.scheda{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s ease,transform .15s ease}
a.scheda:hover{border-color:var(--blu);transform:translateY(-2px)}
.scheda img{aspect-ratio:4/3;object-fit:cover}
.scheda .testo{padding:.95rem 1.05rem 1.15rem}
.scheda h3{margin-bottom:.25rem}
.scheda p{font-size:.875rem;color:var(--tenue);line-height:1.5}
a.scheda h3::after{content:" \203A";color:var(--rosso);font-weight:400}

/* ── Riquadri ──────────────────────────────────────────────── */
.riquadro{background:var(--superficie);border:1px solid var(--bordo);border-radius:var(--r);padding:clamp(1.1rem,2.5vw,1.6rem)}
.riquadro-blu{background:var(--superficie);border:1px solid var(--bordo-blu);border-top:3px solid var(--blu);border-radius:var(--r);padding:clamp(1.1rem,2.5vw,1.6rem)}
.due{display:grid;gap:clamp(1rem,2.5vw,1.75rem);grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));align-items:start}

/* Orari */
.orari{list-style:none;font-size:.9375rem}
.orari li{display:flex;justify-content:space-between;gap:1rem;padding-block:.55rem;border-bottom:1px solid var(--bordo)}
.orari li:last-child{border-bottom:0}
.orari .giorno{color:var(--testo)}
.orari .ore{font-variant-numeric:tabular-nums;color:var(--inchiostro)}
.orari li.oggi{margin-inline:-.65rem;padding-inline:.65rem;background:var(--cielo);border-radius:8px;border-bottom-color:transparent}
.orari li.oggi .giorno{font-weight:700;color:var(--blu-scuro)}
.orari .off{color:var(--rosso)}

/* ── Immagini ──────────────────────────────────────────────── */
.copertina{border-radius:var(--r);overflow:hidden;border:1px solid var(--bordo)}
.copertina img{aspect-ratio:16/10;object-fit:cover}
@media (max-width:46rem){.copertina img{aspect-ratio:4/3}}

/* ── Domande ───────────────────────────────────────────────── */
.domanda{border-bottom:1px solid var(--bordo)}
.domanda summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:1rem;padding-block:1rem;min-height:52px;font-weight:600;color:var(--inchiostro);font-size:1rem}
.domanda summary::-webkit-details-marker{display:none}
.domanda summary::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;border-right:2px solid var(--blu);border-bottom:2px solid var(--blu);transform:rotate(45deg) translateY(-3px);transition:transform .18s ease}
.domanda[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.domanda[open] summary{color:var(--blu)}
.domanda p{padding-bottom:1.1rem;font-size:.9375rem}

/* ── Barra azioni mobile ───────────────────────────────────── */
.barra-azioni{position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;gap:.5rem;
  padding:.6rem var(--mx) calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(250,248,244,.97);backdrop-filter:blur(10px);border-top:1px solid var(--bordo)}
.barra-azioni .bottone{flex:1;min-height:46px;font-size:.9rem}
@media (max-width:46rem){ .barra-azioni{display:flex} body{padding-bottom:5rem} }

/* ── Chiusura ──────────────────────────────────────────────── */
footer{background:var(--blu-scuro);color:#C6CAD6;margin-top:0;padding-block:clamp(2rem,4vw,3rem) 1.5rem}
footer h3{color:#fff;font-size:.8125rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;margin-bottom:.6rem}
footer a{color:#C6CAD6;text-decoration:underline;text-decoration-color:#535B75;text-underline-offset:.2em}
footer a:hover{color:#fff;text-decoration-color:#fff}
footer .orari li{border-bottom-color:#3B4460}
footer .orari .ore,footer .orari .giorno{color:#C6CAD6}
footer .orari li.oggi{background:#343D57}
footer .orari li.oggi .giorno{color:#fff}
footer .orari .off{color:#C89189}
.legale{margin-top:2rem;padding-top:1rem;border-top:1px solid #3B4460;font-size:.75rem;color:#8E94A6;line-height:1.7}

:focus-visible{outline:2px solid var(--blu);outline-offset:2px}
.salta{position:absolute;left:-9999px}
.salta:focus{left:1rem;top:1rem;z-index:60;background:var(--blu-scuro);color:#fff;padding:.6em 1em;border-radius:8px}