/*
Theme Name:   RideStoke (Blocksy)
Theme URI:    https://www.ridestoke.com
Description:  Child theme of Blocksy for the 2026 RideStoke.com redesign (Homepage v8, article v3). Brand tokens, self-hosted Schibsted Grotesk and Inter, and the component styles used by the ridestoke-blocksy block patterns.
Author:       RideStoke.com
Template:     blocksy
Version: 0.1.35
Requires at least: 6.4
Requires PHP: 7.4
Text Domain:  ridestoke-blocksy
License:      GPL-2.0-or-later
*/

/* ==========================================================================
   1. Fonts: self-hosted variable fonts (SIL OFL 1.1, see assets/fonts)
   ========================================================================== */
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("assets/fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   2. Design tokens (from design-kit/tokens.json; keep the two in sync)
   Owner decisions 6 Nov 2026: no topic pills, no coloured topic dots,
   red accent #D4242B, small red text labels #B01E24.
   ========================================================================== */
:root {
	--rs-bg: #FFFFFF;
	--rs-text: #111111;
	--rs-body: #4A4D54;
	--rs-article: #1E2024;
	--rs-muted: #6B6F76;
	--rs-surface: #F6F6F4;
	--rs-line: #E4E4E1;
	--rs-line-input: #D0D0CC;
	--rs-black: #000000;
	--rs-accent: #D4242B;
	--rs-accent-text: #B01E24;
	--rs-on-accent: #FFFFFF;
	--rs-footer-text: #B5B5B5;
	--rs-footer-muted: #A8A8A8;
	--rs-footer-line: #2A2A2A;

	--rs-font-head: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rs-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--rs-head-tracking: -0.025em;

	/* 0.1.25: smaller corners (owner, 9 Nov 2026). Design kit values were
	   card 14px / panel 16px / thumb 8px; put those back to roll back. */
	--rs-radius-card: 6px;
	--rs-radius-panel: 6px;
	--rs-radius-thumb: 4px;
	--rs-radius-pill: 999px;

	--rs-container: 1240px;
	--rs-gutter: 24px;
	--rs-article-width: 880px;
	--rs-measure: 68ch;
	--rs-touch: 44px;

	/* Point Blocksy at the brand fonts. Check these names in DevTools against the
	   installed Blocksy version; the explicit rules in section 3 are the fallback. */
	--theme-font-family: var(--rs-font-body);
	--fontFamily: var(--rs-font-body);
}

/* ==========================================================================
   3. Base
   ========================================================================== */
body,
button,
input,
select,
textarea {
	font-family: var(--rs-font-body);
}
body {
	color: var(--rs-text);
	background: var(--rs-bg);
	font-size: 16px;
	line-height: 1.55;
}
h1, h2, h3, h4, h5, h6,
.wp-block-post-title {
	font-family: var(--rs-font-head);
	color: var(--rs-text);
	letter-spacing: var(--rs-head-tracking);
	font-weight: 800;
}
h3, h4, h5, h6 {
	font-weight: 700;
}
a:where(:not(.wp-element-button)) {
	color: inherit;
	text-decoration: none;
}
a:where(:not(.wp-element-button)):hover {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
/* Links inside running text are underlined so they don't rely on colour alone. */
:where(.single-post, .page) .entry-content :where(p, li) a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
:focus-visible {
	outline: 2px solid var(--rs-accent);
	outline-offset: 2px;
}

/* Visually hidden (homepage SEO H1, form labels). */
.rs-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Small uppercase label: category names, "Just in", spec labels.
   Plain text, no dots (owner, 6 Nov 2026). */
.rs-label,
.rs-label a,
.rs-meta .wp-block-post-terms,
.rs-meta .wp-block-post-terms a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rs-accent-text);
	text-decoration: none;
}
.rs-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	margin: 0;
	font-size: 13px;
	color: var(--rs-muted);
}
.rs-meta > * {
	margin: 0 !important;
}
.rs-meta .wp-block-post-date {
	color: var(--rs-muted);
}

/* ==========================================================================
   4. Buttons: pill shape, 44px+ tall. Primary red, secondary black.
   ========================================================================== */
