/*
Theme Name: Seashell Garnet
Theme URI: https://digitaltechfusion.ca
Author: Digital Tech Fusion
Author URI: https://digitaltechfusion.ca
Description: A bolder take on the same Seashell Garnet palette used by Warm Seashell — blue-green (a light wash of the picked powder blue) as the page's dominant foundation throughout, with the picked teal as one richer block for the hero, subscribe panel, and footer. Pink (coral) is reserved for links, buttons, and kickers, exactly as Nicole's brief asks; body text stays black everywhere, including on the teal block itself.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: clf-seashell-garnet
Tags: blog, custom-colors, custom-menu, translation-ready, accessibility-ready
*/

/* ==========================================================================
   1. Design tokens — Seashell Garnet, muted variant palette (client-specified)
   #E7C892 (peach) #D7717E (coral) #B2BED1 (powder blue)
   #C095A4 (dusty rose) #619FA0 (teal) #6783A2 (steel blue)

   Nicole's brief: "primarily blue-green colour scheme with pink as the
   accent colour... all text in black, and all links and buttons in pink."
   This theme takes that literally — blue-green (the picked teal and a wash
   of the picked powder blue) is the dominant colour across the whole page,
   not just one block; pink (coral) is reserved for links, buttons, and
   kickers; text stays black throughout, including on the teal itself,
   which is where the picked teal turns out to sit exactly right (raw,
   undarkened #619FA0 gives black text 6:1 contrast — better than white
   text manages on it at 3:1, so black text was always the correct pairing,
   independent of "how bold" the design is meant to feel). The one thing
   that has to be avoided is two different medium-saturation blues sitting
   next to each other with no light/dark relationship — that's what read as
   unfinished before. The fix is a light wash of the picked powder blue for
   the page canvas, so the medium teal block still reads as the one bolder
   moment against it, rather than two competing mid-tones. */
:root {
	--clf-peach: #E7C892;
	--clf-coral: #D7717E;
	--clf-pale: #B2BED1;
	--clf-rose: #C095A4;
	--clf-teal: #619FA0;
	--clf-secure-color: var(--clf-teal);
	--clf-steel: #6783A2;

	/* Section wash tints — light enough for black text (all >7:1), strong
	   enough to read as genuinely colourful rather than off-white. */
	--clf-wash-peach: #F5E6CC;
	--clf-wash-coral: #F0CDD2;
	--clf-wash-powder: #E2E7EF;
	--clf-wash-rose: #EADFE3;
	--clf-wash-teal: #C7DEDE;
	--clf-wash-steel: #D3DDE7;
	/* The true picked teal, used as-is (see note above on why black text
	   makes this the right pairing rather than a compromise). */
	--clf-deep-teal: #619FA0;

	/* A light wash of the picked powder blue — the blue-green foundation
	   Nicole asked for, present on every page, not just one block — kept
	   light enough that the teal hero/subscribe/footer still reads as the
	   one richer moment rather than fighting an equally-saturated canvas.
	   White stays reserved for card surfaces (--clf-bg-alt). */
	--clf-bg: #E0E5EC;
	--clf-bg-alt: #FFFFFF;
	--clf-bg-inverse: var(--clf-deep-teal);
	--clf-text: #14161A;
	--clf-text-muted: #4E555A;
	--clf-text-inverse: #14161A;
	--clf-text-inverse-muted: #1A2A2B;
	--clf-heading: #101418;

	/* Darkened, AA-checked derivative of the true #D7717E coral (the raw
	   value only reaches ~3:1 on light backgrounds, so it can't carry body
	   text on its own) — same approach as Warm Seashell, so both themes'
	   link colour is genuinely traceable to the same source swatch. */
	--clf-link: #964F58;
	--clf-link-hover: #81434B;
	--clf-accent: #D7717E;
	--clf-accent-text: #14161A;
	--clf-accent-soft: #F7E2E5;
	--clf-accent-contrast: #14161A;

	--clf-border: rgba(16, 20, 24, 0.16);
	--clf-border-inverse: rgba(16, 20, 24, 0.25);
	--clf-focus: #101418;
	--clf-focus-width: 2px;
	--clf-shadow: 0 16px 34px -16px rgba(16, 30, 30, 0.32);

	--clf-radius: 1rem;
	--clf-radius-scale: 1;
	--clf-radius-computed: calc(var(--clf-radius) * var(--clf-radius-scale, 1));
	--clf-radius-pill: 999px;

	--clf-content-width: 66ch;
	--clf-wide-width: 78rem;

	/* Headings moved to a serif at the client's request — a system serif
	   stack, so no font file to load or licence to track. Body stays on
	   the system sans for comfortable long-form reading. */
	--clf-font-heading: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
	--clf-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--clf-bg);
	color: var(--clf-text);
	font-family: var(--clf-font-body);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--clf-link); text-underline-offset: 3px; }
