/* Basic reset-ish */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Header layout */
.site-header {
    background: #222;
    color: #fff;
}

    .site-header .container {
        max-width: 960px;
        margin: 0 auto;
        padding: 10px 15px;
        display: flex;
        align-items: center;
        gap: 20px;
    }

/* Brand/title */
.brand {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

/* Main nav */
.main-nav {
    margin-left: auto;
}

/* Root menu */
.menu {
    list-style: none;
    display: flex;
    gap: 0;
}

/* Menu items */
.menu-item > a {
    display: block;
    padding: 10px 18px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

    .menu-item > a:hover {
        background: #333;
        color: #ff5858;
    }

/* Submenu (desktop) */
.menu-item.has-sub-menu {
    position: relative;
}

    .menu-item.has-sub-menu > .sub-menu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        list-style: none;
        background: #222;
        border: 1px solid #333;
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
        transition: opacity 0.2s ease, transform 0.2s ease;
        z-index: 1000;
    }

    .menu-item.has-sub-menu:hover > .sub-menu {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

/* Nested submenu (fly-out) */
.sub-menu .menu-item.has-sub-menu {
    position: relative;
}

    .sub-menu .menu-item.has-sub-menu > .sub-menu {
        top: 0;
        left: 100%;
    }

/* Little "+" indicator on parents (desktop) */
.menu-item.has-sub-menu > a::after {
    content: " ▾";
    font-size: 10px;
}

/* Mobile toggle button (hidden on desktop) */
.nav-toggle {
    display: none;
    margin-left: auto;
    padding: 8px 12px;
    background: #444;
    color: #fff;
    border: 0;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
}

/* ====== MOBILE LAYOUT ====== */

@media (max-width: 768px) {
    .site-header .container {
        align-items: center;
    }

    /* Show the toggle button */
    .nav-toggle {
        display: inline-block;
    }

    /* Turn nav into an off-canvas panel */
    .main-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 80vw;
        max-width: 320px;
        height: 100vh;
        background: #222;
        padding-top: 60px;
        transform: translateX(-100%);
        transition: transform 0.3s ease-out;
        z-index: 2000;
    }

        /* When nav is open (JS adds .is-open) */
        .main-nav.is-open {
            transform: translateX(0);
        }

    /* Stack menu vertically on mobile */
    .menu {
        flex-direction: column;
    }

    .menu-item > a {
        border-bottom: 1px solid #333;
    }

    /* Submenus on mobile: start hidden, no absolute positioning */
    .menu-item.has-sub-menu > .sub-menu {
        position: static;
        transform: none;
        opacity: 1; /* always "visible" logically */
        pointer-events: auto;
        max-height: 0; /* hide via height */
        overflow: hidden;
        border: 0;
        transition: max-height 0.25s ease-out;
    }

    /* When parent li has .open, expand submenu */
    .menu-item.has-sub-menu.open > .sub-menu {
        max-height: 1000px; /* big enough to show all items */
    }

    /* Indent submenu items */
    .sub-menu .menu-item > a {
        padding-left: 32px;
        font-size: 13px;
    }

    /* Change indicator arrow on mobile */
    .menu-item.has-sub-menu > a::after {
        content: " ▸";
        float: right;
    }

    .menu-item.has-sub-menu.open > a::after {
        content: " ▾";
    }
}