/* =========================================
   DESKTOP HEADER SHELL + SHARED PRIMITIVES
   Desktop structure, desktop states, and genuinely shared controls live here.
   Mobile panel and utility-panel ownership lives in header-mobile.css.
========================================= */

:root {
    --ta-nav-desktop-primary-current-height: var(--ta-nav-desktop-primary-height);
    --ta-nav-desktop-context-current-height: var(--ta-nav-desktop-context-height);
}

.ta-site-header {
    --ta-nav-desktop-primary-current-height: var(--ta-nav-desktop-primary-height);
    --ta-nav-desktop-context-current-height: var(--ta-nav-desktop-context-height);
    --ta-nav-desktop-visible-height: calc(var(--ta-nav-desktop-primary-current-height) + var(--ta-nav-desktop-context-current-height));
    --ta-nav-desktop-stack-shift: 0px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--ta-header-z);
    height: var(--ta-nav-desktop-visible-height);
    overflow: hidden;
    background: transparent;
    transition: height var(--ta-transition), opacity var(--ta-transition-fast), transform var(--ta-transition-fast);
    will-change: height, opacity, transform;
    backface-visibility: hidden;
}

@media (min-width: 901px) {
    .ta-site-header {
        background: var(--ta-nav-desktop-shell-bg);
        border-bottom: 1px solid var(--ta-nav-desktop-shell-border-color);
        box-shadow: var(--ta-nav-desktop-shell-shadow);
    }

    .ta-primary-bar,
    .ta-context-bar {
        display: flex;
        flex: 0 0 auto;
        min-height: 0;
    }

    .ta-context-bar {
        flex-basis: var(--ta-nav-desktop-context-current-height);
        min-height: var(--ta-nav-desktop-context-current-height);
    }
}

.ta-site-header {
    opacity: 1;
}

.ta-site-header.is-compact {
    --ta-nav-desktop-primary-current-height: var(--ta-nav-desktop-primary-height-compact);
    --ta-nav-desktop-context-current-height: var(--ta-nav-desktop-context-height-compact);
}

body.admin-bar .ta-site-header {
    top: var(--ta-header-admin-offset-desktop);
}

.ta-site-header__stack {
    position: relative;
    display: flex;
    flex-direction: column;
    height: calc(var(--ta-nav-desktop-primary-current-height) + var(--ta-nav-desktop-context-current-height));
    transform: translateY(var(--ta-nav-desktop-stack-shift));
    transition: transform var(--ta-transition);
    will-change: transform;
    backface-visibility: hidden;
}


.ta-site-header.state-top {
    --ta-nav-desktop-visible-height: calc(var(--ta-nav-desktop-primary-current-height) + var(--ta-nav-desktop-context-current-height));
    --ta-nav-desktop-stack-shift: 0px;
}

.ta-site-header.state-top .ta-primary-bar,
.ta-site-header.state-top .ta-context-bar {
    opacity: 1;
    pointer-events: auto;
}

.ta-site-header.state-primary-hidden {
    --ta-nav-desktop-visible-height: var(--ta-nav-desktop-context-current-height);
    --ta-nav-desktop-stack-shift: calc(-1 * var(--ta-nav-desktop-primary-current-height));
}

.ta-site-header.state-primary-hidden .ta-primary-bar,
.ta-site-header.state-all-hidden .ta-primary-bar {
    opacity: 0;
    pointer-events: none;
}

.ta-site-header.state-primary-hidden .ta-context-bar {
    opacity: 1;
    pointer-events: auto;
}

.ta-site-header.state-all-hidden {
    --ta-nav-desktop-visible-height: 0px;
    --ta-nav-desktop-stack-shift: calc(-1 * (var(--ta-nav-desktop-primary-current-height) + var(--ta-nav-desktop-context-current-height)));
}

.ta-site-header.state-all-hidden .ta-context-bar {
    opacity: 0;
    pointer-events: none;
}

