/* Ritocchi applicati alla conversione dinamica del template.
   Il template originale usava un <a> per l'invio della newsletter e un form
   PHP per i contatti: qui entrambi sono <form> con submit reale. */

#form_subscribe #btn-submit {
    padding: 0;
    border: none;
    background: none;
    float: left;
    width: 20%;
}

#form_subscribe #btn-submit i {
    float: none;
    width: 100%;
    display: block;
}

/* Messaggi di validazione lato server del form contatti. */
.form-default .field-validation-error,
.form-default .validation-summary-errors ul {
    display: block;
    color: #d9534f;
    font-size: 13px;
    margin-bottom: 8px;
    list-style: none;
    padding: 0;
}

.form-default .alert-success {
    background: #dff0d8;
    color: #3c763d;
    border-radius: 5px;
    padding: 12px 18px;
    margin-bottom: 20px;
    text-align: center;
}

/* Card news riutilizzate nella pagina di elenco e nel dettaglio. */
.news-body img {
    max-width: 100%;
    height: auto;
}

.page-subheader {
    padding: 140px 0 60px;
}

/* Bootstrap 5 imposta --bs-nav-link-color sul colore dei link, quindi le pill
   inattive diventavano blu: in Bootstrap 4 ereditavano il colore del testo.
   Qui si ripristina il comportamento del tema (attiva resta verde, gestita
   da coloring.css). */
.nav-pills {
    --bs-nav-link-color: #2a2e37;
    --bs-nav-link-hover-color: var(--primary-color, #BB9B79);
}

/* ==========================================================================
   Correzioni mobile
   ========================================================================== */

/* Pulsante WhatsApp flottante, in basso a sinistra e solo su mobile
   (la visibilità è gestita da d-lg-none nel markup). A destra resta libero
   il pulsante "torna su" del tema. */
.whatsapp-fab {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1021;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 29px;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
    transition: transform .15s ease, background-color .15s ease;
}

.whatsapp-fab:hover,
.whatsapp-fab:focus { background: #1ebe5a; color: #fff; transform: scale(1.05); }

/* Newsletter: il tema affiancava campo e pulsante con dei float, e le due
   altezze non coincidevano lasciando uno stacco. Con flex restano attaccati
   e alti uguali. */
#form_subscribe .col { display: flex; align-items: stretch; }

#form_subscribe input[type=text] {
    flex: 1 1 auto;
    width: auto;
    float: none;
    display: block;
}

#form_subscribe #btn-submit {
    flex: 0 0 58px;
    width: 58px;
    float: none;
    display: flex;
    align-items: stretch;
    padding: 0;
    border: none;
    background: none;
}

#form_subscribe #btn-submit i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    float: none;
    padding: 0;
}

@media (max-width: 767px) {
    /* Topbar: i due link andavano a capo e la seconda riga finiva tagliata
       sotto l'header. Su una riga sola, più compatti. */
    #topbar { padding: 0 10px; }

    #topbar .topbar-right {
        float: none;
        width: 100%;
        justify-content: center;
        gap: 6px;
    }

    #topbar .topbar-widget {
        white-space: nowrap;
        font-size: 11px;
        padding: 0 8px;
    }

    #topbar .topbar-widget a { line-height: 2.9em; }

    /* Subfooter: copyright e social si stringevano finché le icone
       andavano a capo su due righe. Incolonnati e icone su una riga. */
    .subfooter .de-flex {
        flex-direction: column;
        align-items: center;
        gap: 14px;
        text-align: center;
    }

    .subfooter .social-icons {
        display: flex;
        justify-content: center;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .subfooter .social-icons a { display: inline-flex; }
    .subfooter .social-icons i { margin: 0; }
}

/* --------------------------------------------------------------------------
   Hero su mobile
   L'immagine (1920x1281, soggetto fra il 57% e l'83% in orizzontale) veniva
   ritagliata al centro da background-size:cover, tagliando la persona a metà.
   Il titolo enorme allungava la sezione e peggiorava il ritaglio: testo più
   piccolo = sezione più bassa = porzione d'immagine visibile più larga.
   Il background è applicato inline da designesia.js, quindi serve !important.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    #section-home {
        padding: 60px 0 70px;
        background-position: 76% top !important;
    }

    #section-home h1 {
        font-size: 28px;
        line-height: 1.25;
        margin-bottom: 12px;
    }

    #section-home h4.s1 { font-size: 13px; }

    #section-home .lead {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Gli spaziatori del tema sono tarati sul desktop e qui pesano troppo. */
    #section-home .spacer-double { height: 20px; }
    #section-home .spacer-10 { height: 6px; }
    #section-home .spacer-20 { height: 12px; }

    #section-home .btn-custom { padding: 10px 20px; font-size: 13px; }
}

