/* =============================================================================
   base.css — variabili, reset, tipografia e layout
   =============================================================================
   Tutti i colori sono variabili in :root: fuori da qui non si scrivono colori
   a mano. Una futura modalità scura ridefinirà solo queste variabili.

   Regole di contrasto:
   - --colore-secondario su bianco è circa 4,4:1: mai per testo piccolo su
     bianco (solo forme, bordi, testo grande);
   - su --colore-accento-caldo il testo è sempre --colore-testo, mai bianco.

   Caratteri (Blocco 3): Overpass per i titoli e Atkinson Hyperlegible Next per
   il testo, entrambi con licenza OFL, sottoinsiemi woff2 in /fonts (latin e
   latin-ext), font-display: swap. Il dettaglio è in docs/design-system.md.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Caratteri: solo da /fonts (font-src 'self'), nessun CDN. Sottoinsiemi latin e
   latin-ext per scaricare l'estensione solo quando serve. Le cifre tabellari
   (tnum) sono nel sottoinsieme latin, dove stanno i numeri.
   -------------------------------------------------------------------------- */

/* Overpass 700 — titoli */
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/overpass-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Overpass";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/overpass-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F, U+0218-021B, U+1E9E;
}

/* Atkinson Hyperlegible Next 400 — testo */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F, U+0218-021B, U+1E9E;
}

/* Atkinson Hyperlegible Next 700 — testo in grassetto */
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-017F, U+0218-021B, U+1E9E;
}

