/* Citizen Diving — foglio di stile del sito.
   Colori solo dalle variabili dei temi (questi blocchi sono l'unico posto con colori scritti),
   niente opacity; caratteri e spazi in rem, così il testo cresce con il pannello «Aspetto».
   Contrasti (li controlla sito/tests/test_stile.py): testo e collegamenti 4,5:1 su fondo, superficie
   e campo; bordo dei campi e anello di messa a fuoco 3:1; testo dei pulsanti 4,5:1 sul pulsante. */

/* Source Sans 3 (licenza OFL), servito dal sito: gli stessi file della scelta in Gestione → Impostazioni */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;
  src:url("../../pj_base/caratteri/source-sans-3/400-normal.27ab01c4cb50.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;
  src:url("../../pj_base/caratteri/source-sans-3/600-normal.9a35cba76eda.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;
  src:url("../../pj_base/caratteri/source-sans-3/700-normal.9b13bd3653e3.woff2") format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:italic;font-weight:400;font-display:swap;
  src:url("../../pj_base/caratteri/source-sans-3/400-italic.410bdda67c60.woff2") format("woff2")}

/* Chiaro (anche il predefinito): i colori del logo MED-BIOWATCH (blu notte, ciano, teal, arancio) */
:root{
  --fondo:#f4f7fa; --superficie:#ffffff; --campo:#ffffff;
  --testo:#0b1a2e; --testo-2:#43536a; --linea:#cfd8e2; --bordo-campo:#62738a;
  --accento:#006f9c; --pulsante:#006f9c; --pulsante-testo:#ffffff;
  --errore:#a8231b; --ok:#1d6a39; --fuoco:#006f9c; --dettaglio:#a4530f;
  --stazione-s:#16a3b8; --stazione-d:#0b4f8a; --stazione-r:#d9822b; color-scheme:light;
}
/* Penombra */
:root[data-theme="medio"]{
  --fondo:#1c2838; --superficie:#233247; --campo:#2a3b52;
  --testo:#f1f5f9; --testo-2:#c9d5e2; --linea:#4a5d75; --bordo-campo:#8fa3ba;
  --accento:#7fd3e3; --pulsante:#7fd3e3; --pulsante-testo:#0b1a2e;
  --errore:#ffb4ab; --ok:#94dcab; --fuoco:#7fd3e3; --dettaglio:#f0a964;
  --stazione-s:#4cc3d9; --stazione-d:#6fa8ff; --stazione-r:#f0a964; color-scheme:dark;
}
/* Scuro: il fondo del logo */
:root[data-theme="dark"]{
  --fondo:#0b0c16; --superficie:#121a2b; --campo:#17223a;
  --testo:#eef3f7; --testo-2:#b6c3d1; --linea:#33425a; --bordo-campo:#7d8ea3;
  --accento:#4cc3d9; --pulsante:#4cc3d9; --pulsante-testo:#0b0c16;
  --errore:#ff9e94; --ok:#7ed49b; --fuoco:#4cc3d9; --dettaglio:#e8954a;
  --stazione-s:#4cc3d9; --stazione-d:#6fa8ff; --stazione-r:#e8954a; color-scheme:dark;
}
/* Automatico: con il sistema scuro, gli stessi colori del tema Scuro (copia: lo controlla un test) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme]){
    --fondo:#0b0c16; --superficie:#121a2b; --campo:#17223a;
    --testo:#eef3f7; --testo-2:#b6c3d1; --linea:#33425a; --bordo-campo:#7d8ea3;
    --accento:#4cc3d9; --pulsante:#4cc3d9; --pulsante-testo:#0b0c16;
    --errore:#ff9e94; --ok:#7ed49b; --fuoco:#4cc3d9; --dettaglio:#e8954a;
    --stazione-s:#4cc3d9; --stazione-d:#6fa8ff; --stazione-r:#e8954a; color-scheme:dark;
}
}
/* La fascia della prima pagina ha il fondo del logo in tutti i temi */
:root{--mare-fondo:#0a0b15; --mare-testo:#eef3f7; --mare-accento:#4cc3d9; --mare-pulsante-testo:#0a0b15}
/* Il pannello «Aspetto» prende i colori dalle variabili del sito */
:root{
  --asp-sfondo:var(--superficie);--asp-testo:var(--testo);--asp-tenue:var(--testo-2);--asp-bordo:var(--bordo-campo);
  --asp-accento:var(--pulsante);--asp-accento-testo:var(--pulsante-testo);--asp-campo:var(--campo)}

*,*::before,*::after{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--fondo);color:var(--testo);font-family:"Source Sans 3",system-ui,sans-serif;
  font-size:1.0625rem;line-height:1.6}
h1,h2,h3{line-height:1.25;margin:1.6rem 0 .7rem}
h1{font-size:2rem;margin-top:1.2rem}
h2{font-size:1.4rem}
h3{font-size:1.15rem}
a{color:var(--accento);text-underline-offset:.15em}
a:hover{text-decoration-thickness:.15em}
img{max-width:100%;height:auto}
code{font-size:.92em}
.contenitore{width:100%;max-width:72rem;margin:0 auto;padding:0 1rem}

.salta{position:absolute;left:1rem;top:-10rem;background:var(--superficie);color:var(--testo);padding:.5rem 1rem;
  border:2px solid var(--fuoco);z-index:10}
.salta:focus{top:.5rem}

.testata{background:var(--superficie);border-bottom:1px solid var(--linea)}
.testata-riga{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.2rem;padding-top:.7rem;padding-bottom:.7rem}
.marchio{font-weight:800;font-size:1.3rem;color:var(--testo);text-decoration:none;letter-spacing:.01em}
.navigazione{flex:1 1 auto}
.navigazione ul{display:flex;flex-wrap:wrap;gap:.2rem 1rem;list-style:none;margin:0;padding:0}
.navigazione a{color:var(--testo);font-weight:600;text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent}
.navigazione a:hover,.navigazione a[aria-current=page]{border-bottom-color:var(--accento)}
.esci{margin:0}

main{min-height:60vh}
.piede{border-top:1px solid var(--linea);background:var(--superficie);margin-top:3rem;padding:1rem 0;color:var(--testo-2);font-size:.95rem}
.piede-voci{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;list-style:none;margin:0;padding:0}
.piede a{color:var(--accento)}

/* Gestione dei dati (sito/gestione.py): ricerca e filtri affiancati, a capo sugli schermi stretti */
.cerca.filtri{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr));gap:.5rem 1rem;align-items:end}
.cerca.filtri .campo{margin:0}
.cerca.filtri label{flex-basis:auto}
.cerca.filtri .azioni{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:0}