.wp-element-button,
.wp-block-button__link,
.ct-button,
input[type="submit"],
button[type="submit"] {
	min-height: var(--rs-touch);
	border-radius: var(--rs-radius-pill);
	font-family: var(--rs-font-body);
	font-weight: 600;
	font-size: 15px;
}
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 28px;
	min-height: 48px;
	background: var(--rs-accent);
	color: var(--rs-on-accent);
}
.wp-block-button.is-style-rs-black .wp-block-button__link,
.rs-more .wp-block-button__link {
	background: var(--rs-black);
	color: #FFFFFF;
}
.wp-block-button__link:hover {
	filter: brightness(1.1);
	text-decoration: none;
}

/* ==========================================================================
   5. Homepage: page wrapper
   Pattern: ridestoke-blocksy/home
   ========================================================================== */
/* Width and side gutters come from Blocksy's container (1240px, ~5vw on phones),
   so the homepage lines up with the logo and the footer columns. */
.rs-home {
	max-width: var(--rs-container);
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}
.rs-home > * + * {
	margin-top: 0;
}
/* Homepage links (titles, categories, "View all") underline on hover only, as
   in the design; Blocksy underlines links inside page content by default. */
.rs-home a:not(.wp-element-button) {
	text-decoration: none !important;
}
.rs-home a:not(.wp-element-button):hover,
.rs-home a:not(.wp-element-button):focus-visible {
	text-decoration: underline !important;
	text-underline-offset: 0.18em;
}
.rs-section {
	border-top: 1px solid var(--rs-line);
	padding: 48px 0 16px;
	margin: 0;
}
.rs-section-title {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	line-height: 1.1;
}
.rs-section-intro {
	margin: 6px 0 24px;
	font-size: 15px;
	color: var(--rs-muted);
}

/* Shared: reset Query Loop list markup */
.rs-home .wp-block-post-template,
.rs-related .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rs-home .wp-block-post-template > li,
.rs-home .wp-block-post {
	margin: 0;
}

/* ==========================================================================
   6. Lead row: featured post (left) + "Just in" panel (right)
   Pattern: ridestoke-blocksy/lead
   ========================================================================== */
/* Homepage sits 32px under the header (Blocksy's own 60px page spacing removed). */
.home .ct-container-full {
	padding-top: 0 !important;
}
.rs-lead-row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	padding: 32px 0 48px;
	margin: 0 !important;
}
.rs-lead-row > * {
	margin: 0 !important;
}
/* Lead (min 560px) + right column (min 300px) + 32px gap = 892px, so the two
   columns stay side by side on ~1000px-wide screens and up. */
