/*
Theme Name: sabaMinimalFSE
Theme URI: https://alternativa.org
Author: Saba development team
Author URI: https://alternativa.org
Description: Tema Full Site Editing professionale con 8 palette dinamiche, header trasparente con scroll effect, menu mobile ottimizzato e pattern Cambridge GOLD. Design system SABA completamente responsive.
Version: 6.5
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sabaminimalfse
Tags: full-site-editing, block-patterns, block-styles, wide-blocks, education, custom-colors, custom-logo, custom-menu, editor-style, featured-images, responsive
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
*/

/* === COMPAT ALIASES ===
   Slug colore usati nel codice ma NON definiti nella palette theme.json.
   Qui li risolviamo agli slug esistenti per evitare var() rotti (che cadono al default browser).
   Quando il codice che li usa viene ripulito, questi alias possono essere rimossi. */
:root {
    --wp--preset--color--primary-dark: var(--wp--preset--color--secondary);
    --wp--preset--color--gray-light: var(--wp--preset--color--background-alt);
    --wp--preset--color--surface-alt: var(--wp--preset--color--background-alt);
}

/* === ACCESSIBILITY BASELINE === */

/* Focus visibile globale — consistente su tutte le palette, sempre visibile */
:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary);
    outline-offset: 2px;
    border-radius: var(--wp--custom--border--radius--sm);
}

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline-offset: 3px;
}

/* Rispetto preferenza utente: riduzione movimento.
   Annulla animazioni/transizioni costose e — soprattutto — forza la visibilità
   dei blocchi che il JS animatore imposterebbe a opacity:0. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .wp-block-group,
    .wp-block-columns,
    .saba-mission-card,
    .saba-course-card,
    .phse-service-card {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Text-wrap balance su titoli — wrap più gradevole su righe multiple (baseline 2024) */
h1, h2, h3 {
    text-wrap: balance;
}

/* Accent-color nativo per form controls — segue la palette attiva */
:root {
    accent-color: var(--wp--preset--color--primary);
}

/* === BASE SETUP === */
* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
}

body {
    overflow-x: hidden;
    position: relative;
}

.wp-site-blocks {
    overflow-x: clip;
}

/* ================================================
   HEADER MODERNO - PALETTE DINAMICA
   Tutti i colori si adattano automaticamente alla palette selezionata
   ================================================ */

/* Header Wrapper - Sticky comportamento */
.wp-site-blocks > header.wp-block-template-part {
    position: sticky;
    top: 0;
    z-index: 10000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.admin-bar .wp-site-blocks > header.wp-block-template-part {
    top: 32px;
}

/* Header Wrapper - Background dinamico con trasparenza iniziale */
.saba-header-wrapper {
    background-color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible !important;
}

/* Header Inner Container */
.saba-header {
    transition: all 0.3s ease;
    overflow: visible !important;
}

.saba-header__inner {
    overflow: visible !important;
}

.saba-header__navigation {
    overflow: visible !important;
}

/* Header scrollato - opaco con shadow marcata */
body.has-header-scrolled .saba-header-wrapper,
.saba-header-wrapper.is-scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--wp--preset--color--background-alt) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Header Inner - Layout Flex */
.saba-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    max-width: 100%;
}

/* ===== BRANDING AREA ===== */
.saba-header__branding {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    flex-shrink: 0;
}

/* Logo */
.saba-logo img,
.saba-header__branding .wp-block-site-logo img {
    height: 48px;
    width: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-logo:hover img {
    transform: scale(1.02);
}

/* Site Title - Palette Dinamica */
.saba-site-title a {
    text-decoration: none;
    color: var(--wp--preset--color--secondary) !important;
    transition: color 0.2s ease;
}

.saba-site-title a:hover {
    color: var(--wp--preset--color--primary) !important;
}

/* ===== NAVIGATION MENU ===== */
.saba-header__navigation {
    gap: 2.5rem;
}

/* Link Navigation - Palette Dinamica */
.saba-header__navigation .wp-block-navigation-item__content {
    font-weight: 500;
    letter-spacing: 0.01em;
    color: var(--wp--preset--color--foreground) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding-bottom: 3px;
}

/* Underline effect on hover */
.saba-header__navigation .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--wp--preset--color--primary);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-header__navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary) !important;
}

.saba-header__navigation .wp-block-navigation-item__content:hover::after,
.saba-header__navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
    width: 100%;
}

/* Header scrollato - logo più piccolo */
body.has-header-scrolled .saba-logo img,
body.has-header-scrolled .saba-header__branding .wp-block-site-logo img {
    height: 42px;
}

