/**
 * ================================================
 * HEADER SABA MINIMAL FSE - STICKY & TRANSPARENT
 * Stile moderno con transizione a trasparenza on-scroll
 * ================================================
 */

/* === HEADER BASE === */
.saba-header,
.is-style-saba-header,
header.is-style-saba-header {
    position: sticky;
    top: 0;
    z-index: 10000;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-bottom: 1px solid transparent;
}

/* Transizione smooth per il background (gradiente FSE o colore) */
.saba-header,
.is-style-saba-header,
.saba-header.has-background,
.is-style-saba-header.has-background {
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                background-image 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Admin bar offset */
body.admin-bar .saba-header,
body.admin-bar .is-style-saba-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .saba-header,
    body.admin-bar .is-style-saba-header {
        top: 46px;
    }
}

/* === MODERN NAV + GRADIENT WRAP (Demo-inspired) === */
:root {
    --saba-nav-gradient-start: #b3544b;
    --saba-nav-gradient-end: #9a1e2d;
    --saba-nav-highlight: var(--wp--preset--color--primary, #ffd27f);
    --saba-nav-surface: var(--wp--preset--color--background, #fff7ef);
    --saba-nav-contrast: var(--wp--preset--color--contrast, #222222);
}

.saba-header {
    background: linear-gradient(90deg, var(--saba-nav-gradient-start), var(--saba-nav-gradient-end));
    position: relative;
    overflow: visible !important;
}

.saba-header.saba-header--scrolled {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.saba-header .wp-block-site-title a {
    color: var(--wp--preset--color--base, #ffffff);
}

.saba-header .wp-block-site-title a:hover {
    color: var(--saba-nav-highlight);
}

.saba-header .saba-nav-modern {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: flex-end;
}

.saba-header .saba-nav-modern .wp-block-navigation {
    display: flex;
    justify-content: center;
    gap: 2rem;
    width: 100%;
}

.saba-header .saba-nav-modern .wp-block-navigation__container {
    display: flex;
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.saba-header .saba-nav-modern .wp-block-navigation__container > .wp-block-navigation-item {
    position: relative;
}

.saba-header .saba-nav-modern .wp-block-navigation-item__content {
    position: relative;
    padding: 0.5rem 0;
    color: var(--wp--preset--color--base, #ffffff);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.01em;
    transition: color 0.25s ease;
}

.saba-header .saba-nav-modern .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -0.35rem;
    width: 0;
    height: 2px;
    background: var(--saba-nav-highlight);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
    transform: translateX(-50%);
    transition: width 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.saba-header .saba-nav-modern .wp-block-navigation-item__content:hover,
.saba-header .saba-nav-modern .wp-block-navigation-item__content:focus-visible {
    color: var(--saba-nav-highlight);
}

.saba-header .saba-nav-modern .wp-block-navigation-item__content:hover::after,
.saba-header .saba-nav-modern .wp-block-navigation-item__content:focus-visible::after {
    width: 70%;
}

.saba-header .saba-nav-modern .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after {
    width: 70%;
}

.saba-header .saba-nav-modern .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
    color: var(--saba-nav-highlight);
}

@media (min-width: 960px) {
    .saba-header .saba-nav-modern .wp-block-navigation__submenu-container {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        margin-top: 0.5rem;
        padding: 0.35rem 0.25rem;
        background: var(--saba-nav-surface);
        border-radius: 12px;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.08);
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    }

    .saba-header .saba-nav-modern .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container,
    .saba-header .saba-nav-modern .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .saba-header .saba-nav-modern .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        color: var(--saba-nav-contrast);
        padding: 0.55rem 1rem;
        border-radius: 10px;
        font-weight: 600;
        transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    .saba-header .saba-nav-modern .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
        background: rgba(0, 0, 0, 0.05);
        color: var(--saba-nav-gradient-end);
        transform: translateX(4px);
    }
}

/* === HEADER SCROLLED - TRASPARENZA + BLUR === */
.saba-header.saba-header--scrolled,
.is-style-saba-header.saba-header--scrolled {
    /* Lo sfondo viene impostato dinamicamente via JavaScript usando il colore background del tema */
    background-image: none !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.saba-header.saba-header--modern.saba-header--scrolled {
    background-image: linear-gradient(90deg, var(--saba-nav-gradient-start), var(--saba-nav-gradient-end)) !important;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Testo menu quando header è scrolled - usa il colore foreground del tema */
.saba-header.saba-header--scrolled .wp-block-navigation-item__content,
.is-style-saba-header.saba-header--scrolled .wp-block-navigation-item__content {
    color: var(--wp--preset--color--foreground) !important;
}

.saba-header.saba-header--modern.saba-header--scrolled .saba-nav-modern .wp-block-navigation-item__content {
    color: var(--wp--preset--color--base, #ffffff) !important;
}

/* Site title quando header è scrolled - usa il colore foreground del tema */
.saba-header.saba-header--scrolled .wp-block-site-title a,
.is-style-saba-header.saba-header--scrolled .wp-block-site-title a {
    color: var(--wp--preset--color--foreground) !important;
}

.saba-header.saba-header--modern.saba-header--scrolled .wp-block-site-title a {
    color: var(--wp--preset--color--base, #ffffff) !important;
}

/* === LOGO === */
.saba-header .wp-block-site-logo img,
.is-style-saba-header .wp-block-site-logo img {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-header.saba-header--scrolled .wp-block-site-logo img,
.is-style-saba-header.saba-header--scrolled .wp-block-site-logo img {
    transform: scale(0.92);
}

/* === NAVIGATION LINKS === */
.saba-header .wp-block-navigation-item__content,
.is-style-saba-header .wp-block-navigation-item__content {
    font-weight: 500;
    /* Colore controllato da FSE - non forzare */
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding-bottom: 4px;
}

/* === A11y P1: leggibilità testo header sul gradiente blue-accent ===
   Il testo crema (#F3EBE2) sull'estremità ocra chiara (#D4A574) del gradiente
   scende a ~1.9–3:1 — sotto il 4.5:1 AA per testo normale (17.7px).
   Scrim via text-shadow: alone scuro che darkenizza lo sfondo immediato e
   recupera la leggibilità lungo tutto il gradiente, senza alterare il brand.
   Solo stato NON-scrolled: da scrollato la nav passa a testo scuro su sfondo
   chiaro (header.css ~l.197), dove un'ombra scura sarebbe controproducente. */
.is-style-saba-header:not(.saba-header--scrolled) .wp-block-navigation-item__content,
.is-style-saba-header:not(.saba-header--scrolled) .wp-block-site-title a {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55),
                 0 0 14px rgba(0, 0, 0, 0.35);
}

.saba-header .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 .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary);
}

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

/* Modern nav link overrides */
.saba-header .saba-nav-modern .wp-block-navigation-item__content {
    padding: 0.5rem 0 !important;
    font-weight: 600 !important;
    color: var(--wp--preset--color--base, #ffffff) !important;
}

.saba-header .saba-nav-modern .wp-block-navigation-item__content::after {
    bottom: -0.35rem;
    background: var(--saba-nav-highlight);
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
    transition: width 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* === SITE TITLE === */
.saba-header .wp-block-site-title a,
.is-style-saba-header .wp-block-site-title a {
    text-decoration: none;
    /* Colore controllato da FSE - non forzare */
    transition: color 0.2s ease;
}

.saba-header .wp-block-site-title a:hover,
.is-style-saba-header .wp-block-site-title a:hover {
    color: var(--wp--preset--color--primary);
}

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

    /* Mostra submenu on hover */
    .saba-header .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container {
        display: block;
    }
}

/* === MOBILE HEADER === */
@media (max-width: 1023px) {
    /* MOBILE: Hide on Scroll Down Animation */
    .saba-header,
    .is-style-saba-header {
        transform: translateY(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .saba-header.saba-header--hidden,
    .is-style-saba-header.saba-header--hidden {
        transform: translateY(-100%);
        box-shadow: none;
    }

    /* Riduce padding header su mobile */
    .saba-header > .wp-block-group,
    .is-style-saba-header > .wp-block-group {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Logo più piccolo su mobile */
    .saba-header .wp-block-site-logo img,
    .is-style-saba-header .wp-block-site-logo img {
        max-height: 36px !important;
        width: auto !important;
    }

    /* Titolo sito più piccolo su mobile */
    .saba-header .wp-block-site-title,
    .is-style-saba-header .wp-block-site-title {
        font-size: 1rem !important;
    }

    /* Modern nav toggle + overlay */
    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open {
        position: absolute;
        right: 1rem;
        top: 0.6rem;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--wp--preset--color--base, #ffffff) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
        backdrop-filter: blur(8px) !important;
        transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open svg {
        display: none;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open::before,
    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open::after {
        content: "";
        position: absolute;
        left: 50%;
        width: 1.35rem;
        height: 2px;
        background: currentColor;
        border-radius: 2px;
        transition: transform 0.25s ease, opacity 0.2s ease;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open::before {
        transform: translate(-50%, -6px);
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open::after {
        transform: translate(-50%, 6px);
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open {
        background-image: linear-gradient(currentColor, currentColor);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 1.35rem 2px;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open:hover {
        transform: translateY(-1px) scale(1.02);
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.2) !important;
        background: rgba(255, 255, 255, 0.14) !important;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open[aria-expanded="true"] {
        background-size: 0 0;
        background: rgba(255, 255, 255, 0.16) !important;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open[aria-expanded="true"]::before {
        transform: translate(-50%, 0) rotate(45deg);
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-open[aria-expanded="true"]::after {
        transform: translate(-50%, 0) rotate(-45deg);
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container {
        background: transparent !important;
        border: none !important;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        padding: 5rem 1.25rem 2rem !important;
        margin: 0 !important;
        background: linear-gradient(180deg, rgba(255, 247, 239, 0.98), rgba(255, 255, 255, 0.96)) !important;
        backdrop-filter: blur(12px);
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column;
        gap: 0.5rem;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container .wp-block-navigation__container {
        gap: 0.75rem;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container .wp-block-navigation-item {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        margin: 0;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        display: block;
        padding: 1rem 1.25rem !important;
        font-size: 1.05rem;
        font-weight: 700 !important;
        color: var(--saba-nav-contrast) !important;
        border-radius: 12px;
        transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
        background: rgba(0, 0, 0, 0.04) !important;
        color: var(--saba-nav-gradient-end) !important;
        transform: translateX(4px);
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: transparent !important;
        border: none !important;
        border-left: 3px solid var(--saba-nav-highlight) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.25rem 0 0.4rem 0 !important;
        margin: 0.25rem 0 0.5rem 0 !important;
        transform: none !important;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding-left: 1.75rem !important;
        padding-right: 1.25rem !important;
        font-size: 0.98rem;
        font-weight: 600 !important;
        color: var(--saba-nav-contrast) !important;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
        transform: translateX(6px);
        background: rgba(0, 0, 0, 0.03) !important;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        display: none !important;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-close {
        position: fixed !important;
        top: 1.1rem !important;
        right: 1.1rem !important;
        background: var(--saba-nav-gradient-end) !important;
        color: #ffffff !important;
        border-radius: 999px !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22) !important;
        z-index: 10000 !important;
    }

    .saba-header .saba-nav-modern .wp-block-navigation__responsive-container-close:hover {
        transform: rotate(0deg) scale(1.05) !important;
        background: var(--saba-nav-gradient-start) !important;
    }

    /* Hamburger button */
    .saba-header .wp-block-navigation__responsive-container-open {
        display: flex !important;
        align-items: center;
        justify-content: center;
        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;
    }

    .saba-header .wp-block-navigation__responsive-container-open:hover {
        background: var(--wp--preset--color--accent) !important;
        transform: scale(1.05) !important;
    }

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

    /* Mobile menu overlay */
    .saba-header .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;
        height: 100vh !important;
        padding: 5rem 1.5rem 2rem !important;
        background: var(--wp--preset--color--background) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
    }

    /* Mobile menu items */
    .saba-header .wp-block-navigation__responsive-container .wp-block-navigation-item {
        border-bottom: 1px solid var(--wp--preset--color--background-alt);
        margin: 0;
    }

    .saba-header .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;
    }

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

    /* Close button */
    .saba-header .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;
        z-index: 10000 !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
    }

    .saba-header .wp-block-navigation__responsive-container-close:hover {
        background: var(--wp--preset--color--accent) !important;
        transform: rotate(90deg) scale(1.1) !important;
    }

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

    /* MOBILE: Submenu sempre visibile (non collassabile) */
    .saba-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: var(--wp--preset--color--background-alt) !important;
        border: none !important;
        border-left: 4px solid var(--wp--preset--color--primary) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding: 0.5rem 0 !important;
        margin: 0 !important;
        transform: none !important;
    }

    /* Voci submenu mobile - indentate */
    .saba-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding-left: 3rem !important;
        padding-right: 1.5rem !important;
        font-size: 0.9375rem !important;
        font-weight: 500 !important;
        color: var(--wp--preset--color--foreground) !important;
    }

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

    /* Nascondi freccia submenu su mobile */
    .saba-header .wp-block-navigation__responsive-container .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        display: none !important;
    }

    /* Icona submenu WordPress - nascosta su mobile */
    .saba-header .wp-block-navigation__responsive-container .wp-block-navigation__submenu-icon {
        display: none !important;
    }
}

/* =============================================================
   MENU MOBILE 2026 — overlay hamburger ristilizzato
   NB: la nav LIVE usa `.is-style-saba-header` (NON `.saba-header`),
   quindi i due blocchi mobile qui sopra — scoppiati su `.saba-header` —
   non toccano il menu reale (restava il default WP grezzo). Questo è il
   sistema ATTIVO: pannello crema coerente col dropdown desktop, tap target
   ampi (>=48px), sottomenu indentati, e barra account (Accedi/Registrati)
   fissa in fondo, visibile solo a overlay aperto (html.has-modal-open).
   ============================================================= */
@media (max-width: 1023px) {

    /* --- Overlay a tutto schermo, pannello crema --- */
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        padding: 5.5rem 1.25rem 7rem !important; /* spazio per header e barra account */
        background: #FFF8F0 !important;
        color: #241A18 !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
    }
    @media (prefers-reduced-motion: no-preference) {
        .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open {
            animation: saba-mobile-menu-in 0.28s cubic-bezier(0.4, 0, 0.2, 1) both;
        }
    }

    /* Contenitori interni a piena larghezza (annulla is-content-justification-right) */
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Lista voci: colonna, piena larghezza, allineata a sinistra (annulla items-justified-right) */
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0.15rem !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Voce singola — il <li> è flex-column: forza stretch così il link va a piena larghezza (non a destra) */
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        width: 100% !important;
        align-items: stretch !important;
        margin: 0 !important;
        border-bottom: 1px solid rgba(36, 26, 24, 0.08);
    }
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        display: block !important;
        width: 100% !important;
        padding: 1rem !important;
        min-height: 48px;
        font-size: 1.08rem !important;
        font-weight: 700 !important;
        color: #241A18 !important;
        text-align: left !important;
        border-radius: 12px;
        transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    }
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
        background: rgba(163, 38, 56, 0.07) !important;
        color: #9A1E2D !important;
        transform: translateX(4px);
    }

    /* Sottomenu: sempre visibile, indentato con filetto bordeaux */
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
        position: static !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        min-width: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-left: 3px solid rgba(163, 38, 56, 0.35) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        margin: 0.1rem 0 0.5rem 0.4rem !important;
        padding: 0.1rem 0 !important;
        transform: none !important;
    }
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        padding-left: 1.5rem !important;
        font-size: 0.98rem !important;
        font-weight: 600 !important;
        color: #4A3B37 !important;
    }
    /* Frecce/toggle sottomenu: nascoste (i sottomenu sono già espansi) */
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
    .is-style-saba-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
        display: none !important;
    }

    /* Bottone di chiusura (X) */
    .is-style-saba-header .wp-block-navigation__responsive-container-close {
        position: fixed !important;
        top: 1rem !important;
        right: 1rem !important;
        width: 2.75rem !important;
        height: 2.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #A32638 !important;
        color: #fff !important;
        border-radius: 999px !important;
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22) !important;
        z-index: 10001 !important;
        transition: background 0.2s ease, transform 0.2s ease;
    }
    .is-style-saba-header .wp-block-navigation__responsive-container-close svg { fill: #fff !important; }
    .is-style-saba-header .wp-block-navigation__responsive-container-close:hover {
        background: #7D1D2C !important;
        transform: rotate(90deg) scale(1.05);
    }

    /* --- BARRA ACCOUNT in fondo: Accedi / Registrati ---
       L'header ha un transform (containing block) che spezza position:fixed,
       quindi mobile-utils.js sposta il wrapper nel <body> quando l'overlay è
       aperto, aggiungendo .saba-mobile-auth-active. Qui la stiliamo come barra
       fissa in fondo. */
    .saba-auth-menu-wrapper.saba-mobile-auth-active {
        display: flex !important;
        align-items: center !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        height: auto !important;
        z-index: 10002 !important;
        margin: 0 !important;
        padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom, 0px)) !important;
        background: #fff !important;
        border-top: 1px solid rgba(36, 26, 24, 0.1);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.1);
    }
    .saba-auth-menu-wrapper.saba-mobile-auth-active .saba-mobile-overlay {
        display: none !important;
    }
    /* Reset del drawer mobile del plugin (position:fixed; right:-100%; height:100vh):
       qui la vogliamo come riga statica di 2 pill dentro la barra in fondo. */
    .saba-auth-menu-wrapper.saba-mobile-auth-active .saba-auth-menu-horizontal {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 0.6rem !important;
        position: static !important;
        inset: auto !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
        overflow: visible !important;
        z-index: auto !important;
        list-style: none;
    }
    .saba-auth-menu-wrapper.saba-mobile-auth-active .saba-menu-item {
        flex: 1 1 0;
        margin: 0 !important;
    }
    .saba-auth-menu-wrapper.saba-mobile-auth-active .saba-menu-item > a,
    .saba-auth-menu-wrapper.saba-mobile-auth-active .saba-menu-item > button {
        display: flex !important;
        align-items: center;
        justify-content: center !important;
        width: 100%;
        min-height: 48px;
        padding: 0.8rem 1rem !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
        font-weight: 700 !important;
        text-align: center;
    }
    /* Accedi = secondary (outline bordeaux) */
    .saba-auth-menu-wrapper.saba-mobile-auth-active .saba-login-link {
        border: 2px solid #A32638 !important;
        color: #A32638 !important;
    }
    /* Registrati = primary (bordeaux pieno) */
    .saba-auth-menu-wrapper.saba-mobile-auth-active .saba-register-link,
    .saba-auth-menu-wrapper.saba-mobile-auth-active .saba-register-student-link {
        background: #A32638 !important;
        color: #fff !important;
        border: 2px solid #A32638 !important;
    }
}

@keyframes saba-mobile-menu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

/* === VIDEO HERO SECTION === */
.saba-video-hero-wrapper {
    overflow: hidden;
}

.saba-video-hero {
    position: relative;
    overflow: hidden;
}

/* Video aspect ratio 16:9 */
.saba-video-wrapper,
.saba-video-wrapper video,
.saba-video-wrapper iframe {
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
}

/* Cover overlay */
.saba-video-hero .wp-block-cover__background {
    transition: opacity 0.3s ease;
}

.saba-video-hero:hover .wp-block-cover__background {
    opacity: 0.4;
}

/* Hero buttons */
.saba-btn-primary .wp-block-button__link,
.saba-btn-secondary .wp-block-button__link {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.saba-btn-primary .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 159, 227, 0.3);
}

.saba-btn-secondary .wp-block-button__link:hover {
    background: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 58, 112, 0.2);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .saba-video-hero {
        min-height: 500px !important;
        border-radius: 12px !important;
    }

    .saba-video-hero h1 {
        font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
    }

    .saba-video-hero p {
        font-size: 1.125rem !important;
    }

    .saba-video-hero .wp-block-buttons {
        flex-direction: column !important;
        width: 100%;
    }

    .saba-video-hero .wp-block-button {
        width: 100%;
    }

    .saba-video-hero .wp-block-button__link {
        width: 100%;
        justify-content: center;
    }
}

/* === SMOOTH ANIMATIONS === */
@media (prefers-reduced-motion: reduce) {
    .saba-header,
    .saba-header *,
    .saba-video-hero * {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===========================================
   HEADER SCURO TEXTURIZZATO (live: .is-style-saba-header)
   Sostituisce il gradiente blue-accent: base espresso + grana fine
   (SVG feTurbulence inline) + alone caldo bordeaux/ocra.
   Resta scuro anche scrollato (solo ombra in più, niente trasparenza).
   =========================================== */
.is-style-saba-header,
.is-style-saba-header.has-background,
.is-style-saba-header.has-blue-accent-gradient-background,
.is-style-saba-header.saba-header--scrolled {
    background-color: #221A18 !important;
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'180'%20height%3D'180'%3E%3Cfilter%20id%3D'n'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'0.9'%20numOctaves%3D'2'%20stitchTiles%3D'stitch'%2F%3E%3CfeColorMatrix%20type%3D'saturate'%20values%3D'0'%2F%3E%3C%2Ffilter%3E%3Crect%20width%3D'180'%20height%3D'180'%20filter%3D'url(%23n)'%20opacity%3D'0.55'%2F%3E%3C%2Fsvg%3E"),
        radial-gradient(120% 180% at 100% 0%, rgba(163, 38, 56, 0.45), transparent 58%),
        radial-gradient(120% 180% at 0% 0%, rgba(212, 165, 116, 0.22), transparent 55%) !important;
    background-size: 180px 180px, auto, auto !important;
    background-blend-mode: soft-light, normal, normal !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Testo header su scuro: crema, hover ocra (entrambi gli stati) */
.is-style-saba-header .wp-block-navigation-item__content,
.is-style-saba-header .wp-block-site-title a,
.is-style-saba-header .saba-current-lang,
.is-style-saba-header .saba-combo-toggle,
.is-style-saba-header.saba-header--scrolled .wp-block-navigation-item__content,
.is-style-saba-header.saba-header--scrolled .wp-block-site-title a {
    color: #F3EBE2 !important;
    text-shadow: none !important;
}

.is-style-saba-header .wp-block-navigation-item__content:hover,
.is-style-saba-header .wp-block-navigation-item__content:focus-visible {
    color: var(--wp--preset--color--accent, #D4A574) !important;
}

/* Sottomenu: sfondo chiaro (#FFF8F0) → testo scuro.
   Override del crema #F3EBE2 ereditato dalla regola "header scuro" sopra,
   che altrimenti rende le voci del dropdown illeggibili (chiaro su chiaro). */
.is-style-saba-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    color: #221A18 !important;
    text-shadow: none !important;
}

.is-style-saba-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.is-style-saba-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    color: #9A1E2D !important;
    background: rgba(154, 30, 45, 0.08) !important;
}

/* Scrollato: resta scuro, ombra marcata + lieve compattamento */
.is-style-saba-header.saba-header--scrolled {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20) !important;
}

.is-style-saba-header.saba-header--scrolled > .wp-block-group {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* CTA pill: aggiungere la classe CSS "saba-nav-cta" alla voce di menu (es. Contattaci) nell'editor */
.is-style-saba-header .wp-block-navigation-item.saba-nav-cta > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--accent, #D4A574);
    color: #221A18 !important;
    padding: 0.5rem 1.15rem !important;
    border-radius: 9999px;
    font-weight: 700 !important;
}

.is-style-saba-header .wp-block-navigation-item.saba-nav-cta > .wp-block-navigation-item__content:hover {
    background: var(--wp--preset--color--accent-light, #E8C9A7);
    color: #221A18 !important;
}

.is-style-saba-header .wp-block-navigation-item.saba-nav-cta > .wp-block-navigation-item__content::after {
    display: none !important;
}

/* =====================================================
   SABA AUTH MENU — integrazione nell'header scuro
   Sostituisce l'icona WooCommerce customer-account.
   Palette: espresso #221A18, crema #F3EBE2, ocra #D4A574, bordeaux #9A1E2D
   ===================================================== */

/* Wrapper flex-item accanto alla <ul> del Navigation block */
.is-style-saba-header .saba-auth-menu-wrapper {
    display: flex;
    align-items: center;
    margin-left: 1rem;
    flex-shrink: 0;
}

/* Nasconde hamburger saba (il toggle lo gestisce il nav WP) */
.is-style-saba-header .saba-mobile-toggle {
    display: none !important;
}

/* Nasconde l'overlay saba (non serve nell'header) */
.is-style-saba-header .saba-mobile-overlay {
    display: none !important;
}

/* Menu orizzontale: reset layout mobile fisso */
.is-style-saba-header .saba-auth-menu-horizontal {
    position: static !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    flex-direction: row !important;
    overflow: visible !important;
    transition: none !important;
    z-index: auto !important;
}

/* Bottone/link nell'header scuro: pill semi-trasparente come il vecchio WC icon */
.is-style-saba-header .saba-menu-item > a,
.is-style-saba-header .saba-menu-item > button {
    color: #F3EBE2 !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
}

.is-style-saba-header .saba-menu-item > a:hover,
.is-style-saba-header .saba-menu-item > button:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    color: #F3EBE2 !important;
    transform: translateY(-1px) !important;
    box-shadow: none !important;
}

/* Testo benvenuto utente loggato: forza crema (il plugin imposta nero) */
.is-style-saba-header .saba-user-welcome {
    color: #F3EBE2 !important;
}

/* Freccia dropdown: crema */
.is-style-saba-header .saba-menu-item.has-dropdown > button::after {
    border-top-color: #F3EBE2 !important;
}

/* DROPDOWN PANEL: position absolute (override del "static" di frontend.css) */
.is-style-saba-header .saba-menu-item.has-dropdown {
    position: relative;
}

.is-style-saba-header .saba-dropdown-content {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    left: auto !important;
    margin-top: 0 !important;
    min-width: 210px !important;
    background: #FFF8F0 !important;
    color: #221A18 !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.22) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    z-index: 10001 !important;
    overflow: visible !important;
}

/* Link nel dropdown su sfondo chiaro → testo scuro */
.is-style-saba-header .saba-dropdown-menu a,
.is-style-saba-header .saba-dropdown-menu button {
    color: #221A18 !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.is-style-saba-header .saba-dropdown-menu a:hover,
.is-style-saba-header .saba-dropdown-menu button:hover {
    background: rgba(154, 30, 45, 0.08) !important;
    color: #9A1E2D !important;
    transform: translateX(4px) !important;
}

/* Link "Accedi" (utente non loggato) — stesso stile del pill WC */
.is-style-saba-header .saba-login-link {
    color: #F3EBE2 !important;
    background: rgba(255, 255, 255, 0.10) !important;
    border: 1px solid rgba(255, 255, 255, 0.20) !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    box-shadow: none !important;
}

.is-style-saba-header .saba-login-link:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    color: #F3EBE2 !important;
    transform: translateY(-1px) !important;
}

/* Mobile: nasconde il menu auth nell'header (il nav hamburger copre la navigazione) */
@media (max-width: 1023px) {
    .is-style-saba-header .saba-auth-menu-wrapper {
        display: none !important;
    }
}

/* ---- Icona account WooCommerce nell'header: box coerente col selettore lingua ---- */
header .wc-block-customer-account__link,
.is-style-saba-header .wc-block-customer-account__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #fff;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

header .wc-block-customer-account__link:hover,
.is-style-saba-header .wc-block-customer-account__link:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}

header .wc-block-customer-account__account-icon,
.is-style-saba-header .wc-block-customer-account__account-icon {
    width: 22px;
    height: 22px;
    color: #fff;
}