/*
Theme Name: A Cuore Aperto (child)
Theme URI: https://acuoreaperto.com
Template: bootstrap-origini
Author: Origini Digital Agency
Author URI: https://www.originiagency.it
Description: Tema figlio di Bootstrap by Origini per acuoreaperto.com — colori/font brand e shortcode project-specific (blurb, hero, newsletter) in sostituzione dei moduli Divi
Version: 0.6.0
Text Domain: acuoreaperto-child
*/

/* ============================================================
   TOKEN — palette brand invariata, solo resa semantica esplicita.
   L'arancio (#f07e07) su bianco è 2.7:1, sotto la soglia WCAG AA
   4.5:1: resta per sfondi/icone/decorazioni, mai come colore testo
   su chiaro. Per link e testo interattivo si usa il magenta brand
   (#860056, 9.8:1 su bianco) già presente nella palette.
   ============================================================ */
:root {
    --ac-accent: #f07e07;
    --ac-accent-ink: #2a1600;
    --ac-link: #860056;
    --ac-text: #000000;
    --ac-sage: #EFF2E2;
    --ac-teal: #CCE2DC;
    --ac-magenta: #860056;
    --ac-cream: #FBF8F3;

    --ac-font-heading: 'Libre Caslon Display', Georgia, serif;
    --ac-font-body: 'DM Sans', -apple-system, sans-serif;
    --ac-font-nav: 'DM Sans', sans-serif;

    --ac-space-1: 0.25rem;
    --ac-space-2: 0.5rem;
    --ac-space-3: 0.75rem;
    --ac-space-4: 1rem;
    --ac-space-5: 1.5rem;
    --ac-space-6: 2.5rem;
    --ac-space-7: 4rem;

    --ac-radius-sm: 10px;
    --ac-radius-md: 18px;
    --ac-radius-lg: 32px;
    --ac-radius-pill: 999px;
    /* Sovrapposizione fra bande adiacenti ("angolo arrotondato che sale") — usata dalla
       testata e dal footer; la regola generale .entry-content > .py-5 (preesistente, non
       toccata qui) resta con il proprio 56px letterale per non rischiare di modificarne il
       comportamento già verificato altrove sul sito. */
    --ac-band-overlap: 56px;

    /* ombre morbide con tinta calda (magenta), non nero piatto */
    --ac-shadow-sm: 0 2px 10px rgba(134, 0, 86, 0.07);
    --ac-shadow-md: 0 10px 30px rgba(134, 0, 86, 0.12);
    --ac-shadow-lg: 0 20px 50px rgba(134, 0, 86, 0.16);

    --ac-transition: 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}

/* ============================================================
   BASE
   ============================================================ */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; /* compensa la navbar sticky sui link con ancora */
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    font-family: var(--ac-font-body);
    color: var(--ac-text);
    background-color: var(--ac-sage);
    font-size: 1rem;
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ac-font-heading);
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: var(--ac-space-4);
}
/* Titoli in magenta brand come sul sito live (h1-h3: titoli di pagina/sezione/card,
   verificato su acuoreaperto.com). h4-h6 restano nel colore testo: usati per label
   più piccole (footer, blurb) che sul sito live restano scure. */
h1, h2, h3 { color: var(--ac-link); }
h1 { font-size: clamp(2.25rem, 1.7rem + 2vw, 3.5rem); }

/* Titolo più grande sulla pagina FAQ, richiesta esplicita 2026-09-28 — scoped a questa sola
   pagina (page-id-7181), non un cambio del default h1 sitewide. */
body.page-id-7181 .ac-testata__banda h1 { font-size: clamp(2.75rem, 2rem + 2.5vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
h3 { font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); }

a {
    color: var(--ac-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--ac-transition);
}
a:hover { color: var(--ac-accent-ink); }

:focus-visible {
    outline: 3px solid var(--ac-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Intro pagina (campo ACF "intro", iniettata in acf-intro-pagina.php) */
.ac-intro-icona {
    display: flex;
    justify-content: center;
    margin-bottom: var(--ac-space-3);
}
.ac-intro-icona svg {
    width: 40px;
    height: 40px;
}
.ac-intro {
    font-family: var(--ac-font-heading);
    font-size: 30px;
    color: var(--ac-magenta);
}

/* [ac_mask_*] — immagine con maschera CSS a forma di stella/fiore/cuore/rombo/cuore_doppio */
.ac-mask {
    display: inline-block;
    object-fit: cover;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.ac-mask--stella       { -webkit-mask-image: url(masks/stella.svg); mask-image: url(masks/stella.svg); }
.ac-mask--fiore        { -webkit-mask-image: url(masks/fiore.svg); mask-image: url(masks/fiore.svg); }
.ac-mask--cuore        { -webkit-mask-image: url(masks/cuore.svg); mask-image: url(masks/cuore.svg); }
.ac-mask--rombo        { -webkit-mask-image: url(masks/rombo.svg); mask-image: url(masks/rombo.svg); }
.ac-mask--cuore_doppio { -webkit-mask-image: url(masks/cuore_doppio.svg); mask-image: url(masks/cuore_doppio.svg); }

/* ============================================================
   NAVBAR
   ============================================================ */
#masthead {
    background-color: #fff;
    box-shadow: var(--ac-shadow-sm);
    position: sticky;
    top: 0;
    z-index: 1020;
    transition: padding var(--ac-transition);
}
#masthead .navbar {
    transition: padding var(--ac-transition);
}
.site-logo-link {
    display: inline-block;
}
#origini_logo {
    height: 72px;
    width: auto;
    transition: height var(--ac-transition);
}
#masthead.is-scrolled {
    box-shadow: var(--ac-shadow-md);
}
#masthead.is-scrolled .navbar {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}
#masthead.is-scrolled #origini_logo {
    height: 46px;
}
@media (max-width: 767.98px) {
    #origini_logo { height: 56px; }
    #masthead.is-scrolled #origini_logo { height: 40px; }
}