a:hover { color: var(--clf-link-hover); }
a.clf-link-plain { text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--clf-font-heading);
	color: var(--clf-heading);
	line-height: 1.15;
	margin: 0 0 0.55em;
	font-weight: 700;
}
h1 { font-size: clamp(2.6rem, 1.9rem + 3vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 1.6rem + 1.4vw, 2.8rem); }
h3 { font-size: clamp(1.35rem, 1.2rem + 0.7vw, 1.7rem); }
p { margin: 0 0 1.1em; }

.clf-container {
	width: 100%;
	max-width: var(--clf-wide-width);
	margin-inline: auto;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

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

/* ==========================================================================
   3. Buttons & links
   ========================================================================== */
.clf-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--clf-font-body);
	font-weight: 700;
	/* Re-anchored to the new 150%-by-default text scale (see accessibility.css)
	   so buttons land at roughly their old physical size at Default, rather
	   than growing 1.5x along with everything else — while still scaling up
	   properly if a visitor moves to a larger accessibility step, since this
	   is rem (root-relative), not a fixed px value. */
	font-size: 0.65rem;
	letter-spacing: 0.01em;
	padding: 0.85em 1.6em;
	border-radius: var(--clf-radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.clf-btn--primary {
	background: var(--clf-accent);
	color: var(--clf-accent-text);
	box-shadow: 0 10px 24px -10px rgba(215, 113, 126, 0.65);
}
.clf-btn--primary:hover { background: var(--clf-link-hover); color: #fff; transform: translateY(-2px); }
.clf-btn--ghost {
	background: rgba(255, 255, 255, 0.6);
	color: var(--clf-heading);
	border-color: var(--clf-heading);
}
.clf-btn--ghost:hover { background: var(--clf-heading); color: #fff; }
.clf-btn--inverse {
	background: var(--clf-accent);
	color: var(--clf-accent-text);
}
.clf-btn--on-dark { border-color: var(--clf-text-inverse); color: var(--clf-text-inverse); }
.clf-btn--on-dark:hover { background: var(--clf-text-inverse); color: var(--clf-bg-inverse); }
@media (prefers-reduced-motion: reduce) { .clf-btn { transition: none; } }

/* ==========================================================================
   4. Header & navigation — white, stays neutral above the colour-blocked sections
   ========================================================================== */
.clf-site-header {
	background: var(--clf-bg);
	border-bottom: 2px solid var(--clf-heading);
	position: sticky;
	top: 0;
	z-index: 100;
}
.clf-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 1.1rem;
}
.clf-logo {
	font-family: var(--clf-font-heading);
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--clf-heading);
	text-decoration: none;
	letter-spacing: -0.01em;
}
.clf-logo span { color: var(--clf-link); }

.clf-nav-toggle {
	display: none;
	background: none;
	border: 2px solid var(--clf-heading);
	border-radius: 0.5rem;
	padding: 0.5em 0.7em;
	cursor: pointer;
}

.clf-primary-nav ul {
	list-style: none;
	display: flex;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}
.clf-primary-nav a {
	text-decoration: none;
	color: var(--clf-heading);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.83rem;
	letter-spacing: 0.06em;
	padding: 0.5em 0.9em;
	border-radius: var(--clf-radius-pill);
	display: inline-block;
}
.clf-primary-nav a:hover { background: var(--clf-wash-peach); }
.clf-primary-nav .current-menu-item a { background: var(--clf-accent); color: var(--clf-accent-text); }

.clf-header-right { display: flex; align-items: center; gap: 1rem; }

@media (max-width: 780px) {
	.clf-nav-toggle { display: inline-flex; }
	.clf-primary-nav {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--clf-bg);
		border-bottom: 2px solid var(--clf-heading);
		padding: 1rem clamp(1.25rem, 4vw, 3rem) 1.5rem;
	}
	.clf-primary-nav.is-open { display: block; }
	.clf-primary-nav ul { flex-direction: column; gap: 0.5rem; }
	.clf-header-inner { flex-wrap: wrap; }
	/* justify-content: space-between only spaces items apart when a wrapped
	   row has more than one of them on it — at most sizes the hamburger
	   button wraps down alongside the a11y toggle, so space-between
	   correctly pushes the toggle to the right edge. But at XS the logo
	   text is narrow enough that the hamburger fits next to it on row one,
	   leaving the toggle alone on row two — and a lone item under
	   space-between sits at the row's start (left), not its end. Explicit
	   margin-left: auto pushes it to the right edge of whatever row it
	   lands on regardless of who else is sharing that row, so this can't
	   silently flip again at some other size. */
	.clf-header-right { margin-left: auto; }
}

