/*
  NavBar.css — FLUID SCOPED VERSION
  ══════════════════════════════════════════════════════════════════
  Rigid pixel math has been replaced with CSS Variables and clamp().
  The sidebar mathematically calculates its own width and hidden state,
  eliminating the need for multiple stacked media queries!
  ══════════════════════════════════════════════════════════════════
*/

:root {
    --navbar-color: rgb(135, 135, 135);
    
    /* FLUID: Navbar height grows slightly on tall monitors */
    --navbar-height: clamp(40px, 5vh, 52px);
    
    /* FLUID: Sidebar scales with screen width, capped gracefully */
    --sidebar-width: clamp(260px, 30vw, 450px);
    
    --navbar--border: 0.5px solid rgba(135, 135, 135, 0.4);

    --sidebar-active-bg: #fff;
    --sidebar-active-text: #000;
    
    /* FLUID: The angled notch dynamically scales */
    --sidebar-notch: clamp(12px, 1.5vw, 20px);
    --sidebar-item-indent: 5%;
    --sidebar-font: 'Arial Black', Arial, sans-serif;
    --sidebar-page-count-offset: 0px;
}

/* 1. Import the Font */
@font-face {
    font-family: 'HarmonyOS Sans Regular';
    font-style: normal;
    font-weight: normal;
    src: local('HarmonyOS Sans Regular'), url('../assets/fonts/HarmonyOS/HarmonyOS_Sans_Regular.woff') format('woff');
}

/* 2. Apply Typography Cleanly (Decoupled from layout containers) */
#navbar,
.navbar,
.nav-links a,
.navbar a,
.navbar button {
    font-family: 'HarmonyOS Sans Regular', sans-serif !important;
    font-weight: bolder; 
}

.nav-links a,
.navbar a {
    line-height: 1.5 !important;
    padding-bottom: 2px !important;
}

body {
    isolation: isolate; 
}

/* ─── NAVBAR STRUCTURE ─── */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--navbar-height);
    background: #0a0a0a;
    z-index: 2147483647;
    display: grid !important; /* Force Grid context to remain untouched */
    grid-template-columns: var(--navbar-height) 1fr var(--navbar-height);
    align-items: center;
    border-bottom: var(--navbar--border);
}

.progress-bar {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 1.5px;
    width: 0%;
    background: #fff;
    z-index: 1;
    transition: width 0.1s linear;
}

.nav-spacer { width: var(--navbar-height); }

.nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.nav-btn {
    height: 100%;
    /* FLUID PADDING & FONT: Breathes with the screen size */
    padding: 0 clamp(12px, 1.5vw, 24px);
    font-size: clamp(10px, 1vw, 13px);
    color: rgba(135, 135, 135, 0.6);
    letter-spacing: 0.12em;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    transition: color 0.2s;
    user-select: none;
}