.rs-lead {
	flex: 2 1 560px;
	min-width: 0;
}
.rs-lead .wp-block-post > .wp-block-group {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.rs-lead .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--rs-radius-panel);
	overflow: hidden;
	background: var(--rs-surface);
}
.rs-lead .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rs-lead .wp-block-post-title {
	margin: 0;
	/* Real headlines run long, so: full column width and at most 36px (~3 lines). */
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.12;
	font-weight: 800;
}
.rs-lead .wp-block-post-excerpt {
	margin: 0;
}
.rs-lead .wp-block-post-excerpt__excerpt {
	margin: 0;
	max-width: 60ch;
	font-size: 18px;
	color: var(--rs-body);
	/* Summary: two lines at most */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Right column: Just in panel, then an ad (Advanced Ads "Adsense Sidebar Responsive", 22289) */
.rs-side {
	flex: 1 1 300px;
	min-width: 0;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0 !important;
}
.rs-side > * {
	margin: 0 !important;
}
.rs-side-ad {
	min-height: 250px;
	text-align: center;
}
.rs-side-ad > * {
	margin: 0 !important;
}
/* Keep the AdSense unit to standard sizes (300x250 / 336x280) and centre it in
   the column, instead of a frame stretched across the whole column. */
.rs-side-ad ins.adsbygoogle {
	max-width: 336px;
	margin-left: auto !important;
	margin-right: auto !important;
}
.rs-justin {
	min-width: 0;
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-panel);
	overflow: hidden;
	background: var(--rs-bg);
}
.rs-justin__head {
	margin: 0 !important;
	padding: 16px 20px;
	background: var(--rs-surface);
	font-family: var(--rs-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--rs-muted);
}
.rs-justin .wp-block-query {
	margin: 0 !important;
}
.rs-justin .wp-block-post {
	border-top: 1px solid var(--rs-line);
	padding: 16px 20px;
}
.rs-justin .wp-block-post > .wp-block-group {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.rs-justin .wp-block-post-featured-image {
	flex: 0 0 84px;
	margin: 0;
	aspect-ratio: 4 / 3;
	border-radius: var(--rs-radius-thumb);
	overflow: hidden;
	background: var(--rs-surface);
}
.rs-justin .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rs-justin__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
.rs-justin__text > * {
	margin: 0 !important;
}
.rs-justin .wp-block-post-title {
	font-size: 17px;
	line-height: 1.2;
	font-weight: 700;
}

/* ==========================================================================
   7. Card grid ("Latest stoke", archives, related posts)
   Pattern: ridestoke-blocksy/latest
   ========================================================================== */
.rs-grid .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
	gap: 20px;
}
.rs-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	background: var(--rs-bg);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-card);
	overflow: hidden;
	margin: 0 !important;
}
.rs-card .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 9;
	background: var(--rs-surface);
	overflow: hidden;
}
.rs-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rs-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	padding: 18px 20px 20px;
	margin: 0 !important;
}
.rs-card__body > * {
	margin: 0 !important;
}
.rs-card .wp-block-post-title {
	font-size: 21px;
	line-height: 1.2;
	font-weight: 700;
}
.rs-card .wp-block-post-excerpt__excerpt {
	margin: 0;
	font-size: 15px;
	color: var(--rs-body);
}
.rs-more {
	padding: 32px 0 8px;
	margin: 0 !important;
}

/* ==========================================================================
   8. Dive deeper: four compact text cards, one per smaller category
   Pattern: ridestoke-blocksy/dive-deeper
   ========================================================================== */
.rs-dive {
	margin-top: 24px !important;
	padding-bottom: 72px;
}
.rs-dive .rs-section-title {
	font-size: 26px;
	margin-bottom: 20px;
}
/* 4 across on wide screens, 2 x 2 on medium screens, 1 column on phones
   (never 3 + 1). */