/* "Home / About / Blog" in a plain horizontal row has nothing forcing it
   to wrap either, and three nav links plus the logo and the a11y toggle
   compete for the same row — fine up to 780px normally, but at the two
   enlarged text-size steps that same row can outgrow much wider viewports
   too (confirmed overflowing a 1366px laptop width at Maximum with the old
   1300px breakpoint). Collapses into the same hamburger menu well before
   that, with enough margin to cover common laptop widths. */
@media (max-width: 1500px) {
	html[data-clf-text-size="lg"] .clf-nav-toggle,
	html[data-clf-text-size="x4l"] .clf-nav-toggle { display: inline-flex; }

	html[data-clf-text-size="lg"] .clf-primary-nav,
	html[data-clf-text-size="x4l"] .clf-primary-nav {
		display: none;
		position: absolute;
		top: 100%; left: 0; right: 0;
		background: var(--clf-bg);
		border-bottom: 2px solid var(--clf-heading);
		padding: 1rem clamp(1.25rem, 4vw, 3rem) 1.5rem;
	}
	html[data-clf-text-size="lg"] .clf-primary-nav.is-open,
	html[data-clf-text-size="x4l"] .clf-primary-nav.is-open { display: block; }

	html[data-clf-text-size="lg"] .clf-primary-nav ul,
	html[data-clf-text-size="x4l"] .clf-primary-nav ul { flex-direction: column; gap: 0.5rem; }

	html[data-clf-text-size="lg"] .clf-header-inner,
	html[data-clf-text-size="x4l"] .clf-header-inner { flex-wrap: wrap; }
}

/* ==========================================================================
   5. Hero — full-bleed peach band, white floating art panel
   ========================================================================== */