.nav-btn:hover { color: #fff; }
.nav-btn.active { color: #fff; }

.nav-btn.active::after {
    content: '';
    position: absolute;
    top: 1%;
    left: 12%;
    right: 12%;
    height: 2px;
    background: #fff;
    z-index: 1;
}

/* ─── HAMBURGER ─── */
.hamburger {
    width: var(--navbar-height);
    height: var(--navbar-height);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    border-right: var(--navbar--border);
    flex-shrink: 0;
}

.hamburger span {
    display: block;
    width: 18px;
    height: 1.5px;
    background: var(--navbar-color);
    transition: all 0.3s ease;
}

.hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── SIDEBAR ─── */
.sidebar {
    position: fixed;
    top: 0;
    width: var(--sidebar-width);
    left: calc(var(--sidebar-width) * -1); 
    height: 100%;
    background: #0a0a0a;
    border-right: var(--navbar--border);
    z-index: 2147483646;
    display: flex;
    flex-direction: column;
    padding-top: var(--navbar-height);
    transition: left 0.4s cubic-bezier(0.77, 0, 0.18, 1);
    overflow: hidden;
    padding-bottom: env(safe-area-inset-bottom, 0px); 
}

.sidebar.open { left: 0; }

/* ─── SIDEBAR LABEL ─── */
.sidebar-label {
    padding: clamp(12px, 2vh, 18px) 16px clamp(8px, 1vh, 12px) clamp(16px, 2vw, 28px);
    font-size: clamp(8px, 0.8vw, 10px);
    letter-spacing: 0.2em;
    color: rgb(255, 255, 255);
    border-bottom: var(--navbar--border);
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: normal !important;
    word-wrap: break-word !important;
}

.sidebar-label::before {
    content: '■';
    font-size: 6px;
    opacity: 0.5;
}

/* ─── NAV ITEMS ─── */
.sidebar-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    border-bottom: var(--navbar--border);
    overflow: hidden;
    min-height: 0; 
}

.sidebar-item {
    padding: 2px 0;                         
    color: rgba(135, 135, 135, 0.5);
    font-size: clamp(14px, 1.8vw, 22px) !important; 
    font-family: var(--sidebar-font);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    transition: color 0.2s ease;
    user-select: none;
    line-height: 1.15;
    position: relative;
    white-space: normal !important; 
    word-wrap: break-word !important;
}

.sidebar-item:hover { color: #fff; }
.sidebar-item.active { color: var(--sidebar-active-text); }
.sidebar-item.active:hover { color: var(--sidebar-active-text); }

.sidebar-item-inner {
    padding: 8px 16px 8px 24px !important; 
    margin-left: var(--sidebar-item-indent);
    position: relative;
    width: 95% !important; 
    box-sizing: border-box !important;
    gap: 12px !important;  
    z-index: 1;
    display: inline-flex;
    align-items: center;
    background: transparent;
    clip-path: polygon(
        0% 0%,
        100% 0%,
        100% calc(100% - var(--sidebar-notch)),
        calc(100% - var(--sidebar-notch)) 100%,
        0% 100%
    );
    transition: background 0.2s ease;
}

.sidebar-item.active .sidebar-item-inner              { background: var(--sidebar-active-bg); }
.sidebar-item:not(.active):hover .sidebar-item-inner  { background: rgba(255, 255, 255, 0.08); }
.sidebar-item.active:hover .sidebar-item-inner        { background: var(--sidebar-active-bg); }

.sidebar-text {
    display: inline-block;
    color: inherit;
    flex: 1 !important; 
    white-space: normal !important; 
    word-wrap: break-word !important;
    line-height: 1.1 !important;
}

.sidebar-page-num {
    position: relative;
    z-index: 1;
    font-size: clamp(8px, 0.8vw, 10px);
    font-weight: 400;
    letter-spacing: 0.15em;
    color: rgba(135, 135, 135, 0.5);
    line-height: 1.4;
    white-space: nowrap;
    flex-shrink: 0 !important;
    align-self: center !important;
    opacity: 0;
    transform: translateX(6px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sidebar-page-num span { display: block; }

.sidebar-item:hover .sidebar-page-num,
.sidebar-item.active .sidebar-page-num {
    opacity: 1;
    transform: translateX(0);
}

/* ─── SIDEBAR FOOTER ─── */
.sidebar-footer {
    padding: clamp(14px, 2vh, 18px) 12px clamp(18px, 3vh, 24px) clamp(16px, 2vw, 28px);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-footer-item {
    font-size: clamp(9px, 1vw, 11px); 
    letter-spacing: 0.16em;
    color: rgb(255, 255, 255);
    cursor: pointer;
    display: flex;
    align-items: flex-start; 
    gap: 8px;
    transition: color 0.2s;
    user-select: none;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.4 !important;
}

.sidebar-footer-item:hover { color: rgba(255, 255, 255, 0.7); }

/* ─── PAGE COUNTER ─── */
.sidebar-page-count {
    padding: clamp(8px, 1.5vh, 12px) clamp(16px, 2vw, 28px);
    font-size: clamp(8px, 0.8vw, 10px);
    letter-spacing: 0.15em;
    color: rgb(255, 255, 255);
    border-top: var(--navbar--border);
    display: flex;
    justify-content: space-between;
}

/* ─── OVERLAY ─── */
.overlay {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2147483645;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.overlay.visible {
    opacity: 1;
    pointer-events: all;
}

/* ═══════════════════════════════════════════════
   MOBILE OPTIMIZATION — THE CONTEXTUAL TRACKER
═══════════════════════════════════════════════ */
@media (max-width: 768px) {
    :root { 
        --navbar-height: 52px; 
        --sidebar-width: 85vw; 
        --sidebar-notch: 12px;
    }
    
    /* 1. Force container to sit centered in the middle navbar grid slot */
    .nav-links { 
        display: flex !important; 
        justify-content: center !important;
        align-items: center !important;
        height: 100% !important;
        width: 100% !important;
    } 

    /* 2. Hide ALL link tags and classes on mobile by default */
    .nav-links a,
    .nav-links .nav-btn {
        display: none !important;
    }

    /* 3. Display the single link that is currently flagged active */
    .nav-links a.active,
    .nav-links .nav-btn.active {
        display: flex !important; 
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;         /* Force pure white text */
        font-size: 11px !important;
        font-weight: 800 !important;
        letter-spacing: 0.15em !important;
        padding: 0 !important;
        opacity: 1 !important;             /* Guarantee visibility */
        visibility: visible !important;
        pointer-events: none !important; 
    }

    /* 4. Completely destroy the desktop underline on mobile */
    .nav-links a.active::after,
    .nav-links .nav-btn.active::after {
        content: none !important;          /* This kills the ghost line! */
        display: none !important;
    }
    .sidebar-page-num { display: none; } 
    
    .navbar { 
        grid-template-columns: var(--navbar-height) 1fr var(--navbar-height) !important; 
    }
    .hamburger span { width: 20px; }
    
    .sidebar-item { 
        font-size: clamp(18px, 6vw, 26px); 
        white-space: normal; 
        word-break: break-word; 
    }
    
    .sidebar-item-inner { 
        padding: 8px 16px 8px 20px; 
        width: 100%; 
        box-sizing: border-box; 
    }
}