/**
 * RCH Hero Nav — Styles
 *
 * All rules scoped to .rhn-hero-page so zero effect on any other page.
 * Confirmed selectors from live markup inspection 2026-06-04:
 *   - Header element:        header.wp-block-template-part
 *   - Inner bg wrapper:      .wp-block-group.has-background
 *   - Logo:                  .wp-block-site-logo img  /  img.custom-logo
 *   - MMM wrap:              #mega-menu-wrap-max_mega_menu_1
 *   - MMM breakpoint:        779px desktop / 778px mobile
 *   - MMM toggle:            .mega-menu-toggle
 *   - MMM panel:             .mega-menu-toggle + #mega-menu-max_mega_menu_1
 *                            Anchored via header position:absolute context.
 *                            top:100% places it flush below the header bar.
 *   - MMM desktop wrap bg:   rgba(255,255,255,0.1) at min-width:779px
 *
 * Two visual states:
 *   Transparent (over hero): frosted dark bar + white text
 *   Scrolled/sticky:         solid white bar + dark text
 *                            (only when rhn_sticky_on_scroll = 1, default off)
 *
 * Mobile panel:
 *   Over hero  → solid dark panel flush below header, white text
 *                active item = full white bold, inactive = 75% white
 *   Sticky     → white panel, dark text
 *
 * @package RCH_Hero_Nav
 * @version 1.0.7
 * @date    2026-06-04
 */

/* ============================================================
   1. TRANSPARENT STATE — frosted dark bar floats over hero
   ============================================================ */

/**
 * position:absolute takes the header out of document flow so it
 * overlays the hero. Also serves as the positioning context for
 * the mobile panel (top:100% anchors to this element's bottom).
 */
.rhn-hero-page header.wp-block-template-part {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: rgba(10, 20, 36, 0.55) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: none !important;
    border-bottom: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/**
 * Inner group div carries has-base-background-color via theme.json
 * utility classes — must be explicitly neutralised.
 */
.rhn-hero-page header.wp-block-template-part .wp-block-group.has-background {
    background-color: transparent !important;
    transition: background-color 0.3s ease;
}

/**
 * Gap fix — WordPress block gap applies margin-block-start: 1.2rem to all
 * direct children of .wp-site-blocks. Zero it out on hero pages.
 */
.rhn-hero-page .wp-site-blocks {
    padding-top: 0 !important;
}

.rhn-hero-page .wp-site-blocks > .wp-block-template-part ~ * {
    margin-block-start: 0;
}

.rhn-hero-page .wp-site-blocks > .wp-block-template-part ~ *:not(:first-of-type) {
    margin-block-start: 1.2rem;
}

/* ============================================================
   2. LOGO INVERSION — dark PNG becomes white over frosted bar
   ============================================================ */

.rhn-hero-page header.wp-block-template-part .wp-block-site-logo img,
.rhn-hero-page header.wp-block-template-part img.custom-logo {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease;
}

/* ============================================================
   3. DESKTOP NAV LINK COLOUR — white over frosted bar (≥779px)
   ============================================================ */

@media only screen and (min-width: 779px) {
    .rhn-hero-page header.wp-block-template-part #mega-menu-max_mega_menu_1 > li > a.mega-menu-link,
    .rhn-hero-page header.wp-block-template-part .mega-menu-link {
        color: #ffffff !important;
        transition: color 0.3s ease;
    }

    .rhn-hero-page header.wp-block-template-part .wp-block-navigation a {
        color: #ffffff !important;
        transition: color 0.3s ease;
    }
}

/* ============================================================
   4. MOBILE HAMBURGER — white icon over frosted bar (≤778px)
   ============================================================ */

.rhn-hero-page header.wp-block-template-part .mega-menu-toggle {
    background: transparent !important;
    border: none !important;
}

.rhn-hero-page header.wp-block-template-part .mega-menu-toggle button,
.rhn-hero-page header.wp-block-template-part .mega-menu-toggle .mega-toggle-label {
    color: #ffffff !important;
    transition: color 0.3s ease;
}

/* Hamburger animated bars — white over frosted bar */
.rhn-hero-page header.wp-block-template-part .mega-toggle-animated-inner,
.rhn-hero-page header.wp-block-template-part .mega-toggle-animated-inner::before,
.rhn-hero-page header.wp-block-template-part .mega-toggle-animated-inner::after,
.rhn-hero-page header.wp-block-template-part .mega-toggle-animated-box span {
    background-color: #ffffff !important;
    transition: background-color 0.3s ease;
}

/* ============================================================
   5. MMM DESKTOP WRAP BACKGROUND — neutralise pill (≥779px)
   ============================================================ */

@media only screen and (min-width: 779px) {
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 {
        background: transparent !important;
    }
}

/* ============================================================
   6. MOBILE NAV PANEL — dark background, white text
      Do NOT override position, top, left, right, or width.
      MMM JS sets these correctly (position:absolute; width:100%
      anchored to the wrap). Overriding them breaks the width
      calculation and squeezes the panel to the toggle's width.
      Only override visual properties: background, color, padding.
   ============================================================ */

@media only screen and (max-width: 778px) {

    /**
     * Panel background — solid dark, no positioning overrides.
     * MMM JS handles position:absolute and width:100% correctly.
     */
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle + #mega-menu-max_mega_menu_1 {
        background: rgba(10, 20, 36, 0.96) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        padding-top: 8px !important;
        padding-bottom: 16px !important;
        margin-top: 20px !important;
    }

    /**
     * Inactive nav links — muted white, no background box.
     */
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 ul.mega-menu > li > a.mega-menu-link,
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 ul.mega-menu > li > a {
        color: rgba(255, 255, 255, 0.75) !important;
        background: transparent !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /**
     * Active / current page item — full white, bold, no background.
     */
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
        color: #ffffff !important;
        font-weight: 700 !important;
        background: transparent !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /**
     * Hover — full white, no background box.
     */
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item:hover > a.mega-menu-link {
        color: #ffffff !important;
        background: transparent !important;
    }

    /* Sub-menu items */
    .rhn-hero-page #mega-menu-wrap-max_mega_menu_1 .mega-sub-menu a {
        color: rgba(255, 255, 255, 0.75) !important;
        background: transparent !important;
    }

    /* Header goes solid when mobile menu is open — single plane with panel */
    .rhn-hero-page.rhn-menu-open header.wp-block-template-part {
        background: rgba(10, 20, 36, 0.96) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

}

/* ============================================================
   7. MEGA MENU DESKTOP DROPDOWN PANELS — always white
   ============================================================ */

.rhn-hero-page .mega-sub-menu,
.rhn-hero-page .mega-menu-row,
.rhn-hero-page #mega-menu-wrap-max_mega_menu_1 .mega-sub-menu {
    background-color: #ffffff !important;
}

