/* === BEGIN CUSTOM GLASSMORPHIC MOBILE HEADER === */

@media (max-width: 921px) {
    /* Reset margins and paddings on mobile content wrappers to prevent gaps */
    #content,
    .site-content,
    #primary,
    main,
    .ast-container {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* Fix mobile header to top */
    .ast-mobile-header-wrap {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 99999 !important;
        background: rgba(25, 39, 48, 0.88) !important; /* Rich Dark Navy at 88% opacity */
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        border-bottom: 2px solid rgba(197, 155, 39, 0.25) !important; /* Gold border highlight at 25% opacity */
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08) !important;
        transition: all 0.3s ease !important;
    }

    /* Make sure primary header bar inside has transparent background */
    #ast-mobile-header .ast-primary-header-bar {
        background: transparent !important;
        padding: 5px 15px !important; /* Reduced vertical padding from 10px to 5px */
        box-sizing: border-box !important;
    }
    /* Push page content down so it doesn't hide behind the fixed header */
    body {
        padding-top: 70px !important; /* Exact height of header (58px logo + 10px padding + 2px border) */
    }

    /* Reset logo wrapper margins and padding to prevent extra spacing */
    #ast-mobile-header .site-branding,
    #ast-mobile-header .site-logo-img,
    #ast-mobile-header .ast-site-identity {
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Style the hamburger menu trigger */
    #ast-mobile-header .ast-mobile-menu-trigger-minimal,
    #ast-mobile-header .menu-toggle,
    #ast-mobile-header .ast-button-wrap .menu-toggle {
        color: #c59b27 !important; /* Gold color for toggle icon */
        background: transparent !important;
        border: none !important;
        font-size: 20px !important;
        padding: 6px !important; /* Slightly reduced padding */
        transition: all 0.25s ease !important;
    }
    #ast-mobile-header .ast-mobile-menu-trigger-minimal:hover,
    #ast-mobile-header .menu-toggle:hover {
        transform: scale(1.08) !important;
        color: #0089e4 !important; /* Brand Blue on hover */
    }

    /* Style the logo image - increased max-height to 58px for better legibility */
    #ast-mobile-header .site-logo-img img {
        max-height: 58px !important;
        width: auto !important;
        transition: transform 0.3s ease !important;
    }
    #ast-mobile-header .site-logo-img img:hover {
        transform: scale(1.03) !important;
    }

    /* Off-canvas menu overlay styling */
    .ast-mobile-popup-drawer.active,
    .ast-mobile-popup-inner {
        background: rgba(25, 39, 48, 0.98) !important; /* Solid dark navy for readability */
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
    }

    /* Off-canvas close button */
    .menu-toggle-close {
        color: #c59b27 !important;
        background: transparent !important;
        border: none !important;
    }

    /* Mobile menu links styling */
    .ast-mobile-popup-drawer .main-header-menu .menu-item > .menu-link {
        font-family: 'Poppins', sans-serif !important;
        font-size: 1.15rem !important;
        font-weight: 500 !important;
        color: #ffffff !important;
        padding: 14px 20px !important;
        border-radius: 12px !important;
        margin: 6px 0 !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    /* Active / Hover menu link */
    .ast-mobile-popup-drawer .main-header-menu .menu-item:hover > .menu-link,
    .ast-mobile-popup-drawer .main-header-menu .menu-item.current-menu-item > .menu-link {
        color: #ffffff !important;
        background: rgba(0, 137, 228, 0.15) !important; /* Brand Blue transparent background */
        border-color: rgba(0, 137, 228, 0.4) !important;
        padding-left: 25px !important; /* Slide in text effect */
        box-shadow: 0 4px 15px rgba(0, 137, 228, 0.1) !important;
    }
    
    /* Indent sub-menus elegantly */
    .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link {
        background: rgba(255, 255, 255, 0.01) !important;
        font-size: 1rem !important;
        padding-left: 30px !important;
        border-color: transparent !important;
    }

    /* Add a gold bullet/dash before sub-menu items */
    .ast-mobile-popup-drawer .main-header-menu .sub-menu .menu-link::before {
        content: "— " !important;
        color: #c59b27 !important;
        margin-right: 5px !important;
    }

}

/* === END CUSTOM GLASSMORPHIC MOBILE HEADER === */