:root {
  /* ---- Colori (palette del Blocco 1, invariata; contrasto in design-system.md) */
  --colore-sfondo: #f2f2f2;
  --colore-superficie: #ffffff;
  --colore-testo: #000814;
  --colore-testo-secondario: #5a6650;
  --colore-brand: #344e41;
  --colore-secondario: #588157;
  /* Audit P2.1: bianco su --colore-secondario è 4,48:1, appena sotto il 4,5:1
     del testo normale. Dove ci sta sopra testo bianco (hover dei pulsanti
     primari) si usa questa variante più scura, 4,66:1. */
  --colore-secondario-hover: #567e55;
  /* Audit (controlli-qualita.mjs): --colore-secondario come testo su sfondo
     chiaro è 4,00:1/4,48:1 (sotto 4,5:1): qui una tinta più scura per quando
     --colore-secondario serve come colore del testo, non dello sfondo */
  --colore-secondario-testo: #50754f;
  --colore-ombra: #a3b18a;
  /* Audit (controlli-qualita.mjs): --colore-brand su --colore-ombra è 3,98:1,
     sotto il 4,5:1 del testo normale — qui una tinta più chiara (80% verso
     --colore-sfondo), 4,66:1, per lo sfondo in hover con testo sopra */
  --colore-ombra-chiaro: #b3be9f;
  --colore-accento-caldo: #faa307;
  --colore-accento-freddo: #95d5b2;
  --colore-bordo: #d8dcd0;
  /* Errore: confermato. Usato solo come bordo/indicatore (4px), dove raggiunge
     7,5:1 su superficie e 6,7:1 su sfondo, ben oltre il 3:1 richiesto. */
  --colore-errore: #9b2c2c;

  /* Testo su fondi scuri (brand, cluster) */
  --colore-testo-su-brand: var(--colore-superficie);

  /* Cluster: tre tonalità di verde per densità (testo bianco: 6,1 / 9,1 / 11,6:1).
     Valori di riserva in hex; versione color-mix() sotto, in @supports. */
  --colore-cluster-1: #486a4d; /* pochi */
  --colore-cluster-2: var(--colore-brand); /* medi */
  --colore-cluster-3: #293d33; /* molti */

  /* ---- Tipografia: due famiglie OFL, servite da /fonts (vedi @font-face) */
  --font-titoli: "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-testo: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --interlinea: 1.5;
  --interlinea-stretta: 1.2;

  /* Scala tipografica fluida (clamp): min su telefono, max su desktop.
     --dimensione-testo e --dimensione-piccola restano per gli usi esistenti. */
  --dimensione-testo: 1rem;
  --dimensione-piccola: 0.875rem;
  --testo-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --testo-sm: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
  --testo-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --testo-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --testo-lg: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --testo-xl: clamp(1.375rem, 1.25rem + 0.6vw, 1.625rem);
  --testo-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);

  /* ---- Raggi */
  --raggio-piccolo: 4px;
  --raggio-medio: 8px;
  --raggio-grande: 16px;
  --raggio-pillola: 9999px;

  /* ---- Spaziature su base 4/8 */
  --spazio-1: 0.25rem;
  --spazio-2: 0.5rem;
  --spazio-3: 0.75rem;
  --spazio-4: 1rem;
  --spazio-5: 1.25rem;
  --spazio-6: 1.5rem;
  --spazio-8: 2rem;
  --spazio-10: 2.5rem;
  --spazio-12: 3rem;

  /* ---- Elevazione: tre livelli costruiti su --colore-ombra. Riserva in rgba()
     (#a3b18a = 163,177,138); la versione color-mix() è sotto, in @supports.
     --ombra-morbida resta come alias del livello 2 per gli usi esistenti. */
  --ombra-1: 0 1px 2px rgba(163, 177, 138, 0.5);
  --ombra-2: 0 2px 8px rgba(163, 177, 138, 0.6);
  --ombra-3: 0 8px 24px rgba(163, 177, 138, 0.55);
  --ombra-morbida: var(--ombra-2);

  /* ---- Movimento: tre durate e quattro curve. Tutto spento da
     prefers-reduced-motion (sotto). --durata-transizione e --curva-transizione
     restano come alias di base/standard per gli usi esistenti. */
  --durata-rapida: 120ms;
  --durata-base: 200ms;
  --durata-lenta: 320ms;
  --curva-standard: cubic-bezier(0.2, 0, 0, 1);
  --curva-entrata: cubic-bezier(0, 0, 0, 1);
  --curva-uscita: cubic-bezier(0.4, 0, 1, 1);
  --curva-molla: cubic-bezier(0.2, 0.9, 0.3, 1.2); /* foglio dal basso */
  --durata-transizione: var(--durata-base);
  --curva-transizione: var(--curva-standard);

  /* ---- Scala di z-index. --livello-sovrapposto resta come alias. */
  --z-mappa: 400;        /* controlli di Leaflet (max 800) */
  --z-legenda: 700;      /* sopra i marker, sotto scheda e fogli */
  --z-sovrapposto: 1000; /* avvisi, stato, pannello */
  --z-filtri: 1001;      /* sopra l'avviso, nella stessa fascia */
  --z-foglio: 1100;      /* fogli dal basso/alto su mobile */
  --z-modale: 1200;      /* finestre modali future */
  --livello-sovrapposto: var(--z-sovrapposto);

  /* ---- Misure del layout */
  --altezza-intestazione: 3rem;
  --larghezza-pannello: 380px;
  /* Altezza reale di #filtri-rapidi: una sola riga di chip/pulsanti alti 44px
     (bersaglio al tocco) con il contatore "N rifugi" sulla stessa riga, più il
     padding verticale --spazio-2 sopra e sotto. Da qui derivano, senza numeri
     magici, gli offset di .avviso-esempio/.stato (sotto) e l'inizio della
     colonna della scheda da 768px (.pannello). #filtri-rapidi ha comunque uno
     z-index più alto della scheda (filtri.css), così "Tutti i filtri" resta
     cliccabile anche se la stima risultasse di poco inferiore al vero. */
  --altezza-filtri-rapidi: calc(44px + 2 * var(--spazio-2));

  /* Velo chiaro semi-trasparente per il controllo di attribuzione Leaflet, che
     deve restare leggibile ma poco invadente sopra le tiles (override in
     mappa.css). Riserva opaca legata a --colore-superficie (#ffffff); la
     versione translucida con color-mix() è sotto, in @supports. */
  --colore-velo: rgba(255, 255, 255, 0.82);
}

/* Dove color-mix() è supportato le ombre seguono --colore-ombra */
@supports (color: color-mix(in srgb, currentColor 60%, transparent)) {
  :root {
    --ombra-1: 0 1px 2px color-mix(in srgb, var(--colore-ombra) 50%, transparent);
    --ombra-2: 0 2px 8px color-mix(in srgb, var(--colore-ombra) 60%, transparent);
    --ombra-3: 0 8px 24px color-mix(in srgb, var(--colore-ombra) 55%, transparent);
    --colore-cluster-1: color-mix(in srgb, var(--colore-secondario) 55%, var(--colore-brand));
    --colore-cluster-3: color-mix(in srgb, var(--colore-brand) 78%, var(--colore-testo));
    --colore-velo: color-mix(in srgb, var(--colore-superficie) 82%, transparent);
  }
}

/* -----------------------------------------------------------------------------
   Reset minimo
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
}

h1,
h2,
h3,
p {
  margin: 0;
}

button {
  font: inherit;
}

/* L'attributo hidden vince sempre sulle regole di display */
[hidden] {
  display: none !important;
}

