/*
 Theme Name:   Astra Child
 Theme URI:    https://www.liquori.it/
 Description:  Child theme di Astra per liquori.it — design "Agrumeto" (unica fonte di verità, versionata).
 Author:       liquori.it
 Author URI:   https://www.liquori.it/
 Template:     astra
 Version:      1.9.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  astra-child
*/


/* ============================================================
   FONT SELF-HOSTED (FIX 6 compliance): prima caricati da Google Fonts
   ad ogni visita, prima di qualsiasi consenso (indirizzo IP inviato a
   Google senza base giuridica). File variabili — un solo file per stile
   copre tutti i pesi usati (400/600/700 normale, 400/600 corsivo per
   Fraunces; 400/500/700 per Karla), sottoinsieme "latin" (sufficiente per
   l'italiano, copre i caratteri accentati via Latin-1). */
@font-face{
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/fraunces-normal-variable.woff2') format('woff2');
}
@font-face{
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('assets/fonts/fraunces-italic-variable.woff2') format('woff2');
}
@font-face{
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/karla-variable.woff2') format('woff2');
}

/* ============================================================
   LIQUORI.IT — TEMA "AGRUMETO" PER ASTRA
   Palette: blu Mediterraneo + giallo limone
   ============================================================ */

:root{
  --lq-fondo:      #F6F3E8;
  --lq-blu:        #173F5F;
  --lq-blu-scuro:  #0F2C44;
  --lq-limone:     #F2C14E;
  --lq-arancio:    #E98A15;
  --lq-testo:      #1E2A33;
  --lq-muto:       #5D6C77;
  --lq-linea:      #D8D2BE;
  --lq-carta:      #FFFDF6;
  --lq-arancio-hover: #C86F06;

  /* Altezza dell'header sticky. E' una misura, non una scelta libera: ci si
     dimensionano sopra l'hero a schermo pieno, la sezione "Ultime dal
     laboratorio" e la cartina della homepage — quest'ultima da un altro foglio
     (plugins/liquori-mappa-regioni/assets/css/mappa.css), che legge questa
     variabile con un fallback. Prima erano quattro numeri copiati a mano.

     Questo valore e' il punto di partenza, non l'ultima parola: al
     caricamento, a font pronti e a ogni ridimensionamento,
     assets/js/ancore.js misura l'header vero e riscrive la variabile. Serve
     perche' l'altezza cambia per cose che dal CSS non si vedono — testo
     ingrandito nelle impostazioni di sistema, lo zoom per sito di Safari, il
     ripiego dei font prima che arrivino i nostri. Chi cambia l'header
     aggiorni comunque questo numero: e' quello che vale finche' il JS non ha
     ancora parlato, e l'unico se il JS non gira. */
  --lq-header-h: 99px;

  /* Quanto della sezione successiva si vede sotto l'hero: una banda di colore
     diverso che dice "qui sotto c'e' altro". 36px non e' un numero tondo a caso
     — e' il massimo che mostra solo il fondo crema e non il testo "Esplora per
     regione", che su telefono comincia a 40px dal bordo della sezione (su
     desktop a 76, perche' li' il contenuto e' centrato). Alzandolo oltre i 40
     spuntano le lettere, che era il difetto di partenza. */
  --lq-hero-hint: 36px;
}

/* Scroll: aggancio dolce (solo dove c'è scroll-snap-align, es. sezione mappa)
   + settle morbido per snap e link ancora. Non intercetta la rotellina. */
html{
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
}

body{
  background-color: var(--lq-fondo);
  color: var(--lq-testo);
}

h1, h2, h3, h4, .site-title{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  color: var(--lq-blu);
  letter-spacing: -0.01em;
}

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

.site-header, .ast-primary-header-bar{
  background-color: var(--lq-fondo) !important;
  border-bottom: 1px solid var(--lq-linea);
}
.site-title a{ color: var(--lq-blu) !important; }
.main-header-menu a{
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lq-muto) !important;
}
.main-header-menu a:hover,
.main-header-menu .current-menu-item > a{
  color: var(--lq-arancio) !important;
}

.ast-button, .wp-block-button__link, button[type="submit"],
input[type="submit"]{
  background-color: var(--lq-limone) !important;
  color: var(--lq-blu-scuro) !important;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0;
  border: none;
  padding: 15px 32px;
  transition: background 0.2s;
}
.ast-button:hover, .wp-block-button__link:hover{
  background-color: var(--lq-arancio) !important;
  color: #FFFDF6 !important;
}

/* ---- Card articolo (anteprima): markup unico condiviso da homepage
   ("Ultime dal laboratorio"), archivi/categorie, Novità e ricerca — vedi
   lq_render_article_card() in functions.php e template-parts/content-blog.php.
   Non usa più le classi/il markup di Astra (.ast-article-post, .post-content,
   .post-thumb, .cat-links…): sostituite per avere piena struttura identica
   su ogni item (niente più asimmetrie tra post) e uno stile indipendente
   dal CSS dinamico del customizer Astra con cui si è già scontrato più volte.
   WordPress aggiunge comunque .ast-article-post via post_class() (il filtro
   di Astra non sa che il template è cambiato): negli archivi resta attivo
   ".ast-blog-layout-4-grid .ast-article-post{width:33.33%; border-bottom:0;
   background-color:transparent}", pensato per il suo vecchio layout a
   colonne float — con la nostra griglia CSS Grid, quel 33.33% si applicava
   alla cella (già 1/3 della riga) invece che all'intera riga, restringendo
   la card a un terzo della cella. !important per vincere la specificità
   più alta di quel selettore composto. */
.lq-card{
  width: 100% !important;
  margin-bottom: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid var(--lq-linea) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.lq-card:hover{
  border-color: var(--lq-limone) !important;
  box-shadow: 0 14px 28px rgba(15, 44, 68, 0.14);
}
.lq-card__link{
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  /* !important: in home la card vive dentro .entry-content, dove Astra applica
     un underline ai link (specificità più alta di .lq-card__link da solo). */
  text-decoration: none !important;
}
.lq-card__media{
  position: relative;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--lq-linea);
  overflow: hidden;
}
.lq-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lq-card__chip{
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: var(--lq-blu-scuro);
  color: var(--lq-carta);
  font: 700 0.68rem Karla, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 6px 12px;
}
.lq-card__body{
  padding: 18px 22px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* Titolo e riassunto vogliono due classi, non una.
   In homepage la card vive dentro .entry-content, dove Astra applica
   `h2 { margin-top: 1.8em }` e `p { margin-bottom: 1.6em }` — (0,1,1) contro la
   sola classe (0,1,0), e per giunta dal CSS dinamico stampato inline nell'head,
   cioe' dopo questo foglio. Il `margin` scritto qui sotto sembrava applicato e
   non lo era: 34px di aria fra la foto e il titolo (57 totali, contro i 18 di
   padding voluti) e 9 sotto il riassunto, per scheda. Negli archivi, dove la
   card non sta dentro .entry-content, il difetto non si vedeva: era la
   homepage a essere diversa, non gli archivi.
   E' lo stesso difetto gia' trovato nella testata di sezione e nella cartina:
   dentro .entry-content, una spaziatura scritta con la sola classe BEM va
   verificata con getComputedStyle, non a occhio. */
.lq-card .lq-card__title{
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--lq-blu-scuro);
  line-height: 1.3;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lq-card .lq-card__excerpt{
  font: 400 0.92rem/1.6 Karla, sans-serif;
  color: var(--lq-muto);
  margin: 0 0 14px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lq-card__cta{
  font: 700 0.8rem Karla, sans-serif;
  color: var(--lq-arancio);
  margin-top: auto;
}

.site-footer, .ast-footer-copyright{
  background-color: var(--lq-blu-scuro) !important;
  color: #B9C6CE;
}
.site-footer a{ color: var(--lq-limone); }

/* ---- Blocchi riutilizzabili ---- */
.lq-ricetta{
  background: var(--lq-carta);
  border: 1px solid var(--lq-limone);
  box-shadow: 0 0 0 5px var(--lq-carta), 0 0 0 6px var(--lq-limone);
  padding: 30px 28px;
  margin: 40px auto;
  max-width: 420px;
}
.lq-ricetta .lq-tipo{
  text-align: center;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--lq-arancio);
  margin-bottom: 8px;
}
.lq-ricetta h3, .lq-ricetta h4{ text-align: center; margin-bottom: 4px; }
.lq-ricetta .lq-origine{
  text-align: center;
  font-size: 0.85rem;
  font-style: italic;
  font-family: 'Fraunces', Georgia, serif;
  color: var(--lq-muto);
  margin-bottom: 18px;
}
.lq-ricetta table{
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--lq-linea);
  border-bottom: 1px solid var(--lq-linea);
}
.lq-ricetta td{ padding: 8px 0; font-size: 0.9rem; border: none; }
.lq-ricetta td:first-child{ color: var(--lq-muto); }
.lq-ricetta td:last-child{ text-align: right; font-weight: 700; }

