/*
Theme Name:        RJED Foundation
Theme URI:         https://rjed.org
Author:            RJED
Author URI:        https://rjed.org
Description:       Official standalone foundational WordPress theme for Restorative Justice Education (RJED) — "Building a Culture of Peace." Custom-built, no parent theme dependency, no page builder. This theme is the permanent base every future RJED page and feature builds on.
Version:           1.6.0
Requires at least: 6.0
Tested up to:       6.9.4
Requires PHP:      7.4
License:           GNU General Public License v2 or later
License URI:       https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:       rjed-foundation
Domain Path:       /languages
*/

/* ==========================================================================
   RJED DESIGN TOKENS
   Single source of truth for colour, type, spacing and layout.
   Every component pulls from these variables — never hardcode raw values
   in component CSS. This is what lets the whole site rebrand or adjust
   in one place, ten years from now, without a rewrite.
   ========================================================================== */

:root {

	/* -----------------------------------------------------------------------
	   Colour — used sparingly per spec. Primary = Deep Blue, Secondary =
	   Forest Green, Accent = Muted Gold, used only for small emphasis moments.
	   ----------------------------------------------------------------------- */
	--rjed-color-primary:        #1B3A5C; /* Deep Blue */
	--rjed-color-primary-dark:   #12283F; /* Deep Blue — hover/active state */
	--rjed-color-primary-tint:   #E8EEF3; /* Deep Blue at ~6% for subtle backgrounds */

	--rjed-color-secondary:      #2F5233; /* Forest Green */
	--rjed-color-secondary-dark: #203A24; /* Forest Green — hover/active state */
	--rjed-color-secondary-tint: #EAF0EA; /* Forest Green at ~6% for subtle backgrounds */

	--rjed-color-accent:         #B8935A; /* Muted Gold — sparing use only */
	--rjed-color-accent-dark:    #96703F;

	--rjed-color-white:          #FFFFFF;
	--rjed-color-gray-soft:      #F4F5F7; /* Soft Gray background sections */
	--rjed-color-gray-border:    #E1E4E8; /* hairline borders, dividers */
	--rjed-color-gray-mid:       #6B7280; /* secondary/supporting text */
	--rjed-color-text:           #26313A; /* primary body text — AA on white */

	/* Focus ring — must remain highly visible per WCAG 2.4.7 */
	--rjed-color-focus:          #B8935A;

	/* -----------------------------------------------------------------------
	   Typography
	   ----------------------------------------------------------------------- */
	--rjed-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--rjed-font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--rjed-fs-h1:   clamp(2.5rem, 4.2vw + 1rem, 4rem);
	--rjed-fs-h2:   clamp(2rem, 2.4vw + 1rem, 2.75rem);
	--rjed-fs-h3:   clamp(1.375rem, 1vw + 1rem, 1.75rem);
	--rjed-fs-lead: clamp(1.125rem, 0.5vw + 1rem, 1.375rem);
	--rjed-fs-body: 1.0625rem;
	--rjed-fs-small: 0.9375rem;

	--rjed-lh-heading: 1.2;
	--rjed-lh-body:    1.7;

	/* -----------------------------------------------------------------------
	   Spacing scale — 8px base unit
	   ----------------------------------------------------------------------- */
	--rjed-space-1: 0.5rem;   /* 8px */
	--rjed-space-2: 1rem;     /* 16px */
	--rjed-space-3: 1.5rem;   /* 24px */
	--rjed-space-4: 2rem;     /* 32px */
	--rjed-space-5: 3rem;     /* 48px */
	--rjed-space-6: 4rem;     /* 64px */
	--rjed-space-7: 6rem;     /* 96px */
	--rjed-space-8: 8rem;     /* 128px */

	/* -----------------------------------------------------------------------
	   Layout
	   ----------------------------------------------------------------------- */
	--rjed-container-max: 1200px;
	--rjed-container-pad: clamp(1.25rem, 4vw, 2.5rem);
	--rjed-radius-sm: 6px;
	--rjed-radius-md: 12px;
	--rjed-radius-full: 999px;

	--rjed-shadow-sm: 0 1px 3px rgba(27, 58, 92, 0.08);
	--rjed-shadow-md: 0 8px 24px rgba(27, 58, 92, 0.10);

	--rjed-transition: 200ms ease;
}