/* -----------------------------------------------------------------------------
   Tipografia
   -------------------------------------------------------------------------- */

body {
  font-family: var(--font-testo);
  font-size: var(--dimensione-testo);
  line-height: var(--interlinea);
  color: var(--colore-testo);
  background: var(--colore-sfondo);
}

/* -----------------------------------------------------------------------------
   Focus visibile
   -------------------------------------------------------------------------- */

:focus-visible {
  outline: 3px solid var(--colore-brand);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   Movimento ridotto
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   Layout (mobile first)
   -------------------------------------------------------------------------- */

body {
  display: flex;
  flex-direction: column;
  height: 100vh; /* fallback */
  height: 100dvh;
  overflow: hidden;
}

.intestazione {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  min-height: var(--altezza-intestazione);
  padding: var(--spazio-2) var(--spazio-4);
  background: var(--colore-brand);
  color: var(--colore-testo-su-brand);
}

.intestazione__titolo {
  font-family: var(--font-titoli);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: var(--interlinea-stretta);
}

/* La mappa occupa tutto lo spazio sotto l'intestazione */
.principale {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
}

.mappa {
  position: absolute;
  inset: 0;
}

/* Pannello della scheda: foglio dal basso su mobile. L'altezza mobile (tre
   stati: anteprima/metà/piena) e il trascinamento sono in pannello.css. */
.pannello {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--livello-sovrapposto);
  overflow-y: auto;
  background: var(--colore-superficie);
  border-top-left-radius: var(--raggio-grande);
  border-top-right-radius: var(--raggio-grande);
  box-shadow: var(--ombra-morbida);
}

/* Filtri: posizione provvisoria in alto, la definisce filtri.js */
.filtri {
  position: absolute;
  top: var(--spazio-2);
  left: var(--spazio-2);
  right: var(--spazio-2);
  z-index: var(--livello-sovrapposto);
  background: var(--colore-superficie);
  border-radius: var(--raggio-medio);
  box-shadow: var(--ombra-morbida);
}

/* Avviso dei dati di esempio e stato: sovrapposti alla mappa, in alto al centro */
.avviso-esempio,
.stato {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--livello-sovrapposto);
  width: max-content;
  max-width: calc(100% - 2 * var(--spazio-4));
}

/* La riga "filtri rapidi" (#filtri-rapidi) occupa la parte alta di
   .principale su tutte le larghezze: avviso e stato restano sotto, senza
   coprirla né i controlli di zoom (in basso a destra). Gli offset derivano
   dall'altezza reale della barra (--altezza-filtri-rapidi), non da numeri
   magici: se la barra cambia altezza, questi si adeguano da soli. */
.avviso-esempio {
  top: calc(var(--spazio-2) + var(--altezza-filtri-rapidi));
}

.stato {
  top: calc(var(--spazio-2) + var(--altezza-filtri-rapidi) + 3rem);
}

/* Sotto 768px l'avviso va a sinistra e va a capo se lo schermo è stretto */
@media (max-width: 767px) {
  .avviso-esempio {
    left: var(--spazio-2);
    transform: none;
    max-width: calc(100% - 2 * var(--spazio-2));
  }
}

/* #stato vuoto non occupa spazio sulla mappa */
.stato:empty {
  display: none;
}

.avviso-noscript {
  position: absolute;
  inset: var(--spazio-4) var(--spazio-4) auto;
  padding: var(--spazio-4);
  background: var(--colore-superficie);
  border-radius: var(--raggio-medio);
}

/* Da 768px: pannello come colonna laterale destra (indipendente dai filtri) */
@media (min-width: 768px) {
  .pannello {
    /* Parte SOTTO la riga #filtri-rapidi (vedi --altezza-filtri-rapidi): così
       i filtri rapidi e "Tutti i filtri" restano scoperti e cliccabili mentre
       la scheda è aperta. Con bottom:0 (regola di base) la colonna arriva
       comunque fino in fondo e resta scrollabile. */
    top: var(--altezza-filtri-rapidi);
    left: auto;
    width: var(--larghezza-pannello);
    height: auto;
    border-radius: 0;
    border-left: 1px solid var(--colore-bordo);
  }
}

/* Da 850px: i filtri diventano un riquadro compatto in alto a sinistra. Tra
   768 e 849px restano un foglio a piena larghezza (regole in filtri.css),
   perché insieme alla colonna della scheda non lascerebbero spazio alla
   mappa */
@media (min-width: 850px) {
  .filtri {
    right: auto;
    width: 320px;
  }
}