/* 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%;
}

.site-header__logo {
    display: block;
    line-height: 0;
}

/* Logo — Figma "Lux Logo" (4988:6923), Default → Variant2 on hover.
 *
 * Three SVG layers on one 121 × 121 frame, stacked in place. On hover the dot
 * wheel turns a quarter counter-clockwise, then COLLABORATIVE turns one letter
 * clockwise so its first L drops in above UX exactly where the second L was.
 * Leaving plays it back in reverse order. */
.site-header__logo-mark {
    --logo-duration: 0.4s;
    --logo-stagger: 0.1s;
    --logo-ease: cubic-bezier(0.65, 0, 0.35, 1);

    position: relative;
    display: block;
    width: 60px;
    height: 60px;
}

.site-header__logo-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transition: transform var(--logo-duration) var(--logo-ease);
}

/* Pivots are points in the 121px frame, as percentages so they hold at any
 * rendered size. */
.site-header__logo-layer--wheel {
    /* Centre of the dot group, (60.34, 60.13). */
    transform-origin: 49.871% 49.695%;
    transition-delay: var(--logo-stagger);
}

.site-header__logo-layer--ring {
    /* Centre of the circle the lettering is set on, (60.25, 59.72). */
    transform-origin: 49.790% 49.357%;
}

/* The exported lettering is hard-coded #181717; follow the colour mode. */
.site-header__logo-layer--ring path,
.site-header__logo-layer--ux path {
    fill: var(--wp--preset--color--text);
}

.site-header__logo:focus-visible .site-header__logo-layer--wheel {
    transform: rotate(-90deg);
    transition-delay: 0s;
}

/* 25.964° is the exact turn that lands the first L on the second. */
.site-header__logo:focus-visible .site-header__logo-layer--ring {
    transform: rotate(25.964deg);
    transition-delay: var(--logo-stagger);
}

/* Kept out of touch devices, where :hover sticks after a tap. */
@media (hover: hover) {
    .site-header__logo:hover .site-header__logo-layer--wheel {
        transform: rotate(-90deg);
        transition-delay: 0s;
    }

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

@media (prefers-reduced-motion: reduce) {
    .site-header__logo-layer {
        transition: none;
    }
}

/* 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 {
    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);
}

.site-header__menu .current-menu-item > a {
    color: var(--wp--preset--color--text-50);
}

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

.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: none;
    cursor: pointer;
}

.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;
}

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

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

/* 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-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;
}