/**
 * Full Mobile Menu for Divi
 * Fullscreen overlay styles
 */

/* ==========================================================================
   CSS Custom Properties (easily customizable)
   These are overridden by dynamic CSS from admin settings
   ========================================================================== */
:root {
    --fmm-bg-color: #ffffff;
    --fmm-text-color: #333333;
    --fmm-link-color: #2b2b2b;
    --fmm-link-hover-color: #0073aa;
    --fmm-font-family: inherit;
    --fmm-font-size: 24px;
    --fmm-cta-bg: #0073aa;
    --fmm-cta-text: #ffffff;
    --fmm-cta-border-color: #0073aa;
    --fmm-cta-border-width: 2px;
    --fmm-cta-border-radius: 50px;
    --fmm-overlay-bg: rgba(0, 0, 0, 0.5);
    --fmm-transition-duration: 0.4s;
    --fmm-transition-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Very high z-index to overlay everything including Divi fixed header */
    --fmm-z-index: 99999999;
}

/* ==========================================================================
   Mobile Menu Fullscreen Overlay
   Only active below Divi's tablet breakpoint (980px)
   ========================================================================== */
@media (max-width: 980px) {

    /* Prevent body scroll when menu is open */
    body.fmm-menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

    /* Hide top-header and other elements when menu is open */
    body.fmm-menu-open #top-header,
    body.fmm-menu-open #et-top-navigation,
    body.fmm-menu-open .et-fixed-header {
        z-index: 1 !important;
    }

    /* Keep the mobile nav container visible (hamburger lives here) */
    #et_mobile_nav_menu {
        display: block !important;
    }

    /* The wrapper that contains hamburger + menu */
    #et_mobile_nav_menu .mobile_nav {
        position: static;
    }

    /* Keep hamburger visible and clickable - but hide when menu is open */
    #et_mobile_nav_menu .mobile_menu_bar,
    #et_mobile_nav_menu .mobile_menu_bar_toggle {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 100000002 !important;
        cursor: pointer;
    }

    /* Hide hamburger when menu is open (X button replaces it) */
    body.fmm-menu-open #et_mobile_nav_menu .mobile_menu_bar,
    body.fmm-menu-open #et_mobile_nav_menu .mobile_menu_bar_toggle,
    body.fmm-menu-open .mobile_menu_bar,
    body.fmm-menu-open .mobile_menu_bar_toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* The actual menu list - this becomes the fullscreen overlay */
    #et_mobile_nav_menu .et_mobile_menu {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important; /* Dynamic viewport height for iOS */
        background-color: var(--fmm-bg-color) !important;
        z-index: var(--fmm-z-index) !important;
        display: none;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        opacity: 0;
        visibility: hidden;
        transform: translateX(100%);
        transition: 
            opacity var(--fmm-transition-duration) var(--fmm-transition-easing),
            visibility var(--fmm-transition-duration) var(--fmm-transition-easing),
            transform var(--fmm-transition-duration) var(--fmm-transition-easing);
        padding: 80px 20px 40px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        border: none !important;
        overflow-y: auto !important;
    }

    /* Menu open state - triggered by body class */
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }

    /* Hide the "Select Page" text */
    #et_mobile_nav_menu .select_page {
        display: none !important;
    }

    /* Style the menu list items container */
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu {
        list-style: none !important;
        background: var(--fmm-bg-color) !important;
        box-shadow: none !important;
    }

    /* Header image above nav items */
    #et_mobile_nav_menu .et_mobile_menu li.fmm-header-image {
        margin: 0 0 20px 0 !important;
        padding: 0 !important;
        width: auto !important;
        text-align: center !important;
        border: none !important;
        background: transparent !important;
        list-style: none !important;
    }

    #et_mobile_nav_menu .et_mobile_menu li.fmm-header-image img {
        max-width: 180px;
        height: auto;
        display: inline-block;
    }

    /* Individual menu items */
    #et_mobile_nav_menu .et_mobile_menu li {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        text-align: center !important;
        border: none !important;
        background: transparent !important;
        opacity: 0;
        transform: translateY(20px);
        transition: 
            opacity 0.3s ease,
            transform 0.3s ease;
    }

    /* Staggered animation for menu items when open */
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu li {
        opacity: 1;
        transform: translateY(0);
    }

    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu li:nth-child(1) { transition-delay: 0.1s; }
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu li:nth-child(2) { transition-delay: 0.15s; }
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu li:nth-child(3) { transition-delay: 0.2s; }
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu li:nth-child(4) { transition-delay: 0.25s; }
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu li:nth-child(5) { transition-delay: 0.3s; }
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu li:nth-child(6) { transition-delay: 0.35s; }
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu li:nth-child(7) { transition-delay: 0.4s; }
    body.fmm-menu-open #et_mobile_nav_menu .et_mobile_menu li:nth-child(8) { transition-delay: 0.45s; }

    /* Menu links — ultra-specific to override Divi's own mobile menu colors */
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li a,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li a:link,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li a:visited,
    body.fmm-enabled #et_mobile_nav_menu ul.et_mobile_menu li a,
    body.fmm-enabled .et_mobile_menu li.menu-item a,
    body #et_mobile_nav_menu .et_mobile_menu .menu-item a {
        display: block !important;
        padding: 15px 20px !important;
        font-family: var(--fmm-font-family) !important;
        font-size: var(--fmm-font-size) !important;
        font-weight: 500 !important;
        color: var(--fmm-link-color) !important;
        text-decoration: none !important;
        transition: color 0.2s ease, transform 0.2s ease !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        outline: none !important;
        outline-width: 0 !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
        -webkit-touch-callout: none !important;
    }

    /* Remove ALL focus/active styles on click/touch */
    body #et_mobile_nav_menu .et_mobile_menu li a:focus,
    body #et_mobile_nav_menu .et_mobile_menu li a:active,
    body #et_mobile_nav_menu .et_mobile_menu li a:focus:active {
        outline: none !important;
        outline-width: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
        color: var(--fmm-link-color) !important;
    }

    /* Only show focus for keyboard navigation */
    body #et_mobile_nav_menu .et_mobile_menu li a:focus-visible {
        outline: 2px solid var(--fmm-link-hover-color) !important;
        outline-offset: 4px !important;
    }

    /* Hover color */
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li a:hover,
    body #et_mobile_nav_menu .et_mobile_menu .menu-item a:hover {
        color: var(--fmm-link-hover-color) !important;
        transform: scale(1.05);
    }

    /* Current/active menu item — OVERRIDE Divi's current-menu-item coloring.
       Divi marks anchor links as 'current' if base URL matches, which is wrong.
       We force ALL links to use our link color; hover provides the accent. */
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.current-menu-item a,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.current_page_item a,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.current-menu-item a:link,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.current_page_item a:link,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.current-menu-item a:visited,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.current_page_item a:visited {
        color: var(--fmm-link-color) !important;
    }

    /* CTA button styling (class="nav-cta" on menu item) */
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.nav-cta {
        margin-top: 20px !important;
    }

    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.nav-cta a,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.nav-cta a:link,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.nav-cta a:visited {
        display: inline-block !important;
        background-color: var(--fmm-cta-bg) !important;
        color: var(--fmm-cta-text) !important;
        padding: 15px 40px !important;
        border: var(--fmm-cta-border-width) solid var(--fmm-cta-border-color) !important;
        border-radius: var(--fmm-cta-border-radius) !important;
        font-family: var(--fmm-font-family) !important;
        font-size: calc(var(--fmm-font-size) * 0.85) !important;
        font-weight: 600 !important;
        transition: background-color 0.2s ease, transform 0.2s ease, opacity 0.2s ease !important;
    }

    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.nav-cta a:hover,
    body.fmm-enabled #et_mobile_nav_menu .et_mobile_menu li.nav-cta a:focus {
        opacity: 0.85 !important;
        color: var(--fmm-cta-text) !important;
        transform: scale(1.05);
    }

    /* Submenu handling */
    #et_mobile_nav_menu .et_mobile_menu li ul.sub-menu {
        display: none;
        padding-left: 0 !important;
        background: transparent !important;
    }

    #et_mobile_nav_menu .et_mobile_menu li.opened > ul.sub-menu {
        display: block;
    }

    #et_mobile_nav_menu .et_mobile_menu li ul.sub-menu li a {
        font-size: 1.1rem !important;
        padding: 10px 20px !important;
        opacity: 0.8;
    }

    /* Close button (added via JS) - must be above menu */
    .fmm-close-button {
        position: fixed !important;
        top: 20px !important;
        right: 20px !important;
        width: 44px !important;
        height: 44px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 100000000 !important;
        padding: 0 !important;
        display: none;
        align-items: center;
        justify-content: center;
    }

    /* Show close button when menu is open */
    body.fmm-menu-open .fmm-close-button {
        display: flex !important;
    }

    .fmm-close-button::before,
    .fmm-close-button::after {
        content: '';
        position: absolute;
        width: 28px;
        height: 3px;
        background-color: var(--fmm-link-color);
        transition: background-color 0.2s ease;
    }

    .fmm-close-button::before {
        transform: rotate(45deg);
    }

    .fmm-close-button::after {
        transform: rotate(-45deg);
    }

    .fmm-close-button:hover::before,
    .fmm-close-button:hover::after,
    .fmm-close-button:focus::before,
    .fmm-close-button:focus::after {
        background-color: var(--fmm-link-hover-color);
    }

}

/* ==========================================================================
   Focus styles for accessibility (keyboard only, not mouse/touch)
   ========================================================================== */
@media (max-width: 980px) {
    /* Only show focus ring for keyboard navigation */
    #et_mobile_nav_menu .et_mobile_menu li a:focus-visible {
        outline: 2px solid var(--fmm-link-hover-color);
        outline-offset: 4px;
    }

    .fmm-close-button:focus {
        outline: none;
    }

    .fmm-close-button:focus-visible {
        outline: 2px solid var(--fmm-link-hover-color);
        outline-offset: 4px;
    }
}

/* ==========================================================================
   Reduced motion preference
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    #et_mobile_nav_menu,
    #et_mobile_nav_menu .et_mobile_menu li,
    #et_mobile_nav_menu .et_mobile_menu li a {
        transition: none !important;
        animation: none !important;
    }
}