/* Priscilla Dive — foglio di stile del sito (stile ripreso da priscilladive.com: blu profondo, oro, polpo).
   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. */

@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans.c24a515faa91.woff2") format("woff2");
  font-weight:300 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:"Open Sans";src:url("../fonts/OpenSans-Italic.0b02bf8aa34b.woff2") format("woff2");
  font-weight:300 800;font-stretch:75% 100%;font-style:italic;font-display:swap}

/* Blu notte (il colore di Priscilla Dive, dal tema scuro di MyBluSea) con l'oro del vecchio sito.
   È il tema predefinito (settings.ASPETTO); chiaro e penombra restano a scelta dal pannello «Aa». */
/* Chiaro */
:root{
  --fondo:#f3f7fa; --superficie:#ffffff; --campo:#ffffff;
  --testo:#0b1a2a; --testo-2:#3e5163; --linea:#c9d5df; --bordo-campo:#5f7385;
  --accento:#0b4f7c; --pulsante:#0b4f7c; --pulsante-testo:#ffffff;
  --errore:#a8231b; --ok:#1d6a39; --fuoco:#0b4f7c; --oro:#9a6b00;
}
/* Penombra (blu ardesia) */
:root[data-theme="medio"]{
  --fondo:#1e3347; --superficie:#26405a; --campo:#2b4762;
  --testo:#f1f5f9; --testo-2:#c9d6e2; --linea:#46617c; --bordo-campo:#93aac0;
  --accento:#ffd866; --pulsante:#8fdbe6; --pulsante-testo:#0b1a2a;
  --errore:#ffb4ab; --ok:#94dcab; --fuoco:#ffd866; --oro:#ffd866;
}
/* Scuro: blu notte */
:root[data-theme="dark"]{
  --fondo:#0b1a2a; --superficie:#12263a; --campo:#0e2133;
  --testo:#e6eef5; --testo-2:#a9b8c6; --linea:#2c4660; --bordo-campo:#6f8aa3;
  --accento:#f2c94c; --pulsante:#5cc8d6; --pulsante-testo:#0b1a2a;
  --errore:#ff9aa2; --ok:#6fcf97; --fuoco:#f2c94c; --oro:#f2c94c;
}
/* 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:#0b1a2a; --superficie:#12263a; --campo:#0e2133;
    --testo:#e6eef5; --testo-2:#a9b8c6; --linea:#2c4660; --bordo-campo:#6f8aa3;
    --accento:#f2c94c; --pulsante:#5cc8d6; --pulsante-testo:#0b1a2a;
    --errore:#ff9aa2; --ok:#6fcf97; --fuoco:#f2c94c; --oro:#f2c94c;
  }
}
/* 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:"Open Sans",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)}

/* Marchio: il polpo del vecchio sito, colorato dal tema (maschera sull'immagine) */
.marchio{display:inline-flex;align-items:center;gap:.5rem}
.polpo{display:inline-block;width:2.4rem;height:2.4rem;background:var(--oro);
  -webkit-mask:url("../img/polpo.51ade1d5a165.png") center/contain no-repeat;mask:url("../img/polpo.51ade1d5a165.png") center/contain no-repeat}
h1,h2{letter-spacing:.01em}
.briciole{margin:1rem 0 0;font-size:.95rem}
.attacco{color:var(--testo-2);font-size:1.1rem}

/* Gallerie e tessere (notizie, gallerie) */
.galleria{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:1rem;list-style:none;margin:1rem 0;padding:0}
.galleria.tre{grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))}
.tessera{display:flex;flex-direction:column;gap:.3rem;height:100%;text-decoration:none;color:var(--testo);
  background:var(--superficie);border:1px solid var(--linea);border-radius:.5rem;padding:.5rem}