.navbar, .navbar .nav-link {
    font-family: var(--ac-font-nav);
}
.navbar .nav-link {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(134, 0, 86, 0.6); /* var(--ac-magenta) 60%, come sul sito live */
    padding: 0.5rem 0.9rem !important;
    transition: color var(--ac-transition);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--ac-magenta);
}
.navbar .dropdown-menu {
    border: none;
    border-radius: var(--ac-radius-sm);
    box-shadow: var(--ac-shadow-md);
    padding: var(--ac-space-2);
    margin-top: 0.5rem;
}
.navbar .dropdown-item {
    font-family: var(--ac-font-nav);
    border-radius: var(--ac-radius-sm);
    padding: 0.55rem 1rem;
    transition: background-color var(--ac-transition), color var(--ac-transition);
}
.navbar .dropdown-item:hover,
.navbar .dropdown-item:focus {
    background-color: var(--ac-sage);
    color: var(--ac-accent-ink);
}
.navbar-toggler {
    color: var(--ac-text);
}

/* Icona di ricerca nel menu + form a comparsa (collapse orizzontale Bootstrap).
   Da xl in su (stesso breakpoint di navbar-expand-xl) il form si apre come overlay
   assoluto sotto l'icona: in linea nel flusso spingeva le altre voci di menu, che
   andavano a capo per mancanza di spazio orizzontale. */
.ac-search-item {
    display: flex;
    align-items: center;
}
.ac-search-toggle {
    cursor: pointer;
}
@media (min-width: 1200px) {
    .ac-search-item {
        position: relative;
    }
    #ac-search-collapse {
        position: absolute;
        top: 100%;
        right: 0;
        z-index: 1050;
        margin-top: var(--ac-space-2);
        background-color: #fff;
        border-radius: var(--ac-radius-md);
        box-shadow: var(--ac-shadow-md);
        padding: var(--ac-space-2);
    }
}
#ac-search-collapse .search-form {
    display: flex;
    align-items: center;
    gap: var(--ac-space-2);
    width: min(230px, 70vw);
    padding-left: var(--ac-space-2);
}
#ac-search-collapse .search-form label {
    flex: 1 1 auto;
    min-width: 0;
    margin-bottom: 0;
}
#ac-search-collapse .search-field {
    width: 100%;
    border-radius: var(--ac-radius-pill);
    border: 1px solid rgba(134, 0, 86, 0.3);
    font-size: 0.8rem;
    padding: 0.3rem 0.8rem;
}
#ac-search-collapse .search-submit {
    flex: 0 0 auto;
    border-radius: var(--ac-radius-pill);
    background-color: var(--ac-magenta);
    border-color: var(--ac-magenta);
    color: #fff;
    font-size: 0.75rem;
    padding: 0.3rem 0.7rem;
}

/* ============================================================
   BOTTONI — bs_button del builder emette .btn.btn-primary/-outline-*
   che di default arrivano dal Bootstrap CDN (blu): sovrascritti qui
   sul brand. Testo scuro su fondo arancione per rispettare 4.5:1.
   ============================================================ */
