/*
Theme Name: Lavì Cosmetics
Theme URI: https://www.lavicosmetics.it/
Author: A9 Solution
Author URI: https://miosito.com
Description: Tema su misura per Lavì Cosmetics, grossista di prodotti professionali per parrucchieri a Milano e in Monza-Brianza. Fork del tema di partenza A9 Base: nessun tema genitore richiesto.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lavi-cosmetics
*/

/* ==========================================================================
   INDICE

   1. FONDAMENTA ............. variabili, reset, layout di sezione, utility,
                               tipografia. Vale ovunque.
   2. COMPONENTI CONDIVISI ... blocchi usati da piu' di una pagina.
   3. STRUTTURA .............. header, fascia titolo, footer: stanno in
                               header.php e footer.php, quindi su tutte le pagine.
   4. PAGINE ................. blocchi usati da una pagina sola.
        4.1 Home ............. front-page.php
        4.2 Chi siamo ........ page-chi-siamo.php
        4.3 Prodotti ......... page-prodotti.php
        4.4 Corsi e viaggi ... page-corsi-e-viaggi.php
        4.5 Contatti ......... page-contatti.php
        4.6 Blog ............. index.php, single.php, page.php, search.php, 404.php
   5. RESPONSIVE ............. tutti i punti di rottura, dal piu' largo al piu'
                               stretto, in fondo perche' devono poter vincere.

   Perche' non e' diviso solo per pagina: meta' dei blocchi (schede, pulsanti,
   griglie, due colonne) e' usata da tre o quattro template. Duplicarli sotto
   ogni pagina significherebbe correggere lo stesso bug quattro volte. Qui una
   cosa sta in "PAGINE" solo se la usa davvero una pagina sola; per le altre,
   il commento dice chi le usa.
   ========================================================================== */


/* ==========================================================================
   1. FONDAMENTA
   ========================================================================== */

/* ! 1.1 Variabili */

:root{
    --avorio:#F5F0E8;
    --seppia:#23201C;
    --alloro:#2E4034;
    --cuoio:#A5683A;
    --sabbia:#D9CFC0;
    --sabbia-l:#EFE9DE;
    --alloro-l:#E4E9E4;
    --dark:#1B1915;
    --grey:#6E675E;
    --light:#E7E0D4;
    --white:#FFFFFF;

    --serif:'Fraunces', Georgia, serif;
    --sans:'Mulish', -apple-system, "Helvetica Neue", Arial, sans-serif;

    /* Il respiro delle sezioni scala con la finestra: niente salti bruschi fra breakpoint. */
    --sez-y: clamp(56px, 7vw, 84px);
    --sez-x: clamp(20px, 5vw, 80px);
}

/* ! 1.2 Reset */

*,
*::before,
*::after{
    box-sizing: border-box;
}

body,
h1, h2, h3, h4, h5, h6,
p, ol, ul, figure{
    margin: 0;
    padding: 0;
}

ol, ul{
    list-style: none;
}

img{
    max-width: 100%;
    height: auto;
}

/* ! 1.3 Base e layout di sezione */

html{
    /* Il menu punta a delle ancore e l'header e' sticky: senza questo la sezione
       di destinazione finisce nascosta sotto la barra. */
    scroll-padding-top: 100px;
    scroll-behavior: smooth;
}

body{
    background: var(--avorio);
    font-family: var(--sans);
    font-size: 16px;
    color: var(--seppia);
    -webkit-font-smoothing: antialiased;

    /* Rete di sicurezza: nessun elemento deve poter allargare la pagina in orizzontale. */
    overflow-x: hidden;
}

h1, h2, h3{
    font-family: var(--serif);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.5px;
}

a{
    color: var(--cuoio);
}

.container{
    max-width: 1200px;
    margin: 0 auto;
}

.section{
    padding: var(--sez-y) var(--sez-x);
}

.section.tight{
    padding-top: calc(var(--sez-y) * .82);
    padding-bottom: calc(var(--sez-y) * .82);
}

/* Sezione che prosegue quella sopra senza stacco: due blocchi che parlano
   della stessa cosa non devono sembrare due capitoli diversi. Sostituisce i
   padding scritti a mano caso per caso. Oggi la usa solo Contatti. */
.section.no-top{ padding-top: 0; }

.site-main > .section{
    /* Il contenuto delle sezioni resta centrato entro la stessa griglia del footer. */
    padding-left: max(var(--sez-x), calc((100% - 1200px) / 2));
    padding-right: max(var(--sez-x), calc((100% - 1200px) / 2));
}

.bg-avorio{ background: var(--avorio); }
.bg-sabbia{ background: var(--sabbia-l); }
.bg-dark{ background: var(--alloro); }

/* ! 1.4 Utility */

.center{ text-align: center; }
.stack{ display: flex; flex-direction: column; }

.narrow{ max-width: 880px; margin-left: auto; margin-right: auto; }
.narrow-sm{ max-width: 760px; margin-left: auto; margin-right: auto; }