.clf-hero {
	padding-block: clamp(2.5rem, 5vw, 5rem);
	overflow: hidden;
	background: var(--clf-deep-teal);
}
.clf-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.clf-hero h1, .clf-hero-title { color: var(--clf-heading); margin-bottom: 0.5rem; }
.clf-hero-eyebrow {
	display: inline-block;
	font-weight: 800;
	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* The picked peach/pink don't have enough contrast against this teal to
	   carry text (checked: ~1.9:1) — black does (6:1), which is also
	   exactly what the brief asks for, so it's not a compromise. */
	color: var(--clf-heading);
	margin-bottom: 1rem;
}
.clf-hero-subtitle {
	font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem);
	color: var(--clf-text-inverse-muted);
	max-width: 34ch;
	margin-bottom: 1.75rem;
}
.clf-hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.clf-hero .clf-btn--ghost { background: transparent; color: var(--clf-heading); border-color: rgba(16,20,24,0.45); }
.clf-hero .clf-btn--ghost:hover { background: var(--clf-heading); color: #fff; border-color: var(--clf-heading); }

.clf-hero-art {
	position: relative;
	display: flex;
	justify-content: center;
}
.clf-hero-art__frame {
	position: relative;
	background: var(--clf-peach);
	border-radius: calc(var(--clf-radius-computed) * 1.3);
	width: min(100%, 26rem);
	aspect-ratio: 1 / 1;
}
.clf-hero-art__panel {
	position: absolute;
	inset: 14px;
	background: var(--clf-bg-alt);
	border-radius: var(--clf-radius-computed);
	box-shadow: var(--clf-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.2rem;
}
.clf-hero-art__panel img { max-width: 78%; max-height: 78%; object-fit: contain; }

@media (max-width: 900px) {
	.clf-hero-grid { grid-template-columns: minmax(0, 1fr); }
	.clf-hero-art { order: -1; }
}

/* ==========================================================================
   6. Sections & rhythm — each section is a colour-block; content cards inside
   stay white for legibility. Section colour rotates through the full palette
   so the whole page reads as a deliberate colour journey.
   ========================================================================== */
.clf-section { padding-block: clamp(3rem, 6vw, 5.5rem); }
.clf-section--alt { background: var(--clf-bg-alt); }
.clf-section--inverse {
	background: var(--clf-bg-inverse);
	color: var(--clf-text-inverse);
}
.clf-section--inverse h2, .clf-section--inverse h3 { color: var(--clf-text-inverse); }
.clf-section--inverse p { color: var(--clf-text-inverse-muted); }
.clf-section-head { max-width: 42rem; margin-bottom: 2.5rem; }
.clf-section-head--center { margin-inline: auto; text-align: center; }
.clf-kicker {
	display: inline-block;
	font-weight: 800;
	font-size: 0.78rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--clf-link);
	margin-bottom: 0.6rem;
}
.clf-section--inverse .clf-kicker { color: var(--clf-peach); }

.clf-lede { font-size: 1.15rem; color: var(--clf-text); }

/* Welcome section (powder blue wash) */
.clf-welcome-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
}
.clf-welcome-points { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.clf-welcome-points li {
	display: flex; gap: 0.8rem; align-items: flex-start;
	background: var(--clf-bg-alt);
	border-radius: var(--clf-radius-computed);
	padding: 1rem 1.2rem;
	box-shadow: var(--clf-shadow);
}
.clf-welcome-points .clf-dot {
	flex: none;
	width: 1.6rem; height: 1.6rem;
	border-radius: 50%;
	background: var(--clf-accent);
	color: var(--clf-accent-text);
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 0.85rem;
}
@media (max-width: 860px) { .clf-welcome-grid { grid-template-columns: minmax(0, 1fr); } }

/* Reasons + poll (white section — keeps a dense list readable) */
.clf-reasons-note {
	font-size: 0.95rem;
	color: var(--clf-text-muted);
	border-left: 3px solid var(--clf-accent);
	padding-left: 0.9rem;
	margin-bottom: 2rem;
}
.clf-poll {
	background: var(--clf-bg-alt);
	border-radius: calc(var(--clf-radius-computed) * 1.4);
	padding: clamp(1.5rem, 3vw, 2.5rem);
	box-shadow: var(--clf-shadow);
}
.clf-poll fieldset { border: none; margin: 0; padding: 0; }
.clf-poll__options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; }
.clf-poll__option {
	display: flex; gap: 0.9rem; align-items: flex-start;
	background: #F0EEEC;
	border-radius: var(--clf-radius-computed);
	padding: 0.9rem 1.1rem;
	cursor: pointer;
}
.clf-poll__option:has(input:checked) { background: var(--clf-accent-soft); box-shadow: inset 0 0 0 2px var(--clf-accent); }
.clf-poll__option input { margin-top: 0.3em; flex: none; width: 1.1em; height: 1.1em; accent-color: var(--clf-link); }
.clf-poll__option-num {
	font-family: var(--clf-font-heading);
	font-weight: 800;
	font-size: 1.2rem;
	color: var(--clf-link);
	flex: none;
}
.clf-poll__option-text, .clf-welcome-points li > div { min-width: 0; }
@media (max-width: 720px) { .clf-poll__options { grid-template-columns: minmax(0, 1fr); } }
.clf-poll__note { font-size: 0.85rem; color: var(--clf-text-muted); margin-top: 0.9rem; margin-bottom: 0; }
.clf-poll__already-voted {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	background: var(--clf-accent-soft);
	border-left: 4px solid var(--clf-accent);
	color: var(--clf-heading);
	font-weight: 700;
	font-size: 0.95rem;
	padding: 0.85rem 1.1rem;
	border-radius: 0.5rem;
	margin: 0 0 1.25rem;
}
.clf-poll__results-title { font-size: 1.1rem; }
.clf-poll__bars { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
.clf-poll__bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; }
.clf-poll__bar-label { font-size: 0.92rem; font-weight: 700; }
.clf-poll__bar--chosen .clf-poll__bar-label { color: var(--clf-link); }
.clf-poll__bar-track { display: block; background: #F0EEEC; border-radius: 999px; height: 0.6rem; overflow: hidden; }
.clf-poll__bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--clf-teal), var(--clf-accent)); border-radius: 999px; }
.clf-poll__bar-value { font-size: 0.8rem; color: var(--clf-text-muted); }
.clf-poll__change { background: none; border: none; padding: 0; color: var(--clf-link); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Topics (dusty rose wash) */
.clf-topics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.clf-topic-card {
	background: var(--clf-bg-alt);
	border-radius: calc(var(--clf-radius-computed) * 1.3);
	overflow: hidden;
	box-shadow: var(--clf-shadow);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.clf-topic-card:hover { transform: translateY(-4px); }
.clf-topic-card__media { aspect-ratio: 16/10; overflow: hidden; }
.clf-topic-card__media img { width: 100%; height: 100%; object-fit: cover; }
.clf-topic-card__body { padding: 1.4rem 1.5rem 1.7rem; }
.clf-topic-card__body h3 { margin-bottom: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .clf-topic-card { transition: none; } }
@media (max-width: 900px) { .clf-topics-grid { grid-template-columns: minmax(0, 1fr); } }

/* Subscribe — the boldest band on the page: full-saturation deep teal */
.clf-subscribe-panel {
	background: var(--clf-deep-teal);
	color: var(--clf-text-inverse);
	border-radius: calc(var(--clf-radius-computed) * 1.4);
	padding: clamp(2rem, 4vw, 3.5rem);
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 2rem;
	align-items: center;
}
.clf-subscribe-panel > * { min-width: 0; }
.clf-subscribe-panel h2 { color: var(--clf-heading); }
.clf-subscribe-panel p { color: var(--clf-text-inverse-muted); }
.clf-subscribe__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.clf-subscribe input[type="email"] {
	flex: 1 1 14rem;
	padding: 0.85em 1.1em;
	border-radius: var(--clf-radius-pill);
	border: 2px solid transparent;
	font: inherit;
	min-width: 0;
}
.clf-subscribe input[type="email"]:focus-visible { outline: 3px solid var(--clf-peach); outline-offset: 2px; }
.clf-subscribe__hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.clf-subscribe__status { min-height: 1.4em; font-weight: 700; margin-top: 0.75rem; }
.clf-subscribe__status.is-success { color: var(--clf-link); }
.clf-subscribe__status.is-error { color: #B23A3A; }
.clf-subscribe__note { font-size: 0.76rem; color: var(--clf-text-muted); margin-top: 0.4rem; }
.clf-subscribe-panel .clf-subscribe__status.is-success { color: var(--clf-peach); }
.clf-subscribe-panel .clf-subscribe__status.is-error { color: #ffb4b4; }
.clf-subscribe-panel .clf-subscribe__note { color: var(--clf-text-inverse-muted); opacity: 0.9; }
@media (max-width: 780px) { .clf-subscribe-panel { grid-template-columns: minmax(0, 1fr); } }

/* Compact subscribe CTA — reused on About, single posts, and the Blog page */
.clf-inline-subscribe {
	background: var(--clf-wash-powder);
	border-radius: calc(var(--clf-radius-computed) * 1.2);
	padding: clamp(1.5rem, 4vw, 2.25rem);
	margin: 3rem 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
}
.clf-inline-subscribe > * { min-width: 0; }
.clf-inline-subscribe__text h3 { margin-bottom: 0.3rem; }
.clf-inline-subscribe__text p { margin: 0; color: var(--clf-text-muted); }
@media (max-width: 700px) { .clf-inline-subscribe { grid-template-columns: minmax(0, 1fr); text-align: center; } .clf-inline-subscribe .clf-subscribe__row { justify-content: center; } }
.clf-article-body + .clf-inline-subscribe { max-width: var(--clf-content-width); margin-left: auto; margin-right: auto; }

/* Security section */
.clf-security { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1.5rem; align-items: center; }
.clf-security__icon {
	width: 3.4rem; height: 3.4rem; border-radius: 50%;
	background: var(--clf-bg-alt); color: var(--clf-link);
	display: flex; align-items: center; justify-content: center; flex: none;
	box-shadow: var(--clf-shadow);
}
@media (max-width: 720px) { .clf-security { grid-template-columns: minmax(0, 1fr); text-align: center; } .clf-security__icon { margin-inline: auto; } }

/* ==========================================================================
   7. Blog cards & listing
   ========================================================================== */
.clf-blog-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 2.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--clf-heading);
}
.clf-sort-group { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; background: #F0EEEC; border-radius: var(--clf-radius-pill); padding: 0.3rem; }
.clf-sort-group a {
	text-decoration: none;
	padding: 0.5em 1.1em;
	border-radius: var(--clf-radius-pill);
	color: var(--clf-heading);
	font-weight: 700;
	font-size: 0.88rem;
}
.clf-sort-group a[aria-current="true"] { background: var(--clf-accent); color: var(--clf-accent-text); }

.clf-post-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
.clf-post-card {
	background: var(--clf-bg-alt);
	border-radius: calc(var(--clf-radius-computed) * 1.3);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--clf-shadow);
}
.clf-post-card__media { aspect-ratio: 16/10; overflow: hidden; }
.clf-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.clf-post-card__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.clf-post-meta { font-size: 0.8rem; color: var(--clf-text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.6rem; }
.clf-post-card__body h3 { margin-bottom: 0.5rem; font-size: 1.25rem; }
.clf-post-card__body h3 a { text-decoration: none; color: var(--clf-heading); }
.clf-post-card__body h3 a:hover { color: var(--clf-link); }
.clf-post-card__excerpt { color: var(--clf-text-muted); flex: 1; }
.clf-post-card__more { font-weight: 700; margin-top: 0.5rem; }
@media (max-width: 780px) { .clf-post-grid { grid-template-columns: minmax(0, 1fr); } }

.clf-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin-top: 3rem; }
.clf-pagination a, .clf-pagination span {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem;
	border-radius: 0.5rem; border: 2px solid var(--clf-heading);
	text-decoration: none; color: var(--clf-heading); font-weight: 700;
}
.clf-pagination .current { background: var(--clf-accent); border-color: var(--clf-accent); color: var(--clf-accent-text); }

/* ==========================================================================
   8. Single post & article typography
   ========================================================================== */
.clf-article-header { max-width: var(--clf-content-width); margin: 0 auto 2rem; }
.clf-article-meta { display: flex; gap: 1rem; flex-wrap: wrap; color: var(--clf-text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.clf-article-featured { border-radius: calc(var(--clf-radius-computed) * 1.3); overflow: hidden; margin-bottom: 2.5rem; box-shadow: var(--clf-shadow); }
.clf-article-featured img { width: 100%; }

.clf-article-body {
	max-width: var(--clf-content-width);
	margin: 0 auto;
	font-size: 1.1rem;
}
.clf-article-body p { margin-bottom: 1.4em; }
.clf-article-body h2 { margin-top: 1.8em; }
.clf-article-body h3 { margin-top: 1.5em; }
.clf-article-body blockquote {
	font-family: var(--clf-font-heading);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--clf-heading);
	background: var(--clf-wash-peach);
	border-radius: var(--clf-radius-computed);
	margin: 2em 0;
	padding: 1em 1.4rem;
}
.clf-article-body img { border-radius: var(--clf-radius-computed); margin: 1.5em 0; }
.clf-article-body ul, .clf-article-body ol { padding-left: 1.4em; margin-bottom: 1.4em; }
.clf-article-body a { text-decoration-thickness: 2px; }

.clf-article-nav {
	max-width: var(--clf-content-width);
	margin: 3rem auto 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	padding-top: 2rem;
	border-top: 2px solid var(--clf-heading);
}
.clf-article-nav__link {
	text-decoration: none;
	color: var(--clf-heading);
	background: #F0EEEC;
	border-radius: var(--clf-radius-computed);
	padding: 1rem 1.2rem;
	display: block;
}
.clf-article-nav__link:hover { background: var(--clf-accent-soft); }
.clf-article-nav__dir { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--clf-text-muted); display: block; margin-bottom: 0.3rem; }
.clf-article-nav__next { text-align: right; }
@media (max-width: 640px) { .clf-article-nav { grid-template-columns: minmax(0, 1fr); } .clf-article-nav__next { text-align: left; } }

.clf-back-to-blog { display: inline-flex; align-items: center; gap: 0.4em; max-width: var(--clf-content-width); margin: 0 auto 1.5rem; text-decoration: none; font-weight: 700; }

/* ==========================================================================
   9. Comments
   ========================================================================== */
.clf-comments { max-width: var(--clf-content-width); margin: 3rem auto 0; }
.comment-notes { color: var(--clf-text-muted); }
.clf-comment-anon {
	background: #F0EEEC;
	border-radius: var(--clf-radius-computed);
	padding: 1rem 1.2rem;
	margin-bottom: 1.2rem;
}
.clf-comment-anon__label { display: flex; gap: 0.6rem; align-items: center; font-weight: 700; cursor: pointer; }
.clf-comment-anon__label input { width: 1.2em; height: 1.2em; accent-color: var(--clf-link); }
.clf-comment-anon__hint { display: block; margin-top: 0.4rem; font-size: 0.87rem; color: var(--clf-text-muted); }

.comment-form p { margin-bottom: 1.1rem; }
.comment-form label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form textarea {
	width: 100%; padding: 0.75em 0.9em; border-radius: 0.5rem; border: 2px solid var(--clf-border); font: inherit; background: var(--clf-bg-alt); color: var(--clf-text);
}
.comment-form input:focus-visible, .comment-form textarea:focus-visible { outline: 3px solid var(--clf-focus); outline-offset: 1px; }
.clf-field-hint { display: block; font-weight: 400; font-size: 0.82rem; color: var(--clf-text-muted); margin-top: 0.3rem; }
.clf-comment-name-email[hidden] { display: none; }

.comment-list { list-style: none; margin: 2rem 0 0; padding: 0; }
.comment-list .comment { border-radius: var(--clf-radius-computed); padding: 1.2rem 1.4rem; margin-bottom: 1rem; background: #F0EEEC; }
.comment-list .comment-author { font-weight: 700; }
.comment-list .comment-metadata { font-size: 0.82rem; color: var(--clf-text-muted); margin-bottom: 0.5rem; }
.comment-list .comment-metadata a { color: inherit; }

/* ==========================================================================
   10. About page article
   ========================================================================== */
.clf-about-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
/* Never had a stacking breakpoint at all — the text column was getting
   squeezed down to almost nothing on phones, wrapping "Hi there" onto
   four separate lines one word at a time. */
@media (max-width: 780px) {
	.clf-about-hero { grid-template-columns: minmax(0, 1fr); }
}
.clf-about-photo { margin: 0; }
.clf-about-photo > div {
	aspect-ratio: 4/3;
	border-radius: calc(var(--clf-radius-computed) * 1.4);
	background: linear-gradient(160deg, var(--clf-peach), var(--clf-accent));
	overflow: hidden;
	box-shadow: 0 20px 44px -20px rgba(0,0,0,0.45);
}
/* object-fit: contain, not cover — the client specifically wants the
   whole piece visible, signature included, rather than cropped to fill
   a portrait frame. The aspect-ratio above matches the source image
   exactly (4028×3021 = 4:3), so contain fills the frame edge-to-edge
   with no letterboxing; it only starts letterboxing if a differently-
   shaped image is ever swapped in later, which is the safer failure
   mode compared to silently cropping someone out of the frame. */
.clf-about-photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The caption sits below the frame rather than overlaid on the image —
   an overlay would risk covering the artist's signature in the bottom
   corner, which is exactly what the client wants left visible.
   Sized and coloured to match normal body copy rather than the smaller,
   muted, italic treatment captions usually get — this audience skews
   older, and a de-emphasized caption is exactly the wrong instinct here.
   --clf-text (not --clf-text-muted) against this teal is the same
   full-strength black-on-teal pairing the rest of the hero already
   relies on for contrast (see the :root note on --clf-deep-teal). */
.clf-about-photo figcaption {
	margin-top: 0.6rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--clf-text);
	text-align: right;
}
.clf-pullquote {
	font-family: var(--clf-font-heading);
	font-size: 1.4rem; font-weight: 700; color: var(--clf-heading);
	background: var(--clf-wash-peach);
	border-radius: var(--clf-radius-computed);
	padding: 1.2em 1.5em; margin: 2em 0; text-align: center;
}

/* Nicole's own bio, written as a personal letter rather than a blog post —
   sized up from the general article body and given more breathing room
   between lines, since her audience (people considering a return to
   church after years away) skews older and this is the first thing many
   of them will read on the site. A slightly narrower measure than the
   article default keeps each line short enough to track easily at this
   larger size. */
.clf-about-bio {
	max-width: 58ch;
	font-size: 1.25rem;
	line-height: 1.85;
}
.clf-about-bio p { margin-bottom: 1.6em; }
.clf-about-bio .clf-pullquote { font-size: 1.5rem; }

/* ==========================================================================
   11. Blog hero (Blog landing page) — coral wash
   ========================================================================== */
/* Blog hero echoes the Home hero's deep-teal block treatment exactly, so
   every page's hero reads as the same bold statement rather than each page
   introducing its own colour. */
.clf-blog-hero { text-align: center; padding-block: clamp(2.5rem, 5vw, 4.5rem); background: var(--clf-deep-teal); margin-bottom: clamp(3rem, 6vw, 5.5rem); }
.clf-blog-hero h1 { color: var(--clf-heading); }
.clf-blog-hero__art {
	width: min(100%, 22rem);
	aspect-ratio: 3/2;
	margin: 0 auto 2rem;
	border-radius: calc(var(--clf-radius-computed) * 1.4);
	background: var(--clf-bg-alt);
	overflow: hidden;
	box-shadow: var(--clf-shadow);
}
.clf-blog-hero__art img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   12. Footer — deep teal, matches the subscribe band
   ========================================================================== */
.clf-site-footer { background: var(--clf-deep-teal); color: var(--clf-text-inverse-muted); padding-block: 3.5rem 2rem; margin-top: 4rem; }
.clf-footer-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--clf-border-inverse); }
.clf-footer-brand { font-family: var(--clf-font-heading); font-size: 1.2rem; color: var(--clf-heading); margin-bottom: 0.6rem; }
.clf-footer-col h4 { color: var(--clf-heading); font-family: var(--clf-font-body); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; }
.clf-footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
.clf-footer-col a { color: var(--clf-text-inverse-muted); text-decoration: none; }
.clf-footer-col a:hover { color: var(--clf-heading); text-decoration: underline; }
.clf-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; font-size: 0.85rem; }
.clf-footer-bottom a { color: var(--clf-heading); font-weight: 700; text-decoration: underline; }
@media (max-width: 780px) { .clf-footer-grid { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   13. Utility
   ========================================================================== */
.clf-mt-0 { margin-top: 0; }
.clf-decorative { pointer-events: none; }
.clf-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* ==========================================================================
   14. Narrow-viewport safety net for the new higher text-size ceiling
   (4XL now goes up to 310% root, vs. 212.5% before). Several paddings use
   clamp() with a rem-based floor — rem scales with root font-size too, so
   at 4XL + a narrow phone width that floor alone can consume most of the
   viewport (confirmed: the "Stay Connected" kicker was overflowing past
   the right edge at 375px+4XL before this). Re-floors the worst offenders
   with smaller, mostly-vw-driven values that hold up at the new ceiling.
   ========================================================================== */
@media (max-width: 600px) {
	.clf-container { padding-inline: clamp(1rem, 5vw, 3rem); }
	.clf-hero { padding-block: clamp(1.75rem, 6vw, 5rem); }
	.clf-poll { padding: clamp(1rem, 5vw, 2.5rem); }
	.clf-subscribe-panel { padding: clamp(1.25rem, 6vw, 3.5rem); }
	.clf-inline-subscribe { padding: clamp(1rem, 5vw, 2.25rem); }
	.clf-security__icon { width: clamp(2.4rem, 9vw, 3.4rem); height: clamp(2.4rem, 9vw, 3.4rem); }
	.clf-poll__option { padding: clamp(0.6rem, 3vw, 0.9rem) clamp(0.7rem, 3.5vw, 1.1rem); }
}