/*
Theme Name: Brickollector
Theme URI: http://localhost:10016/
Description: Child theme di Twenty Twenty-Five per lo store e-commerce Brickollector. Base chiara con accenti nei colori azzurro, rosso e ambra del brand, font Lato (testo e titoli) e IBM Plex Mono (micro-label e codici). Prodotti sincronizzati dal gestionale via WooCommerce REST.
Author: Brickollector
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.0
Text Domain: legodreamduck
*/

/* Extra CSS oltre a theme.json (micro-ritocchi UI). Il grosso dello stile vive in theme.json. */

:root {
  --ldd-shadow: 0 1px 2px rgba(24,24,27,.06), 0 8px 24px rgba(24,24,27,.06);
  /* Ritmo verticale + gutter condivisi (usati dalle sezioni redesign). */
  --ldd-sec-y: clamp(2.5rem, 5vw, 4rem);
  --ldd-gutter: clamp(18px, 4vw, 32px);
  /* Scala larghezze del redesign catalogo desktop. Il gutter della scala larga
     è più contenuto di --ldd-gutter: a 1840px un 4vw varrebbe ~76px e il logo
     dell'header non si allineerebbe più alla fascia titolo del catalogo. */
  --ldd-gutter-x: clamp(20px, 2.4vw, 56px);
  --ldd-w-chrome:    1840px;
  --ldd-w-immersive: 1840px;
  /* --ldd-w-page e --ldd-w-form: la scala si decide una volta sola; restano
     dichiarati anche se non ancora consumati, per non ridefinirla altrove. */
  --ldd-w-page:      1440px;
  --ldd-w-form:      1240px;

  /* ---------- Palette Brickollector ----------
     I --bk-* sono l'alfabeto del sito: ogni CSS del tema pesca da qui.
     I valori veri stanno in theme.json; questi sono alias leggibili. */
  --bk-blue:       var(--wp--preset--color--brand-blue,        #1c92cf);
  --bk-blue-600:   var(--wp--preset--color--brand-blue-strong, #1775ab);
  --bk-blue-700:   var(--wp--preset--color--brand-blue-deep,   #12587f);
  --bk-blue-100:   #cfe7f5;
  --bk-blue-050:   #eaf5fb;
  /* Tinta degli avvisi "In arrivo" (riquadro della scheda prodotto e avviso di
     carrello/checkout): una coppia sola, qui. Gli stessi valori compaiono in hex
     nelle email e nella pillola admin (inc/preorder-order.php), dove il CSS del
     tema non arriva: se cambiano, cambiano anche li'. */
  --bk-preorder-bg:   #eaf2f7;
  --bk-preorder-line: #c3d8e5;
  --bk-red:        var(--wp--preset--color--brand-red,   #e12221);
  --bk-red-700:    #b81a19;
  --bk-red-100:    #f8cfcf;
  --bk-red-050:    #fdecec;
  --bk-amber:      var(--wp--preset--color--brand-amber, #f7bd2d);
  /* --bk-amber-700 come testo sul fondo tinto tone-amber (rgba(239,106,36,.14))
     fa 4.60:1: passa la soglia 4.5:1, usato in account.css al posto di un hex
     inventato che stava li' prima. */
  --bk-amber-700:  #8a6410;
  /* Fondo tinto ambra, gemello di --bk-green-050 / --bk-blue-050 / --bk-red-050:
     mancava, e le superfici "lotto" (inc/bundle.php) sono le prime a usarlo.
     --bk-amber-700 come testo qui sopra fa 4.86:1, sopra la soglia AA. */
  --bk-amber-100:  #f2dfa8;
  --bk-amber-050:  #fdf3d9;
  --bk-green:      var(--wp--preset--color--state-green, #1a7f4b);
  /* --bk-green come TESTO su --bk-green-050 fa 4.47:1 (sotto soglia 4.5):
     stessa falla gia' nota per --bk-red su fondo tinto. --bk-green-700
     e' la variante testo, il pallino/icona resta col verde pieno. */
  --bk-green-700:  #146b3d;
  --bk-green-100:  #c3e6d4;
  --bk-green-050:  #e7f5ee;
  /* Testo/icona su fondo pieno (--bk-green, --bk-blue-600...): stesso bianco
     del preset "base" di theme.json (#ffffff), qui alias-ato come gli altri
     --bk-* invece di spargere #fff nei fogli. Bianco su --bk-green fa 5.0:1
     (sopra soglia AA per testo normale). */
  --bk-on-fill:    var(--wp--preset--color--base, #fff);
  --bk-band:       var(--wp--preset--color--band,      #e4f1f9);
  --bk-band-line:  var(--wp--preset--color--band-line, #bcdcef);
  --bk-band-ink:   var(--wp--preset--color--band-ink,  #0f3d57);

  /* filo tricolore del logo: rosso, ambra, azzurro nelle proporzioni del marchio */
  --bk-thread: linear-gradient(90deg,
      var(--bk-red)   0 18%,
      var(--bk-amber) 18% 42%,
      var(--bk-blue)  42% 100%);

  /* focus: UN solo sistema in tutto il sito (prima erano tre) */
  --bk-focus: 3px solid var(--bk-blue-600);

  /* ---------- Tipografia: UNICA fonte di verità ----------
     Due famiglie e una scala chiusa. Ogni `font-size` e ogni `font-family`
     del tema pesca da qui: nessun px e nessun nome di font scritti a mano nei
     CSS di pagina. Lo fa rispettare `node tools/css/check-type.mjs`, che
     fallisce se un CSS reintroduce un valore fuori scala.

     --bk-font-sans copre testo E titoli (i titoli sono Lato 900, non un font
     display separato): non esiste un --bk-font-disp, e aggiungerlo significa
     rimettere in piedi il problema che questo blocco ha chiuso.
     --bk-font-mono vale solo per micro-label maiuscole spaziate e per i codici
     (SKU, numero set, numero ordine): mai per i prezzi, che sono Lato 900. */
  --bk-font-sans: var(--wp--preset--font-family--lato, "Lato", sans-serif);
  --bk-font-mono: var(--wp--preset--font-family--ibm-plex-mono, "IBM Plex Mono", ui-monospace, monospace);

  --bk-fs-micro: 10.5px;  /* badge stato, pillole, contatore carrello */
  --bk-fs-xs:    11.5px;  /* meta card, eyebrow, sottotitoli minori */
  --bk-fs-sm:    12.5px;  /* label filtri, breadcrumb, topbar, note */
  --bk-fs-base:  13.5px;  /* testo corrente, titolo card prodotto, chip */
  --bk-fs-md:    14.5px;  /* nav, link, testo largo */
  --bk-fs-lg:    15px;    /* bottoni, testo introduttivo corto */
  --bk-fs-xl:    16.5px;  /* h3 e titoli di scheda */
  --bk-fs-2xl:   17px;    /* lede, prezzo card catalogo */
  --bk-fs-3xl:   20px;    /* prezzo card home, numeri statistica */
  /* Prezzo protagonista della scheda prodotto: fluido, e sempre un gradino
     sotto --bk-fs-h1 — a dimensione fissa su mobile superava il titolo. */
  --bk-fs-price: clamp(24px, 2.4vw, 30px);
  --bk-fs-h3:    16.5px;
  --bk-fs-h2:    clamp(25px, 3vw, 32px);
  --bk-fs-h1:    clamp(26px, 3.2vw, 33px);
  /* Display: SOLO l'h1 dell'hero della home. Il mockup si ferma a 47px, ma
     sulla home un titolo così piccolo non regge la pagina: 68px al massimo. */
  --bk-fs-display: clamp(32px, 5.6vw, 68px);
  /* Gradino sotto, per l'h1 delle landing con hero a tutta fascia (Gestionale):
     lì --bk-fs-h1 sparisce dentro l'area colorata, e --bk-fs-display manderebbe
     il titolo su quattro righe. Non si usa sulle pagine normali. */
  --bk-fs-display-sm: clamp(30px, 4.2vw, 52px);
}

/* ==========================================================================
   GLOBAL RHYTHM — pagine interne (non home)
   Twenty Twenty-Five inietta inline `margin-top` sul <main> e `padding-top`
   sul group contenuto (entrambi spacing-60 = 4rem): 128px morti sopra ogni
   H1 di catalogo/account/prodotto ecc. Compattiamo a ~52px: più denso,
   ancora arioso. Home esclusa (body.home) — l'hero parte sotto l'header.
   ========================================================================== */
body:not(.home) .wp-site-blocks > main {
  margin-top: 1.5rem !important;
}
body:not(.home) .wp-site-blocks > main > .wp-block-group.is-layout-constrained {
  padding-top: 1.75rem !important;
}

/* Prezzi e numeri in Lato (font di corpo). tabular-nums mantiene le cifre
   incolonnate anche in proporzionale, evitando micro-salti tra prezzi. */
.woocommerce-Price-amount,
.price,
.ldd-num {
  font-family: var(--bk-font-sans);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* Bottoni: leggera profondità "mattoncino" */
.wp-element-button,
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button {
  border-radius: 8px;
  font-weight: 700;
  transition: transform .06s ease, filter .15s ease;
}
.wp-element-button:active,
.woocommerce a.button:active,
.woocommerce button.button:active { transform: translateY(1px); }

/* Card prodotto */
ul.products li.product,
.wc-block-grid__product {
  border: 1px solid var(--wp--preset--color--border, #e4e4e7);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  box-shadow: var(--ldd-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
ul.products li.product:hover,
.wc-block-grid__product:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(24,24,27,.12); }

/* Prezzo assente = set non in vendita (regola in inc/price.php). Stesso segnale
   visivo della card catalogo (.price-na), qui per le superfici WooCommerce.
   --red non esiste in questo scope globale (e' locale a .ldd-catalog in
   catalog.css): --bk-red e' l'alias globale allo stesso colore. */
.ldd-price-na{ display:inline-block; font-size:var(--bk-fs-base); font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--bk-red); }