/*
 * PHASE global route chrome.
 *
 * One Header and one primary navigation DOM serve every breakpoint.
 * Navigation remains visible until JavaScript explicitly confirms that the
 * progressive mobile control is available.
 */

.site-header {
    position: sticky;
    z-index: var(--layer-sticky);
    inset-block-start: 0;
    color: var(--text-inverse);
    background-color: var(--surface-dark);
    border-block-end:
        var(--border-width-1)
        solid
        var(--border-inverse);
}

.site-header__inner {
    display: grid;
    gap: var(--space-control-gap);
    align-items: center;
    min-block-size: var(--header-height-current);
    padding-block: var(--space-stack-xs);
}

.site-branding {
    display: inline-flex;
    align-items: center;
    min-inline-size: 0;
    min-block-size: var(--control-target-min);
    color: currentColor;
    font-weight: var(--phase-font-weight-emphasis);
    text-decoration-line: none;
}

.site-branding:hover,
.site-branding[aria-current="page"] {
    text-decoration-line: underline;
}

.site-branding[aria-current="page"] {
    text-decoration-style: double;
    text-decoration-thickness: var(--border-width-2);
}

.navigation-toggle {
    display: none;
    align-items: center;
    gap: var(--space-control-gap);
    min-block-size: var(--control-target-min);
    padding-block: var(--space-control-block);
    padding-inline: var(--space-control-inline);
    color: currentColor;
    background-color: var(--surface-transparent);
    border:
        var(--border-width-1)
        solid
        currentColor;
}

.navigation-toggle__indicator {
    display: inline-block;
    inline-size: var(--space-component-xs);
    block-size: var(--space-component-xs);
    border-inline-end:
        var(--border-width-1)
        solid
        currentColor;
    border-block-end:
        var(--border-width-1)
        solid
        currentColor;
    transform: rotate(45deg);
    transform-origin: center;
}

.navigation-toggle__label {
    white-space: nowrap;
}

.navigation-toggle[aria-expanded="true"]
.navigation-toggle__indicator {
    transform: rotate(-135deg);
}

html.has-navigation-enhancement
.navigation-toggle {
    display: inline-flex;
}

.primary-navigation,
.header-cta {
    grid-column: 1 / -1;
}

.primary-navigation__list,
.footer-navigation__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-control-gap);
    padding: 0;
    margin: 0;
    list-style: none;
}

.primary-navigation__list {
    flex-direction: column;
}

.primary-navigation a,
.footer-navigation a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--control-target-min);
    color: currentColor;
    text-decoration-thickness: var(--border-width-1);
    text-underline-offset: var(--space-inline-xs);
}

.primary-navigation a {
    padding-inline: var(--space-control-inline);
}

.primary-navigation a[aria-current="page"],
.footer-navigation a[aria-current="page"] {
    font-weight: var(--phase-font-weight-emphasis);
    text-decoration-line: underline;
    text-decoration-style: double;
    text-decoration-thickness: var(--border-width-2);
}

.header-cta {
    display: inline-flex;
    align-items: center;
    justify-self: start;
}

.header-cta--current {
    min-block-size: var(--control-target-min);
    padding-block: var(--space-control-block);
    padding-inline: var(--space-control-inline);
    color: var(--text-inverse);
    background-color: var(--surface-transparent);
    border:
        var(--border-width-1)
        solid
        currentColor;
    border-radius: var(--phase-radius-interactive);
    text-decoration-line: none;
    border-style: double;
    border-width: var(--border-width-2);
    cursor: default;
}

html.has-navigation-enhancement
.site-header[data-navigation-state="closed"]
:where(
    .primary-navigation,
    .header-cta
) {
    display: none;
}

.site-main {
    min-inline-size: 0;
}

.site-footer {
    color: var(--text-inverse);
    background-color: var(--surface-dark);
    border-block-start:
        var(--border-width-1)
        solid
        var(--border-inverse);
}

.site-footer__inner {
    display: grid;
    gap: var(--space-component-md);
    padding-block: var(--section-space-xs);
}

.site-footer__brand {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-block-size: var(--control-target-min);
    color: currentColor;
    font-weight: var(--phase-font-weight-emphasis);
    text-decoration-line: none;
}

.site-footer__brand:hover {
    text-decoration-line: underline;
}

.footer-navigation__list {
    column-gap: var(--space-inline-lg);
}

.footer-disclosure,
.footer-meta {
    max-inline-size: var(--phase-type-caption-measure);
    margin: 0;
}

.footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-inline-sm);
}

.footer-meta a {
    color: currentColor;
}