.btn {
    font-family: var(--ac-font-nav);
    font-weight: 600;
    letter-spacing: 0.02em;
    border-radius: var(--ac-radius-pill);
    padding: 0.65rem 1.75rem;
    transition: transform var(--ac-transition), box-shadow var(--ac-transition), background-color var(--ac-transition), color var(--ac-transition);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary {
    --bs-btn-color: var(--ac-accent-ink);
    --bs-btn-bg: var(--ac-accent);
    --bs-btn-border-color: var(--ac-accent);
    --bs-btn-hover-color: var(--ac-accent-ink);
    --bs-btn-hover-bg: #ffab52;
    --bs-btn-hover-border-color: #ffab52;
    --bs-btn-active-color: var(--ac-accent-ink);
    --bs-btn-active-bg: #d96e00;
    --bs-btn-active-border-color: #d96e00;
    --bs-btn-focus-shadow-rgb: 240, 126, 7;
    box-shadow: var(--ac-shadow-sm);
}
.btn-primary:hover { box-shadow: var(--ac-shadow-md); }

/* Varianti bottone verificate sul sito live: "più informazioni" (magenta pieno) e
   "approfondisci" (sage chiaro) accanto al primario arancione già esistente. */
.btn-magenta {
    --bs-btn-color: var(--ac-sage);
    --bs-btn-bg: var(--ac-magenta);
    --bs-btn-border-color: var(--ac-magenta);
    --bs-btn-hover-color: var(--ac-sage);
    --bs-btn-hover-bg: #6d0044;
    --bs-btn-hover-border-color: #6d0044;
    --bs-btn-active-bg: #55003a;
    --bs-btn-active-border-color: #55003a;
    box-shadow: var(--ac-shadow-sm);
}
.btn-magenta:hover { box-shadow: var(--ac-shadow-md); }

.btn-sage {
    --bs-btn-color: var(--ac-magenta);
    --bs-btn-bg: var(--ac-sage);
    --bs-btn-border-color: var(--ac-sage);
    --bs-btn-hover-color: var(--ac-magenta);
    --bs-btn-hover-bg: var(--ac-teal);
    --bs-btn-hover-border-color: var(--ac-teal);
    --bs-btn-active-bg: var(--ac-teal);
    --bs-btn-active-border-color: var(--ac-teal);
    font-weight: 400;
    letter-spacing: normal;
    padding: 0.3rem 1rem;
    font-size: 0.9rem;
}

.btn-outline-primary {
    --bs-btn-color: var(--ac-accent-ink);
    --bs-btn-border-color: var(--ac-accent);
    --bs-btn-hover-color: var(--ac-accent-ink);
    --bs-btn-hover-bg: var(--ac-accent);
    --bs-btn-hover-border-color: var(--ac-accent);
    --bs-btn-active-bg: var(--ac-accent);
    --bs-btn-active-border-color: var(--ac-accent);
    --bs-btn-focus-shadow-rgb: 240, 126, 7;
}

/* [ac_blurb] — icona + titolo linkato (+ testo opzionale), sostituisce et_pb_blurb */
.ac-blurb {
    display: flex;
    align-items: flex-start;
    gap: var(--ac-space-3);
    padding: var(--ac-space-3) 0;
}
.ac-blurb__icon {
    color: var(--ac-accent-ink);
    background-color: var(--ac-sage);
    width: 2.25rem;
    height: 2.25rem;
    min-width: 2.25rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.ac-blurb__title {
    font-family: var(--ac-font-heading);
    margin: 0;
    font-size: 1.15rem;
}
.ac-blurb__title a {
    color: var(--ac-text);
    text-decoration: none;
}
.ac-blurb__title a:hover {
    color: var(--ac-link);
    text-decoration: underline;
}
.ac-blurb__text {
    margin: 0.25rem 0 0;
}

/* [ac_hero] — sezione full-width con immagine di sfondo, sostituisce et_pb_fullwidth_header */
.ac-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: clamp(4rem, 6vw, 8rem) 1.5rem;
    text-align: center;
    color: #fff;
    isolation: isolate;
}
.ac-hero__overlay {
    position: absolute;
    inset: 0;
    background: rgba(30, 8, 20, 0.45);
    z-index: -1;
}
.ac-hero__inner {
    max-width: 720px;
    margin: 0 auto;
}
.ac-hero__title {
    font-family: var(--ac-font-heading);
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.ac-hero__text {
    font-family: var(--ac-font-body);
    font-size: 1.1rem;
}

/* Titolo hero della home ("A Cuore Aperto") — richiesta esplicita di una taglia precisa (7rem),
   troppo grande per il clamp() responsive di h1 di default, quindi una classe dedicata. */
.ac-hero-title-xl {
    font-size: 7rem;
}
@media (max-width: 767.98px) {
    .ac-hero-title-xl { font-size: 3.5rem; }
}

/* Titolo "I prossimi seminari": centrato, più grande, uppercase, margin-bottom 40px
   (richiesta esplicita). */
.ac-prossimi-seminari-title {
    text-align: center;
    text-transform: uppercase;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

/* [ac_masthead] — testata illustrata della home (replica del sito di produzione).
   aspect-ratio pari a quello nativo di header9.jpg (2000x800 = 2.5) + background-size:contain
   (mai cover): l'illustrazione originale non va mai ritagliata, a differenza della versione
   Divi di produzione che invece la ritagliava leggermente su viewport molto larghi. */
.ac-masthead {
    position: relative;
    aspect-ratio: 2.5;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    overflow: hidden;
}
.ac-masthead__logo {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, 24%);
    height: auto;
    will-change: transform;
}
.ac-masthead__moon {
    position: absolute;
    top: 32%;
    transform: translateY(-50%);
    width: 9%;
    height: auto;
    will-change: transform;
}
.ac-masthead__moon--sx { left: 4%; }
.ac-masthead__moon--dx { right: 4%; }
@media (max-width: 767.98px) {
    .ac-masthead__moon { display: none; }
    .ac-masthead__logo { width: 28%; }
}

/* [ac_testata] — testata di pagina riusabile: immagine di sfondo + fascia sotto con angolo
   arrotondato che sale sopra l'immagine (stesso pattern overlap del resto del sito, qui
   applicato in negativo su un componente indipendente da .entry-content anziché su una banda
   .py-5). Immagine più bassa dei 700px del modello di produzione (richiesta esplicita). */
.ac-testata {
    position: relative;
}
.ac-testata__img {
    height: 280px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}
/* Breadcrumb Yoast sovrapposto in basso all'immagine (richiesta esplicita) — flex align-end sul
   contenitore invece di position:absolute, niente calcoli di altezza da coordinare col resto.
   margin-bottom pari al margin-top:-56px della banda sotto: senza, i 56px finali
   dell'immagine restano coperti dalla banda che vi si sovrappone (stesso pattern overlap del
   resto del sito) e il breadcrumb, allineato in fondo, ci finiva esattamente dentro —
   invisibile pur essendo presente nel DOM (verificato: renderizzato, colore bianco corretto,
   semplicemente dipinto sotto la banda successiva). */
.ac-testata__breadcrumb {
    margin-bottom: var(--ac-band-overlap);
    padding: 0.75rem 0;
    font-size: 0.8125rem;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.ac-testata__breadcrumb a {
    color: #fff;
    text-decoration: underline;
}
.ac-testata__breadcrumb a:hover {
    text-decoration: none;
}
.ac-testata__banda {
    position: relative;
    margin-top: calc(var(--ac-band-overlap) * -1);
    padding: 2.5rem 0;
    background: var(--ac-sage);
    border-radius: var(--ac-band-overlap) var(--ac-band-overlap) 0 0;
}
.ac-testata__banda h1 {
    margin: 0;
    text-align: center;
    text-transform: uppercase;
    color: var(--ac-magenta);
}
.ac-testata__eyebrow {
    margin: 0 0 0.4em;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.05em;
    color: var(--ac-accent-ink);
}
@media (max-width: 767.98px) {
    .ac-testata__img { height: 180px; }
}

/* [ac_newsletter] — form embed nativo Mailchimp, sostituisce et_pb_signup. Il titolo è un <h5>
   (non più <p>) apposta: stessa altezza/stile di "Contatti"/"Seguici su" nel footer, nessun
   font-size proprio che lo scavalchi. */
.ac-newsletter__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ac-space-2);
    margin-bottom: var(--ac-space-2);
}
.ac-newsletter__row .form-control {
    flex: 1 1 160px;
}
.ac-newsletter__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--ac-space-2);
    font-size: 0.8125rem;
    margin-bottom: var(--ac-space-3);
}
.ac-newsletter__consent input[type="checkbox"] {
    margin-top: 0.2em;
    flex-shrink: 0;
}
.ac-newsletter .btn-primary {
    background-color: var(--ac-accent);
    border-color: var(--ac-accent);
}

