/* =================================================
   Continuum QC — Navigation Component Styles
   =================================================
   Consumes CSS custom properties from the host page.
   Falls back to sensible defaults if vars are missing.

   ALL open/close behaviour is driven by JS adding or
   removing the .open class. There are NO :hover or
   :focus-within display rules in this stylesheet.
   ================================================= */

/* -------------------------------------------------
   Container
   ------------------------------------------------- */
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    background: var(--primary, #2c3e50);
    padding: 0 20px;
    position: sticky;
    top: 0;
    z-index: 200;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.1));
    -webkit-tap-highlight-color: transparent;
}

/* -------------------------------------------------
   Brand
   ------------------------------------------------- */
.nav-brand a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--white, #ffffff);
    font-weight: 700;
    font-size: 1.1rem;
    padding: 14px 0;
    letter-spacing: 0.5px;
}

.nav-brand img {
    flex-shrink: 0;
}

/* -------------------------------------------------
   Menu List (desktop: horizontal row)
   ------------------------------------------------- */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0;
}

.nav-item {
    position: relative;
}

/* -------------------------------------------------
   Links
   ------------------------------------------------- */
.nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 16px 18px;
    color: var(--light-gray, #ecf0f1);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--transition-normal, 0.3s ease),
                color     var(--transition-normal, 0.3s ease);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.nav-link:hover,
.nav-link:focus-visible,
.nav-item.active > .nav-link {
    background: var(--accent, #3498db);
    color: var(--white, #ffffff);
    outline: none;
}

/* Inline icons */
.nav-icon {
    vertical-align: middle;
    flex-shrink: 0;
}

/* Log-out highlight */
.nav-logout:hover {
    background: var(--danger, #e74c3c);
}

/* -------------------------------------------------
   Dropdown Arrow
   ------------------------------------------------- */
.nav-link .arrow {
    font-size: 0.75rem;
    margin-left: 4px;
    display: inline-block;
    transition: transform var(--transition-normal, 0.3s ease);
}

/* Arrow rotates only when JS adds .open */
.has-dropdown.open > .nav-link .arrow {
    transform: rotate(180deg);
}

/* -------------------------------------------------
   Dropdown Panel
   ------------------------------------------------- */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--secondary, #34495e);
    min-width: 280px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    border-top: 3px solid var(--accent, #3498db);
    box-shadow: var(--shadow-dropdown, 0 8px 24px rgba(0, 0, 0, 0.18));
    border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
    z-index: 300;
    animation: navDropdownFade var(--transition-fast, 0.2s ease);
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.has-dropdown .dropdown-menu.dropdown-menu-fixed {
    position: fixed;
    top: auto;
    bottom: auto;
    max-height: calc(100vh - 20px);
}

/*
 * JS-driven open state — single source of truth, all viewports.
 * No CSS :hover or :focus-within anywhere — JS owns this completely.
 */
.nav-container .has-dropdown.open > .dropdown-menu,
.nav-container .has-dropdown.open > .dropdown-menu.dropdown-menu-fixed {
    display: block !important;
}

/* Scrollbar styling — WebKit */
.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}

.dropdown-menu::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.dropdown-menu::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.dropdown-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

/* Scrollbar — Firefox */
.dropdown-menu {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

@keyframes navDropdownFade {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dropdown links */
.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: var(--light-gray, #ecf0f1);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: normal;
    transition: background   var(--transition-fast, 0.2s ease),
                padding-left var(--transition-fast, 0.2s ease);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.dropdown-menu li a:hover,
.dropdown-menu li a:focus-visible {
    background: var(--accent, #3498db);
    color: var(--white, #ffffff);
    padding-left: 24px;
    outline: none;
}

/* Divider */
.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: 6px 0;
}

/* Section labels */
.dropdown-section-label {
    padding: 10px 20px 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent, #3498db);
    pointer-events: none;
    user-select: none;
}

/* Right-align last few items */
.nav-item:last-child .dropdown-menu,
.nav-item:nth-last-child(2) .dropdown-menu,
.nav-item:nth-last-child(3) .dropdown-menu {
    left: auto;
    right: 0;
}

/* -------------------------------------------------
   Hamburger Toggle (hidden on desktop)
   ------------------------------------------------- */
.nav-toggle-input {
    display: none;
}

.nav-toggle-label {
    display: none;
    cursor: pointer;
    padding: 10px;
    z-index: 300;
    -webkit-tap-highlight-color: transparent;
}

.hamburger,
.hamburger::before,
.hamburger::after {
    display: block;
    width: 26px;
    height: 3px;
    background: var(--white, #ffffff);
    border-radius: 3px;
    position: relative;
    transition: all var(--transition-normal, 0.3s ease);
}

.hamburger::before,
.hamburger::after {
    content: "";
    position: absolute;
    left: 0;
}

.hamburger::before { top: -8px; }
.hamburger::after  { top:  8px; }

/* Animate → X */
.nav-toggle-input:checked + .nav-toggle-label .hamburger {
    background: transparent;
}

.nav-toggle-input:checked + .nav-toggle-label .hamburger::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle-input:checked + .nav-toggle-label .hamburger::after {
    top: 0;
    transform: rotate(-45deg);
}
    
.nav-logo {
    height: 32px;
}

/* -------------------------------------------------
   MOBILE
   ------------------------------------------------- */
@media (max-width: 960px) {

    .nav-toggle-label {
        display: flex;
        align-items: center;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        background: var(--primary, #2c3e50);
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        order: 3;
        padding-bottom: 10px;
        max-height: calc(100vh - 56px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-toggle-input:checked ~ .nav-menu {
        display: flex;
    }

    .nav-link {
        padding: 14px 20px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        font-size: 1rem;
    }

    .dropdown-menu,
    .dropdown-menu.dropdown-menu-fixed {
        display: none;
        position: static;
        background: var(--secondary, #34495e);
        box-shadow: none;
        border-top: none;
        border-radius: 0;
        padding: 0;
        animation: none;
        max-height: none;
        overflow-y: visible;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
    }

    /* JS .open is sole controller on mobile — force static positioning */
    .nav-container .has-dropdown.open > .dropdown-menu,
    .nav-container .has-dropdown.open > .dropdown-menu.dropdown-menu-fixed {
        display: block !important;
        position: static !important;
        max-height: none !important;
    }

    .dropdown-menu li a {
        padding-left: 40px;
        font-size: 0.95rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    }

    .dropdown-menu li a:hover {
        padding-left: 44px;
    }

    .dropdown-section-label {
        padding-left: 40px;
    }

    .dropdown-divider {
        margin: 0;
    }

    .nav-item:last-child .dropdown-menu,
    .nav-item:nth-last-child(2) .dropdown-menu,
    .nav-item:nth-last-child(3) .dropdown-menu {
        left: 0;
        right: auto;
    }
}