/* ==========================================================================
   Hero Header v2.2.3 - Nav Links & Transitions Fix
   ========================================================================== */

/* --- 1. GLOBAL OVERFLOW FIX --- */
html, body, .wp-site-blocks {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* --- 2. MASTER STICKY POSITIONING --- */
.hero-header {
    position: sticky !important;
    top: 0;
    left: 0;
    width: inherit;
    /* Massive z-index ensures it never falls behind post content */
    z-index: 1000 !important; 
    align-self: start !important;
}

/* --- 3. TRANSITIONS & TIMING FIX --- */
/* We apply the transition to the header AND all its children. 
   This ensures that when WP Block backgrounds return, they fade in smoothly. 
   Note: mix-blend-mode itself cannot be animated by browsers, but the colors will fade. */
.hero-header.hh-mode-hero,
.hero-header.hh-mode-hero * {
    transition: background-color var(--hh-duration, 300ms) ease, 
                background var(--hh-duration, 300ms) ease,
                color var(--hh-duration, 300ms) ease,
                fill var(--hh-duration, 300ms) ease !important;
}

/* --- 4. THE ACTIVE STATE (TRANSPARENT + BLEND) --- */
body.hh-is-hero-page .hero-header.hero-header-active[data-blend="difference"] {
    mix-blend-mode: difference !important;
}

body.hh-is-hero-page .hero-header.hero-header-active[data-blend="exclusion"] {
    mix-blend-mode: exclusion !important;
}

/* Force ALL text, links, spans, and SVGs to pure white to ensure blending math works */
body.hh-is-hero-page .hero-header.hero-header-active .wp-block-site-title a,
body.hh-is-hero-page .hero-header.hero-header-active .wp-block-navigation a,
body.hh-is-hero-page .hero-header.hero-header-active .wp-block-navigation span,
body.hh-is-hero-page .hero-header.hero-header-active .wp-block-navigation-item__content,
body.hh-is-hero-page .hero-header.hero-header-active svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* Strip ALL nested backgrounds while active so the image shows through */
body.hh-is-hero-page .hero-header.hero-header-active,
body.hh-is-hero-page .hero-header.hero-header-active :where(div, section, nav, ul, li, .wp-block-group, .wp-block-group__inner-container, .wp-block-navigation__container, .wp-block-site-title, .wp-block-navigation) {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    border-color: transparent !important; 
    box-shadow: none !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- 5. THE SOLID STATE (SCROLLED) --- */
.hero-header.hero-header-solid {
    mix-blend-mode: normal !important;
}

/* --- 6. ADMIN BAR OFFSETS --- */
.admin-bar .hero-header { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar .hero-header { top: 46px; } }