.mt-s{ margin-top: 18px; }
.mt-m{ margin-top: 28px; }
.mb-s{ margin-bottom: 18px; }
.mb-m{ margin-bottom: 28px; }

/* Testo leggibile dagli screen reader ma invisibile a schermo.
   Non usare display:none: quello lo nasconde anche a loro. */
.screen-reader-text{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Il salto al contenuto diventa visibile solo quando lo raggiungi da tastiera. */
.skip-link:focus{
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 18px;
    clip-path: none;
    background: var(--white);
    border-radius: 8px;
    font-weight: 700;
}

/* ! 1.5 Tipografia */

.display{
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(34px, 4.4vw, 52px);
    line-height: 1.06;
    letter-spacing: -1px;
}

.h2{ font-size: clamp(26px, 3vw, 34px); }
.h3{ font-size: 20px; font-weight: 600; }

.lead{ font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--grey); }
.body{ font-size: 17px; line-height: 1.62; color: var(--grey); }
.small{ font-size: 14px; line-height: 1.5; }
.microcopy{ font-size: 14px; color: var(--grey); }

.eyebrow{
    display: inline-block;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: var(--cuoio);
}

.eyebrow.on-dark{ color: var(--sabbia); }

.on-dark .display,
.on-dark h1,
.on-dark h2,
.on-dark h3{ color: var(--avorio); }

.on-dark .lead,
.on-dark .body,
.on-dark .microcopy{ color: var(--light); }

/* I pulsanti hanno gia' il loro colore di testo: esclusi, o questa regola
   vincerebbe per specificita' e li sbiadirebbe. */
.on-dark a:not(.btn){ color: var(--sabbia); }

/* Intestazione di sezione: eyebrow + titolo, centrata. */
.head{
    max-width: 820px;
    margin: 0 auto 44px;
    text-align: center;
}

.head-tight{ margin-bottom: 22px; }
.head .eyebrow{ display: block; margin-bottom: 14px; }


/* ==========================================================================
   2. COMPONENTI CONDIVISI
   ========================================================================== */

/* ! 2.1 Pulsanti
   L'ordine conta: le varianti hanno la stessa specificita' della base,
   quindi devono restare dopo .btn. */

.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    border-radius: 8px;
    padding: 16px 30px;
    text-decoration: none;
    cursor: pointer;
    border: none;
}

.btn-sm{ padding: 12px 22px; font-size: 15px; }
.btn-block{ display: flex; width: 100%; }

.btn-primary{ background: var(--alloro); color: var(--avorio); }
.btn-cuoio{ background: var(--cuoio); color: var(--white); }

.btn-outline{
    background: transparent;
    color: var(--cuoio);
    border: 1.5px solid var(--cuoio);
    font-weight: 600;
}

.btn-row{ display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Pallino separatore, usato negli elenchi di Home e Chi siamo. */
.dot{
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--cuoio);
    flex: 0 0 auto;
}

/* ! 2.2 Griglie */

.grid{ display: grid; gap: 24px; }

/* Tre colonne esatte, non auto-fit: con minmax() la riga ne accoglierebbe
   quattro sui monitor larghi, e cinque schede diventerebbero 4+1. */
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } /* solo Prodotti */

/* Stessa griglia visiva di .grid-3, ma in flex: quando le schede non riempiono
   l'ultima riga, questa resta centrata sotto le altre (piramide rovesciata).
   In CSS Grid l'ultima riga si accosterebbe sempre a sinistra.
   Il calcolo del flex-basis toglie la quota di gap che compete a ogni colonna:
   con 3 colonne e 24px di gap sono 16px a testa. */