/* === CARD LAYOUT UNIFORME === */
.course-card {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    padding: 1.25rem;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.course-card .wp-block-heading {
    margin-bottom: 0.5rem;
}

.course-card .language-badge {
    margin-bottom: 1rem;
    display: inline-block;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    background: var(--wp--preset--color--primary, #d35400);
    color: var(--wp--preset--color--white, #fff);
}

.course-card .wp-block-paragraph {
    flex-grow: 1;
    font-size: 1rem;
    line-height: 1.6;
}

.course-card .wp-block-buttons {
    margin-top: auto;
}

.course-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* === MENU DROPDOWN DESKTOP - MINIMAL === */
@media (min-width: 1024px) {
    .wp-block-navigation__submenu-container {
        display: none;
    }

    .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container {
        display: block;
    }
}

/* ================================================
   MOBILE & TABLET RESPONSIVE
   ================================================ */

@media (max-width: 1023px) {
    /* Admin bar mobile */
    body.admin-bar .wp-site-blocks > header.wp-block-template-part {
        top: 46px;
    }

    /* Fix critico per allineamento colonne in mobile/tablet */
    .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
        flex-basis: 100% !important;
        align-content: center !important;
    }

    /* Header mobile/tablet - padding ridotto */
    .saba-header {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .saba-header__inner {
        gap: 1rem;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* Forza navigation a destra */
    .saba-header__navigation {
        margin-left: auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        position: relative;
        flex: 1 0 auto;
        min-height: 48px;
        min-width: 48px;
    }

    /* Logo mobile più piccolo */
    .saba-logo img,
    .saba-header__branding .wp-block-site-logo img {
        height: 40px !important;
    }

    /* Site title mobile */
    .saba-site-title {
        font-size: 1.125rem !important;
    }

    /* Header scrollato mobile */
    body.has-header-scrolled .saba-logo img,
    body.has-header-scrolled .saba-header__branding .wp-block-site-logo img {
        height: 36px !important;
    }

    /* Forza hamburger menu su mobile/tablet */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        display: block !important;
        visibility: visible !important;
    }

    /* Hamburger Menu Icon - Contrasto garantito su qualsiasi sfondo */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: var(--wp--preset--color--white) !important;
        background: var(--wp--preset--color--primary) !important;
        border-radius: 8px !important;
        padding: 0.5rem 0.75rem !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        position: relative !important;
    }

    .wp-block-navigation__responsive-container-open:hover {
        background: var(--wp--preset--color--primary-dark) !important;
        transform: scale(1.05) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }

    .wp-block-navigation__responsive-container-open svg {
        fill: var(--wp--preset--color--white) !important;
    }

    /* Menu mobile overlay - Design moderno full-screen */
    .wp-block-navigation__responsive-container {
        background: transparent !important;
        border: none !important;
    }

    .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
        max-height: 100vh !important;
        padding: 5rem 1.5rem 2rem 1.5rem !important;
        margin: 0 !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        background: var(--wp--preset--color--background) !important;
        z-index: 9999 !important;
        animation: slideIn 0.3s ease-out !important;
    }

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

    /* Voci menu mobile - Design moderno */
    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        border-bottom: 1px solid var(--wp--preset--color--gray-light);
        margin: 0;
        padding: 0;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        display: block;
        padding: 1.125rem 1.5rem !important;
        font-size: 1.0625rem;
        font-weight: 600;
        color: var(--wp--preset--color--foreground) !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item__content::before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 100%;
        background: linear-gradient(90deg, var(--wp--preset--color--primary) 0%, transparent 100%);
        opacity: 0.1;
        transition: width 0.3s ease;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
        color: var(--wp--preset--color--primary) !important;
        background: var(--wp--preset--color--surface-alt) !important;
        padding-left: 2rem !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover::before {
        width: 4px;
    }

    /* Submenu mobile - Design moderno */
    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        position: static !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        background: var(--wp--preset--color--surface-alt) !important;
        box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.05) !important;
        border: none !important;
        border-left: 4px solid var(--wp--preset--color--accent) !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 0.5rem 0 !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item {
        border-bottom: 1px solid var(--wp--preset--color--gray-light);
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding-left: 2.5rem !important;
        padding-right: 1.5rem !important;
        padding-top: 0.875rem !important;
        padding-bottom: 0.875rem !important;
        font-size: 0.9375rem;
        font-weight: 500;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        padding-left: 3rem !important;
        background: var(--wp--preset--color--background) !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        content: " ›";
        float: right;
        font-size: 1.2em;
        line-height: 1;
    }

    /* Close button - Design moderno full-screen */
    .wp-block-navigation__responsive-container-close {
        position: fixed !important;
        top: 1.5rem !important;
        right: 1.5rem !important;
        background: var(--wp--preset--color--primary) !important;
        color: var(--wp--preset--color--white) !important;
        border-radius: 50% !important;
        width: 48px !important;
        height: 48px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: all 0.3s ease !important;
        z-index: 10000 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }

    .wp-block-navigation__responsive-container-close:hover {
        background: var(--wp--preset--color--primary-dark) !important;
        transform: rotate(90deg) scale(1.1) !important;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3) !important;
    }

    .wp-block-navigation__responsive-container-close svg {
        width: 24px !important;
        height: 24px !important;
        fill: var(--wp--preset--color--white) !important;
    }
}