/* ==========================================================================
   BASE / RESET
   Deliberately minimal — no CSS reset library, kept lean per performance
   requirement in the spec ("no unnecessary libraries").
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

body {
	margin: 0;
	font-family: var(--rjed-font-body);
	font-size: var(--rjed-fs-body);
	line-height: var(--rjed-lh-body);
	color: var(--rjed-color-text);
	background-color: var(--rjed-color-white);
	/* A faint, fixed wash of the brand's green and blue in the far
	   corners — evokes the "nature / calm" feeling the client asked for
	   sitewide, without ever running actual photography behind body
	   copy, where a photo's unpredictable colors could threaten AA text
	   contrast. This keeps every paragraph on the site safely on a near-
	   white surface while the page still doesn't read as flat white. */
	background-image:
		radial-gradient(ellipse 900px 600px at 100% 0%, rgba(47, 82, 51, 0.05), transparent 60%),
		radial-gradient(ellipse 900px 700px at 0% 100%, rgba(27, 58, 92, 0.05), transparent 60%);
	background-attachment: fixed;
	background-repeat: no-repeat;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--rjed-font-display);
	line-height: var(--rjed-lh-heading);
	color: var(--rjed-color-primary);
	margin: 0 0 var(--rjed-space-2);
	font-weight: 600;
}

h1 { font-size: var(--rjed-fs-h1); }
h2 { font-size: var(--rjed-fs-h2); }
h3 { font-size: var(--rjed-fs-h3); }

p {
	margin: 0 0 var(--rjed-space-3);
}

a {
	color: var(--rjed-color-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

a:hover {
	color: var(--rjed-color-primary-dark);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Visible focus state for every interactive element — required, not optional. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 3px solid var(--rjed-color-focus);
	outline-offset: 2px;
	border-radius: var(--rjed-radius-sm);
}

/* ==========================================================================
   SKIP LINK (accessibility)
   ========================================================================== */

.rjed-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--rjed-color-primary);
	color: var(--rjed-color-white);
	padding: var(--rjed-space-2) var(--rjed-space-3);
	border-radius: 0 0 var(--rjed-radius-sm) 0;
	font-weight: 600;
}

.rjed-skip-link:focus {
	left: 0;
}

/* ==========================================================================
   LAYOUT PRIMITIVES
   ========================================================================== */

.rjed-container {
	max-width: var(--rjed-container-max);
	margin-inline: auto;
	padding-inline: var(--rjed-container-pad);
}

.rjed-section {
	padding-block: var(--rjed-space-7);
}

.rjed-section--gray {
	background-color: var(--rjed-color-gray-soft);
}

.rjed-section-heading {
	text-align: center;
	max-width: 720px;
	margin-inline: auto;
	margin-bottom: var(--rjed-space-6);
}

.rjed-section-heading p {
	color: var(--rjed-color-gray-mid);
	font-size: var(--rjed-fs-lead);
	margin-bottom: 0;
}

/* Visually hidden but screen-reader accessible utility */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.rjed-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rjed-space-1);
	padding: 0.875rem 1.75rem;
	border-radius: var(--rjed-radius-full);
	font-weight: 600;
	font-size: var(--rjed-fs-body);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color var(--rjed-transition), border-color var(--rjed-transition), color var(--rjed-transition), transform var(--rjed-transition);
}

.rjed-btn:hover {
	transform: translateY(-1px);
}

.rjed-btn--primary {
	background-color: var(--rjed-color-primary);
	color: var(--rjed-color-white);
}

.rjed-btn--primary:hover {
	background-color: var(--rjed-color-primary-dark);
	color: var(--rjed-color-white);
}

.rjed-btn--secondary {
	background-color: transparent;
	border-color: var(--rjed-color-primary);
	color: var(--rjed-color-primary);
}

.rjed-btn--secondary:hover {
	background-color: var(--rjed-color-primary-tint);
}