@media (max-width: 480px) {
    #section-home h1 { font-size: 24px; }
    #section-home .lead { font-size: 14px; }
    #section-home { background-position: 80% top !important; }
}

/* --------------------------------------------------------------------------
   Sfondi delle sezioni
   designesia.js applica lo sfondo con la shorthand `background`, che riazzera
   background-repeat a "repeat". Quando stellar sposta background-position, la
   stessa immagine viene affiancata e si vedono due copie (la testa sotto, le
   gambe sopra). Serve !important perché la regola inline di JS ha la priorità.
   -------------------------------------------------------------------------- */
section[data-bgimage],
div[data-bgimage],
#section-home {
    background-repeat: no-repeat !important;
}

/* --------------------------------------------------------------------------
   Immagini del carosello "Smart Tutorial"
   Il tema usa .mask img { width:100%; height:100% } senza vincolo di
   proporzioni: le foto originali erano tutte 600x450 (4:3), così ogni immagine
   caricata in verticale allungava a dismisura l'intero carosello.
   Qui ogni foto viene inquadrata nello stesso riquadro 4:3, ritagliata al
   centro, qualunque sia l'orientamento dell'originale.
   -------------------------------------------------------------------------- */
#training-carousel .mask img,
#training-carousel .mask .img-responsive {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}