.lq-compra{
  background: var(--lq-blu);
  color: #F3EFE2;
  padding: 26px 28px;
  margin: 36px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.lq-compra p{ margin: 0; }
.lq-compra .lq-compra-titolo{
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  color: #FFFDF6;
}
.lq-compra .lq-compra-prezzo{ font-size: 0.9rem; color: var(--lq-limone); }
.lq-compra a.lq-btn{
  background: var(--lq-limone);
  color: var(--lq-blu-scuro);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 13px 26px;
  text-decoration: none;
  white-space: nowrap;
}
.lq-compra a.lq-btn:hover{ background: var(--lq-arancio); color: #FFFDF6; }

.lq-nota{
  border-left: 3px solid var(--lq-limone);
  background: var(--lq-carta);
  padding: 20px 24px;
  margin: 32px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--lq-blu);
}

.lq-avviso{
  font-size: 0.8rem;
  color: var(--lq-muto);
  border-top: 1px solid var(--lq-linea);
  padding-top: 14px;
  margin-top: 40px;
  font-style: italic;
}

@media (max-width: 600px){
  .lq-compra{ flex-direction: column; align-items: flex-start; }
  .lq-ricetta{ max-width: 100%; }
}

/* ---- Griglia articoli 3 colonne — condivisa da homepage (.lq-latest-grid),
   archivi/Novità/ricerca (.ast-row, generato dal loop di Astra). ---- */
.blog .ast-row, .archive .ast-row, .search-results .ast-row, .lq-latest-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 921px){
  .blog .ast-row, .archive .ast-row, .search-results .ast-row, .lq-latest-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  .blog .ast-row, .archive .ast-row, .search-results .ast-row, .lq-latest-grid{ grid-template-columns: 1fr; }
}

/* ============ HOMEPAGE AGRUMETO ============ */
.home .ast-single-entry-banner, .home .entry-title{ display:none; }
.home .site-main{ padding:0; }
.home.ast-separate-container .ast-article-single{ padding:0; background:transparent; border:none; margin:0; }
.home .entry-content{ margin-top:0; }
.home .entry-content > .lq-full{
  width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); max-width:100vw;
}
.lq-inner{ max-width:1140px; margin:0 auto; padding:0 24px; }

/* Hero */
/* L'hero occupa la schermata meno una banda: non deve mostrare l'inizio della
   sezione successiva — il testo "Esplora per regione" invitava a scorrere prima
   ancora di aver letto il titolo — ma nemmeno chiudere la pagina come se
   finisse li'. Restano quindi `--lq-hero-hint` pixel di fondo crema in fondo:
   solo colore, nessuna parola. Finche' l'hero e' cosi' spoglio e' quello che
   dice al lettore che sotto c'e' altro; quando avra' piu' contenuti la banda
   si potra' togliere alzando la variabile a 0.
   Il +24 non e' un ritocco a occhio: l'hero non parte dal bordo inferiore
   dell'header ma 24px piu' su, per via del `margin-top:-24px` su .home
   .site-main che elimina la striscia bianca di Astra. Senza quel termine
   restano 24px della sezione dopo, visibili in fondo.
   `svh` e non `vh`: su Safari iOS `vh` misura la finestra con la barra degli
   indirizzi nascosta, cioe' promette altezza che a schermo non c'e'. */
