@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: 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);

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

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 {
    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);

    & 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 {
    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;
        gap: var(--spacing-sm);
        color: inherit;
        font-size: var(--header-nav-font-size, 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: 0;
    margin-block: calc(-1 * var(--_row-padding, var(--spacing-sm)));
}

.nav-hover--background > ul > li > a {
    transition: background-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)));
    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 {
    --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: #ffffff;
    --color-border: rgba(255, 255, 255, 0.15);
    --color-surface: rgba(255, 255, 255, 0.15);
    --color-background: transparent;
    --color-muted: rgba(255, 255, 255, 0.6);
    background: transparent;
}

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

[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: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 * {
    transition-duration: 0s !important;
}

.site-header__row + .site-header__row {
    box-shadow: inset 0 1px 0 var(--color-border);
}

.site-header--no-divider .site-header__row + .site-header__row {
    box-shadow: none;
}

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

.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--rows .site-header__nav {
    margin-inline-start: 0;
}

.site-header--scrolled .site-header__row[data-compact] .site-header__logo {
    --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: #ffffff;
    --color-border: rgba(255, 255, 255, 0.15);
    --color-surface: rgba(255, 255, 255, 0.15);
    --color-background: transparent;
    --color-muted: rgba(255, 255, 255, 0.6);
    --nav-hover-bg: rgba(255, 255, 255, 0.1);
    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: #ffffff;
    --search-bar-btn-color: #000000;
}

.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: #000000;
}

.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 .mobile-menu-toggle {
    display: flex;
}

.site-header__mobile-row-inner {
    display: flex;
    align-items: center;
    gap: var(--header-group-gap, var(--spacing-lg));
    padding-block: var(--spacing-sm);
}

.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 .site-header__mobile-group:has(.site-header__search) {
    flex: 1;
}

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

}