/* Shared header only. Fonts, font sizes, logos and painted surfaces stay theme-owned.
 * Themes may override --cs-header-* properties; palette fallbacks use currentColor.
 */
.cs-shared-header {
    --cs-header-accent: var(--wp--preset--color--accent-2, var(--wp--preset--color--theme-0, var(--wp--preset--color--primary, currentColor)));
    --cs-header-gap: clamp(1.1em, 1.8vw, 2em);
    --cs-header-space: var(--wp--preset--spacing--30, 1.25rem);
}
.cs-shared-header .cs-header-nav { min-width: 0; }
.cs-shared-header .cs-header-nav .cs-header-list {
    align-items: center;
    gap: var(--cs-header-gap);
    flex-wrap: wrap;
}
.cs-shared-header .cs-header-nav .cs-header-item { position: relative; }
.cs-shared-header .cs-header-nav .cs-header-item > :is(a, .wp-block-navigation-item__content) {
    position: relative;
    box-sizing: border-box;
    min-height: 2.75rem;
    padding-block: .7em;
    line-height: 1.4;
    /* The pseudo-element supplies the brush stroke, including on hover. */
    text-decoration: none !important;
}
/* The brush stroke is a CSS shape, requiring no downloaded assets. */
.cs-shared-header .cs-header-list .cs-header-item > :is(a, .wp-block-navigation-item__content):not(.cs-header-action)::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: -.05em;
    height: .32em;
    /* Follow the link color, including theme hover and dark-mode colors. */
    background: currentColor;
    background: linear-gradient(178deg, color-mix(in srgb, currentColor 48%, transparent), currentColor 48%, color-mix(in srgb, currentColor 60%, transparent));
    border-radius: 65% 40% 55% 35%;
    clip-path: polygon(0 40%, 4% 22%, 28% 12%, 64% 4%, 92% 16%, 100% 38%, 96% 53%, 100% 72%, 72% 78%, 38% 90%, 8% 100%, 0 78%);
    transform: scaleX(0) rotate(-1deg);
    transition: transform 180ms ease;
    pointer-events: none;
}
.cs-shared-header .cs-header-list .cs-header-item:is(:hover, :focus-within, .current-menu-item, .current-menu-ancestor) > :is(a, .wp-block-navigation-item__content):not(.cs-header-action)::after,
.cs-shared-header .cs-header-list .cs-header-item > :is([aria-current="page"], .cs-header-current):not(.cs-header-action)::after,
.cs-shared-header .cs-header-list > .cs-header-item:has(.cs-header-current) > :is(a, .wp-block-navigation-item__content):not(.cs-header-action)::after {
    transform: scaleX(1) rotate(-1deg);
}
/* Keep selection distinct without adding a second, straight text underline. */
.cs-shared-header :is(.current-menu-item > a, a[aria-current="page"]) {
    text-decoration: none;
    font-weight: bolder;
}
.cs-shared-header :is(a, button):focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}
.cs-shared-header .cs-header-action,
.cs-shared-header .cs-header-nav .cs-header-item > a.cs-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    min-height: 2.75rem;
    box-sizing: border-box;
    padding: .65em 1.2em;
    border-radius: 100vmax;
    text-align: center;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.cs-shared-header .cs-header-nav a.cs-header-action { border: 1px solid currentColor; }
