/* Desktop: hide hamburger, show full nav */
@media (min-width: 769px) {
    #mobile-menu { display: none; }
    #site-navigation { display: block; }
    #left-nav { display: none; }
}

/* Mobile: show hamburger at very top, hide full nav */
@media (max-width: 768px) {
    #mobile-menu {
        display: block;
        position: fixed; /* keeps the black bar at the very top */
        top: 0;
        left: 0;
        right: 0;
        z-index: 2500; /* sits above the drop-down */
    }
    body { padding-top: 48px; } /* prevent content from hiding under the bar */
    #site-navigation { display: none; } /* full nav hidden on mobile */
}

/* MOBILE DROP-DOWN (from the top, not the side) */
@media (max-width:768px) {
    #left-nav {
        position: fixed;
        top: 48px; /* same height as the #mobile-menu bar */
        left: 0;
        right: 0;
        background: #222;
        overflow: hidden; /* hide when collapsed */
        max-height: 0; /* collapsed state */
        transition: max-height .3s ease;
        z-index: 2000; /* just under the black bar */
    }
    #left-nav.open { max-height: 80vh; }
    #left-nav ul.menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #left-nav ul.menu > li > a {
        display: block;
        padding: 12px 16px;
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.1);
    }
    #left-nav .sub-menu a {
        padding: 10px 28px;
        font-size: .95em;
    }
}

/* Mobile dropdown – full width (no overflow) */
@media (max-width:768px) {
    html, body { overflow-x: hidden; } /* prevent horizontal scroll */
    #left-nav {
        position: fixed;
        top: 48px; /* sits below the hamburger bar */
        left: 0;
        right: 0; /* anchor to both sides */
        width: 100vw; /* exactly viewport width */
        max-width: 100vw;
        box-sizing: border-box; /* include padding in the width */
        background: #333;
        overflow-y: auto;
        max-height: calc(100% - 48px);
        transform: translateY(-100%);
        transition: transform .25s ease;
        z-index: 2000;
        padding: 0;
    }
    #left-nav.open { transform: translateY(0); }
    #left-nav ul.menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    #left-nav ul.menu > li { position: relative; }
    #left-nav ul.menu > li > a {
        display: block;
        padding: 14px 40px 14px 16px; /* extra right padding for caret */
        color: #fff;
        text-decoration: none;
        border-bottom: 1px solid rgba(255,255,255,.15);
    }
    #left-nav .sub-menu a {
        padding: 12px 28px;
        font-size: 0.95em;
    }
    #left-nav .menu-item-has-children > a::after { right: 12px !important; }
}

/* keep hamburger above menu */
#mobile-menu { z-index: 2500; }

/* ===== Mobile drawer visual tweaks to match index.php ===== */
@media (max-width: 768px) {
    #left-nav {
        background: #3d3d3d; /* lighter than #222 */
        box-shadow: 0 2px 12px rgba(0,0,0,.25);
        width: 100%;
        max-width: none;
    }
    #left-nav ul.menu,
    #left-nav ul.menu li,
    #left-nav ul.menu li a {
        border: none !important;
        box-shadow: none !important;
    }
    #left-nav ul.menu > li > a {
        padding: 10px 14px; /* was 12/16 */
        line-height: 1.2;
        font-size: 15px;
        color: #e9e9e9;
        background: transparent;
    }
    #left-nav ul.menu > li > a:hover,
    #left-nav ul.menu > li > a:focus {
        background: rgba(255,255,255,.06);
        color: #fff;
    }
    #left-nav .sub-menu a {
        padding: 9px 22px 9px 28px; /* tidy */
        font-size: 14.5px;
        color: #e0e0e0;
    }
    #left-nav .menu > li,
    #left-nav .sub-menu > li {
        border: 0 !important;
    }
    #left-nav .menu > li.menu-item-has-children > a {
        position: relative;
        padding-right: 34px; /* space for arrow */
    }
    #left-nav .menu > li.menu-item-has-children > a:after {
        content: "▾";
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 13px;
        opacity: .85;
    }
}

/* === Adjust spacing for mobile dropdown (slightly tighter) === */
@media (max-width:768px) {
    #left-nav {
        padding-top: 4px; /* reduce top padding */
        padding-bottom: 4px; /* reduce bottom padding */
    }
    #left-nav ul.menu > li > a {
        padding-top: 11px; /* was 14px */
        padding-bottom: 11px;
    }
    #left-nav ul.menu > li {
        margin-bottom: 2px; /* was 4px */
    }
}
/* Only nudge the hamburger icon itself */
@media (max-width:768px) {
    #mobile-menu {
        margin-left: 0; /* keep the black bar flush */
        padding-left: 0;
    }

        #mobile-menu .left-menu {
            margin-left: 15px !important; /* move the icon inward */
            margin-top: 1px !important;
        }
}

/* Slightly increase top spacing for the header text block */
.custom-header .header-left {
    padding-top: 0; /* try 4–8px until it matches index.php */
}

/* Match index.php mobile bar precisely (optional) */
@media (max-width:768px) {
    :root {
        --bar-h: 55px;
    }
    /* set this to the exact height you see on index.php */
    #mobile-menu {
        height: var(--bar-h);
        padding: 0;
        display: flex;
        align-items: center;
        padding-top: 2px;
    }

        #mobile-menu .left-menu i {
            font-size: 24px;
        }
    /* tweak to match index.php */
    #left-nav {
        top: var(--bar-h);
        max-height: calc(100% - var(--bar-h));
    }
}