/* =========================================================================
   MyBluSea — veste grafica «Nautilus» (2026-10-31, josotosan)
   Adattato da ~/Pictures/0_selezione/design/myblusea-nautilus.css (scritto per il vecchio mysea).
   Caricato DOPO sito.css (base.html): ne riscrive le fasce ::before, i titoli di sezione e le schede.
   Font: Atkinson Hyperlegible (testo e titoli, in grassetto), in sito/font/ (licenza OFL, vedi LICENZE.md). Il serif Gloock dei titoli
   è stato tolto il 2026-10-31 (josotosan: leggibile solo molto grande).
   Le aree di gestione restano senza serif (.gestione). Colori solo da variabili, definite qui sotto.
   ========================================================================= */

@font-face{font-family:"Atkinson Hyperlegible";src:url("../font/atkinson-400.f1f8a8210104.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("../font/atkinson-700.13a58e05dfd2.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --f-titoli:"Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --card-px:1.1rem; --card-pt:1rem; --card-pb:1.1rem;   /* respiro delle card, uguale ovunque */
  --f-testo:"Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --verderame:#1f6f74;           /* etichette di sezione, tema chiaro (4,5:1 su fondo chiaro) */
  --inchiostro:#06101f;          /* fondo dell'eroe e delle fasce */
  --eroe-titolo:#f1ece0;         /* avorio: sempre su fondo d'inchiostro, in ogni tema */
  --eroe-testo:#d3dbe2;
  --fascia-inchiostro:#0c1724;
  --fascia-avorio:#e9e3d3;
}
/* contrasti misurati (testo piccolo, almeno 4,5:1): chiaro 5,4:1 sul fondo; Penombra 5,6:1 su #9fb2c6; scuro 8,5:1 su #0a1628 */
:root[data-theme="medio"]{--verderame:#0b3b40}
:root[data-theme="dark"]{--verderame:#5fc1c1}
@media (prefers-color-scheme:dark){:root:not([data-theme]){--verderame:#5fc1c1}}

body{font-family:var(--f-testo)}
.marchio,
:is(main h1, main h2, main h3):not(.gestione *){font-family:var(--f-titoli);font-weight:700;letter-spacing:0}
.marchio{font-family:var(--f-titoli);font-weight:700;font-size:1.6rem;letter-spacing:-.01em}

/* ---- Eroe: incisione a tutta larghezza, in bicromia ---- */
.eroe{position:relative;isolation:isolate;overflow:hidden;padding-block:clamp(5rem,14vw,10rem) 3.5rem}
.eroe-riga{display:block}
.eroe-immagine{
  position:absolute;inset:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;
  object-fit:cover;object-position:center 40%;z-index:-2;border:0;border-radius:0;box-shadow:none;
  filter:grayscale(1) contrast(1.15) brightness(.9);opacity:.6}
.eroe::after{ /* velo d'inchiostro + tinta verderame */
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--inchiostro) 15%,transparent) 0%,color-mix(in srgb,var(--inchiostro) 55%,transparent) 45%,var(--inchiostro) 100%),
    linear-gradient(90deg,color-mix(in srgb,var(--inchiostro) 85%,transparent) 0%,transparent 70%),
    color-mix(in srgb,var(--turchese) 18%,transparent)}
.eroe h1{font-size:clamp(2.6rem,7vw,4.8rem);line-height:1.02;letter-spacing:-.015em;max-width:13ch;margin:0 0 .4em;color:var(--eroe-titolo);text-wrap:balance}
.eroe-attacco{max-width:46ch;font-size:1.15rem;color:var(--eroe-testo)}

/* ---- Titoli di sezione: etichetta + filetto ---- */
.pagina > h2,.vetrina > h2{
  font:700 .78rem/1 var(--f-testo);letter-spacing:.18em;text-transform:uppercase;color:var(--verderame);
  display:flex;gap:.9rem;align-items:center;border:0;background:none;text-decoration:none;padding-bottom:0;width:auto;max-width:none}
.pagina > h2::after,.vetrina > h2::after{content:"";flex:1;height:1px;background:var(--testata-linea);position:static;width:auto;border:0}
.vetrina > h2{margin-top:2.5rem}

/* ---- «I tuoi moduli»: restano card con la fascia dell'immagine (sito.css), titolo in grassetto; il respiro è quello di tutte le card (in fondo) ---- */
.scorciatoie > li > a{font:700 1.2rem/1.25 var(--f-titoli)}
.scorciatoie > li > a span{font:400 .95rem/1.45 var(--f-testo);margin-top:.35rem}

/* ---- Notizie come indice ---- */
.vetrina-notizie .schede-vetrina{display:grid;grid-template-columns:1fr;gap:0}
.vetrina-notizie .schede-vetrina > .scheda-vetrina{background:none;border:0;border-bottom:1px solid var(--testata-linea);border-radius:0;box-shadow:none;padding:0}
/* una riga d'indice non si solleva: al passaggio prende il fondo delle schede */
.vetrina-notizie .schede-vetrina > .scheda-vetrina:has(h3 a):hover{transform:none;box-shadow:none;background:var(--superficie);border-color:var(--testata-linea)}
.vetrina-notizie .schede-vetrina > .scheda-vetrina::before{display:none}
.vetrina-notizie .scheda-corpo{display:grid;grid-template-columns:9.5rem 1fr;column-gap:1.5rem;padding:1.25rem 0}
.vetrina-notizie .scheda-data{grid-row:span 2;margin:.35rem 0 0}
.vetrina-notizie h3{font-size:1.4rem;line-height:1.25;margin:0}
.vetrina-notizie .scheda-corpo > p:not(.scheda-data){grid-column:2;margin-top:.25rem;max-width:65ch;color:var(--testo-2)}
@media (max-width:40em){
  .vetrina-notizie .scheda-corpo{grid-template-columns:1fr}
  .vetrina-notizie .scheda-data,.vetrina-notizie .scheda-corpo > p:not(.scheda-data){grid-row:auto;grid-column:1}
}

/* ---- Link dei titoli: niente blu sottolineato (la card è tutta cliccabile, vedi sito.css) ---- */
.scheda-corpo h3 a{color:inherit;text-decoration:none}

/* ---- Prodotti: restano schede, con titolo serif ---- */
.vetrina-prodotti h3{font-size:1.25rem}

/* =========================================================================
   Testatine dei box (le fasce ::before di sito.css) in stile incisione: fondo d'inchiostro appena tinto col colore del modulo (--c),
   tratteggio a bulino, filetto avorio sotto. Via la riga colorata in basso.
   Vale per .scheda-vetrina, .scheda-manuale e .riquadro in .cruscotto/.griglia.
   ========================================================================= */
:is(.scheda-vetrina,.scheda-manuale,.cruscotto > .riquadro,.griglia > .riquadro){border:1px solid var(--linea);border-radius:.25rem;box-shadow:none}
/* :where() = specificità zero: le illustrazioni SVG dei prodotti (.vetrina-prodotti .fascia-*::before) vincono sul tratteggio */
:where(.scheda-vetrina,.scheda-manuale,.cruscotto > .riquadro,.griglia > .riquadro)::before{
  background-color:color-mix(in oklab,var(--c,var(--corallo)) 40%,var(--fascia-inchiostro));
  background-image:
    repeating-linear-gradient(115deg,color-mix(in srgb,var(--fascia-avorio) 9%,transparent) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(25deg,color-mix(in srgb,var(--fascia-avorio) 5%,transparent) 0 1px,transparent 1px 6px);
  border-bottom:1px solid color-mix(in srgb,var(--fascia-avorio) 28%,transparent)}
.vetrina-prodotti .scheda-vetrina::before{background-color:color-mix(in oklab,var(--c,var(--corallo)) 40%,var(--fascia-inchiostro))}

/* ---- Respiro delle card, uguale in tutto il sito (2026-10-31, josotosan): lati 1,1 rem, alto 1 rem sotto la fascia, basso 1,1 rem ---- */
.scheda-corpo,.scheda-viaggio-corpo{padding:var(--card-pt) var(--card-px) var(--card-pb)}
.scheda-corpo :is(h2,h3),.scheda-viaggio-corpo :is(h2,h3){margin:0 0 .4rem}
.scheda-manuale{padding:calc(2.875rem + var(--card-pt)) var(--card-px) var(--card-pb)}
.scheda-manuale h3{margin:0 0 .4rem}
:is(.cruscotto,.griglia) > .riquadro{padding:calc(2.875rem + var(--card-pt)) var(--card-px) var(--card-pb)}
.aula-scheda{padding:var(--card-pt) var(--card-px) var(--card-pb)}
ul.partner > .riquadro{padding:calc(2.875rem + var(--card-pt)) var(--card-px) var(--card-pb)}   /* sotto la fascia: non deve coprire il logo */
.scorciatoie > li > a{padding:calc(2.875rem + var(--card-pt)) var(--card-px) var(--card-pb);border-radius:.25rem}