.ta-site-header.state-all-hidden.is-temp-revealed .ta-primary-bar,
.ta-site-header.state-all-hidden.is-temp-revealed .ta-context-bar {
    opacity: 1;
    pointer-events: auto;
}

.ta-site-header.is-temp-revealed {
    --ta-nav-desktop-visible-height: calc(var(--ta-nav-desktop-primary-current-height) + var(--ta-nav-desktop-context-current-height));
    --ta-nav-desktop-stack-shift: 0px;
}

.ta-site-header.is-temp-revealed .ta-primary-bar,
.ta-site-header.is-temp-revealed .ta-context-bar {
    opacity: 1;
    pointer-events: auto;
}

.ta-primary-bar__inner,
.ta-context-bar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ta-space-4);
    box-sizing: border-box;
}

.ta-primary-bar__inner {
    height: 100%;
    gap: var(--ta-nav-desktop-primary-gap);
}

.ta-context-bar__inner {
    height: 100%;
    gap: var(--ta-nav-desktop-context-gap);
}



.ta-primary-nav,
.ta-context-nav {
    flex: 1 1 auto;
}

.ta-context-bar__brand,
.ta-primary-bar__actions,
.ta-burger {
    flex: 0 0 auto;
}

.ta-context-bar__brand {
    display: flex;
    align-items: center;
    color: var(--ta-nav-desktop-context-link-color);
}

.ta-context-bar__logo-link,
.ta-context-bar__site-name {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    font-weight: var(--ta-font-weight-bold);
    min-height: var(--ta-nav-context-logo-min-touch-height);
}

.ta-context-bar__logo-link {
    display: flex;
    align-items: center;
    line-height: 0;
}

.ta-context-bar__logo-link:hover,
.ta-context-bar__logo-link:focus-visible {
    color: var(--ta-nav-desktop-context-link-color);
    text-decoration: none;
}

.ta-context-bar__logo-svg,
.ta-context-bar__logo-svg svg {
    display: block;
    height: var(--ta-nav-context-logo-height);
    width: auto;
    color: currentColor;
    transition: height var(--ta-transition), transform var(--ta-transition-fast);
}

.ta-context-bar__logo-link svg,
.ta-context-bar__logo-link img,
.custom-logo {
    display: block;
}

.ta-context-bar__logo-svg svg {
    max-width: var(--ta-nav-context-logo-max-width);
}

.ta-context-bar__logo-link img,
.custom-logo {
    display: block;
    max-height: var(--ta-nav-context-logo-image-max-height);
    width: auto;
    transition: max-height var(--ta-transition), transform var(--ta-transition-fast);
}

.ta-site-header.is-compact .ta-context-bar__logo-svg,
.ta-site-header.is-compact .ta-context-bar__logo-svg svg {
    height: var(--ta-nav-context-logo-height-compact);
}

.ta-site-header.is-compact .ta-context-bar__logo-link img,
.ta-site-header.is-compact .custom-logo {
    max-height: var(--ta-nav-context-logo-image-max-height-compact);
}

.ta-primary-bar__actions {
    display: flex;
    align-items: center;
    gap: var(--ta-nav-desktop-actions-gap);
    min-height: var(--ta-burger-size);
    padding-left: var(--ta-nav-desktop-actions-padding-inline-start);
}

.ta-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--ta-nav-desktop-primary-menu-gap);
    align-items: center;
    flex-wrap: wrap;
}

.ta-menu a {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: var(--ta-nav-desktop-link-min-height);
    padding: var(--ta-nav-desktop-link-padding-block-start) var(--ta-nav-desktop-link-padding-inline) var(--ta-nav-desktop-link-padding-block-end);
    border-radius: var(--ta-nav-desktop-link-radius);
    text-decoration: none;
    color: inherit;
    line-height: var(--ta-nav-desktop-link-line-height);
    font-weight: var(--ta-nav-desktop-link-font-weight);
    letter-spacing: var(--ta-nav-desktop-link-letter-spacing);
    transition:
        background-color var(--ta-transition-fast),
        opacity var(--ta-transition-fast),
        color var(--ta-transition-fast),
        transform var(--ta-transition-fast);
}

