/* --- FIX STICKY IN WP BLOCK THEMES --- */
/* Any hidden overflow on parent elements (like .wp-site-blocks) breaks position: sticky */
html, body, .wp-site-blocks {
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Ensure the header doesn't stretch inside flexbox layouts and stays on top */
.hero-header {
    align-self: start !important;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
}

/* --- PREVENT JUMP: Apply sticky instantly on load --- */
body.hh-is-hero-page header.wp-block-template-part,
body.hh-is-hero-page .wp-block-template-part header,
body.hh-is-hero-page header {
    position: sticky !important;
    top: 0;
    width: 100%;
    z-index: 9999;
}

/* --- HERO MODE: TRANSITIONS --- */
.hero-header.hh-mode-hero,
.hero-header.hh-mode-hero :where(div, section, nav, ul, li, .wp-block-group, .wp-block-group__inner-container) {
    position: sticky !important;
    top: 0;
    transition: background-color var(--hh-duration, 300ms) ease, 
                background var(--hh-duration, 300ms) ease, 
                box-shadow var(--hh-duration, 300ms) ease, 
                border-color var(--hh-duration, 300ms) ease, 
                backdrop-filter var(--hh-duration, 300ms) ease,
                -webkit-backdrop-filter var(--hh-duration, 300ms) ease;
    isolation: isolate;
}

/* --- HERO MODE: TRANSPARENT STATE (PRE-SCROLL) --- */
/* Logic: Apply transparency to all structural blocks AND navigation wrappers so blending can reach the page background */
html:not(.has-modal-open) body.hh-is-hero-page header:not(.hero-header-solid),
html:not(.has-modal-open) body.hh-is-hero-page header:not(.hero-header-solid) :where(div, section, nav, ul, li, .wp-block-group, .wp-block-group__inner-container, .wp-block-navigation__container),
html:not(.has-modal-open) body.hh-is-hero-page .hero-header.hh-mode-hero.hero-header-active,
html:not(.has-modal-open) body.hh-is-hero-page .hero-header.hh-mode-hero.hero-header-active :where(div, section, nav, ul, li, .wp-block-group, .wp-block-group__inner-container, .wp-block-navigation__container) {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
    border-color: transparent !important; 
    box-shadow: 0 0 0 0 transparent !important; 
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- SOLID STATE & STANDARD MODE --- */
/* Inherits native Full Site Editing (FSE) settings */
.hero-header.hh-mode-hero.hero-header-solid,
.hero-header.hh-mode-standard {
    position: sticky !important;
}

/* --- BLENDING: Text & Icons --- */
/* Target all anchor tags directly inside the navigation block so FSE colors don't override them */
html:not(.has-modal-open) body.hh-is-hero-page .hero-header.hero-header-active[data-blend="exclusion"] .wp-block-navigation a,
html:not(.has-modal-open) body.hh-is-hero-page .hero-header.hero-header-active[data-blend="exclusion"] .wp-block-site-title a,
html:not(.has-modal-open) body.hh-is-hero-page .hero-header.hero-header-active[data-blend="exclusion"] svg {
    color: #fff !important;
    fill: #fff !important;
    mix-blend-mode: exclusion !important;
    display: inline-block; /* Forces the creation of a stacking context for the blend to work */
}

html:not(.has-modal-open) body.hh-is-hero-page .hero-header.hero-header-active[data-blend="difference"] .wp-block-navigation a,
html:not(.has-modal-open) body.hh-is-hero-page .hero-header.hero-header-active[data-blend="difference"] .wp-block-site-title a,
html:not(.has-modal-open) body.hh-is-hero-page .hero-header.hero-header-active[data-blend="difference"] svg {
    color: #fff !important;
    fill: #fff !important;
    mix-blend-mode: difference !important;
    display: inline-block; 
}

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