/*
============================================================
Manual Rehab NYC
navigation.css

Purpose:
Controls the website header and navigation menu.

============================================================
*/

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {

    background-color: var(--color-surface);

    border-bottom: 1px solid var(--color-border);

    position: relative;

    z-index: 10;

}


.header-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    min-height: 90px;

}


/* ==========================================================================
   Logo
   ========================================================================== */

.site-logo {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

}

.site-logo-image {

    display: block;

    width: auto;

    height: 62px;

    object-fit: contain;

}



/* ==========================================================================
   Navigation Links
   ========================================================================== */

.nav-list {

    display: flex;

    align-items: center;

    gap: var(--space-sm);

}


.nav-link {

    display: block;

    padding: 0.6rem 0.9rem;

    color: var(--color-text);

    font-size: var(--font-size-sm);

    font-weight: 500;

    border-radius: var(--radius-md);

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast);

}


.nav-link:hover,
.nav-link:focus-visible {

    color: var(--color-primary);

    background-color: var(--color-background);

}


/* Active Page */

.nav-link.active {

    color: var(--color-primary);

}



/* ==========================================================================
   Navigation Button
   ========================================================================== */

.nav-button {

    margin-left: var(--space-md);

}