/* =========================================
   BURGER-HEADER + PANEL LAYER
   Owns the burger/mobile header path used up to 900px.
   Large tablet intentionally exits this layer and uses the desktop header system.
========================================= */

/* Base mobile drawer shell lives here so drawer ownership stays in one file.
   Layout/positioning is defined in the mobile breakpoint block below. */
.ta-mobile-panel {
    display: none;
}

.ta-mobile-panel[hidden] {
    display: none !important;
}

.ta-mobile-panel__shell,
.ta-mobile-panel__inner {
    display: grid;
    gap: var(--ta-space-4);
}

.ta-mobile-panel__inner {
    padding-block: var(--ta-space-4);
}


@media (min-width: 768px) and (max-width: 782px) {
    /* Narrow boundary trim: iPad Mini sits exactly on the mobile/tablet crossover and can show
       a slight sliver above the context bar. Nudge the visible bar up by a tiny token amount. */
    .ta-context-bar {
        top: calc(-1 * var(--ta-header-burger-boundary-top-trim));
    }
}

/* Breakpoint contract for header systems:
   - <= 900px: burger/mobile header path lives here
   - >= 901px: desktop/two-bar header path lives in header.css
   Keep that split strict: do not move large tablet back into this file. */
@media (max-width: 900px) {
    .ta-primary-nav,
    .ta-context-nav {
        display: none;
    }

    /* =========================
       MOBILE HEADER CONTROLS
    ========================= */

    .ta-burger {
        display: inline-flex;
    }

    .ta-mobile-account-control,
    .ta-account-toggle.ta-mobile-account-control {
        display: inline-flex;
    }

    .ta-site-header.is-floating .ta-primary-bar {
        box-shadow: var(--ta-nav-desktop-primary-shadow);
    }

    .ta-site-header.is-floating .ta-context-bar {
        box-shadow: var(--ta-nav-desktop-context-shadow);
    }

    /* =========================
       MOBILE HEADER SHELL
    ========================= */

    .ta-mobile-panel {
        display: block;
    }

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

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

    /* Burger bar + opened panel must share one height source of truth.
       The context bar renders at the same live-header-height that the drawer uses as its anchor.
       This prevents the visible strip/gap that can appear when the bar height and drawer top are derived from different owners. */
    .ta-site-header {
        --ta-nav-mobile-live-header-height: var(--ta-nav-mobile-header-height);
        --ta-nav-mobile-current-admin-offset: var(--ta-header-admin-offset-mobile);
        height: var(--ta-nav-mobile-live-header-height);
    }

    /* Mid tablet still belongs to burger mode. Only the admin offset changes here;
       header ownership stays in the burger system until 900px inclusive. */
    @media (min-width: 783px) and (max-width: 900px) {
        .ta-site-header {
            --ta-nav-mobile-current-admin-offset: var(--ta-header-admin-offset-burger-mid);
        }
    }

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

    .ta-primary-bar {
        display: none;
    }

    .ta-context-bar {
        top: 0;
        height: var(--ta-nav-mobile-live-header-height);
        min-height: var(--ta-nav-mobile-live-header-height);
        background: var(--ta-nav-mobile-drawer-bg);
    }

    .ta-site-header,
    .ta-context-bar {
        overflow: visible;
    }

    .ta-context-bar {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }


    /* When the drawer is open, disable hit-testing on the stacked fixed-header shell so it
       cannot cover the first drawer row. Re-enable only the visible mobile bar itself; its
       child controls inherit normal interaction without needing an allow-list. */
    body.ta-header-mobile-open .ta-site-header__stack {
        pointer-events: none;
    }

    body.ta-header-mobile-open .ta-context-bar {
        pointer-events: auto;
    }

    .ta-site-main > .ta-entry,
    .ta-site-main > article,
    .ta-site-main > .type-page,
    .ta-site-main > .type-post {
        display: flow-root;
    }

    .ta-context-bar__inner {
        gap: var(--ta-nav-mobile-context-gap-tight);
        justify-content: space-between;
    }

    .ta-context-bar__brand {
        min-width: 0;
        flex: 1 1 auto;
        padding-right: 0;
    }

    .ta-context-bar__logo-svg,
    .ta-context-bar__logo-svg svg {
        height: var(--ta-nav-mobile-logo-height);
    }

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

    /* Mobile drawer model:
       - outer drawer shell = fixed overlay below the live mobile header
       - inner drawer surface = right-side sliding layer
       The JS moves the overlay to <body> and syncs its top offset from the actual header bottom. */
    .ta-mobile-panel {
        position: fixed;
        top: var(--ta-nav-mobile-live-header-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 6;
        display: block;
        background: var(--ta-nav-mobile-drawer-overlay-bg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--ta-nav-mobile-drawer-transition), visibility 0s linear var(--ta-nav-mobile-drawer-transition);
    }

    .ta-mobile-panel.is-opening,
    .ta-mobile-panel.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .ta-mobile-panel.is-closing {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .ta-mobile-panel__shell {
        position: absolute;
        top: calc(-1 * var(--ta-nav-mobile-drawer-top-overlap));
        right: 0;
        width: var(--ta-nav-mobile-drawer-width);
        max-width: 100%;
        max-height: calc(100dvh - var(--ta-account-panel-mobile-top, var(--ta-nav-mobile-header-height, 64px)) + var(--ta-nav-mobile-drawer-top-overlap, 4px));
        box-sizing: border-box;
        background: var(--ta-nav-mobile-drawer-bg);
        border-left: 1px solid var(--ta-nav-mobile-drawer-border-color);
        box-shadow: var(--ta-nav-mobile-drawer-shadow);
        overflow: hidden;
        transform: translateX(100%);
        transition: transform var(--ta-nav-mobile-drawer-transition);
    }

    .ta-mobile-panel__inner {
        position: relative;
        inset: auto;
        width: 100%;
        max-width: 100%;
        max-height: var(--ta-nav-mobile-drawer-max-height);
        height: auto;
        box-sizing: border-box;
        margin-inline: 0;
        margin-top: var(--ta-nav-mobile-drawer-top-overlap);
        overflow-x: hidden;
        overflow-y: auto;
        padding-block: var(--ta-nav-mobile-drawer-padding-block-start) var(--ta-nav-mobile-drawer-padding-block-end);
        padding-inline: var(--ta-nav-mobile-group-stack-gap);
        gap: var(--ta-nav-mobile-drawer-gap);
        background: transparent;
    }

    .ta-mobile-panel.is-opening .ta-mobile-panel__shell,
    .ta-mobile-panel.is-open .ta-mobile-panel__shell {
        transform: translateX(0);
    }

    .ta-mobile-panel.is-closing .ta-mobile-panel__shell {
        transform: translateX(100%);
    }

    .ta-mobile-panel.is-nav-teardown {
        transition: none;
    }

    .ta-mobile-panel.is-nav-teardown .ta-mobile-panel__shell {
        transition: none;
        transform: translateX(100%);
    }

    /* =========================
       MOBILE NAVIGATION GROUPS
    ========================= */

    .ta-mobile-nav__group {
        box-sizing: border-box;
        margin: 0;
        width: 100%;
        overflow: hidden;
        padding: var(--ta-nav-mobile-primary-group-padding-top) var(--ta-nav-mobile-primary-group-padding-inline) var(--ta-nav-mobile-primary-group-padding-bottom);
        gap: var(--ta-nav-mobile-primary-group-inner-gap);
        border: 1px solid var(--ta-nav-mobile-group-border-color);
        border-radius: var(--ta-nav-mobile-group-radius);
        background: var(--ta-nav-mobile-primary-group-bg);
    }

    .ta-mobile-nav__group--context {
        padding: var(--ta-nav-mobile-context-group-padding-top) var(--ta-nav-mobile-context-group-padding-inline) var(--ta-nav-mobile-context-group-padding-bottom);
        gap: var(--ta-nav-mobile-context-group-inner-gap);
        background: var(--ta-nav-mobile-context-group-bg);
    }

    .ta-mobile-panel__inner > .ta-mobile-nav > .ta-mobile-nav__group:first-child {
        margin-top: 0;
        width: 100%;
    }

    .ta-mobile-nav__label {
        display: block;
        margin: 0 0 var(--ta-nav-mobile-group-heading-margin-bottom);
        padding-inline: 0;
        line-height: 1.2;
    }

    .ta-mobile-nav__group--primary .ta-mobile-nav__label {
        font-size: var(--ta-nav-mobile-primary-group-label-font-size);
        font-weight: var(--ta-nav-mobile-primary-group-label-font-weight);
        letter-spacing: var(--ta-nav-mobile-primary-group-label-letter-spacing);
        color: var(--ta-nav-mobile-primary-group-label-color);
    }

    .ta-mobile-nav__group--context .ta-mobile-nav__label {
        font-size: var(--ta-nav-mobile-context-group-label-font-size);
        font-weight: var(--ta-nav-mobile-context-group-label-font-weight);
        letter-spacing: var(--ta-nav-mobile-context-group-label-letter-spacing);
        color: var(--ta-nav-mobile-context-group-label-color);
    }

    .ta-mobile-nav .ta-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .ta-mobile-nav .ta-menu li {
        position: relative;
        margin: 0;
        padding: 0;
    }

    .ta-mobile-nav .ta-menu a {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        min-height: 0;
        padding-inline: var(--ta-nav-mobile-menu-inline-padding);
        border-radius: 0;
        line-height: var(--ta-nav-mobile-menu-line-height);
        font-family: var(--ta-font-body);
        background: var(--ta-nav-mobile-context-link-active-bg);
        
        transition: color var(--ta-transition-fast), background-color var(--ta-transition-fast), box-shadow var(--ta-transition-fast);
    }

    .ta-mobile-nav .ta-menu a::after {
        display: none;
    }

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

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

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

    .ta-mobile-nav .ta-menu a: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: var(--ta-nav-mobile-link-focus-ring);
    }

    .ta-mobile-nav__group--primary .ta-menu a {
        padding-block: var(--ta-nav-mobile-primary-link-padding-block);
        font-size: var(--ta-nav-mobile-primary-link-font-size);
        font-weight: var(--ta-nav-mobile-primary-link-font-weight);
        color: var(--ta-nav-mobile-primary-link-color);
    }

    .ta-mobile-nav__group--primary .ta-menu .current-menu-item > a,
    .ta-mobile-nav__group--primary .ta-menu .current-menu-ancestor > a,
    .ta-mobile-nav__group--primary .ta-menu .current_page_item > a,
    .ta-mobile-nav__group--primary .ta-menu .current-page-ancestor > a {
        font-weight: var(--ta-nav-mobile-primary-link-active-font-weight);
        color: var(--ta-nav-mobile-primary-link-active-color);
        background: var(--ta-nav-mobile-primary-link-active-bg);
        box-shadow: inset var(--ta-nav-mobile-primary-link-active-accent-width) 0 0 var(--ta-nav-mobile-primary-link-active-accent-color);
        border-bottom: none;
    }

    .ta-mobile-nav__group--context .ta-menu a {
        padding-block: var(--ta-nav-mobile-context-link-padding-block);
        font-size: var(--ta-nav-mobile-context-link-font-size);
        font-weight: var(--ta-nav-mobile-context-link-font-weight);
        color: var(--ta-nav-mobile-context-link-color);
    }

    .ta-mobile-nav__group--context .ta-menu .current-menu-item > a,
    .ta-mobile-nav__group--context .ta-menu .current-menu-ancestor > a,
    .ta-mobile-nav__group--context .ta-menu .current_page_item > a,
    .ta-mobile-nav__group--context .ta-menu .current-page-ancestor > a {
        font-weight: var(--ta-nav-mobile-context-link-active-font-weight);
        color: var(--ta-nav-mobile-context-link-active-color);
        background: var(--ta-nav-mobile-context-link-active-bg);
        box-shadow: none;
        border-bottom: var(--ta-nav-mobile-context-link-active-underline-thickness) solid var(--ta-nav-mobile-context-link-active-underline-color);
    }

    .ta-mobile-nav__group--primary .ta-mobile-nav__label {
        display: var(--ta-nav-mobile-primary-group-label-display);
    }

    .ta-mobile-nav__group--context .ta-mobile-nav__label {
        display: var(--ta-nav-mobile-context-group-label-display);
    }

    .ta-mobile-nav {
        display: grid;
        width: 100%;
        box-sizing: border-box;
        gap: 0;
    }


    .ta-mobile-nav__group + .ta-mobile-nav__group {
        margin-top: var(--ta-nav-mobile-group-stack-gap);
    }

    .ta-mobile-nav__group--primary .ta-menu a {
        padding-left: var(--ta-nav-mobile-primary-link-padding-inline-start);
    }
    .ta-burger {
        min-height: var(--ta-nav-mobile-burger-size);
        min-width: var(--ta-nav-mobile-burger-size);
        background: var(--ta-nav-mobile-burger-bg);
    }

    .ta-mobile-account-control,
    .ta-account-toggle.ta-mobile-account-control {
        flex: 0 0 auto;
        width: var(--ta-nav-mobile-account-toggle-size);
        height: var(--ta-nav-mobile-account-toggle-size);
        background: var(--ta-nav-mobile-burger-bg);
    }

    .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,
    .ta-account-icon-link.ta-mobile-account-control:focus,
    .ta-account-icon-link.ta-mobile-account-control:focus-visible {
        color: var(--ta-nav-header-control-color);
        background: var(--ta-nav-mobile-burger-bg);
        border-color: var(--ta-nav-header-control-border-color);
    }

    .ta-account-icon-link.ta-mobile-account-control .ta-account-icon-link__icon,
    .ta-account-icon-link.ta-mobile-account-control .ta-account-icon-link__icon svg {
        display: inline-flex;
        color: currentColor;
        opacity: 1;
        visibility: visible;
    }

    .ta-mobile-account-control,
    .ta-mobile-account-control:link,
    .ta-mobile-account-control:visited,
    .ta-mobile-account-control:hover,
    .ta-mobile-account-control:focus,
    .ta-mobile-account-control:focus-visible,
    .ta-mobile-account-control:active,
    .ta-account-toggle.ta-mobile-account-control,
    .ta-account-toggle.ta-mobile-account-control:hover,
    .ta-account-toggle.ta-mobile-account-control:focus,
    .ta-account-toggle.ta-mobile-account-control:focus-visible,
    .ta-account-toggle.ta-mobile-account-control:active {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: var(--ta-nav-mobile-account-toggle-size);
        min-height: var(--ta-nav-mobile-account-toggle-size);
        line-height: 1;
        vertical-align: top;
        transform: none;
        box-sizing: border-box;
    }

    .ta-mobile-account-control .ta-account-icon-link__icon,
    .ta-mobile-account-control .ta-account-toggle__icon,
    .ta-mobile-account-control svg {
        display: block;
        flex: 0 0 auto;
        transform: none;
    }

    .ta-mobile-account-control .ta-account-initials {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        transform: none;
    }



    /* =========================
       MOBILE ACCOUNT DRAWER
    ========================= */

    .ta-account-panel {
        position: fixed;
        top: var(--ta-account-panel-mobile-top, var(--ta-nav-mobile-header-height, 64px));
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 7;
        display: block;
        background: var(--ta-nav-mobile-drawer-overlay-bg);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        transition: opacity var(--ta-nav-mobile-drawer-transition), visibility 0s linear var(--ta-nav-mobile-drawer-transition);
    }

    body.admin-bar .ta-account-panel {
        top: var(--ta-account-panel-mobile-top, calc(var(--ta-nav-mobile-header-height, 64px) + var(--ta-header-admin-offset-mobile, 46px)));
    }

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

    body.ta-account-panel-open .ta-account-panel,
    .ta-account-panel.is-opening,
    .ta-account-panel.is-open,
    .ta-account-panel.is-closing {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition-delay: 0s;
    }

    .ta-account-panel__inner {
        position: absolute;
        top: calc(-1 * var(--ta-nav-mobile-drawer-top-overlap, 4px));
        right: 0;
        bottom: auto;
        left: auto;
        width: var(--ta-nav-mobile-drawer-width);
        max-width: 100%;
        max-height: calc(100dvh - var(--ta-account-panel-mobile-top, var(--ta-nav-mobile-header-height, 64px)) + var(--ta-nav-mobile-drawer-top-overlap, 4px));
        min-height: auto;
        box-sizing: border-box;
        margin: 0;
        padding-block: var(--ta-nav-mobile-drawer-padding-block-start) var(--ta-nav-mobile-drawer-padding-block-end);
        padding-inline: var(--ta-nav-mobile-group-stack-gap);
        overflow-x: hidden;
        overflow-y: auto;
        border-top: 0;
        border-left: 1px solid var(--ta-nav-mobile-drawer-border-color);
        background: var(--ta-nav-mobile-drawer-bg);
        box-shadow: var(--ta-nav-mobile-drawer-shadow);
        transform: translateX(100%);
        transition: transform var(--ta-nav-mobile-drawer-transition);
    }

    body.ta-account-panel-open .ta-account-panel__inner,
    .ta-account-panel.is-opening .ta-account-panel__inner,
    .ta-account-panel.is-open .ta-account-panel__inner {
        transform: translateX(0);
    }

    .ta-account-panel.is-closing .ta-account-panel__inner {
        transform: translateX(100%);
    }

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

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

    .ta-account-panel__user,
    .ta-account-panel__group {
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        padding: var(--ta-nav-mobile-context-group-padding-top) var(--ta-nav-mobile-context-group-padding-inline) var(--ta-nav-mobile-context-group-padding-bottom);
        border: 1px solid var(--ta-nav-mobile-context-group-border-color, transparent);
        border-radius: var(--ta-nav-mobile-group-radius, var(--ta-radius));
        background: var(--ta-nav-mobile-context-group-bg);
    }

    .ta-account-panel__user {
        display: flex;
        align-items: center;
        gap: var(--ta-account-drawer-user-gap);
        margin: 0 0 var(--ta-nav-mobile-group-stack-gap);
    }

    .ta-account-panel__avatar {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: var(--ta-account-drawer-avatar-size);
        height: var(--ta-account-drawer-avatar-size);
        border-radius: var(--ta-radius-pill);
        background: var(--ta-account-drawer-avatar-bg);
        color: var(--ta-nav-mobile-context-link-color, #fff);
        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: var(--ta-account-drawer-avatar-font-size);
        line-height: 1;
    }

    .ta-account-panel__user-text {
        display: grid;
        gap: var(--ta-account-drawer-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-utility-panel-link-color);
        font-size: var(--ta-account-drawer-user-name-font-size);
        font-weight: var(--ta-font-weight-semibold, 600);
        line-height: 1.2;
    }

    .ta-account-panel__user-email {
        color: var(--ta-nav-mobile-context-link-color, #fff);
        font-size: var(--ta-account-drawer-user-email-font-size);
        line-height: 1.2;
        opacity: var(--ta-account-drawer-user-email-opacity);
    }

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

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

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

    .ta-account-panel__menu a {
        display: flex;
        align-items: center;
        gap: var(--ta-account-drawer-link-gap);
        min-height: 0;
        padding-block: var(--ta-nav-mobile-context-link-padding-block);
        padding-inline: var(--ta-nav-mobile-menu-inline-padding);
        border-radius: var(--ta-nav-mobile-link-radius, var(--ta-radius-sm));
        color: var(--ta-utility-panel-link-color);
        text-decoration: none;
        line-height: var(--ta-nav-mobile-menu-line-height);
        font-size: var(--ta-nav-mobile-context-link-font-size);
        font-weight: var(--ta-nav-mobile-context-link-font-weight);
        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-nav-mobile-link-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: var(--ta-nav-header-focus-outline-offset);
        box-shadow: var(--ta-nav-mobile-link-focus-ring);
    }

    .ta-account-panel__primary-link {
        font-weight: var(--ta-utility-panel-link-primary-font-weight);
    }

    .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-drawer-icon-box-size);
        height: var(--ta-account-drawer-icon-box-size);
        color: var(--ta-nav-mobile-context-link-color, #fff);
        opacity: 1;
    }

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

    .ta-account-panel__menu a:hover .ta-account-panel__item-icon,
    .ta-account-panel__menu a:focus-visible .ta-account-panel__item-icon {
        opacity: 1;
    }
}

@media (min-width: 901px) {
    .ta-context-bar .ta-mobile-account-control {
        display: none;
    }
}