@property --color-text { syntax: '<color>'; inherits: true; initial-value: #000000; }
@property --color-border { syntax: '<color>'; inherits: true; initial-value: #000000; }
@property --color-surface { syntax: '<color>'; inherits: true; initial-value: #000000; }
@property --color-background { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --color-muted { syntax: '<color>'; inherits: true; initial-value: #000000; }

@layer components {
.site-header {
    border-bottom: var(--rule-width, 1px) solid var(--color-border);
    background: var(--header-bg, var(--color-background));
    -webkit-backdrop-filter: blur(var(--header-blur, 0));
    backdrop-filter: blur(var(--header-blur, 0));
    color: var(--color-text);
    transition: padding-bottom var(--header-hide-speed, var(--transition-speed)) ease;

    & > .container,
    & > .site-header__inner {
        display: flex;
        align-items: center;
    }

    & > .site-header__inner {
        padding-inline: var(--gutter);
    }
}

.site-header--sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
}

.site-header--sticky ~ .site-main {
    padding-top: var(--header-height, 0px);
}

.site-header--sticky.site-header--sticky-native {
    position: sticky;
}

.site-header--sticky-native ~ .site-main {
    padding-top: 0;
}

.site-header--shadow {
    box-shadow: var(--shadow, none);
}

.site-header--shadow-scroll {
    box-shadow: 0 0 0 transparent;
    transition: box-shadow var(--transition-speed);
}

.site-header--shadow-scroll.site-header--scrolled {
    box-shadow: var(--shadow, none);
}

.site-header--invert-on-scroll {
    transition:
        background var(--header-transparent-speed, var(--transition-speed)),
        border-bottom-color var(--header-transparent-speed, var(--transition-speed)),
        --color-text var(--header-transparent-speed, var(--transition-speed)),
        --color-border var(--header-transparent-speed, var(--transition-speed)),
        --color-surface var(--header-transparent-speed, var(--transition-speed)),
        --color-background var(--header-transparent-speed, var(--transition-speed)),
        --color-muted var(--header-transparent-speed, var(--transition-speed));
}

body.admin-bar .site-header--sticky {
    top: 32px;
}

/* ── Floating header ── */
.site-header--floating {
    margin-inline: auto;
    max-width: 100%;
    border-radius: 0;
    border-bottom: none;
    outline: 1px solid transparent;
    outline-offset: -1px;
    transition:
        max-width var(--header-float-speed, 300ms) ease,
        border-radius var(--header-float-speed, 300ms) ease,
        box-shadow var(--header-float-speed, 300ms) ease,
        outline-color var(--header-float-speed, 300ms) ease,
        top var(--header-float-speed, 300ms) ease,
        background var(--transition-speed),
        transform var(--transition-speed);
}

.site-header--floating.is-floating {
    --_float-offset: var(--header-float-offset, var(--spacing-md));
    --_float-radius: var(--header-float-radius, var(--radius-lg));
    --_float-shadow: var(--header-float-shadow, var(--shadow-md, 0 4px 24px rgba(0,0,0,.08)));
    --_float-max-width: var(--header-float-max-width, var(--content-width));
    max-width: var(--_float-max-width);
    border-radius: var(--_float-radius);
    outline-color: var(--color-border);
    box-shadow: var(--_float-shadow);
    top: var(--_float-offset);
}

body.admin-bar .site-header--floating.is-floating {
    top: calc(32px + var(--_float-offset));
}

/* Floating reveal — starts invisible */
.site-header--float-reveal {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition:
        opacity var(--header-float-speed, 300ms) ease,
        transform var(--header-float-speed, 300ms) ease,
        max-width var(--header-float-speed, 300ms) ease,
        border-radius var(--header-float-speed, 300ms) ease,
        box-shadow var(--header-float-speed, 300ms) ease,
        border-color var(--header-float-speed, 300ms) ease,
        top var(--header-float-speed, 300ms) ease,
        background var(--transition-speed);
}

.site-header--float-reveal.is-floating {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header--sticky {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    body.admin-bar .site-header--sticky {
        top: 0;
    }
}

.site-header__logo {
    display: flex;
    align-items: center;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--logo-font-size, 1.25rem);
    text-transform: var(--logo-text-transform, none);
    letter-spacing: var(--logo-letter-spacing, normal);
    font-style: var(--logo-font-style, normal);
    color: var(--color-text);
    transition: font-size var(--transition-speed), color var(--transition-speed), opacity var(--transition-speed);

    &:hover {
        opacity: var(--logo-hover-opacity, 1);
        color: var(--nav-hover-color, inherit);
    }

    & img {
        max-height: var(--logo-height, 60px);
        width: auto;
        transition: max-height var(--transition-speed);
    }
}

.logo--dark {
    display: none;
}

body.dark .logo--light {
    display: none;
}

body.dark .logo--dark {
    display: block;
}


/* Auto dark logo handled in css-vars.php when auto_dark_mode enabled */

.site-header__nav {
    display: flex;
    align-self: stretch;
    margin-inline-start: auto;

    & > ul {
        display: flex;
        align-self: stretch;
        margin-block: calc(-1 * var(--_row-padding, var(--spacing-sm)));
        gap: var(--header-nav-gap, var(--spacing-lg));
        list-style: none;
        margin-inline: 0;
        padding: 0;
    }

    & > ul > li {
        display: flex;
        align-items: stretch;
    }

    & > ul > li > a {
        position: relative;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        height: 100%;
        gap: var(--spacing-sm);
        color: inherit;
        font-size: var(--header-nav-font-size, inherit);
        font-weight: var(--header-nav-font-weight, inherit);
        text-transform: var(--header-nav-text-transform, none);
        letter-spacing: var(--header-nav-letter-spacing, normal);
        padding: var(--nav-hover-padding-block, var(--_row-padding, var(--spacing-sm))) var(--nav-hover-padding-inline, 0);
        transition: color var(--transition-speed);
    }

    & > ul > li > a:hover {
        color: var(--nav-hover-color, var(--color-muted));
    }
}

.site-header__nav--padded > ul {
    gap: var(--header-nav-gap, 0);
    margin-block: calc(-1 * var(--nav-hover-stretch, var(--nav-hover-padding-block, var(--_row-padding, var(--spacing-sm)))));
}

.nav-hover--background > ul > li > a {
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

.nav-hover--background > ul > li > a:hover {
    background-color: var(--nav-hover-bg, color-mix(in oklch, var(--color-background) var(--surface-hover-mix, 93%), var(--color-text)));
    border-radius: var(--nav-pill-radius, 0);
    color: var(--nav-hover-color, inherit);
}

/* Pill — sliding highlight */
.nav-pill {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    background: var(--nav-hover-bg, color-mix(in oklch, var(--color-background) var(--surface-hover-mix, 93%), var(--color-text)));
    border-radius: var(--nav-pill-radius, 0);
    opacity: 0;
    transition:
        transform var(--nav-pill-speed, 200ms) var(--nav-pill-easing, ease),
        width var(--nav-pill-speed, 200ms) var(--nav-pill-easing, ease),
        height var(--nav-pill-speed, 200ms) var(--nav-pill-easing, ease),
        opacity var(--nav-pill-speed, 200ms);
    will-change: transform, width;
}

.site-header--centered {
    & > .container,
    & > .site-header__inner {
        flex-direction: column;
    }
}

.site-header__top {
    text-align: center;
    padding-block: var(--spacing-sm);
    transition: padding-block var(--transition-speed);
}

.site-header__bottom {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding-block: var(--spacing-sm);
}

.site-header--centered .site-header__nav {
    margin-inline: auto;

    & ul {
        justify-content: center;
    }
}

.site-header--scrolled.site-header--compact .site-header__logo {
    font-size: var(--logo-font-size-compact, 1rem);
}

.site-header--scrolled.site-header--compact .site-header__logo img {
    max-height: var(--logo-height-compact, 40px);
}

/* ── Rows system ── */

.site-header--no-border {
    border-bottom: none;
}




.site-header--rows.no-transition,
.site-header--transparent.no-transition {
    transition: none;
}

.site-header--transparent.no-transition:not(.site-header--scrolled) {
    --color-text: var(--overlay-text);
    --color-border: var(--overlay-border);
    --color-surface: var(--overlay-border);
    --color-background: transparent;
    --color-muted: var(--overlay-text-muted);
    background: transparent;
}

.site-header--transparent:not(.site-header--scrolled) {
    --header-button-bg: transparent;
    --header-button-color: var(--overlay-text);
}

.site-header--transparent.no-transition:not(.site-header--scrolled):not(.site-header--transparent-border) {
    border-bottom-color: transparent;
}


[data-hide-on-scroll]:not(header) {
    transition: height var(--header-hide-speed, var(--transition-speed)) ease,
                opacity var(--header-hide-speed, var(--transition-speed)) ease,
                margin-top var(--header-hide-speed, var(--transition-speed)) ease;
}

[data-hide-on-scroll].row--away:not(header),
[data-hide-on-scroll].row--revealing:not(header) {
    overflow: hidden;
}

.site-header:not([data-hide-mode="direct"]) [data-hide-on-scroll="smart"].row--away:not(header),
.site-header:not([data-hide-mode="direct"]) [data-hide-on-scroll="offset"].row--away:not(header),
.site-header:not([data-hide-mode="direct"]).site-header--scrolled [data-hide-on-scroll="top"]:not(header) {
    height: 0 !important;
}

.site-header__mobile {
    margin-top: -1px;
}

.site-header:not([data-hide-mode="direct"]) [data-hide-on-scroll="smart"].row--away[data-hide-fade],
.site-header:not([data-hide-mode="direct"]) [data-hide-on-scroll="offset"].row--away[data-hide-fade],
.site-header:not([data-hide-mode="direct"]).site-header--scrolled [data-hide-on-scroll="top"][data-hide-fade] {
    opacity: 0;
}

[data-hide-style="slide"] > .site-header__row-inner {
    transition: transform var(--header-hide-speed, var(--transition-speed)) ease;
}

.row--away[data-hide-style="slide"] > .site-header__row-inner,
.site-header--scrolled [data-hide-on-scroll="top"][data-hide-style="slide"] > .site-header__row-inner {
    transform: translateY(-100%);
}

header[data-hide-on-scroll] {
    transition: transform var(--header-hide-speed, var(--transition-speed)) ease,
                opacity var(--header-hide-speed, var(--transition-speed)) ease,
                background var(--header-transparent-speed, var(--transition-speed)),
                color var(--header-transparent-speed, var(--transition-speed)),
                border-bottom-color var(--header-transparent-speed, var(--transition-speed)),
                box-shadow var(--header-transparent-speed, var(--transition-speed)),
                --color-text var(--header-transparent-speed, var(--transition-speed)),
                --color-border var(--header-transparent-speed, var(--transition-speed)),
                --color-surface var(--header-transparent-speed, var(--transition-speed)),
                --color-background var(--header-transparent-speed, var(--transition-speed)),
                --color-muted var(--header-transparent-speed, var(--transition-speed));
}

header[data-hide-on-scroll][data-hide-fade].site-header--away {
    opacity: 0;
}


.site-header.no-transition,
.site-header.no-transition [data-hide-on-scroll] {
    transition: none;
}

.site-header--animating [data-hide-on-scroll] {
    transition-duration: inherit !important;
}

.site-header--animating *:not([data-hide-on-scroll]):not([data-compact] *) {
    transition-duration: 0s !important;
}

.site-header__row:has(+ .site-header__row) > .site-header__row-inner {
    position: relative;
}

.site-header__row:has(+ .site-header__row) > .site-header__row-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: var(--_row-padding-inline, var(--header-padding-inline, var(--gutter)));
    right: var(--_row-padding-inline, var(--header-padding-inline, var(--gutter)));
    border-bottom: var(--rule-width, 1px) solid var(--color-border);
}

.site-header--no-divider .site-header__row:has(+ .site-header__row) > .site-header__row-inner::after {
    display: none;
}

/* bottom row collapsed (hide-on-scroll) — keep a bit of bg below the divider instead of border sitting on the header's own edge */
.site-header:has(.site-header__row.row--away) {
    padding-bottom: var(--header-collapsed-gap, 0px);
}

.site-header__row-inner {
    --_row-padding: var(--spacing-sm);
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    padding-block: var(--_row-padding);
    padding-inline: var(--_row-padding-inline, var(--header-padding-inline, var(--gutter)));
    transition: padding-block var(--transition-speed);
}

/* Truly centered regardless of the width of the groups on either side —
   pulled out of the flex flow, remaining groups keep their own justify-content. */
.site-header__group--centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.site-header__row-inner.container {
    padding-inline: var(--_row-padding-inline, var(--gutter));
}

.site-header__row--multi .site-header__row-inner {
    justify-content: space-between;
}

.site-header__row--align-left .site-header__row-inner {
    justify-content: flex-start;
}

.site-header__row--align-center .site-header__row-inner {
    justify-content: center;
}

.site-header__row--align-right .site-header__row-inner {
    justify-content: flex-end;
}

.site-header__group {
    display: flex;
    align-items: center;
    gap: var(--header-group-gap, var(--spacing-lg));
}

.site-header__group:has(.site-header__nav),
.site-header__group:has(.site-header__search-bar) {
    flex: 1;
}

.site-header__item-wrap {
    display: flex;
    align-items: center;
}

.site-header__group:has(.site-header__nav) {
    align-self: stretch;
}

.site-header--rows .site-header__nav {
    margin-inline-start: 0;
}

.site-header--scrolled .site-header__row[data-compact] .site-header__row-inner {
    padding-block: var(--row-padding-compact, var(--_row-padding, var(--spacing-xs)));
}

.site-header--scrolled .site-header__row[data-compact] .site-header__logo {
    font-size: var(--logo-font-size-compact, 1rem);
}

.site-header--scrolled .site-header__row[data-compact] .site-header__logo img {
    max-height: var(--logo-height-compact, 40px);
}

/* ── Transparent header ── */

.site-header--transparent {
    transition:
        background var(--header-transparent-speed, var(--transition-speed)),
        color var(--header-transparent-speed, var(--transition-speed)),
        border-bottom-color var(--header-transparent-speed, var(--transition-speed)),
        box-shadow var(--header-transparent-speed, var(--transition-speed)),
        --color-text var(--header-transparent-speed, var(--transition-speed)),
        --color-border var(--header-transparent-speed, var(--transition-speed)),
        --color-surface var(--header-transparent-speed, var(--transition-speed)),
        --color-background var(--header-transparent-speed, var(--transition-speed)),
        --color-muted var(--header-transparent-speed, var(--transition-speed)),
        max-width var(--header-float-speed, 300ms) ease,
        border-radius var(--header-float-speed, 300ms) ease,
        outline-color var(--header-float-speed, 300ms) ease,
        top var(--header-float-speed, 300ms) ease;
}


.site-header--transparent:not(.site-header--scrolled) {
    --color-text: var(--overlay-text);
    --color-border: var(--overlay-border);
    --color-surface: var(--overlay-border);
    --color-background: transparent;
    --color-muted: var(--overlay-text-muted);
    --nav-hover-bg: var(--overlay-hover);
    background: transparent;
    outline-color: transparent;
    box-shadow: none;
}

.site-header--transparent:not(.site-header--scrolled):not(.site-header--transparent-border) {
    border-bottom-color: transparent;
}

.site-header--transparent:not(.site-header--scrolled) .search-bar__submit {
    --search-bar-btn-bg: var(--overlay-text);
    --search-bar-btn-color: var(--overlay-contrast);
}

.site-header--transparent:not(.site-header--scrolled) .logo--dark {
    display: none;
}

.site-header--transparent:not(.site-header--scrolled) .logo--light {
    display: block;
}

.site-header--transparent:not(.site-header--scrolled) .dark-mode-toggle--pill {
    --color-background: var(--overlay-contrast);
}

.site-header--transparent:not(.site-header--scrolled) .dark-mode-toggle--pill:hover {
    background: var(--color-surface);
}

.site-header--transparent .dark-mode-toggle--pill {
    transition-property: background, box-shadow, outline-color;
}


.site-header--transparent [data-link-effect] a {
    color: var(--color-text);
}



.site-header--transparent:not(.site-header--scrolled).site-header--shadow-scroll {
    box-shadow: 0 0 0 transparent;
}

body.has-transparent-header .site-header--sticky ~ .site-main {
    padding-top: 0;
}

.site-header__search {
    display: flex;
    align-items: center;
    width: fit-content;
}

/* ── Header buttons ── */

/* ── Mobile header ── */

.site-header__mobile {
    display: none;
}

.site-header__mobile-row-inner {
    display: flex;
    align-items: center;
    gap: var(--header-group-gap, var(--spacing-lg));
    padding-block: var(--spacing-sm);
    /* Same pattern as .site-header__row-inner (desktop) — custom
       header.padding_inline applies in full_width mode; boxed mode forces
       plain gutter back via the .container-scoped override below. */
    padding-inline: var(--header-padding-inline, var(--gutter));
}

.site-header__mobile-row-inner.container {
    padding-inline: var(--gutter);
}

.site-header__mobile-row--multi .site-header__mobile-row-inner {
    justify-content: space-between;
}

.site-header__mobile-row--align-left .site-header__mobile-row-inner {
    justify-content: flex-start;
}

.site-header__mobile-row--align-center .site-header__mobile-row-inner {
    justify-content: center;
}

.site-header__mobile-row--align-right .site-header__mobile-row-inner {
    justify-content: flex-end;
}

.site-header__mobile-group {
    display: flex;
    align-items: center;
    gap: var(--header-group-gap, var(--spacing-lg));
    min-width: 0;
}

.site-header__mobile-row--multi:not(:has(.site-header__logo)) .site-header__mobile-group:has(.site-header__search) {
    flex: 1;
}

/* Logo + toggle mobile row (no search) — pull the toggle out of flow so the
   logo is the row's only in-flow child; row-inner's space-between (from
   --multi) then centers nothing, so force center directly. Only for a
   fixed-size logo — a fluid logo needs real in-flow width to scale into
   (see below), and floating the toggle on top of it is how it ends up
   overlapped/hidden under a wide fluid logo. */
.site-header__mobile-row--multi:has(.site-header__logo):has(.mobile-menu-toggle):not(:has(.site-header__search)):not(:has(.logo--fluid)) .site-header__mobile-row-inner {
    justify-content: center;
    position: relative;
}
.site-header__mobile-row--multi:has(.site-header__logo):has(.mobile-menu-toggle):not(:has(.site-header__search)):not(:has(.logo--fluid)) .site-header__mobile-group:has(.mobile-menu-toggle) {
    position: absolute;
    right: var(--gutter);
    top: 50%;
    transform: translateY(-50%);
}

/* Fluid logo on mobile — stays in normal flex flow (row-inner's default
   --multi space-between: logo left, toggle right, real gap between them —
   the toggle can never be covered, unlike the absolute-positioned case
   above). Group needs real width for the logo's cqi sizing to mean
   anything, and its own internal centering would fight "logo on the left". */
.site-header__mobile-group:has(.logo--fluid) {
    flex: 1;
    min-width: 0;
}

/* The <a> itself is still a default (shrink-to-fit) flex item even though
   its GROUP got flex:1 above — without this it stays auto-sized to its
   own zero-width content, so .logo--fluid's width:100% resolves against a
   0px box and the logo renders at 0×0. */
.site-header__mobile-group:has(.logo--fluid) .site-header__logo {
    display: flex;
    flex: 1;
    min-width: 0;
}

.site-header__mobile-group .logo--fluid {
    justify-content: flex-start;
}

.site-header__mobile .site-header__nav {
    margin-inline-start: 0;
}

.site-header__mobile .site-header__search {
    flex: 1;
    min-width: 0;
}

.site-header__mobile .search-bar {
    width: 100%;
    flex-shrink: 1;
    min-width: 0;
}

}