/* ==========================================================================
   SIGNATURE MOTIF — interlocking circles
   Restorative Justice practice is built around circle process / talking
   circles. This is the recurring visual signature across the site: used
   as a quiet divider, decorative hero element, and the shape language for
   card icons. Rendered as inline SVG in template-parts, styled via this
   shared class so colour stays token-driven.
   ========================================================================== */

.rjed-circle-motif {
	color: var(--rjed-color-accent);
	opacity: 0.9;
}

.rjed-circle-motif--muted {
	color: var(--rjed-color-gray-border);
}

/* ==========================================================================
   HEADER
   ========================================================================== */

.rjed-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: var(--rjed-color-white);
	border-bottom: 1px solid var(--rjed-color-gray-border);
}

.rjed-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: var(--rjed-space-2);
	gap: var(--rjed-space-3);
}

.rjed-header__brand,
.rjed-header__logo-link {
	display: flex;
	align-items: center;
	gap: var(--rjed-space-2);
	text-decoration: none;
}

/* Constrains the REAL uploaded custom logo (via the_custom_logo()) to a
   sensible header height regardless of the native resolution of the file
   someone uploads — this is what lets us safely tell people to skip
   WordPress's crop step and keep their file at full, crisp resolution. */
.rjed-header__brand img.custom-logo,
.custom-logo-link img {
	max-height: 68px;
	width: auto;
	display: block;
}

@media (max-width: 640px) {
	.rjed-header__brand img.custom-logo,
	.custom-logo-link img {
		max-height: 52px;
	}
}

.rjed-header__logo-mark svg {
	display: block;
	width: 36px;
	height: 36px;
}

.rjed-header__logo-name {
	display: block;
	font-family: var(--rjed-font-display);
	font-weight: 700;
	font-size: 1.375rem;
	color: var(--rjed-color-primary);
	line-height: 1.1;
}

.rjed-header__logo-tagline {
	display: block;
	font-size: 0.8125rem;
	color: var(--rjed-color-gray-mid);
}

.rjed-header__menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: var(--rjed-space-1);
}

.rjed-header__menu-icon,
.rjed-header__menu-icon::before,
.rjed-header__menu-icon::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: var(--rjed-color-primary);
	border-radius: 1px;
	transition: transform var(--rjed-transition);
}

.rjed-header__menu-icon::before,
.rjed-header__menu-icon::after {
	content: '';
	position: relative;
}

.rjed-header__menu-icon::before { top: 6px; }
.rjed-header__menu-icon::after { top: 2px; }

.rjed-nav {
	display: flex;
	align-items: center;
	gap: var(--rjed-space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

.rjed-nav__item a {
	color: var(--rjed-color-text);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.9375rem;
}

.rjed-nav__item a:hover {
	color: var(--rjed-color-primary);
}

.rjed-nav__item--upcoming a {
	color: var(--rjed-color-gray-mid);
	cursor: default;
	pointer-events: none;
}

@media (max-width: 860px) {
	.rjed-header__menu-toggle {
		display: block;
	}

	.rjed-header__nav {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: var(--rjed-color-white);
		border-bottom: 1px solid var(--rjed-color-gray-border);
		display: none;
	}

	.rjed-header__nav #rjed-primary-menu.is-open {
		display: block;
	}

	.rjed-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		padding: var(--rjed-space-2) var(--rjed-container-pad) var(--rjed-space-3);
	}

	.rjed-nav__item {
		width: 100%;
		padding-block: var(--rjed-space-1);
	}
}

/* ==========================================================================
   HERO
   ========================================================================== */

.rjed-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--rjed-space-8) var(--rjed-space-7);
	background: linear-gradient(160deg, var(--rjed-color-white) 0%, var(--rjed-color-gray-soft) 70%, rgba(47, 82, 51, 0.07) 100%);
}

.rjed-hero__media {
	position: absolute;
	inset: -20px;
	z-index: 0;
	overflow: hidden;
}