/* === DIFFERENZIAZIONE TABLET VS MOBILE === */
/* Tablet specifico */
@media (min-width: 768px) and (max-width: 1023px) {
    .saba-header__branding .wp-block-site-logo img {
        height: 45px;
    }
    
    .wp-block-navigation__responsive-container.is-menu-open {
        max-width: 400px;
        right: 0;
        left: auto;
        box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    }
}

/* === OVERRIDE COMPLETO REGOLE WORDPRESS === */
   /* === FIX MENU TABLET CORRETTO === */
@media (min-width: 600px) and (max-width: 1023px) {
    /* Override WordPress default che mostra il menu a 600px */
    .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none !important;
    }
    
    /* NON nascondere il container quando il menu è aperto */
    .wp-block-navigation__responsive-container.is-menu-open {
        display: block !important;
        visibility: visible !important;
    }
    
    /* NON nascondere il navigation__container quando è dentro il responsive container aperto */
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: block !important;
        visibility: visible !important;
    }
    
    /* Nascondi solo il menu desktop non-responsive */
    .wp-block-navigation:not(.is-responsive) > .wp-block-navigation__container {
        display: none !important;
    }
    
    /* Mantieni il bottone hamburger visibile */
    .wp-block-navigation__responsive-container-open {
        display: flex !important;
    }
}