.rs-dive__row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
@media (max-width: 1099px) {
	.rs-dive__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 599px) {
	.rs-dive__row {
		grid-template-columns: minmax(0, 1fr);
	}
}
.rs-dive__card {
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px 20px;
	background: var(--rs-surface);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-card);
	margin: 0 !important;
}
.rs-dive__card > * {
	margin: 0 !important;
}
.rs-dive__name {
	font-size: 19px;
	font-weight: 700;
}
.rs-dive__card .wp-block-post-title {
	font-family: var(--rs-font-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0;
	color: var(--rs-body);
}
.rs-dive__card .wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rs-dive__all a {
	font-size: 14px;
	font-weight: 600;
	color: var(--rs-accent-text);
}

/* ==========================================================================
   9. Single post: one centred column, no sidebar
   ========================================================================== */
.single-post .entry-content {
	font-size: 18px;
	line-height: 1.7;
	color: var(--rs-article);
}
/* Body text fills the full 880px column, edge to edge with the title, photos
   and videos (owner, 6 Nov 2026: no short-line gap on the right). */
.single-post .entry-content > :where(p, ul, ol, blockquote, .rs-specs, h2, h3) {
	max-width: var(--rs-article-width);
}
.single-post .entry-content h2 {
	font-size: 26px;
	line-height: 1.15;
	margin-top: 1.6em;
}
.single-post .entry-content .wp-block-image img,
.single-post .entry-content > figure img {
	border-radius: var(--rs-radius-card);
}

/* Title area (Blocksy hero, type-1 inside content): meta above the H1 */
.single-post .hero-section {
	margin-bottom: 28px;
}
.single-post .hero-section .entry-header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
}
.single-post .hero-section .page-title {
	margin: 0;
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.1;
	font-weight: 800;
	letter-spacing: var(--rs-head-tracking);
}
.rs-post-meta {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.rs-post-meta__line {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
	margin: 0;
	font-size: 14px;
	color: var(--rs-muted);
}
.rs-post-meta__by {
	font-weight: 600;
	color: var(--rs-text);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* "You May Also Like" (Blocksy related posts): three compact cards */
.ct-related-posts-container {
	background: transparent;
	padding-top: 24px;
	padding-bottom: 48px;
}
.ct-related-posts .ct-module-title {
	font-family: var(--rs-font-head);
	font-size: 28px;
	font-weight: 800;
	letter-spacing: var(--rs-head-tracking);
	text-align: left;
	margin-bottom: 18px;
}
.ct-related-posts {
	max-width: var(--rs-article-width);
	margin-left: auto;
	margin-right: auto;
	border-top: 1px solid var(--rs-line);
	padding-top: 32px;
}
.ct-related-posts-items {
	gap: 16px !important;
	align-items: stretch;
}
/* Card: white, hairline border, 14px radius, image edge to edge on top */
.ct-related-posts article {
	display: flex;
	margin: 0;
	background: var(--rs-bg);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-card);
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ct-related-posts article:hover {
	border-color: var(--rs-line-input);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.ct-related-posts article > div {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
}
.ct-related-posts .ct-media-container {
	display: block;
	margin: 0 !important;
	aspect-ratio: 16 / 9;
	border-radius: 0 !important;
	overflow: hidden;
	background: var(--rs-surface);
}
.ct-related-posts .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
	transition: transform 0.3s ease;
}
.ct-related-posts article:hover .ct-media-container img {
	transform: scale(1.03);
}
.ct-related-posts .entry-meta {
	display: flex;
	flex-wrap: wrap;
	margin: 14px 16px 0 !important;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: var(--rs-muted);
}
.ct-related-posts .entry-meta li {
	margin: 0;
}
.ct-related-posts .entry-meta li + li::before {
	content: "·";
	margin: 0 6px;
}
/* Category in the same small red caps as the post meta */
.ct-related-posts .entry-meta .meta-categories a {
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rs-accent-text);
}
.ct-related-posts .related-entry-title {
	margin: 6px 16px 18px !important;
	font-family: var(--rs-font-head);
	font-size: 17px;
	line-height: 1.25;
	font-weight: 700;
	letter-spacing: var(--rs-head-tracking);
}
.ct-related-posts .related-entry-title a {
	color: var(--rs-text);
}
.ct-related-posts article:hover .related-entry-title a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

/* Spec list: Highlights and Credits (label / value rows with hairlines).
   Pattern: ridestoke-blocksy/gear-post */
.rs-specs {
	margin: 0 0 1.5em;
	border-bottom: 1px solid var(--rs-line);
}
.rs-specs .wp-block-group,
.rs-spec {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 12px 0;
	margin: 0 !important;
	border-top: 1px solid var(--rs-line);
}
.rs-spec > * {
	margin: 0 !important;
}
.rs-spec__label {
	flex: 0 0 150px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rs-muted);
	line-height: 1.6;
}
.rs-spec__value {
	flex: 1 1 240px;
	font-size: 16px;
	line-height: 1.5;
}
.rs-spec__value a {
	color: var(--rs-accent-text);
	font-weight: 600;
}

/* Gallery: 4:3 crops, 220px+ columns, rounded */
.single-post .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: 12px;
}
.single-post .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: auto !important;
	margin: 0 !important;
	aspect-ratio: 4 / 3;
	border-radius: var(--rs-radius-card);
	overflow: hidden;
}
.single-post .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* ==========================================================================
   10. Video: click-to-load facade (see functions.php section 3)
   ========================================================================== */