.cs-shared-header .cs-header-action:hover {
    transform: translateY(-.1em);
    box-shadow: 0 .2em 0 color-mix(in srgb, currentColor 12%, transparent);
}
.cs-shared-header .cs-header-nav .cs-header-submenu {
    border-radius: .75em;
    box-shadow: 0 .5em 1.5em color-mix(in srgb, currentColor 12%, transparent);
}
.cs-shared-header .cs-header-submenu .cs-header-item > a { overflow-wrap: anywhere; }
.cs-shared-header :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close, .wp-block-navigation__submenu-icon, .gutenverse-hamburger-menu, .gutenverse-close-menu, .cs-header-submenu-toggle) {
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}
.cs-shared-header .wp-block-navigation__submenu-icon { display: inline-flex; margin-inline-start: .1em; }
.cs-shared-header .wp-block-navigation__submenu-icon svg { transition: transform 180ms ease; }
.cs-shared-header .wp-block-navigation__submenu-icon[aria-expanded="true"] svg { transform: rotate(180deg); }
/* Auto overlays collapse early enough for large type and translated labels. */
@media (max-width: 74.999em) {
    .cs-shared-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
    .cs-shared-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: inline-flex; }
}
.cs-shared-header .wp-block-navigation__responsive-container.is-menu-open {
    padding: var(--cs-header-space);
    overscroll-behavior: contain;
    animation: cs-header-enter 180ms ease;
}
.cs-shared-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.has-background) {
    background: var(--cs-header-surface, var(--wp--preset--color--base, var(--wp--preset--color--theme-0, Canvas)));
}
.cs-shared-header .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.has-text-color) {
    color: var(--cs-header-ink, var(--wp--preset--color--contrast, var(--wp--preset--color--theme-1, CanvasText)));
}
.cs-shared-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    align-items: stretch;
    padding-top: calc(2.75rem + var(--cs-header-space));
    gap: .4em;
}
.cs-shared-header .wp-block-navigation__responsive-container.is-menu-open :is(.cs-header-list, .wp-block-page-list) {
    width: 100%;
    gap: .4em;
    align-items: stretch;
}
.cs-shared-header .wp-block-navigation__responsive-container.is-menu-open .cs-header-item {
    width: 100%;
    align-items: stretch;
}
.cs-shared-header .wp-block-navigation__responsive-container.is-menu-open .cs-header-item > .wp-block-navigation-item__content {
    padding: .7em .4em;
    overflow-wrap: anywhere;
}
.cs-shared-header .wp-block-navigation__responsive-container.is-menu-open .cs-header-item:has(> button.wp-block-navigation-submenu__toggle) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
.cs-shared-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon { display: inline-flex; visibility: visible; margin: 0; }
.cs-shared-header .wp-block-navigation__responsive-container.is-menu-open .cs-header-item > .cs-header-submenu {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: .25em 0 .25em 1em;
    border-inline-start: 1px solid currentColor;
    border-radius: 0;
    box-shadow: none;
}
.cs-shared-header .wp-block-navigation__responsive-container.is-menu-open button[aria-expanded="false"] ~ .cs-header-submenu { display: none; }
/* Native focus and ARIA update immediately; capable browsers fade out display:none. */
@supports (transition-behavior: allow-discrete) {
    .cs-shared-header .wp-block-navigation__responsive-container { transition: opacity 180ms ease, display 180ms allow-discrete; }
    .cs-shared-header .wp-block-navigation__responsive-container.hidden-by-default:not(.is-menu-open) { opacity: 0; pointer-events: none; }
    @media (max-width: 74.999em) {
        .cs-shared-header .wp-block-navigation__responsive-container:not(.is-menu-open) { opacity: 0; pointer-events: none; }
    }
}
/* Legacy menu keeps its configured responsive breakpoint and panel background. */
.cs-shared-header .cs-header-submenu-toggle {
    display: inline-flex;
    background: transparent;
    color: inherit;
    border: 0;
    cursor: pointer;
}
.cs-shared-header .cs-header-submenu-toggle > :is(i, svg) {
    display: inline-block;
    width: 1em;
    line-height: 1;
    font-size: inherit;
    transition: transform 180ms ease;
}
.cs-shared-header .cs-header-submenu-toggle[aria-expanded="true"] > :is(i, svg) { transform: rotate(180deg); }
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) .menu-item-has-children > a { display: inline-flex; }
/* Vendor rules have high specificity and can load after these shared styles.
 * Hide only their decorative icon; the labelled shared button stays operable. */
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) .menu-item-has-children > a > i { display: none !important; }
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) .cs-header-submenu[hidden] { display: none; }
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) .cs-header-item:focus-within > .cs-header-submenu,
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) .cs-header-submenu.dropdown-open { visibility: visible; opacity: 1; }
.cs-shared-header .cs-header-mobile .cs-header-list { gap: .4em; }
.cs-shared-header .cs-header-mobile .cs-header-submenu { box-shadow: none; border-radius: 0; }
@keyframes cs-header-enter { from { opacity: 0; transform: translateY(-.5rem); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .cs-shared-header :is(a, button, svg, .wp-block-navigation__responsive-container, .gutenverse-menu-wrapper, .guten-nav-overlay, .cs-header-submenu),
    .cs-shared-header .cs-header-list > .cs-header-item > a::after,
    .cs-shared-header .cs-header-submenu-toggle > :is(i, svg) {
        animation: none !important;
        transition: none !important;
    }
    .cs-shared-header .cs-header-action:hover { transform: none; }
}
/* Let the existing logo, navigation and action columns size to their content. */
@media (min-width: 781px) {
    .cs-shared-header :is(.cs-header-row, .guten-container:has(> .guten-column .cs-header-nav):has(> .guten-column .wp-block-site-logo)) { align-items: center; column-gap: var(--cs-header-gap); row-gap: var(--cs-header-space); }
    .cs-shared-header :is(.cs-header-row, .guten-container:has(> .guten-column .cs-header-nav):has(> .guten-column .wp-block-site-logo)) > .guten-column { width: auto; flex: 0 0 auto; }
    .cs-shared-header :is(.cs-header-row, .guten-container:has(> .guten-column .cs-header-nav):has(> .guten-column .wp-block-site-logo)) > .guten-column:has(.cs-header-nav) { flex: 1 1 0; min-width: 0; }
    /* Saved headers constrain the row independently of the viewport width. */
    .cs-shared-header :is(.cs-header-row, .guten-container:has(> .guten-column .cs-header-nav):has(> .guten-column .wp-block-site-logo)) .cs-header-nav {
        --cs-header-gap: clamp(.65em, 1vw, 1.1em);
    }
    .cs-shared-header :is(.cs-header-row, .guten-container:has(> .guten-column .cs-header-nav):has(> .guten-column .wp-block-site-logo)) .cs-header-nav .cs-header-list {
        flex-wrap: nowrap;
    }
    .cs-shared-header :is(.cs-header-row, .guten-container:has(> .guten-column .cs-header-nav):has(> .guten-column .wp-block-site-logo)) .cs-header-nav .cs-header-list > .cs-header-item > a {
        padding-inline: .35em;
        white-space: nowrap;
    }
    .cs-shared-header :is(.cs-header-row, .guten-container:has(> .guten-column .cs-header-nav):has(> .guten-column .wp-block-site-logo)) .cs-header-submenu-toggle {
        padding-inline: .35em;
    }
}
html.cs-header-modal-open { overflow: hidden; }
/* CSS icons keep legacy controls recognizable without an icon-font dependency. */
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) :is(.gutenverse-hamburger-menu, .gutenverse-close-menu) { position: relative; }
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) :is(.gutenverse-hamburger-menu, .gutenverse-close-menu) > i { visibility: hidden; }
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) .gutenverse-hamburger-menu::before {
    content: "";
    position: absolute;
    inset-inline-start: calc(50% - .6em);
    top: calc(50% - 1px);
    width: 1.2em;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -.35em currentColor, 0 .35em currentColor;
}
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) .gutenverse-close-menu::before,
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) .gutenverse-close-menu::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(50% - .6em);
    top: calc(50% - 1px);
    width: 1.2em;
    height: 2px;
    background: currentColor;
    transform: rotate(45deg);
}
.cs-shared-header :is(.cs-header-legacy-ready, .cs-header-legacy-markup) .gutenverse-close-menu::after { transform: rotate(-45deg); }
.cs-shared-header .cs-header-nav.cs-header-mobile .gutenverse-menu-wrapper { width: 100%; max-width: 100%; min-width: 0; }
.cs-shared-header .cs-header-nav.cs-header-mobile .cs-header-list .cs-header-item.menu-item-has-children {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
}
.cs-shared-header .cs-header-nav.cs-header-mobile .cs-header-item > .cs-header-submenu {
    grid-column: 1 / -1;
    min-width: 0;
}
/* Keep the two header actions together, after the navigation links. */
.cs-shared-header .cs-header-action-pair {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .75em;
    margin-inline-start: auto;
    max-width: 100%;
}
.cs-shared-header a.cs-header-signin,
.cs-shared-header a.cs-header-competition,
.cs-shared-header .cs-header-action-pair > a.cs-header-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    box-sizing: border-box;
    min-height: 3em;
    padding: .8em 1.4em !important;
    /* Override saved filled-button treatments only for this shared action pair. */
    background: transparent !important;
    border: 1px solid currentColor !important;
    border-radius: 100vmax !important;
    font-size: inherit;
    font-family: inherit;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .035em;
    text-align: center;
    text-decoration: none !important;
    margin: 0;
}
/* The competition action keeps its existing theme-accent treatment. */
.cs-shared-header a.cs-header-competition,
.cs-shared-header .cs-header-action-pair > a.cs-header-action {
    color: var(--cs-header-accent) !important;
}
/* Reference-style Sign In: use the surrounding theme text for its outline. */
.cs-shared-header a.cs-header-signin,
.cs-shared-header .cs-header-action-pair > a.cs-header-signin,
.cs-shared-header .cs-header-nav .cs-header-item > a.cs-header-signin {
    color: inherit !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.cs-shared-header .cs-header-action-pair > a.cs-header-action:hover {
    box-shadow: 0 0 0 .18em color-mix(in srgb, currentColor 10%, transparent);
}
.cs-shared-header .cs-header-nav .cs-header-item[hidden] { display: none; }
@media (max-width: 37.5em) {
    .cs-shared-header .cs-header-action-pair { flex-wrap: wrap; justify-content: flex-start; }
}

/* On tablet-sized desktops, give actions their own row before crowding the menu. */
@media (min-width: 781px) and (max-width: 70em) {
    .cs-shared-header :is(.cs-header-row, .guten-container:has(> .guten-column .cs-header-nav):has(> .guten-column .wp-block-site-logo)) { flex-wrap: wrap; }
    .cs-shared-header :is(.cs-header-row, .guten-container:has(> .guten-column .cs-header-nav):has(> .guten-column .wp-block-site-logo)) > .guten-column:has(.cs-header-action-pair):not(:has(.cs-header-nav)) {
        flex-basis: 100%;
    }
}

/* Initial responsive placement is CSS-owned, with no post-load link movement. */
@media (min-width: 781px) {
    .cs-shared-header .cs-header-nav .cs-header-mobile-signin.cs-header-signin-tablet { display: none; }
}
@media (max-width: 780px) {
    .cs-shared-header .cs-header-desktop-actions.cs-header-signin-tablet > .cs-header-signin { display: none; }
}
@media (min-width: 426px) {
    .cs-shared-header .cs-header-nav .cs-header-mobile-signin.cs-header-signin-mobile { display: none; }
}
@media (max-width: 425px) {
    .cs-shared-header .cs-header-desktop-actions.cs-header-signin-mobile > .cs-header-signin { display: none; }
}

/* Keep desktop indicators next to their labels; mobile targets remain roomy. */
@media (min-width: 781px) {
    .cs-shared-header .cs-header-nav:not(.cs-header-mobile) .cs-header-submenu-toggle {
        min-width: 1.25em;
        width: 1.25em;
        padding: 0 !important;
        margin-inline-start: .15em;
        vertical-align: middle;
    }
    .cs-shared-header .cs-header-nav:not(.cs-header-mobile) .cs-header-list > .menu-item-has-children > a {
        padding-inline-end: 0 !important;
    }
}
.cs-shared-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-icon {
    min-width: 1.25em;
    width: 1.25em;
    padding: 0 !important;
    margin-inline-start: .15em;
}

/* Native headers must not reserve half the desktop row for a small logo. */
@media (min-width: 75em) {
    .cs-shared-header .wp-block-columns:has(> .wp-block-column .wp-block-site-logo):has(> .wp-block-column .cs-header-nav) {
        align-items: center;
        flex-wrap: nowrap;
        column-gap: var(--cs-header-gap);
    }
    .cs-shared-header .wp-block-columns > .wp-block-column:has(.wp-block-site-logo):not(:has(.cs-header-nav)) {
        flex: 0 0 auto !important;
    }
    .cs-shared-header .wp-block-columns > .wp-block-column:has(.cs-header-nav) {
        flex: 1 1 auto !important;
        min-width: 0;
    }
    .cs-shared-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content {
        flex-wrap: nowrap;
        align-items: center;
        gap: clamp(.75em, 1vw, 1.2em);
    }
    .cs-shared-header .wp-block-navigation__responsive-container:not(.is-menu-open) .cs-header-list {
        --cs-header-gap: clamp(.65em, 1vw, 1.1em);
        flex-wrap: nowrap;
    }
    .cs-shared-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-buttons {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        margin-block: 0;
    }
}
