/*
 * Shared site shell for python-type-checking.com: the page header, the site
 * navigation, the footer, and the small set of components the homepage and
 * the two dashboards have in common.
 *
 * Scope discipline: nothing in this file styles a chart, a data table, or any
 * dashboard-specific layout. Those stay in each dashboard's own stylesheet so
 * that a change here cannot move a chart. There is deliberately no global
 * reset either: the dashboards already ship one, and adding a second could
 * change their rendering.
 */

/* ---------------------------------------------------------------- shell -- */

.site-header {
    background: var(--color-bg-secondary);
    border-bottom: 1px solid var(--color-border);
}

/*
 * Only the homepage pins its header. The two dashboards already have their own
 * sticky section nav (`.nav-bar`, z-index 100, top 0); adding a second sticky
 * bar at the same offset would make them overlap, so the dashboards keep the
 * header static and their existing scroll behaviour is unchanged.
 */
.site-header--sticky {
    position: sticky;
    top: 0;
    z-index: 50;
}

.site-header__inner {
    max-width: var(--width-page);
    margin: 0 auto;
    padding: var(--space-3) var(--space-5);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.site-header__brand {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-text-bright);
    text-decoration: none;
    white-space: nowrap;
}

.site-header__brand:hover,
.site-header__brand:focus-visible {
    color: var(--color-accent);
}

.site-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-left: auto;
}

.site-nav a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-size: 0.9375rem;
    padding: var(--space-1) 0;
    border-bottom: 2px solid transparent;
}

.site-nav a:hover,
.site-nav a:focus-visible {
    color: var(--color-text-bright);
    border-bottom-color: var(--color-accent);
}

.site-nav a[aria-current="page"] {
    color: var(--color-text-bright);
    border-bottom-color: var(--color-accent);
}

/*
 * Sticky navigation must not cover the target of an anchor link. Scoped to
 * :target so it only applies to an element actually navigated to. A blanket
 * [id] rule would also shift dashboard table rows and chart containers.
 */
:target {
    scroll-margin-top: 88px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--color-accent);
    color: #04121f;
    padding: var(--space-3) var(--space-4);
    border-radius: 0 0 var(--radius-md) 0;
    font-weight: 600;
    z-index: 100;
}

.skip-link:focus {
    left: 0;
}

/* One visible focus treatment everywhere, including for keyboard users who
   land on a link inside a dark card. */
a:focus-visible,
button:focus-visible,
select:focus-visible,
input:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.site-footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-9);
    padding: var(--space-7) var(--space-5);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.site-footer__inner {
    max-width: var(--width-page);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    justify-content: space-between;
}

.site-footer a {
    color: var(--color-accent);
}

.site-footer__disclosure {
    max-width: var(--width-prose);
}

/* ----------------------------------------------------------- components -- */

.link-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1.3;
}

.link-button--primary {
    background: var(--color-accent);
    color: #04121f;
}

.link-button--primary:hover,
.link-button--primary:focus-visible {
    background: #79b8ff;
}

.link-button--secondary {
    background: var(--color-bg-tertiary);
    color: var(--color-text-bright);
    border-color: var(--color-border);
}

.link-button--secondary:hover,
.link-button--secondary:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.site-card {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
}

.site-notice {
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
}

.site-notice--archive {
    border-left-color: var(--color-warning);
}

.site-notice p {
    margin: 0;
}

.site-notice p + p {
    margin-top: var(--space-2);
}

/* ---------------------------------------------------------------- mobile - */

@media (max-width: 720px) {
    .site-header__inner {
        padding: var(--space-3) var(--space-4);
        gap: var(--space-2);
    }

    .site-nav {
        margin-left: 0;
        width: 100%;
        gap: var(--space-4);
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .site-footer {
        padding: var(--space-6) var(--space-4);
    }

    :target {
        scroll-margin-top: 130px;
    }
}

/* ------------------------------------------------------- reduced motion -- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}