/* Styles for Header component */
@layer components {
    .header {
        position: sticky;
        inset-block-start: 0;
        z-index: 100;
        /* Transparent over the hero photo, opaque once the page moves. */
        background-color: transparent;
        border-block-end: 1px solid transparent;
        transition:
            background-color var(--duration-base) var(--ease-jab),
            border-color var(--duration-base) var(--ease-jab),
            backdrop-filter var(--duration-base) var(--ease-jab);

        & .header__skip {
            position: absolute;
            inset-inline-start: var(--space-s);
            inset-block-start: -100%;
            z-index: 1;
            padding: var(--space-2xs) var(--space-s);
            background-color: var(--color-accent);
            color: var(--color-on-accent);
            font-size: var(--size-step--1);
            font-weight: 600;
            text-decoration: none;
            text-transform: uppercase;
            letter-spacing: 0.12em;

            &:focus-visible {
                inset-block-start: var(--space-2xs);
            }
        }

        & .header__inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-m);
            block-size: var(--header-height-top);
            transition: block-size var(--duration-base) var(--ease-jab);
        }

        & .header__brand {
            display: block;
            flex: none;
            color: var(--color-text);
            text-decoration: none;

            & .logo {
                --logo-height: 2.6rem;
            }

            & .logo svg {
                transition: block-size var(--duration-base) var(--ease-jab);
            }
        }

        & .header__nav {
            display: none;
        }

        & .header__list {
            display: flex;
            gap: clamp(var(--space-s), 2vw, var(--space-l));
            padding: 0;
            list-style: none;
        }

        & .header__link {
            position: relative;
            display: block;
            padding-block: var(--space-2xs);
            color: var(--color-text);
            font-size: var(--size-step--1);
            font-weight: 600;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            text-decoration: none;
            transition: color var(--duration-fast) var(--ease-jab);

            &:hover {
                color: var(--color-accent);
            }

            /* The X from the logo marks the active item - the one decorative
               element this component is allowed. */
            &::before {
                content: '';
                position: absolute;
                inset-block-start: 50%;
                inset-inline-start: calc(var(--space-xs) * -1);
                translate: 0 -50%;
                inline-size: 0.45rem;
                block-size: 0.45rem;
                background-color: var(--color-accent);
                clip-path: polygon(
                    50% 35%, 20% 0, 0 20%, 35% 50%, 0 80%, 20% 100%,
                    50% 65%, 80% 100%, 100% 80%, 65% 50%, 100% 20%, 80% 0
                );
                opacity: 0;
                transition: opacity var(--duration-fast) var(--ease-jab);
            }
        }

        /* Exception: the section currently in view. */
        & .header__link[aria-current] {
            color: var(--color-accent);

            &::before {
                opacity: 1;
            }
        }

        & .header__actions {
            display: flex;
            align-items: center;
            gap: var(--space-xs);
            flex: none;
        }

        & .header__cta {
            display: none;
        }

        & .header__cta-number {
            display: none;
            font-variant-numeric: tabular-nums;
        }

        & .header__toggle {
            display: grid;
            place-items: center;
            inline-size: 3rem;
            block-size: 3rem;
            padding: 0;
            border: 1px solid var(--color-border-strong);
            background-color: transparent;
            color: var(--color-text);
            font-size: 1.5rem;
            cursor: pointer;
            transition: border-color var(--duration-fast) var(--ease-jab);

            &:hover {
                border-color: var(--color-accent);
                color: var(--color-accent);
            }

            & .header__toggle-icon {
                grid-area: 1 / 1;
            }

            & [data-icon="close"] {
                display: none;
            }
        }

        /* Exception: scrolled state - solid, shorter, hairline underneath. */
        &[data-state="scrolled"] {
            background-color: color-mix(in srgb, var(--color-surface) 88%, transparent);
            backdrop-filter: blur(12px) saturate(140%);
            border-block-end-color: var(--color-border-accent);

            & .header__inner {
                block-size: var(--header-height);
            }

            & .header__brand .logo {
                --logo-height: 2.1rem;
            }
        }

        /* Exception: mobile menu open - the bar itself must stay readable on top
           of the panel it opened. */
        &[data-menu="open"] {
            background-color: var(--color-surface);
            border-block-end-color: var(--color-border-accent);

            & .header__toggle [data-icon="open"] {
                display: none;
            }

            & .header__toggle [data-icon="close"] {
                display: block;
            }
        }

        & .header__menu {
            position: fixed;
            inset: var(--header-height) 0 0;
            z-index: 99;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            gap: var(--space-l);
            padding: var(--space-l) var(--space-m) var(--space-2xl);
            background-color: var(--color-surface);
            color: var(--color-text);
            overflow-y: auto;
            animation: header-menu-in var(--duration-base) var(--ease-punch);

            &[hidden] {
                display: none;
            }
        }

        & .header__menu-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
            padding: 0;
            list-style: none;
        }

        & .header__menu-link {
            display: block;
            padding-block: var(--space-2xs);
            font-family: var(--font-display);
            font-size: var(--size-step-2);
            text-transform: uppercase;
            text-decoration: none;
            line-height: 1;
            transition: color var(--duration-fast) var(--ease-jab);

            &:hover {
                color: var(--color-accent);
            }
        }

        & .header__menu-foot {
            display: flex;
            flex-direction: column;
            gap: var(--space-2xs);
            padding-block-start: var(--space-m);
            border-block-start: 1px solid var(--color-border-accent);
        }

        & .header__menu-note {
            font-size: var(--size-step--1);
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--color-text-muted);
        }
    }

    @keyframes header-menu-in {
        from {
            opacity: 0;
            translate: 0 -1.5rem;
        }
    }

    /* Above 48rem the nav fits on one line; the hamburger is no longer needed. */
    @media (width >= 48rem) {
        .header {
            & .header__nav {
                display: block;
            }

            & .header__cta {
                display: inline-flex;
            }

            & .header__toggle,
            & .header__menu {
                display: none;
            }
        }
    }

    /* Above 64rem the number itself fits in the button, which is one tap fewer. */
    @media (width >= 64rem) {
        .header .header__cta-text {
            display: none;
        }

        .header .header__cta-number {
            display: inline;
        }
    }
}