.rhn-hero-page .mega-sub-menu a,
.rhn-hero-page .mega-sub-menu .mega-menu-link {
    color: inherit !important;
}

/* ============================================================
   8. SCROLLED STATE — solid white bar (sticky = on only)
      JS only adds .rhn-scrolled when rhn_sticky_on_scroll = 1.
      No effect when setting is off (default).
   ============================================================ */

.rhn-hero-page.rhn-scrolled header.wp-block-template-part {
    position: fixed;
    background: #ffffff !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: 0 2px 10px rgba(43, 67, 94, 0.11) !important;
}

.rhn-hero-page.rhn-scrolled header.wp-block-template-part .wp-block-group.has-background {
    background-color: #ffffff !important;
}

/* Restore logo */
.rhn-hero-page.rhn-scrolled header.wp-block-template-part .wp-block-site-logo img,
.rhn-hero-page.rhn-scrolled header.wp-block-template-part img.custom-logo {
    filter: none;
}

/* Restore desktop nav links */
@media only screen and (min-width: 779px) {
    .rhn-hero-page.rhn-scrolled header.wp-block-template-part #mega-menu-max_mega_menu_1 > li > a.mega-menu-link,
    .rhn-hero-page.rhn-scrolled header.wp-block-template-part .mega-menu-link,
    .rhn-hero-page.rhn-scrolled header.wp-block-template-part .wp-block-navigation a {
        color: inherit !important;
    }

    .rhn-hero-page.rhn-scrolled #mega-menu-wrap-max_mega_menu_1 {
        background: transparent !important;
    }
}

/* Restore hamburger bars to dark */
.rhn-hero-page.rhn-scrolled header.wp-block-template-part .mega-toggle-animated-inner,
.rhn-hero-page.rhn-scrolled header.wp-block-template-part .mega-toggle-animated-inner::before,
.rhn-hero-page.rhn-scrolled header.wp-block-template-part .mega-toggle-animated-inner::after,
.rhn-hero-page.rhn-scrolled header.wp-block-template-part .mega-toggle-animated-box span {
    background-color: #111111 !important;
}

/* Scrolled mobile panel — white background, dark text */
@media only screen and (max-width: 778px) {
    .rhn-hero-page.rhn-scrolled #mega-menu-wrap-max_mega_menu_1 .mega-menu-toggle + #mega-menu-max_mega_menu_1 {
        background: #ffffff !important;
    }

    .rhn-hero-page.rhn-scrolled #mega-menu-wrap-max_mega_menu_1 ul.mega-menu > li > a.mega-menu-link,
    .rhn-hero-page.rhn-scrolled #mega-menu-wrap-max_mega_menu_1 ul.mega-menu > li > a {
        color: #2b435e !important;
    }

    .rhn-hero-page.rhn-scrolled #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    .rhn-hero-page.rhn-scrolled #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-menu-ancestor > a.mega-menu-link,
    .rhn-hero-page.rhn-scrolled #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-current-page-ancestor > a.mega-menu-link,
    .rhn-hero-page.rhn-scrolled #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
        color: #111111 !important;
        font-weight: 700 !important;
        background: transparent !important;
    }

    .rhn-hero-page.rhn-scrolled #mega-menu-wrap-max_mega_menu_1 #mega-menu-max_mega_menu_1 > li.mega-menu-item:hover > a.mega-menu-link {
        color: #111111 !important;
        background: transparent !important;
    }
}

@media only screen and (max-width: 778px) {
    .rhn-hero-page.rhn-scrolled.rhn-menu-open header.wp-block-template-part {
        background: #ffffff !important;
        backdrop-filter: none !important;
    }
}