/* ================================================================
   MOBILE-NAV-FIX.CSS — Load LAST in enqueue.php
================================================================ */

/* ================================================================
   PRELOADER — Force true center on ALL screen sizes
   Loaded last so these win any specificity wars
================================================================ */

#preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 32px !important;
    box-sizing: border-box !important;
}

#preloader .preloader-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    gap: 20px !important;
    text-align: center !important;
}

#preloader .preloader-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}

#preloader .preloader-brand span {
    display: block !important;
    text-align: center !important;
}

#preloader .preloader-spinner {
    margin: 0 auto !important;
    display: block !important;
    flex-shrink: 0 !important;
}

/* ================================================================
   DESKTOP — force submenu vertical
================================================================ */

.site-header nav ul li > ul.sub-menu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    list-style: none;
    padding: 12px 0;
    margin: 0;
    min-width: 240px;
}

.site-header nav ul li > ul.sub-menu > li {
    display: block !important;
    width: 100% !important;
}

/* ================================================================
   MOBILE — all styles below 992px
================================================================ */

@media (max-width: 992px) {

    /* ----------------------------------------------------------
       FIX: Keep hover colour change but remove translateY jump
       and underline slide — both look wrong on touch screens
    ---------------------------------------------------------- */
    body .site-header nav a:hover,
    body .site-header nav .current-menu-item > a {
        transform: none !important;   /* no jump — colour still changes via layout.css */
    }

    body .site-header nav a:hover::before,
    body .site-header nav .current-menu-item > a::before {
        display: none !important;     /* no underline animation on mobile */
    }

    /* ----------------------------------------------------------
       HAMBURGER BUTTON
    ---------------------------------------------------------- */
    body .site-header #homemenu {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 22px !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        cursor: pointer !important;
        z-index: 2100 !important;
        position: relative !important;
        flex-shrink: 0 !important;
    }

    body .site-header #homemenu span {
        display: block !important;
        width: 100% !important;
        height: 3px !important;
        background: #1a1a2e !important;
        border-radius: 2px !important;
        transition: all 0.3s ease !important;
    }

    body.menu-open .site-header #homemenu span:nth-child(1) { transform: translateY(9.5px) rotate(45deg) !important; }
    body.menu-open .site-header #homemenu span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
    body.menu-open .site-header #homemenu span:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg) !important; }

    /* ----------------------------------------------------------
       MOBILE NAV PANEL
    ---------------------------------------------------------- */
    body .site-header .main-navigation {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        left: auto !important;
        width: 82% !important;
        max-width: 360px !important;
        height: 100vh !important;
        background: linear-gradient(160deg, #1a1a2e 0%, #16213e 100%) !important;
        padding: 80px 28px 40px !important;
        transform: translateX(100%) !important;
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 2000 !important;
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4) !important;
        flex-direction: unset !important;
        align-items: unset !important;
        justify-content: unset !important;
        pointer-events: auto !important;
        opacity: 1 !important;
    }

    body .site-header .main-navigation.open {
        transform: translateX(0) !important;
    }

    /* Close button */
    body .site-header .main-navigation #closemenu {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        position: absolute !important;
        top: 24px !important;
        right: 24px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 22px !important;
        line-height: 1 !important;
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: none !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        z-index: 10 !important;
        transition: all 0.25s !important;
    }

    /* ----------------------------------------------------------
       TOP-LEVEL UL.MENU
    ---------------------------------------------------------- */
    body .site-header .main-navigation ul.menu,
    body .site-header .main-navigation > ul {
        display: block !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        min-width: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        flex-direction: unset !important;
        gap: 0 !important;
    }

    /* Top-level li */
    body .site-header .main-navigation ul.menu > li {
        display: block !important;
        width: 100% !important;
        overflow: visible !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
        transform: none !important;
        position: relative !important;
    }

    /* All nav links — reset all desktop effects */
    body .site-header .main-navigation ul.menu li a {
        display: block !important;
        color: #ffffff !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        padding: 15px 0 !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: relative !important;
        /* Only animate color and indent — no transform */
        transition: color 0.2s ease, padding-left 0.2s ease !important;
        /* Disable the underline pseudo-element */
        white-space: normal !important;
    }

    body .site-header .main-navigation ul.menu li a::before {
        display: none !important;
    }

    /* Simple tap feedback — colour only, no transform */
    body .site-header .main-navigation ul.menu > li > a:hover,
    body .site-header .main-navigation ul.menu > li > a:active {
        color: #ff8c61 !important;
        padding-left: 8px !important;
        transform: none !important;
        background: transparent !important;
    }

    /* Parent items — flex row so + sits on the right */
    body .site-header .main-navigation ul.menu li.menu-item-has-children > a {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-right: 4px !important;
    }

    /* The + indicator */
    body .site-header .main-navigation ul.menu li.menu-item-has-children > a::after {
        content: "+" !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 28px !important;
        height: 28px !important;
        flex-shrink: 0 !important;
        font-size: 1.4rem !important;
        font-weight: 300 !important;
        line-height: 1 !important;
        color: rgba(255, 255, 255, 0.6) !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border-radius: 50% !important;
        transition: transform 0.3s ease, background 0.2s !important;
        margin-left: 10px !important;
        float: none !important;
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        transform-origin: center !important;
        pointer-events: none !important;
        /* Reset underline pseudo dimensions that bleed from desktop */
        width: 28px !important;
        height: 28px !important;
    }

    body .site-header .main-navigation ul.menu li.menu-item-has-children.open > a::after {
        transform: rotate(45deg) !important;
        background: rgba(255, 107, 53, 0.25) !important;
        color: #ff8c61 !important;
    }

    /* ----------------------------------------------------------
       SUBMENU — accordion, collapsed by default
    ---------------------------------------------------------- */
    body .site-header .main-navigation ul.menu > li > ul.sub-menu {
        display: block !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        background: rgba(255, 255, 255, 0.04) !important;
        border: none !important;
        border-left: 3px solid #ff6b35 !important;
        border-radius: 0 0 4px 4px !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 0 6px 8px !important;
        width: calc(100% - 8px) !important;
        min-width: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height 0.4s ease !important;
        flex-direction: unset !important;
        gap: 0 !important;
        top: auto !important; left: auto !important;
        right: auto !important; bottom: auto !important;
        z-index: 1 !important;
    }

    /* Expanded state */
    body .site-header .main-navigation ul.menu > li.open > ul.sub-menu {
        max-height: 600px !important;
    }

    body .site-header .main-navigation ul.menu > li > ul.sub-menu > li {
        display: block !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
        transform: none !important;
        overflow: visible !important;
    }

    body .site-header .main-navigation ul.menu > li > ul.sub-menu > li:last-child {
        border-bottom: none !important;
    }

    body .site-header .main-navigation ul.menu > li > ul.sub-menu > li > a {
        display: block !important;
        color: rgba(255, 255, 255, 0.78) !important;
        font-size: 0.88rem !important;
        font-weight: 400 !important;
        padding: 12px 16px !important;
        border: none !important;
        background: transparent !important;
        transform: none !important;
        transition: color 0.2s ease, padding-left 0.2s ease !important;
    }

    body .site-header .main-navigation ul.menu > li > ul.sub-menu > li > a:hover,
    body .site-header .main-navigation ul.menu > li > ul.sub-menu > li > a:active {
        color: #ffffff !important;
        padding-left: 24px !important;
        background: rgba(255, 107, 53, 0.1) !important;
        transform: none !important;
    }

    /* ----------------------------------------------------------
       OVERLAY
       FIX: right is set to the width of the nav panel (82%, max 360px)
       so the dark overlay only covers the LEFT side of the screen
       (the page content area), never the nav panel itself.
       pointer-events: none means it won't intercept taps on the panel.
    ---------------------------------------------------------- */
    body.menu-open::before {
        content: "" !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        /* Only cover the area LEFT of the panel, not the panel itself */
        right: min(82%, 360px) !important;
        background: rgba(0, 0, 0, 0.55) !important;
        z-index: 1500 !important;
        pointer-events: none !important;
        cursor: pointer !important;
    }

    body.menu-open {
        overflow: hidden !important;
    }
}