/* Form: input/select/textarea coerenti in tutto il sito (CF7, newsletter) */
.form-control, .wpcf7-form-control {
    border-radius: var(--ac-radius-sm);
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 0.65rem 1rem;
    font-family: var(--ac-font-body);
    transition: border-color var(--ac-transition), box-shadow var(--ac-transition);
}
.form-control:focus, .wpcf7-form-control:focus {
    border-color: var(--ac-accent);
    box-shadow: 0 0 0 3px rgba(240, 126, 7, 0.25);
}

/* Immagini decorative piccole (frecce, ornamenti) inserite via bs_image */
.ac-decor {
    max-width: 110px;
    display: block;
    margin: var(--ac-space-4) auto;
    opacity: 0.85;
}

/* Banda scura (sezioni con bg_color brand su testo chiaro) */
.ac-band-dark, .ac-band-dark h1, .ac-band-dark h2, .ac-band-dark h3, .ac-band-dark h4,
.ac-band-dark h5, .ac-band-dark p, .ac-band-dark li, .ac-band-dark blockquote {
    color: #fff;
}
.ac-band-dark a:not(.btn) {
    color: #fff;
    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0.5);
}
.ac-band-dark .btn-primary {
    --bs-btn-color: var(--ac-magenta);
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-hover-bg: var(--ac-sage);
    --bs-btn-hover-border-color: var(--ac-sage);
    --bs-btn-active-bg: var(--ac-teal);
    --bs-btn-active-border-color: var(--ac-teal);
}

/* Card servizi (immagine + titolo + bottone) */
.ac-service-card {
    text-align: center;
    background-color: rgba(255, 255, 255, 0.55);
    border-radius: var(--ac-radius-md);
    padding: var(--ac-space-5) var(--ac-space-4);
    height: 100%;
    transition: transform var(--ac-transition), box-shadow var(--ac-transition);
}
.ac-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ac-shadow-md);
}
.ac-service-card img {
    max-width: 130px;
    margin: 0 auto var(--ac-space-3);
}
/* Il builder avvolge ogni bottone in un div "text-start" (utility Bootstrap
   !important) a prescindere dal contesto: dentro la card servizi rompeva la
   centratura di .ac-service-card, e nella band scura "Il Tantra" (colonna
   centrata sotto un'immagine a piena larghezza) lasciava il bottone appeso
   a sinistra invece che sotto l'immagine. Restano invece a sinistra dove
   seguono paragrafi di testo sinistrorso (Sessioni, Lo spazio, il libro):
   lì l'allineamento col testo sopra è corretto, non toccato. */
.ac-service-card .text-start,
.ac-band-dark .text-start {
    text-align: center !important;
}

.ac-service-card h3 {
    font-size: 1.15rem;
    margin-bottom: var(--ac-space-4);
}

/* Icone social (sostituisce et_pb_social_media_follow) */
.ac-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--ac-teal);
    color: var(--ac-magenta);
    margin-right: var(--ac-space-2);
    font-size: 1.15rem;
    transition: background-color var(--ac-transition), color var(--ac-transition), transform var(--ac-transition);
}
.ac-social-icon:hover, .ac-social-icon:focus-visible {
    background-color: var(--ac-accent);
    color: var(--ac-accent-ink);
    transform: translateY(-2px);
}

