/* =========================================================================================================================== */
/*                                            🧩 NAVIGATION                                                                    */
/*                                            📍 static/css/navigation.css                                                     */
/* =========================================================================================================================== */



/* =========================================================================================================================== */
/*                                   📍 Used in: GLOBAL (ALL PAGES)                                                            */
/* =========================================================================================================================== */

/* NAV CONTAINER */
.main-navbar {
    background: rgba(0,0,0,0.85);
    padding: 0.625rem;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    position: relative;
    z-index: 1000;
}

/* NAV LINKS */
.main-navbar a {
    position: relative;
    z-index: 1000;

    background: none;
    border: none;
    outline: none;

    color: #fff;
    text-decoration: none;

    padding: 0.625rem 1.25rem;
    font-size: 1rem;
    cursor: pointer;

    white-space: nowrap;
    transition: 0.2s ease;
}

/* NAV HOVER */
.main-navbar a:hover {
    color: #f2a900;
    text-decoration: none;
}

/* NAV ACTIVE */
.main-navbar a.active {
    border-bottom: 0.125rem solid #f2a900;
}

/* FOCUS HANDLING (no click outline) */
.main-navbar a:focus,
.subnav button:focus {
    outline: none;
}

.main-navbar a:focus-visible,
.subnav button:focus-visible {
    outline: none;
}

/* =========================================================================================================================== */

/* SUBNAV CONTAINER */
.subnav {
    display: flex;                
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;

    width: fit-content;           
    margin: 0 auto 0.75rem auto; 

    background: rgba(0,0,0,0.5);
    padding: 0.625rem 1.25rem;
    border-radius: 0.625rem;
}

/* SUBNAV BUTTONS */
.subnav button {
    background: none;
    border: none;
    outline: none;

    color: #fff;
    text-decoration: none;

    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    cursor: pointer;

    margin: 0.125rem;
    white-space: nowrap;

    transition: border-bottom 0.2s, color 0.2s;
}

/* SUBNAV HOVER */
.subnav button:hover {
    color: #FFD700;
}

/* SUBNAV ACTIVE */
.subnav button.active {
    border-bottom: 0.125rem solid #1E90FF;
    color: #fff;
}

/* =========================================================================================================================== */

/* SUBNAV LEVEL 2 – STACK BELOW */
.subnav.subnav-level-2 {
    display: flex;
    width: fit-content;
    margin: 0 auto 1.25rem auto;
}

/* RANGE SPACING (METRICS SUBNAV LEVEL 2) */
.subnav .range-num {
    margin-right: 0.75rem; 
}

.subnav .range-unit {
    margin-right: 0.5rem; 
}

/* =========================================================================================================================== */