.lq-hero{
  background:var(--lq-blu); color:#F3EFE2; padding:80px 0 88px;
  min-height:calc(100vh - var(--lq-header-h, 99px) + 24px - var(--lq-hero-hint, 36px));
  min-height:calc(100svh - var(--lq-header-h, 99px) + 24px - var(--lq-hero-hint, 36px));
  display:flex; flex-direction:column; justify-content:center;
}
.lq-hero-grid{ display:grid; grid-template-columns:1fr; gap:56px; align-items:center; }
.lq-hero-grid > div{ max-width:760px; }
.lq-eyebrow{
  font-size:.75rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--lq-limone); margin-bottom:20px; display:flex; align-items:center; gap:14px;
}
.lq-eyebrow::before{ content:""; width:36px; height:1px; background:var(--lq-limone); }
.lq-hero h1{
  font-family:'Fraunces',Georgia,serif; font-weight:600; color:#FFFDF6;
  font-size:clamp(2.2rem,4.5vw,3.4rem); line-height:1.12; margin-bottom:22px; display:block;
}
.lq-hero h1 em{ font-style:italic; color:var(--lq-limone); }
.lq-hero-testo{ max-width:48ch; color:#B9C6CE; font-size:1.05rem; margin-bottom:34px; }
.lq-btn-hero{
  display:inline-block; background:var(--lq-limone); color:var(--lq-blu-scuro) !important;
  font-weight:700; font-size:.85rem; letter-spacing:.1em; text-transform:uppercase;
  padding:15px 32px; border:1px solid transparent; box-sizing:border-box;
  text-decoration:none; margin-right:12px;
}
.lq-btn-hero:hover{ background:var(--lq-arancio); color:#FFFDF6 !important; }
.lq-btn-ghost{
  display:inline-block; background:transparent; color:#F3EFE2 !important;
  border:1px solid rgba(247,248,243,.4); box-sizing:border-box; font-weight:700; font-size:.85rem;
  letter-spacing:.1em; text-transform:uppercase; padding:15px 32px; text-decoration:none;
}
.lq-btn-ghost:hover{ background:rgba(247,248,243,.12); }
/* Dal 07/08/2026 i bottoni dell'hero sono tre e stanno in un contenitore flex.
   Il `gap` sostituisce i margini fra bottoni — che erano sull'uno e non
   sull'altro — e toglie di mezzo gli spazi bianchi fra i tag <a>, che nel
   layout inline valevano 5px l'uno: con quelli la riga misurava 761px contro i
   760 del contenitore e il terzo bottone andava a capo da solo, spostato di
   12px. Se un giorno i testi crescono, `flex-wrap` li manda a capo allineati
   invece che sfalsati. */
.lq-hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.lq-hero-cta .lq-btn-hero{ margin-right:0; }
.lq-hero .lq-ricetta{ margin:0; justify-self:end; transform:rotate(1.2deg); }

/* Pilastri */
.lq-pilastri{ padding:64px 0 8px; }
.lq-pilastri-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.lq-pilastro{
  background:var(--lq-carta); border:1px solid var(--lq-linea); border-top:3px solid var(--lq-limone);
  padding:26px 24px; text-decoration:none; display:block; transition:transform .25s, border-color .25s;
}
.lq-pilastro:hover{ transform:translateY(-4px); border-color:var(--lq-arancio); }
.lq-pilastro .lq-num{
  font-family:'Fraunces',Georgia,serif; font-style:italic; color:var(--lq-arancio);
  font-size:.95rem; display:block; margin-bottom:8px;
}
.lq-pilastro h3{ font-size:1.2rem; margin:0 0 8px; }
.lq-pilastro p{ font-size:.9rem; color:var(--lq-muto); margin:0; }

/* Testata sezione.

   "Ultime dal laboratorio" si comporta come la sezione mappa: scorrendo, si
   aggancia sotto l'header e titolo + tre schede si inquadrano insieme in una
   schermata (07/08/2026, richiesta dell'utente).

   Il padding alto e' quello che fa il lavoro della centratura. Si sottraggono
   l'header sticky (la variabile) e 559 di contenuto sotto il padding stesso
   (77 di testata + 28 del suo margine + ~454 di schede): quel che avanza si
   divide in due, meta'
   sopra il titolo e meta' sotto le schede, ed ecco il blocco centrato nella
   schermata. Su uno schermo molto basso (e su qualunque telefono, dove le
   schede si impilano) l'avanzo e' negativo e il `max` riporta al minimo di 24.
   Il 534 delle schede dipende dal contenuto reale: se cambia, questa resta una
   centratura approssimata, non si rompe.
   `svh` e non `vh`: su Safari iOS `vh` misura la finestra con la barra degli
   indirizzi nascosta, cioe' promette altezza che a schermo non c'e'. */
/* Niente padding sotto: la distanza fra il filetto della testata e le schede la
   governa un numero solo, il `margin-bottom` di .lq-sezione-testa qui sotto.
   Sommandosi, i due facevano 64px di vuoto. */
.lq-sezione{
  padding:24px 0 0;
  scroll-snap-align:start;
  scroll-margin-top:var(--lq-header-h, 99px);
}
/* Solo in homepage la foto delle schede e' 3:2 invece di 4:3. Sono i 32px che
   mancavano per far entrare tutto il blocco in una schermata anche su un
   portatile basso (1280×700); negli archivi, dove la pagina scorre comunque,
   la proporzione resta quella piena. */
.home .lq-latest-grid .lq-card__media{
  aspect-ratio: 3 / 2;
}

/* Centratura e aggancio valgono solo dove le tre schede stanno su una riga e la
   sezione e' davvero una schermata: sotto i 921px la griglia va a due colonne
   (e a una sotto i 600), il blocco supera comunque lo schermo e non c'e' nessun
   avanzo da distribuire.

   Sotto quella soglia l'aggancio va tolto, non solo lasciato inutile: era
   l'ultimo punto di snap rimasto in pagina, e con uno swipe veloce dall'alto il
   browser proietta la fine dello slancio e ci atterra, **scavalcando tutta la
   cartina** — che su un telefono sta fra gli 800 e i 1985 pixel, cioe' proprio
   nel mezzo del volo. Chi voleva la mappa si ritrovava sugli articoli e doveva
   risalire (segnalato il 08/08/2026, stessa famiglia del difetto che aveva gia'
   fatto togliere l'aggancio della cartina).
   Su mobile non resta cosi' nessun aggancio automatico: l'unica cosa che
   sposta la pagina da sola e' l'inquadratura al tocco di una regione. */
@media (min-width: 922px){
  .lq-sezione{
    padding-top:max(24px, calc((100vh - var(--lq-header-h, 99px) - 559px) / 2));
    padding-top:max(24px, calc((100svh - var(--lq-header-h, 99px) - 559px) / 2));
  }
}
@media (max-width: 921px){
  .lq-sezione{ scroll-snap-align:none; }
}
/* Anche il footer e' un punto di aggancio, o il fondo pagina non lo e' di
   nessuno. Senza questa regola il fondo restava a ~100px oltre il punto di
   snap di #ultime, cioe' in piena zona "proximity": al primo gesto o clic
   dopo lo scroll il browser riagganciava la sezione e il footer spariva
   sotto il bordo, irraggiungibile a meno di cambiare zoom (segnalato il
   15/08/2026 da portatile; da script non si riproduce, perche' lo snap
   rivaluta solo i gesti veri).
   `end` e non `start`: un footer alto ~110px non puo' presentarsi in cima
   allo schermo; allineandone il bordo inferiore al fondo della finestra il
   punto di aggancio coincide col fine corsa, e lo snap tiene li' invece di
   tirare via. Sotto i 922px niente aggancio, come per le sezioni.

   ⚠️ `body.home` non e' un vezzo: i punti di aggancio esistono **solo in
   homepage**, perche' `.lq-sezione` e `#regioni` vivono nel contenuto della
   pagina 36 e non nei template. Scritta senza quel prefisso — com'era nella
   prima stesura, per meta' giornata — questa regola diventava l'**unico**
   punto di snap di ogni articolo e di ogni archivio: cadendo a fine corsa,
   avvicinandosi al fondo di un pezzo lungo tirava la lettura fino in fondo,
   dove prima non tirava niente. Una cura per la homepage pagata da tutto il
   resto del sito. */
body.home #colophon{ scroll-snap-align:end; }
@media (max-width: 921px){
  body.home #colophon{ scroll-snap-align:none; }
}
.lq-sezione-testa{
  position:relative;
  display:flex; align-items:flex-end; justify-content:space-between;
  padding-top:16px; padding-bottom:14px;
  border-bottom:3px solid var(--lq-blu-scuro);
  margin-bottom:28px;
}
.lq-sezione-testa::before{
  content:"";
  position:absolute; top:0; left:0;
  width:44px; height:4px;
  background:var(--lq-limone);
}
/* Due classi piu' l'elemento (0,2,1), non una sola: il `margin:0` scritto con
   `.lq-sezione-testa h2` vale (0,1,1) esattamente come `.entry-content h2 {
   margin-top: 1.8em }` di Astra, che pero' arriva dal CSS dinamico stampato
   inline nell'head — cioe' dopo questo foglio — e a parita' di specificita'
   vinceva lui. Erano 60px di aria fantasma sopra il titolo, il difetto gemello
   di quello gia' documentato per la cartina. */
.lq-sezione .lq-sezione-testa h2{
  font-family:'Fraunces',Georgia,serif; font-weight:700;
  font-size:2.1rem; color:var(--lq-blu-scuro); margin:0;
}
.lq-sezione-testa a{
  font-family:'Karla',sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--lq-arancio); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
  transition:color .15s ease, border-color .15s ease;
}
.lq-sezione-testa a:hover{
  color:var(--lq-arancio-hover);
  border-bottom-color:var(--lq-arancio-hover);
}

/* Regioni */
.lq-regioni{ background:var(--lq-blu-scuro); color:#F3EFE2; padding:60px 0; margin-top:48px; }
.lq-regioni-grid{ display:grid; grid-template-columns:1fr 1.4fr; gap:48px; align-items:center; }
.lq-regioni h2{ color:#FFFDF6; margin:0 0 12px; }
.lq-regioni p{ color:#B9C6CE; max-width:40ch; margin:0; }
.lq-regioni-lista{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
.lq-regione{
  background:var(--lq-blu); padding:16px; font-family:'Fraunces',Georgia,serif;
  font-size:1rem; color:#FFFDF6 !important; text-decoration:none;
  display:flex; justify-content:space-between; align-items:baseline; transition:background .2s;
}
.lq-regione:hover{ background:var(--lq-arancio); }
.lq-regione span{ font-family:'Karla',sans-serif; font-size:.7rem; color:var(--lq-limone); }

@media (max-width:900px){
  .lq-hero-grid, .lq-regioni-grid{ grid-template-columns:1fr; }
  /* Su telefono i tre bottoni sono impilati e a comandare l'altezza dell'hero e'
     il contenuto, non il `min-height`: con gli 80/88 del desktop, su un iPhone
     SE il terzo bottone finiva 11px sotto la piega. Su schermi alti non si nota,
     perche' li' domina il min-height e il contenuto e' comunque centrato. */
  .lq-hero{ padding:48px 0 56px; }
  .lq-hero .lq-ricetta{ justify-self:start; transform:none; }
  .lq-pilastri-grid{ grid-template-columns:1fr 1fr; }
  .lq-regioni-lista{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .lq-pilastri-grid{ grid-template-columns:1fr; }
  /* Sfoglia le ricette / Liquori per regione: larghezza a misura del proprio
     testo (inline-block) li rendeva di dimensioni diverse una volta impilati
     in colonna. Stessa larghezza (100% del contenitore) e stesso padding. */
  .lq-btn-hero, .lq-btn-ghost{
    display:block; width:100%;
    text-align:center; margin-right:0;
  }
  /* In colonna il `gap` del contenitore fa tutto: il margine di stacco qui
     sotto vale solo se i bottoni non stanno nel wrapper (pagine piu' vecchie). */
  .lq-btn-ghost{ margin-top:10px; }
  .lq-hero-cta{ flex-direction:column; }
  .lq-hero-cta .lq-btn-ghost{ margin-top:0; }
}

/* ---- Wordmark testuale in stile mockup ---- */
.site-title{ font-size:1.6rem; font-weight:700; margin:0; }
.site-title a::after{ content:""; }
.site-description{
  font-family:'Fraunces',Georgia,serif; font-style:italic;
  color:var(--lq-arancio); font-size:.85rem; margin:2px 0 0;
}
.site-branding{ padding:18px 0; }

/* ============================================================
   HEADER — Proposta B "La Bottega"
   Override in coda: barra blu piena, bordo limone, marchio Agrumeto,
   menu a destra azzurrino con hover limone.
   ============================================================ */
.site-header,
.ast-primary-header-bar,
.main-header-bar,
.ast-primary-header-bar .main-header-bar {
	background-color: var(--lq-blu) !important;
}
.site-header {
	position: sticky;
	top: 0;
	z-index: 99;
	border-bottom: 4px solid var(--lq-limone) !important;
	box-shadow: none;
}

/* Marchio "Agrumeto": monogramma SVG (limone in sezione nell'esagono) + wordmark.
   Il markup è iniettato via il filtro get_custom_logo nel functions.php del child. */
.ast-site-identity .site-title,
.ast-site-identity .site-description {
	display: none !important;
}
.lq-brand {
	display: flex;
	align-items: center;
	gap: 18px;
	text-decoration: none;
	padding: 10px 0;
}
.lq-mono {
	width: 58px;
	height: 58px;
	flex: none;
	display: block;
}
.lq-brandtext {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}
.lq-wordmark {
	font-family: 'Fraunces', Georgia, serif;
	font-weight: 700;
	font-size: 2.15rem;
	color: var(--lq-carta);
}
.lq-dot {
	color: var(--lq-limone);
}
.lq-tag {
	font-family: 'Fraunces', Georgia, serif;
	font-style: italic;
	font-size: 0.95rem;
	color: #8FA5B8;
	margin-top: 4px;
}

/* Menu principale (proposta B) */
.main-header-menu a,
.ast-builder-menu .menu-link {
	font-family: 'Karla', sans-serif;
	font-weight: 700;
	font-size: 0.88rem;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: #B9C6CE !important;
	border-radius: 2px;
	transition: color 0.2s ease, background-color 0.2s ease;
	/* Astra applica padding:0 1em (relativo al font-size del link): con un
	   font più grande cresce troppo e 8 voci non stanno più su una riga.
	   Lo fissiamo più stretto qui per non perdere spazio inutile. */
	padding: 0 0.6em !important;
}
.main-header-menu li:hover > a,
.ast-builder-menu .menu-item:hover > .menu-link {
	color: var(--lq-blu-scuro) !important;
	background-color: var(--lq-limone) !important;
}
.main-header-menu .current-menu-item > a,
.ast-builder-menu .current-menu-item > .menu-link {
	color: var(--lq-limone) !important;
	background-color: transparent !important;
}

/* Header piu' basso (~15%: da 117px a 99px), su tutti gli schermi.
   Provato prima al 20% (95px), poi riportato al 15% su richiesta dell'utente:
   il 20% e' rimasto in `git diff` per un'ora, se serve rifare il confronto.
   Perche': l'header e' sticky, quindi quei pixel non si scorrono via — sono
   tolti a ogni schermata, per sempre. Su un iPhone SE 117px erano il 18% dello
   schermo, e la cartina in homepage si dimensiona su quel che avanza.
   Nato mobile il 07/08/2026 e steso al desktop lo stesso giorno, con gli stessi
   valori: la barra e' la stessa, e due misure diverse avrebbero voluto dire due
   conti da tenere allineati invece di uno.
   Il conto: 4 di bordo limone + 28 di padding del branding + 16 di padding del
   marchio + 50 di contenuto = 98 (99 misurati). Il monogramma da solo non
   basterebbe: accanto ha il wordmark, che a 2.15rem occupa 55px e resterebbe lui
   a dettare l'altezza — vanno scalati insieme.
   Chi tocca questi valori deve aggiornare `--lq-header-h` in cima al file: e'
   la stessa misura, e da li' la leggono l'hero, "Ultime dal laboratorio" e la
   cartina della homepage. */

/* Due classi, non una: Astra impone `padding: 1em 0` con
   `.ast-logo-title-inline .ast-site-identity` (0,2,0) e con la sola
   `.site-branding` non si scalfisce — infatti la regola a 18px piu' sopra in
   questo file e' inerte da sempre, era 17px comunque. */
.ast-site-identity.site-branding {
	padding: 14px 0;
}
.lq-brand {
	padding: 8px 0;
	gap: 15px;
}
.lq-mono {
	width: 50px;
	height: 50px;
}
.lq-wordmark {
	font-size: 1.8rem;
}
.lq-tag {
	font-size: 0.85rem;
	margin-top: 2px;
}

/* Hamburger mobile sul fondo blu: giallo limone, stesso accento di hover/voce
   attiva nel menu. L'SVG di Astra imposta un fill blu proprio che non eredita
   currentColor dal color della regola sopra: va sovrascritto esplicitamente. */
.ast-mobile-menu-buttons-minimal,
.ast-button-wrap .menu-toggle {
	color: var(--lq-limone) !important;
}
.ast-button-wrap .menu-toggle svg,
.ast-mobile-menu-buttons-minimal svg {
	fill: var(--lq-limone) !important;
}

/* ============================================================
   Ritocchi: striscia bianca sopra il contenuto + footer
   ============================================================ */

/* Home full-bleed: elimina il margine bianco di Astra (60px) sopra/sotto
   il contenuto, così hero e footer combaciano senza strisce bianche. */
.home #primary {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
/* Chiude un residuo di ~24px (margine collassato di Astra) così l'hero è a
   filo con l'header. L'header è opaco/sticky: un minimo overlap resta nascosto. */
.home .site-main {
	margin-top: -24px;
}
/* Elimina un residuo di ~1-2px di bianco tra header e contenuto: è il nodo di
   testo (a-capo/indentazione) tra #content e .ast-container nel markup di
   WordPress, reso dal browser come una riga vuota. font-size:0 sul wrapper
   è la tecnica standard per questo bug; sicuro qui perché tutto il tema usa
   dimensioni in rem/px assolute, non "em" relativo a questo contenitore. */
#content {
	font-size: 0;
}

/* Footer più armonioso: banda blu con respiro, testo Karla, link limone.

   L'altezza: 213px per tre righe di testo erano sproporzionati rispetto al
   resto del sito (il 27% di uno schermo da 800). Quasi tutto veniva da un
   padding contato due volte — nel markup di Astra la classe
   `ast-footer-copyright` sta sia sul contenitore sia sul suo figlio, e questa
   regola li colpiva entrambi: 26+26 sopra e sotto, per due livelli, 104px di
   solo padding. Il padding resta al livello esterno e si azzera all'interno. */
.site-footer .ast-footer-copyright {
	font-family: 'Karla', sans-serif;
	font-size: 0.85rem;
	line-height: 1.5;
	letter-spacing: 0.02em;
	padding: 16px;
	color: #b9c6ce;
}
.site-footer .ast-footer-copyright .ast-footer-copyright {
	padding: 0;
}
.site-footer .site-below-footer-wrap {
	padding: 10px 0;
}
.site-footer .ast-footer-copyright a {
	color: var(--lq-limone);
	text-decoration: none;
	transition: color 0.15s ease;
}
.site-footer .ast-footer-copyright a:hover {
	color: var(--lq-arancio);
}
.lq-foot-sep {
	margin: 0 12px;
	opacity: 0.4;
}
.lq-foot-brand {
	color: #fffdf6;
}

/* Riga legale footer: "Gestisci consenso cookie" + disclaimer 18+ (FT-01) */
.lq-footer-legal {
	margin-top: 6px;
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
	align-items: baseline;
	font-family: 'Karla', sans-serif;
	font-size: 0.78rem;
	color: #b9c6ce;
}
.lq-footer-legal .lq-manage-consent {
	color: var(--lq-limone);
	text-decoration: none;
	cursor: pointer;
}
.lq-footer-legal .lq-manage-consent:hover {
	color: var(--lq-arancio);
}
.lq-footer-legal .lq-footer-sep {
	opacity: 0.4;
}
.lq-footer-age {
	opacity: 0.85;
}

/* ============================================================
   LEGGIBILITÀ — testo più grande e più arioso
   (homepage + template generale: articoli, archivi, pagine)
   ------------------------------------------------------------
   3 bozze pronte, una sola attiva alla volta.
   Per cambiare bozza: commenta il blocco attivo e scommenta
   l'altro (i selettori sono identici, cambiano solo i valori).
   ============================================================ */

/* ---- BOZZA B "Ampia" (ATTIVA) ---- */
body{ font-size: 17px; line-height: 1.75; }
.entry-content, article .entry-content{ font-size: 1.08rem; line-height: 1.8; }
.entry-content p{ margin-bottom: 1.6em; }
.entry-content h2{ margin-top: 1.8em; }
.lq-hero-testo{ font-size: 1.15rem; line-height: 1.7; }
.lq-pilastro p{ font-size: 1rem; line-height: 1.55; }
.lq-pilastro{ padding: 30px 26px; }
.lq-sezione-testa h2{ font-size: 2.1rem; }
.entry-meta, .entry-meta a{ font-size: 0.85rem; }
.lq-ricetta td{ font-size: 1rem; padding: 10px 0; }
.lq-nota{ font-size: 1.15rem; }
.lq-avviso{ font-size: 0.85rem; }

/* Header archivi/ricerca (categoria, tassonomia, tag, risultati ricerca):
   Astra usa un box con padding 51px e H1 fino a 2.85rem — troppo ingombrante
   per una riga di titolo + una di breadcrumb/descrizione. Selettore generico
   (non scoped a body.archive) perché la pagina ricerca usa una regola dinamica
   di Astra diversa (".search .ast-container ... h1") con lo stesso problema.
   Niente margin-top negativo: il box parte già a filo con l'header (zero gap
   naturale da compensare), e un valore fisso in px si rompe ogni volta che
   l'header cambia altezza — è già successo, il titolo finiva nascosto sotto
   l'header sticky. Il padding uniforme qui sotto basta a dare respiro. */
.ast-archive-description{
	padding: 22px 32px !important;
	margin-bottom: 18px !important;
}
.ast-archive-description .ast-archive-title,
.ast-archive-description .ast-archive-title *{
	font-size: 1.5rem !important;
	margin-bottom: 4px !important;
}
.ast-archive-description p{
	font-size: 0.95rem;
	color: var(--lq-muto);
	margin: 0;
}
.ast-archive-description .ast-breadcrumbs-wrapper{
	font-size: 0.8rem;
}
.ast-archive-description .trail-items{
	margin: 0;
}

/* ---- BOZZA A "Comoda" (più contenuta — scommenta al posto di B) ----
body{ font-size: 16.5px; line-height: 1.7; }
.entry-content, article .entry-content{ font-size: 1.03rem; line-height: 1.75; }
.entry-content p{ margin-bottom: 1.45em; }
.lq-hero-testo{ font-size: 1.1rem; line-height: 1.65; }
.lq-pilastro p{ font-size: 0.95rem; line-height: 1.5; }
.lq-pilastro{ padding: 28px 25px; }
.lq-sezione-testa h2{ font-size: 1.9rem; }
.entry-meta, .entry-meta a{ font-size: 0.82rem; }
.lq-ricetta td{ font-size: 0.95rem; padding: 9px 0; }
.lq-nota{ font-size: 1.1rem; }
.lq-avviso{ font-size: 0.82rem; }
*/

/* ---- BOZZA C "Massima leggibilità" (la più grande — scommenta al posto di B) ----
body{ font-size: 18px; line-height: 1.8; }
.entry-content, article .entry-content{ font-size: 1.15rem; line-height: 1.85; }
.entry-content p{ margin-bottom: 1.7em; }
.entry-content h2{ margin-top: 2em; }
.lq-hero-testo{ font-size: 1.25rem; line-height: 1.75; }
.lq-pilastro p{ font-size: 1.05rem; line-height: 1.6; }
.lq-pilastro{ padding: 34px 28px; }
.lq-sezione-testa h2{ font-size: 2.1rem; }
.entry-meta, .entry-meta a{ font-size: 0.9rem; }
.lq-ricetta td{ font-size: 1.05rem; padding: 11px 0; }
.lq-nota{ font-size: 1.2rem; }
.lq-avviso{ font-size: 0.9rem; }
*/

/* ============================================================
   Casella di ricerca — sezioni-elenco (archivi + Novità)
   ============================================================ */
/* Niente margin:auto/padding laterale: centravano il box in uno spazio più
   stretto del contenitore, spostando la ricerca a destra rispetto a titolo
   e griglia articoli sotto. Parte a filo con loro (bordo sinistro comune). */
.lq-search {
	max-width: 1140px;
	margin: 0 0 24px;
}
/* Qui stavano due regole con margine negativo, tolte il 25/08/2026.
   Servivano perche' su "Novità" (is_home) testata e ricerca venivano iniettate
   da `loop_start`, cioe' come primi figli di .ast-row: occupavano una colonna
   della griglia al posto di un articolo, e andavano fatte spannare sulla riga
   e poi ripescate con -14px/-8px per compensare il gap:32px.
   Ora escono da `astra_primary_content_top`, che e' lo stesso aggancio usato
   da tutti gli altri archivi: stanno fuori da .ast-row come sulle categorie,
   e non c'e' piu' niente da compensare. Se un giorno riappaiono dentro la
   griglia, la causa e' l'aggancio, non il CSS. */
.lq-search__form {
	display: flex;
	max-width: 520px;
	position: relative;
}
.lq-search__input {
	flex: 1;
	min-width: 0;
	height: 46px !important;
	box-sizing: border-box;
	border: 1px solid var(--lq-linea);
	border-right: none;
	background: var(--lq-carta);
	padding: 0 16px;
	font: 400 0.95rem Karla, sans-serif;
	color: var(--lq-testo);
	border-radius: 0;
}
.lq-search__input:focus {
	outline: 2px solid var(--lq-limone);
	outline-offset: -1px;
}
/* height/box-sizing/padding espliciti: una regola generica di Astra
   (button[type="submit"], più specifica di .lq-search__btn) impone
   padding: 15px 32px, rendendo il bottone più alto della casella (46px
   contro 40px) e disallineato. Fissiamo l'altezza sui due elementi e
   forziamo il padding con !important per vincere la specificità. */
.lq-search__btn {
	height: 46px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--lq-limone);
	color: var(--lq-blu-scuro);
	border: none;
	font: 700 0.78rem Karla, sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 0 22px !important;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lq-search__btn:hover {
	background: var(--lq-arancio);
	color: #fffdf6;
}

/* Ricerca dinamica: dropdown risultati sotto il form (live-search.js) */
.lq-search__results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	margin-top: -1px;
	background: var(--lq-carta);
	border: 1px solid var(--lq-linea);
	max-height: 340px;
	overflow-y: auto;
	z-index: 30;
	box-shadow: 0 10px 24px rgba(15, 44, 68, 0.14);
}
.lq-search__item {
	display: block;
	padding: 11px 16px;
	font: 400 0.9rem/1.4 Karla, sans-serif;
	color: var(--lq-testo);
	text-decoration: none;
	border-bottom: 1px solid var(--lq-linea);
}
.lq-search__item:hover,
.lq-search__item:focus {
	background: var(--lq-fondo);
	color: var(--lq-arancio);
}
.lq-search__empty {
	margin: 0;
	padding: 12px 16px;
	font: 400 0.85rem Karla, sans-serif;
	font-style: italic;
	color: var(--lq-muto);
}
.lq-search__seeall {
	display: block;
	width: 100%;
	text-align: left;
	background: var(--lq-limone);
	color: var(--lq-blu-scuro);
	border: none;
	font: 700 0.78rem Karla, sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 12px 16px;
	cursor: pointer;
	transition: background 0.15s ease;
}
.lq-search__seeall:hover {
	background: var(--lq-arancio);
	color: #fffdf6;
}

/* ============================================================
   RICERCA ISTANTANEA — barra "trova" (Novità, Ricette e tecnica)
   ============================================================
   Una riga sola. La barra delle schede tiene un pannello laterale e tre gruppi
   sempre aperti perché lì ci sono quattro tassonomie e settanta elementi:
   quell'ingombro se lo ripaga. Qui sono due categorie e otto argomenti, e lo
   stesso ingombro sarebbe tutto costo — un riquadro che spinge sotto la piega
   la griglia che si è venuti a leggere. Stesso linguaggio, un quinto
   dell'altezza.

   La barra sta in #primary, FUORI da .entry-content: la competizione di
   specificità con il CSS dinamico di Astra (inline nell'<head>, quindi dopo
   questo foglio) non scatta qui. Scatta invece sui controlli di modulo, che
   Astra veste di suo — per quelli si scrive con due classi. */

.lq-trova {
	max-width: 1140px;
	margin: 0 0 22px;
}
.lq-trova .lq-trova__barra {
	--lq-trova-h: 38px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

/* I comandi si scoprono col JavaScript. `display:contents` li fa partecipare
   alla riga come se il contenitore non ci fosse; la regola con [hidden] deve
   stare dopo e valere di più, o `display:contents` la batterebbe e i menu
   comparirebbero anche senza JS. */
.lq-trova .lq-trova__comandi {
	display: contents;
}
.lq-trova .lq-trova__comandi[hidden] {
	display: none;
}

/* ---- Il campo ---- */
/* Un riquadro solo, con la lente dentro che fa da submit: senza JavaScript
   manda il modulo a /?s= come qualunque bottone. Il tasto "Cerca" giallo che
   stava qui era il pezzo più grosso della barra ed era l'unico che gridasse. */
.lq-trova .lq-trova__cerca {
	flex: 1 1 260px;
	max-width: 420px;
	display: flex;
	align-items: center;
	gap: 6px;
	height: var(--lq-trova-h);
	padding: 0 10px;
	margin: 0;
	border: 1px solid var(--lq-linea);
	border-radius: 5px;
	background: #fffdf6;
}
.lq-trova .lq-trova__cerca:focus-within {
	border-color: var(--lq-arancio);
	box-shadow: 0 0 0 2px rgba(233, 138, 21, 0.16);
}
/* ⚠️ `padding: 0` non è pleonastico: Astra dichiara
   `input[type=search]{padding:12px 16px}`, che senza questa riga vince senza
   contendere niente e porta il campo fuori dall'altezza della barra. Un valore
   che non si scrive è un valore che decide qualcun altro. */
.lq-trova .lq-trova__campo {
	flex: 1;
	min-width: 0;
	height: 100% !important;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	outline: 0;
	background: none;
	box-shadow: none !important;
	font-family: 'Karla', sans-serif;
	font-size: 0.9rem;
	color: inherit;
}
.lq-trova .lq-trova__campo::-webkit-search-cancel-button {
	display: none;
}
.lq-trova .lq-trova__invia,
.lq-trova .lq-trova__svuota {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	height: auto;
	padding: 0 2px !important;
	border: 0;
	background: none;
	color: var(--lq-muto);
	cursor: pointer;
	line-height: 1;
}
.lq-trova .lq-trova__svuota {
	font-size: 17px;
}
.lq-trova .lq-trova__invia:hover,
.lq-trova .lq-trova__svuota:hover {
	background: none;
	color: var(--lq-arancio);
}
.lq-trova .lq-trova__svuota[hidden] {
	display: none;
}

/* ---- I due menu ---- */
/* <details>, non un pannello fatto a mano: apertura, chiusura, Tab, Invio ed
   Escape li sa già fare il browser. */
.lq-trova .lq-trova__menu {
	position: relative;
	flex: none;
}
.lq-trova .lq-trova__tasto {
	display: flex;
	align-items: center;
	gap: 6px;
	/* Senza, il bordo si somma all'altezza e il tasto misura 40 dove il campo
	   e il menu Ordina ne misurano 38: un pixel di scalino sulla stessa riga. */
	box-sizing: border-box;
	height: var(--lq-trova-h);
	padding: 0 11px;
	border: 1px solid var(--lq-linea);
	border-radius: 5px;
	background: #fffdf6;
	font-family: 'Karla', sans-serif;
	font-size: 0.85rem;
	white-space: nowrap;
	cursor: pointer;
	list-style: none;
}
.lq-trova .lq-trova__tasto::-webkit-details-marker {
	display: none;
}
/* Il triangolino: senza, il riquadro sembra un'etichetta e non un comando. */
.lq-trova .lq-trova__tasto::after {
	content: '';
	width: 0;
	height: 0;
	border: 4px solid transparent;
	border-top-color: var(--lq-muto);
	transform: translateY(2px);
}
.lq-trova .lq-trova__menu[open] .lq-trova__tasto::after {
	transform: translateY(-2px) rotate(180deg);
}
.lq-trova .lq-trova__tasto:hover {
	border-color: var(--lq-arancio);
	color: var(--lq-arancio);
}
.lq-trova .lq-trova__tasto:focus-visible {
	outline: 2px solid var(--lq-arancio);
	outline-offset: 1px;
}
/* Arancio quando il menu sta cambiando i risultati: è uno stato che resta
   nascosto dentro un menu chiuso, quindi il tasto deve dirlo da fermo. */
.lq-trova .lq-trova__menu--attivo .lq-trova__tasto {
	border-color: var(--lq-arancio);
	color: var(--lq-arancio);
	font-weight: 700;
}
.lq-trova .lq-trova__conta {
	display: inline-block;
	min-width: 16px;
	padding: 0 4px;
	border-radius: 8px;
	background: var(--lq-arancio);
	color: #fffdf6;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 16px;
	text-align: center;
}
.lq-trova .lq-trova__conta[hidden] {
	display: none;
}

/* Il pannello galleggia: se spingesse la riga, aprirlo sposterebbe la griglia
   sotto, cioè la cosa che si sta guardando. */
.lq-trova .lq-trova__elenco {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	margin-top: 4px;
	min-width: 210px;
	max-width: calc(100vw - 40px);
	padding: 8px 10px;
	background: #fffdf6;
	border: 1px solid var(--lq-linea);
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(23, 63, 95, 0.16);
}
.lq-trova .lq-trova__titolino {
	margin: 6px 0 4px;
	font-family: 'Karla', sans-serif;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--lq-muto);
}
.lq-trova .lq-trova__titolino:first-child {
	margin-top: 0;
}
.lq-trova .lq-trova__voce {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 4px 0;
	font-family: 'Karla', sans-serif;
	font-size: 0.87rem;
	line-height: 1.25;
	white-space: nowrap;
	cursor: pointer;
}
.lq-trova .lq-trova__casella {
	width: 14px;
	height: 14px;
	margin: 0;
	flex: none;
	accent-color: var(--lq-arancio);
	cursor: pointer;
}
.lq-trova .lq-trova__nome {
	flex: 1;
}
.lq-trova .lq-trova__n {
	font-size: 0.73rem;
	color: var(--lq-muto);
	font-variant-numeric: tabular-nums;
}

/* ---- Ordina, azzera, conteggio ---- */
/* L'etichetta del menu Ordina. Sta sulla riga, non sopra: la barra e' alta
   38px e un'etichetta sovrapposta la farebbe crescere di venti. */
.lq-trova .lq-trova__ordina {
	flex: none;
	margin: 0 -2px 0 4px;
	font-family: 'Karla', sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lq-muto);
	white-space: nowrap;
}

/* ⚠️ `width: auto` non e' pleonastico, come il `padding: 0` sul campo: Astra
   dichiara `select { width: 100% }`, e senza questa riga il menu Ordina esce
   largo 1140px e spinge su righe proprie tutto quello che gli sta dopo. La
   barra veniva alta 132px invece di 38. Un valore che non si scrive e' un
   valore che decide qualcun altro. */
.lq-trova .lq-trova__select {
	flex: none;
	width: auto;
	max-width: 190px;
	height: var(--lq-trova-h);
	padding: 0 8px;
	margin: 0;
	font-family: 'Karla', sans-serif;
	font-size: 0.85rem;
	border: 1px solid var(--lq-linea);
	border-radius: 5px;
	background: #fffdf6;
	color: inherit;
}
.lq-trova .lq-trova__azzera {
	flex: none;
	width: auto;
	height: var(--lq-trova-h);
	padding: 0 11px !important;
	font-family: 'Karla', sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	border: 1px solid var(--lq-linea);
	border-radius: 5px;
	background: transparent;
	color: var(--lq-muto);
	cursor: pointer;
}
.lq-trova .lq-trova__azzera:hover {
	background: var(--lq-limone);
	color: inherit;
}
.lq-trova .lq-trova__azzera[hidden] {
	display: none;
}
/* Il conteggio non è un comando e non ha bordo, ma sta sulla stessa riga:
   senza un'altezza propria appoggerebbe il suo fondo al fondo degli altri,
   cioè col testo più in basso di tutto. Spinto a destra, chiude la riga. */
.lq-trova .lq-trova__esito {
	height: var(--lq-trova-h);
	display: flex;
	align-items: center;
	margin: 0 0 0 auto;
	font-family: 'Karla', sans-serif;
	font-size: 0.83rem;
	color: var(--lq-muto);
	font-variant-numeric: tabular-nums;
}
/* La ricerca nel testo passa dal server e può metterci qualche secondo: il
   campo si smorza per dire che sta lavorando, invece di sembrare inerte. */
.lq-trova--attende .lq-trova__campo {
	opacity: 0.6;
}
.lq-trova--attende .lq-trova__esito {
	font-style: italic;
}

/* ---- Stati vuoti ---- */
.lq-trova .lq-trova__vuoto {
	margin: 16px 0 0;
	font-family: 'Karla', sans-serif;
	font-size: 0.92rem;
	color: var(--lq-muto);
}
.lq-trova .lq-trova__vuoto[hidden] {
	display: none;
}
.lq-trova .lq-trova__uscita {
	font-weight: 700;
	text-decoration: underline;
}

/* ⚠️ Assicurazione, non decorazione. Il filtro nasconde le card con la
   proprietà `hidden`, che vale solo finché nessuno dichiara un `display` su
   quell'elemento. Oggi nessuna regola di Astra lo fa su .ast-article-post, ma
   il giorno che una sua versione ci mettesse `display:flex` la ricerca
   mostrerebbe tutto sempre — senza un errore da nessuna parte. */
.lq-card[hidden] {
	display: none !important;
}

@media (max-width: 600px) {
	.lq-trova .lq-trova__cerca {
		flex: 1 1 100%;
		max-width: none;
	}
	/* Su iOS un campo sotto i 16px fa ingrandire la pagina appena lo si tocca,
	   e da lì non torna indietro senza un gesto. */
	.lq-trova .lq-trova__campo {
		font-size: 16px;
	}
	.lq-trova .lq-trova__esito {
		margin-left: 0;
	}
}

/* ============================================================
   TEMPLATE ARTICOLO — hero, corpo, tabelle, steps/card, FAQ, prev/next.
   Scoped a .single-post (post type "post" in singola): non tocca
   pagine, archivi, home. L'header di default di Astra è soppresso
   via functions.php (astra_single_layout_one_banner_visibility) e
   sostituito dall'hero qui sotto.
   ============================================================ */

/* ---- Hero ---- */
/* Il margine sotto la banda blu è quello che stacca il titolo dal primo
   paragrafo, e va messo QUI, sull'hero.
   La strada che sembra naturale — padding-top sul contenitore del contenuto —
   fa l'opposto di quel che si crede: l'hero esce da `astra_single_header_after`,
   cioè da dentro `#primary`, quindi sta anch'esso dentro `#content .ast-container`.
   Un padding lì spinge giù tutta la banda blu, scollandola dall'header, e fra
   blu e testo non cambia niente. Provato in produzione il 10/08/2026.
   In px e non in em: `#content{font-size:0}` (riga ~744) azzera qualunque
   misura in em scritta dentro #content — è anche il motivo per cui il margine
   di Astra su #primary (4em) qui vale 0 e il testo partiva incollato al blu. */
.lq-article-hero{
	background: var(--lq-blu-scuro);
	margin-bottom: 44px;
}
@media (max-width: 768px){
	.lq-article-hero{
		margin-bottom: 30px;
	}
}
.lq-article-hero__inner{
	max-width: 1160px;
	margin: 0 auto;
	padding: 36px 32px 40px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 32px;
	align-items: center;
}
.lq-article-hero__inner--solo{
	grid-template-columns: 1fr;
	max-width: 800px;
}
.lq-article-hero__kicker{
	font: 700 0.66rem Karla, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--lq-limone);
	margin: 0 0 10px;
}
.lq-article-hero__kicker a{
	color: var(--lq-limone);
	text-decoration: none;
}
.lq-article-hero__kicker a:hover{
	text-decoration: underline;
}
.lq-article-hero__title{
	font: 600 2.3rem/1.12 'Fraunces', Georgia, serif;
	color: #fff;
	margin: 0;
	text-wrap: pretty;
}
.lq-article-hero__byline{
	font: 400 0.85rem Karla, sans-serif;
	color: rgba(255,255,255,.6);
	margin: 12px 0 0;
}
.lq-article-hero__byline a{
	color: rgba(255,255,255,.85);
}
.lq-article-hero__side{
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lq-article-hero__quote{
	background: rgba(255,255,255,.07);
	border: 1px solid rgba(255,255,255,.18);
	padding: 16px 18px;
}
.lq-article-hero__quote-label{
	font: 700 0.6rem Karla, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lq-limone);
	margin: 0 0 6px;
}
.lq-article-hero__quote-text{
	font: 400 0.88rem/1.55 Karla, sans-serif;
	color: rgba(255,255,255,.92);
	margin: 0;
}
.lq-article-hero__stats{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255,255,255,.18);
	border: 1px solid rgba(255,255,255,.18);
}
.lq-article-hero__stat{
	background: var(--lq-blu-scuro);
	padding: 10px 12px;
}
.lq-article-hero__stat-value{
	font: 600 1.05rem 'Fraunces', Georgia, serif;
	color: var(--lq-limone);
	margin: 0;
}
.lq-article-hero__stat-label{
	font: 700 0.56rem Karla, sans-serif;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.6);
	margin: 2px 0 0;
}
@media (max-width: 480px){
	.lq-article-hero__stats{ grid-template-columns: repeat(2, 1fr); }
}

