/*
Theme Name: RK Woods
Theme URI: https://rkwoodsworking.com/
Author: Metzae
Description: Custom theme for RK Woods Woodworking. Hand-written templates, no page builder. Red and black palette and display type recovered from the site's own Elementor element data. Spacing follows the Duum OS Covenant default: mobile-first, tight vertical rhythm.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rkwoods
*/

/* ---------------------------------------------------------------
   1. Tokens
   Palette and type come from the per-element settings the builder actually
   compiled to CSS, recovered from _elementor_data. The theme-level palette
   underneath it was never what this site rendered.
   --------------------------------------------------------------- */

:root {
	/* Recovered from the pre-migration _elementor_data, which is where the
	   real design lived. Astra's global palette was only the fallback beneath
	   the builder and never described what this site actually looked like. */
	--rk-red:         #c70909;   /* 33 uses, section backgrounds */
	--rk-red-dark:    #5e0606;   /* hero base */
	--rk-red-deep:    #200101;   /* overlays */
	--rk-red-bright:  #f22929;   /* gradient partner */
	--rk-red-hover:   #cc0606;
	--rk-ink:         #000000;   /* 69 uses */
	--rk-paper:       #f1e9e9;   /* 33 uses, body text on dark */
	--rk-heading:     #000000;
	--rk-text:        #3a3a3a;
	--rk-bg:          #ffffff;
	--rk-wash:        #f7f2f2;
	--rk-border:      #e4d9d9;

	--rk-font: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

	/* The old type ran far bigger than a default theme scale: 26 and 30px for
	   body headings, 43px for section titles, 100-113px on hero bands. Hero
	   sizes come per-section from --sec-h; these are the defaults. */
	--rk-h1: clamp(2rem, 1.4rem + 2.6vw, 2.6875rem);     /* 32 -> 43 */
	--rk-h2: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);    /* 24 -> 30 */
	--rk-h3: clamp(1.25rem, 1.15rem + 0.6vw, 1.625rem);  /* 20 -> 26 */
	--rk-body: 1rem;

	/* Covenant Theme rule 1: sections 24-40px, gaps 12-20px. Mobile is the
	   target view; desktop gets only slightly more air, not the 60-100px
	   most templates default to. */
	--rk-sec-y:  24px;
	--rk-gap:    16px;
	--rk-gap-sm: 12px;

	--rk-width: 1200px;
	--rk-measure: 68ch;
	--rk-radius: 4px;
}

@media (min-width: 768px) {
	:root {
		--rk-sec-y: 40px;
		--rk-gap:   20px;
	}
}

/* ---------------------------------------------------------------
   2. Base
   --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--rk-bg);
	color: var(--rk-text);
	font-family: var(--rk-font);
	font-size: var(--rk-body);
	font-weight: 400;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--rk-gap-sm);
	color: var(--rk-heading);
	font-weight: 500;
	line-height: 1.25;
	/* Covenant Theme rule 2: no stranded word on its own line. */
	text-wrap: balance;
}

h1 { font-size: var(--rk-h1); }
h2 { font-size: var(--rk-h2); letter-spacing: 0.5px; }
h3 { font-size: var(--rk-h3); letter-spacing: 0.5px; }
h4 { font-size: 1.125rem; }

p, li { text-wrap: pretty; }
p { margin: 0 0 var(--rk-gap-sm); }
p:last-child { margin-bottom: 0; }

