/* ==========================================================================
   nav-fix.css — navbar sizing only.

   Carried over from the 2026-09-04 work because it fixes a bug that exists in
   this build too, independently of any course changes:

   .nav-links is a flex row with no flex-wrap. When the row is wider than the
   container, flex shrinks the items until the LABELS break internally — so
   "About Us" and "Contact Us" each split onto two lines. Measured on the
   untouched build, that happened at 1200px and below, and at 800px the row
   overflowed its container by 78px. Between the 768px mobile breakpoint in
   styles.css and the ~900px the row actually needs, there was a dead zone with
   no working navbar at all.

   Three rules below: never break a label; tighten spacing where the row is
   near the edge; start the mobile dropdown at 900px instead of 768px.

   styles.css is deliberately NOT edited — moving its 768px breakpoint would
   drag the hero and every other mobile rule up with it.
   ========================================================================== */

.nav-links a {
    white-space: nowrap;
}

/* the row is near the container edge here — tighten rather than break */
@media (min-width: 901px) and (max-width: 1250px) {
    .nav-links {
        gap: 1.25rem;
    }

    .nav-links a {
        font-size: 1rem;
    }

    .nav-links .nav-btn {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
}

/* --------------------------------------------------------------------------
   769–900px: mirror the navbar half of the 768px mobile block from styles.css
   so the dropdown starts where the horizontal row stops fitting. The menu
   toggle in script.js is a plain class toggle with no width logic, so it works
   here unchanged.
   -------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 900px) {
    .nav-container {
        padding: 0 1.5rem;
    }

    .nav-links {
        position: absolute;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        background-color: var(--bg-white);
        flex-direction: column;
        align-items: flex-start;
        padding: 2rem;
        gap: 1.5rem;
        box-shadow: var(--shadow-md);
        transform: translateY(-150%);
        opacity: 0;
        transition: var(--transition);
        z-index: 999;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
    }

    .nav-links a {
        color: var(--text-dark);
        font-size: 1.05rem;
    }

    .navbar .mobile-menu-btn {
        display: block;
    }

    .navbar.scrolled .mobile-menu-btn {
        color: var(--primary);
    }
}