/* Accordion (FAQ, sostituisce et_pb_toggle via bs_accordion) */
.accordion-item {
    border: none;
    border-radius: var(--ac-radius-sm) !important;
    margin-bottom: var(--ac-space-3);
    box-shadow: var(--ac-shadow-sm);
    overflow: hidden;
}
.accordion-button {
    font-family: var(--ac-font-heading);
    font-size: 1.05rem;
    padding: var(--ac-space-4) var(--ac-space-5);
    background-color: #fff;
    color: var(--ac-text);
}
.accordion-button:not(.collapsed) {
    background-color: var(--ac-sage);
    color: var(--ac-accent-ink);
    box-shadow: none;
}
/* :focus-visible invece di :focus: l'anello arancione serve per la navigazione da tastiera,
   non deve restare visibile dopo un semplice click con il mouse (segnalato da Marco come
   "riga arancio" indesiderata sotto la domanda aperta, 2026-09-28). */
.accordion-button:focus {
    box-shadow: none;
}
.accordion-button:focus-visible {
    box-shadow: 0 0 0 3px rgba(240, 126, 7, 0.25);
}
.accordion-body {
    font-family: var(--ac-font-body);
    padding: var(--ac-space-2) var(--ac-space-5) var(--ac-space-5);
}

/* Icona toggle: una "+" che ruota a 45° diventando una "×" invece del chevron di default
   di Bootstrap — richiesta esplicita 2026-09-28 ("non le frecce, non i +/-, ma qualcosa di
   più bello che resti chiaro"). Un'unica icona animata invece di due icone statiche separate. */
.accordion-button::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f07e07'%3E%3Cpath d='M8 0a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") !important;
    width: 1.1rem;
    height: 1.1rem;
    background-size: 1.1rem;
    transition: transform var(--ac-transition);
}
.accordion-button:not(.collapsed)::after {
    transform: rotate(45deg);
}

/* Variante "flush" (bordi/ombra rimossi): righe sottili separate da un filo, sfondo unico
   della pagina invece di card bianche — stile della pagina FAQ storica del sito, meno
   "a pannelli" di quello a card piene (richiesta esplicita 2026-09-28). */
.accordion-flush .accordion-item {
    background-color: transparent;
    border-radius: 0 !important;
    box-shadow: none;
    margin-bottom: 0;
    border-bottom: 1px solid rgba(134, 0, 86, 0.15);
}
.accordion-flush .accordion-item:first-child {
    border-top: 1px solid rgba(134, 0, 86, 0.15);
}
.accordion-flush .accordion-button {
    background-color: transparent;
    padding-left: var(--ac-space-3);
    padding-right: var(--ac-space-3);
    color: var(--ac-link);
}
.accordion-flush .accordion-button:not(.collapsed) {
    background-color: transparent;
    color: var(--ac-accent-ink);
}
.accordion-flush .accordion-body {
    padding-left: var(--ac-space-3);
    padding-right: var(--ac-space-3);
}

/* Mappa (bs_map / Leaflet) */
.leaflet-container {
    border-radius: var(--ac-radius-md);
    box-shadow: var(--ac-shadow-sm);
}

/* Transizione morbida fra le band di sezione (.py-5 = ogni "riga" emessa dal
   builder in home page), come sul sito live: angolo arrotondato in alto, invisibile
   fra sezioni dello stesso colore, visibile solo ai cambi di sfondo.
   Il widget "Spaziatura" del builder (box model per singolo lato) non scrive mai la
   scorciatoia .py-5, anche con top e bottom uguali: genera sempre .pt-5.pb-5 separate
   — quindi ogni selettore .py-5 qui sotto ha il suo equivalente .pt-5.pb-5. */
.entry-content > .py-5,
.entry-content > .pt-5.pb-5,
.entry-content > .ac-hero {
    border-radius: 56px 56px 0 0;
}
/* Le sezioni sono semplicemente adiacenti: il taglio arrotondato rivelava lo
   sfondo crema della pagina (dietro, non essendoci sovrapposizione) invece
   del colore/immagine della sezione precedente. Si sovrappone ogni sezione
   (tranne la prima, sotto la navbar) alla precedente per l'esatta misura del
   raggio, così l'angolo tagliato rivela la sezione sopra e non la pagina. */
.entry-content > .py-5:not(:first-child),
.entry-content > .pt-5.pb-5:not(:first-child),
.entry-content > .ac-hero:not(:first-child) {
    margin-top: -56px;
}

/* Più spazio nel pannello che precede un cambio di sezione: pb-5 (48px) meno l'overlap
   dell'angolo arrotondato (-56px, sopra) lascia quasi zero margine reale fra il contenuto
   (testo, bottoni) e la curva del pannello successivo — richiesta esplicita di Marco.
   Non applicata all'ultima sezione della pagina: non ha una curva successiva da "respirare". */
.entry-content > .py-5:not(:last-child),
.entry-content > .pt-5.pb-5:not(:last-child) {
    padding-bottom: calc(3rem + 2.5rem) !important;
}

/* Sezione "Cos'è A Cuore Aperto" — sfondo magenta scuro, separata (non il solito overlap -56px
   fra bande adiacenti) dalla sezione sopra, raggio 60px invece del 56px di default. Testo in
   chiaro: senza, titolo e paragrafi (colore scuro di default) sparirebbero sullo sfondo scuro. */
.entry-content > .py-5.ac-section-cosa-e,
.entry-content > .pt-5.pb-5.ac-section-cosa-e {
    border-radius: 60px 60px 0 0;
    margin-top: 3rem;
}

