/* ==========================================================================
   NAVBAR
   Fixed navigation bar at the top of every page.
   Mobile-first: mobile styles are default, desktop overrides via media query.
   ========================================================================== */

/* Navbar container: full-width, fixed to top */
.navbar {
    background-color: var(--color-pink-light);
    height: 72px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    box-shadow: 0 1px 15px rgba(50, 1, 0, 0.1);
}

/* Inner layout: flex container for all navbar children */
.navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* Logo: fixed size, does not grow or shrink */
.navbar__logo {
    flex: 0 0 auto;
}

/* Logo image: height from Figma desktop specs (262x71px) */
.navbar__logo-img {
    height: 71px;
}

/* Spacer: hidden on mobile. On desktop, takes equal space as menu
   to push logo to center (see 3-column flexbox trick in navbar.html) */
.navbar__spacer {
    display: none;
}

/* Menu: hidden on mobile, shown as flex row on desktop.
   align-items and gap are set here so they're ready when display changes. */
.navbar__menu {
    display: none;
    align-items: center;
    gap: 16px;
}

/* Individual menu link styling */
.navbar__link {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--text-body);
    color: var(--color-primary-dark);
    transition: opacity 0.2s ease;
}

/* Hamburger toggle: three horizontal bars, visible on mobile only.
   margin-left: auto pushes it to the right edge of the navbar. */
.navbar__toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    margin-left: auto;
}

/* Individual hamburger bars */
.navbar__toggle-bar {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--color-primary-dark);
}

/* Mobile dropdown menu: shown when hamburger is clicked via JS toggle */
.navbar__menu--open {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 72px;
    left: 0;
    width: 100%;
    background-color: var(--color-primary-dark);
    padding: var(--space-lg) var(--space-sm);
    gap: var(--space-md);
}

/* Menu links in dropdown: light color on dark background */
.navbar__menu--open .navbar__link {
    color: var(--color-pink-light);
    font-size: var(--text-h3);
}

/* Hover effect on nav links: subtle opacity change */
.navbar__link:hover {
    opacity: 0.5;
}

/* Active page: underline shows which page we're on */
.navbar__link--active {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ==========================================================================
   DESKTOP (768px+): logo centered, menu right, hamburger hidden
   ========================================================================== */

@media (min-width: 768px) {
    /* Show spacer: flex:1 mirrors menu's flex:1 to center logo */
    .navbar__spacer {
        display: block;
        flex: 1;
    }

    /* Hide hamburger on desktop */
    .navbar__toggle {
        display: none;
    }

    /* Show menu: flex:1 takes right half, links pushed to right edge */
    .navbar__menu {
        display: flex;
        flex: 1;
        justify-content: flex-end;
    }
}