/*
 * The site footer.
 *
 * The mirror of header.css and deliberately quieter than it: a footer is the
 * thing you reach when the page did not have what you wanted, so it is legible
 * and unremarkable rather than a second navigation competing with the first.
 *
 * ⚠️ Layout lives here, never on the elements. A `_display` setting generates a
 * `#brxe-{id}

` rule, which is ID specificity and beats every class in this file.
 * The load more button lost its entire hover state to exactly that, and the
 * header's own comment says the desktop nav stayed flex at 375px for the same
 * reason.
 *
 * Every value is a design token, so the next site changes the token.
 */

.oview-footer {
	/* Edge to edge, like the header: the Bricks section wrapping this is a flex
	   container, so without an explicit width it sizes to its content. */
	width: 100%;
	margin-top: var(--space-2xl);
	border-top: 1px solid var(--color-border);
	background: var(--color-surface);
}

.oview-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-l);
	width: 100%;
	/* The same 1280px the header and the content share. A footer that runs wider
	   than the page above it reads as a different site. */
	max-width: 1280px;
	margin-inline: auto;
	/* Vertical only: the section already carries the gutter, and a second one
	   here put the footer's words 10px inside the header's (D222). */
	padding-block: var(--space-xl);
}

/*
 * ⚠️ `auto-fit` with a minimum, not a fixed column count. The columns are
 * declared in PHP and somebody will add a fourth; a hardcoded `repeat(3, 1fr)`
 * would silently squash it rather than wrap, and nothing would report that.
 */
.oview-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--space-l);
}

.oview-footer__column {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}

/*
 * These are h2 elements, so the browser's own sizing would make them larger than
 * the page's own headings. The size is a design decision and the tag is a
 * document-structure one; they are set separately on purpose.
 */
.oview-footer__heading {
	margin: 0 0 var(--space-2xs);
	font-size: var(--text-xs);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.oview-footer__link {
	/* 44px is the tap-target floor check-mobile.js enforces, and a column of
	   links at the natural line height is about 19px. */
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: var(--text-xs);
	line-height: 1.3;
	color: var(--color-text-body);
	text-decoration: none;
}

/*
 * ⚠️ Underline on hover, not a colour change. A footer link that only changes
 * hue is the one place on a site where contrast tends to fail quietly, and an
 * underline is the state that survives being wrong about the colour.
 */
.oview-footer__link:hover,
.oview-footer__link:focus-visible {
	color: var(--color-text);
	text-decoration: underline;
}

.oview-footer__bottom {
	padding-top: var(--space-m);
	border-top: 1px solid var(--color-border);
	font-size: var(--text-xs);
	color: var(--color-text-muted);
}

@media (max-width: 600px) {
	/*
	 * Two columns rather than one. Three link lists stacked is a very long
	 * scroll past content nobody came for.
	 */
	.oview-footer__columns {
		grid-template-columns: repeat(2, 1fr);
	}
}