.rjed-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Soft blur + slight desaturation keeps any uploaded photo calm and
	   secondary to the text, never competing with it — this is the
	   "atmosphere, not subject" treatment appropriate for a hero backdrop. */
	filter: blur(7px) saturate(0.9);
	transform: scale(1.06);
}

/* Brand-colour tint over the photo so any nature image a client uploads
   still reads as cohesively "on brand" rather than clashing with the
   palette, while letting the photo's own colour and light show through. */
.rjed-hero--has-image::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(160deg, rgba(27, 58, 92, 0.28) 0%, rgba(244, 245, 247, 0.55) 100%);
	pointer-events: none;
}

.rjed-hero__panel {
	background-color: rgba(255, 255, 255, 0.86);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-radius: var(--rjed-radius-md);
	padding: var(--rjed-space-6) var(--rjed-space-5);
	box-shadow: var(--rjed-shadow-md);
}

.rjed-hero__motif {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.rjed-hero__motif svg {
	width: 100%;
	height: 100%;
}

.rjed-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 760px;
	text-align: center;
	margin-inline: auto;
}

.rjed-hero__eyebrow {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	color: var(--rjed-color-secondary);
	margin-bottom: var(--rjed-space-2);
}

.rjed-hero__title {
	margin-bottom: var(--rjed-space-3);
}

.rjed-hero__lead {
	font-size: var(--rjed-fs-lead);
	color: var(--rjed-color-gray-mid);
	margin-bottom: var(--rjed-space-5);
}

.rjed-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rjed-space-2);
}

/* ==========================================================================
   CARD GRIDS
   ========================================================================== */

.rjed-card-grid {
	display: grid;
	gap: var(--rjed-space-4);
}

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

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

@media (max-width: 960px) {
	.rjed-card-grid--3,
	.rjed-card-grid--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.rjed-card-grid--3,
	.rjed-card-grid--4 {
		grid-template-columns: 1fr;
	}
}

.rjed-card {
	background-color: var(--rjed-color-white);
	border: 1px solid var(--rjed-color-gray-border);
	border-radius: var(--rjed-radius-md);
	padding: var(--rjed-space-4);
	transition: box-shadow var(--rjed-transition), transform var(--rjed-transition);
}

.rjed-focus-areas .rjed-card,
.rjed-why-rjed .rjed-card {
	text-align: left;
}

.rjed-card:hover {
	box-shadow: var(--rjed-shadow-md);
	transform: translateY(-2px);
}

.rjed-card__icon svg {
	width: 44px;
	height: 44px;
	display: block;
	margin-bottom: var(--rjed-space-2);
}

.rjed-card__emoji {
	display: block;
	font-size: 2rem;
	margin-bottom: var(--rjed-space-2);
	line-height: 1;
}

.rjed-card__title {
	font-size: 1.1875rem;
	margin-bottom: var(--rjed-space-1);
}

.rjed-card__text {
	color: var(--rjed-color-gray-mid);
	font-size: 0.9375rem;
	margin-bottom: var(--rjed-space-3);
}

.rjed-card--audience {
	text-align: left;
	display: flex;
	flex-direction: column;
}

.rjed-card--audience .rjed-btn {
	margin-top: auto;
	align-self: flex-start;
}

.rjed-btn--small {
	padding: 0.625rem 1.375rem;
	font-size: 0.9375rem;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */

.rjed-contact__inner {
	display: grid;
	grid-template-columns: minmax(240px, 360px) 1fr;
	gap: var(--rjed-space-6);
	align-items: start;
}

@media (max-width: 860px) {
	.rjed-contact__inner {
		grid-template-columns: 1fr;
	}
}

.rjed-contact__intro h2 {
	text-align: left;
}

.rjed-contact__email {
	margin-top: var(--rjed-space-4);
	font-size: 1.125rem;
	font-weight: 600;
}

.rjed-contact-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--rjed-space-3) var(--rjed-space-3);
	background-color: var(--rjed-color-white);
	border: 1px solid var(--rjed-color-gray-border);
	border-radius: var(--rjed-radius-md);
	padding: var(--rjed-space-4);
}

@media (max-width: 640px) {
	.rjed-contact-form {
		grid-template-columns: 1fr;
	}
}