.rs-yt {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 0;
	border: 0;
	border-radius: var(--rs-radius-panel);
	overflow: hidden;
	background: #111111 center / cover no-repeat;
	cursor: pointer;
}
.rs-yt iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.rs-yt__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 76px;
	height: 76px;
	border-radius: 50%;
	background: var(--rs-accent);
	color: var(--rs-on-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
	transition: transform 0.15s ease;
}
.rs-yt__play svg {
	width: 30px;
	height: 30px;
	margin-left: 4px;
	fill: currentColor;
}
.rs-yt:hover .rs-yt__play,
.rs-yt:focus-visible .rs-yt__play {
	transform: translate(-50%, -50%) scale(1.06);
}
.rs-yt__label {
	position: absolute;
	left: 16px;
	bottom: 14px;
	font-size: 13px;
	font-weight: 600;
	color: #FFFFFF;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
.wp-block-embed.is-provider-youtube,
.wp-block-embed.is-provider-vimeo {
	margin-left: 0;
	margin-right: 0;
}

/* ==========================================================================
   11. Ads (Advanced Ads): reserve space so pages don't jump when ads load
   Pattern: ridestoke-blocksy/ad-slot
   ========================================================================== */
.rs-ad {
	margin: 32px auto;
	min-height: 120px;
	text-align: center;
}
.rs-ad:empty {
	display: none;
}
.rs-ad > * {
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Homepage: Jenson USA banner under "Read more articles" */
/* 40px from the button to the banner, 40px from the banner to the Dive deeper line
   (8px button padding + 32px; 16px section padding + 24px Dive deeper margin). */
.rs-ad--after-latest {
	margin: 32px auto 0;
	min-height: 0;
}
/* Category archives: AdSense under the post grid (Ad Inserter block 3; was
   Advanced Ads 23715, which added an inline float:left - the rule below stays
   harmless and keeps any wrapper centred). */
.rs-ad--archive {
	width: 100%;
	margin: 40px auto;
	min-height: 0;
	clear: both;
}
.rs-ad--archive > div {
	float: none !important;
}

/* ==========================================================================
   12a. Header (Blocksy header builder: black row, white menu, search box)
   Row colour, height, menu font and logo size are Customizer settings; these
   rules cover what the free builder doesn't expose or what reads wrong on black.
   ========================================================================== */
#header [data-row="middle"] {
	--theme-icon-color: #FFFFFF;
	--theme-icon-hover-color: #FFFFFF;
}
#header [data-id="search"],
#header [data-id="trigger"] {
	color: #FFFFFF;
	--theme-icon-color: #FFFFFF;
}
#header [data-id="search"] svg,
#header [data-id="trigger"] svg {
	fill: #FFFFFF;
}
#header [data-id="search"],
#header [data-id="trigger"] {
	min-width: var(--rs-touch);
	min-height: var(--rs-touch);
	justify-content: center;
}
/* Search icon in a 40px box with the homepage card shape: 1px hairline, 6px corners
   (owner, 10 Nov 2026). Blocksy's .ct-toggle sets border/radius/background with
   !important from these variables, so set the variables. */
#header [data-id="search"] {
	--toggle-button-size: 40px;
	--toggle-button-radius: var(--rs-radius-card);
	--toggle-button-border-width: 1px;
	--toggle-button-border-style: solid;
	--toggle-button-border-color: rgba(255, 255, 255, 0.75);
	--toggle-button-background: transparent;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
}
#header [data-id="search"]:hover,
#header [data-id="search"]:focus-visible {
	--toggle-button-border-color: #FFFFFF;
	--toggle-button-background: rgba(255, 255, 255, 0.12);
}
#header [data-id="button"] .ct-button {
	--theme-button-text-initial-color: #000000;
	--theme-button-text-hover-color: #000000;
	--theme-button-background-initial-color: #FFFFFF;
	--theme-button-background-hover-color: #E4E4E1;
	min-height: 40px;
	height: 40px;
	padding: 0 20px;
	border-radius: var(--rs-radius-pill);
	background: #FFFFFF;
	color: #000000;
	font-size: 14px;
	font-weight: 600;
}
#header [data-id="button"] .ct-button:hover {
	background: #E4E4E1;
	color: #000000;
}
#header .ct-menu-link:hover {
	text-decoration: underline;
	text-underline-offset: 0.3em;
}
/* No "current item" underline or colour change (owner, 6 Nov 2026). */
#header .current-menu-item > .ct-menu-link,
#header .current-menu-ancestor > .ct-menu-link {
	color: #FFFFFF;
}
#header .ct-menu-link::before,
#header .ct-menu-link::after {
	display: none;
}
/* Articles dropdown */
#header .sub-menu {
	--dropdown-items-background: #111111;
	background: #111111;
	border-radius: 0 0 var(--rs-radius-thumb) var(--rs-radius-thumb);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}
