/* ═══════════════════════════════════════════
   MOBILE HAMBURGER BUTTON
═══════════════════════════════════════════ */

@media (max-width: 980px) {
	
    .mobile_menu_bar {
        background: transparent !important;
        border: 1.5px solid rgba(248, 242, 238, 0.45) !important;
        border-radius: 5px !important;
        padding: 0.55rem 0.85rem 0.75rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        min-height: 38px !important;
        transition: border-color 0.2s !important;
    }

    .mobile_menu_bar:hover {
        border-color: rgba(248, 242, 238, 0.85) !important;
    }

    .mobile_menu_bar::before {
        content: '' !important;
        display: block !important;
        width: 20px !important;
        height: 1.5px !important;
        background: var(--gcid-klgbjojc03, #f8f2ee) !important;
        border-radius: 2px !important;
        box-shadow:
            0 6px 0 0 var(--gcid-klgbjojc03, #f8f2ee),
            0 12px 0 0 var(--gcid-klgbjojc03, #f8f2ee) !important;
        /* Shift up by half total bar group height (12px / 2 = 6px) */
        margin-bottom: 12px !important;
        transform: none !important;
    }

    /* Admin bar offset */
    body.admin-bar .mobile_nav.opened .et_mobile_menu {
        margin-top: 46px !important;
    }


/* ═══════════════════════════════════════════
   MOBILE FULL SCREEN OVERLAY
═══════════════════════════════════════════ */

    /* Hide the menu off-screen by default */
    .mobile_nav .et_mobile_menu {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        background: var(--gcid-ffcqjxsvo7, #6f63bc) !important;
        z-index: 99999 !important;
        overflow-y: auto !important;
        padding: 2rem 2rem 4rem !important;
        box-shadow: none !important;
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: block !important;
        visibility: hidden !important;
    }

    /* Slide in when mobile_nav has .opened */
    .mobile_nav.opened .et_mobile_menu {
        right: 0 !important;
        visibility: visible !important;
    }

    /* Top level links */
    .mobile_nav .et_mobile_menu > li > a {
        font-family: var(--et_global_heading_font, 'Segoe UI', sans-serif) !important;
        font-size: 1.4rem !important;
        font-weight: 600 !important;
        color: #fff !important;
        padding: 1rem 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
        background: transparent !important;
        display: block !important;
        letter-spacing: 0.01em !important;
        transition: color 0.2s !important;
    }

    .mobile_nav .et_mobile_menu > li > a:hover {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    /* Sub-menu items */
    .mobile_nav .et_mobile_menu .sub-menu {
        display: block !important;
        position: static !important;
        background: transparent !important;
        padding-left: 1.25rem !important;
        box-shadow: none !important;
        border: none !important;
    }

    .mobile_nav .et_mobile_menu .sub-menu li a {
        font-family: var(--et_global_heading_font, 'Segoe UI', sans-serif) !important;
        font-size: 1rem !important;
        font-weight: 400 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        padding: 0.65rem 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        background: transparent !important;
        display: block !important;
        transition: color 0.2s !important;
    }

    .mobile_nav .et_mobile_menu .sub-menu li a:hover {
        color: #fff !important;
    }

    /* Spot motif in background */
    .mobile_nav .et_mobile_menu::before {
        content: '';
        position: fixed;
        bottom: -60px;
        right: -60px;
        width: 320px;
        height: 320px;
        background-image: url('/wp-content/uploads/2026/06/Dusky-Lilac-2.svg');
        background-repeat: no-repeat;
        background-size: contain;
        opacity: 0.08;
        pointer-events: none;
        z-index: 0;
    }

} /* end @media */