/* ================================================================= */
/*   MIO_STYLE_PERSONALIZZATO.CSS — Tema Child WordPress             */
/*   Casa del Popolo di Valdibrana — Paolo Peloni                    */
/*   ---------------------------------------------------------------  */
/*   IMPORTA i design token globali dal file condiviso cdp-tokens    */
/*   e aggiunge gli stili specifici per WordPress/Elementor/XStore.  */
/* ================================================================= */

/* Importazione Design Token Universali */
@import url('/mie-app/cdp-tokens.css');

/* ===================================================
   1. VARIABILI WORDPRESS-SPECIFICHE (ROOT)
   Note: mantenuto !important per vincere su XStore.
   Mappate sui token CDP per coerenza globale.
   =================================================== */
:root {
    /* --- Alias WordPress (usano i token CDP) --- */
    --primary:      var(--cdp-primary)       !important;  /* #0033cc */
    --secondary:    var(--cdp-secondary)     !important;  /* #333399 */
    --accent:       var(--cdp-accent)        !important;  /* #ff9900 */
    --text:         var(--cdp-text)          !important;  /* #172135 */
    --dark:         var(--cdp-dark)          !important;  /* #0f172a */
    --white:        var(--cdp-white)         !important;  /* #ffffff */
    --primary_dark: var(--cdp-primary-dark)  !important;  /* #000066 */
    --text_muted:   var(--cdp-text-muted)    !important;  /* #475569 */
    --bg_body:      var(--cdp-bg-body)       !important;  /* #f8fafc */
    --bg_surface:   var(--cdp-bg-surface-alt)!important;  /* #f1f5f9 */
    --border:       var(--cdp-border-strong) !important;  /* #cbd5e1 */
    --success:      var(--cdp-success)       !important;  /* #16a34a */
    --error:        var(--cdp-error)         !important;  /* #dc2626 */
    --info:         var(--cdp-info)          !important;  /* #0284c7 */
    --primary_trasp:    var(--cdp-primary-trasp)   !important;
    --accent_trasp:     var(--cdp-accent-trasp)    !important;
    --secondary_trasp:  var(--cdp-secondary-trasp) !important;
    --dark_trasp:       var(--cdp-dark-trasp)      !important;
    --white_trasp:      var(--cdp-white-trasp)     !important;
}

/* ===================================================
   2. STILI BASE E TIPOGRAFIA FLUIDA
   =================================================== */
body {
    background-color: var(--bg_body) !important;
    color: var(--text) !important;
    font-family: 'Lato', sans-serif !important;
}

.cg-base, html, p {
    font-family: 'Lato', sans-serif !important;
    color: var(--text) !important;
    font-size: clamp(1.00rem, calc(0.95rem + 0.35vw), 1.20rem) !important;
    line-height: 1.6 !important;
    text-transform: none !important;
}

code, .cg-code {
    font-family: 'Courier New', monospace !important;
    font-size: clamp(0.88rem, calc(0.80rem + 0.30vw), 1.05rem) !important;
    background-color: var(--bg_surface) !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}

small, .cg-small {
    font-family: 'Lato', sans-serif !important;
    font-size: clamp(0.85rem, calc(0.78rem + 0.30vw), 1.00rem) !important;
}

.req {
    font-family: 'Lato', sans-serif !important;
    color: var(--error) !important;
    font-weight: bold !important;
}

/* ===================================================
   3. LINK ED INTERAZIONI
   =================================================== */
a {
    font-family: 'Lato', sans-serif !important;
    color: var(--primary) !important;
    text-decoration: none !important;
    transition: color 0.2s ease, text-decoration 0.2s ease !important;
}

a:hover {
    color: var(--accent) !important;
    text-decoration: underline !important;
}

/* ===================================================
   4. TITOLI E HEADING FLUIDI (h1 - h6)
   =================================================== */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif !important;
    line-height: 1.25 !important;
    margin-bottom: 0.5em !important;
}

h1, .cg-h1, h1.elementor-heading-title {
    font-size: clamp(1.80rem, calc(1.50rem + 1.20vw), 2.50rem) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}

h2, .cg-h2, h2.elementor-heading-title {
    font-size: clamp(1.50rem, calc(1.30rem + 0.90vw), 2.00rem) !important;
    color: var(--accent) !important;
    font-weight: 700 !important;
}