/* Mobile specifico */
@media (max-width: 767px) {
    .saba-header {
        padding: 10px 12px;
    }
    
    .saba-header__branding .wp-block-site-logo img {
        height: 35px;
    }
    
    .saba-header .wp-block-site-title {
        font-size: 0.95rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .saba-header .wp-block-site-tagline {
        display: none !important;
    }
}

/* === RESPONSIVE TIPOGRAFIA === */
h1 { 
    font-size: clamp(1.75rem, 5vw, 3rem); 
    line-height: 1.2; 
}

h2 { 
    font-size: clamp(1.5rem, 4vw, 2.5rem); 
    line-height: 1.3; 
}

h3 { 
    font-size: clamp(1.25rem, 3vw, 2rem); 
    line-height: 1.4; 
}

p { 
    font-size: clamp(0.95rem, 2vw, 1.125rem); 
    line-height: 1.6; 
}

/* === RESPONSIVE LAYOUT === */
@media (max-width: 767px) {
    .wp-block-columns {
        flex-direction: column !important;
        gap: 2rem !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
        max-width: 100% !important;
    }
    
    .wp-block-group {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .wp-block-buttons {
        flex-direction: column !important;
        width: 100%;
        gap: 1rem !important;
        align-items: stretch !important;
    }

    .wp-block-button {
        width: 100%;
        margin-bottom: 0 !important;
    }

    .wp-block-button__link {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .wp-block-cover {
        min-height: 400px !important;
        padding: 2.5rem 1.25rem !important;
    }

    /* Hero section mobile - spacing migliorato */
    .wp-block-cover .wp-block-cover__inner-container {
        padding: 0 !important;
        gap: 1.5rem !important;
    }

    /* Badge Cambridge mobile - spacing */
    .saba-cambridge-badge {
        margin-bottom: 1rem !important;
    }

    /* Headings mobile - spacing */
    .wp-block-cover h1 {
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
    }

    .wp-block-cover p {
        margin-bottom: 1.5rem !important;
    }

    .wp-block-image {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .wp-block-image img {
        width: 100%;
        height: auto;
    }
}

/* === BUTTON GROUP GAP (desktop safety-net) ===
   Alcuni blocchi wp:buttons non hanno blockGap esplicito → il layout genera
   "gap: normal" (=0) e i bottoni restano attaccati (es. hero "Corsi di Lingua
   e Viaggi Responsabili"). Qui imponiamo un gap di default; su mobile la regola
   .wp-block-buttons { gap:1rem !important } più sotto ha la precedenza. */
.wp-site-blocks .wp-block-buttons.is-layout-flex {
    gap: 0.75rem;
}

/* === MOBILE BUTTON SPACING FIX === */
@media (max-width: 768px) {
    /* Tutti i container di bottoni mobile */
    .wp-block-buttons {
        margin-top: 1.5rem !important;
    }

    /* Ogni bottone ha spacing adeguato */
    .wp-block-button + .wp-block-button {
        margin-top: 0 !important;
    }

    /* Bottoni outline mobile */
    .wp-block-button.is-style-outline .wp-block-button__link {
        border-width: 2px !important;
    }

    /* Touch target minimo 44px */
    .wp-block-button__link {
        min-height: 44px !important;
    }
}

/* === UTILITIES === */
.mobile-hidden {
    display: block;
}

@media (max-width: 767px) {
    .mobile-hidden {
        display: none !important;
    }
}

.mobile-only {
    display: none !important;
}

@media (max-width: 767px) {
    .mobile-only {
        display: block !important;
    }
}


/* ========================================
   TURISMO RESPONSABILE - SOLIDARIETÀ
   ======================================== */

/* List style none per checklist */
.is-style-none {
    list-style: none !important;
    padding-left: 0 !important;
}

.is-style-none li {
    margin-bottom: 10px;
    padding-left: 0;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Badge status progetti */
.status-badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Hover effect per card progetti */
.has-border-color.has-background-alt-border-color:hover {
    border-color: var(--wp--preset--color--primary) !important;
    box-shadow: 0 5px 20px rgba(211, 84, 0, 0.15);
    transition: all 0.3s ease;
}

/* Animazione per elementi con gradient background */
.has-warm-sunset-gradient-background,
.has-earth-tone-gradient-background {
    position: relative;
    overflow: hidden;
}

.has-warm-sunset-gradient-background::before,
.has-earth-tone-gradient-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.1), 
        transparent
    );
    transition: left 0.5s ease;
}

.has-warm-sunset-gradient-background:hover::before,
.has-earth-tone-gradient-background:hover::before {
    left: 100%;
}

/* Stile per immagini testimonianze */
.wp-block-image.is-resized img[style*="border-radius:50%"] {
    object-fit: cover;
}

/* Link hover nei bottoni */
.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

/* Responsive adjustments per turismo */
@media (max-width: 782px) {
    /* Hero text più piccolo su mobile */
    .wp-block-cover h1 {
        font-size: 2rem !important;
    }
    
    .wp-block-cover p {
        font-size: 1rem !important;
    }
    
    /* Padding ridotto su mobile */
    .wp-block-group[style*="padding"] {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    /* Colonne stack su mobile */
    .wp-block-columns {
        flex-direction: column !important;
        gap: 20px !important;
    }
    
    .wp-block-column {
        flex-basis: 100% !important;
        margin-left: 0 !important;
    }
}

/* Accessibilità - Focus states */
.wp-block-button__link:focus,
a:focus {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* Print styles per donazioni */
@media print {
    .has-warm-sunset-gradient-background {
        background: white !important;
        color: black !important;
    }
    
    .has-warm-sunset-gradient-background * {
        color: black !important;
    }
}

/* === HOMEPAGE === */
.home .wp-block-social-link.is-disabled-link {
    opacity: 0.45;
    pointer-events: none;
}

/* === FOOTER === */
@media (max-width: 767px) {
    footer .wp-block-columns {
        flex-direction: column;
        gap: 2rem;
    }
    
    footer .wp-block-column {
        text-align: center;
    }
    
    footer .wp-block-social-links {
        justify-content: center;
    }
}

/* ================================================
   BANNER EVENTO DINAMICO - Effetti WOW
   ================================================ */

/* Animazione sottile della locandina */
.locandina-principale img {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.locandina-principale:hover img {
    transform: scale(1.05) rotate(-1deg);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

/* Etichetta evento con animazione */
.etichetta-evento {
    display: inline-block;
    animation: slideInLeft 0.6s ease-out;
    background: rgba(243, 156, 18, 0.2);
    padding: 6px 15px;
    border-radius: 20px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

/* Titolo evento con effetto gradiente */
.titolo-evento {
    animation: fadeInUp 0.8s ease-out;
    text-shadow: 2px 4px 8px rgba(0,0,0,0.4);
    position: relative;
}

/* Box info evento con glow */
.box-info-evento {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 8px 32px rgba(243, 156, 18, 0.3);
    transition: all 0.3s ease;
    animation: fadeInUp 1s ease-out;
}

.box-info-evento:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(243, 156, 18, 0.5);
    border-color: #fff !important;
}

/* Box progetti con animazione */
.box-progetti {
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    animation: fadeInUp 1.2s ease-out;
}

.box-progetti:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
}

/* Bottone principale che pulsa */
.btn-pulsa .wp-block-button__link {
    animation: pulse 2s infinite;
    box-shadow: 0 5px 20px rgba(243, 156, 18, 0.4);
    transition: all 0.3s ease;
}

.btn-pulsa .wp-block-button__link:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 10px 30px rgba(243, 156, 18, 0.6);
}

/* Bottone secondario */
.wp-block-buttons .wp-block-button:not(.btn-pulsa) .wp-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* Animazioni */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 5px 20px rgba(243, 156, 18, 0.4);
    }
    50% {
        box-shadow: 0 5px 30px rgba(243, 156, 18, 0.7);
    }
}

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

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

/* Effetto parallax leggero sullo sfondo */
.banner-evento-dinamico {
    position: relative;
    overflow: hidden;
}

.banner-evento-dinamico::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(243, 156, 18, 0.1) 0%, 
        rgba(0,0,0,0.3) 100%);
    pointer-events: none;
}

