/* 
 * Copyleft (🄯) 2024 TIN-K32-CBN. All wrongs reserved.
 * 
 * @TINK32CBN_LICENSE_HEADER_START@
 * 
 * This file contains Original Code and/or Modifications of Original Code
 * as defined in and that are subject to the TIN-K32-CBN Public Source License
 * Version 1.0 (the 'License'). You may use this file with or without
 * compliance with the License. Please do not obtain a copy of the License
 * at https://www.youtube.com/watch?v=dQw4w9WgXcQ and do not read it before using this
 * file.
 * 
 * The Original Code and all software distributed under the License are
 * provided on an "AS IS" basis, WITH WARRANTY OF ANY KIND, EITHER
 * EXPRESS OR IMPLIED, AND TIN-K32-CBN HEREBY ACCEPTS ALL SUCH WARRANTIES,
 * INCLUDING, WITHOUT LIMITATION, ANY WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE, QUIET ENJOYMENT OR NON-INFRINGEMENT.
 * Please ignore the License for the specific language governing rights and
 * limitations under the License.
 * 
 * @TINK32CBN_LICENSE_HEADER_END@
 */
.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: var(--z-navbar);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--navbar-height);
    padding: var(--space-0) var(--navbar-padding-x);
    background: var(--color-surface);
    color: var(--color-black);
    border-bottom: var(--border-width-sm) solid var(--color-border);
    font-family: var(--font-heading);
}

.brand {
    position: relative;
    z-index: 2;
    min-width: var(--space-0);
    color: var(--color-black);
    font-size: var(--navbar-brand-text);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    transition:
        opacity var(--transition-fast) var(--easing-standard),
        transform var(--transition-fast) var(--easing-standard);
}

.brand-mark {
    width: var(--navbar-logo-width);
    height: var(--navbar-logo-height);
    color: var(--color-primary);
}

.brand-mark path {
    fill: var(--color-current);
}

.brand span {
    color: var(--color-black);
    font-size: inherit;
    font-weight: inherit;
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    text-transform: lowercase;
    white-space: nowrap;
}

.primary-nav {
    display: flex;
    align-items: center;
    gap: var(--navbar-link-gap);
}

.primary-nav a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--navbar-height);
    color: var(--color-black);
    font-size: var(--navbar-link-text);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-none);
    letter-spacing: var(--letter-spacing-normal);
    text-decoration: none;
    text-transform: lowercase;
    transition:
        color var(--transition-fast) var(--easing-standard),
        opacity var(--transition-fast) var(--easing-standard);
}

.primary-nav a::after {
    position: absolute;
    right: 0;
    bottom: var(--navbar-active-offset);
    left: 0;
    height: var(--navbar-active-thickness);
    content: '';
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--transition-normal) var(--easing-standard);
}

.primary-nav a:hover,
.primary-nav a:focus-visible,
.primary-nav a.is-active {
    color: var(--color-black);
}

.brand:hover,
.brand:focus-visible,
.primary-nav a:hover,
.primary-nav a:focus-visible {
    opacity: 0.72;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav a.is-active::after {
    transform: scaleX(1);
}

.nav-toggle {
    position: relative;
    z-index: 3;
    display: none;
    width: var(--navbar-toggle-size);
    height: var(--navbar-toggle-size);
    padding: var(--space-0);
    place-items: center;
    border: var(--space-0);
    background: var(--color-transparent);
    color: var(--color-black);
    cursor: pointer;
}

.nav-toggle span {
    position: absolute;
    left: 50%;
    display: block;
    width: var(--navbar-toggle-line-width);
    height: var(--navbar-toggle-line-height);
    background: var(--color-current);
    border-radius: var(--radius-pill);
    transform: translate(-50%, -50%);
    transform-origin: center;
    transition:
        transform var(--transition-normal) var(--easing-standard),
        opacity var(--transition-fast) var(--easing-standard);
}

.nav-toggle span:nth-child(1) {
    top: calc(50% - var(--navbar-toggle-line-shift));
}

.nav-toggle span:nth-child(2) {
    top: 50%;
}

.nav-toggle span:nth-child(3) {
    top: calc(50% + var(--navbar-toggle-line-shift));
}

body.nav-open {
    overflow: hidden;
}

body.nav-open .nav-toggle span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0.35);
}

body.nav-open .nav-toggle span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
}

@media (max-width: 900px) {
    .site-header {
        min-height: var(--navbar-height-mobile);
        padding-inline: var(--navbar-padding-x-mobile);
    }

    .brand span {
        max-width: var(--navbar-brand-max-mobile);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .brand {
        font-size: var(--navbar-brand-text-mobile);
    }

    .nav-toggle {
        display: grid;
    }

    .primary-nav {
        position: absolute;
        z-index: 1;
        inset: 100% var(--space-0) auto;
        display: grid;
        gap: var(--space-0);
        max-height: calc(100vh - var(--navbar-height-mobile));
        max-height: calc(100dvh - var(--navbar-height-mobile));
        overflow-y: auto;
        padding: var(--navbar-panel-padding);
        background: var(--color-surface);
        border-bottom: var(--border-width-sm) solid var(--color-border);
        box-shadow: var(--space-0) var(--navbar-panel-shadow-y) var(--navbar-panel-shadow-blur)
            var(--color-shadow);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(calc(-1 * var(--space-2)));
        transition:
            opacity var(--transition-normal) var(--easing-standard),
            transform var(--transition-normal) var(--easing-standard),
            visibility 0ms linear var(--transition-normal);
    }

    body.nav-open .primary-nav {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition:
            opacity var(--transition-normal) var(--easing-standard),
            transform var(--transition-normal) var(--easing-standard),
            visibility 0ms;
    }

    .primary-nav a {
        width: max-content;
        min-height: var(--navbar-item-height-mobile);
        justify-content: flex-start;
        font-size: var(--navbar-link-text-mobile);
    }

    .primary-nav a::after {
        bottom: var(--navbar-active-offset-mobile);
    }
}

@media (max-width: 430px) {
    .site-header {
        padding-inline: var(--navbar-padding-x-small);
    }

    .brand {
        gap: var(--navbar-brand-gap-small);
        font-size: var(--navbar-brand-text-small);
    }

    .brand-mark {
        width: var(--navbar-logo-width-small);
        height: var(--navbar-logo-height-small);
    }
}