/* ============================================================
   NorthCape4000 · token della guida
   I colori sono quelli di northcape4000.com (css/base.css, ottobre 2026):
   --blue #0f405d, --blue-dark #082c41, --gold #d6ad52, --ink #123b52,
   più l'azzurro #7fc4df e il grigio-azzurro #eaf0f2 che il sito usa nei blocchi.
   Il sito NC non ha un repo con un tema esportabile (ttrefactor per il TT,
   tge-refactor per TGE): questo file è scritto qui, sullo schema dei token TT,
   così guide.css e chrome.css restano gli stessi file con gli stessi nomi di
   classe che bas-guides conosce.
   ============================================================ */

:root {
  /* --- Colori ---------------------------------------------------------
     Contrasti verificati (WCAG AA, testo piccolo):
       --oro su --neve ................ 5,2:1  ✔ (occhielli 12,5px)
       --ghiaccio su --blu ............ 5,5:1  ✔ (occhielli sul blu)
       --muted su --neve .............. 5,0:1  ✔ (etichette)
     --oro-chiaro (#d6ad52, l'oro dell'anniversario) è solo decorazione:
     sul bianco non regge un testo. */
  --neve: #fbfcfb;         /* fondo della pagina */
  --paper: #eaf0f2;        /* fondo dei riquadri speciali */
  --blu: #0f405d;          /* colore primario: numeri, bottoni, copertina */
  --blu-notte: #082c41;    /* hover del primario, titoli */
  --ghiaccio: #7fc4df;     /* testo secondario sul blu, evidenziatore */
  --ink: #123b52;          /* testo corrente */
  --oro: #876620;          /* occhielli sopra i titoli */
  --oro-chiaro: #d6ad52;   /* numeri dei capitoli, segni dell'anniversario */
  --heading: #082c41;      /* titoli */

  --line: rgba(15, 64, 93, 0.16);
  --line-strong: rgba(15, 64, 93, 0.22);
  --line-hard: rgba(15, 64, 93, 0.34);
  --line-neve: rgba(251, 252, 251, 0.3);
  --muted: rgba(18, 59, 82, 0.72);
  --muted-strong: rgba(18, 59, 82, 0.84);
  --blu-velo: rgba(15, 64, 93, 0.07);

  /* --- Tipografia ----------------------------------------------------- */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
  --font-body: 'Barlow', Arial, Helvetica, sans-serif;

  /* Il Barlow Condensed è stretto: a parità di corpo occupa due terzi della
     larghezza di un serif, quindi i titoli stanno un gradino sopra la scala TT. */
  --fs-h1: clamp(46px, 12vw, 96px);
  --fs-h2: clamp(36px, 8.4vw, 60px);
  --fs-h3: clamp(26px, 6vw, 36px);
  --fs-h4: clamp(22px, 5.2vw, 29px);
  --fs-num: clamp(30px, 8.6vw, 56px);
  --fs-stat: clamp(38px, 9vw, 56px);
  --fs-lead: clamp(18px, 4.6vw, 19.5px);
  --fs-body: clamp(17px, 4.3vw, 18.5px);
  --fs-sm: 16.5px;
  --fs-xs: clamp(14.5px, 3.7vw, 15.5px);
  --fs-kicker: 13px;
  --fs-label: 11px;

  /* --- Spaziature ----------------------------------------------------- */
  --pad-x: clamp(20px, 5vw, 40px);
  --sec-y: clamp(76px, 10vw, 104px);
  --sec-y-sm: clamp(56px, 8vw, 72px);
  --maxw-text: 740px;
}

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

body {
  margin: 0;
  background: var(--neve);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--blu);
  text-decoration: none;
}

a:hover {
  color: var(--blu-notte);
}

:focus-visible {
  outline: 2px solid var(--blu);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
  text-wrap: pretty;
}

p {
  margin: 0;
}

::selection {
  background: var(--blu);
  color: var(--neve);
}

/* `hidden` deve vincere su qualunque display: lo usa il countdown per
   spegnersi da solo passata l'apertura. */
[hidden] {
  display: none !important;
}

@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;
  }
}

/* ============================================================
   NorthCape4000 — ponte verso il lettore delle guide
   Il resto di questo file viene da northcape4000-guida@cfeaa49 (tema/tokens.css):
   questo blocco no, è di bas-guides, come il ponte del tema tge.

   La cornice del lettore (reader-html.css) e il cancello sono nati sul tema del
   Tuscany Trail e usano i suoi nomi di token: --wine, --cream, --olive,
   --apricot… Qui quei nomi ricevono i valori NC, gli stessi che la guida dei
   colleghi aveva sostituito a mano nel suo chrome.css (blu al posto del vino,
   neve al posto della crema, oro al posto dell'oliva, ghiaccio al posto del
   rosa).

   Contrasti (WCAG AA, testo normale ≥ 4,5:1):
     --blu #0f405d su --neve ............... 10,7:1 (e neve sul blu, idem)
     --oro #876620 su --neve ............... 5,2:1
     --ink #123b52 su --oro-chiaro ......... 5,6:1  (titolo del cancello)
     --blu-notte #082c41 su --oro-chiaro ... 6,9:1  (testo secondario del cancello)
     --neve su #064264 ..................... 10,4:1 (targa di copertina)
   ============================================================ */

:root {
  /* --- Colori con i nomi del tema tt ---------------------------------- */
  --wine: var(--blu);                    /* primario: bottoni, marchio, barra di avanzamento */
  --wine-deep: var(--blu-notte);         /* hover del primario */
  --wine-tint: var(--blu-velo);          /* velo blu: evidenza della ricerca */
  --cream: var(--neve);                  /* fondo della pagina e testo sui fondi pieni */
  --ink-warm: var(--blu-notte);
  --olive: var(--oro);                   /* occhielli */
  --blush: var(--ghiaccio);              /* evidenziatore */
  --apricot: var(--oro-chiaro);          /* fascia del cancello: l'oro dell'Edizione X */
  --on-apricot: var(--blu-notte);        /* testo secondario sull'oro */
  --line-cream: var(--line-neve);

  /* --- Cornice del lettore -------------------------------------------- */
  --barra-bg: rgba(251, 252, 251, 0.95);
  --spaziato-fg: rgba(251, 252, 251, 0.7);
  --targa-bg: rgba(6, 66, 100, 0.93);    /* il blu della targa del sito, come nella guida */
  --velo-bg: rgba(8, 44, 65, 0.45);
  --copertina-h1: clamp(44px, 9vw, 88px);

  --pad-x-wide: clamp(24px, 6vw, 48px);
  --maxw-form: 640px;
}

/* --- Copertina --------------------------------------------------------
   Il titolo è il logo dell'Edizione X (foto/logo-nc4k-x.jpg, bianco già
   appiattito sul blu della targa): il nome resta nell'alt. reader-html.css
   arriva dopo questo file, quindi qui si sale di specificità con .copertina.guida
   invece di toccare la cornice comune. */
.copertina.guida h1 {
  margin: 0 0 14px;
}

.copertina.guida h1 img {
  display: block;
  width: min(100%, 360px);
  height: auto;
}

.copertina.guida .laguida {
  margin: 0 0 12px;
  font: 800 clamp(34px, 5.4vw, 52px) / 1 var(--font-display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--neve);
}

/* Su telefono la targa è piena: lo stesso blu su cui è appiattito il logo,
   altrimenti il JPEG mostrerebbe il suo riquadro. */
@media (max-width: 700px) {
  .copertina.guida,
  .copertina.guida .copertina-in {
    background: #064264;
  }
}