/* Structural layout: the shell, the content container, the navbar and the footer. */
.l-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.l-main {
    flex: 1;
    padding-block: var(--app-space-5);
}

.l-container {
    width: min(100% - 2rem, 1120px);
    margin-inline: auto;
}

/* Vertical rhythm for a run of blocks. */
.l-stack > * + * {
    margin-block-start: var(--app-space-4);
}

/* Long-form text: imprint, privacy, anything read rather than scanned. */
/* Centred, not flush left: the reading column is much narrower than the
   container, and left-aligning it against a 1120px shell puts the card in a
   corner while the front page is a centred column. */
.l-prose {
    max-width: 68ch;
    margin-inline: auto;
}

.l-prose h2 {
    margin-block-start: var(--app-space-6);
    margin-block-end: var(--app-space-2);
}

.l-prose h3 {
    margin-block-start: var(--app-space-5);
    margin-block-end: var(--app-space-2);
}

.l-prose p,
.l-prose ul,
.l-prose ol,
.l-prose dl {
    margin-block-end: var(--app-space-4);
}

.l-center {
    display: flex;
    align-items: center;
}

/* --- Navbar --------------------------------------------------------------
   Bootstrap's collapse toggler is gone. This is a flex row that wraps; on a
   narrow screen the actions drop to a second line, which needs no JavaScript
   and cannot get stuck half-open. */
/* --- Footer -------------------------------------------------------------
   The only navigation the site has. There is no navbar: what one would carry --
   the way home, the language switcher, signing in and out -- lives here, so the
   chrome pages and the Linktree share one bar instead of keeping two in step.

   Centred and understated, because that is the shape the Linktree already had
   and the shape a footer should have when it is the whole of the navigation.

   --footer-ink is what lets one rule serve both grounds: the Linktree sets it to
   the member's own ink, since the footer sits on their gradient. */
.site-footer {
    margin-block-start: var(--app-space-7);
    padding: var(--app-space-5) var(--app-space-4);
    color: var(--footer-ink, var(--app-muted));
    font-size: var(--app-text-sm);
    text-align: center;
}

.site-footer p {
    margin: 0;
}

.site-footer__line + .site-footer__line {
    margin-block-start: var(--app-space-1);
}

.site-footer a,
.site-footer__link {
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Switching language and signing out change state, so both are POST forms with
   a CSRF token rather than links -- but they belong in the row as one more
   entry, so the button is stripped back to look like the anchors beside it. */
.site-footer__link {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.site-footer__separator {
    padding-inline: var(--app-space-2);
    opacity: 0.6;
}

.site-footer__nav {
    margin-block-start: var(--app-space-1);
}

/* Inline, so links and forms sit in one run of text with the separators between
   them. A flex row would make each form its own box and, worse, put a generated
   separator inside the anchors, where it would be underlined with them. */
.site-footer__nav form {
    display: inline;
}

/* The language switch is one of those forms. It had a stylesheet of its own for
   a flag image and a pill; both are gone, and one rule does not earn a file. */
.app-language-switcher {
    display: inline;
}

.site-footer__version {
    margin-block-start: var(--app-space-3);
    opacity: 0.45;
    font-size: var(--app-text-xs);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

/* --- Utilities ----------------------------------------------------------- */
.u-muted {
    color: var(--app-muted);
}

.u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    margin: -1px;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .l-container {
        width: min(100% - 1rem, 1120px);
    }
}

/* --- Auth pages ----------------------------------------------------------
   allauth leaf templates fill the `content` block directly, and the layout
   they extend is a pass-through whose own block a child overrides -- so the
   narrow column cannot be a wrapper element. It is set on the body instead,
   from `allauth/layouts/base.html`. */
.page-auth .l-main {
    width: min(100% - 2rem, 30rem);
    padding: var(--app-space-6);
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    margin-block: var(--app-space-7);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    backdrop-filter: blur(18px);
    flex: 0 0 auto;
}

.page-auth .l-shell {
    justify-content: center;
}

.page-auth .l-main p {
    margin-block-end: var(--app-space-4);
}

.page-auth .l-main label {
    display: block;
    margin-block-end: var(--app-space-1);
    color: var(--app-muted);
    font-size: var(--app-text-sm);
    font-weight: 650;
}

.page-auth .l-main label[for$="remember"] {
    display: inline-block;
    margin-inline-end: var(--app-space-2);
}

.page-auth .l-main input[type="checkbox"] {
    display: inline-block;
    width: auto;
}

/* A page that is looked at rather than read -- the map -- gets the window
   instead of the 1120px reading column. */
.l-wide {
    width: min(100% - 2rem, 2200px);
    margin-inline: auto;
}