.ta-menu a::after {
    content: "";
    position: absolute;
    left: var(--ta-nav-desktop-link-underline-inset);
    right: var(--ta-nav-desktop-link-underline-inset);
    bottom: var(--ta-nav-desktop-link-underline-offset);
    height: var(--ta-nav-desktop-link-underline-thickness);
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ta-transition-fast);
}

.ta-menu--primary {
    gap: var(--ta-nav-desktop-primary-menu-gap);
}

.ta-menu--primary a {
    min-height: var(--ta-nav-desktop-primary-link-min-height);
    padding: var(--ta-nav-desktop-primary-link-padding-block-start) var(--ta-nav-desktop-primary-link-padding-inline) var(--ta-nav-desktop-primary-link-padding-block-end);
    font-size: var(--ta-nav-desktop-primary-link-font-size);
    letter-spacing: var(--ta-nav-desktop-primary-link-letter-spacing);
    color: var(--ta-nav-desktop-primary-link-color);
}

.ta-menu--primary a::after {
    left: var(--ta-nav-desktop-primary-link-underline-inset);
    right: var(--ta-nav-desktop-primary-link-underline-inset);
    bottom: var(--ta-nav-desktop-primary-link-underline-offset);
    height: var(--ta-nav-desktop-primary-link-underline-thickness);
}

.ta-menu--context {
    gap: var(--ta-nav-desktop-context-menu-gap);
}

.ta-menu--context a {
    min-height: var(--ta-nav-desktop-context-link-min-height);
    padding: var(--ta-nav-desktop-context-link-padding-block-start) var(--ta-nav-desktop-context-link-padding-inline) var(--ta-nav-desktop-context-link-padding-block-end);
    font-size: var(--ta-nav-desktop-context-link-font-size);
    color: var(--ta-nav-desktop-context-link-color);
}

.ta-menu--context a::after {
    left: var(--ta-nav-desktop-context-link-underline-inset);
    right: var(--ta-nav-desktop-context-link-underline-inset);
    bottom: var(--ta-nav-desktop-context-link-underline-offset);
    height: var(--ta-nav-desktop-context-link-underline-thickness);
}

.ta-menu a:hover,
.ta-menu a:focus-visible {
    background: var(--ta-nav-desktop-link-hover-bg);
    opacity: 1;
}

.ta-menu--primary a:hover,
.ta-menu--primary a:focus-visible {
    color: var(--ta-nav-desktop-primary-link-hover-color);
}

.ta-menu--context a:hover,
.ta-menu--context a:focus-visible {
    color: var(--ta-nav-desktop-context-link-hover-color);
}

.ta-menu a:focus-visible {
    outline: none;
    box-shadow: var(--ta-nav-desktop-link-focus-ring);
}

.ta-menu a:hover::after,
.ta-menu a:focus-visible::after {
    transform: scaleX(1);
}

.ta-menu .current-menu-item > a,
.ta-menu .current-menu-ancestor > a,
.ta-menu .current_page_item > a,
.ta-menu .current-page-ancestor > a {
    background: var(--ta-nav-desktop-link-active-bg);
    font-weight: var(--ta-nav-desktop-link-active-font-weight);
}

.ta-menu--primary .current-menu-item > a,
.ta-menu--primary .current-menu-ancestor > a,
.ta-menu--primary .current_page_item > a,
.ta-menu--primary .current-page-ancestor > a {
    color: var(--ta-nav-desktop-primary-link-active-color);
}

.ta-menu--context .current-menu-item > a,
.ta-menu--context .current-menu-ancestor > a,
.ta-menu--context .current_page_item > a,
.ta-menu--context .current-page-ancestor > a {
    color: var(--ta-nav-desktop-context-link-active-color);
}

