/**
 * Layout: page structure, containers, grid utilities.
 * Component-level styling (cards, buttons, etc.) lives in assets/css/components/.
 */

.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

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

.container--wide {
	max-width: var(--wide-width);
}

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

.site-header__inner {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	flex-wrap: wrap;
}

/*
 * Between the mobile drawer (40rem) and where the clamped nav
 * comfortably sits inline beside the logo, an in-between "wraps but
 * isn't mobile yet" zone exists — rather than leave that to whatever
 * flex-wrap happens to do (nav clustered left, not filling the row,
 * logo dropping below it at an arbitrary spot), make it deliberate:
 * nav gets its own full-width row with links spread edge to edge,
 * logo stays right-aligned on the row below it, and the gap between
 * the two rows is tighter than the default row/column gap.
 */
@media (min-width: 40.0625rem) and (max-width: 56rem) {
	.site-header__inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-2);
	}

	.site-nav ul {
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.site-branding {
		align-self: flex-end;
	}
}

/*
 * The divider line spans the full page width; the button inside it stays
 * aligned to the same container as the rest of the header via the nested
 * __inner element. Centered on the line via translateY(-50%), which
 * shifts the button up by exactly half of ITS OWN rendered height —
 * self-correcting for any button size, unlike a fixed negative margin
 * guessed to match one specific button height.
 */
.site-header__divider {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-2);
}

.site-header__divider .site-header__divider-inner {
	position: relative;
	top: 0;
	transform: translateY(-50%);
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.site-header__divider .button--pill {
	display: inline-block;
}

.site-branding {
	text-align: right;
}

/*
 * Fluid between 12rem (20rem/320px viewport) and the original fixed
 * 380px/23.75rem (72rem/1152px, this design system's --wide-width) —
 * shrinks proactively as the screen narrows instead of staying at
 * full size until it physically doesn't fit (which is all max-width:
 * 100% alone would do). Literal rem bounds, not var() — see the h1/h2
 * comment in base.css for why a var() nested inside clamp() doesn't
 * work reliably when parsed from a stylesheet.
 */
.site-branding__logo {
	display: block;
	height: auto;
	width: clamp(12rem, 7.48rem + 22.6vw, 23.75rem);
	max-width: 100%;
}

.custom-logo-link img {
	display: block;
	height: auto;
	width: clamp(12rem, 7.48rem + 22.6vw, 23.75rem);
	max-width: 100%;
}

.site-main {
	flex: 1;
	padding-block: var(--space-2);
}

.site-footer {
	margin-top: var(--space-6);
	background: var(--color-paper-dim);
}

/*
 * Default to the wide container — matches the old site's landing/listing
 * pages (Home, About, Books, Contact, archives). Long-form reading pages
 * (single article/blog post) narrow it back down below, via WordPress's
 * own .single-{post_type} body classes — never a page-ID selector.
 */
.entry-header {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.entry-content {
	max-width: var(--wide-width);
	margin-inline: auto;
	padding-inline: var(--space-4);
}

.single-post .entry-header,
.single-post .entry-content,
.single-portfolio .entry-header,
.single-portfolio .entry-content {
	max-width: var(--content-width);
}

.entry-content > img,
.entry-content > figure {
	margin-block: var(--space-4);
}

/* Mobile-first: 1 column by default, more added as space allows. */
.grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

/* Matches the site's unified mobile threshold (nav.css, article-layout.css,
   content.css's .alignright/.alignleft) — below it, everything should
   read as "mobile", not just the header. */
@media (min-width: 40rem) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/*
 * .grid--3: preview strips (e.g. Home's Recent Articles) that show a
 * fixed 3 items and want them in one row — the plain .grid stays capped
 * at 2 columns for the full Articles archive.
 *
 * .grid--4 at this same tier: result sets with no fixed item count
 * (search results' Articles section) — goes wider than .grid--3 since
 * there's no risk of a half-empty last row looking broken the way a
 * fixed 3-item preview would. Widens further to 4-up at 64rem below.
 *
 * 48rem, not one of the other established tiers (40rem/56rem/64rem) —
 * 3 columns of card content need more room per card than 40rem
 * comfortably gives, but don't need to wait for the full 64rem desktop
 * tier either.
 */
@media (min-width: 48rem) {
	.grid--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.grid--4 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 64rem) {
	.grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 40rem) {
	.site-main {
		padding-block: var(--space-5);
	}

	/*
	 * Keep the line-straddle trick (position:relative + translateY(-50%),
	 * see the comment above .site-header__divider) — the line still needs
	 * to run directly behind the button — just center it horizontally too,
	 * and push the line itself further from the logo above for more
	 * breathing room.
	 */
	.site-header__divider {
		margin-top: var(--space-4);
	}

	.site-header__divider-inner {
		display: flex;
		justify-content: center;
	}

	/*
	 * Logo centered in the row. The menu/close buttons don't need a
	 * reserved column here at all — they're position: absolute against
	 * .site-header itself (see below and nav.css), independent of this row.
	 */
	.site-header__inner {
		justify-content: center;
	}

	.site-branding {
		min-width: 0;
	}

	/* Positioning anchor for .menu-toggle/.menu-close's top:0; right:0
	   (see nav.css) — hangs off the header's own top-right corner. */
	.site-header {
		position: relative;
	}
}