/* --------------------------------------------------------------------------
   Font calligrafico del payoff
   Great Vibes (SIL Open Font License, licenza in fonts/greatvibes/OFL.txt),
   ospitato in locale: niente richieste a Google Fonts. Il file è ridotto ai
   soli caratteri latini + accenti italiani, 58 KB invece di 446.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Great Vibes";
    src: url("../fonts/greatvibes/greatvibes.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.script {
    font-family: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
    font-weight: 400;
    line-height: 1.35;
}

/* Payoff sotto il logo in testata. */
.brand-tagline {
    display: block;
    margin-top: 2px;
    font-size: 22px;
    color: var(--pal-accent, #836647);
    white-space: nowrap;
    letter-spacing: .01em;
}

@media (max-width: 991.98px) {
    .brand-tagline { font-size: 18px; }
}

/* --------------------------------------------------------------------------
   Logo: chiave + lettering
   Il lettering è lo stesso SVG originale, ritagliato via viewBox per escludere
   l'albero: i tracciati non sono stati toccati. La chiave è un PNG con sfondo
   reso trasparente, così funziona sia sulla testata bianca sia sul footer scuro.
   -------------------------------------------------------------------------- */
.logo-lockup {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.logo-lockup .logo-key {
    height: 46px;
    width: auto;
    flex: none;
}

.logo-lockup .logo-word {
    height: 44px;
    width: auto;
    flex: none;
}

@media (max-width: 991.98px) {
    .logo-lockup { gap: 9px; }
    .logo-lockup .logo-key { height: 38px; }
    .logo-lockup .logo-word { height: 36px; }
}

@media (max-width: 575.98px) {
    .logo-lockup .logo-key { height: 32px; }
    .logo-lockup .logo-word { height: 30px; }
}

/* --------------------------------------------------------------------------
   Spazio in testata
   Il tema fissa header{height:90px}, tarato sul vecchio logo alto 56px.
   Il blocco attuale (chiave 46px + payoff) sfiora i 78px e restava incollato
   al topbar. Sul desktop la testata cresce quanto basta; una volta in modalità
   "smaller" (scroll) torna compatta e il logo si riduce di conseguenza.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    header:not(.smaller):not(.header-mobile) { height: 118px; }

    header:not(.smaller):not(.header-mobile) .logo-lockup { padding: 6px 0; }

    /* Testata compatta dopo lo scroll: logo e payoff rimpiccioliscono. */
    header.smaller { height: 90px; }
    header.smaller .logo-lockup .logo-key { height: 38px; }
    header.smaller .logo-lockup .logo-word { height: 36px; }
    header.smaller .brand-tagline { font-size: 17px; margin-top: 0; }
}

/* --------------------------------------------------------------------------
   Palette della chiave: applicazione
   Il pieno è chiaro, quindi il testo sopra deve essere scuro. Gli override
   sono limitati a .bg-color: le sezioni scure (testimonianze, metodo
   evoluzionario) continuano a usare il testo bianco.
   -------------------------------------------------------------------------- */
.bg-color { background-color: var(--pal-mid, #BB9B79) !important; }

/* Testo scuro solo dove la fascia beige è davvero il fondo del testo:
   topbar, titolo "Smart Tutorial" e fascia del contatore. Il carosello non è
   toccato — le sue card hanno un velo scuro e testo chiaro. Elencare i punti
   precisi evita sia l'!important a tappeto sia i :not() annidati. */
#topbar.bg-color,
#topbar.bg-color a,
#topbar.bg-color .topbar-widget,
#section-events > .container-fluid > .row > .col-lg-3,
#section-events > .container-fluid > .row > .col-lg-3 h3,
#section-text.bg-color,
#section-text.bg-color h1, #section-text.bg-color h2, #section-text.bg-color h3,
#section-text.bg-color p, #section-text.bg-color span {
    color: var(--pal-ink, #3F2E1B) !important;
}

/* Pulsanti pieni: stesso ragionamento, testo scuro sul marrone morbido. */
a.btn-custom, .btn-custom,
a.btn-custom:hover, .btn-custom:hover,
a.btn-custom:focus, .btn-custom:focus {
    color: var(--pal-ink, #3F2E1B) !important;
}

/* Filetti e bordi: il tono dominante della chiave. */
.small-border,
.small-border.sm-left,
.de_tab.tab_steps .de_nav li .v-border {
    background: var(--pal-tone, #A28261) !important;
}

/* Occhielli e icone d'accento su fondo chiaro (5.3:1). */
.p-title,
h4.s1.id-color { color: var(--pal-accent, #836647); }

/* Riquadri traslucidi dietro le icone dei "Metodi principali". */
.bg-color-op-1 { background: rgba(187, 155, 121, .22) !important; }

/* Badge data sulle card del carosello. */
.mask .m-date span {
    background: var(--pal-tone, #A28261) !important;
    color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   Logo su mobile
   Il tema impone `header div#logo img { max-width: 200px }` sotto i 768px:
   essendo un selettore con id batte le classi, e la chiave veniva disegnata
   larga 200px sfondando la testata. Qui si riprende il controllo usando la
   stessa specificità (id + classi).
   -------------------------------------------------------------------------- */
header div#logo .logo-lockup { flex-wrap: nowrap; }

@media (max-width: 991.98px) {
    header div#logo .logo-lockup .logo-key {
        max-width: none;
        height: 34px;
        width: 87px;
    }
    header div#logo .logo-lockup .logo-word {
        max-width: none;
        height: 32px;
        width: auto;
    }
}

@media (max-width: 575.98px) {
    header div#logo .logo-lockup { gap: 7px; }
    header div#logo .logo-lockup .logo-key { height: 27px; width: 69px; }
    header div#logo .logo-lockup .logo-word { height: 25px; }
}

/* Sotto i 400px la chiave resta visibile: si rimpiccioliscono entrambi
   invece di toglierla. Su un telefono da 360px il blocco occupa ~125px,
   quindi il pulsante del menu ha comunque spazio. */
@media (max-width: 400px) {
    header div#logo .logo-lockup { gap: 6px; }
    header div#logo .logo-lockup .logo-key { display: block; height: 25px; width: 64px; }
    header div#logo .logo-lockup .logo-word { height: 23px; }
}

/* --------------------------------------------------------------------------
   Voci del menu principale
   Il tema le lascia al colore d'accento, che sul fondo chiaro della foto sta
   a 2,6:1 e sui capelli scompare del tutto. Qui tutte le voci — normale,
   hover e attiva — usano lo stesso bronzo scuro (5,1:1 sul grigio dello
   studio): leggibile ma ancora nella palette, non nero.
   L'ombra chiarissima serve dove il testo passa sopra la fotografia.
   -------------------------------------------------------------------------- */
/* Qualunque testata chiara — trasparente sopra la foto oppure bianca dopo lo
   scroll (header.smaller.scroll-light) — vuole testo scuro. La regola prima
   dipingeva di bianco ogni .smaller, e sulla variante bianca il menu spariva. */
header.header-light #mainmenu > li > a,
header.header-light #mainmenu > li > a:hover,
header.header-light #mainmenu > li > a:focus,
header.header-light #mainmenu > li > a.active,
header.smaller.scroll-light #mainmenu > li > a,
header.smaller.scroll-light #mainmenu > li > a:hover,
header.smaller.scroll-light #mainmenu > li > a.active {
    color: #503B24;
}

/* L'ombra chiara serve solo dove il menu passa sopra la fotografia. */
header.header-light:not(.smaller) #mainmenu > li > a {
    text-shadow: 0 1px 3px rgba(255, 255, 255, .75);
}

/* Testo chiaro solo quando la testata compatta è davvero scura. */
header.smaller:not(.scroll-light):not(.header-light) #mainmenu > li > a,
header.smaller:not(.scroll-light):not(.header-light) #mainmenu > li > a:hover,
header.smaller:not(.scroll-light):not(.header-light) #mainmenu > li > a.active {
    color: #FFFFFF;
    text-shadow: none;
}

/* --------------------------------------------------------------------------
   Testo sopra le card dei tutorial
   Il tema copre l'immagine con rgba(0,0,0,.5): bastava con le foto originali,
   ma le locandine caricate ora sono chiare e piene di scritte, e la
   descrizione ci si perdeva dentro. Velo più deciso, così il testo stacca
   senza nascondere del tutto l'immagine.
   -------------------------------------------------------------------------- */
#training-carousel .mask.s2 .cover { background: rgba(0, 0, 0, .60); }
#training-carousel .mask.s2:hover .cover { background: rgba(0, 0, 0, .70); }

#training-carousel .mask .cover h3,
#training-carousel .mask .cover p {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

/* Titolo nel tono chiaro della palette, descrizione in Crema Luminoso
   (Pantone 9061 C): col velo più trasparente il beige del pulsante
   scenderebbe a 3:1, il crema resta invece ben staccato. */
#training-carousel .mask .cover h3,
#training-carousel .mask .cover h3 span,
#training-carousel .mask .cover h3 i {
    color: var(--pal-crema, #F7F2EA) !important;
    opacity: 1;
}

#training-carousel .mask .cover p {
    color: var(--pal-crema, #F7F2EA) !important;
    opacity: 1;
}

/* Le locandine caricate contengono scritte proprie che si mescolavano al testo
   del sito. Una leggera sfocatura dell'immagine sotto il velo le smorza. */
#training-carousel .mask.s2 .cover { backdrop-filter: blur(3px); }

/* --------------------------------------------------------------------------
   Inquadratura verticale dell'hero
   Con `top` la sezione mostrava la parte alta della foto, che sopra la testa
   è quasi tutta fondo vuoto: la persona restava schiacciata in basso. Alzando
   il punto di aggancio si recupera spazio e il soggetto si vede meglio, senza
   però riportargli la testa dietro al menu.
   designesia.js scrive lo sfondo inline, quindi serve !important.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    #section-home { background-position: 62% 28% !important; }
}

/* --------------------------------------------------------------------------
   Fondo astrologico della fascia Tutorial
   Costellazioni e pulviscolo di stelle in bianco a bassissima opacità sopra
   il beige: si intuisce senza disturbare la lettura. Disegnato con <line> e
   <circle>, nessun tracciato riempibile, così resta leggero (28 KB) e nitido
   a qualsiasi risoluzione.
   -------------------------------------------------------------------------- */
#section-events.bg-color {
    /* La piastrella fornita non era continua ai bordi (scarto 69/93 contro 8
       fra colonne adiacenti): l'ho resa continua per specchiatura, così si
       ripete senza giunte. Sopra, un velo del beige del pannello smorza il
       disegno e lo lascia come texture. */
    background-image:
        linear-gradient(rgba(187, 155, 121, .80), rgba(187, 155, 121, .80)),
        url("../images/astro-tile.jpg");
    background-repeat: no-repeat, repeat;
    background-size: auto, 620px auto;
    background-position: center, center;
}

/* Il payoff va centrato sotto il logo, non allineato al bordo sinistro. */
header div#logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.brand-tagline { text-align: center; }

/* --------------------------------------------------------------------------
   Payoff anche su mobile
   La testata stretta non regge i 22px del desktop: la misura scende con la
   larghezza, restando sotto il logo e centrata. Le dimensioni sono scelte in
   modo che logo + payoff stiano dentro l'altezza della testata mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .brand-tagline { display: block; font-size: 16px; margin-top: 1px; }
}

@media (max-width: 575.98px) {
    .brand-tagline { font-size: 14px; }
}

@media (max-width: 400px) {
    .brand-tagline { font-size: 13px; }
}

/* --------------------------------------------------------------------------
   Icona TikTok
   Font Awesome 4.7 è del 2016 e non la contiene: il tema ripiegava sul glifo
   di Tumblr. Qui il logo vero, come SVG inline che eredita il colore corrente.
   -------------------------------------------------------------------------- */
/* Il glifo TikTok e definito in icons.css. Nel footer il tema centra le
   icone a font tramite un padding asimmetrico tarato sulla baseline
   (.social-icons i: padding 12px 10px 8px 10px); uno pseudo-elemento non
   segue quella baseline, quindi qui lo centro geometricamente nel cerchio
   e ne fisso la dimensione sull'inchiostro reale dei glifi accanto. */
/* Il glifo TikTok non e' un carattere ma un'immagine posizionata in absolute:
   l'<i> resta senza contenuto in flusso e per le regole di CSS la sua baseline
   cade sul bordo inferiore del box, percio' il suo cerchio saliva rispetto agli
   altri tre. Allineando la riga con flex l'allineamento non dipende piu' dalla
   baseline ne' dalle metriche del font. */
.social-icons { display: inline-flex; align-items: center; }
.social-icons > a { display: inline-flex; align-items: center; }

.social-icons .icon-tiktok { position: relative; }

.social-icons .icon-tiktok::before,
.social-icons .icon-tiktok.fa-lg::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
}