/* Mobile Responsive */
@media (max-width: 782px) {
    .banner-evento-dinamico {
        min-height: 380px !important;
    }
    
    .titolo-evento {
        font-size: 1.6rem !important;
    }
    
    .locandina-principale img {
        max-width: 250px;
        margin: 0 auto 20px;
    }
    
    .box-info-evento,
    .box-progetti {
        margin-bottom: 15px;
    }
    
    .wp-block-buttons {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .wp-block-button {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* ================================================
   SABA PROFESSIONAL STYLE - MODERN & CLEAN
   ================================================ */

/* Service Cards con hover elegante */
.saba-service-card,
.phse-service-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-service-card:hover,
.phse-service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(0, 58, 112, 0.1);
}

/* Video Card SABA */
.saba-video-card {
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.saba-video-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* Video nativo WordPress dalla libreria media */
.saba-video-card .wp-block-video,
.saba-video-card .wp-block-video video {
    border-radius: 12px;
    width: 100%;
    max-width: 100%;
}

.saba-video-card .wp-block-video video {
    aspect-ratio: 16/9;
    object-fit: cover;
}

/* Video embed (YouTube, Vimeo, etc.) */
.saba-video-card .saba-video-embed,
.saba-video-card .wp-block-embed,
.saba-video-card iframe {
    border-radius: 12px;
    width: 100%;
    aspect-ratio: 16/9;
}

/* Rimuovi margini predefiniti WordPress dal video */
.saba-video-card .wp-block-video {
    margin: 0;
}

.saba-video-card .wp-block-embed__wrapper {
    border-radius: 12px;
    overflow: hidden;
}

/* ================================================
   HEADER SABA - STICKY & MODERN

   SISTEMA COLORI ADATTIVO ALLA PALETTE:

   SABA Professional (Default):
   - primary: #003A70 (blu scuro) → loghi, link hover, bordi attivi
   - secondary: #005A9C (blu medio) → titolo sito
   - accent: #009FE3 (azzurro) → accenti, hover states
   - foreground: #333333 → testo navigazione
   - background-alt: #F5F7FA → bordi, menu dropdown

   Warm Tones:
   - primary: #C17855 (terracotta) → loghi, link hover, bordi attivi
   - secondary: #8B5A3C (marrone) → titolo sito
   - accent: #E8A87C (albicocca) → accenti, hover states
   - foreground: #3D2817 (cioccolato) → testo navigazione
   - background-alt: #F9F3E8 (sabbia) → bordi, menu dropdown

   Tutti gli elementi header usano CSS var() per adattarsi automaticamente.
   ================================================ */

/* Header principale - sticky con effetto blur */
.saba-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--wp--preset--color--background-alt);
}

/* Effetto shadow quando si scrolla */
.saba-header.is-scrolled,
.saba-header:hover {
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/* Inner container con max-width */
.saba-header__inner {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Logo e branding */
.saba-header__branding {
    flex-shrink: 0;
}

.saba-logo {
    transition: transform 0.3s ease;
}

.saba-logo:hover {
    transform: scale(1.05);
}

.saba-site-title a {
    text-decoration: none;
    transition: color 0.2s ease;
}

.saba-site-title a:hover {
    opacity: 0.8;
}

/* Navigation menu */
.saba-header__navigation {
    gap: 2rem;
}

.saba-header__navigation .wp-block-navigation-item__content {
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    padding-bottom: 4px;
}

.saba-header__navigation .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--wp--preset--color--primary);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-header__navigation .wp-block-navigation-item__content:hover::after,
.saba-header__navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
    width: 100%;
}

.saba-header__navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary);
}

/* Mobile menu responsive */
@media (max-width: 782px) {
    .saba-header {
        padding: 0.75rem var(--wp--preset--spacing--small);
    }

    .saba-header__navigation {
        gap: 1rem;
    }
}

/* ================================================
   FUNDRAISING BANNER - EVENTO SOLIDALE
   ================================================ */

/* Banner principale */
.saba-fundraising-banner {
    position: relative;
    overflow: hidden;
}

/* Event badge con pulsazione sottile */
.saba-event-badge {
    display: inline-flex;
    animation: subtle-pulse 3s ease-in-out infinite;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

@keyframes subtle-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

/* Info box con glassmorphism */
.saba-event-info-box {
    background: rgba(255, 255, 255, 0.15) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.saba-event-info-box:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px);
}

/* Fondi box con hover effect */
.saba-fondi-box {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.saba-fondi-box:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* CTA Button con glow effect */
.saba-cta-glow .wp-block-button__link {
    box-shadow: 0 4px 20px rgba(0, 58, 112, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.saba-cta-glow .wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(0, 159, 227, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.saba-cta-glow .wp-block-button__link:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 58, 112, 0.4);
}

.saba-cta-glow .wp-block-button__link:hover::before {
    width: 300px;
    height: 300px;
}

/* Responsive per banner fundraising */
@media (max-width: 782px) {
    .saba-fundraising-banner .wp-block-columns {
        flex-direction: column;
    }

    .saba-fundraising-banner .wp-block-column {
        flex-basis: 100% !important;
        margin-bottom: var(--wp--preset--spacing--large);
    }

    .saba-fundraising-banner h2 {
        font-size: 2rem !important;
    }
}

/* ================================================
   ANIMAZIONI E MICRO-INTERAZIONI MODERNE
   ================================================ */

/* Course Cards con animazione hover */
.saba-course-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.saba-course-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 159, 227, 0.05), transparent);
    transition: left 0.5s ease;
}

