/* Chrome that is shared between base-derived pages and the standalone documents.
 * Note: CSS variables defined in root.css.
 *
 * This sheet exists because main.css is loaded only by base.html, and two pieces of
 * chrome are needed on both sides of that line:
 *
 *   .site-footer      Audit #3753 fixes BUG-2977 — a sitewide footer. base.html had none
 *                     at all, so an anonymous visitor on / or /stories had no path to the
 *                     terms or privacy policy: the only legal links in the whole product
 *                     were the orphaned /welcome page's fineprint and the register form's
 *                     small print, which you have to be signing up to read.
 *
 *   .skip-to-content  Audit #3752 fixes BUG-2972 — the three standalone auth documents
 *                     get no landmark navigation and no skip link because they load
 *                     root.css and auth.css only. The rule is a deliberate mirror of
 *                     main.css:5-24; welcome.css:33-52 already carries the same mirror for
 *                     the same reason, so this is the established shape for a standalone
 *                     document rather than a new one.
 */

/* --- Skip link, for documents that do not load main.css ------------------- */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--primary);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-md, 10px);
    z-index: 9999;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 1rem;
    color: white;
    outline: 2px solid var(--primary-dark);
    outline-offset: 2px;
}

/* --- Sitewide footer ------------------------------------------------------ */
.site-footer {
    border-top: 1px solid var(--border);
    margin-block-start: 2rem;
    padding: 1.5rem 1rem;
    /* The mobile nav is fixed to the bottom of the viewport on narrow widths; without
       this the last row of footer links sits underneath it and cannot be tapped. */
    padding-block-end: calc(1.5rem + 64px);
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}

@media (min-width: 993px) {
    .site-footer {
        padding-block-end: 1.5rem;
    }
}

.site-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin: 0 auto 0.75rem;
    max-width: 60rem;
}

.site-footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    /* 44px minimum hit target: these are the only legal links on the page. */
    padding: 0.5rem 0.25rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.site-footer-links a:hover,
.site-footer-links a:focus-visible {
    color: var(--text);
    text-decoration: underline;
}

.site-footer-legal {
    margin: 0;
    color: var(--text-muted);
    opacity: 0.8;
}

/* --- Screen-reader-only utility -------------------------------------------
   Same visually-hidden-but-accessible recipe discovery.css already carries;
   this copy is here because base.html (every base-derived page, not just the
   ones that load discovery.css) needs it for the header locale label below. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Anonymous header auth affordances (IMP-0725) --------------------------
   base.html's account menu carries login/register/locale-switch links for a
   logged-out visitor, but all three were reachable only by opening the '?'
   avatar menu first. These are visible without that click; the menu itself is
   untouched, and still there for narrow viewports where this row is hidden. */
.header-auth {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.header-locale-picker {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.header-locale-picker select {
    min-width: 3.5rem;
    max-width: 7rem;
    color: var(--text);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.35rem;
    padding: 0.3rem 0.25rem;
    font-size: 0.85rem;
}

@media (max-width: 640px) {
    .header-auth {
        gap: 0.35rem;
    }
    .header-locale-picker {
        display: none;
    }
}

@media (max-width: 460px) {
    .header-auth #header-login-link {
        display: none;
    }
}