.cards{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.cards > *{
    flex: 0 1 calc(33.333% - 16px);
    min-width: 0;
}

/* ! 2.3 Schede
   .card sta in Home, Prodotti, Corsi e Contatti. */

.card{
    background: var(--white);
    border: 1px solid var(--sabbia);
    border-radius: 14px;
    padding: 30px;
    box-shadow: 0 10px 24px rgba(35, 32, 28, .05);
    text-align: center;
}

.card h3{ margin-top: 14px; padding: 5px; }
.card .body{ margin-top: 10px; font-size: 15.5px; }

/* text-align non sposta l'icona: e' un blocco a larghezza fissa, e senza questi
   margini automatici resterebbe a sinistra mentre il testo e' centrato. */
.card .icon-box,
.card .num{
    margin-left: auto;
    margin-right: auto;
}

.icon-box{
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--alloro-l);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-box svg{
    width: 22px;
    height: 22px;
    color: var(--alloro);
    flex-shrink: 0;
}

/* Riquadro dei valori: piu' leggero della .card, senza bordo ne' ombra,
   perche' qui contano le parole e non la gerarchia. Chi siamo e Corsi. */
.vcard{
    background: var(--sabbia-l);
    border-radius: 14px;
    padding: 30px;
}

.vcard .body{ margin-top: 10px; font-size: 15.5px; }

/* ! 2.4 Due colonne e foto */

.two-col{
    display: grid;
    grid-template-columns: 1fr minmax(0, 520px);
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
}

.two-col.form-col{
    grid-template-columns: 1fr minmax(0, 470px);
    align-items: start;
}

/* Variante con la colonna media piu' stretta: la foto fa da corredo al testo,
   non gli fa concorrenza. Oggi solo Prodotti. */
.two-col.media-sm{ grid-template-columns: 1fr minmax(0, 380px); }

/* Segnaposto per le foto non ancora caricate. */
.photo-slot{
    background: var(--sabbia);
    border-radius: 16px;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #8c8175;
    font-weight: 500;
    font-size: 14px;
    padding: 24px;
}

/* Il contenitore decide la forma, l'immagine si adatta.
   aspect-ratio tiene lo spazio riservato a proporzione fissa su ogni schermo,
   e object-fit:cover riempie quello spazio ritagliando ma senza mai deformare.
   Vale anche per una foto sostituita dal pannello, che avra' misure diverse.
   Oggi la usa solo Chi siamo, ma vale per qualsiasi foto reale. */
.photo{
    margin: 0;
    aspect-ratio: 4 / 3;
    border-radius: 16px;
    overflow: hidden;
    background: var(--sabbia);
}

.photo-img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ! 2.5 Sigillo e loghi dei brand
   Il sigillo sta in Home e Prodotti; i riquadri logo li stampa
   lavi_logo_brand() in functions.php, usata da entrambe. */

.seal{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--alloro);
    color: var(--white);
    border-radius: 100px;
    padding: 11px 20px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
}