#header .sub-menu .ct-menu-link {
	color: #FFFFFF;
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	min-height: var(--rs-touch);
}
/* Phone menu (off-canvas) */
#offcanvas {
	--theme-link-initial-color: #FFFFFF;
	--theme-link-hover-color: #FFFFFF;
}
#offcanvas .ct-panel-inner {
	background: #000000;
}
#offcanvas .ct-menu-link {
	color: #FFFFFF;
	font-size: 17px;
	font-weight: 600;
	min-height: var(--rs-touch);
}
/* Search pop-up (Blocksy #search-modal, 10 Nov 2026): solid black like the phone menu,
   live-search result titles and "Show more" in white (they inherited #111 text). */
body #search-modal {
	--theme-text-color: #FFFFFF;
	--theme-link-initial-color: #FFFFFF;
	--theme-link-hover-color: #FFFFFF;
	/* !important: Blocksy's own modal background rule is more specific (it is the
	   Customizer "modal background" value, rgba(18,21,25,.98), which let the page show through). */
	background-color: #000000 !important;
	color: #FFFFFF;
}
#search-modal .ct-search-results a,
#search-modal .ct-search-more {
	color: #FFFFFF;
	font-family: var(--rs-font-body);
}
#search-modal .ct-search-results a:hover,
#search-modal .ct-search-results a:focus-visible,
#search-modal .ct-search-more:hover,
#search-modal .ct-search-more:focus-visible {
	color: #FFFFFF;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   12. Footer (Blocksy footer builder; widgets use these classes)
   Middle row: brand block + Topics / About / Follow menu widgets.
   Bottom row: copyright text + legal menu.
   ========================================================================== */
#footer {
	--theme-text-color: var(--rs-footer-text);
	--theme-link-initial-color: var(--rs-footer-text);
	--theme-link-hover-color: #FFFFFF;
	--theme-heading-color: #FFFFFF;
	background: #000000;
	color: var(--rs-footer-text);
}
#footer [data-row] {
	background: #000000;
}
#footer [data-row="middle"] > .ct-container {
	padding-top: 48px;
	padding-bottom: 32px;
}
#footer .widget-title,
#footer .widget h2,
#footer .widget h3 {
	margin: 0 0 12px;
	font-family: var(--rs-font-head);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: #FFFFFF;
}
#footer .widget_nav_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#footer .widget_nav_menu li {
	margin: 0;
	padding: 0;
}
#footer .widget_nav_menu a,
#footer .rs-footer-brand p {
	color: var(--rs-footer-text);
	font-size: 15px;
}
#footer .widget_nav_menu a:hover {
	color: #FFFFFF;
}
#footer .rs-footer-brand p {
	max-width: 38ch;
}
#footer [data-row="bottom"] {
	border-top: 1px solid var(--rs-footer-line);
	color: var(--rs-footer-muted);
	font-size: 13px;
}
#footer [data-row="bottom"] > .ct-container {
	padding-top: 16px;
	padding-bottom: 28px;
}
#footer .ct-footer-copyright {
	color: var(--rs-footer-muted);
	font-size: 13px;
	line-height: 1.5;
}
#footer [data-row="bottom"] [data-id="menu"] a,
#footer [data-row="bottom"] .ct-menu-link {
	color: var(--rs-footer-muted);
	font-size: 13px;
	text-transform: none;
}
#footer [data-row="bottom"] [data-id="menu"] a:hover {
	color: #FFFFFF;
}
.rs-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.rs-footer-brand > * {
	margin: 0 !important;
}
.rs-footer-brand img {
	width: 60px;
	height: 60px;
}
.rs-footer-brand p,
.rs-footer-links a {
	color: var(--rs-footer-text);
	font-size: 15px;
}
.rs-footer-heading {
	margin: 0 0 8px !important;
	font-size: 16px;
	font-weight: 700;
	color: #FFFFFF;
}
.rs-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rs-footer-legal {
	font-size: 13px;
	color: var(--rs-footer-muted);
}