/* ------------------------------------------------------------ sito pubblico di MED-BIOWATCH */
.marchio-sotto{display:block;font-size:.8rem;font-weight:600;letter-spacing:.08em;color:var(--testo-2)}
.testata .contenitore + .contenitore{padding-bottom:.5rem}
.lingue{margin-left:auto}
.attacco{font-size:1.15rem;color:var(--testo-2)}
.pagina.larga{max-width:none}
.sotto{color:var(--testo-2)}
.briciole{margin:1rem 0 0}

/* fascia della prima pagina, con il logo sul suo fondo */
.eroe-mare{background:var(--mare-fondo);color:var(--mare-testo);padding:1.5rem 0 2rem}
.eroe-mare-riga{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2.5rem}
.eroe-logo{flex:0 1 28rem;width:28rem;max-width:100%;height:auto}
.eroe-testo{flex:1 1 18rem;min-width:0}
.eroe-mare h1{font-size:2.2rem;margin-top:.5rem}
.eroe-mare .attacco{color:var(--mare-testo);font-size:1.2rem}
.eroe-mare a{color:var(--mare-accento)}
.eroe-mare a.pulsante{color:var(--mare-accento);border-color:var(--mare-accento);background:transparent}
.eroe-mare a.pulsante.primario{background:var(--mare-accento);color:var(--mare-pulsante-testo)}
.eroe-mare :focus-visible{outline:3px solid var(--mare-accento);outline-offset:2px}
.inviti{display:flex;flex-wrap:wrap;gap:.6rem;list-style:none;margin:1.2rem 0 0;padding:0}

.riquadro{background:var(--superficie);border:1px solid var(--linea);border-left:.4rem solid var(--dettaglio);
  border-radius:.4rem;padding:.4rem 1.2rem .8rem;margin:1.5rem 0}
.settimana-date{font-size:1.3rem;font-weight:700;margin:.2rem 0}
.conto{font-weight:600;color:var(--dettaglio)}
.numeri{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,13rem),1fr));gap:1rem;list-style:none;
  margin:1.5rem 0;padding:0}
.numeri li{background:var(--superficie);border:1px solid var(--linea);border-radius:.4rem;padding:.8rem 1rem}
.numeri strong{display:block;font-size:2rem;line-height:1.1;color:var(--accento)}

/* schede di aree, specie ed eventi */
.schede-aree,.schede-specie,.eventi,.recapiti{display:grid;gap:1rem;list-style:none;margin:1rem 0;padding:0}
.schede-aree{grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr))}
.schede-specie{grid-template-columns:repeat(auto-fill,minmax(min(100%,20rem),1fr))}
.scheda-area,.scheda-specie,.evento,.recapiti li{background:var(--superficie);border:1px solid var(--linea);
  border-top:.3rem solid var(--accento);border-radius:.4rem;padding:.2rem 1rem .8rem;min-width:0;overflow-wrap:anywhere}
.scheda-area h2,.scheda-area h3,.scheda-specie h3,.evento h3{margin:.6rem 0 .4rem}
.scientifico{display:block;font-style:italic;font-weight:400;font-size:1rem;color:var(--testo-2)}
.evento-data{font-weight:700;margin:.6rem 0 0;color:var(--testo-2)}
.dati{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:.2rem .8rem;margin:.6rem 0}
.dati dt{font-weight:600}
.dati dd{margin:0;overflow-wrap:anywhere}
.recapiti address{font-style:normal}

/* la mappa: alta quanto serve, mai più larga dello schermo */
.mappa{height:min(32rem,70vh);width:100%;border:1px solid var(--linea);border-radius:.4rem;margin:1rem 0 .4rem;
  background:var(--superficie)}
.leaflet-container{font:inherit}
.leaflet-container a{color:var(--accento)}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--superficie);color:var(--testo)}
.leaflet-container .leaflet-control-attribution{background:var(--superficie);color:var(--testo)}