/* 1. Main Navbar Wrapper */
.navbar {
    width: 80%; /* CRITICAL FIX: Matches the exact width of your paragraphs in styles.css */
    padding-top: 20px;
    /* margin-bottom: -1.5rem; */
    padding-bottom: 1rem;
    border-bottom: 1px solid #ddd;
    font-family: et-book, Palatino, "Palatino Linotype", Georgia, serif;
}

/* 2. Container (Aligned with text block) */
.navbar-container {
    display: flex;
    justify-content: flex-start; /* CRITICAL FIX: Snaps the menu to the left to align with body text */
    align-items: end; /* makes logo in navbar better positioned vertically */
    padding: 0; 
}

/* 3. The Brand / Title */
.navbar-brand-container {
    margin-right: 3rem; 
}

.navbar-brand {
    font-size: 1.8rem;
    text-transform: uppercase;
    color: #111;
    font-weight: bold;
}

/* 4. Nav Wrapper */
.navbar-collapse {
    display: flex;
    align-items: baseline;
}

/* 5. Nav Links Layout */
.navbar-nav {
    display: flex;
    align-items: baseline;   
    gap: 2rem;
    list-style: none !important; 
    margin: 7px 0 0 0;
    padding: 0;
    width: auto !important; 
}

/* 6. Overriding Tufte's Aggressive Link Styling */
.navbar a {
    text-decoration: none;
    background: none !important;      
    text-shadow: none !important;     
}

.nav-link {
    font-size: 1.3rem;
    color: #555;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: #000;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .navbar { border-bottom-color: #333; }
    .navbar-brand { color: #eee; }
    .nav-link { color: #aaa; }
    .nav-link:hover { color: #fff; }
}

/* Mobile Support: When Tufte paragraphs expand to 100% on phones, the navbar must too */
@media (max-width: 760px) {
    .navbar { 
        width: 100%;
        margin-bottom: 0rem;
    }
    
    /* Bring the links closer to the MJT logo */
    .navbar-brand-container {
        margin-right: 1rem; /* Shrunk from the desktop's 3rem */
    }
    
    /* Optional: Bring 'Articles' and 'About Me' closer to each other */
    .navbar-nav {
        gap: 1.5rem; /* Shrunk from the desktop's 2rem */
    }
}