/* ==========================================================================
   12b. Archives: Articles, categories, tags, search results
   Card order is set in the Customizer (image 16:9, category / date, title,
   20-word summary); these rules make the cards match the homepage cards.
   ========================================================================== */
/* Title area on Articles, categories, tags, search results and pages (About,
   Contact, legal): a faint line under the title, as between homepage sections,
   with 24px above and 32px below. */
:is(.blog, .archive, .search, .page:not(.home)) .hero-section {
	padding-bottom: 24px !important;
	margin-bottom: 32px !important;
	border-bottom: 1px solid var(--rs-line);
}
:is(.blog, .archive, .search) .hero-section .entry-header {
	text-align: left;
}
:is(.blog, .archive, .search) .hero-section .page-title {
	margin: 0;
	font-size: clamp(26px, 2.6vw, 36px);
	line-height: 1.12;
	font-weight: 800;
	letter-spacing: var(--rs-head-tracking);
}
:is(.blog, .archive, .search) .hero-section .page-description {
	max-width: 70ch;
	color: var(--rs-muted);
	font-size: 16px;
}
.entries[data-layout="grid"] {
	gap: 20px !important;
}
.entries[data-cards="boxed"] .entry-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 0 20px !important;
	background: var(--rs-bg);
	border: 1px solid var(--rs-line);
	border-radius: var(--rs-radius-card);
	box-shadow: none;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.entries[data-cards="boxed"] .entry-card:hover {
	border-color: var(--rs-line-input);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.entries[data-cards="boxed"] .entry-card > .ct-media-container {
	/* Blocksy's boundless image is card width + 2x inner spacing; we drop its negative margins, so drop the extra width too. */
	width: 100% !important;
	margin: 0 0 10px !important;
	border-radius: 0 !important;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rs-surface);
}
.entries[data-cards="boxed"] .entry-card > .ct-media-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0 !important;
}
.entries[data-cards="boxed"] .entry-card > :not(.ct-media-container) {
	margin: 0 20px !important;
}
.entries .entry-card .entry-meta {
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	list-style: none;
	font-size: 13px;
	color: var(--rs-muted);
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
}
.entries .entry-card .entry-meta li {
	margin: 0;
}
.entries .entry-card .entry-meta li + li::before {
	content: "·";
	margin: 0 6px;
}
.entries .entry-card .entry-meta li::after {
	display: none !important;
}
.entries .entry-card .entry-meta .meta-categories a {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rs-accent-text);
}
.entries .entry-card .entry-title {
	font-family: var(--rs-font-head);
	font-size: 21px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: var(--rs-head-tracking);
}
.entries .entry-card .entry-title a {
	color: var(--rs-text);
	text-decoration: none;
}
.entries .entry-card:hover .entry-title a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}
/* Summary: 3 lines at most (hand-written excerpts aren't shortened by WordPress) */
.entries .entry-card .entry-excerpt {
	font-size: 15px;
	line-height: 1.55;
	color: var(--rs-body);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.entries .entry-card .entry-excerpt p {
	margin: 0;
}
/* Pagination: pill buttons, current page black */
.ct-pagination {
	margin-top: 40px;
}
.ct-pagination .page-numbers {
	min-width: var(--rs-touch);
	min-height: var(--rs-touch);
	border-radius: var(--rs-radius-pill);
}
.ct-pagination .page-numbers.current {
	background: var(--rs-black);
	color: #FFFFFF;
}

/* Pages (About, Contact, legal): same 880px column as posts (Customizer:
   Pages > narrow). Photos fill the column so they all line up, even ones
   uploaded narrower than 880px. */
.page:not(.home) .entry-content {
	font-size: 18px;
	line-height: 1.7;
	color: var(--rs-article);
}
/* Photos fill their column; the 880px column limit itself stays Blocksy's. */
.page:not(.home) .entry-content .wp-block-column figure.wp-block-image,
.page:not(.home) .entry-content .wp-block-image img {
	width: 100%;
	max-width: 100%;
}
.page:not(.home) .entry-content .wp-block-image img {
	height: auto;
	border-radius: var(--rs-radius-card);
}
.page:not(.home) .entry-content figcaption {
	font-size: 13px;
	color: var(--rs-muted);
	text-align: left;
}
.page:not(.home) .hero-section .page-title {
	font-size: clamp(28px, 3.2vw, 42px);
	line-height: 1.1;
	font-weight: 800;
}

/* ==========================================================================
   12c. Cookie banner (Complianz; functions.php section 7). Its own CSS sets
   colours with !important. Accept = primary red pill, others black outline.
   ========================================================================== */
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
	border-radius: var(--rs-radius-pill) !important;
	font-weight: 600;
}
.cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept {
	background-color: var(--rs-accent) !important;
	border-color: var(--rs-accent) !important;
	color: #FFFFFF !important;
}
.cmplz-cookiebanner .cmplz-links .cmplz-link {
	color: var(--rs-text) !important;
}
/* Complianz hides the title on phones. */
.cmplz-cookiebanner .cmplz-header .cmplz-title {
	display: block !important;
}
/* Cookie Policy and Privacy Statement are the same page: show the link once. */
.cmplz-cookiebanner .cmplz-documents .cmplz-link.privacy-statement {
	display: none !important;
}
/* No statistics on this site: hide that choice in "View preferences". */
.cmplz-cookiebanner .cmplz-categories .cmplz-statistics {
	display: none !important;
}
.rs-cookie-settings a {
	white-space: nowrap;
}

