/**
 * Smart Sticky Header Styles
 * Hides header on scroll down, shows on scroll up
 *
 * @package Sierra_At_Tahoe
 */

.smart-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out;
    will-change: transform;
    background-color: #F9FAFB; /* Default solid background */
}

/**
 * When mobile nav menu is open, ensure hamburger (X) button is clickable
 * The hamburger transforms to X via CSS and acts as the close toggle
 *
 * Problem: Inner header elements with z-10 class intercept pointer events
 * Solution: Disable pointer-events on header when menu is open, but re-enable
 * on the navigation block so the hamburger remains clickable
 */
@media (max-width: 782px) {
    /* Disable pointer events on the entire header when menu is open */
    .smart-sticky-header:has(.is-menu-open) {
        pointer-events: none;
    }

    /* Re-enable pointer events ONLY on the navigation (contains hamburger) */
    .smart-sticky-header:has(.is-menu-open) .wp-block-navigation {
        pointer-events: auto;
    }

    /* Ensure hamburger button is above any siblings */
    .smart-sticky-header .wp-block-navigation__responsive-container-open {
        position: relative;
        z-index: 10;
    }
}

/**
 * Transparent header on home page hero (before scrolling)
 * MOBILE ONLY - Must override the block's inline background color
 */
@media (max-width: 782px) {
    .smart-sticky-header.header-transparent,
    .smart-sticky-header.header-transparent > .wp-block-group,
    .smart-sticky-header.header-transparent > .wp-block-group.has-background {
        background-color: transparent !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    /* Remove shadow transition artifact when going transparent */
    .smart-sticky-header.header-transparent.header-visible {
        box-shadow: none !important;
    }

    /**
     * When mobile menu or search is open, always show solid WHITE background
     * Even if header is in transparent mode on home page
     * White matches the menu overlay background
     */
    .smart-sticky-header.header-transparent:has(.is-menu-open),
    .smart-sticky-header.header-transparent:has(.is-menu-open) > .wp-block-group,
    .smart-sticky-header.header-transparent:has(.is-menu-open) > .wp-block-group.has-background,
    .smart-sticky-header.header-transparent:has(.search-expanded),
    .smart-sticky-header.header-transparent:has(.search-expanded) > .wp-block-group,
    .smart-sticky-header.header-transparent:has(.search-expanded) > .wp-block-group.has-background {
        background-color: #fff !important;
    }

    /* When menu is open on any page, header should be white to match menu */
    .smart-sticky-header:has(.is-menu-open),
    .smart-sticky-header:has(.is-menu-open) > .wp-block-group,
    .smart-sticky-header:has(.is-menu-open) > .wp-block-group.has-background {
        background-color: #fff !important;
    }
}

/* Smooth transition for the inner group background too */
.smart-sticky-header > .wp-block-group {
    transition: background-color 0.3s ease-in-out;
}

/* Override the inner group's white background to use header's #F9FAFB
   But NOT when header is transparent (home page at top) */
.smart-sticky-header:not(.header-transparent) > .wp-block-group.has-white-background-color,
.smart-sticky-header:not(.header-transparent) > .wp-block-group.has-background {
    background-color: #F9FAFB !important;
}

.smart-sticky-header.header-hidden {
    transform: translateY(-100%);
}

.smart-sticky-header.header-visible {
    transform: translateY(0);
}

/**
 * Admin bar adjustments
 */
body.admin-bar .smart-sticky-header {
    top: 32px; /* WordPress admin bar height on desktop */
}

@media screen and (max-width: 782px) {
    body.admin-bar .smart-sticky-header {
        top: 46px; /* WordPress admin bar height on mobile */
    }
}

/**
 * Prevent layout shift by adding top padding to main content
 * This compensates for the fixed positioning of the header
 * Using padding instead of margin to avoid collapsing margins
 *
 * Note: No fallback value to prevent flash - JavaScript will set this immediately
 *
 * IMPORTANT: This rule is overridden by helpers.css when the first child is a
 * full-width block (cover, group, etc.) to create seamless edge-to-edge layouts.
 *
 * Using !important to override inline styles from block editor
 */
body:has(.smart-sticky-header) main {
    padding-top: var(--header-height) !important;
}

/* When advisory is present, add both header and advisory heights
   Advisory sits below header, so total space needed is header + advisory */
body:has(.smart-sticky-header):has(.sierra-resort-advisory) main {
    padding-top: calc(var(--header-height) + var(--advisory-height, 0px)) !important;
}

/**
 * Home page transparent header - remove main padding, add to cover instead
 * MOBILE ONLY
 */
@media (max-width: 782px) {
    body.home:has(.smart-sticky-header.header-transparent-capable) main {
        padding-top: 0 !important;
    }

    /* Add padding to the cover block on home page so content sits below header */
    body.home:has(.smart-sticky-header) main > .wp-block-group > .wp-block-cover:first-child {
        padding-top: var(--header-height, 94px) !important;
    }
}

/**
 * Optional: Add shadow when header is visible and scrolled
 */
.smart-sticky-header.header-visible {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}