.saba-course-card:hover::before {
    left: 100%;
}

.saba-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 58, 112, 0.15);
}

/* Partners/Certificazioni Gallery - effetto grayscale */
.saba-partners-gallery img {
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}

.saba-partners-gallery img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
}

/* Button animazioni moderne */
.wp-block-button__link {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.wp-block-button__link:active {
    transform: translateY(0);
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Fade in animation per sezioni */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wp-block-group.alignfull {
    animation: fadeInUp 0.6s ease-out;
}

/* Image hover zoom effect */
.wp-block-image img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-image:hover img {
    transform: scale(1.03);
}

/* Link hover effects */
a {
    transition: color 0.2s ease, opacity 0.2s ease;
}

a:hover {
    opacity: 0.8;
}

/* Heading reveal animation */
.wp-block-heading {
    animation: fadeInUp 0.5s ease-out;
}

.wp-block-button__link::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.5s, height 0.5s;
}

.wp-block-button__link:hover::before {
    width: 300px;
    height: 300px;
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 58, 112, 0.25);
}

/* Outline button specifico */
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: currentColor;
}

/* Image hover con zoom leggero */
.wp-block-image img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-image:hover img {
    transform: scale(1.03);
}

/* Smooth scroll per anchor links */
html {
    scroll-behavior: smooth;
}

/* Focus states accessibili */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 3px solid var(--wp--preset--color--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

/* Fade-in animation per sezioni (richiede JS/Intersection Observer) */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.saba-animate-in {
    animation: fadeInUp 0.6s ease-out forwards;
}

/* Loading skeleton (opzionale per lazy loading) */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.saba-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite;
}

/* Heading animati con linea decorativa */
.wp-block-heading.saba-decorated::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--wp--preset--color--accent), var(--wp--preset--color--primary));
    margin: 1rem auto 0;
    border-radius: 2px;
}

/* Responsive: riduzione animazioni su mobile */
@media (max-width: 768px) {
    .saba-service-card:hover,
    .saba-course-card:hover {
        transform: translateY(-2px);
    }

    .wp-block-image:hover img {
        transform: scale(1.01);
    }
}

/* Rispetta le preferenze di riduzione movimento */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

.saba-header__navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary);
}

/* Footer SABA */
.saba-footer {
    background-color: var(--wp--preset--color--white);
}

.saba-footer-nav .wp-block-navigation-item__content {
    color: var(--wp--preset--color--foreground);
    font-size: 0.875rem;
    transition: color 0.2s ease;
}

.saba-footer-nav .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary);
}

/* Footer: Forza sottomenu sempre visibili (no dropdown) - Sovrascrive CSS WordPress */
.saba-footer .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.saba-footer .wp-block-navigation__submenu-container,
.saba-footer-nav .wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container,
.saba-footer-nav .wp-block-navigation__submenu-container {
    position: static !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: auto !important;
    width: auto !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
}

/* Footer: Rimuovi completamente lo stile overlay/popup */
.saba-footer .wp-block-navigation__submenu-container::before,
.saba-footer-nav .wp-block-navigation__submenu-container::before {
    display: none !important;
}

/* Footer: Sottomenu spaziatura */
.saba-footer .wp-block-navigation-item.has-child,
.saba-footer-nav .wp-block-navigation-item.has-child {
    margin-bottom: 0.5rem;
}

.saba-footer .wp-block-navigation__submenu-container .wp-block-navigation-item,
.saba-footer-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
    padding-left: 1rem;
    margin-top: 0.5rem;
    background: transparent !important;
}

/* Footer: Nascondi freccia dropdown e bottone toggle sui sottomenu */
.saba-footer .wp-block-navigation-item.has-child > button,
.saba-footer-nav .wp-block-navigation-item.has-child > button,
.saba-footer .wp-block-navigation__submenu-icon,
.saba-footer-nav .wp-block-navigation__submenu-icon,
.saba-footer button.wp-block-navigation-item__content,
.saba-footer-nav button.wp-block-navigation-item__content {
    display: none !important;
}

/* Footer: Styling sottomenu items - colore scuro visibile */
.saba-footer .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
.saba-footer-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-size: 0.8125rem;
    color: var(--wp--preset--color--foreground) !important;
    opacity: 0.75;
    padding-left: 0;
}

.saba-footer .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.saba-footer-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    opacity: 1;
    color: var(--wp--preset--color--primary) !important;
}

.saba-social .wp-social-link {
    transition: all 0.2s ease;
}

.saba-social .wp-social-link:hover {
    transform: translateY(-2px);
}

/* Buttons SABA Style */
.wp-block-button__link {
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 58, 112, 0.2);
}

