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


/* ==========================================================================
   Base
   ========================================================================== */


.header {
    position: fixed;
    top: var(--header-offset);
    left: 0;

    width: 100%;

    /* Visual */

    background-color: transparent;

    z-index: var(--z-header);
}

/* ==========================================================================
   Layout
   ========================================================================== */

.header > .container {
    height: 100%;
}


.header__inner {
    display: flex;
    justify-content: space-between;
    align-items: center;

    min-height: var(--header-height);

    margin-inline: calc(var(--space-400) * -1);
    padding-inline: var(--space-400);

    position: relative;
    overflow: hidden;

    border: var(--border-width) solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);

    background-color: rgb(
        from color-mix(
            in srgb,
            var(--hero-background) 95%,
            var(--color-white)
        )
        r g b / 92%
    );

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    box-shadow: none;
}


.header__logo {
    height: var(--logo-height);
}

.header__nav {
    display: flex;
    align-items: center;

    gap: var(--space-500);
}

.header__languages {
    display: flex;
    align-items: center;

    gap: var(--space-300);
}

.header__menu {
    display: contents;
}

.header__toggle {
    display: none;
    align-items: center;
    justify-content: center;

    width: var(--space-450);
    height: var(--space-450);
    padding: 0;

    border: 0;
    border-radius: var(--radius-full);

    background-color: transparent;
    color: var(--color-text-light);

    cursor: pointer;
}

.header__toggle-icon {
    position: relative;

    display: block;

    width: 18px;
    height: 12px;
}

.header__toggle-icon::before,
.header__toggle-icon::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 18px;
    height: 1.5px;

    background-color: currentColor;
    transform-origin: center;
}

.header__toggle-icon::before {
    transform: translateY(calc(-50% - 3px));
}

.header__toggle-icon::after {
    transform: translateY(calc(-50% + 3px));
}

.header[data-menu-open] .header__toggle-icon::before {
    transform: translateY(-50%) rotate(45deg);
}

.header[data-menu-open] .header__toggle-icon::after {
    transform: translateY(-50%) rotate(-45deg);
}


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

.header__link {

    /* Typography */

    font-size: var(--font-size-250);
    font-weight: var(--font-weight-400);
    line-height: var(--line-height-heading);

    color: var(--color-text-light);

    text-decoration: none;

}

/* ==========================================================================
   Language Switcher
   ========================================================================== */

.header__language {

    /* Typography */

    font-size: var(--font-size-150);
    font-weight: var(--font-weight-450);
    line-height: var(--line-height-heading);

    color: var(--color-text-light);

    text-decoration: none;

}

.header__language--active {
    color: var(--color-accent);
}

/* ==========================================================================
   States
   ========================================================================== */

.header__link,
.header__language {
    transition:
        color var(--transition-base) var(--ease);
}

.header__link:hover,
.header__language:hover {
    color: var(--color-accent);
}

.header__toggle:focus-visible,
.header__link:focus-visible,
.header__language:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}

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

@media (max-width: 1199px) {

    .header__inner {
        margin-inline: calc(var(--space-300) * -1);
        padding-inline: var(--space-300);
    }

    .header__nav {
        gap: var(--space-300);
    }

    .header__link {
        font-size: var(--font-size-250);
    }

    .header__languages {
        gap: var(--space-200);
    }

    .header__language {
        font-size: var(--font-size-150);
    }

}

@media (max-width: 1023px) {

    .header {
        top: 0;
    }

    .header > .container {
        padding-inline: 0;
    }

    .header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: calc(var(--header-height) - var(--border-width)) auto;

        max-height: calc(100svh - (var(--header-offset) * 2));
        margin-inline: 0;
        padding-inline: clamp(var(--space-200), 4vw, var(--space-400));

        overflow-y: auto;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .header__inner::after {
        content: "";

        position: absolute;
        top: calc(var(--header-height) - var(--border-width));
        right: 0;
        left: 0;
        z-index: 1;

        border-top: var(--border-width) solid rgba(255, 255, 255, 0.08);

        pointer-events: none;
    }

    .header__logo {
        min-width: 0;
        width: min(100%, 220px);
    }

    .header__toggle {
        display: inline-flex;
        justify-self: end;
    }

    .header__menu {
        display: none;
        grid-column: 1 / -1;
        flex-direction: column;
        align-items: stretch;

        gap: var(--space-300);

        padding-block: var(--space-200) var(--space-300);
    }

    .header[data-menu-open] .header__menu {
        display: flex;
    }

    .header__nav {
        flex-direction: column;
        align-items: stretch;

        gap: var(--space-050);
    }

    .header__link {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: var(--space-500);
        padding: var(--space-100) var(--space-150);

        text-align: center;
    }

    .header__link:active {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .header__languages {
        align-self: center;

        gap: var(--space-100);
    }

    .header__language {
        display: inline-flex;
        align-items: center;

        min-height: var(--space-500);
        padding-inline: var(--space-100);
    }

}