/* Pagine "Lo spazio" e "Contatti" — richiesta esplicita di Marco di togliere l'effetto "pannelli
   che salgono": la prima banda di contenuto sovrapponeva -56px sulla fascia della testata
   sopra, mangiandone parte del titolo (difetto reale, verificato dal vivo: solo una sottile
   riga color crema restava visibile sopra la banda magenta successiva). Struttura più semplice:
   bande semplicemente adiacenti, nessuna sovrapposizione/angolo arrotondato fra loro. Scoped
   per ID pagina (body.page-id-*), nessun'altra pagina del sito toccata — caso storico, per le
   nuove sezioni usare la classe .ac-radius-none qui sotto invece di aggiungere altri page-id. */
body.page-id-48 .entry-content > .py-5,
body.page-id-4212 .entry-content > .py-5 {
    margin-top: 0;
    border-radius: 0;
}

/* Modificatori del raggio/overlap, da scrivere nel campo "Classe CSS" del container nel builder
   (campo sempre presente su ogni elemento, aggiunto automaticamente dal builder) — per gestire
   il caso senza dover chiedere una modifica CSS ogni volta. */
.entry-content > .py-5.ac-radius-none,
.entry-content > .pt-5.pb-5.ac-radius-none {
    margin-top: 0;
    border-radius: 0;
}
.entry-content > .py-5.ac-radius-lg,
.entry-content > .pt-5.pb-5.ac-radius-lg {
    border-radius: 60px 60px 0 0;
}
.ac-section-cosa-e {
    text-align: center;
}
.ac-section-cosa-e h3,
.ac-section-cosa-e p,
.ac-section-cosa-e blockquote {
    color: #fff;
}
/* .blockquote-footer di Bootstrap ha un grigio proprio (#6c757d) più specifico del colore
   ereditato da blockquote sopra — su questo sfondo magenta scuro risultava illeggibile
   (verificato: rgb(108,117,125) su #870053, contrasto insufficiente). */
.ac-section-cosa-e .blockquote-footer {
    color: #fff;
}
.ac-section-cosa-e__img {
    display: block;
    max-width: 400px;
    height: auto;
    margin: 0 auto 1.5rem;
}
.ac-section-cosa-e h3 {
    text-transform: uppercase;
    font-size: 2.5rem;
}

/* Le 3 colonne Seminari/Formazione/Sessioni, spostate dentro la sezione viola, diventano card:
   sfondo chiaro (stesso crema di base del sito, non più il riquadro semitrasparente) per
   staccare bene dal magenta pieno della sezione — testo quindi tornato scuro qui dentro,
   diversamente dal resto della sezione. Altezza uguale data dallo stretch di default del flex
   della .row (align-items:normal → stretch): NIENTE height:100% qui, un'altezza percentuale
   esplicita sul figlio confonde l'algoritmo two-pass del cross-size flex e produce card di
   altezza diversa (verificato dal vivo: senza height:100% tutte e 3 arrivano alla stessa altezza
   del contenuto più lungo, con height:100% no — 574px vs 608px). flex-column + margin-top:auto
   sull'ultimo figlio (il bottone, wrappato da bs_button in un div) ancora il bottone in fondo a
   prescindere da quanto testo precede. */
.ac-card {
    background: #eff2e2;
    border-radius: 16px;
    padding: 2rem 1.5rem;
    margin-bottom: 3rem;
    display: flex;
    flex-direction: column;
}
/* .ac-card è applicata direttamente sulla colonna (el_class su bs_column), non su un wrapper
   interno: il proprio "padding: 2rem 1.5rem" sovrascrive (stessa specificità, dichiarato dopo)
   il padding-gutter di Bootstrap sulla stessa .col-md-4, annullando lo spazio reale fra card
   (gx-4 diventava solo padding interno colorato, le colonne restavano perfettamente adiacenti —
   verificato: getBoundingClientRect().right della prima card = .left della seconda, 0px reali).
   Fix: stesso pattern già in uso per il carosello eventi (flex-basis calc invece del gutter
   Bootstrap) solo da md in su, dove col-md-4 è realmente affiancata (sotto resta impilata). */
@media (min-width: 768px) {
    .ac-section-cosa-e .row > .ac-card {
        flex: 0 0 calc((100% - 2 * 24px) / 3);
        max-width: calc((100% - 2 * 24px) / 3);
        margin-right: 24px;
    }
    .ac-section-cosa-e .row > .ac-card:last-child {
        margin-right: 0;
    }
}
.ac-card > *:last-child {
    margin-top: auto;
}
.ac-card__img {
    display: block;
    max-width: 300px;
    height: auto;
    margin: 0 auto 1rem;
}
.ac-card h4 {
    text-transform: uppercase;
    font-size: 1.75rem;
    color: var(--ac-link);
}
.ac-card p {
    color: var(--ac-text);
}
/* btn-outline-primary (bordo/testo magenta) sparirebbe su uno sfondo magenta quasi identico —
   qui in chiaro, coerente col resto del testo della sezione. Non dentro le card: quelle hanno
   sfondo chiaro proprio, il magenta di default va benissimo lì (override più specifico, dopo). */
.ac-section-cosa-e .btn-outline-primary {
    color: #fff;
    border-color: #fff;
}
.ac-section-cosa-e .btn-outline-primary:hover {
    background: #fff;
    color: #870053;
}
.ac-card .btn-outline-primary {
    color: var(--ac-magenta);
    border-color: var(--ac-magenta);
}
.ac-card .btn-outline-primary:hover {
    background: var(--ac-magenta);
    color: #fff;
}

