/* ==========================================================================
   ATTENZIONE ALLE UNITA REM

   OceanWP imposta html { font-size: 10px }. Di conseguenza in tutto questo
   tema 1rem vale 10px, NON 16px come nella maggior parte dei progetti.

   Chi scrive 15rem pensando a 240px ne ottiene 150: e successo davvero, e
   il sintomo era una griglia che infilava quattro colonne dove ne volevamo
   tre. Per le misure che devono essere esatte - i minimi delle griglie su
   cui si decide quante colonne stanno in riga - si usano i PIXEL.
   Per spaziature e tipografia il rem va bene, purche si sappia che base ha.
   ========================================================================== */

/* ==========================================================================
   Token di colore — Gruppo CB Tigrotto ETS-ODV

   Punto unico della palette. Qui NON vanno regole, solo dichiarazioni.

   Verifica del vincolo cromatico, da rilanciare a ogni modifica dei CSS:
     grep -nE '#[0-9A-Fa-f]{3,6}' assets/css/*.css | grep -v tokens.css
   Deve restituire solo i bianchi (#FFF). Qualunque altro esadecimale fuori da
   questo file è un errore: va spostato qui e sostituito con var(--cbt-…).
   ========================================================================== */

:root {

  /* --- Identità: derivati dal logo sociale --------------------------------
     Il blu è il colore del sito: marchio, navigazione, link, bottoni, titoli. */
  --cbt-blu:            #1B75BC;
  --cbt-blu-scuro:      #14568A;

  /* Terne RGB degli stessi colori, per quando serve un rgba() con
     trasparenza: rgba() non accetta un esadecimale dentro una variabile.
     Usate dalla velatura sopra la fotografia dell'hero. Se si cambia il
     colore sopra, CAMBIARE ANCHE QUI: sono lo stesso colore scritto due
     volte, ed e' l'unico punto del tema dove questo accade. */
  --cbt-blu-scuro-rgb:  20, 86, 138;
  --cbt-azzurro:        #35A8E0;
  --cbt-azzurro-tenue:  #E7F3FB;

  /* Arancione del marchio. USO LIMITATO: filetti sotto i titoli, numeri delle
     statistiche. Mai su bottoni, link o qualunque elemento cliccabile.
     Motivo: collide semanticamente con l'allerta arancione. Un bottone
     arancione accanto a un box di allerta arancione insegna all'utente che
     l'arancione non significa nulla, proprio dove deve significare tutto. */
  --cbt-arancio-brand:  #EE5A2B;

  /* Bordeaux e grigio dello stemma di Macerata: uso araldico, non di interfaccia */
  --cbt-bordeaux:       #A32236;
  --cbt-grigio-stemma:  #9D9D9C;

  /* --- Neutri ------------------------------------------------------------ */
  --cbt-testo:          #16222E;
  --cbt-testo-tenue:    #5A6B7B;
  --cbt-sfondo:         #FFFFFF;
  --cbt-sfondo-alt:     #F4F7FA;
  --cbt-bordo:          #DDE4EB;

  /* --- Allerta: RISERVATI -------------------------------------------------
     Questi quattro colori comunicano un livello di rischio della protezione
     civile. Non usarli altrove, per nessun motivo — nemmeno nelle pagine che
     parlano di emergenza. Significano "livello di allerta in corso", non
     "argomento emergenza". */
  --cbt-allerta-verde:      #00A04A;
  /* Verde tenue per i messaggi di conferma: con il testo scuro sta a
     14.47:1, e il verde pieno resta il filetto che da' il segnale. */
  --cbt-verde-tenue:        #E8F6EE;
  --cbt-allerta-gialla:     #F0B323;
  --cbt-allerta-arancione:  #ED8B00;
  --cbt-allerta-rossa:      #C8102E;

  /* Colore del testo sopra ciascun livello.

     I rapporti sono stati MISURATI, non stimati. La versione precedente di
     questo file dichiarava "verificato WCAG AA" ma metteva testo bianco su
     arancione: 2.53, contro il 4.5 richiesto. Su verde stava a 3.43. Su una
     fascia che qualcuno legge da telefono mentre sta succedendo qualcosa,
     era il difetto peggiore possibile.

     I colori di FONDO non si toccano: sono i codici della Protezione Civile e
     un'allerta arancione che non è l'arancione standard non comunica più
     niente. Si cambia il testo, che semanticamente non costa nulla.

       fondo #F0B323 giallo    + #16222E scuro   =  8.58  AA
       fondo #ED8B00 arancione + #16222E scuro   =  6.37  AA
       fondo #C8102E rosso     + #FFFFFF bianco  =  5.88  AA
       fondo #00A04A verde     + #16222E scuro   =  4.70  AA

     Ricontrollare questi numeri ogni volta che si tocca un colore di allerta. */
  --cbt-su-verde:      #16222E;
  --cbt-su-gialla:     #16222E;
  --cbt-su-arancione:  #16222E;
  --cbt-su-rossa:      #FFFFFF;

  /* --- Ruoli semantici: usare QUESTI nelle regole, non i colori grezzi ---- */
  --cbt-primario:        var(--cbt-blu);
  --cbt-primario-hover:  var(--cbt-blu-scuro);
  --cbt-accento:         var(--cbt-azzurro);
  --cbt-link:            var(--cbt-blu);
  --cbt-link-hover:      var(--cbt-blu-scuro);

  /* --- Misure ------------------------------------------------------------- */
  --cbt-raggio:      6px;
  --cbt-raggio-sm:   3px;
  --cbt-ombra:       0 2px 8px rgba(22, 34, 46, .08);
  --cbt-ombra-alta:  0 6px 24px rgba(22, 34, 46, .12);
  --cbt-contenuto:   1200px;
}

/* --- Ponte verso le variabili di OceanWP ---------------------------------
   Quasi tutti i colori del tema padre si impostano dal Customizer, ed è lì
   che vanno messi. Queste due variabili fanno eccezione: OceanWP le emette
   cablate, senza un controllo corrispondente, quindi ricadrebbero sul suo
   turchese di default e romperebbero la riserva semantica dei colori.
   Si riallineano qui, che resta il punto unico della palette.

   !important è necessario e non è una scorciatoia: OceanWP stampa queste
   variabili in un <style> inline che il browser incontra DOPO questo foglio,
   quindi senza !important vincerebbe comunque il suo valore, a prescindere
   dalla specificità del selettore. */
:root {
  --owp-widget-link-color:       var(--cbt-link) !important;
  --owp-widget-link-color-hover: var(--cbt-link-hover) !important;
}