/* Site header — Figma "Lux Nav" (node 4988:10831)
 *
 * Three zones on a 30px gutter: brand (left), menu (centred), meta (right).
 * Values below come from the Figma tokens; see FIGMA.md section 2.
 */

#site-header {
    background-color: var(--wp--preset--color--background);
    z-index: 100;
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--two-spacer);
}

/*
 *  ___                    _
 * | _ ) _ _  __ _  _ _   /_\
 * | _ \| '_|/ _` || ' \ / _ \
 * |___/|_|  \__,_||_||_/_/ \_\
 */

.site-header__brand {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex: 1 1 100%;
}

/* Logo — the shared .lux-logo (css/bits-and-pieces.css), 60px here and 120px
 * from 1080px. .lux-logo-held carries the hover across a click on this logo,
 * so the next page doesn't replay the turn under a cursor that never moved;
 * see header.js. Kept out of touch devices, where :hover sticks after a tap. */
.site-header__logo .lux-logo__mark {
    width: 60px;
    height: 60px;
}

@media (hover: hover) {
    .lux-logo-held .site-header__logo .lux-logo__layer--wheel {
        transform: rotate(-90deg);
        transition-delay: 0s;
    }

    .lux-logo-held .site-header__logo .lux-logo__layer--ring {
        transform: rotate(25.964deg);
        transition-delay: var(--logo-stagger);
    }
}

/* The .d-block utility is !important, so it beats the hidden attribute on its
 * own. nav.js hides this button when no menu is assigned. */
.site-header__menu-toggle[hidden] {
    display: none !important;
}

.site-header__menu-toggle {
    align-self: center;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--wp--preset--color--text);
    cursor: pointer;
}

/*
 *  __  __
 * |  \/  | ___  _ _   _  _
 * | |\/| |/ -_)| ' \ | || |
 * |_|  |_|\___||_||_| \_,_|
 */

.site-header__nav {
    flex: 1 1 100%;
}

.site-header__menu {
    display: flex;
    flex-direction: column;
    gap: var(--three-spacer);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-header__menu li {
    list-style: none;
}

.site-header__menu a {
    position: relative;
    display: inline-block;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.18px;
    color: var(--wp--preset--color--text);
    text-decoration: none;
}

.site-header__menu a:hover,
.site-header__menu a:focus-visible {
    color: var(--wp--preset--color--text-50);
}

/* Current page — Figma "Menu Item": a 13px dot in the page's colour, centred
 * 10px below the label. Positioned out of flow so the row doesn't shift. */
.site-header__menu .current-menu-item > a::after {
    content: "";
    position: absolute;
    top: calc(100% + var(--one-spacer));
    left: 50%;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--page-color);
    transform: translateX(-50%);
}

/* On the Sightlines page (.sightlines-page, from page-sightlines.php) its menu item's
 * label is filled with the spectrum, Persimmon through Grass, clipped to the text,
 * and stays that way on hover. The text goes transparent to let it through, so only
 * where background-clip: text is supported. The dot paints its own background and
 * isn't clipped. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
    .sightlines-page .site-header__menu .current-menu-item > a {
        background-image: linear-gradient(
            to right,
            var(--wp--preset--color--persimmon),
            var(--wp--preset--color--coral),
            var(--wp--preset--color--blush),
            var(--wp--preset--color--bubblegum),
            var(--wp--preset--color--violet),
            var(--wp--preset--color--periwinkle),
            var(--wp--preset--color--cobalt),
            var(--wp--preset--color--denim),
            var(--wp--preset--color--jade),
            var(--wp--preset--color--grass)
        );
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }
}

/*
 *  __  __     _
 * |  \/  | ___| |_ __ _
 * | |\/| |/ -_)  _/ _` |
 * |_|  |_|\___|\__\__,_|
 */

.site-header__meta {
    display: flex;
    align-items: center;
    gap: var(--one-spacer);
    flex: 0 0 auto;
}

.site-header__place,
.site-header__time {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12px;
    color: var(--wp--preset--color--text);
    white-space: nowrap;
}

/* Colour mode toggle — 30 × 19px pill, knob right in light mode. */
.site-header__mode-toggle {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    width: 30px;
    height: 19px;
    padding: 2px;
    border: 1px solid var(--wp--preset--color--text);
    border-radius: 100px;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.site-header__mode-toggle-knob {
    width: 13px;
    height: 13px;
    margin-left: auto;
    border-radius: 50%;
    background-color: var(--wp--preset--color--text);
    transition: margin 0.15s ease, background-color 0.15s ease;
}

[data-color-mode="dark"] .site-header__mode-toggle-knob {
    margin-left: 0;
    margin-right: auto;
}

/* Hover fills the pill and inverts the knob, previewing the opposite scheme.
 * Kept out of touch devices, where :hover sticks after a tap. */
.site-header__mode-toggle:focus-visible {
    background-color: var(--wp--preset--color--text);
}

.site-header__mode-toggle:focus-visible .site-header__mode-toggle-knob {
    background-color: var(--wp--preset--color--background);
}

@media (hover: hover) {
    .site-header__mode-toggle:hover {
        background-color: var(--wp--preset--color--text);
    }

    .site-header__mode-toggle:hover .site-header__mode-toggle-knob {
        background-color: var(--wp--preset--color--background);
    }
}

/*
 *   ___
 *  / _ \ _ __  ___  _ _
 * | (_) | '_ \/ -_)| ' \
 *  \___/| .__/\___||_||_|
 *       |_|
 */

/* nav.js adds .active to #header-menu and .vh-100 to #site-header on toggle. */
#header-menu.active {
    padding-top: var(--two-spacer);
}

/*
 *  ___              _
 * |   \ ___  __ _ _| |_ ___ _ __
 * | |) / -_)(_-< / /  _/ _ \ '_ \
 * |___/\___|/__/_\_\\__\___/ .__/
 *                          |_|
 */

@media (min-width: 1080px) {
    .site-header__inner {
        flex-wrap: nowrap;
    }

    /* Equal flex basis on the outer zones keeps the menu optically centred. */
    .site-header__brand {
        flex: 1 1 0;
    }

    .site-header__logo .lux-logo__mark {
        width: 120px;
        height: 120px;
    }

    .site-header__nav {
        flex: 0 0 auto;
    }

    .site-header__menu {
        flex-direction: row;
    }

    .site-header__meta {
        flex: 1 1 0;
        justify-content: flex-end;
    }
}

/*
 *    _
 *   /_\  __ __ ___  ___ ___ ___
 *  / _ \/ _/ _/ -_)(_-<(_-</ _ \
 * /_/ \_\__\__\___|/__//__/\___/
 */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}