/* [ac_stats] — statistiche con numero animato al contatore (stesso pattern già in produzione
   su clivati.it: IntersectionObserver + easing cubico in ac-stats-counter.js). */
.ac-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}
.ac-stat-block {
    text-align: center;
    flex: 1;
    min-width: 140px;
}
.ac-stat-num {
    font-family: var(--ac-font-heading);
    font-weight: 700;
    font-size: 2.5rem;
    color: var(--ac-link);
}
.ac-stat-unit {
    font-size: 1.5rem;
}
.ac-stat-desc {
    font-size: 0.9375rem;
    opacity: 0.8;
}
.ac-stat-divider {
    width: 1px;
    height: 48px;
    background: currentColor;
    opacity: 0.2;
    margin: 0 2rem;
}
@media (max-width: 767.98px) {
    .ac-stat-divider { display: none; }
}

/* Sezione CTA WhatsApp dopo "Chi siamo in numeri": separata visivamente (niente sfondo
   proprio, torna sulla pagina di base) con più spazio sopra, richiesto esplicitamente perché
   le due sezioni non si leggessero come un unico blocco continuo. Specificità pari alla regola
   generale di overlap (.entry-content > .py-5:not(:first-child){margin-top:-56px}, stesso
   selettore + classe extra, non !important) per poterla davvero sovrascrivere qui. */
.entry-content > .py-5.ac-section-cta-whatsapp {
    margin-top: 2rem;
}

/* Comparsa a slide verso l'alto delle sezioni all'ingresso in viewport, come
   sul sito live (Divi "fadeBottom": opacity 0 + translateY(10%) -> opacity 1
   + translateY(0), 1s). Applicata via IntersectionObserver in ac-reveal.js:
   la classe .ac-reveal è aggiunta solo se JS gira, così senza JS le sezioni
   restano semplicemente visibili invece di sparire per sempre. */
.ac-reveal {
    opacity: 0;
    transform: translateY(10%);
    transition: opacity 1s ease-out, transform 1s ease-out;
}
.ac-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Footer */
.ac-footer {
    background-color: var(--ac-sage);
    padding-top: var(--ac-space-3);
}
.ac-footer h5, .ac-footer strong {
    font-family: var(--ac-font-heading);
}
.ac-footer__menu {
    padding: 0;
    margin: 0;
    list-style: none;
}
.ac-footer__menu li {
    margin-bottom: var(--ac-space-2);
}
.ac-footer__menu a {
    color: var(--ac-text);
    text-decoration: none;
}
.ac-footer__menu a:hover {
    color: var(--ac-link);
    text-decoration: underline;
}
.ac-footer .site-info a {
    color: var(--ac-link);
}

/* Riga superiore del footer, fedele al footer Divi di produzione (colori misurati dal vivo,
   non stimati): sfondo magenta pieno, testo/link/titoli in arancio — stesso schema ovunque,
   niente contrasto chiaro/scuro come nel resto del sito. Angolo arrotondato in alto come le
   altre bande del sito (stesso raggio 56px) — qui senza il consueto margin-top negativo di
   overlap: il footer non è dentro .entry-content e non ha una banda sopra con cui fondersi,
   basta il solo border-radius a rivelare lo sfondo crema della pagina dietro l'angolo. */
.ac-footer--brand {
    background-color: var(--ac-magenta);
    color: var(--ac-accent);
    border-radius: var(--ac-band-overlap) var(--ac-band-overlap) 0 0;
    overflow: hidden;
}
.ac-footer--brand h5,
.ac-footer--brand p,
.ac-footer--brand strong {
    color: var(--ac-accent);
}
.ac-footer--brand a,
.ac-footer--brand .ac-footer__menu a,
.ac-footer--brand .site-info a {
    color: var(--ac-accent);
    text-decoration: none;
}
.ac-footer--brand a:hover,
.ac-footer--brand .ac-footer__menu a:hover,
.ac-footer--brand .site-info a:hover {
    color: #fff;
    text-decoration: none;
}
.ac-footer--brand .site-info {
    text-align: center;
}
.ac-footer__logo {
    max-width: 160px;
    height: auto;
}

/* Gravity Forms — allineato alla grafica del sito (richiesta esplicita 2026-09-28): stessi
   valori di .form-control/.wpcf7-form-control (bordo, radius, padding, font) e .btn-primary
   (bottone a pillola arancione) invece del tema di default "Orbital" (blu, angoli squadrati).
   Le CSS custom properties sono l'API di theming ufficiale di GF (versione con theme framework
   attivo) — dove non bastano, alcuni selettori diretti sotto fanno da rete di sicurezza. */
.gform-theme--foundation {
    --gf-color-primary: var(--ac-accent);
    --gf-color-primary-contrast: var(--ac-accent-ink);
    --gf-color-primary-darker: #c96500;
    --gf-color-primary-lighter: #ffab52;

    --gf-ctrl-font-family: var(--ac-font-body);
    --gf-ctrl-radius: var(--ac-radius-sm);
    --gf-ctrl-border-color: rgba(0, 0, 0, 0.15);
    --gf-ctrl-border-color-hover: rgba(0, 0, 0, 0.3);
    --gf-ctrl-border-color-focus: var(--ac-accent);
    --gf-ctrl-padding-x: 1rem;
    --gf-ctrl-padding-y: 0.65rem;
    --gf-ctrl-outline-color-focus: var(--ac-accent);

    --gf-ctrl-btn-radius-primary: var(--ac-radius-pill);
    --gf-ctrl-btn-padding-x-primary: 1.75rem;
    --gf-ctrl-btn-padding-y-primary: 0.65rem;
    --gf-ctrl-btn-font-family: var(--ac-font-nav);
    --gf-ctrl-btn-font-weight: 600;
    --gf-ctrl-btn-letter-spacing: 0.02em;

    --gf-ctrl-label-font-family-primary: var(--ac-font-body);
    --gf-ctrl-desc-font-family: var(--ac-font-body);
}

