/*
Theme Name:     Svolta Solare
Theme URI:      https://svoltasolare.it
Description:    Child theme di Nextawards per Svolta Solare — consulenza energetica indipendente. Contiene il sistema di design del marchio, il template landing per il traffico a pagamento e i font serviti in locale.
Author:         Marco Capritti
Author URI:     https://marcocapritti.it
Template:       nextawards
Version:        1.0.1
Requires PHP:   7.4
Text Domain:    svoltasolare
License:        GNU General Public License v3.0
License URI:    http://www.gnu.org/licenses/gpl-3.0.html
*/

/* =========================================================================
   FONT LOCALI
   Le regole @font-face NON stanno qui: sono stampate in linea nell'head da
   functions.php con URL assoluti. Motivo: le ottimizzazioni CSS di LiteSpeed
   (combina/minifica) spostano il foglio di stile in /wp-content/litespeed/,
   e i percorsi relativi ai font si romperebbero.
   ========================================================================= */

/* =========================================================================
   TOKEN DI MARCA
   Il territorio visivo è la bolletta letta e annotata: carta bianca,
   inchiostro blu di stampa, righe di tabella, segno dell'evidenziatore.
   Tutti i valori sono verificati per contrasto WCAG (riportato a lato).
   ========================================================================= */

:root {

  /* --- Colore --- */
  --sv-ink:        #16233A;  /* inchiostro. Testo e sezioni scure. 15.7:1 su bianco  */
  --sv-ink-2:      #2C3E5C;  /* inchiostro schiarito, superfici dentro le sezioni scure */
  --sv-slate:      #5A6B85;  /* testo secondario.                    5.4:1 su bianco  */
  --sv-paper:      #FFFFFF;  /* carta. Fondo primario                                 */
  --sv-rule:       #F1F4F8;  /* riga di tabella. Fondo sezione alternata               */
  --sv-line:       #DCE3EC;  /* bordi e filetti                                        */
  --sv-marker:     #FFD400;  /* evidenziatore. Solo per marcare, mai come decorazione  */
  --sv-cta:        #C7350B;  /* azione primaria.        bianco sopra 5.3:1 — AA        */
  --sv-cta-hi:     #E8420E;  /* stato hover dell'azione primaria                       */
  --sv-ok:         #1E7A5C;  /* conferme e spunte                                      */

  /* Sovrascrive le variabili del tema genitore */
  --site-bg:         var(--sv-paper);
  --site-text-color: var(--sv-ink);
  --link-color:      var(--sv-cta);
  --link-color-hover:var(--sv-cta-hi);

  /* --- Tipografia --- */
  --sv-display: 'Bricolage Grotesque', 'Trebuchet MS', system-ui, sans-serif;
  --sv-body:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sv-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Scala modulare 1.25. Corpo base 17px su mobile per leggibilità
     reale sul pubblico 38-65, che è quello che paghi con le ads. */
  --t-xs:    0.82rem;
  --t-sm:    0.92rem;
  --t-base:  clamp(1.0625rem, 0.4vw + 1rem, 1.125rem);
  --t-lg:    clamp(1.2rem,  0.5vw + 1.05rem, 1.35rem);
  --t-xl:    clamp(1.45rem, 1vw + 1.2rem,  1.75rem);
  --t-2xl:   clamp(1.8rem,  2vw + 1.3rem,  2.35rem);
  --t-3xl:   clamp(2.15rem, 3vw + 1.4rem,  3rem);
  --t-hero:  clamp(2.3rem,  5.5vw + 0.9rem, 3.9rem);

  --lh-tight: 1.08;
  --lh-head:  1.18;
  --lh-body:  1.62;

  /* --- Spazio, ritmo verticale su base 8 --- */
  --s-1: .5rem;
  --s-2: 1rem;
  --s-3: 1.5rem;
  --s-4: 2rem;
  --s-5: 3rem;
  --s-6: 4rem;
  --s-7: 6rem;

  --sv-shell:  1120px;   /* larghezza massima del contenuto            */
  --sv-measure: 62ch;    /* lunghezza di riga massima per il testo     */
  --sv-radius: 4px;      /* raggio contenuto: è un documento, non una app */
}

/* =========================================================================
   BASE
   ========================================================================= */

body {
  font-family: var(--sv-body);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--sv-ink);
  background-color: var(--sv-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sv-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -0.018em;
  color: var(--sv-ink);
  text-wrap: balance;
}

h1 { font-size: var(--t-3xl); }
h2 { font-size: var(--t-2xl); }
h3 { font-size: var(--t-xl);  }
h4 { font-size: var(--t-lg);  }

p, li { max-width: var(--sv-measure); }

strong { font-weight: 600; }

a { color: var(--sv-cta); text-underline-offset: 0.18em; }
a:hover { color: var(--sv-cta-hi); }

/* Focus visibile: requisito di accessibilità, non un dettaglio */
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--sv-cta);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Rispetta chi ha ridotto le animazioni a livello di sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Numeri sempre tabulari: nelle cifre di una bolletta l'allineamento conta */
.sv-num, .sv-figure__value, .sv-bill__value {
  font-family: var(--sv-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}