/* ======================================================
   Navigation.css – CLEAN DROP-IN (L1 + L2 + L3 + Blur + Scroll Lock)
   - L1 + L2 + L3 content aligns 72px from viewport-left (desktop)
   - L2 is full-width overlay (#f4f4f4)
   - L3 hosts are hidden by default and shown by JS (position: fixed)
   - When nav is open (body.nav-open + html.nav-open):
       * background content blurs
       * background scrolling is locked (iOS-safe)
   ====================================================== */


/* ======================================================
   TOP BAR WRAPPER
   ====================================================== */

.categoryContainer {
    background-color: #454548;
    width: 100%;
    position: relative;
    z-index: 1000;
}


    /* ======================================================
   HARD ALIGN: 72px FROM VIEWPORT LEFT
   Bootstrap .container normally centers content via max-width + margins.
   We override that so nav content starts at 72px exactly.
   ====================================================== */

    .categoryContainer > .container {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 72px !important;
        padding-right: 0 !important;
    }


/* ======================================================
   LEVEL 1
   ====================================================== */

.nav-l1 {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    min-height: 56px; /* ~55px */
}

    .nav-l1 > li {
        display: flex;
        align-items: center;
        border-right: 1px solid #ffffff;
    }

        .nav-l1 > li:last-child {
            border-right: none;
        }

.nav-l1-btn {
    background: none;
    border: none;
    padding: 16px 16px;
    font-family: 'Oswald', sans-serif;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
    color: #ffffff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

    /* L1 hover/focus uses same green as L2 */
    .nav-l1-btn:hover,
    .nav-l1-btn:focus {
        color: #66cc33 !important;
    }

        .nav-l1-btn:hover .green-nav-arrow,
        .nav-l1-btn:focus .green-nav-arrow {
            color: #66cc33;
        }

.green-nav-arrow {
    color: #66cc33;
    font-size: 13px;
    transition: transform 180ms ease;
}

.has-subnav.is-open .green-nav-arrow {
    transform: rotate(180deg);
}


/* ======================================================
   LEVEL 2 – FULL-WIDTH MEGA PANEL (OVERLAY)
   ====================================================== */

.subCategory {
    position: absolute;
    top: 100%; /* beneath L1 bar */
    left: 0;
    width: 100vw;
    background: #f4f4f4;
    z-index: 2000; /* above hero image */

    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
}

.has-subnav.is-open > .subCategory {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Align L2 content to 72px from viewport-left */
.categoryContainer .subCategory .container {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 72px !important;
    padding-right: 0 !important;
}

/* L2 row height + vertical centering */
.subCategory .nav {
    min-height: 56px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    background: transparent;
    border-bottom: none; /* remove tab line */
}

.subCategory .topMonkie {
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-right: 2px solid #E5E5E9;
}

    .subCategory .topMonkie:last-child {
        border-right: none;
    }

/* L2 links: black text, no Bootstrap tab styling */
.subCategory .nav-link {
    display: inline-flex;
    align-items: center;
    height: 56px;
    padding: 0;
    margin: 0;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #000;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 56px;
    text-decoration: none;
}

    .subCategory .nav-link:hover,
    .subCategory .nav-link:focus {
        color: #66cc33;
        background: none !important;
        border: none !important;
    }

    .subCategory .nav-link.active {
        color: #66cc33;
    }


/* ======================================================
   LEVEL 3 HOSTS (CONTROLLED BY JS)
   - Hidden by default
   - JS sets top/left; we keep fixed so it overlays page/hero
   ====================================================== */

.nav-l3-host {
    display: none; /* hidden on page load */
    position: fixed; /* matches JS */
    left: 0;
    width: 100vw;
    z-index: 2000;
}

    /* Align L3 content to 72px from viewport-left (if it uses .container) */
    .nav-l3-host .container {
        max-width: none !important;
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 72px !important;
        padding-right: 0 !important;
    }


/* ======================================================
   PAGE BLUR + HARD SCROLL LOCK WHEN NAV IS OPEN
   Requires:
     - html.nav-open + body.nav-open toggled by JS
     - #page-blur-wrapper around page content (nav outside)
   ====================================================== */

#page-blur-wrapper {
    transition: filter 180ms ease;
}

/* Blur the page behind nav (nav stays sharp) */
body.nav-open #page-blur-wrapper {
    filter: blur(6px);
    pointer-events: none; /* prevent clicks behind nav */
}

/* iOS-safe scroll lock */
html, body {
    height: 100%;
}

    html.nav-open,
    body.nav-open {
        overscroll-behavior: none;
    }

    body.nav-open {
        position: fixed;
        overflow: hidden;
        width: 100%;
        left: 0;
        right: 0;
        /* Optional: compensate for scrollbar removal (set --scrollbar-width via JS) */
        padding-right: var(--scrollbar-width, 0px);
    }

        /* Keep nav clickable while background is disabled */
        body.nav-open .categoryContainer,
        body.nav-open .subCategory,
        body.nav-open .nav-l3-host {
            pointer-events: auto;
        }


/* ======================================================
   ACCESSIBILITY / MOTION
   ====================================================== */

@media (prefers-reduced-motion: reduce) {
    .subCategory,
    .green-nav-arrow {
        transition: none;
    }
}


/* ======================================================
   MOBILE TWEAK: reduce left offset
   ====================================================== */

@media (max-width: 767.98px) {
    .categoryContainer > .container {
        padding-left: 16px !important;
    }

    .categoryContainer .subCategory .container {
        padding-left: 16px !important;
    }

    .nav-l3-host .container {
        padding-left: 16px !important;
    }
}