.ta-menu .current-menu-item > a::after,
.ta-menu .current-menu-ancestor > a::after,
.ta-menu .current_page_item > a::after,
.ta-menu .current-page-ancestor > a::after {
    transform: scaleX(1);
}

.ta-menu a:focus-visible,
.ta-context-bar__logo-link:focus-visible,
.ta-burger:focus-visible {
    outline: var(--ta-nav-header-focus-outline-width) solid var(--ta-nav-header-focus-outline-color);
    outline-offset: var(--ta-nav-header-focus-outline-offset);
}

.ta-burger:focus-visible {
    box-shadow: 0 0 0 calc(var(--ta-nav-header-focus-outline-width) + 2px) color-mix(in srgb, var(--ta-nav-header-focus-outline-color) 22%, transparent);
}

/* =========================================
   SHARED HEADER CONTROLS
========================================= */

.ta-burger {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--ta-burger-gap);
    min-height: var(--ta-burger-size);
    min-width: var(--ta-burger-size);
    padding: var(--ta-burger-padding);
    border: 1px solid var(--ta-nav-header-control-border-color);
    background: var(--ta-nav-header-control-bg);
    border-radius: 0;
    color: var(--ta-nav-header-control-color);
    cursor: pointer;
}


.ta-burger span:not(.screen-reader-text) {
    display: block;
    width: var(--ta-burger-line-width);
    height: var(--ta-nav-desktop-context-link-underline-thickness);
    background: currentColor;
    transition: transform var(--ta-transition-fast), opacity var(--ta-transition-fast);
}

.ta-burger[aria-expanded="true"] span:nth-child(2) {
    transform: translateY(var(--ta-burger-translate)) rotate(45deg);
}

.ta-burger[aria-expanded="true"] span:nth-child(3) {
    opacity: 0;
}

.ta-burger[aria-expanded="true"] span:nth-child(4) {
    transform: translateY(calc(-1 * var(--ta-burger-translate))) rotate(-45deg);
}


.ta-account-icon-link,
.ta-account-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ta-account-control-size);
    height: var(--ta-account-control-size);
    padding: 0;
    border: 1px solid var(--ta-nav-header-control-border-color);
    border-radius: var(--ta-radius-pill);
    background: var(--ta-account-control-bg);
    color: var(--ta-nav-header-control-color);
    cursor: pointer;
    text-decoration: none;
    transition:
        background-color var(--ta-transition-fast),
        border-color var(--ta-transition-fast),
        transform var(--ta-transition-fast),
        box-shadow var(--ta-transition-fast);
}


.ta-account-icon-link:link,
.ta-account-icon-link:visited,
.ta-account-icon-link:active,
.ta-account-icon-link.ta-mobile-account-control:link,
.ta-account-icon-link.ta-mobile-account-control:visited,
.ta-account-icon-link.ta-mobile-account-control:active {
    color: var(--ta-nav-header-control-color);
    background: var(--ta-account-control-bg);
    border-color: var(--ta-nav-header-control-border-color);
}

.ta-account-icon-link__icon,
.ta-account-toggle__icon,
.ta-account-icon-link__icon svg,
.ta-account-toggle__icon svg {
    color: currentColor;
    opacity: 1;
    visibility: visible;
}

.ta-account-icon-link__icon svg *,
.ta-account-toggle__icon svg * {
    stroke: currentColor;
}

.ta-account-icon-link:hover,
.ta-account-icon-link:focus-visible,
.ta-account-toggle:hover,
.ta-account-toggle:focus-visible {
    background: var(--ta-nav-header-control-hover-bg);
    border-color: var(--ta-account-control-hover-border-color);
    transform: translateY(var(--ta-account-control-hover-shift));
}