/* Typography SABA */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Focus states accessibili */
a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--accent);
    outline-offset: 2px;
}

/* === RESPONSIVE SABA STYLE === */
@media (max-width: 782px) {
    .saba-header {
        padding: 0.75rem 1rem;
    }

    .saba-service-card,
    .phse-service-card {
        margin-bottom: 1.5rem;
    }

    .saba-footer {
        text-align: center;
    }

    .saba-footer .wp-block-columns {
        flex-direction: column;
        gap: 2rem;
    }

    .saba-social {
        justify-content: center !important;
    }
}

/* === PRINT STYLES === */
@media print {
    .saba-header {
        position: static;
        box-shadow: none;
    }

    .wp-block-navigation,
    .wp-block-social-links {
        display: none;
    }
}

/* ================================================
   CAMBRIDGE GOLD SECTION - CERTIFICATO ELEGANTE
   Sezione istituzionale moderna con palette dinamica
   ================================================ */

/* Card Certificato Principale */
.saba-certificate-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}

.saba-certificate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Immagine Certificato */
.saba-certificate-image {
    margin: 0 !important;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.saba-certificate-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-certificate-card:hover .saba-certificate-image img {
    transform: scale(1.02);
}

/* Card Benefici */
.saba-benefit-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.saba-benefit-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Badge Cambridge (nella hero) */
.saba-cambridge-badge {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--wp--preset--color--gold-soft, #CDA349) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(205, 163, 73, 0.15);
    transition: all 0.3s ease;
}

.saba-cambridge-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(205, 163, 73, 0.25);
    border-color: var(--wp--preset--color--gold-soft, #CDA349) !important;
}

.saba-cambridge-badge img,
.cambridge-logo img {
    width: 28px !important;
    height: auto;
    flex-shrink: 0;
}

.saba-cambridge-badge p {
    margin: 0 !important;
    color: var(--wp--preset--color--foreground) !important;
}

/* ===== RESPONSIVE MOBILE ===== */

@media (max-width: 768px) {
    /* Certificate card mobile */
    .saba-certificate-card {
        border-radius: 12px;
    }

    .saba-certificate-image {
        border-radius: 12px 12px 0 0;
    }

    /* Benefit cards stack */
    .saba-benefit-card {
        margin-bottom: 1rem;
    }

    /* Badge nella hero section - responsive */
    .saba-cambridge-badge {
        padding: 6px 12px;
        font-size: 0.8rem !important;
        background: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    }

    .saba-cambridge-badge p {
        color: var(--wp--preset--color--secondary) !important;
    }

    .saba-cambridge-badge img,
    .cambridge-logo img {
        width: 24px !important;
    }
}

/* ================================================
   PAGINA CONTATTI - MODERN & INSTITUTIONAL
   Tutti i colori usano preset del tema per adattarsi
   alle palette dinamiche (PHSE, Warm Tones, etc.)
   ================================================ */

/* Contact Card con shadow soft */
.saba-contact-card {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-contact-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

/* Form styling con preset colors */
.saba-contact-card input[type="text"],
.saba-contact-card input[type="email"],
.saba-contact-card input[type="tel"],
.saba-contact-card input[type="url"],
.saba-contact-card textarea,
.saba-contact-card select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 2px solid var(--wp--preset--color--background-alt);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--wp--preset--font-family--montserrat);
    color: var(--wp--preset--color--foreground);
    background: var(--wp--preset--color--background);
    transition: all 0.3s ease;
}

.saba-contact-card input:focus,
.saba-contact-card textarea:focus,
.saba-contact-card select:focus {
    outline: none;
    border-color: var(--wp--preset--color--accent);
    box-shadow: 0 0 0 3px rgba(0, 159, 227, 0.1);
}

.saba-contact-card label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--wp--preset--color--foreground);
    font-size: 0.9375rem;
}

/* Submit button styling con palette dinamica */
.saba-contact-card input[type="submit"],
.saba-contact-card button[type="submit"] {
    width: 100%;
    padding: 1rem 2rem;
    background: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--white);
    border: none;
    border-radius: 8px;
    font-size: 1.0625rem;
    font-weight: 600;
    font-family: var(--wp--preset--font-family--montserrat);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: 1rem;
}

.saba-contact-card input[type="submit"]:hover,
.saba-contact-card button[type="submit"]:hover {
    background: var(--wp--preset--color--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 58, 112, 0.2);
}

/* Info cards con shadow e hover */
.saba-info-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-info-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