/* ---- Corpo articolo ----
   Il vincolo di larghezza reale è su .ast-container (750px, da
   --ast-narrow-container-width), non su .entry-content: è il div che
   avvolge #primary. Scoping a "#content .ast-container" per non
   allargare anche l'.ast-container dell'header (stessa classe, div
   diverso, non annidato in #content — verificato sul mirror). */
.single-post #content .ast-container{
	max-width: 1000px !important;
}
.single-post .entry-content,
.single-post .comments-area{
	padding-left: 56px;
	padding-right: 56px;
}
.single-post .entry-content{
	font-size: 0.98rem;
	line-height: 1.62;
}
@media (max-width: 768px){
	.single-post .entry-content,
	.single-post .comments-area{
		padding-left: 24px;
		padding-right: 24px;
	}
}
.single-post .entry-content p{
	margin-bottom: 18px;
	color: var(--lq-testo);
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}
.single-post .entry-content h2{
	font: 600 1.45rem/1.2 'Fraunces', Georgia, serif;
	color: var(--lq-blu);
	margin: 28px 0 10px;
}
.single-post .entry-content a{
	color: var(--lq-arancio);
}
.single-post .entry-content a:hover{
	color: var(--lq-arancio-hover);
}

/* ---- Tabelle (tutte, nessun markup extra richiesto) ----
   display:block + overflow-x:auto sulla tabella stessa invece di un
   wrapper: evita di richiedere un <div> aggiuntivo agli autori, e
   scrolla in orizzontale invece di spezzarsi/allargare la pagina
   quando le colonne non ci stanno (es. su mobile). */