.rjed-form-row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.rjed-form-row--full {
	grid-column: 1 / -1;
}

.rjed-form-row label {
	font-weight: 600;
	font-size: 0.9375rem;
}

.rjed-form-required {
	color: var(--rjed-color-secondary);
}

.rjed-form-row input,
.rjed-form-row textarea {
	font-family: inherit;
	font-size: 1rem;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--rjed-color-gray-border);
	border-radius: var(--rjed-radius-sm);
	background-color: var(--rjed-color-white);
	color: var(--rjed-color-text);
}

.rjed-form-row input:focus,
.rjed-form-row textarea:focus {
	border-color: var(--rjed-color-primary);
}

.rjed-form-row textarea {
	resize: vertical;
	min-height: 8rem;
}

.rjed-form-actions {
	display: flex;
	justify-content: flex-start;
}

.rjed-form-status {
	grid-column: 1 / -1;
	font-weight: 600;
	min-height: 1.5rem;
}

.rjed-form-status.is-success {
	color: var(--rjed-color-secondary);
}

.rjed-form-status.is-error {
	color: #9B2C2C;
}

/* Honeypot field: present in the DOM for bots, invisible and unreachable
   for people using a mouse, keyboard, or screen reader. */
.rjed-form-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.rjed-footer {
	background-color: var(--rjed-color-primary);
	color: rgba(255, 255, 255, 0.82);
	position: relative;
}

/* A restrained single hairline in the accent colour — the only place on
   the site the gold accent appears as a full-width line, marking the
   site's true end the way a title page or colophon would in print. */
.rjed-footer::before {
	content: '';
	display: block;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--rjed-color-accent) 20%, var(--rjed-color-accent) 80%, transparent);
	opacity: 0.6;
}

.rjed-footer__top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--rjed-space-5);
	padding-block: var(--rjed-space-6) var(--rjed-space-5);
}

@media (max-width: 860px) {
	.rjed-footer__top {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 560px) {
	.rjed-footer__top {
		grid-template-columns: 1fr;
	}
}

.rjed-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--rjed-space-1);
}

.rjed-footer__logo-mark svg {
	width: 34px;
	height: 34px;
	color: var(--rjed-color-accent);
}

.rjed-footer__name {
	font-family: var(--rjed-font-display);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--rjed-color-white);
	margin: var(--rjed-space-1) 0 0;
}

.rjed-footer__tagline {
	color: rgba(255, 255, 255, 0.65);
	font-size: 0.9375rem;
	margin-bottom: 0;
}

.rjed-footer__heading {
	color: var(--rjed-color-white);
	font-family: var(--rjed-font-body);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: var(--rjed-space-2);
}

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

.rjed-footer__menu a,
.rjed-footer__contact a {
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
	font-size: 0.9375rem;
}

.rjed-footer__menu a:hover,
.rjed-footer__contact a:hover {
	color: var(--rjed-color-accent);
}

.rjed-nav__item--upcoming a {
	color: rgba(255, 255, 255, 0.4);
}

.rjed-footer__contact {
	margin-bottom: var(--rjed-space-3);
}

.rjed-footer__cta {
	border-color: rgba(255, 255, 255, 0.4);
	color: var(--rjed-color-white);
}

.rjed-footer__cta:hover {
	background-color: rgba(255, 255, 255, 0.08);
	border-color: var(--rjed-color-white);
}

.rjed-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	padding-block: var(--rjed-space-3);
}

.rjed-footer__copyright {
	margin: 0;
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, 0.55);
}

/* ==========================================================================
   SCROLL REVEAL
   Gentle fade-in as sections enter the viewport, per the spec's animation
   guidance: subtle, not distracting. Enhancement only — every element
   here is fully visible by default (see .rjed-reveal below and the
   <noscript> override in header.php), so nothing depends on JS running.
   ========================================================================== */

.rjed-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 700ms ease-out, transform 700ms ease-out;
}

.rjed-reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.rjed-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ==========================================================================
   PAGE HEADER
   Compact hero-language banner for every interior page (About, Programs,
   Training, and anything created later).
   ========================================================================== */