/* Rete di sicurezza: stessa dichiarazione diretta già usata per .form-control/.wpcf7-form-control,
   nel caso le CSS variable sopra non coprano un elemento specifico (select, textarea nativi). */
.gform-theme--foundation input[type="text"],
.gform-theme--foundation input[type="email"],
.gform-theme--foundation input[type="tel"],
.gform-theme--foundation input[type="number"],
.gform-theme--foundation select,
.gform-theme--foundation textarea {
    border-radius: var(--ac-radius-sm) !important;
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    font-family: var(--ac-font-body) !important;
}
.gform-theme--foundation input[type="text"]:focus,
.gform-theme--foundation input[type="email"]:focus,
.gform-theme--foundation input[type="tel"]:focus,
.gform-theme--foundation input[type="number"]:focus,
.gform-theme--foundation select:focus,
.gform-theme--foundation textarea:focus {
    border-color: var(--ac-accent) !important;
    box-shadow: 0 0 0 3px rgba(240, 126, 7, 0.25) !important;
    outline: none !important;
}
/* Le CSS custom properties --gf-color-primary/-ctrl-btn-* sopra vengono ridefinite (stesso
   valore di default blu #204ce5) dal tema "orbital" di GF, caricato dopo questo foglio nella
   cascata — a parità di specificità vince l'ultimo. Colore/bordo del bottone quindi diretti
   con !important invece di passare dalla custom property, stessa logica già usata per
   radius/font qui sopra. */
.gform-theme--foundation .gform_button {
    background-color: var(--ac-accent) !important;
    border-color: var(--ac-accent) !important;
    color: var(--ac-accent-ink) !important;
    border-radius: var(--ac-radius-pill) !important;
    font-family: var(--ac-font-nav) !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    box-shadow: var(--ac-shadow-sm);
}
.gform-theme--foundation .gform_button:hover {
    background-color: #ffab52 !important;
    border-color: #ffab52 !important;
    box-shadow: var(--ac-shadow-md);
}

/* Pagina "Lo spazio" — griglia foto e ritratti ad altezza uniforme (prima ogni immagine
   teneva la propria altezza naturale, righe di 3/2/1 immagini con bordo inferiore a scalini). */
.ac-gallery-img {
    height: 280px;
    object-fit: cover;
}
.ac-portrait-img {
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
/* freccia.png (500x582 nativo) era "img-fluid" dentro una colonna a piena larghezza: si
   allargava alla larghezza dell'intero container invece di restare una piccola decorazione.
   Stesso bug anche su Contatti e corsi-e-seminari (stesso shortcode copiato), non ancora corretto lì. */
/* [ac_photo_carousel] — galleria a carosello trascinabile, altezza fissa via var CSS,
   sostituisce il vecchio carosello fullwidth + le righe di foto impilate su "Lo spazio". */
.ac-photo-carousel {
    height: var(--ac-carousel-height, 320px);
}
.ac-photo-carousel .swiper-slide {
    height: auto;
}
.ac-photo-carousel .swiper-slide a,
.ac-photo-carousel .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.5rem;
    object-fit: cover;
}
.ac-freccia {
    max-width: 90px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ============================================================
   RESPONSIVE — la navbar/hero/card grid usano già il grid Bootstrap
   (col-md-*), qui solo rifiniture per mobile stretto.
   ============================================================ */
@media (max-width: 767.98px) {
    /* Sotto md le colonne lune+monti si impilano: qui la mappa torna a piena
       larghezza (come sul sito live su mobile), niente riquadro piccolo centrato */
    .py-5[style*="header9.jpg"] {
        background-size: cover !important;
        min-height: 260px;
    }
    .ac-hero { padding: 3.5rem 1.25rem; }
    .btn { width: 100%; }
    .ac-newsletter__row .form-control { flex-basis: 100%; }
}

/* Pagina risultati di ricerca (search.php) — prima nuda/senza stile, ereditata dal tema
   padre senza alcun adattamento al brand. */
.search-results article {
    max-width: 720px;
    margin: 0 auto var(--ac-space-5);
    padding-bottom: var(--ac-space-5);
    border-bottom: 1px solid rgba(134, 0, 86, 0.15);
}
.search-results article:last-child {
    border-bottom: none;
}
.search-results .entry-title {
    font-family: var(--ac-font-heading);
    font-size: 1.25rem;
    margin-bottom: var(--ac-space-2);
}
.search-results .entry-title a {
    color: var(--ac-link);
}
.search-results .entry-summary {
    font-size: 0.9375rem;
}
/* Titolo di pagina più contenuto della h1 generica (clamp fino a 3.5rem) — qui è una pagina
   di servizio, non una band hero con immagine come le altre. */
.search-page-title {
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
}