/*
Theme Name:  Nectarblocks Child Theme
Version:     1.0.0
Template:    nectar-blocks-theme
Description: Child theme for Nectarblocks.
Theme URI:   https://nectarblocks.com
Author:      NectarBlocks
Author URI:  https://nectarblocks.com
License:     Custom license
License URI: https://nectarblocks.com/license
Text Domain: nectar-blocks-theme
*/

/*-------------------------------------------------------------------------*/
/* Note: The theme CSS files are loaded through the /css/ folder.
/*-------------------------------------------------------------------------*/


/*=========================================================================*/
/* OFFICINA DI MEDIAZIONE LINGUISTICA — design token                       */
/*                                                                         */
/* Fonte: brand kit della grafica (Officina.ai, 8 tavole, 29/07/2026).     */
/* Gli stessi valori sono anche in theme.json, cosi compaiono nei          */
/* controlli di NectarBlocks e del core. Qui stanno come custom property   */
/* per il CSS scritto a mano, le animazioni GSAP e l'area riservata.       */
/*=========================================================================*/

:root {

  /* --- Colori primari ------------------------------------------------- */
  --of-crema:    #FFFAF2;
  --of-wald:     #00303D;
  --of-eau:      #5CB0C2;
  --of-persian:  #005567;

  /* --- Colori secondari ----------------------------------------------- */
  --of-himmel:   #BFEBFE;
  --of-nebbia:   #E3E3E3;
  --of-brume:    #CEFFEF;
  --of-limonata: #ECFFCE;

  /* --- Ruoli semantici -------------------------------------------------
     ATTENZIONE, regola non negoziabile: Eau su Crema fa 2,4:1 e non passa
     WCAG AA. Eau e un colore di forma e di sfondo, mai di testo. Quando
     serve un accento azzurro leggibile si usa Persian (8,1:1 su Crema).
     Su fondo Eau si scrive in Wald (5,7:1).
     Rapporti verificati: Wald/Crema 13,6:1 · Persian/Crema 8,1:1
     Crema/Persian 8,1:1 · Wald/Eau 5,7:1 · Persian/Himmel 6,6:1
     --------------------------------------------------------------------- */
  --of-bg:            var(--of-crema);
  --of-text:          var(--of-wald);
  --of-accent:        var(--of-persian);   /* accento leggibile */
  --of-decor:         var(--of-eau);       /* solo forme e sfondi */
  --of-bg-dark:       var(--of-wald);
  --of-text-on-dark:  var(--of-crema);
  --of-text-on-eau:   var(--of-wald);

  /* --- Famiglie -------------------------------------------------------- */
  --of-font-display: Antonio, "Arial Narrow", sans-serif;
  --of-font-text:    "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --of-font-ui:      system-ui, -apple-system, "Segoe UI", Roboto,
                     "Helvetica Neue", Arial, sans-serif;

  /* --- Scala tipografica ------------------------------------------------
     Il brand board e disegnato su tavola 1920. Il contenitore del tema e
     1300px, quindi i valori sono riportati in scala (fattore 0,677):
     headline 115 -> 78px · subline 50 -> 34px · corpo 30 -> 20px.
     --------------------------------------------------------------------- */
  --of-size-label:   0.8125rem;                        /* 13px */
  --of-size-small:   1rem;                             /* 16px */
  --of-size-body:    clamp(1.125rem, 1.4vw, 1.25rem);  /* 18 - 20px */
  --of-size-subline: clamp(1.375rem, 2.4vw, 2.125rem); /* 22 - 34px */
  --of-size-h3:      clamp(1.5rem, 2.2vw, 2rem);       /* 24 - 32px */
  --of-size-h2:      clamp(2rem, 3.4vw, 3rem);         /* 32 - 48px */
  --of-size-display: clamp(2.75rem, 5.5vw, 4.875rem);  /* 44 - 78px */

  /* --- Pesi e interlinee ------------------------------------------------
     Correzione rispetto al brand board: il corpo era Cormorant Regular con
     interlinea 1,2, valori da manifesto. Cormorant e una serif da display
     con altezza-x piccola e aste sottili: a dimensione testo, su blocchi
     lunghi come le schede corso, va portato a peso Medium e interlinea 1,6.
     Sui titoli e sulle subline resta fedele al board.
     --------------------------------------------------------------------- */
  --of-weight-display: 700;
  --of-weight-subline: 600;
  --of-weight-body:    500;
  --of-lh-display:     1.2;
  --of-lh-subline:     1.3;
  --of-lh-body:        1.6;
  --of-tracking-label: 0.08em;

  /* --- Spaziature (scala 8px) ------------------------------------------ */
  --of-space-xs:  0.5rem;
  --of-space-s:   1rem;
  --of-space-m:   2rem;
  --of-space-l:   4rem;
  --of-space-xl:  6rem;
  --of-space-2xl: 9rem;
}


/*=========================================================================*/
/* Base tipografica                                                        */
/* Selettori di elemento (specificita 0,0,1) di proposito: qualunque cosa  */
/* impostata sul blocco nell'editor deve poter vincere su questa base.     */
/*=========================================================================*/

body {
  background-color: var(--of-bg);
  color: var(--of-text);
  font-family: var(--of-font-text);
  font-size: var(--of-size-body);
  font-weight: var(--of-weight-body);
  line-height: var(--of-lh-body);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--of-font-display);
  font-weight: var(--of-weight-display);
  line-height: var(--of-lh-display);
  text-transform: uppercase;
  color: var(--of-text);
}

h1 { font-size: var(--of-size-display); }
h2 { font-size: var(--of-size-h2); }
h3 { font-size: var(--of-size-h3); }

a { color: var(--of-accent); }

/* Subline del brand board: Cormorant SemiBold corsivo. */
.of-subline {
  font-family: var(--of-font-text);
  font-style: italic;
  font-weight: var(--of-weight-subline);
  font-size: var(--of-size-subline);
  line-height: var(--of-lh-subline);
  text-transform: none;
}

/* Etichetta piccola in Antonio, come le diciture del brand board
   ("PRIMARY LOGO", "SHAPES"): maiuscolo, spaziato. */
.of-label {
  font-family: var(--of-font-display);
  font-weight: var(--of-weight-display);
  font-size: var(--of-size-label);
  letter-spacing: var(--of-tracking-label);
  text-transform: uppercase;
}

/* Sezioni su fondo scuro. */
.of-dark {
  background-color: var(--of-bg-dark);
  color: var(--of-text-on-dark);
}
.of-dark h1, .of-dark h2, .of-dark h3,
.of-dark h4, .of-dark h5, .of-dark h6 {
  color: var(--of-text-on-dark);
}

/* Area riservata, form di candidatura e schermate di gestione: qui serve
   densita e leggibilita da interfaccia, non una serif da display. */
.of-ui,
.of-ui input,
.of-ui select,
.of-ui textarea,
.of-ui button {
  font-family: var(--of-font-ui);
  font-size: var(--of-size-small);
  font-weight: 400;
  line-height: 1.5;
}


/*=========================================================================*/
/* Accessibilita                                                           */
/*=========================================================================*/

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