.entry-content table{
	display: block;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
	border-collapse: collapse;
	font: 400 0.9rem Karla, sans-serif;
	margin: 0 0 14px;
}
/* Basato su <th> (non sulla posizione): funziona sia con tabelle scritte
   a mano (<tr><th>...</th></tr> in cima, senza thead/tbody) sia col
   blocco Tabella di Gutenberg con l'opzione "Intestazione" attiva
   (<thead><tr><th>...) — senza rischiare di colorare due righe quando
   il blocco genera sia <thead> che <tbody>. */
.entry-content table th{
	background: var(--lq-blu);
	color: #fff;
	font-weight: 700;
	text-align: left;
	padding: 9px 14px;
}
.entry-content table td{
	text-align: left;
	padding: 9px 14px;
	border-bottom: 1px solid var(--lq-linea);
}
.entry-content table tr:has(td):nth-of-type(even){
	background: var(--lq-fondo);
}

/* ---- Passi numerati (nuovi articoli: <div class="lq-steps"><p><b>N. Titolo</b> testo</p>…</div>) ---- */
.lq-steps{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 10px 24px;
	margin: 0 0 4px;
}
.lq-steps > p{
	font: 400 0.92rem/1.55 Karla, sans-serif;
	margin: 0;
	border: 1px solid var(--lq-linea);
	padding: 10px 14px;
}
.lq-steps > p > b:first-child,
.lq-steps > p > strong:first-child{
	color: var(--lq-arancio);
}

