/*
 * Blue Team - Robert Breutzmann, Miguel Fernandez, Carolina Rodriguez, Sara White
 * Primary Author/Owner - Sara White
 */

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    background: var(--color-bg-header);
    color: var(--color-text-inverse);
    padding: 0.9rem 1.5rem;
    /* The header's own contents would settle at this height anyway; pinning
       it means --header-height in site.css is the truth rather than a guess,
       for the sticky elements on other pages that have to clear it. It's a
       minimum, so the wrapped mobile header below can still grow. */
    min-height: var(--header-height);
    /* sticky header */
    position: sticky;
    top: 0;
    z-index: 10;
}

.header-brand {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.header-brand .logo {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--color-text-inverse);
    text-decoration: none;
}

.header-brand .logo img {
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Hamburger toggle - hidden until the mobile breakpoint below turns it on. */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 34px;
    height: 34px;
    padding: 0;
    background: transparent;
    border: none;
    cursor: pointer;
}

.nav-toggle__bar {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-nav-text);
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Morphs the three bars into an X while the dropdown is open. */
.header-nav.is-open .nav-toggle__bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.header-nav.is-open .nav-toggle__bar:nth-child(2) {
    opacity: 0;
}

.header-nav.is-open .nav-toggle__bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* =============================================================
   Header dropdowns - Plan Your Stay, and the signed-in Welcome menu
   ========================================================== */

.nav-dropdown {
    position: relative;
    display: inline-flex;
}

.nav-dropdown__arrow {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}

.nav-dropdown.is-open .nav-dropdown__arrow {
    transform: rotate(180deg);
}

.nav-dropdown__menu {
    display: none;
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    z-index: 20;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 12rem;
    padding: 0.5rem;
    background: var(--color-deep-marine);
    border: 1px solid
        color-mix(in srgb, var(--color-sand) 30%, transparent);
    border-radius: var(--radius-inner);
    box-shadow: 0 8px 18px
        color-mix(in srgb, var(--color-charcoal-navy) 30%, transparent);
}

.nav-dropdown.is-open .nav-dropdown__menu {
    display: flex;
}

/* The Welcome menu sits at the right edge of the header, so its panel
   opens leftward from the button's right edge instead of running off
   the screen. */
.nav-dropdown--account .nav-dropdown__menu {
    left: auto;
    right: 0;
}

.nav-dropdown__menu a {
    width: 100%;
    white-space: nowrap;
}

.header-nav__links {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}



/* Standard navigation links, dropdown menu links and dropdown triggers.
   .nav-dropdown__menu a is listed separately because the Welcome menu
   sits outside .header-nav__links. */
.header-nav__links a,
.nav-dropdown__menu a,
.nav-dropdown__trigger {
    display: inline-flex;
    position: relative;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-nav-text);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border: 0;
    border-radius: var(--radius-control);
    background: transparent;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

/* Highlights current page viewed */
.header-nav__links a.nav-active,
.nav-dropdown__menu a.nav-active,
.nav-dropdown__trigger.nav-active {
    color: var(--color-nav-text-active);
    font-weight: 600;
}

.header-nav__links a.nav-active::after,
.nav-dropdown__menu a.nav-active::after,
.nav-dropdown__trigger.nav-active::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.2rem;
    height: 2px;
    background-color: var(--color-nav-text-active);
}
/* A dropdown clicked open (.is-pinned, set by js/header.js) keeps its
   button in the hover highlight until it closes. */
.header-nav__links a:hover,
.header-nav__links a:focus-visible,
.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible,
.nav-dropdown__trigger:hover,
.nav-dropdown__trigger:focus-visible,
.nav-dropdown.is-pinned .nav-dropdown__trigger {
    background-color: var(--color-golden-hour);
    color: var(--color-charcoal-navy);
}

.header-nav__links a:focus-visible,
.nav-dropdown__menu a:focus-visible,
.nav-dropdown__trigger:focus-visible {
    outline: 2px solid var(--color-sand);
    outline-offset: 2px;
}


.nav-cta {
    background: transparent;
    color: var(--color-nav-text);
    border: 1px solid var(--color-nav-text);
    padding: 0.5rem 1.1rem;
    border-radius: var(--radius-control);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}

.nav-cta:hover {
    background: var(--color-cta-secondary-bg-hover);
    border-color: var(--color-cta-secondary-bg-hover);
    color: var(--color-cta-secondary-text);
}

/* The Log Out control is a form so it can POST, but a form is a block
   element and would otherwise break the nav's flex row. This makes it
   lay out like the plain button it replaces. */
.nav-logout-form {
    display: inline-flex;
    margin: 0;
}

/* =============================================================
   Responsive header
   ========================================================== */

@media (max-width: 56rem) {
    .site-header {
        align-items: flex-start;
    }

    .header-nav {
        justify-content: flex-end;
        gap: 0.75rem;
    }
}

@media (max-width: 40rem) {
    /* The compact row (icon, hamburger, Welcome menu/login) stays vertically
       centered, undoing the flex-start set at the tablet step above. The
       logo and nav share one row and never wrap apart - before, opening
       the menu pushed the whole nav onto a second row under a lone logo. */
    .site-header {
        align-items: center;
        flex-wrap: nowrap;
        /* The logo's width and the gap after it, so the open menu can
           reach back under the logo (see .header-nav__links below). */
        --header-logo-span: calc(36px + 1rem);
    }

    /* While the menu is open the header grows to fit it, so the logo
       stays at the top with the hamburger instead of floating halfway
       down the left side. */
    .site-header:has(.header-nav.is-open) {
        align-items: flex-start;
    }

    .header-nav {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Brand text goes away on mobile - just the icon stays, next to the
       hamburger and the auth control. */
    .header-brand span {
        display: none;
    }

    .header-nav {
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: 0.75rem;
    }

    .nav-toggle {
        display: flex;
        /* First in the DOM, but sits at the left of the row. */
        order: -1;
        margin-right: auto;
    }

    /* Closed by default: the links (and, when signed in, the Log Out
       form below) are hidden until .is-open is toggled on .header-nav. */
    .header-nav__links {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        width: 100%;
        order: 5;
        padding-top: 0.75rem;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .header-nav.is-open .header-nav__links {
        display: flex;
    }

    /* The open list and Log Out run the full width of the header: the nav
       starts to the right of the logo, so they reach back under it. */
    .header-nav__links,
    .nav-logout-form {
        width: calc(100% + var(--header-logo-span));
        margin-left: calc(-1 * var(--header-logo-span));
    }

    /* Log Out stays out of the compact row on mobile - it only shows up
       inside the open dropdown, under the links. */
    .nav-logout-form {
        display: none;
        order: 5;
    }

    .header-nav.is-open .nav-logout-form {
        display: flex;
    }

    .nav-logout-form .nav-cta {
        width: 100%;
    }

    /* Plan Your Stay opens in place inside the hamburger list. Scoped to
       .header-nav__links so the Welcome menu, which stays in the compact
       row, keeps its desktop popup. */
    .header-nav__links .nav-dropdown {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .header-nav__links .nav-dropdown__trigger {
        width: 100%;
        justify-content: space-between;
        text-align: left;
    }

    .header-nav__links .nav-dropdown__menu {
        position: static;
        width: 100%;
        min-width: 0;
        margin-top: 0.35rem;
        padding: 0.25rem 0 0.25rem 0.75rem;
        background: transparent;
        border: none;
        border-left: 2px solid
            color-mix(in srgb, var(--color-sand) 40%, transparent);
        border-radius: 0;
        box-shadow: none;
    }

    .header-nav__links .nav-dropdown__menu a {
        width: 100%;
    }
}