/* =========================================================================
   Landing page — CSS standalone ispirato al tema controllabolletta
   -------------------------------------------------------------------------
   Variabili colore/radius replicate dai file del tema (controllabolletta.css,
   custom-bootstrap.css) per restare visivamente coerenti senza dipendere
   da Bootstrap.
   ========================================================================= */

:root {
    --color-primary-500: #f29200;
    --color-primary-600: #f39314;
    --color-grey-01:     #eff3f7;
    --color-grey-02:     #d2d9de;
    --color-secondary:   #1a1a1a;
    --color-secondary-60: rgba(26, 26, 26, 0.6);
    --color-footer-bg:   #0f1a2a;
    --color-white:       #ffffff;

    --radius-13:   13px;
    --radius-3xl:  1.5rem;
    --radius-4xl:  2rem;

    --container-max: 1240px;

    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 100px;
    --space-5-x: 2rem; /* usato al posto di --space-5 sulle proprietà asse X */
    --space-6: 3rem;
    --space-7: 4rem;
    --space-8: 5rem;

    --font-sans: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    color: var(--color-secondary);
    background: var(--color-white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

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

h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(2rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }
h4 { font-size: 1.1rem; }
b, strong { font-weight: 400; }

p { margin: 0; }

.landing-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-5-x);
}

@media screen and (max-width: 991px){
    :root { --space-5: 75px; }
    .landing-container {
        padding:0 1rem!important;
    }

}

/* =========================================================================
   BUTTON V3 — regole copiate dal tema (custom-bootstrap.css + time.css),
   necessarie per i bottoni "Torna al sito" (header) e "Iscriviti al webinar"
   (legenda). Richiedono Bootstrap per d-flex/align-items-center/gap-3/
   d-block/position-relative/overflow-hidden/flex-shrink-0/justify-content-
   center/z-20, già caricato.
   ========================================================================= */

