/**
 * Bali Green Spa - Shrinking Header Styles (External CSS)
 * Works with critical CSS from enqueue.php that prevents FOUC
 *
 * NOTE: Basic positioning and transparency are handled by inline critical CSS
 * This file contains non-critical styling: transitions, animations, hover effects
 *
 * @package Bali Green Spa
 * @since 1.0.0
 */

/* CSS Custom Properties for easy customization */
:root {
    --bali-header-bg-transparent: rgba(55, 146, 55, 0.3);
    --bali-backdrop-blur: 10px;
    --bali-header-height: 70px;
    --bali-header-height-mobile: 60px;
    --bali-header-scrolled-height: 50px;
    --bali-header-scrolled-height-mobile: 45px;
    --bali-scroll-threshold: 80px;
    --bali-transition-speed: 0.3s;
}

/* NOTE: Basic positioning and transparency are handled by inline critical CSS */

/* Enhanced header styling - non-critical */
.site-header .ast-container,
.site-header .ast-grid-row,
.site-header .ast-flex {
    background: transparent !important;
}

/* Transitions - enabled after page load */
body.transitions-enabled .site-header {
    transition: all var(--bali-transition-speed) ease-in-out;
}

body.transitions-enabled .site-header .ast-site-identity,
body.transitions-enabled .site-header .custom-logo-link img,
body.transitions-enabled .site-header .main-header-menu,
body.transitions-enabled .site-header .ast-builder-button-1,
body.transitions-enabled .site-header .ast-builder-menu-1 {
    transition: all var(--bali-transition-speed) ease-in-out;
}

/* Main header bar styling */
.ast-primary-header-bar {
    min-height: var(--bali-header-height);
}

body.transitions-enabled .ast-primary-header-bar {
    transition: all var(--bali-transition-speed) ease-in-out;
}

/* Scrolled state styling */
.site-header.header-scrolled {
    background-color: var(--bali-header-bg-transparent) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(var(--bali-backdrop-blur));
    -webkit-backdrop-filter: blur(var(--bali-backdrop-blur));
}

.site-header.header-scrolled .ast-primary-header-bar {
    min-height: var(--bali-header-scrolled-height) !important;
    background-color: var(--bali-header-bg-transparent) !important;
    padding: 0.3em 0 !important;
}

/* Logo shrinking when scrolled */
.site-header.header-scrolled .custom-logo-link img,
.site-header.header-scrolled .astra-logo-svg {
    max-width: 140px !important;
    width: 140px !important;
    height: auto;
    transform: scale(0.9);
}

/* Menu items when scrolled - only for non-active items */
.site-header.header-scrolled .ast-builder-menu-1 .menu-item:not(.current-menu-item):not(.current-menu-ancestor) > .menu-link {
    color: var(--ast-global-color-4) !important;
    padding: 0.4em 1em !important;
    font-size: 15px;
}

/* Button styling when scrolled */
.site-header.header-scrolled .ast-header-button-1 .ast-custom-button {
    background: var(--ast-global-color-0) !important;
    color: var(--ast-global-color-4) !important;
    border-color: var(--ast-global-color-0) !important;
    padding: 10px 18px !important;
    font-size: 14px !important;
    border-radius: 5px;
}

