/* For smaller, one-off styling needs that don't fit elsewhere */

.overflow-hidden {
    overflow: hidden;
}

/* Pill — Figma "Tags & Buttons" (4988:6964): outline, fully rounded, 16px label.
 * Works on <button> and <a>. A pressed pill (aria-pressed="true") leads with a
 * 13px dot in the page's colour, the same dot that marks the current page in the
 * header menu. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--one-spacer);
    height: 31px;
    padding: 0 var(--one-point-five-spacer);
    border: 1px solid var(--wp--preset--color--text);
    border-radius: 500px;
    background: none;
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    color: var(--wp--preset--color--text);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.pill:hover {
    color: var(--wp--preset--color--text-50);
}

/* A label rather than a control (a <span>), so it doesn't act like one. */
span.pill {
    cursor: default;
}

span.pill:hover {
    color: var(--wp--preset--color--text);
}

.pill[aria-pressed="true"]::before {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--page-color);
}


/* Buttons — core/button, drawn as the pressed pill above: a 13px page-colour dot,
 * then the label. Fill (the default style) is solid text colour; Outline is the
 * pill itself. Hover and keyboard focus swap to the other one. Both follow the
 * colour mode through the text/background tokens.
 *
 * .wp-block-button prefixes each selector to outrank core's own button CSS. */
.wp-block-button .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--one-spacer);
    height: 31px;
    padding: 0 var(--one-point-five-spacer);
    border: 1px solid var(--wp--preset--color--text);
    border-radius: 500px;
    background-color: var(--wp--preset--color--text);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    color: var(--wp--preset--color--background);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.2s, color 0.2s;
}

.wp-block-button .wp-block-button__link::before {
    content: "";
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--page-color);
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
    background-color: transparent;
    color: var(--wp--preset--color--text);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.wp-block-button .wp-block-button__link.is-style-outline:hover,
.wp-block-button .wp-block-button__link.is-style-outline:focus-visible {
    background-color: var(--wp--preset--color--text);
    color: var(--wp--preset--color--background);
}

@media (prefers-reduced-motion: reduce) {
    .wp-block-button .wp-block-button__link {
        transition: none;
    }
}


/* Lux logo — Figma "Lux Logo" (4988:6923), Default → Variant2 on hover.
 * template-parts/logo.php inside a .lux-logo link; size it by setting the
 * width and height of .lux-logo__mark (header.css, footer.css).
 *
 * 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. */
.lux-logo {
    display: block;
    line-height: 0;
}

.lux-logo__mark {
    --logo-duration: 0.4s;
    --logo-stagger: 0.1s;
    --logo-ease: cubic-bezier(0.65, 0, 0.35, 1);

    position: relative;
    display: block;
}

.lux-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. */
.lux-logo__layer--wheel {
    /* Centre of the dot group, (60.34, 60.13). */
    transform-origin: 49.871% 49.695%;
    transition-delay: var(--logo-stagger);
}

.lux-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. */
.lux-logo__layer--ring path,
.lux-logo__layer--ux path {
    fill: var(--wp--preset--color--text);
}

.lux-logo:focus-visible .lux-logo__layer--wheel {
    transform: rotate(-90deg);
    transition-delay: 0s;
}

/* 25.964° is the exact turn that lands the first L on the second. */
.lux-logo:focus-visible .lux-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) {
    .lux-logo:hover .lux-logo__layer--wheel {
        transform: rotate(-90deg);
        transition-delay: 0s;
    }

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

@media (prefers-reduced-motion: reduce) {
    .lux-logo__layer {
        transition: none;
    }
}