/* css/header.css */

.site-header {
    width: 100%;
    min-height: 9vh;
    padding: 1.2vh 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--color-soft-white);
    border-bottom: 0.08rem solid rgba(79, 101, 79, 0.18);
}

.site-header__logo-link {
    width: 18%;
    max-width: 22vw;
    min-width: 12vw;
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-header__logo {
    width: 100%;
    height: auto;
    display: block;
}

.site-header__nav {
    width: 52%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header__nav-link {
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: clamp(0.65rem, 0.8vw, 0.95rem);
    color: var(--color-deep-sage);
}

.site-header__nav-link--active::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: -45%;
    height: 0.08rem;
    background: var(--color-sage);
}

@media (max-width: 700px) {
    .site-header {
        min-height: 14vh;
        flex-direction: column;
        justify-content: center;
        gap: 1.5vh;
    }

    .site-header__logo-link {
        width: 42%;
        max-width: 42vw;
    }

    .site-header__nav {
        width: 92%;
    }
}