/* Clean Mobile Menu - Strict Isolation */

/* Mobile Menu Styles */
:root {
    /* --- HAMBURGER MENU CONFIGURATION --- */
    /* Change these numbers to resize the menu instantly! */
    --burger-width: 18px;
    --burger-height: auto;
    /* Aspect ratio controlled by SVG */
    --bar-thickness: 2px;
    --bar-color: #ffffff;
    --bar-radius: 2px;
    --bar-gap: 5px;
    /* Optional fine-tuning */
}

/* 1. HIDE Desktop Header on Mobile */
@media (max-width: 1024px) {
    #masthead {
        display: none !important;
    }
}

/* 2. INITIAL STATE: Hidden on Desktop */
#clean-mobile-header {
    display: none;
}

/* --- GLOBAL MOBILE HEADER STYLES (Safe to load, only visible when parent is block) --- */

/* Row 1: Social Top Bar (Black) */
.mobile-top-bar {
    background-color: #000;
    display: flex;
    justify-content: center;
    /* Center content like reference */
    align-items: center;
    padding: 8px 10px;
    gap: 20px;
    border-bottom: 1px solid #222;
}

/* Fix Social Icons: Text Visible, Centered, Gold Icons */
.mobile-social-link {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Space between icon and text */
    color: #fff;
    text-decoration: none;
    font-size: 13px !important;
    /* Restore text size */
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1;
}

.mobile-social-link svg {
    width: 14px;
    height: 14px;
    fill: #d4a017;
    /* Gold */
    display: block;
}

/* Row 2: Promo Stripe (Yellow/Gold) */
.mobile-promo-stripe {
    background-color: #d4a017;
    /* Gold/Yellow as requested */
    color: #000;
    /* Black text for contrast on yellow */
    overflow: hidden;
    /* Ensure no spillover */
    padding: 5px 0;
    /* Minimal vertical padding, no horizontal */
    line-height: 1.3;
}

/* Row 3: Main Bar (Logo + Hamburger) */
.clean-mobile-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #000;
    /* Keep main bar black */
    border-bottom: 1px solid #222;
    position: relative;
    z-index: 100000;
    gap: 20px;
}

.clean-logo img {
    max-width: 65vw;
    max-height: 75px;
    width: auto;
    height: auto;
    object-fit: contain;
}


/* Custom Configurable Hamburger - Touch Optimized */
#custom-hamburger {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Size: 44px minimum for iOS touch target */
    width: 44px !important;
    height: 44px !important;
    min-width: 44px;
    min-height: 44px;

    /* Appearance */
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0;
    margin: 0;

    /* Touch Fixes */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;

    /* Ensure clickable on all layers */
    position: relative;
    z-index: 2147483647 !important;
    opacity: 1;

    /* iOS: prevent text selection behavior */
    -webkit-appearance: none;
    appearance: none;
}

/* Prevent any child from stealing touches */
#custom-hamburger * {
    pointer-events: none !important;
}

#custom-hamburger svg {
    width: 24px !important;
    height: 24px !important;
    display: block;
    pointer-events: none !important;
}

/* Force white stroke for visibility */
#custom-hamburger svg path {
    stroke: #ffffff !important;
    stroke-width: 2px !important;
}

/* Remove old span styles */
#custom-hamburger span {
    display: none;
}

/* Navigation Drawer */
#clean-mobile-nav {
    position: fixed;
    top: 0;
    right: -100%;
    /* Hidden off-screen right */
    width: 85%;
    height: 100vh;
    background: #111;
    z-index: 100002;
    transition: right 0.3s ease-in-out;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
}

#clean-mobile-nav.active {
    right: 0;
    /* Slide in */
}

/* Overlay */
#clean-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 100001;
    display: none;
    /* Hidden by default */
    backdrop-filter: blur(2px);
}

#clean-mobile-overlay.active {
    display: block;
}

/* Nav Header */
.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #000;
    border-bottom: 1px solid #333;
}

.nav-title {
    color: #d4a017;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
}

#clean-close-btn {
    /* Size: 44px minimum for iOS touch target */
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;

    /* Appearance */
    background: none;
    border: none;
    color: #fff;
    font-size: 30px;
    line-height: 1;

    /* Touch Fixes */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Menu List */
.clean-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.clean-menu-list li {
    border-bottom: 1px solid #222;
    position: relative;
    display: block;
    /* Ensure list items are blocks */
}

.clean-menu-list a {
    display: block;
    padding: 15px 20px;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color 0.2s;
}

.clean-menu-list a:hover {
    color: #d4a017;
}

/* Dropdown Logic */
.link-row {
    display: flex;
    align-items: center;
    width: 100%;
}

.link-row a {
    flex-grow: 1;
}

.submenu-toggle {
    /* Size: 44px minimum for iOS touch target */
    min-width: 44px;
    min-height: 44px;
    height: 50px;
    padding: 0 20px;

    /* Appearance */
    background: none;
    border: none;
    color: #666;
    font-size: 18px;

    /* Touch Fixes */
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;

    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Animation */
    transition: transform 0.3s, color 0.3s;
}

.submenu-toggle.rotate {
    transform: rotate(180deg);
    color: #d4a017;
}

/* Submenus */
.clean-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #1a1a1a;
    display: none;
    /* Hidden by default */
    border-top: 1px solid #333;
    width: 100%;
    /* Ensure full width */
}

.clean-submenu.open {
    display: block;
}

.clean-submenu li {
    width: 100%;
    /* Ensure items are full width */
}

.clean-submenu li a {
    padding-left: 35px;
    /* Indent level 1 */
    font-size: 14px;
    color: #ccc;
    display: block;
    /* Full click area */
}

/* Level 2 Submenu (Deep Nesting) */
.clean-submenu .clean-submenu {
    background: #252525;
}

.clean-submenu .clean-submenu li a {
    padding-left: 50px;
    /* Indent level 2 */
    color: #aaa;
}


/* 3. MOBILE VIEW TRIGGER: Matches Desktop Hide Breakpoint (1024px) */
@media (max-width: 1024px) {
    #clean-mobile-header {
        display: block !important;
        position: relative;
        width: 100%;
        z-index: 99999;
        /* Lower than offcanvas menu (100002) */
        font-family: 'Poppins', sans-serif;
    }

    /* Hover support only on devices that support it, inside mobile view */
    @media (hover: hover) {
        .has-children:hover>.clean-submenu {
            display: block;
        }

        .has-children:hover>.link-row .submenu-toggle {
            transform: rotate(180deg);
        }
    }
}