a { color: var(--rk-red); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover, a:focus { color: var(--rk-red-hover); }

img, video, iframe, svg { max-width: 100%; height: auto; }
img { display: block; }

figure { margin: 0 0 var(--rk-gap); }
figcaption {
	margin-top: var(--rk-gap-sm);
	color: #6b7276;
	font-size: 0.875rem;
}

hr { margin: var(--rk-sec-y) 0; border: 0; border-top: 1px solid var(--rk-border); }

:focus-visible { outline: 2px solid var(--rk-red); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: -9999px;
	z-index: 999; padding: 10px 16px;
	background: var(--rk-red-deep); color: #fff;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* ---------------------------------------------------------------
   3. Layout
   --------------------------------------------------------------- */

.wrap {
	width: 100%;
	max-width: var(--rk-width);
	margin-inline: auto;
	padding-inline: var(--rk-gap);
}

.sec { padding-block: var(--rk-sec-y); }
.sec + .sec { padding-top: 0; }
.sec--wash { background: var(--rk-wash); }
.sec--wash + .sec { padding-top: var(--rk-sec-y); }

/* The section's own content stays on the site measure; the band itself runs
   full-bleed, which is how the original heroes read. */
.sec__inner {
	width: 100%;
	max-width: var(--rk-width);
	margin-inline: auto;
	padding-inline: var(--rk-gap);
}

/* --- Feature bands -------------------------------------------------------
   Backgrounds, overlays, heights and display sizes arrive as per-section
   custom properties written onto the element by the migration, since the
   builder's compiled stylesheet no longer exists. Each falls back to a sane
   default so a section missing one property still renders correctly. */

/* Doubled class deliberately: `.sec + .sec { padding-top: 0 }` earlier has two
   classes of specificity and would otherwise flatten the top padding of a
   coloured band that follows a plain one. */
.sec.sec--feature {
	position: relative;
	padding-block: clamp(32px, 6vw, 72px);
	background-color: var(--sec-bg, var(--rk-red));
	color: var(--sec-text, var(--rk-paper));
}

/* Same reasoning: a band with its own background needs its own padding. */
.sec.sec--partners,
.sec.sec--cards {
	padding-block: clamp(28px, 4.5vw, 56px);
}

.sec--feature + .sec { padding-top: var(--rk-sec-y); }
.sec--feature + .sec--feature { padding-top: clamp(32px, 6vw, 72px); }

.sec--media {
	background-image: var(--sec-img);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* The overlay sits between the photograph and the words so the display type
   stays readable over a busy image. Elementor keeps the overlay colour and its
   opacity as two separate controls; applying the colour at full strength turns
   a half-strength wash into a near-black slab that hides the photo entirely. */
.sec--feature::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sec-overlay, transparent);
	opacity: var(--sec-overlay-op, 1);
	pointer-events: none;
}

.sec--feature > .sec__inner {
	position: relative;
	z-index: 1;
}

.sec--feature h1,
.sec--feature h2,
.sec--feature h3 {
	color: var(--sec-h-color, #ffffff);
}

/* Hero headings carried their own size, up to 113px. Never let that value
   through unclamped on a phone: cap it against the viewport so a 113px word
   cannot force the page sideways. */
.sec--feature h1,
.sec--feature > .sec__inner > h2:first-child {
	font-size: min(var(--sec-h, var(--rk-h1)), 13vw);
	line-height: 1.1;
}

.sec--feature a { color: #ffffff; }
.sec--feature .btn { background: var(--rk-red); border-color: var(--rk-red); color: #fff; }
.sec--feature .btn:hover { background: var(--rk-red-hover); border-color: var(--rk-red-hover); }
.sec--feature figcaption { color: inherit; opacity: 0.85; }

/* --- Home page composition -----------------------------------------------
   Bands alternate light and dark so the page has rhythm instead of running as
   one continuous document. Each block earns its space: navigation is tiles
   with real photographs, the introduction is a two-column band, and the
   affiliate row is a proper strip with its disclosure as fine print. */

.eyebrow {
	margin: 0 0 var(--rk-gap-sm);
	color: var(--rk-red);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.section-title {
	margin-bottom: var(--rk-gap);
	font-size: var(--rk-h3);
}

/* Navigation tiles */

.tilegrid {
	display: grid;
	gap: var(--rk-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.tile {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--rk-bg);
	border: 1px solid var(--rk-border);
	border-radius: 6px;
	color: inherit;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.tile:hover,
.tile:focus-visible {
	transform: translateY(-3px);
	border-color: var(--rk-red);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.tile__media {
	display: block;
	overflow: hidden;
	background: var(--rk-wash);
	aspect-ratio: 16 / 9;
}

.tile__media img {
	width: 100%;
	height: 100%;
	/* Cover, so mixed source shapes all crop to the same frame instead of
	   letterboxing into ragged tiles. */
	object-fit: cover;
	transition: transform 0.4s ease;
}

.tile:hover .tile__media img { transform: scale(1.04); }

.tile__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--rk-gap);
}

.tile__title {
	color: var(--rk-heading);
	font-size: 1.1875rem;
	font-weight: 500;
	line-height: 1.25;
	text-wrap: balance;
}

.tile__text {
	color: var(--rk-text);
	font-size: 0.9375rem;
	text-wrap: pretty;
}

.tile__more {
	margin-top: auto;
	padding-top: 4px;
	color: var(--rk-red);
	font-size: 0.875rem;
	font-weight: 500;
}

.tile__more::after {
	content: "\2192";
	display: inline-block;
	/* A leading space inside content() collapses, so the gap is set here. */
	margin-left: 6px;
	transition: transform 0.18s ease;
}

.tile:hover .tile__more::after { transform: translateX(3px); }

/* Introduction band */

.split {
	display: grid;
	gap: clamp(16px, 3vw, 36px);
	align-items: center;
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.split { grid-template-columns: minmax(200px, 300px) 1fr; }
}

.split__media img {
	width: 100%;
	max-width: 300px;
	/* Capped, or this tall cut-out sets the band's height and leaves the copy
	   column stranded in dead space beside it. */
	max-height: 360px;
	height: auto;
	object-fit: contain;
	object-position: bottom;
	margin-inline: auto;
}

.split__body h1 { margin-bottom: var(--rk-gap-sm); color: #fff; }

.lede {
	max-width: 46ch;
	font-size: 1.0625rem;
	opacity: 0.92;
}

.split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rk-gap-sm);
	margin-top: var(--rk-gap);
}

.sec--intro .btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}
.sec--intro .btn--ghost:hover {
	background: #fff;
	border-color: #fff;
	color: var(--rk-red-deep);
}

/* Affiliate partners */

.sec--partners { background: var(--rk-wash); }

.partners {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--rk-gap);
}

.partner {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 132px;
	padding: var(--rk-gap);
	background: var(--rk-bg);
	border: 1px solid var(--rk-border);
	border-radius: 6px;
	text-decoration: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.partner:hover { border-color: var(--rk-red); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.partner img { max-height: 100px; width: auto; }
/* Matched min-width so a text partner sits as a peer of a banner partner
   rather than as a stray link beside it. */
.partner--text { min-width: 200px; font-weight: 500; }

.fineprint {
	max-width: 78ch;
	margin-top: var(--rk-gap);
	color: #6f6666;
	font-size: 0.8125rem;
	line-height: 1.6;
}

/* --- Home hero -----------------------------------------------------------
   Wordmark across the top, channel playlist beneath it. The portrait is the
   section's background rather than an element in the flow, so it can sit
   behind the player at any width without colliding with it. */

.sec--hero {
	overflow: hidden;
	padding-block: clamp(24px, 4vw, 48px);
}

.sec--hero.sec--media {
	background-size: auto 88%;
	background-position: left bottom;
	background-repeat: no-repeat;
}

/* The portrait is a full-bleed background while the wordmark is centred
   content, so on a narrow desktop the portrait's faded edge slides under the
   logo and reads as a smudge. Reserving a gutter wide enough to clear it keeps
   the two apart without moving either off centre. */
@media (min-width: 900px) {
	.sec--hero .sec__inner { padding-inline: 210px; }
	.sec--hero.sec--media { background-size: auto 80%; }
}

/* Below the desktop breakpoint the portrait would sit directly under the
   player and read as clutter, so the band goes to flat colour instead. */
@media (max-width: 899px) {
	.sec--hero.sec--media { background-image: none; }
}

.hero__inner {
	display: grid;
	justify-items: center;
	gap: clamp(16px, 2.5vw, 28px);
}

.hero__wordmark {
	width: min(100%, 620px);
	height: auto;
	/* The mark is the same red family as the band it sits on, so it needs an
	   edge to separate it. A dark drop shadow reads as depth rather than as
	   an outline and keeps the logo untouched. */
	filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75));
}

.hero__player {
	width: min(100%, 860px);
}

.hero__player iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--rk-radius);
	/* Lifts the player off the dark band so it does not read as a hole. */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

/* Tall bands centre their content. The recovered heights go up to 921px,
   which is right on a desktop and absurd on a phone, so mobile takes the
   section's own mobile height when it had one and a viewport cap otherwise. */
.sec--feature[style*="--sec-min-h"] {
	display: flex;
	align-items: center;
	min-height: min(var(--sec-min-h-mobile, var(--sec-min-h)), 70vh);
}

@media (min-width: 768px) {
	.sec--feature[style*="--sec-min-h"] {
		min-height: var(--sec-min-h);
	}
	.sec--feature h1,
	.sec--feature > .sec__inner > h2:first-child {
		font-size: min(var(--sec-h, var(--rk-h1)), 9vw);
	}
}

/* A copy block's own max-width must exceed its widest child, or the text
   fragments into a narrow column while the container sits empty.
   That container-narrower-than-contents case is the usual culprit. */
.prose { max-width: var(--rk-measure); }
.prose > * + * { margin-top: var(--rk-gap-sm); }
.prose--center { margin-inline: auto; text-align: center; }

.stack > * + * { margin-top: var(--rk-gap); }

/* --- Column rows ---------------------------------------------------------
   Track sizes come from the source layout (25+25+50 and so on) and ride on
   the element as --col-tracks. Mobile collapses to a single column, which is
   what the original did too. */

.cols {
	display: grid;
	gap: var(--rk-gap);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 768px) {
	.cols { grid-template-columns: var(--col-tracks, 1fr); }
}

.col > * + *,
.block > * + * { margin-top: var(--rk-gap-sm); }

.col > .cols,
.block > .cols { margin-top: var(--rk-gap); }

/* Never upscale. These are photographs and cut-outs at fixed intrinsic sizes,
   and stretching a 198px cut-out across a 1160px column just renders it blurry
   and enormous. Cap to the container, centre, and otherwise leave them alone. */
.col img,
.block img {
	width: auto;
	max-width: 100%;
	height: auto;
}
.col figure,
.block figure { text-align: center; }
.col figure img,
.block figure img { margin-inline: auto; }

.grid {
	display: grid;
	gap: var(--rk-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
/* Gallery items are 150px square crops, so the track is sized to them rather
   than stretching a small crop into a large blurry tile. */
.grid--thumbs { grid-template-columns: repeat(auto-fill, minmax(min(170px, 45%), 1fr)); }
.grid--thumbs img { margin-inline: auto; }

/* ---------------------------------------------------------------
   4. Header and navigation
   --------------------------------------------------------------- */

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

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rk-gap);
	min-height: 64px;
	padding-block: var(--rk-gap-sm);
}

.site-brand { display: flex; align-items: center; gap: var(--rk-gap-sm); text-decoration: none; }
/* The official upper mark is wider than it is tall (3:2), so it can carry more
   height than the old square-ish logo without crowding the bar. */
.site-brand img { max-height: 72px; width: auto; }
.site-brand__text { font-weight: 500; color: var(--rk-heading); line-height: 1.2; }

.nav-toggle {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 12px;
	background: transparent;
	border: 1px solid var(--rk-border);
	border-radius: var(--rk-radius);
	color: var(--rk-heading);
	font: inherit; font-size: 0.9375rem;
	cursor: pointer;
}
.nav-toggle__bars { display: block; width: 18px; height: 2px; background: currentColor; position: relative; }
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.site-nav ul { margin: 0; padding: 0; list-style: none; }
.site-nav a {
	display: block;
	padding: 10px 0;
	color: var(--rk-heading);
	text-decoration: none;
	font-size: 0.9375rem;
	/* Short nav labels must never wrap mid-phrase. */
	white-space: nowrap;
}
.site-nav a:hover,
.site-nav .current-menu-item > a { color: var(--rk-red); }

@media (max-width: 899px) {
	.site-nav {
		display: none;
		padding-bottom: var(--rk-gap-sm);
		border-top: 1px solid var(--rk-border);
	}
	.site-nav.is-open { display: block; }
	.site-header__inner { flex-wrap: wrap; }
	.site-nav { flex-basis: 100%; }
}

/* The menu is not flat: "Build With Me" is a parent with five children, and
   "Contact" is the only other top-level item. Flexing every <ul> spilled the
   submenu inline across the header, which is what made the nav look broken. */
.site-nav li { position: relative; }

@media (max-width: 899px) {
	/* With the panel already open behind the toggle, nesting reads better as
	   a simple indent than as a second tap target. */
	.site-nav .sub-menu {
		padding-left: var(--rk-gap);
		border-left: 2px solid var(--rk-border);
		margin-left: 4px;
	}
}

@media (min-width: 900px) {
	.nav-toggle { display: none; }

	.site-nav > ul {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		column-gap: var(--rk-gap);
	}
	.site-nav a { padding: 6px 0; }
	.site-header__inner { min-height: 104px; }
	.site-brand img { max-height: 92px; }

	.site-nav .menu-item-has-children > a::after {
		content: "";
		display: inline-block;
		margin-left: 6px;
		border: 4px solid transparent;
		border-top-color: currentColor;
		transform: translateY(2px);
	}

	.site-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		min-width: 220px;
		padding: 8px 0;
		background: var(--rk-bg);
		border: 1px solid var(--rk-border);
		border-radius: var(--rk-radius);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
		/* Hidden by visibility rather than display so it can transition and
		   still be reachable by keyboard focus. */
		visibility: hidden;
		opacity: 0;
		transition: opacity 0.12s ease, visibility 0.12s ease;
	}
	.site-nav .sub-menu a { padding: 8px 16px; }
	.site-nav .sub-menu a:hover { background: var(--rk-wash); }

	.site-nav li:hover > .sub-menu,
	.site-nav li:focus-within > .sub-menu {
		visibility: visible;
		opacity: 1;
	}
}

/* ---------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------- */

.btn, .wp-block-button__link, input[type="submit"], button[type="submit"] {
	display: inline-block;
	padding: 11px 22px;
	background: var(--rk-red);
	color: #fff;
	border: 1px solid var(--rk-red);
	border-radius: var(--rk-radius);
	font: inherit; font-weight: 500; font-size: 0.9375rem;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover, .wp-block-button__link:hover,
input[type="submit"]:hover, button[type="submit"]:hover {
	background: var(--rk-red-hover); border-color: var(--rk-red-hover); color: #fff;
}
.btn--ghost { background: transparent; color: var(--rk-red); }
.btn--ghost:hover { background: var(--rk-red); color: #fff; }

/* ---------------------------------------------------------------
   6. Entries
   --------------------------------------------------------------- */

.page-hero { padding-block: var(--rk-sec-y); }
.page-hero__title { margin-bottom: 0; }
.page-hero__meta { margin-top: var(--rk-gap-sm); color: #6b7276; font-size: 0.875rem; }

.entry-content > * + * { margin-top: var(--rk-gap); }
.entry-content > .sec + .sec { margin-top: 0; }
.entry-content > .sec { margin-top: 0; }

/* Pages that never went through the builder have loose content at the top
   level. Sections bring their own measure; everything else gets one here. */
.entry-content > *:not(.sec) {
	width: 100%;
	max-width: var(--rk-width);
	margin-inline: auto;
	padding-inline: var(--rk-gap);
}

.card {
	display: flex; flex-direction: column;
	border: 1px solid var(--rk-border);
	border-radius: var(--rk-radius);
	overflow: hidden;
	background: var(--rk-bg);
}
.card__body { padding: var(--rk-gap); }
.card__title { margin-bottom: 8px; font-size: 1.0625rem; }
.card__title a { text-decoration: none; color: var(--rk-heading); }
.card__title a:hover { color: var(--rk-red); }
.card__meta { color: #6b7276; font-size: 0.8125rem; }
.card__excerpt { margin-top: var(--rk-gap-sm); }

/* Project entries migrated off the builder: title, stills, date, description. */
.project { padding-block: var(--rk-sec-y); border-bottom: 1px solid var(--rk-border); }
.project:last-child { border-bottom: 0; }
.project__title { margin-bottom: var(--rk-gap-sm); }
.project__date { margin-bottom: var(--rk-gap); color: #6b7276; font-size: 0.875rem; font-weight: 500; }
.project__stills { margin-block: var(--rk-gap); }

/* Affiliate images arrive at their native tracker size; keep them inline
   and unstretched rather than letting the grid blow them up. */
.affiliate { display: flex; flex-wrap: wrap; gap: var(--rk-gap-sm); align-items: center; }
.affiliate img,
img.affiliate-img {
	display: inline-block;
	width: auto;
	margin-right: var(--rk-gap-sm);
	vertical-align: middle;
}

/* Gallery thumbnails link to the full-size file now that the builder's
   lightbox is gone. Give the link a visible affordance. */
.grid--thumbs figure a { display: block; }
.grid--thumbs img { width: 100%; height: auto; border-radius: var(--rk-radius); }
.grid--thumbs figure a:hover img { opacity: 0.88; }

.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--rk-sec-y); }
.pagination .page-numbers {
	padding: 8px 13px; border: 1px solid var(--rk-border);
	border-radius: var(--rk-radius); text-decoration: none;
}
.pagination .current { background: var(--rk-red); border-color: var(--rk-red); color: #fff; }

/* ---------------------------------------------------------------
   7. Footer
   --------------------------------------------------------------- */

.site-footer {
	margin-top: var(--rk-sec-y);
	padding-block: var(--rk-sec-y);
	background: var(--rk-red-deep);
	color: #e7eef0;
}
.site-footer a { color: #fff; }
.site-footer h2 { color: #fff; font-size: 1.0625rem; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }

/* The official lower mark is black line art and would vanish against the dark
   footer. Flattening it to pure white keeps every shape and makes it read. */
.site-footer__mark {
	text-align: center;
	margin-bottom: var(--rk-gap);
}
.site-footer__mark img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 128px;
	margin-inline: auto;
	filter: brightness(0) invert(1);
}

.site-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rk-gap-sm) var(--rk-gap);
}
.site-footer__nav a { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.site-footer__bottom {
	margin-top: var(--rk-gap);
	padding-top: var(--rk-gap);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
	font-size: 0.8125rem;
	text-align: center;
}

/* ---------------------------------------------------------------
   8. Embeds
   Covenant Code rule 1(c) also ships as an mu-plugin so it survives a
   theme switch. Repeated here so the theme is correct standalone.
   --------------------------------------------------------------- */

iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="youtu.be"],
iframe[src*="player.vimeo.com"],
iframe[src*="vimeo.com"] {
	aspect-ratio: 16 / 9;
	display: block; width: 100%; height: auto; border: 0;
}

.wp-block-embed.is-type-video .wp-block-embed__wrapper { position: static; padding-top: 0; }

/* Wide content scrolls inside its own box; the page body never scrolls sideways. */
.entry-content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.entry-content pre { overflow-x: auto; }

.alignleft  { float: left;  margin: 0 var(--rk-gap) var(--rk-gap-sm) 0; }
.alignright { float: right; margin: 0 0 var(--rk-gap-sm) var(--rk-gap); }
.aligncenter { margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}