.site-header.header-scrolled .ast-header-button-1 .ast-custom-button:hover {
    background: var(--ast-global-color-5) !important;
    border-color: var(--ast-global-color-5) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hero section content transitions */
body.transitions-enabled .wp-block-uagb-container .uagb-container-inner-blocks-wrap,
body.transitions-enabled .entry-content > .wp-block-uagb-container.alignfull:first-child .uagb-container-inner-blocks-wrap {
    transition: padding-top var(--bali-transition-speed) ease-in-out;
}

/* Scrolled state hero padding adjustments */
body.header-is-scrolled .wp-block-uagb-container .uagb-container-inner-blocks-wrap,
body.header-is-scrolled .entry-content > .wp-block-uagb-container.alignfull:first-child .uagb-container-inner-blocks-wrap {
    padding-top: var(--bali-header-scrolled-height) !important;
}

/* Admin bar compensation for scrolled state */
.admin-bar.header-is-scrolled .wp-block-uagb-container .uagb-container-inner-blocks-wrap,
.admin-bar.header-is-scrolled .entry-content > .wp-block-uagb-container.alignfull:first-child .uagb-container-inner-blocks-wrap {
    padding-top: calc(var(--bali-header-scrolled-height) + 32px) !important;
}

/* Header container transitions */
body.transitions-enabled .site-header.header-scrolled .ast-container {
    transition: all var(--bali-transition-speed) ease-in-out;
}

/* Ensure proper stacking order */
.site-header.header-scrolled {
    z-index: 9999 !important;
}

/* Mobile adjustments */
@media (max-width: 921px) {
    :root {
        --bali-header-height: var(--bali-header-height-mobile);
        --bali-header-scrolled-height: var(--bali-header-scrolled-height-mobile);
        --bali-scroll-threshold: 60px;
    }

    .site-header.header-scrolled .ast-primary-header-bar {
        min-height: var(--bali-header-scrolled-height-mobile) !important;
        padding: 0.2em 0 !important;
    }

    .site-header.header-scrolled .custom-logo-link img {
        max-width: 120px !important;
        width: 120px !important;
        transform: scale(0.85);
    }

    /* Mobile menu button styling when scrolled */
    .site-header.header-scrolled .menu-toggle.main-header-menu-toggle {
        background: var(--ast-global-color-0) !important;
        color: var(--ast-global-color-4) !important;
        border: none !important;
        padding: 8px 12px !important;
        border-radius: 4px;
    }

    .site-header.header-scrolled .mobile-menu-toggle-icon svg {
        fill: var(--ast-global-color-4) !important;
        width: 18px !important;
        height: 18px !important;
    }

    /* Mobile navigation background when scrolled */
    .site-header.header-scrolled .ast-mobile-header-content {
        background-color: var(--bali-header-bg-transparent) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(var(--bali-backdrop-blur));
        -webkit-backdrop-filter: blur(var(--bali-backdrop-blur));
    }

    .site-header.header-scrolled .ast-mobile-header-content .menu-item:not(.current-menu-item):not(.current-menu-ancestor) .menu-link {
        color: var(--ast-global-color-4) !important;
        border-bottom-color: rgba(255, 255, 255, 0.1) !important;
    }

    /* Mobile hero section scrolled adjustments - NOTE: Initial padding handled by inline CSS */
    body.header-is-scrolled .wp-block-uagb-container .uagb-container-inner-blocks-wrap,
    body.header-is-scrolled .entry-content > .wp-block-uagb-container.alignfull:first-child .uagb-container-inner-blocks-wrap {
        padding-top: var(--bali-header-scrolled-height-mobile) !important;
    }

    .admin-bar.header-is-scrolled .wp-block-uagb-container .uagb-container-inner-blocks-wrap,
    .admin-bar.header-is-scrolled .entry-content > .wp-block-uagb-container.alignfull:first-child .uagb-container-inner-blocks-wrap {
        padding-top: calc(var(--bali-header-scrolled-height-mobile) + 46px) !important;
    }
}

/* Small mobile devices */
@media (max-width: 544px) {
    :root {
        --bali-header-height: 65px;
        --bali-header-scrolled-height: 40px;
    }

    .site-header.header-scrolled .ast-primary-header-bar {
        min-height: 40px !important;
    }

    .site-header.header-scrolled .custom-logo-link img {
        max-width: 110px !important;
        width: 110px !important;
    }

    .site-header.header-scrolled .ast-header-button-1 .ast-custom-button {
        padding: 8px 15px !important;
        font-size: 13px !important;
    }

    /* Small mobile hero adjustments - NOTE: Initial padding handled by inline CSS */
    body.header-is-scrolled .wp-block-uagb-container .uagb-container-inner-blocks-wrap,
    body.header-is-scrolled .entry-content > .wp-block-uagb-container.alignfull:first-child .uagb-container-inner-blocks-wrap {
        padding-top: 40px !important;
    }
}

/* Touch device optimizations */
.touch-device .site-header {
    -webkit-overflow-scrolling: touch;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header *,
    .wp-block-uagb-container .uagb-container-inner-blocks-wrap {
        transition: none !important;
        animation: none !important;
    }
}

/* Enhanced scrolled state effects */
.site-header.header-scrolled {
    transform: translateZ(0); /* Enable hardware acceleration */
}

/* Performance optimizations */
.site-header,
.site-header * {
    will-change: transform, background-color;
}

/* Remove will-change after transitions complete to save memory */
body.transitions-enabled .site-header,
body.transitions-enabled .site-header * {
    will-change: auto;
}