/* ---- Box problema/soluzione (nuovi articoli: <ul class="lq-cards"><li><b>Titolo</b>: testo</li>…</ul>) ---- */
ul.lq-cards{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 10px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}
.lq-cards li{
	border: 1px solid var(--lq-linea);
	padding: 12px 14px;
	font: 400 0.88rem/1.55 Karla, sans-serif;
}
.lq-cards li b:first-child,
.lq-cards li strong:first-child{
	display: block;
	font-size: 0.88rem;
	color: var(--lq-blu);
	margin-bottom: 4px;
}

/* ---- Testo+immagine affiancati (nuovi articoli: <div class="lq-media-text">…<figure>…</figure></div>) ---- */
.lq-media-text{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
	align-items: start;
	margin: 0 0 14px;
}
.lq-media-text figure{
	margin: 0;
}
.lq-media-text img{
	width: 100%;
	display: block;
	border: 1px solid var(--lq-linea);
}
.lq-media-text figcaption{
	font: italic 400 0.78rem 'Fraunces', Georgia, serif;
	color: var(--lq-muto);
	margin-top: 6px;
}

/* ---- FAQ (trasformata da functions.php, tutti gli articoli) ---- */
.lq-faq-list{
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 14px;
}
.lq-faq-item{
	background: var(--lq-fondo);
	padding: 12px 16px;
}
.lq-faq-item p{
	font: 400 0.92rem/1.55 Karla, sans-serif;
	margin: 0;
}