h3, .cg-h3, h3.elementor-heading-title {
    font-size: clamp(1.30rem, calc(1.15rem + 0.70vw), 1.75rem) !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
}

h4, .cg-h4, h4.elementor-heading-title {
    font-size: clamp(1.15rem, calc(1.05rem + 0.50vw), 1.50rem) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

h5, .cg-h5, h5.elementor-heading-title {
    font-size: clamp(1.05rem, calc(0.98rem + 0.40vw), 1.30rem) !important;
    color: var(--primary) !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

h6, .cg-h6, h6.elementor-heading-title {
    font-size: clamp(0.95rem, calc(0.90rem + 0.30vw), 1.15rem) !important;
    color: var(--accent) !important;
    font-weight: 600 !important;
}

/* ===================================================
   5. PULSANTI E BOTTONI (CON ALTO CONTRASTO W3C)
   =================================================== */
.elementor-button, .elementor-widget-button, .buttons, .wp-block-button__link {
    display: inline-block !important;
    background-color: var(--primary) !important;
    font-family: 'Roboto', sans-serif !important;
    color: var(--white) !important;
    border: 1px solid var(--primary_dark) !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    box-shadow: 0 4px 10px rgba(0, 51, 204, 0.2) !important;
    transition: all 0.25s ease-in-out !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

.elementor-button:hover, .elementor-widget-button:hover, .buttons:hover, .wp-block-button__link:hover {
    background-color: var(--accent) !important;
    color: var(--primary_dark) !important; /* Alto contrasto sul giallo/arancio */
    border-color: var(--accent) !important;
    box-shadow: 0 6px 14px rgba(255, 153, 0, 0.4) !important;
    transform: translateY(-3px) !important;
}

/* Classi Utility per Pulsanti */
.btn-primary { background-color: var(--primary) !important; color: var(--white) !important; }
.btn-accent  { background-color: var(--accent) !important; color: var(--primary_dark) !important; }
.btn-secondary { background-color: var(--secondary) !important; color: var(--white) !important; }

/* ===================================================
   6. MENU DI NAVIGAZIONE REATTIVO (RESPONSIVE)
   =================================================== */
.menu-item, .elementor-item, .nav-link {
    font-family: 'Roboto', sans-serif !important;
    font-size: 16px !important;
    color: var(--primary) !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    transition: color 0.2s ease !important;
}

.menu-item:hover, .elementor-item:hover, .nav-link:hover {
    color: var(--accent) !important;
}

/* Ridimensionamento fluido su Smartphone */
@media screen and (max-width: 768px) {
    .menu-item, .elementor-item, .nav-link {
        font-size: 14px !important;
        letter-spacing: 0px !important;
    }
}

/* ===================================================
   7. EFFETTI OMBRA E SCHEDE IMMAGINI
   =================================================== */
.entry-content img, .wp-block-image img, .uagb-single-image img, .elementor-widget-image img {
    box-shadow: 12px -12px 0px rgba(0, 51, 204, 0.12) !important;
    border-radius: 8px !important;
    transition: all 0.4s ease-out !important;
}

.entry-content img:hover, .wp-block-image img:hover, .uagb-single-image img:hover, .elementor-widget-image img:hover {
    box-shadow: 0px 0px 0px 0px rgba(0, 51, 204, 0) !important;
    transform: scale(1.01) !important;
}

@media screen and (max-width: 780px) {
    .entry-content img, .wp-block-image img, .uagb-single-image img, .elementor-widget-image img {
        box-shadow: 6px -6px 0px rgba(0, 51, 204, 0.10) !important;
    }
}

/* ===================================================
   8. PULSANTI CALL-TO-ACTION (CTA) AD ALTO IMPATTO
   =================================================== */

/* CTA 1: "Informati" / "Scopri di Più" (Blu Primario con Bagliore) */
.btn-cta-informati, .wp-block-button.btn-cta-informati .wp-block-button__link {
    background: linear-gradient(135deg, #0033cc 0%, #002299 100%) !important;
    color: #ffffff !important;
    border: 2px solid #002299 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    border-radius: 30px !important;
    padding: 14px 28px !important;
    box-shadow: 0 4px 15px rgba(0, 51, 204, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-cta-informati:hover, .wp-block-button.btn-cta-informati .wp-block-button__link:hover {
    background: linear-gradient(135deg, #ff9900 0%, #e68a00 100%) !important;
    color: #000066 !important;
    border-color: #ff9900 !important;
    box-shadow: 0 6px 20px rgba(255, 153, 0, 0.45) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

/* CTA 2: "Partecipa" / "Contattaci" (Arancio Accento Vibrante) */
.btn-cta-partecipa, .btn-cta-contattaci, .wp-block-button.btn-cta-partecipa .wp-block-button__link {
    background: linear-gradient(135deg, #ff9900 0%, #e68a00 100%) !important;
    color: #000066 !important;
    border: 2px solid #e68a00 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    border-radius: 30px !important;
    padding: 14px 28px !important;
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-cta-partecipa:hover, .btn-cta-contattaci:hover, .wp-block-button.btn-cta-partecipa .wp-block-button__link:hover {
    background: linear-gradient(135deg, #0033cc 0%, #002299 100%) !important;
    color: #ffffff !important;
    border-color: #0033cc !important;
    box-shadow: 0 6px 20px rgba(0, 51, 204, 0.45) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

/* CTA 3: "Diventa Volontario" / "Dona Ora" (Verde Solidale) */
.btn-cta-volontario, .btn-cta-dona, .wp-block-button.btn-cta-volontario .wp-block-button__link {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border: 2px solid #15803d !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    border-radius: 30px !important;
    padding: 14px 28px !important;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.35) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.btn-cta-volontario:hover, .btn-cta-dona:hover, .wp-block-button.btn-cta-volontario .wp-block-button__link:hover {
    background: linear-gradient(135deg, #15803d 0%, #166534 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(22, 163, 74, 0.5) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

/* CTA 4: Pulsante Chiaro per Sfondi Scuri / Immagini */
.btn-cta-light, .wp-block-button.btn-cta-light .wp-block-button__link {
    background: #ffffff !important;
    color: #0033cc !important;
    border: 2px solid #ffffff !important;
    font-size: 1.05rem !important;
    border-radius: 30px !important;
    padding: 14px 28px !important;
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.25) !important;
    transition: all 0.3s ease !important;
}
.btn-cta-light:hover, .wp-block-button.btn-cta-light .wp-block-button__link:hover {
    background: #ff9900 !important;
    color: #000066 !important;
    border-color: #ff9900 !important;
    transform: translateY(-3px) !important;
}

/* ===================================================
   9. SEZIONI VISIVE CON IMMAGINI EVOCATIVE & SCHEDE
   =================================================== */

/* Hero Banner & Sezioni con Overlay Scuro per Massima Leggibilità */
.hero-evocativa {
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15) !important;
}

.hero-evocativa::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.75) 0%, rgba(0, 51, 204, 0.85) 100%) !important;
    z-index: 1 !important;
}

.hero-evocativa * {
    position: relative !important;
    z-index: 2 !important;
}

/* Schede Elevate per Contenuti ed Attività Sociali */
.card-elevata {
    background: #ffffff !important;
    border-radius: 12px !important;
    padding: 30px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.card-elevata:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 12px 30px rgba(0, 51, 204, 0.12) !important;
    border-color: var(--accent) !important;
}

/* ===================================================
   10. RIMOZIONE GLOBALE BARRA LATERALE (LAYOUT FULL WIDTH)
   =================================================== */
.sidebar, .sidebar-mobile, #sidebar, .sidebar-widget, .widget-area, aside.sidebar, div.sidebar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

.content-page, .content-area, .site-content, .main-content, .page-wrapper, .entry-content, main {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===================================================
   11. FIX DEFINITIVO FULL-WIDTH XSTORE SENZA SIDEBAR
   =================================================== */
.content.col-md-9,
.sidebar-position-right .content,
.sidebar-position-left .content {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

.col-md-3.sidebar-enabled,
.sidebar.sidebar-right,
.sidebar.sidebar-left,
aside.sidebar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.container.content-page {
    max-width: 1400px !important;
    width: 95% !important;
}

/* ===================================================
   12. FONT D'IMPATTO & ANIMAZIONI MODERNE
   (I font Google sono caricati da functions.php)
   =================================================== */

/* Font Heading d'Impatto */
h1, h2, h3, .cg-h1, .cg-h2, .cg-h3, .elementor-heading-title {
    font-family: 'Outfit', 'Montserrat', sans-serif !important;
    letter-spacing: -0.5px !important;
    font-weight: 800 !important;
}

/* Animazioni di Entrata & Micro-Interazioni */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(25px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0.5); }
    70% { box-shadow: 0 0 0 15px rgba(255, 153, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 153, 0, 0); }
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

/* Applicazione Animazioni ed Effetti di Movimento */
.hero-evocativa h1 {
    animation: fadeInUp 0.8s ease-out forwards !important;
}

.hero-evocativa p {
    animation: fadeInUp 1.0s ease-out forwards !important;
}

.btn-cta-informati, .btn-cta-partecipa, .btn-cta-volontario {
    animation: fadeInUp 1.2s ease-out forwards !important;
}

.btn-cta-partecipa:hover {
    animation: pulseGlow 1.5s infinite !important;
}

/* Schede Glassmorphism Eleganti */
.glass-card {
    background: rgba(255, 255, 255, 0.90) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 20px !important;
    padding: 35px !important;
    box-shadow: 0 15px 35px rgba(0, 51, 204, 0.08) !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.glass-card:hover {
    transform: translateY(-8px) scale(1.01) !important;
    box-shadow: 0 20px 40px rgba(0, 51, 204, 0.16) !important;
    border-color: var(--accent) !important;
}

/* Immagini ad Alto Impatto Visivo */
.img-evocativa {
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.15) !important;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.img-evocativa img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
}

.img-evocativa:hover img {
    transform: scale(1.05) !important;
}

.img-evocativa:hover {
    box-shadow: 0 20px 40px rgba(0, 51, 204, 0.22) !important;
}

/* Badge Fluttuante */
.badge-fluttuante {
    display: inline-block !important;
    background-color: var(--accent) !important;
    color: #000066 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    animation: floatBadge 3s infinite ease-in-out !important;
}

/* ===================================================
   13. EFFETTI DINAMICI & MOTION ADVANCED
   =================================================== */

/* Ticker Animato Scorrevole per Avvisi */
@keyframes tickerMove {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.ticker-wrap {
    width: 100% !important;
    overflow: hidden !important;
    background: linear-gradient(90deg, #ff9900 0%, #ff6600 100%) !important;
    color: #000066 !important;
    padding: 10px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.25) !important;
}

.ticker-move {
    display: inline-block !important;
    white-space: nowrap !important;
    animation: tickerMove 22s linear infinite !important;
}

.ticker-move:hover {
    animation-play-state: paused !important;
}

/* Sfocatura Sfondo e Gradient Shift Dinamico */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.bg-dinamico-gradient {
    background: linear-gradient(-45deg, #0033cc, #333399, #000066, #ff9900) !important;
    background-size: 400% 400% !important;
    animation: gradientShift 12s ease infinite !important;
}

/* Card Shine & Dynamic Tilt Glow */
.glass-card {
    position: relative !important;
    overflow: hidden !important;
}

.glass-card::after {
    content: '' !important;
    position: absolute !important;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.25), transparent) !important;
    transform: rotate(30deg) translateY(-100%) !important;
    transition: transform 0.8s ease-in-out !important;
}

.glass-card:hover::after {
    transform: rotate(30deg) translateY(100%) !important;
}

/* Contatori Numerici d'Impatto */
.stat-box {
    text-align: center !important;
    padding: 25px 15px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0, 51, 204, 0.08) !important;
    border-bottom: 4px solid var(--accent) !important;
    transition: transform 0.3s ease !important;
}

.stat-box:hover {
    transform: translateY(-6px) scale(1.03) !important;
    border-bottom-color: var(--primary) !important;
}

.stat-number {
    font-family: 'Montserrat', sans-serif !important;
    font-size: clamp(2.2rem, 3.5vw, 3.2rem) !important;
    font-weight: 900 !important;
    color: var(--primary) !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
}

.stat-label {
    font-family: 'Outfit', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: var(--text_muted) !important;
    text-transform: uppercase !important;
}

/* ===================================================
   14. FIX CONTRASTO HERO BANNER & STILE TICKER
   =================================================== */

/* Ticker Bar ad Altissimo Contrasto */
.ticker-wrap {
    background: #ff9900 !important;
    color: #000066 !important;
    padding: 10px 0 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    border-bottom: 2px solid #e68a00 !important;
}

.ticker-move {
    color: #000066 !important;
    font-weight: 800 !important;
}

/* Sfondo Hero Evocativa con Overlay Scuro per Contrasto AAA */
.hero-evocativa {
    position: relative !important;
    background-size: cover !important;
    background-position: center !important;
    color: #ffffff !important;
}

.hero-evocativa::before {
    content: '' !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background: linear-gradient(180deg, rgba(0, 34, 153, 0.85) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
    z-index: 1 !important;
}

.hero-evocativa * {
    position: relative !important;
    z-index: 2 !important;
}

.hero-evocativa h1, .hero-evocativa h2, .hero-evocativa p {
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6) !important;
}

/* Pulsanti d'impatto ad alto contrasto */
.hero-evocativa .btn-cta-informati a, .hero-evocativa div.btn-cta-informati a {
    background: #0033cc !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}

.hero-evocativa .btn-cta-partecipa a, .hero-evocativa div.btn-cta-partecipa a {
    background: #ff9900 !important;
    color: #000066 !important;
    border: 2px solid #ff9900 !important;
}

.hero-evocativa .btn-cta-volontario a, .hero-evocativa div.btn-cta-volontario a {
    background: #16a34a !important;
    color: #ffffff !important;
    border: 2px solid #16a34a !important;
}

/* ===================================================
   15. SLIDER HERO DINAMICO E SCROLL REVEAL (SLIDE IN)
   =================================================== */

/* Container Slider Hero */
.hero-slider-container {
    position: relative !important;
    width: 100% !important;
    height: 520px !important;
    overflow: hidden !important;
    background: #0f172a !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2) !important;
}

.hero-slide {
    position: absolute !important;
    top: 0; left: 0; width: 100% !important; height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.hero-slide.active-slide {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2 !important;
}

.hero-slide-overlay {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0 !important;
    background: linear-gradient(180deg, rgba(0, 34, 153, 0.82) 0%, rgba(15, 23, 42, 0.88) 100%) !important;
    z-index: 1 !important;
}

.hero-slide-content {
    position: relative !important;
    z-index: 3 !important;
    text-align: center !important;
    max-width: 900px !important;
    padding: 0 20px !important;
}

/* Animazioni Interattive per i Testi dello Slider */
.active-slide .slide-title-left {
    animation: slideInLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.active-slide .slide-title-right {
    animation: slideInRight 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.active-slide .slide-subtitle {
    animation: slideInUp 1.0s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

.active-slide .slide-cta {
    animation: popIn 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-80px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(80px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

/* Pulsanti Frecce e Pallini Slider */
.slider-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    background: rgba(255, 153, 0, 0.9) !important;
    color: #000066 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 22px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

.slider-arrow:hover {
    background: #0033cc !important;
    color: #ffffff !important;
    transform: translateY(-50%) scale(1.15) !important;
}

.slider-arrow.prev-arrow { left: 25px !important; }
.slider-arrow.next-arrow { right: 25px !important; }

.slider-dots {
    position: absolute !important;
    bottom: 20px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
    display: flex !important;
    gap: 10px !important;
}

.slider-dot {
    width: 14px !important;
    height: 14px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.slider-dot.active-dot {
    background: #ff9900 !important;
    width: 35px !important;
    border-radius: 10px !important;
}

/* Scroll Reveal (Comparse al passaggio dello Scroll) */
.reveal-on-scroll {
    opacity: 0 !important;
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.reveal-on-scroll.from-left {
    transform: translateX(-60px) !important;
}

.reveal-on-scroll.from-right {
    transform: translateX(60px) !important;
}

.reveal-on-scroll.from-bottom {
    transform: translateY(50px) !important;
}

.reveal-on-scroll.is-visible {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

/* ===================================================
   16. FIX STRICT SLIDER HERO (SOVRAPPOSIZIONE E SLIDE SINGOLA)
   =================================================== */

.hero-slider-container {
    position: relative !important;
    width: 100% !important;
    height: 550px !important;
    min-height: 550px !important;
    max-height: 550px !important;
    overflow: hidden !important;
    background: #0f172a !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out !important;
    background-size: cover !important;
    background-position: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hero-slide.active-slide {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
}

.hero-slide-overlay {
    position: absolute !important;
    top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    background: linear-gradient(180deg, rgba(0, 34, 153, 0.85) 0%, rgba(15, 23, 42, 0.90) 100%) !important;
    z-index: 2 !important;
}

.hero-slide-content {
    position: relative !important;
    z-index: 10 !important;
    text-align: center !important;
    max-width: 900px !important;
    padding: 0 20px !important;
}

/* ===================================================
   17. FIX PUNTO 1: TICKER TESTO SCORREVOLE FLUIDO
   =================================================== */
@keyframes marqueeScroll {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

.ticker-wrap {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #ff9900 !important;
    color: #000066 !important;
    padding: 12px 0 !important;
    box-shadow: 0 4px 15px rgba(255, 153, 0, 0.3) !important;
    border-bottom: 2px solid #e68a00 !important;
    z-index: 100 !important;
}

.ticker-move {
    display: inline-block !important;
    white-space: nowrap !important;
    padding-left: 100% !important;
    animation: marqueeScroll 25s linear infinite !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    color: #000066 !important;
}

.ticker-wrap:hover .ticker-move {
    animation-play-state: paused !important;
}


/* ===================================================
   18. FIX PUNTO 2: PULSANTI 3D AD IMPATTO CON HOVER FLUIDO
   =================================================== */

.btn-cta-informati, 
.btn-cta-partecipa, 
.btn-cta-volontario,
.btn-cta-dona,
.wp-block-button__link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 50px !important;
    padding: 14px 30px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    margin: 6px !important;
    border: none !important;
}

/* Pulsante Informati (Blu 3D) */
.btn-cta-informati, div.btn-cta-informati a, .wp-block-button.btn-cta-informati a {
    background: linear-gradient(135deg, #0033cc 0%, #001f80 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(0, 51, 204, 0.35) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}
.btn-cta-informati:hover, div.btn-cta-informati a:hover, .wp-block-button.btn-cta-informati a:hover {
    background: linear-gradient(135deg, #0044ff 0%, #002bbf 100%) !important;
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.04) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 25px rgba(0, 51, 204, 0.5) !important;
}

/* Pulsante Partecipa / Contattaci (Arancio 3D) */
.btn-cta-partecipa, div.btn-cta-partecipa a, .wp-block-button.btn-cta-partecipa a {
    background: linear-gradient(135deg, #ff9900 0%, #e67300 100%) !important;
    color: #000066 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 18px rgba(255, 153, 0, 0.4) !important;
    border: 2px solid #ffaa22 !important;
}
.btn-cta-partecipa:hover, div.btn-cta-partecipa a:hover, .wp-block-button.btn-cta-partecipa a:hover {
    background: linear-gradient(135deg, #ffaa11 0%, #ff8000 100%) !important;
    color: #000044 !important;
    transform: translateY(-5px) scale(1.04) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 12px 28px rgba(255, 153, 0, 0.6) !important;
}

/* Pulsante Volontario (Verde 3D) */
.btn-cta-volontario, div.btn-cta-volontario a, .wp-block-button.btn-cta-volontario a {
    background: linear-gradient(135deg, #16a34a 0%, #116e32 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 6px 18px rgba(22, 163, 74, 0.35) !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
}
.btn-cta-volontario:hover, div.btn-cta-volontario a:hover, .wp-block-button.btn-cta-volontario a:hover {
    background: linear-gradient(135deg, #22c55e 0%, #15803d 100%) !important;
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.04) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 12px 25px rgba(22, 163, 74, 0.5) !important;
}


/* ===================================================
   19. FIX PUNTO 3: FOOTER UNIFICATO ELEGANTE E MODERNO
   =================================================== */

.footer-unificato {
    background: linear-gradient(180deg, #0f172a 0%, #090d16 100%) !important;
    color: #cbd5e1 !important;
    padding: 60px 30px 25px 30px !important;
    border-top: 4px solid var(--accent) !important;
    position: relative !important;
    z-index: 10 !important;
}

.footer-unificato h3, .footer-unificato h4 {
    color: #ff9900 !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    margin-bottom: 20px !important;
}

.footer-unificato p, .footer-unificato li, .footer-unificato a {
    color: #cbd5e1 !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
    text-decoration: none !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}

.footer-unificato a:hover {
    color: #ff9900 !important;
    text-decoration: underline !important;
}

.footer-copyright-bar {
    border-top: 1px solid #1e293b !important;
    margin-top: 40px !important;
    padding-top: 25px !important;
    text-align: center !important;
    font-size: 0.95rem !important;
    color: #94a3b8 !important;
}

/* ===================================================
   20. PAGINE WORDPRESS (Gutenberg) — layout e schede
   =================================================== */

.page .content-page {
    background-color: var(--bg_body);
}

.page .content-page > .wp-block-group.alignfull:first-child {
    font-size: 0.95rem !important;
    letter-spacing: 0.02em !important;
    align-items: center !important;
}

.page .content-page > .wp-block-group.alignfull:first-child small {
    opacity: 0.9 !important;
}

.page .content-page .ticker-wrap {
    background: var(--accent) !important;
    color: var(--primary_dark) !important;
    padding: 12px 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.page .content-page .ticker-move {
    display: inline-block !important;
    white-space: nowrap !important;
    padding-left: 0 !important;
    color: var(--primary_dark) !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: clamp(0.88rem, 1.6vw, 1.05rem) !important;
    letter-spacing: 0.04em !important;
    text-transform: none !important;
    animation: tickerSlide 28s linear infinite !important;
}

@keyframes tickerSlide {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

.page .content-page .hero-evocativa {
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.page .content-page .hero-evocativa h1,
.page .content-page .hero-evocativa p {
    max-width: 920px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page .content-page h2.wp-block-heading {
    color: var(--primary) !important;
    text-align: center !important;
    letter-spacing: -0.03em !important;
}

.page .content-page h2.wp-block-heading + p {
    text-align: center !important;
    color: var(--text_muted) !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.page .content-page .wp-block-columns {
    gap: 1.5rem !important;
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

.page .content-page .stat-box {
    text-align: center !important;
    padding: 22px 14px !important;
    background: var(--white) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 22px rgba(0, 51, 204, 0.07) !important;
    border-bottom: 4px solid var(--accent) !important;
}

.page .content-page .stat-number {
    display: block !important;
}

.page .content-page .glass-card {
    background: var(--white) !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
    overflow: hidden !important;
}

.page .content-page .glass-card > * {
    position: relative !important;
    z-index: 1 !important;
}

.page .content-page .glass-card h3 {
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
}

.page .content-page .glass-card p {
    color: var(--text_muted) !important;
    font-size: 1.02rem !important;
    line-height: 1.7 !important;
}

.page .content-page .wp-block-image img {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12) !important;
    border-radius: 14px !important;
}

.page .content-page .wp-block-image img:hover {
    transform: translateY(-4px) scale(1) !important;
    box-shadow: 0 18px 36px rgba(0, 51, 204, 0.16) !important;
}

.page .content-page .wp-block-buttons {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
}

.page .content-page .wp-block-button__link {
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.3 !important;
}

.page .gdpv-slide-body > div {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
}

.page .content-page input[type="text"],
.page .content-page input[type="email"],
.page .content-page input[type="tel"],
.page .content-page textarea,
.page .content-page select {
    width: 100% !important;
    max-width: 100% !important;
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    font-family: 'Lato', sans-serif !important;
    color: var(--text) !important;
    background: var(--white) !important;
}

.page .content-page input:focus,
.page .content-page textarea:focus,
.page .content-page select:focus {
    outline: 2px solid var(--primary) !important;
    outline-offset: 1px !important;
    border-color: var(--primary) !important;
}

@media screen and (max-width: 782px) {
    .page .content-page > .wp-block-group.alignfull:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
        padding: 12px 18px !important;
    }

    .page .content-page .hero-evocativa {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .page .content-page .glass-card {
        padding: 22px 18px !important;
        margin-bottom: 8px !important;
    }

    .page .content-page .stat-box {
        margin-bottom: 8px !important;
    }

    .page .gdpv-slider-wrapper {
        height: 460px !important;
        max-height: none !important;
        min-height: 420px !important;
    }

    .page .gdpv-slide-body {
        padding: 0 58px !important;
    }

    .page .gdpv-nav-btn {
        width: 40px !important;
        height: 40px !important;
        font-size: 18px !important;
    }

    .page .gdpv-prev { left: 10px !important; }
    .page .gdpv-next { right: 10px !important; }
}

@media (prefers-reduced-motion: reduce) {
    .page .ticker-move,
    .page .badge-fluttuante,
    .page .btn-cta-informati,
    .page .btn-cta-partecipa,
    .page .btn-cta-volontario,
    .page .hero-evocativa h1,
    .page .hero-evocativa p,
    .page .reveal-on-scroll {
        animation: none !important;
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}