/* ed-header.css */

.custom-logo{
    max-width:150px;
}

/* Desktop nav links */
.site-nav__list a {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 300;
    text-transform: uppercase;
    color: var(--color-text);
    text-decoration: none;
    display: inline-grid;
    -webkit-tap-highlight-color: transparent;
}

.site-nav__list .current-menu-item a {
    color: var(--color-primary);
}

.nav__text {
    perspective: 10em;
    transform-style: preserve-3d;
    grid-area: 1 / 1;
}

.nav__split-char {
    --base-delay: 0.05s;
    --max-extra: 2.9s;
    --t: calc(var(--index) / max(var(--max-index), 1));
    --curve: sin(calc(var(--t) * 1.5deg));
    --delay: calc(var(--base-delay) + (var(--curve) * var(--max-extra)));
    --rot-t: calc(var(--index) / max(var(--max-index), 1));
    --rot-curve: sin(calc(var(--rot-t) * 30deg));
    --rot-sign: clamp(-1, var(--signed-index), 1);
    --rot-max: 36deg;
    display: inline-block;
}

.nav__text.is--default .nav__split-char {
    transition: transform 0.325s var(--btn-primary-ease-hover), translate 0.425s var(--btn-primary-ease-hover), rotate 0.45s var(--btn-primary-ease-hover), opacity 0.15s ease-out;
}

.nav__text.is--hover .nav__split-char {
    transition: transform 0.35s var(--btn-primary-ease-hover), translate 0.35s var(--btn-primary-ease-hover), rotate 0.35s var(--btn-primary-ease-hover), opacity 0.15s 0.1s ease-out;
    rotate: 1 0 0 -72deg;
    transform: rotateZ(calc(var(--rot-sign) * var(--rot-curve) * var(--rot-max) * -1)) scale(0.65);
    translate: calc(var(--signed-index) * 0.125em) calc(var(--btn-primary-translate-y) * 1) 0;
    opacity: 0;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .nav__split-char {
        will-change: transform, translate, rotate, opacity;
    }

    .site-nav__list a:is(:hover, :focus-visible) .nav__text.is--default .nav__split-char {
        translate: calc(var(--signed-index) * 0.125em) calc(var(--btn-primary-translate-y) * -1) 0;
        rotate: 1 0 0 72deg;
        transform: rotateZ(calc(var(--rot-sign) * var(--rot-curve) * var(--rot-max) * -1)) scale(0.65);
        opacity: 0;
        transition: transform 0.35s var(--delay) var(--btn-primary-ease-hover), translate 0.35s var(--delay) var(--btn-primary-ease-hover), rotate 0.35s var(--delay) var(--btn-primary-ease-hover), opacity 0.15s calc(var(--delay) + 0.1s) ease-out;
    }

    .site-nav__list a:is(:hover, :focus-visible) .nav__text.is--hover .nav__split-char {
        translate: 0 0 0;
        rotate: 1 0 0 0deg;
        transform: rotateZ(0deg) scale(1);
        opacity: 1;
        transition: transform 0.325s calc(var(--delay) + 0.05s) var(--btn-primary-ease-hover), translate 0.425s calc(var(--delay) + 0.05s) var(--btn-primary-ease-hover), rotate 0.45s calc(var(--delay) + 0.05s) var(--btn-primary-ease-hover), opacity 0.15s calc(var(--delay) + 0.075s) ease-out;
    }
}

.site-nav__list li:not(:last-child)::after {
    content: '·';
    font-size: 20px;
    font-weight: 900;
    color: var(--color-primary);
    margin-left: 12px;
    margin-right:12px;
}

/* Mobile nav links */
#mobile-nav .menu-item a {
    display: block;
    width: 100%;
    text-align: left;
    font-size: clamp(28px, 5vw, 48px);
    font-family: var(--font-heading);
    font-weight: 400;
    color: var(--color-text);
    text-decoration: none;
    padding-block: 12px;
    border-bottom: 1px solid var(--color-border);
    transition: color var(--transition-fast);
}

#mobile-nav .menu-item a:hover {
    color: var(--color-primary);
}

/* Burger open state */
body.nav-open #burger .burger__line:nth-child(1) {
    transform: translateY(8.25px) rotate(45deg);
}
body.nav-open #burger .burger__line:nth-child(2) {
    opacity: 0;
}
body.nav-open #burger .burger__line:nth-child(3) {
    transform: translateY(-8.25px) rotate(-45deg);
}

/* Push body content below fixed header */
.site {
    padding-top: var(--header-height);
}

/* Page loader */
#page-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    background-color: var(--color-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.loader__logo {
    opacity: 0;
    transform-origin: center center;
}

.loader__logo .custom-logo {
    max-width: 220px;
    width: 220px;
}