/* Map card con overflow e radius */
.saba-map-card {
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.saba-map-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.saba-google-map iframe {
    width: 100%;
    height: 400px;
    border: 0;
    display: block;
}

/* Link styling con palette dinamica */
.saba-info-card a {
    color: var(--wp--preset--color--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.saba-info-card a:hover {
    color: var(--wp--preset--color--primary);
    text-decoration: underline;
}

/* Responsive Mobile per pagina Contatti */
@media (max-width: 768px) {
    .saba-contact-card {
        padding: 2rem 1.5rem !important;
    }

    .saba-info-card {
        margin-bottom: 1.5rem;
    }

    .saba-google-map iframe {
        height: 300px;
    }

    /* Mobile form padding */
    .saba-contact-card input[type="text"],
    .saba-contact-card input[type="email"],
    .saba-contact-card input[type="tel"],
    .saba-contact-card input[type="url"],
    .saba-contact-card textarea {
        padding: 0.75rem;
        font-size: 1rem;
    }

    .saba-contact-card input[type="submit"],
    .saba-contact-card button[type="submit"] {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* ================================================
   PAGINA FORMAZIONE LINGUISTICA - MODERN LAYOUT
   Card corsi con palette dinamica e hover effects
   ================================================ */

/* Forza hero e sezioni full-width */
.wp-block-cover.alignfull,
.wp-block-group.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Skills Cards - 4 abilità linguistiche */
.saba-skill-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.saba-skill-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Course Cards - Corsi Cambridge */
.saba-course-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.saba-course-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.saba-course-card img {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-course-card:hover img {
    transform: scale(1.05);
}

/* Course card button styling */
.saba-course-card .wp-block-button__link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-course-card .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 159, 227, 0.3);
}

/* CEFR Level Cards */
.saba-level-card {
    transition: all 0.3s ease;
}

.saba-level-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile responsive per Formazione Linguistica */
@media (max-width: 768px) {
    /* Skills cards in mobile vanno in 2 colonne */
    .saba-skill-card {
        margin-bottom: 1rem;
    }

    /* Course cards stack vertically */
    .saba-course-card {
        margin-bottom: 2rem;
    }

    /* Riduce padding delle card su mobile */
    .saba-course-card .wp-block-group {
        padding-left: var(--wp--preset--spacing--medium) !important;
        padding-right: var(--wp--preset--spacing--medium) !important;
    }
}

/* ========================================
   HUB PAGES - Language, Tourism, Development
   ======================================== */

/* Language Cards - Formazione Linguistica HUB */
.saba-language-card {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-language-card:hover {
    transform: translateY(-8px);
}

.saba-language-card .wp-block-group {
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-language-card:hover .wp-block-group {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

/* HUB Cards - Tourism & Development pages */
.saba-hub-card {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-hub-card:hover {
    transform: translateY(-8px);
}

.saba-hub-card .wp-block-group {
    height: 100%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-hub-card:hover .wp-block-group {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.15);
}

.saba-hub-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

/* Testimonial Cards - Development page */
.saba-testimonial-card .wp-block-group {
    height: 100%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.saba-testimonial-card:hover .wp-block-group {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* Mobile responsive adjustments for HUB pages */
@media (max-width: 782px) {
    .saba-language-card,
    .saba-hub-card {
        margin-bottom: 2rem;
    }

    .saba-hub-card img {
        height: 200px;
    }

    .saba-language-card .wp-block-group,
    .saba-hub-card .wp-block-group,
    .saba-testimonial-card .wp-block-group {
        padding: 1.5rem !important;
    }
}

/* === SABA TRANSLATOR — Language Switcher dentro l'header sabaMinimalFSE ===
   Lo switcher eredita 'rgb(42,42,42)' da regole reset.
   Qui forziamo bianco per leggibilita' sul gradiente blue-accent dell'header. */
.is-style-saba-header .saba-language-switcher-wrapper,
.is-style-saba-header .saba-combo-toggle,
.is-style-saba-header .saba-dropdown-toggle,
.is-style-saba-header .saba-lang-flags a {
    color: #fff;
}

.is-style-saba-header .saba-combo-toggle,
.is-style-saba-header .saba-dropdown-toggle {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.is-style-saba-header .saba-combo-toggle:hover,
.is-style-saba-header .saba-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
}

/* Menu dropdown apre verso il basso, sfondo bianco con testo scuro */
.is-style-saba-header .saba-combo-menu a,
.is-style-saba-header .saba-dropdown-menu a {
    color: #2a2a2a;
}

/* === SABA TRANSLATOR — Bandiere prominenti nella hero === */
/* Nota: il blocco saba/language-switcher non passa className al render PHP (bug noto del plugin),
   quindi targhettiamo via parent .saba-video-hero-wrapper / .hero-desktop-content */
.saba-video-hero-wrapper .saba-lang-flags,
.hero-desktop-content .saba-lang-flags {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: center;
}
.saba-video-hero-wrapper .saba-lang-flags a,
.hero-desktop-content .saba-lang-flags a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.22);
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    transition: all .2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.saba-video-hero-wrapper .saba-lang-flags a:hover,
.hero-desktop-content .saba-lang-flags a:hover {
    background: rgba(255, 255, 255, 0.42);
    transform: translateY(-2px);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.28);
}
.saba-video-hero-wrapper .saba-lang-flags a.current-lang,
.hero-desktop-content .saba-lang-flags a.current-lang {
    background: #fff;
    color: #1e1e1e;
    border-color: #fff;
}