/* ==========================================================================
   12d. 404 page (functions.php section 4c)
   ========================================================================== */
.rs-404 {
	max-width: var(--rs-container);
	margin: 0 auto;
}
.rs-404__head {
	max-width: 720px;
	padding-bottom: 24px;
	margin-bottom: 32px;
	border-bottom: 1px solid var(--rs-line);
}
.rs-404__head > * {
	margin: 0 0 10px;
}
.rs-404__head .page-title {
	font-size: clamp(30px, 3.6vw, 48px);
	line-height: 1.05;
	font-weight: 800;
	letter-spacing: var(--rs-head-tracking);
}
.rs-404__text {
	font-size: 18px;
	color: var(--rs-body);
	margin: 0;
}
.rs-404__search {
	max-width: 560px;
	margin-bottom: 20px;
}
.rs-404__search input[type="search"] {
	min-height: 46px;
	border-radius: var(--rs-radius-pill);
}
.rs-404__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 48px;
}
.rs-404__btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 0 26px;
	border-radius: var(--rs-radius-pill);
	background: var(--rs-accent);
	color: #FFFFFF;
	font-weight: 600;
	text-decoration: none;
}
.rs-404__btn--black {
	background: var(--rs-black);
}
.rs-404__latest-title {
	font-size: 26px;
	margin: 0 0 20px;
}
.rs-404__latest {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 20px;
	list-style: none;
	margin: 0 0 64px;
	padding: 0;
}
.rs-404__img {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--rs-surface);
}
.rs-404__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rs-404__latest .wp-block-post-title {
	font-size: 19px;
	line-height: 1.25;
	font-weight: 700;
	margin: 0;
}
.rs-404__latest .wp-block-post-title a {
	color: var(--rs-text);
	text-decoration: none;
}

/* ==========================================================================
   13. Small screens
   ========================================================================== */
@media (max-width: 689px) {
	.rs-lead-row {
		padding-top: 24px;
	}
	.rs-section-title {
		font-size: 28px;
	}
	.rs-yt__play {
		width: 60px;
		height: 60px;
	}
}

/* Footer ad row (Ad Inserter block 4 in footer widget area 5, Blocksy footer top row; 9 Nov 2026).
   Hide the whole row when AdSense returns no ad, so no empty black band is left. */
footer [data-row*="top"]:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
footer .rs-footer-ad { text-align: center; }