.btn-v3-secondary {
    background-color: var(--color-primary-600, #f39314);
    color: var(--color-white, #fff);
    border-radius: 1rem;
}
.btn-v3-secondary [data-button-v3-icon] {
    background-color: var(--color-white, #fff);
    fill: var(--color-secondary, #1a1a1a);
}

.btn-v3-secondary a{text-decoration: none;}

.btn-v3-lg {
    font-size: 1.3rem;
    line-height: 150%;
    font-weight: normal;
}
.btn-v3-lg [data-button-v3-icon] {
    width: 2.75rem;
    height: 2.75rem;
}

[data-button-v3-icon] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    padding: 0.625rem;
    flex-shrink: 0;
    overflow: hidden;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 20;
}

[data-button-v3-text] {
    flex-shrink: 0;
    padding-right: 1rem;
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-button-v3-text]::first-letter { text-transform: uppercase; }

.sliderbtn-slide { background-color: #fff; }
.sliderbtn .sliderbtn-txt { color: #fff; }

/* Utility usate dai bottoni V3 (prefisso -tw-, custom del tema) */
.w-fit             { width: fit-content; }
.cursor-pointer    { cursor: pointer; }
.rounded-2xl       { border-radius: 1rem; }
.rounded-13        { border-radius: 13px; }
.px-tw-1           { padding-inline: 0.25rem; }
.py-tw-1           { padding-block: 0.25rem; }
.p-tw-3            { padding: 0.75rem; }
.pr-tw-4           { padding-right: 1rem; }
.transition-all-700 { transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }

/* .size-6 era già scoped nel footer; qui ne faccio una versione globale
   per permettere di usarla dentro i Button V3 fuori dal footer. */
.size-6 { width: 1.5rem; height: 1.5rem; }

/* Il bottone .region-cta-btn (wrapper <div>) va in display:inline-block
   quando il suo item di legenda è attivo (regola is-active già esistente). */
.map-legend-item.is-active .region-cta-btn { display: inline-block; }

/* ---------- Header -------------------------------------------------------- */

.landing-header {
    padding: var(--space-3);
    /*border-bottom: 1px solid var(--color-grey-01);*/
    background: var(--color-white);
}

.landing-header .landing-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Layout a 3 colonne: logo al centro, CTA "Torna al sito" a destra, spacer
   invisibile a sinistra per bilanciare il centraggio del logo. */
.landing-header .landing-container.landing-header-row {
    display: flex;
    /*grid-template-columns: 1fr auto 1fr;
    align-items: center;*/
    gap: var(--space-3);
    justify-content: space-between;
}

.landing-header-spacer { display: block; }

.landing-brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    justify-self: center;
}

.landing-brand img { max-height: 60px; width: auto; }

.landing-back-site {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 1px solid var(--color-primary-500, #f29200);
    color: #fff;
    background: var(--color-primary-500, #f29200);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1;
    transition: background 180ms ease, color 180ms ease;
    white-space: nowrap;
}
.landing-back-site svg { fill: currentColor; }
.landing-back-site:hover {
    background: #fff;
    color: #000;
}

@media (max-width: 600px) {
    .landing-header-spacer { display: none; }
    .landing-header .landing-container.landing-header-row {
        grid-template-columns: auto 1fr;
    }
    .landing-brand       { justify-self: start; }
    .landing-brand img   { max-height: 44px; }
    /*.landing-back-site   { padding: 0.4rem 0.75rem; font-size: 0.85rem; }*/
    .landing-back-site   { padding: 0.8rem 0.8rem; font-size: 0.85rem; }
    .landing-back-site span { display: none; } /* su mobile resta solo l'icona */
}

/* ---------- Main / Hero --------------------------------------------------- */

/*.landing-main { padding-bottom: var(--space-8); }*/

/* ---------- Hero image (replica di page-scopri-benchmonitor.php) --------- */

.landing-hero-image {
    /*margin: var(--space-3) 1.25rem 0;*/
    margin: 0 1.25rem 0;
    border-radius: var(--radius-3xl);
    overflow: hidden;
    position: relative;
}

/* CTA volante sovrapposto all'immagine di testata, allineato con il testo
   contenuto nell'immagine (sinistra, verso la metà/basso).
   Regola `left` e `bottom` se la posizione del testo nella grafica cambia. */
.hero-image-cta {
    position: absolute;
    right: 6%;
    bottom: 10%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.9rem 1.5rem;
    border-radius: 999px;
    background: var(--color-primary-500, #f29200);
    color: #fff;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
    white-space: nowrap;
}
.hero-image-cta:hover {
    background: #fff;
    color: #000;
    transform: translateY(-2px);
}

@media (max-width: 991px) {
    .hero-image-cta {
        left: 50%;
        right: auto;
        bottom: 20px;
        padding: 0.65rem 1.1rem;
        font-size: 0.85rem;
        transform: translateX(-50%);
    }
}

.landing-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

.landing-hero-image .hero-img-desktop { display: block; }
.landing-hero-image .hero-img-mobile  { display: none; }

@media (max-width: 991px) {
    .landing-hero-image {
        /*margin: var(--space-3) 10px 0;*/
        margin: 0 10px 0;
        border-radius: 1rem;
    }
    .landing-hero-image .hero-img-desktop { display: none; }
    .landing-hero-image .hero-img-mobile  { display: block; }
}

.landing-hero {
    padding: var(--space-5) 0;
    text-align: left;
}
@media (max-width: 991px) {
    .landing-hero {
        padding: var(--space-5) 10px var(--space-4);
    }
}

.landing-hero-title {
    max-width: none;
    margin: 0 0 20px;
}

.landing-hero-desc {
    max-width: none;
    margin: 0;
    color: #000;
    font-size: 1.3rem;
    font-weight: 300;
    line-height: 130%;
}

/* ---------- Sezione split 2/3 + 1/3 --------------------------------------- */

.landing-split { padding: var(--space-5) 0; }

.landing-split-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-4);
    align-items: stretch;
}

@media (max-width: 900px) {
    .landing-split-grid { grid-template-columns: 1fr; }
}

.landing-card {
    background: var(--color-grey-01);
    border-radius: var(--radius-4xl);
    padding: var(--space-5) var(--space-5-x);
    min-height: 480px;
    display: flex;
    flex-direction: column;
}

.landing-card-map {
    align-items: center;
    justify-content: center;
    padding: var(--space-3);
}

/* Titolo sopra la mappa (visibile sia desktop sia mobile). */
.map-mobile-title {
    display: block;
    margin: 0 0 var(--space-3);
}

@media (max-width: 900px) {
    .landing-split { padding: 0 10px; }
    .landing-split .landing-container { padding: 0 var(--space-3); }
    .landing-card { padding: var(--space-4); min-height: 0; }
    .landing-card-map { padding: var(--space-4); }
}

.landing-card-text { justify-content: center; }

.landing-card-title { margin-bottom: var(--space-3); }

.landing-card-title b, .landing-card-title strong { font-weight: 700; }

.landing-card-desc {
    color: var(--color-secondary-60);
    font-size: 1rem;
}

/* =========================================================================
   SEARCH REGION (chip + suggestions) — regole COPIATE dal tema
   (page-notizie.php inline <style>) e dai suoi fogli di stile.
   ========================================================================= */

/* dropdown dei suggerimenti */
.news-suggestions {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 20;
    list-style: none;
    padding: 0.35rem 0;
    margin: 0;
    background: #fff;
    border: 1px solid var(--color-stroke-2, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    max-height: 260px;
    overflow-y: auto;
}
.news-suggestions[hidden] { display: none; }
.news-suggestions li {
    padding: 0.55rem 1rem;
    font-size: 0.95rem;
    color: var(--color-secondary, #1a1a1a);
    cursor: pointer;
    line-height: 1.25;
}
.news-suggestions li:hover,
.news-suggestions li[aria-selected="true"] {
    background: var(--color-grey-01, #f3f4f6);
    color: var(--color-primary-500, #f29200);
}
.news-suggestions li mark {
    background: transparent;
    color: var(--color-primary-500, #f29200);
    font-weight: 600;
    padding: 0;
}

/* chip dei tag/regioni selezionati */
.news-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--color-primary-500, #f29200);
    color: #fff;
    border-radius: 999px;
    padding: 0.15rem 0.35rem 0.15rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.2;
    max-width: 100%;
}
.news-chip-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.news-chip-remove {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.35rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.4em;
    width: 1.4em;
}
.news-chip-remove:hover { background: rgba(255, 255, 255, 0.25); }

/* =========================================================================
   BLOCCO "REGIONE SELEZIONATA" + CTA WEBINAR
   ========================================================================= */

.region-selected {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    /*margin-bottom: 1.25rem;*/
    margin-bottom: 1rem;
}

.region-selected[hidden] { display: none; }

.region-selected-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid var(--color-grey-02, #d2d9de);
    border-radius: 999px;
    padding: 0.3rem 0.4rem 0.3rem 0.9rem;
    /*font-size: 0.95rem;*/
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--color-secondary);
    max-width: 100%;
}

.region-selected-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.region-selected-remove {
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.4rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.5em;
    width: 1.5em;
}
.region-selected-remove:hover { background: var(--color-grey-01, #eff3f7); }

/* .region-cta-btn: wrapper del Button V3 "Iscriviti al webinar"; nascosto
   di default, mostrato come inline-block solo quando il suo item di legenda
   è attivo (classe .is-active applicata via JS). Gli stili visivi (sfondo,
   padding, border-radius, hover) arrivano dalle classi del Button V3. */
.region-cta-btn { display: none; }
.map-legend-item.is-active .region-cta-btn { display: inline-block; }

/* =========================================================================
   REGION MODAL (mobile)
   ========================================================================= */

.region-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.region-modal[hidden] { display: none; }

.region-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 26, 42, 0.55);
    cursor: pointer;
}

.region-modal-dialog {
    position: relative;
    background: #fff;
    border-radius: var(--radius-3xl, 1.5rem);
    padding: 1.75rem 1.5rem 1.5rem;
    width: min(100%, 640px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.region-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: transparent;
    border: 0;
    color: var(--color-secondary, #1a1a1a);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 50%;
}
.region-modal-close:hover { background: var(--color-grey-01, #eff3f7); }

.region-modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-secondary-60, rgba(26,26,26,0.6));
    margin: 0 0 1rem;
    padding-right: 1.5rem;
}

/* Il contenuto clonato dalla legenda eredita gli stili .map-legend-item /
   .map-legend-text / .map-legend-name / .map-legend-sub. Qui adatto solo
   il bottone CTA perché nel modale deve essere SEMPRE visibile (fuori dal
   contesto .is-active). */
.region-modal-content .map-legend-item { padding: 0; border: 0; }
.region-modal-content .region-cta-btn  { display: inline-block; margin-top: 0.75rem; }

/* Quando c'è una regione selezionata (classe .has-active sul contenitore
   .map-legend), nascondi tutti gli altri provider: resta visibile solo
   l'item attivo. Sull'unico visibile tolgo bordo e padding verticali
   (il separatore non serve più). */
.map-legend.has-active .map-legend-item:not(.is-active) { display: none; }
.map-legend.has-active .map-legend-item.is-active {
    border-top: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* =========================================================================
   LEGENDA ZONE / FORNITORI
   ========================================================================= */

.map-legend{
    margin-top: 1rem;
}

.map-legend-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0;
}

.map-legend-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--color-secondary);
    padding: 0.9rem 0;
    border-top: 1px solid var(--color-grey-02, #d2d9de);
}

.map-legend-item:first-child { border-top: 0; padding-top: 0; }
.map-legend-item:last-child  { padding-bottom: 0; }

.map-legend-swatch {
    display: inline-block;
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 0.2rem;
}

.map-legend-text { flex: 1 1 auto; min-width: 0; }

.map-legend-name {
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-secondary);
}

.map-legend-sub {
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--color-secondary-60, rgba(26,26,26,0.6));
    margin-top: 0.15rem;
}


/* ---------- Mappa Italia -------------------------------------------------- */

.map-wrapper {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

@media (max-width: 900px) {
    .map-wrapper { max-width: none; }
}

.map-italia {
    width: 100%;
    height: auto;
    display: block;
}

/* Stile BASE comune a tutte le regioni. Sovrascrivi la singola regione
   usando il modificatore .regione-<slug> più sotto. */
.regione {
    fill: var(--color-white);
    stroke: var(--color-grey-02);
    stroke-width: 1.2;
    transition: opacity 180ms ease, transform 220ms ease;
    cursor: pointer;
    transform-box: fill-box;
    transform-origin: center;
}

/* La mappa è completamente staccata dalla ricerca: nessun stato
   "selezionato", solo l'effetto hover sulla singola regione. */
.regione-link:hover .regione,
.regione-link:focus-visible .regione { opacity: 0.5; }

.regione-link { outline: none; }
.regione-link:focus-visible .regione { stroke-width: 2; }

/* ---------- Hook per singola regione ------------------------------------- */
/* Gruppi colore (fill base — l'hover rimane arancione tema).                */

/* #9381FF - viola */
.regione-valle-aosta     { fill: #9381FF; }
.regione-piemonte        { fill: #9381FF; }
.regione-liguria         { fill: #9381FF; }
.regione-veneto          { fill: #9381FF; }
.regione-abruzzo         { fill: #9381FF; }
.regione-molise          { fill: #9381FF; }
.regione-puglia          { fill: #9381FF; }
.regione-basilicata      { fill: #9381FF; }

/* #BDD7EE - azzurro chiaro */
.regione-lombardia       { fill: #BDD7EE; }

/* #ED7D31 - arancio */
.regione-trentino        { fill: #ED7D31; }
.regione-friuli          { fill: #ED7D31; }
.regione-emilia-romagna  { fill: #ED7D31; }

/* #00B0F0 - azzurro */
.regione-toscana         { fill: #00B0F0; }
.regione-umbria          { fill: #00B0F0; }
.regione-marche          { fill: #00B0F0; }
.regione-lazio           { fill: #00B0F0; }
.regione-campania        { fill: #00B0F0; }
.regione-calabria        { fill: #00B0F0; }
.regione-sicilia         { fill: #00B0F0; }

/* non assegnata (fill: default bianco) */
.regione-sardegna        { }

/* =========================================================================
   FOOTER — replica fedele del footer del tema controllabolletta
   Classi utility ricreate localmente (nessuna dipendenza da bootstrap /
   custom-bootstrap.css). Variabili allineate ai valori del tema.
   ========================================================================= */

:root {
    --cb-bg-secondary:     #57676f;
    --cb-color-primary-50: #f4f2fe;
    --cb-color-primary-600:#f39314;
    --cb-color-accent:     #fcfcfc;
    --cb-text-heading-6:   1.3rem;
    --cb-text-tagline-1:   1.3rem;
    --cb-line-height-150:  150%;
    --cb-line-height-140:  140%;

    --footer-bg: #57676f !important;
}

/* Typography responsive — allineata al tema (custom-bootstrap.css @≤991px). */
@media (max-width: 991px) {
    :root {
        --cb-text-heading-6: 1.25rem;
        --cb-text-tagline-1: 1rem;
    }
}

footer.bg-secondary {
    /*background-color: var(--cb-bg-secondary);*/
    background-color: var(--footer-bg)!important;
    color: var(--cb-color-accent);
    font-family: var(--font-sans);

}

footer.bg-secondary a { text-decoration: none; }

/* ---------- Layout wrappers --------------------------------------------- */

footer.bg-secondary .main-container,
footer.bg-secondary .container-w-cb {
    max-width: 1290px;
    margin-inline: auto;
    padding-inline: 1rem;
}

footer.bg-secondary .px-3 { padding-left: 1rem; padding-right: 1rem; }

footer.bg-secondary .position-relative { position: relative; }
footer.bg-secondary .overflow-hidden   { overflow: hidden; }
footer.bg-secondary .text-center       { text-align: center; }
footer.bg-secondary .mx-auto           { margin-left: auto; margin-right: auto; }
footer.bg-secondary .top-0             { top: 0; }
footer.bg-secondary .start-0           { left: 0; }
footer.bg-secondary .end-0             { right: 0; }

/* ---------- Grid (bootstrap-like, sufficiente al footer) ---------------- */

footer.bg-secondary .row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0;
}

footer.bg-secondary .justify-content-between { justify-content: space-between; }

footer.bg-secondary [class*="col-"] {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    box-sizing: border-box;
}

footer.bg-secondary .col-12 { flex: 0 0 100%; max-width: 100%; }

@media (min-width: 768px) {
    footer.bg-secondary .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
}

@media (min-width: 1200px) {
    footer.bg-secondary .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
    footer.bg-secondary .col-xl-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }
}

/* ---------- Spacing ----------------------------------------------------- */

footer.bg-secondary .pt-4 { padding-top: 1.5rem; }
footer.bg-secondary .pb-3 { padding-bottom: 1rem; }
@media (min-width: 1200px) {
    footer.bg-secondary .pt-xl-90 { padding-top: 90px!important; }
}
footer.bg-secondary .gap-y-16 { row-gap: 4rem; }
footer.bg-secondary .mt-3     { margin-top: 1rem; }
footer.bg-secondary .mb-tw-7  { margin-bottom: 1.75rem; }

/* space-y-N: margin-top sui fratelli (bootstrap-ish). */
footer.bg-secondary .space-y-8 > * + * { margin-top: 2rem!important; }
/*footer.bg-secondary .space-y-2 > * + * { margin-top: 0.5rem; }*/
/* Override tema mobile: dentro footer su schermi piccoli lo stacking usa
   margin-bottom invece di margin-top. (time.css del tema) */
@media (max-width: 991px) {
    footer.bg-secondary .space-y-8 > * + * {
        margin-top: 0!important;
        margin-bottom: 2rem!important;
    }
}

/* ---------- Max width --------------------------------------------------- */

footer.bg-secondary .max-w-306 { max-width: 306px; }

/* ---------- Flex utilities --------------------------------------------- */

footer.bg-secondary .d-flex          { display: flex; }
footer.bg-secondary .align-items-center { align-items: center; }
footer.bg-secondary .gap-2           { gap: 0.5rem; }

/* ---------- List -------------------------------------------------------- */

footer.bg-secondary .list-unstyled {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---------- Sizing ------------------------------------------------------ */

footer.bg-secondary .size-6 { width: 1.5rem; height: 1.5rem; }
footer.bg-secondary .h-tw-6 { height: 1.5rem; }
footer.bg-secondary .w-px   { width: 1px; }

/* ---------- Typography (replica variabili tema) ------------------------- */

footer.bg-secondary h3,
footer.bg-secondary h4,
footer.bg-secondary p {
    margin: 0;
    line-height: var(--cb-line-height-150);
    font-weight: 400;
}

/* Titoli colonna footer: spazio sotto per staccare dalla lista successiva. */
footer.bg-secondary h4 { margin-bottom: 1rem; }

footer.bg-secondary .fw-normal {
    /*font-weight: 400;*/
    font-weight: 300!important;
}

footer.bg-secondary .text-accent     { color: var(--cb-color-accent) !important; }
footer.bg-secondary .text-primary-50 { color: var(--cb-color-primary-50); }

footer.bg-secondary .text-heading-6 {
    font-size: var(--cb-text-heading-6);
    line-height: var(--cb-line-height-140);
}
footer.bg-secondary .text-tagline-1 {
    font-size: var(--cb-text-tagline-1);
    line-height: var(--cb-line-height-150);
}
@media (min-width: 576px) {
    footer.bg-secondary .sm-text-heading-6 {
        font-size: var(--cb-text-heading-6);
        line-height: var(--cb-line-height-140);
    }
}

footer.bg-secondary .nowrap { white-space: nowrap; }

/* screen-reader only (per i label SVG social) */
footer.bg-secondary .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Logo footer + figure ---------------------------------------- */

footer.bg-secondary figure { margin: 0; }
footer.bg-secondary .logo-footer { width: 200px; height: auto; }

/* ---------- Backgrounds utility ---------------------------------------- */

footer.bg-secondary .bg-accent-10    { background-color: rgba(252, 252, 252, 0.1); }
footer.bg-secondary .bg-stroke-1-20  { background-color: rgba(223, 228, 235, 0.2); }

/* ---------- Footer link ------------------------------------------------- */

footer.bg-secondary .footer-link {
    font-size: var(--cb-text-tagline-1);
    line-height: var(--cb-line-height-150);
    font-weight: normal;
    color: var(--cb-color-primary-50);
    display: inline-block;
    position: relative;
    overflow: hidden;
}
footer.bg-secondary .footer-link::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--cb-color-primary-600);
    transform-origin: 100%;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}
@media (hover: hover) {
    footer.bg-secondary .footer-link:hover::before {
        transform-origin: 0;
        transform: scaleX(1);
    }
}
@media (max-width: 425px) {
    footer.bg-secondary .footer-link { font-size: 1rem; line-height: 150%; }
}

/* ---------- Footer social link ----------------------------------------- */

footer.bg-secondary .footer-social-link { transition: transform 0.3s; display: inline-flex; }
@media (hover: hover) {
    footer.bg-secondary .footer-social-link:hover { transform: scale(1.1); }
}
footer.bg-secondary .footer-social-link img { filter: brightness(0) invert(1); display: block; }

/* ---------- Divider -------------------------------------------------- */

footer.bg-secondary .footer-divider {
    height: 1px;
    width: 100%;
    transform-origin: center;
}

/* =========================================================================
   GN18 — stile dei nuovi blocchi (intro+calendario, trova, programma)
   Palette e token allineati al resto della landing (Exo 2, arancione tema,
   grigio-01, bordi arrotondati morbidi, pill per i CTA).
   ========================================================================= */

:root {
    --wf-ink:       var(--color-secondary, #1a1a1a);
    /*--wf-ink-muted: var(--color-secondary-60, rgba(26,26,26,0.6));*/
    --wf-ink-muted: #000;
    --wf-grey:      var(--color-secondary-60, rgba(26,26,26,0.6));
    --wf-line:      var(--color-grey-02, #d2d9de);
    --wf-line-soft: var(--color-grey-01, #eff3f7);
    --wf-paper:     var(--color-grey-01, #eff3f7);
    --wf-paper-2:   #ffffff;
    --wf-accent:    var(--color-primary-500, #f29200);
    --wf-radius:    var(--radius-3xl, 1.5rem);
    --wf-radius-sm: 20px;
    --wf-radius-pill: 999px;
    --wf-mono:      var(--font-sans);
}

/* --- INTRO + CALENDARIO -------------------------------------------------- */

.intro-section {
    /*background: var(--wf-paper);*/
    background: #fff;
    border-radius: var(--wf-radius);
    margin: 1.25rem;
    padding: 1rem;
}
/*.intro-section > .landing-container { padding-top: 64px; padding-bottom: 56px; }*/
.intro-section > .landing-container { padding-top: 100px; padding-bottom: 100px; }
@media screen and (max-width: 991px){
    .intro-section {
        margin: 1.25rem 10px;
    }
    .intro-section > .landing-container { padding-top: 75px; padding-bottom: 75px; }
}


.intro-grid {
    display: grid;
    grid-template-columns: 5fr 2fr;
    gap: 48px;
    align-items: start;
}
.intro-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
@media (max-width: 900px) {
    .intro-grid { grid-template-columns: 1fr; gap: 32px; }
}
.intro-overline {
    display: inline-block;
    margin: 0;
    padding: 0.3rem 0.85rem;
    border-radius: var(--wf-radius-pill);
    background: #fff;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    color: var(--wf-grey);
    font-weight: 500;
    width: fit-content;
}
.intro-title {
    margin: 0;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.15;
    font-weight: 400;
    color: var(--wf-ink);
}
.intro-title b, .intro-title strong { font-weight: 700; }
.intro-lead {
    margin: 0;
    /*font-size: 19px;
    line-height: 1.55;*/
    color: var(--wf-ink-muted);
    max-width: 580px;
    font-size: 1.25rem;
    line-height: 130%;
    font-weight: 300;
}
.intro-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding-top: 8px;
}
.intro-cta {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: var(--wf-radius-pill);
    font-weight: 500;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    line-height: 1;
}
.intro-cta-primary {
    background: var(--wf-accent);
    color: #fff;
    border: 1px solid var(--wf-accent);
}
.intro-cta-primary:hover { background: #fff; color: var(--wf-ink); }
.intro-cta-outline {
    background: transparent;
    border: 1px solid var(--wf-accent);
    color: var(--wf-accent);
}
.intro-cta-outline:hover { background: var(--wf-accent); color: #fff; }

.intro-meta {
    margin: 0;
    font-size: 0.95rem;
    color: var(--wf-grey);
}

.intro-calendar {
    min-width: 0;
    /*background: #fff;*/
    background: var(--wf-paper);
    border-radius: var(--wf-radius-sm);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
}

@media screen and (max-width: 991px){
    .intro-calendar{
        padding: 1.75rem 0.75rem;
    }
}

.intro-calendar-title {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--wf-ink);
}
.intro-calendar-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid var(--wf-line);
}
.intro-calendar-date {
    width: 54px;
    flex: none;
    text-align: center;
}
.intro-calendar-day {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wf-ink);
}
.intro-calendar-month {
    font-size: 0.8rem;
    text-transform: uppercase;
    color: var(--wf-grey);
    letter-spacing: 0.04em;
    margin-top: 2px;
}
.intro-calendar-info { flex: 1; min-width: 0; }
.intro-calendar-name {
    font-weight: 700;
    font-size: 1rem;
    color: var(--wf-ink);
}
.intro-calendar-sub {
    font-size: 0.9rem;
    color: var(--wf-grey);
    margin-top: 2px;
}
.intro-calendar-cta {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 1rem;
    border-radius: var(--wf-radius-pill);
    background: var(--wf-accent);
    color: #fff;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    line-height: 1;
    transition: background 180ms ease;
}
.intro-calendar-cta:hover { background: var(--color-primary-600, #f39314); color: #fff; }

/* --- SEZIONE #trova ------------------------------------------------------ */

.trova-section {
    /*background: #fff;*/
    background: var(--wf-paper);
    border-radius: var(--wf-radius);
    margin: 1.25rem;
    padding: 1rem;
}
.trova-section > .landing-container {
    /*padding-top: 72px;
    padding-bottom: 72px;*/
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

@media screen and (max-width: 991px){
    .trova-section {
        margin: 1.25rem 10px;
    }
    .trova-section > .landing-container { padding-top: 75px; padding-bottom: 75px; }
}

.trova-head {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 680px;
}
.trova-title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    color: var(--wf-ink);
    line-height: 1.2;
}
.trova-title b, .trova-title strong { font-weight: 700; }
.trova-lead {
    margin: 0;
    /*font-size: 1.05rem;
    line-height: 1.55;*/
    color: var(--wf-ink-muted);

    font-size: 1.25rem;
    line-height: 130%;
    font-weight: 300;
}

.trova-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    align-items: flex-start;
}
.trova-map-col {
    flex: 1 1 420px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.trova-map-wrap {
    /*background: var(--wf-paper);*/
    background: #fff;
    border-radius: var(--wf-radius-sm);
    padding: 1.25rem;
}
.trova-map-wrap .map-wrapper { max-width: none; }

.trova-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: 0.95rem;
    color: var(--wf-ink);
    padding: 0 0.25rem;
}
.trova-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.trova-legend-swatch {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    display: inline-block;
}

.trova-side-col {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.trova-search { display: flex; flex-direction: column; gap: 0.5rem; }
.trova-search-title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 700;
    color: #000;
}

.trova-result {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trova-result-empty {
    /*background: var(--wf-paper);*/
    background: #fff;
    border-radius: var(--wf-radius-sm);
    padding: 2rem 1.75rem;
    /*font-size: 1rem;
    line-height: 1.5;*/
    color: #000;

    font-size: 1.25rem;
    line-height: 130%;
    font-weight: 300;
}

.trova-result-card,
.trova-result-tbd {
    /*background: var(--wf-paper);*/
    background: #fff;
    border-radius: var(--wf-radius-sm);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.trova-result-overline {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border-radius: var(--wf-radius-pill);
    background: #fff;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: var(--wf-grey);
    font-weight: 500;
    width: fit-content;
}

.trova-result-name {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--wf-ink);
}

.trova-result-rows {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-size: 0.95rem;
}
.trova-result-row {
    display: flex;
    gap: 0.75rem;
    border-top: 1px solid var(--wf-line);
    padding-top: 0.6rem;
}
.trova-result-key {
    width: 110px;
    flex: none;
    color: var(--wf-grey);
}
.trova-result-value { flex: 1; min-width: 0; color: var(--wf-ink); }
.trova-result-value-strong { font-weight: 700; }

.trova-result-cta {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 1.5rem;
    border-radius: var(--wf-radius-pill);
    background: var(--wf-accent);
    color: #fff !important;
    font-weight: 500;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    transition: background 180ms ease, color 180ms ease;
    margin-top: 0.25rem;
}
.trova-result-cta:hover { background: var(--color-primary-600, #f39314); color: #fff !important; }

.trova-result-tbd-msg {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--wf-ink);
}

/* --- SEZIONE #programma -------------------------------------------------- */

.programma-section {
    background: var(--wf-paper);
    border-radius: var(--wf-radius);
    margin: 1.25rem;
    padding: 1rem;
}
.programma-section > .landing-container {
    /*padding-top: 64px;
    padding-bottom: 64px;*/
    padding-top: 100px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}


@media screen and (max-width: 991px){
    .programma-section {
        margin: 1.25rem 10px;
    }
    .programma-section > .landing-container { padding-top: 75px; padding-bottom: 75px; }
}

.programma-head {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 680px;
}
.programma-title {
    margin: 0;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 400;
    color: var(--wf-ink);
    line-height: 1.2;
}
.programma-title b, .programma-title strong { font-weight: 700; }
.programma-lead {
    margin: 0;
    /*font-size: 1.05rem;
    line-height: 1.55;*/
    color: var(--wf-ink-muted);
    font-size: 1.25rem;
    line-height: 130%;
    font-weight: 300;
}
.programma-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.programma-step {
    flex: 1 1 280px;
    min-width: 0;
    background: #fff;
    border-radius: var(--wf-radius-sm);
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.programma-step-num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--wf-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.15rem;
    color: #fff;
}
.programma-step-title {
    margin: 0;
    /*font-size: 1.2rem;*/
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wf-ink);
}
.programma-step-desc {
    margin: 0;
    /*font-size: 1rem;
    line-height: 1.55;*/
    color: var(--wf-ink-muted);
    font-size: 1.25rem;
    line-height: 130%;
    font-weight: 300;
}
.programma-aside {
    border-radius: var(--wf-radius-sm);
    padding: 1.75rem;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.programma-aside-title {
    margin: 0;
    /*font-size: 1.1rem;*/
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wf-ink);
}
.programma-aside-desc {
    margin: 0;
    /*font-size: 1rem;
    line-height: 1.55;*/
    color: var(--wf-ink-muted);

    font-size: 1.25rem;
    line-height: 130%;
    font-weight: 300;
}

/* --- MODALE: adattamento del body al nuovo template --------------------- */

.region-modal-body { padding: 24px 28px 28px; text-align: left; }
.region-modal-body .trova-result-overline { margin-bottom: 12px; }
.region-modal-body .trova-result-name     { margin-bottom: 16px; }
.region-modal-body .trova-result-rows     { margin-bottom: 20px; }
.region-modal-body .trova-result-cta      { width: 100%; justify-content: center; }

/* --- Mobile tweaks ------------------------------------------------------ */

@media (max-width: 900px) {
    .intro-section > .landing-container,
    .trova-section > .landing-container,
    .programma-section > .landing-container {
        padding-left: 20px;
        padding-right: 20px;
    }
}
@media (max-width: 991px) {
    .intro-section > .landing-container,
    .trova-section > .landing-container,
    .programma-section > .landing-container {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

.small{font-size: 90%;line-height: 1.2}