.tessera:hover{border-color:var(--accento)}
.tessera:hover .tessera-titolo{text-decoration:underline}
.tessera img,.tessera-vuota{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.3rem;background:var(--campo)}
.tessera-titolo{font-weight:700;overflow-wrap:anywhere}
.tessera-sotto{color:var(--testo-2);font-size:.9rem;margin:0}
.tessera-testo{color:var(--testo-2);font-size:.95rem}
.galleria-foto{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,12rem),1fr));gap:.8rem;margin:1rem 0}
.figura{margin:0}
.figura img{display:block;width:100%;height:auto;border-radius:.3rem}
.figura figcaption{color:var(--testo-2);font-size:.9rem;margin-top:.3rem}
.riquadro-foto{border:1px solid var(--linea);border-radius:.4rem;padding:.5rem 1rem;margin:0 0 1rem}
.anteprima{display:block;max-width:10rem;height:auto;margin:.3rem 0}
.pagine-elenco ul{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;list-style:none;padding:0;margin:1.5rem 0}

/* Staff */
.persona{display:grid;grid-template-columns:minmax(0,10rem) minmax(0,1fr);gap:1rem 1.5rem;align-items:start;
  border-top:1px solid var(--linea);padding:1.2rem 0}
.persona h2{margin-top:0}
.ritratto{width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:2px solid var(--oro)}
@media (max-width:36em){.persona{grid-template-columns:minmax(0,1fr)}.ritratto{max-width:10rem}}

/* Prima pagina */
.editoriale{max-width:48rem;margin:1.5rem 0}
.landing .carosello-titolo{color:var(--accento)}

/* Notizie: frecce e «Invia a un amico» */
.condividi{margin:1.5rem 0}
.frecce-notizie ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;list-style:none;margin:2rem 0 0;padding:1rem 0 0;border-top:1px solid var(--linea)}
.frecce-notizie li{flex:1 1 16rem;max-width:100%}
.frecce-notizie .freccia-dopo{text-align:right}
.frecce-notizie a{display:inline-flex;flex-wrap:wrap;gap:.2rem .4rem;align-items:baseline;text-decoration:none}
.frecce-notizie .freccia-dopo a{justify-content:flex-end}
.freccia-cosa{display:block;width:100%;color:var(--testo-2);font-size:.9rem}
.freccia-titolo{font-weight:700;text-decoration:underline;overflow-wrap:anywhere}

/* Glossario */
.filtri ul{display:flex;flex-wrap:wrap;gap:.4rem .6rem;list-style:none;margin:1rem 0;padding:0}
.filtri a{display:inline-block;padding:.3rem .8rem;border:1px solid var(--bordo-campo);border-radius:2rem;text-decoration:none;color:var(--testo)}
.filtri a[aria-current=page]{background:var(--pulsante);border-color:var(--pulsante);color:var(--pulsante-testo)}
.voce-corpo{display:grid;grid-template-columns:minmax(0,22rem) minmax(0,1fr);gap:1.5rem;align-items:start}
.voce-corpo .figura img{border-radius:.4rem}
@media (max-width:48em){.voce-corpo{grid-template-columns:minmax(0,1fr)}}

/* Partner */
.partner{display:grid;grid-template-columns:minmax(0,12rem) minmax(0,1fr);gap:1rem 1.5rem;align-items:start;
  border-top:1px solid var(--linea);padding:1.2rem 0}
.partner h2{margin-top:0}
.partner-logo img{display:block;width:100%;height:auto;border-radius:.4rem;border:1px solid var(--linea)}
.partner-sigla{display:flex;align-items:center;justify-content:center;aspect-ratio:3/2;border:1px solid var(--linea);
  border-radius:.4rem;background:var(--superficie);color:var(--oro);font-weight:800;font-size:1.3rem;text-align:center;padding:.5rem}
.contatti{list-style:none;padding:0;margin:.5rem 0;overflow-wrap:anywhere}
@media (max-width:36em){.partner{grid-template-columns:minmax(0,1fr)}.partner-logo{max-width:12rem}}
.campo.scelte{border:1px solid var(--linea);border-radius:.4rem;padding:.5rem 1rem}
.etichette{display:flex;flex-wrap:wrap;gap:.3rem .4rem;list-style:none;margin:.2rem 0 .6rem;padding:0}
.etichette li{border:1px solid var(--oro);color:var(--testo);border-radius:2rem;padding:.05rem .7rem;font-size:.9rem}
.qualifiche{margin:.3rem 0 .8rem;padding-left:1.2rem;color:var(--testo-2)}