/*
 * Page frame: header, the three-column body, the footer stats bar.
 *
 * The mockup's desktop layout is sidebar / feed / rail. On a phone that becomes one
 * column, and the *order* matters more than the stacking: a reader who came for an answer
 * gets the feed, not a list of fourteen categories they have to scroll past. So the
 * columns are ordered feed-first in the source and re-ordered with grid on wide screens,
 * which also happens to put the page's main content first for a screen reader.
 */

.slf-container {
	width: 100%;
	max-width: var(--slf-container);
	margin: 0 auto;
	padding: 0 var(--slf-space-4);
}

/* ── Header ─────────────────────────────────────────────────────────────────── */

.slf-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--slf-bg-header);
	border-bottom: 1px solid var(--slf-border);
}

/*
 * `flex-wrap` here is load-bearing, not defensive. At 320px the brand, the theme switch,
 * the account button and the menu button do not fit on one line — measured at 37px over,
 * which is a horizontal scrollbar on the whole document and a straight NF-02 failure. With
 * wrapping the action group drops to a second row instead, so nothing is hidden and
 * nothing overflows. `min-width: 0` on the brand is the other half: a flex item defaults
 * to `min-width: auto`, so the site name refuses to wrap and pushes the row wide however
 * narrow the screen gets.
 */
.slf-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--slf-space-2) var(--slf-space-4);
	min-height: var(--slf-header-height);
	padding-block: var(--slf-space-2);
}

.slf-brand {
	display: flex;
	align-items: center;
	gap: var(--slf-space-3);
	text-decoration: none;
	color: var(--slf-text);
	margin-right: auto;
	min-width: 0;
	flex: 1 1 12rem;
}

.slf-brand > span {
	min-width: 0;
}

.slf-brand__mark {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex: 0 0 40px;
	border-radius: var(--slf-radius);
	background: var(--slf-accent);
	color: var(--slf-on-accent);
}

.slf-brand__name {
	display: block;
	font-size: var(--slf-text-lg);
	font-weight: 700;
	line-height: 1.2;
}

.slf-brand__tagline {
	display: block;
	font-size: var(--slf-text-xs);
	color: var(--slf-text-muted);
}

/*
 * The primary menu is a drawer below the header on phones and a row inside it on desktop.
 * It is a plain <ul> either way — the toggle only flips a class, so with JavaScript off
 * the menu is simply always visible rather than permanently unreachable.
 */
.slf-nav {
	display: none;
	width: 100%;
	order: 10;
	padding-bottom: var(--slf-space-3);
}

.slf-nav.is-open {
	display: block;
}

.slf-nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--slf-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.slf-nav a {
	display: block;
	padding: var(--slf-space-3);
	border-radius: var(--slf-radius);
	color: var(--slf-text-2);
	text-decoration: none;
}

.slf-nav a:hover,
.slf-nav .current-menu-item > a {
	background: var(--slf-surface-2);
	color: var(--slf-text);
}

.slf-header__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
	gap: var(--slf-space-2);
	margin-left: auto;
}

/*
 * The signed-in member's name is the one thing in the header that can be arbitrarily long
 * and is already implied by the avatar icon beside it, so it is the first thing to go when
 * space runs out. The link keeps its accessible name either way.
 */
@media (max-width: 30em) {
	.slf-user-name {
		display: none;
	}
}

.slf-nav-toggle {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	background: none;
	border: 1px solid var(--slf-border);
	border-radius: var(--slf-radius);
	cursor: pointer;
}

/* ── Body grid ──────────────────────────────────────────────────────────────── */

.slf-main {
	padding-block: var(--slf-space-5) var(--slf-space-7);
}

.slf-layout {
	display: grid;
	gap: var(--slf-space-5);
	grid-template-columns: minmax(0, 1fr);
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */

.slf-footer {
	border-top: 1px solid var(--slf-border);
	background: var(--slf-bg-header);
	padding-block: var(--slf-space-5);
}

.slf-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--slf-space-4);
}

.slf-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--slf-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.slf-stats__value {
	display: block;
	font-size: var(--slf-text-lg);
	font-weight: 700;
}

.slf-stats__label {
	display: block;
	font-size: var(--slf-text-sm);
	color: var(--slf-text-muted);
}

.slf-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--slf-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--slf-text-sm);
}

.slf-footer__links a {
	color: var(--slf-text-muted);
	text-decoration: none;
}

.slf-footer__links a:hover {
	color: var(--slf-text);
	text-decoration: underline;
}

/* ── Wider screens ──────────────────────────────────────────────────────────── */

@media (min-width: 48em) {
	.slf-container {
		padding: 0 var(--slf-space-5);
	}

	.slf-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.slf-footer__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

@media (min-width: 62em) {
	.slf-nav,
	.slf-nav.is-open {
		display: block;
		order: 0;
		width: auto;
		padding-bottom: 0;
	}

	.slf-nav ul {
		flex-direction: row;
		gap: var(--slf-space-2);
	}

	.slf-nav-toggle {
		display: none;
	}

	.slf-layout--feed-rail {
		grid-template-columns: minmax(0, 1fr) var(--slf-rail);
	}
}

@media (min-width: 80em) {
	/*
	 * Full three-column layout. `order` puts the category sidebar back on the left even
	 * though the feed comes first in the markup — the reading order stays feed-first for
	 * assistive technology and small screens, and only the visual order changes.
	 */
	.slf-layout--full {
		grid-template-columns: var(--slf-sidebar) minmax(0, 1fr) var(--slf-rail);
	}

	.slf-layout--full > .slf-sidebar {
		order: -1;
	}
}

/* ── Language switcher ──────────────────────────────────────────────────────── */

.slf-langs {
	display: flex;
	gap: 2px;
	padding: 2px;
	border: 1px solid var(--slf-border);
	border-radius: var(--slf-radius);
}

.slf-langs__item {
	display: inline-flex;
	align-items: center;
	/*
	 * Below the 44px target size used elsewhere, and knowingly: four of these sit in a
	 * header that already wraps at 320px, and the group as a whole is the target. They stay
	 * above 24px, which is WCAG 2.2's minimum for controls in an inline group.
	 */
	min-height: 32px;
	padding: 0 var(--slf-space-2);
	border-radius: 6px;
	color: var(--slf-text-muted);
	font-size: var(--slf-text-xs);
	font-weight: 700;
	text-decoration: none;
}

.slf-langs__item:hover {
	background: var(--slf-surface-2);
	color: var(--slf-text);
}

.slf-langs__item.is-current {
	background: var(--slf-accent);
	color: var(--slf-on-accent);
}