.rjed-page-header {
	background: linear-gradient(160deg, var(--rjed-color-gray-soft) 0%, rgba(27, 58, 92, 0.05) 100%);
	padding-block: var(--rjed-space-6);
	border-bottom: 1px solid var(--rjed-color-gray-border);
}

.rjed-page-header__eyebrow {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-size: 0.8125rem;
	color: var(--rjed-color-secondary);
	margin-bottom: var(--rjed-space-1);
}

.rjed-page-header__title {
	margin-bottom: 0;
}

.rjed-page-header__lead {
	margin-top: var(--rjed-space-2);
	margin-bottom: 0;
	font-size: var(--rjed-fs-lead);
	color: var(--rjed-color-gray-mid);
	max-width: 640px;
}

/* ==========================================================================
   CONTENT TYPOGRAPHY
   Applies inside any WordPress-authored page/post content (the_content()
   output), so an editor writing in the block editor gets on-brand
   typography automatically — headings, links, lists, quotes, images,
   tables — without needing to apply any custom classes themselves.
   ========================================================================== */

.rjed-content-container {
	max-width: 780px;
}

.rjed-content h2 {
	margin-top: var(--rjed-space-6);
	font-size: var(--rjed-fs-h2);
}

.rjed-content h3 {
	margin-top: var(--rjed-space-5);
	font-size: var(--rjed-fs-h3);
}

.rjed-content h4 {
	margin-top: var(--rjed-space-4);
	font-size: 1.125rem;
	color: var(--rjed-color-text);
}

.rjed-content h2:first-child,
.rjed-content h3:first-child {
	margin-top: 0;
}

.rjed-content p,
.rjed-content ul,
.rjed-content ol {
	font-size: var(--rjed-fs-body);
	margin-bottom: var(--rjed-space-3);
}

.rjed-content ul,
.rjed-content ol {
	padding-left: 1.375rem;
}

.rjed-content li {
	margin-bottom: 0.5rem;
}

.rjed-content a {
	color: var(--rjed-color-primary);
	text-decoration-line: underline;
	text-decoration-color: var(--rjed-color-accent);
	text-decoration-thickness: 1.5px;
}

.rjed-content a:hover {
	color: var(--rjed-color-primary-dark);
}

.rjed-content blockquote {
	margin: var(--rjed-space-5) 0;
	padding: var(--rjed-space-3) var(--rjed-space-4);
	border-left: 3px solid var(--rjed-color-accent);
	background-color: var(--rjed-color-gray-soft);
	border-radius: 0 var(--rjed-radius-sm) var(--rjed-radius-sm) 0;
	font-family: var(--rjed-font-display);
	font-style: italic;
	font-size: 1.1875rem;
	color: var(--rjed-color-primary);
}

.rjed-content blockquote p:last-child {
	margin-bottom: 0;
}

.rjed-content figure {
	margin: var(--rjed-space-5) 0;
}

.rjed-content img {
	border-radius: var(--rjed-radius-md);
	box-shadow: var(--rjed-shadow-sm);
}

.rjed-content figcaption {
	margin-top: var(--rjed-space-1);
	font-size: 0.875rem;
	color: var(--rjed-color-gray-mid);
	text-align: center;
}

.rjed-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--rjed-space-4);
	font-size: 0.9375rem;
}

.rjed-content th,
.rjed-content td {
	border: 1px solid var(--rjed-color-gray-border);
	padding: var(--rjed-space-1) var(--rjed-space-2);
	text-align: left;
}

.rjed-content th {
	background-color: var(--rjed-color-gray-soft);
	font-weight: 700;
}

.rjed-content hr {
	border: none;
	border-top: 1px solid var(--rjed-color-gray-border);
	margin-block: var(--rjed-space-5);
}

.rjed-page-links {
	margin-top: var(--rjed-space-5);
	padding-top: var(--rjed-space-3);
	border-top: 1px solid var(--rjed-color-gray-border);
	font-size: 0.9375rem;
}

.rjed-page-links a {
	margin-left: var(--rjed-space-1);
}