/*
 * Layout: the page skeleton — header, main, footer, and the containers that
 * hold them.
 *
 * Structure only. Nothing here decides what a button or a flash message looks
 * like; that is components.css. The split matters because layout is the part
 * that has to survive a 320px screen and a translated string at the same time.
 *
 * Mobile-first: every rule below is the narrow-screen rule. The only media
 * queries are min-width, and they add rather than correct.
 */

body {
    /* A sticky footer without a fixed height anywhere: the page column fills
       the viewport, main takes the slack, and the footer sits at the bottom
       even on a nearly empty page such as an error page. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.site-header,
.site-footer,
.page {
    width: 100%;
}

.site-header__inner,
.site-footer__inner,
.page {
    max-width: var(--container-width);
    margin-inline: auto;
    padding-inline: var(--container-padding);
}

/* ---- header ------------------------------------------------------------- */

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

.site-header__inner {
    /* Stacked on a phone. Three rows of readable text beats one row of
       truncated text, and Spanish navigation labels are long enough that a
       single row at 320px would have to truncate something. */
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-block: var(--space-3);
}

@media (min-width: 40em) {
    .site-header__inner {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--space-4);
    }
}

/* ---- main --------------------------------------------------------------- */

.page {
    flex: 1;
    padding-block: var(--space-5) var(--space-7);
}

/* The skip-link target. Focusing a <main> that is not natively focusable does
   nothing without tabindex="-1", and the outline would otherwise draw a ring
   around the whole page. */
.page:focus {
    outline: none;
}

/* ---- footer ------------------------------------------------------------- */

.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

.site-footer__inner {
    padding-block: var(--space-4);
}

.site-footer p {
    margin-block: 0 var(--space-2);
}

.site-footer p:last-child {
    margin-bottom: 0;
}

/* ---- narrow content column ---------------------------------------------- */

/* Forms read better narrow than wide: a 60rem-wide login form makes the eye
   travel across an empty page to reach a field. */
.panel {
    max-width: 30rem;
}