/* ---- Nota legale (convenzione: <p><i>…</i></p> con l'intero paragrafo in corsivo —
   <em> è l'equivalente prodotto dal pulsante Corsivo dell'editor visivo) ----
   NON :last-of-type: wpautop avvolge in <p> anche gli script JSON-LD
   finali, che diventerebbero "l'ultimo p" al posto della nota legale. */
.single-post .entry-content > p:has(> i:only-child),
.single-post .entry-content > p:has(> em:only-child){
	font: italic 400 0.82rem/1.6 'Fraunces', Georgia, serif;
	color: var(--lq-muto);
	border-top: 1px solid var(--lq-linea);
	padding-top: 14px;
	margin-top: 24px;
}

/* ---- Prev/Next (markup Astra core .navigation.post-navigation, solo restyle) ---- */
.single-post .post-navigation{
	margin: 26px 0 34px;
}
.single-post .post-navigation .nav-links{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	padding-left: 0;
	padding-right: 0;
}
/* Rete di sicurezza: sotto i 600px due colonne da 280px non ci stanno
   (280*2+gap), auto-fit dovrebbe già impilare da solo ma su schermi
   molto stretti forza comunque una singola colonna. */
@media (max-width: 600px){
	.single-post .post-navigation .nav-links{
		grid-template-columns: 1fr;
	}
}
.single-post .post-navigation .nav-previous,
.single-post .post-navigation .nav-next{
	border: 1px solid var(--lq-linea);
	padding: 14px 16px;
	width: 100% !important;
	margin-bottom: 0 !important;
}
.single-post .post-navigation .nav-next{
	text-align: right;
}
/* Astra imposta .nav-links a{max-width:80%;width:100%} e padding
   left/right:20px per il vecchio layout inline-flex — dentro la nostra
   griglia questo lasciava metà colonna vuota. */
.single-post .post-navigation a{
	max-width: none !important;
	width: 100% !important;
}
.single-post .post-navigation .nav-previous a{
	padding-right: 0;
}
.single-post .post-navigation .nav-next a{
	padding-left: 0;
}
.single-post .post-navigation .ast-post-nav{
	font: 700 0.6rem Karla, sans-serif;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lq-muto);
}
.single-post .post-navigation .ast-post-nav svg{
	display: none;
}
.single-post .post-navigation p{
	font: 600 0.95rem/1.3 'Fraunces', Georgia, serif;
	color: var(--lq-blu);
	margin: 4px 0 0;
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: clip !important;
}
.single-post .post-navigation a{
	text-decoration: none;
	display: block;
}