.seal .d{
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

/* Riquadro del logo a misura fissa: loghi di proporzioni diverse restano
   incolonnati fra loro invece di far ballare l'altezza delle schede. */
.brand-logo{
    width: 170px;
    height: 56px;
    background: var(--sabbia-l);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    margin-bottom: 18px;
}

/* contain, non cover: un logo non va mai ritagliato. */
.brand-logo-img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Per i loghi chiari serve un fondo scuro, o sparirebbero sul bianco. */
.brand-logo-chiaro{ background: var(--alloro); }

/* Misura grande per la home, dove i loghi sono il contenuto della sezione
   e non un dettaglio dentro una scheda. Deve restare dopo .brand-logo:
   stessa specificita', vince chi viene dopo. */
.brand-logo-lg{
    width: 240px;
    height: 96px;
    max-width: 100%;
    padding: 16px 22px;
    margin-bottom: 0;
    font-size: 17px;
}

/* Senza il file del logo non viene stampato nulla: nessun ripiego testuale da
   stilare (vedi lavi_logo_brand in functions.php). */

/* ! 2.6 Barra fiducia
   Home e Chi siamo. */

.trust{
    background: var(--sabbia-l);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: clamp(16px, 3vw, 34px);
    padding: 26px var(--sez-x);
    flex-wrap: wrap;
}

.trust .item{
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 15px;
}

.trust .sep{
    width: 1px;
    height: 30px;
    background: var(--sabbia);
}

/* ! 2.7 Card del form
   Home, Corsi e Contatti. Le varianti stanno nelle rispettive pagine e
   devono restare dopo questo blocco. */

.form-card{
    background: var(--avorio);
    border-radius: 16px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-card .body{ font-size: 15.5px; }

/* La card resta chiara anche dentro una sezione scura: senza questo reset
   eredita i colori "on-dark" e diventa avorio su avorio, cioe' invisibile. */
.on-dark .form-card h3{ color: var(--seppia); }
.on-dark .form-card .body,
.on-dark .form-card .microcopy{ color: var(--grey); }
.on-dark .form-card a:not(.btn){ color: var(--cuoio); }

/* Campi dei plugin form (Contact Form 7, WPForms...) allineati al resto. */
.form-card input[type="text"],
.form-card input[type="email"],
.form-card input[type="tel"],
.form-card textarea{
    width: 100%;
    max-width: 100%;
    background: var(--white);
    border: 1px solid var(--sabbia);
    border-radius: 8px;
    padding: 13px 14px;
    font-family: var(--sans);
    /* 16px non e' estetica: sotto questa soglia iOS Safari zooma da solo
       sul campo al focus e l'utente si ritrova la pagina fuori scala. */
    font-size: 16px;
    color: var(--seppia);
}

.form-card textarea{ min-height: 110px; }

.form-card input[type="submit"],
.form-card button[type="submit"]{
    width: 100%;
    background: var(--alloro);
    color: var(--avorio);
    font-family: var(--sans);
    font-weight: 700;
    font-size: 16px;
    border: none;
    border-radius: 8px;
    padding: 16px 30px;
    cursor: pointer;
}

/* ! 2.8 Reveal allo scroll
   Dissolvenza piu' una risalita di 20px, mezzo secondo, una volta sola.
   Si deve notare l'ordine in cui arrivano le cose, non l'animazione.
   Il markup lo mette ogni pagina; il motore e' in js/main.js. */

@keyframes lavi-reveal{
    from{ opacity: 0; transform: translateY(20px); }
    to{ opacity: 1; transform: none; }
}

/* La hero entra al caricamento, non allo scroll, e lo fa in animazione CSS:
   non dipende dal JS e non ritarda il primo disegno piu' del necessario.
   Qui di solito sta l'elemento LCP, quello che Google cronometra. */
.reveal-onload > *{
    animation: lavi-reveal .5s ease-out both;
}

.reveal-onload > *:nth-child(1){ animation-delay: 0s; }
.reveal-onload > *:nth-child(2){ animation-delay: .07s; }
.reveal-onload > *:nth-child(3){ animation-delay: .14s; }
.reveal-onload > *:nth-child(4){ animation-delay: .21s; }
.reveal-onload > *:nth-child(5){ animation-delay: .28s; }

/* Lo stato nascosto esiste solo se il JS e' vivo: la classe .js-reveal la mette
   uno script inline in <head>. Senza JS, o se lo script va in errore, la pagina
   resta tutta visibile invece di sparire. */
.js-reveal .reveal,
.js-reveal .reveal-photo{
    opacity: 0;
}

.js-reveal .reveal{
    transform: translateY(20px);
    transition: opacity .45s ease-out, transform .45s ease-out;
}

.js-reveal .reveal.is-visible,
.js-reveal .reveal-group.is-visible .reveal{
    opacity: 1;
    transform: none;
}

/* Cascata. Il ritardo sta sul figlio ma l'osservatore guarda il contenitore:
   cosi' la sequenza parte tutta insieme, invece di dipendere da quando ogni
   singola scheda entra nello schermo. */
.js-reveal .reveal-group.is-visible .reveal:nth-child(1){ transition-delay: 0ms; }
.js-reveal .reveal-group.is-visible .reveal:nth-child(2){ transition-delay: 70ms; }
.js-reveal .reveal-group.is-visible .reveal:nth-child(3){ transition-delay: 140ms; }
.js-reveal .reveal-group.is-visible .reveal:nth-child(4){ transition-delay: 210ms; }
.js-reveal .reveal-group.is-visible .reveal:nth-child(5){ transition-delay: 280ms; }
.js-reveal .reveal-group.is-visible .reveal:nth-child(6){ transition-delay: 350ms; }

/* Foto: stessa dissolvenza piu' un rientro di scala appena percettibile,
   l'effetto "si svela". Piu' lento perche' la superficie e' grande. */
.js-reveal .reveal-photo{
    transform: scale(1.04);
    transition: opacity .6s ease-out, transform .6s ease-out;
}

.js-reveal .reveal-photo.is-visible{
    opacity: 1;
    transform: none;
}

/* Quando dentro c'e' un'immagine vera, a scalare e' lei e non il contenitore:
   scalare il riquadro allargherebbe anche gli angoli arrotondati e lo farebbe
   sbordare dalla colonna. Il ritaglio resta fermo, l'immagine rientra. */
.js-reveal .photo.reveal-photo{
    transform: none;
}

.js-reveal .photo.reveal-photo .photo-img{
    transform: scale(1.04);
    transition: transform .6s ease-out;
}

.js-reveal .photo.reveal-photo.is-visible .photo-img{
    transform: none;
}


/* ==========================================================================
   3. STRUTTURA
   header.php e footer.php: presenti su ogni pagina.
   ========================================================================== */

/* ! 3.1 Header */

.site-header{
    background: var(--white);
    position: sticky;
    top: 0;
    z-index: 20;
}

/* Da loggati la barra di amministrazione occupa i primi 32px:
   senza questo l'header ci finisce sotto. */
.admin-bar .site-header{ top: 32px; }

.site-header-inner{
    max-width: 1280px;
    margin: 0 auto;
    padding: 18px var(--sez-x);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.logo{
    font-family: var(--serif);
    font-weight: 600;
    font-size: 25px;
    letter-spacing: -1px;
    text-decoration: none;
    color: var(--seppia);

    /* Il nome del sito non si spezza a meta': o sta in riga, o e' la barra
       intera a dover passare a hamburger. */
    white-space: nowrap;
}

.logo img{ display: block; }

.nav .menu-list{
    display: flex;
    gap: 26px;
}

.nav a{
    color: var(--seppia);
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
}

.nav .current-menu-item > a,
.nav .current_page_item > a{
    color: var(--alloro);
    font-weight: 600;
}

.header-cta{
    display: flex;
    align-items: center;
    gap: 18px;
}

.phone{
    font-weight: 600;
    font-size: 15px;
    color: var(--seppia);
    text-decoration: none;
    white-space: nowrap;
}

/* Il pulsante hamburger esiste solo sotto i 1100px (vedi sezione 5). */
.menu-toggle{
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

/* L'icona: una barra vera, le altre due disegnate con ::before e ::after. */
.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after{
    display: block;
    width: 26px;
    height: 3px;
    background: var(--seppia);
    transition: transform .2s ease, opacity .2s ease;
}

.menu-toggle-icon{
    margin: 0 auto;
    position: relative;
}

.menu-toggle-icon::before,
.menu-toggle-icon::after{
    content: "";
    position: absolute;
    left: 0;
}

.menu-toggle-icon::before{ top: -8px; }
.menu-toggle-icon::after{ top: 8px; }

/* Menu aperto: le barre diventano una X. */
.menu-is-open .menu-toggle-icon{ background: transparent; }
.menu-is-open .menu-toggle-icon::before{ top: 0; transform: rotate(45deg); }
.menu-is-open .menu-toggle-icon::after{ top: 0; transform: rotate(-45deg); }

/* ! 3.2 Fascia titolo delle pagine interne
   La stampa header.php quando la pagina non ha una hero propria. */

.page-head{
    background: var(--alloro);
    padding: clamp(40px, 6vw, 72px) var(--sez-x);
}

.page-head h1{
    font-family: var(--serif);
    font-weight: 900;
    font-size: clamp(30px, 4vw, 46px);
    color: var(--avorio);
}

/* ! 3.3 Hero
   Tutte le pagine tranne il blog. */

.hero-wrap{
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
}

.hero-sub{ max-width: 760px; }

/* ! 3.4 Footer */

.site-footer{
    background: var(--dark);
    color: #b7ae9f;
    padding: 52px var(--sez-x);
}

/* Tre colonne uguali su una griglia vera. Con space-between le colonne finivano
   spinte ai bordi e la loro posizione dipendeva dalla lunghezza del testo:
   i contatti sbandavano a destra e le pagine restavano appiccicate al margine. */
.footer-row{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
}

.site-footer .fbrand{
    font-family: var(--serif);
    font-size: 23px;
    color: var(--avorio);
}

.site-footer .tag{
    font-size: 14px;
    color: var(--sabbia);
    margin-top: 10px;
    max-width: 340px;
    line-height: 1.5;
}

.site-footer .fcol-title{
    font-family: var(--sans);
    color: var(--avorio);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.site-footer .fcol a,
.site-footer .fcol div{
    display: block;
    color: #b7ae9f;
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 8px;
}

/* Email e numeri lunghi non devono sfondare la colonna sui telefoni stretti. */
.site-footer .fcol a{ overflow-wrap: anywhere; }

/* Le pagine su due colonne. Una colonna sola di cinque voci sembrava una lista
   della spesa; tutte in fila orizzontale sarebbe stata la stessa riga di prima,
   solo coricata. Due colonne corte si leggono a colpo d'occhio. */
/* max-content e non 1fr: con le colonne a meta' larghezza le voci restavano
   ammassate a sinistra e il blocco dei link risultava piu' stretto della
   colonna, quindi il titolo centrato sulla colonna sembrava spostato a destra.
   Cosi' le due colonne si stringono sul testo e diventano centrabili come
   blocco unico (vedi il centraggio nella sezione 5). */
.site-footer .fcol .menu-list{
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0 28px;
}

.site-footer .divider{
    height: 1px;
    background: #3a362f;
    margin: 26px 0;
}

.site-footer .legal{
    font-size: 12px;
    color: #8a8275;
}

.site-footer .legal a{ color: #8a8275; }


/* ==========================================================================
   4. PAGINE
   ========================================================================== */

/* ! 4.1 Home — front-page.php */

/* Pillola sopra il titolo della hero. */
.pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--alloro-l);
    color: var(--alloro);
    border-radius: 100px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* Numero dei passi in "Come funziona". */
.num{
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--alloro);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
}

/* Riquadro scuro di "Corsi e viaggi". */
.dark-card{
    background: var(--alloro);
    border-radius: 20px;
    padding: clamp(32px, 5vw, 56px);
    text-align: center;
}

/* Fila dei loghi brand. */
.logos{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-top: 24px;
}

/* Categorie fornite. */
.cat-pill{
    background: var(--white);
    border: 1px solid var(--sabbia);
    border-radius: 100px;
    padding: 12px 22px;
    font-weight: 600;
    font-size: 16px;
    color: var(--seppia);
}

.cat-row{
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.link-arrow{
    color: var(--cuoio);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
}

/* Testimonianze. */
.tcard{
    background: var(--white);
    border: 1px solid var(--sabbia);
    border-radius: 14px;
    padding: 30px;
    margin: 0;
}

/* Testimonianza unica: prende la larghezza di una colonna di testo invece di
   un terzo di schermo. Il contenitore .cards la centra da solo. */
.tcard-sola{ flex-basis: min(100%, 720px); }

.tcard .rule{
    width: 38px;
    height: 3px;
    background: var(--cuoio);
    border-radius: 2px;
    margin-bottom: 16px;
}

.tcard .quote{
    font-size: 16.5px;
    line-height: 1.58;
    color: var(--seppia);
}

.tcard .attr{ margin-top: 16px; }
.tcard .attr b{ font-weight: 700; font-size: 14px; display: block; }
.tcard .attr span{ font-size: 13px; color: var(--grey); }

/* Nota sotto il titolo delle testimonianze. */
.note-line{
    text-align: center;
    font-size: 13px;
    color: var(--grey);
    margin: 0 auto 34px;
}

/* Domande frequenti, in <details>. */
.faq-list{
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.faq{
    background: var(--white);
    border: 1px solid var(--sabbia);
    border-radius: 12px;
    padding: 22px 26px;
}

.faq .q{
    font-family: var(--serif);
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Toglie il triangolino di default di <summary> su Safari. */
.faq .q::-webkit-details-marker{ display: none; }

/* Il segno +/- e' decorativo: lo stato aperto lo annuncia gia' <details>. */
.faq .q::after{
    content: "+";
    font-family: var(--sans);
    font-weight: 700;
    font-size: 22px;
    color: var(--cuoio);
    flex: 0 0 auto;
}

.faq[open] .q::after{ content: "–"; }

.faq .a{
    margin-top: 10px;
    font-size: 15.5px;
    line-height: 1.58;
    color: var(--grey);
}

/* Elenco recapiti nella sezione contatti della home.
   Da non confondere con .crow-list di Contatti: qui e' una lista compatta
   con il pallino, li' sono righe con icona ed etichetta. */
.clist{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

.clist .row{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 15px;
    overflow-wrap: anywhere;
}

/* Il testo sta tutto in un solo span: andando a capo resta incolonnato
   sotto se stesso, non sotto al pallino. */
.clist .row > span{ min-width: 0; }

/* Il pallino si allinea alla prima riga, non al centro del blocco. */
.clist .row > .dot{ margin-top: 8px; }

.clist .row b{ font-weight: 700; }

.on-dark .clist .row{ color: var(--light); }
.on-dark .clist .row b{ color: var(--avorio); }

/* ! 4.2 Chi siamo — page-chi-siamo.php */

/* Elenco "Cosa non siamo", su fascia scura. */
.not-list{
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* La sezione e' centrata, ma un elenco centrato non si legge. */
    text-align: left;
}

.not-list .row{
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

/* Il pallino si allinea alla prima riga, non al centro del blocco. */
.not-list .row .dot{ margin-top: 8px; }

.not-list .row p{
    font-size: 17px;
    line-height: 1.5;
    color: var(--light);
}

.not-list .row p strong{ color: var(--avorio); font-weight: 700; }

/* ! 4.3 Prodotti — page-prodotti.php */

/* Scheda di un brand ufficiale. */
.brand-card{
    background: var(--white);
    border: 1px solid var(--sabbia);
    border-radius: 16px;
    padding: 34px;
    box-shadow: 0 10px 24px rgba(35, 32, 28, .05);
    text-align: left;
}

.brand-card h3{
    font-size: 24px;
    display: inline;
    vertical-align: middle;
}

.brand-card .body{ margin-top: 12px; font-size: 16px; }

/* Pillola accanto al nome del brand. Non si chiama .tag: quel nome e' gia'
   usato dal payoff nel footer, e si sarebbero pestati i piedi. */
.brand-tag{
    display: inline-block;
    background: var(--alloro-l);
    color: var(--alloro);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 100px;
    margin-left: 10px;
    vertical-align: middle;
}

/* Blocco "Su richiesta". */
.reper{
    background: var(--sabbia-l);
    border-radius: 20px;
    padding: clamp(28px, 4vw, 48px);
}

.reper-cols{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
    margin-top: 26px;
    text-align: center;
}

.reper-col h3{
    font-family: var(--serif);
    font-size: 18px;
    margin-bottom: 6px;
}

.reper-col p{ font-size: 15px; line-height: 1.55; color: var(--grey); }

.reper-k{
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cuoio);
    margin-bottom: 10px;
}

/* Nota di servizio: precisa una condizione senza il tono dell'avvertenza legale.
   Piu' leggera di una .card, con una riga di colore che la stacca dal resto. */
.nota{
    max-width: 820px;
    margin: 34px auto 0;
    background: var(--white);
    border: 1px solid var(--sabbia);
    border-left: 3px solid var(--cuoio);
    border-radius: 12px;
    padding: 24px 28px;
    text-align: left;
}

.nota h3{ font-size: 18px; margin-bottom: 8px; }
.nota p{ font-size: 15.5px; line-height: 1.6; color: var(--grey); }

/* ! 4.4 Corsi e viaggi — page-corsi-e-viaggi.php */

.course-card{
    background: var(--white);
    border: 1px solid var(--sabbia);
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 10px 24px rgba(35, 32, 28, .05);
    text-align: center;
}

.course-card h3{ font-size: 20px; margin-top: 4px; }
.course-card .body{ margin-top: 8px; font-size: 15px; }

/* Etichetta del tema. Non e' una data: i temi tornano ogni anno, le date no. */
.course-chip{
    display: inline-block;
    background: var(--alloro-l);
    color: var(--alloro);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 5px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
}

.course-meta{
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--sabbia);
    font-size: 12.5px;
    color: var(--grey);
    font-weight: 600;
    letter-spacing: .3px;
    text-transform: uppercase;
}

/* L'ultima scheda e' un invito, non un corso: bordo tratteggiato e fondo
   piu' tenue per dire "qui c'e' dell'altro" senza scriverlo.
   Deve restare dopo .course-card: stessa specificita'. */
.course-card-soft{
    background: var(--sabbia-l);
    border-style: dashed;
    box-shadow: none;
}

/* Il form da solo in una sezione centrata: senza larghezza massima si
   allargherebbe per tutta la fascia. Variante di .form-card (2.7). */
.form-card-center{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

/* ! 4.5 Contatti — page-contatti.php */

/* Recapiti con icona: etichetta piccola sopra, valore grande sotto. */
.crow-list{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.crow{
    display: flex;
    gap: 14px;
    align-items: flex-start;
    text-align: left;
}

.crow-ic{
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--alloro-l);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.crow-ic i{
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--alloro);
    display: block;
}

/* Etichetta sopra, recapito sotto: sono <span>, quindi senza display:block
   finirebbero appiccicati sulla stessa riga. */
.crow-k,
.crow-v{ display: block; }

/* La colonna del testo non deve poter spingere fuori un'email lunga. */
.crow > span:not(.crow-ic){ min-width: 0; }

.crow-k{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--cuoio);
}

.crow-v{
    font-size: 18px;
    font-weight: 600;
    margin-top: 2px;
    overflow-wrap: anywhere;
}

/* Il recapito e' gia' evidente per posizione e peso: colorarlo di nuovo
   come un link lo renderebbe solo piu' rumoroso. */
.crow-v a{ color: inherit; text-decoration: none; }

.crow-v small{
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--grey);
    margin-top: 4px;
    line-height: 1.5;
}

/* Su fondo chiaro la card avorio sparirebbe: qui serve bianca e staccata.
   Variante di .form-card (2.7). */
.form-card-bianca{
    background: var(--white);
    border: 1px solid var(--sabbia);
    box-shadow: 0 12px 28px rgba(35, 32, 28, .06);
}

.form-card-bianca input[type="text"],
.form-card-bianca input[type="email"],
.form-card-bianca input[type="tel"],
.form-card-bianca textarea{
    background: var(--avorio);
}

/* ! 4.6 Blog e contenuto da editor
   index.php, single.php, page.php, search.php, 404.php e il testo che
   eventualmente viene aggiunto in fondo alle pagine curate. */

.entry-content > * + *{ margin-top: 20px; }

.entry-content h2,
.entry-content h3{ margin-top: 36px; }

.entry-content p,
.entry-content li{
    font-size: 17px;
    line-height: 1.62;
    color: var(--grey);
}

.entry-content ul,
.entry-content ol{
    padding-left: 22px;
    list-style: disc;
}

.entry-content ol{ list-style: decimal; }

.entry-meta{
    font-size: 14px;
    color: var(--grey);
    margin-bottom: 24px;
}

.post-list{
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Negli elenchi di articoli il testo torna a sinistra: sono paragrafi lunghi,
   e un riassunto centrato costringe l'occhio a ricercare l'inizio di ogni riga. */
.post-list .card{ text-align: left; }

.post-list .card a{ text-decoration: none; }
.post-list .card h2{ font-size: 22px; margin-top: 14px; }

.pagination{
    margin-top: 40px;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}


/* ==========================================================================
   5. RESPONSIVE
   Dal piu' largo al piu' stretto. Le griglie a schede si adattano gia' da sole:
   qui sotto ci sono solo i punti dove serve una decisione, non un
   ridimensionamento.
   ========================================================================== */

/* Il menu passa a hamburger.
   La soglia e' 1100px e non 900: fra logo, cinque voci e pulsante WhatsApp la
   barra chiede circa 920px, e su un Surface Pro (912px) restava in versione
   desktop spezzando le parole a meta'. Meglio l'hamburger un po' prima che una
   barra affastellata. Se cambi questo numero, cambia anche BREAKPOINT in
   js/main.js. */
@media (max-width: 1100px){

    html{ scroll-padding-top: 84px; }

    .site-header-inner{
        flex-wrap: wrap;
        padding-top: 14px;
        padding-bottom: 14px;
    }

    /* Con la nav nascosta restano tre figli e space-between piazzerebbe
       l'hamburger a meta' strada: il margine automatico lo riporta a destra,
       accanto al pulsante WhatsApp. */
    .header-cta{
        order: 1;
        margin-left: auto;
        gap: 10px;
    }

    .menu-toggle{
        display: block;
        order: 2;
    }

    .header-cta .btn{
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 10px;
    }

    .header-cta .btn-label{
        display: none;
    }

    /* Il menu occupa tutta la riga sotto logo e pulsante, ed e' chiuso di default. */
    .nav{
        display: none;
        width: 100%;
        order: 3;
    }

    .menu-is-open .nav{
        display: block;
        /* Con molte voci il menu aperto supererebbe lo schermo e l'ultima voce
           resterebbe irraggiungibile: qui scorre invece di uscire. */
        max-height: calc(100vh - 140px);
        overflow-y: auto;
    }

    .nav .menu-list{
        flex-direction: column;
        gap: 0;
    }

    .nav .menu-list a{
        display: block;
        padding: 14px 0;
        border-top: 1px solid var(--sabbia-l);
    }

    /* Il numero sparisce dall'header ma resta nei contatti e nel footer:
       su mobile il pulsante WhatsApp e' il gesto piu' probabile. */
    .header-cta .phone{ display: none; }

    #testimonianze{display: block;}
}

/* Tablet orizzontale e portatili piccoli: le due colonne diventano strette. */
@media (max-width: 1040px){

    .two-col,
    .two-col.form-col,
    .two-col.media-sm{
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .two-col .stack{
        text-align: center;
    }

    /* Due colonne: le cinque schede diventano 2+2+1, sempre centrate. */
    .grid-3,
    .grid-4{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cards > *{ flex-basis: calc(50% - 12px); }

    .reper-cols{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* In colonna singola la foto va sotto il testo, non accanto: le basta meno spazio. */
    .photo-slot{ min-height: 300px; }
}

/* Tablet verticale. */
@media (max-width: 900px){

    /* Quando le voci vanno a capo i separatori restano appesi a fine riga:
       meglio toglierli e lasciare che siano i pallini a separare. */
    .trust .sep{ display: none; }
    .trust{ gap: 14px 26px; }

    #testimonianze{ display: block;}

    /* Il footer passa a due colonne: il brand prende la riga intera. */
    .footer-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fcol-brand{ grid-column: 1 / -1; }
}

/* Sotto i 782px la barra di amministrazione di WordPress non e' piu' fissa:
   compensarla di 32px spingerebbe l'header in un vuoto. */
@media (max-width: 782px){
    .admin-bar .site-header{ top: 0; }
}

/* Sotto questa soglia due schede affiancate diventano troppo strette
   per il testo che contengono: meglio una colonna sola. */
@media (max-width: 700px){

    .grid-3,
    .grid-2,
    .grid-4,
    .reper-cols{ grid-template-columns: 1fr; }

    .cards > *{ flex-basis: 100%; }
}

/* Telefoni. */
@media (max-width: 600px){

    /* L'a capo forzato del titolo ha senso solo dove la riga ci sta davvero. */
    .display br{ display: none; }

    /* A tutta larghezza i pulsanti diventano bersagli comodi da pollice.
       Quello nell'header resta piccolo: sta in riga con logo e hamburger. */
    .btn{ width: 100%; }
    .btn-sm{ width: auto; }
    .btn-row{ width: 100%; }

    .trust{
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }

    .trust .sep{ display: none; }

    .card,
    .tcard,
    .course-card,
    .form-card,
    .faq{ padding: 24px; }

    .head{ margin-bottom: 32px; }

    .logos{ gap: 16px; }

    .footer-row{
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Da tablet in su, cioe' il rovescio del blocco qui sopra.
   Nella colonna del menu le voci stanno su due colonne: il titolo si centra
   sopra di esse e prende piu' aria. Su telefono no: li' la colonna e' unica e
   allineata a sinistra, e un titolo centrato sembrerebbe scollegato dal suo
   elenco invece che il suo cappello. */
@media (min-width: 601px){

    .fcol-menu .fcol-title{
        text-align: center;
        margin-bottom: 24px;
    }

    /* Il blocco delle voci si centra nella colonna: cosi' il titolo, che e'
       centrato sulla stessa colonna, gli finisce esattamente sopra. */
    .fcol-menu .menu-list{ justify-content: center; }
}

/* Chi ha chiesto meno animazioni non deve subire ne' le transizioni
   dell'hamburger ne' lo scorrimento morbido delle ancore. */
@media (prefers-reduced-motion: reduce){

    html{ scroll-behavior: auto; }

    *{
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }

    /* Azzerare la durata non basta: senza questo lo stato di partenza
       resterebbe opacity:0 e il contenuto non comparirebbe mai. */
    .js-reveal .reveal,
    .js-reveal .reveal-photo,
    .reveal-onload > *{
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}