.ta-account-icon-link:focus-visible,
.ta-account-toggle:focus-visible {
    outline: var(--ta-nav-header-focus-outline-width) solid var(--ta-nav-header-focus-outline-color);
    outline-offset: var(--ta-nav-header-focus-outline-offset);
    box-shadow: 0 0 0 calc(var(--ta-nav-header-focus-outline-width) + 2px) color-mix(in srgb, var(--ta-nav-header-focus-outline-color) 22%, transparent);
}

.ta-account-icon-link__icon,
.ta-account-toggle__icon {
    display: inline-flex;
    width: var(--ta-account-icon-size);
    height: var(--ta-account-icon-size);
}

.ta-account-icon-link__icon svg,
.ta-account-toggle__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.ta-account-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--ta-account-icon-size);
    height: var(--ta-account-icon-size);
    border-radius: var(--ta-radius-pill);
    font-size: 0.68rem;
    line-height: 1;
    font-weight: var(--ta-font-weight-bold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (min-width: 901px) {
    .ta-primary-bar .ta-account-icon-link,
    .ta-primary-bar .ta-account-icon-link:link,
    .ta-primary-bar .ta-account-icon-link:visited,
    .ta-primary-bar .ta-account-icon-link:hover,
    .ta-primary-bar .ta-account-icon-link:focus,
    .ta-primary-bar .ta-account-icon-link:focus-visible,
    .ta-primary-bar .ta-account-icon-link:active {
        transform: translateY(var(--ta-account-control-desktop-offset-y));
    }
}

.ta-account-panel__primary-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.ta-account-panel__primary-visual {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ta-site-header.is-top-catchup,
.ta-site-header.is-top-catchup .ta-site-header__stack,
.ta-site-header.is-top-catchup .ta-primary-bar,
.ta-site-header.is-top-catchup .ta-context-bar {
    transition-duration: var(--ta-header-desktop-top-catchup-transition-duration);
}







@media (min-width: 901px) {
    .ta-primary-bar .ta-account-toggle,
    .ta-primary-bar .ta-account-toggle:hover,
    .ta-primary-bar .ta-account-toggle:focus,
    .ta-primary-bar .ta-account-toggle:focus-visible,
    .ta-primary-bar .ta-account-toggle:active {
        transform: translateY(var(--ta-account-control-desktop-offset-y));
    }

    /* Desktop account popover. The panel is moved to <body> by JS and positioned
       from the active account button, so it renders as one fixed overlay rather
       than being clipped or repainted by the animated header shell. */
    .ta-account-panel {
        position: fixed;
        top: var(--ta-account-panel-top, calc(var(--ta-header-admin-offset-desktop, 0px) + var(--ta-nav-desktop-primary-current-height) + var(--ta-account-popover-fallback-top-offset)));
        left: var(--ta-account-panel-left, auto);
        right: auto;
        z-index: calc(var(--ta-header-z) + var(--ta-account-popover-z-offset));
        width: min(var(--ta-account-popover-width), calc(100vw - (var(--ta-layout-gutter) * 2)));
        background: transparent;
        opacity: 0;
        pointer-events: none;
        transform: translate3d(0, var(--ta-account-popover-closed-translate-y), 0) scale(var(--ta-account-popover-closed-scale));
        transform-origin: center center;
        transition:
            opacity var(--ta-account-popover-open-opacity-duration) ease,
            transform var(--ta-account-popover-open-transform-duration) var(--ta-account-popover-open-easing);
        will-change: opacity, transform;
    }

    .ta-account-panel[hidden] {
        display: block !important;
    }

    body.ta-account-panel-open .ta-account-panel {
        opacity: 1;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) scale(1);
    }

    .ta-account-panel__inner {
        width: 100%;
        box-sizing: border-box;
        padding: var(--ta-account-popover-inner-padding);
        border: var(--ta-account-popover-border-width) solid var(--ta-account-popover-border-color);
        border-radius: var(--ta-account-popover-radius);
        background: var(--ta-account-popover-bg);
        box-shadow: var(--ta-account-popover-shadow);
    }

    .ta-account-panel__header {
        display: none;
    }

    .ta-account-panel__user {
        display: flex;
        align-items: center;
        gap: var(--ta-account-popover-user-gap);
        padding: var(--ta-account-popover-user-padding);
        margin: var(--ta-account-popover-user-margin);
        border-radius: var(--ta-account-popover-user-radius);
        background: var(--ta-account-popover-user-bg);
    }

    .ta-account-panel__avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: var(--ta-account-popover-avatar-size);
        height: var(--ta-account-popover-avatar-size);
        border-radius: var(--ta-radius-pill);
        background: var(--ta-account-popover-avatar-bg);
        color: var(--ta-account-popover-text-color);
        font-size: var(--ta-account-popover-avatar-font-size);
        font-weight: var(--ta-font-weight-semibold, 600);
    }

    .ta-account-panel__avatar .ta-account-initials {
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 0;
        border: 0;
        background: transparent;
        font-size: inherit;
        font-weight: inherit;
        line-height: 1;
    }

    .ta-account-panel__user-text {
        display: grid;
        gap: var(--ta-account-popover-user-text-gap);
        min-width: 0;
    }

    .ta-account-panel__user-name,
    .ta-account-panel__user-email {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .ta-account-panel__user-name {
        color: var(--ta-account-popover-text-color);
        font-size: var(--ta-account-popover-user-name-font-size);
        font-weight: var(--ta-font-weight-semibold, 600);
        line-height: 1.2;
    }

    .ta-account-panel__user-email {
        color: var(--ta-account-popover-muted-color);
        font-size: var(--ta-account-popover-user-email-font-size);
        line-height: 1.2;
    }

    .ta-account-panel__nav {
        display: grid;
        gap: var(--ta-account-popover-nav-gap);
    }

    .ta-account-panel__group + .ta-account-panel__group {
        margin-top: var(--ta-account-popover-group-gap);
        padding-top: var(--ta-account-popover-group-gap);
        border-top: var(--ta-account-popover-border-width) solid var(--ta-account-popover-divider-color);
    }

    .ta-account-panel__menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ta-account-panel__menu li + li {
        border-top: 0;
    }

    .ta-account-panel__menu a {
        display: flex;
        align-items: center;
        gap: var(--ta-account-popover-link-gap);
        min-height: var(--ta-account-popover-link-min-height);
        padding: var(--ta-account-popover-link-padding-block) var(--ta-account-popover-link-padding-inline);
        border-radius: var(--ta-account-popover-menu-radius);
        color: var(--ta-account-popover-text-color);
        font-size: var(--ta-account-popover-link-font-size);
        font-weight: var(--ta-font-weight-medium, 500);
        line-height: 1.2;
        text-decoration: none;
        transition: background-color var(--ta-transition-fast), color var(--ta-transition-fast);
    }

    .ta-account-panel__menu a:hover,
    .ta-account-panel__menu a:focus-visible {
        background: var(--ta-account-popover-hover-bg);
    }

    .ta-account-panel__menu a:focus-visible {
        outline: var(--ta-nav-header-focus-outline-width) solid var(--ta-nav-header-focus-outline-color);
        outline-offset: 2px;
    }

    .ta-account-panel__primary-link {
        font-weight: var(--ta-font-weight-semibold, 600);
    }

    .ta-account-panel__primary-visual {
        display: none;
    }

    .ta-account-panel__item-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: var(--ta-account-popover-icon-box-size);
        height: var(--ta-account-popover-icon-box-size);
        color: var(--ta-account-popover-muted-color);
    }

    .ta-account-panel__item-icon svg {
        display: block;
        width: var(--ta-account-popover-icon-size);
        height: var(--ta-account-popover-icon-size);
        fill: currentColor;
    }
}