/*
Theme Name: Ollie Child
Theme URI: 
Author: Privatenode LLC
Author URI: https://privatenode.io
Description: Child theme of Ollie for Privatenode LLC.
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 7.4
Version: 1.0.36
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ollie
Text Domain: ollie-child
Tags:
*/

/* ==========================================================================
   'Sup child theme — component styles
   --------------------------------------------------------------------------
   Everything expressible as a theme.json token or a block setting lives there,
   NOT here. This file holds only component-level styling that core blocks +
   theme.json cannot express (decorative marks, FAQ toggle, card internals,
   the signup form, and a few fine text shades that are not palette tokens).

   Colors: prefer var(--wp--preset--color--SLUG). Raw hex appears only for the
   fine text/border shades that were intentionally NOT made palette tokens
   (see conversion-notes.md → "Colors handled in child CSS").
   Fonts: self-hosted via theme.json fontFace (Hanken Grotesk = --primary,
   Newsreader = --secondary). No @font-face here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Eyebrow kicker + decorative "dots" mark
   Base .eyebrow is JUST the uppercase kicker styling (NO dots). The 3-square
   SVG is decorative and only appears where the export markup placed it: add the
   `.eyebrow--dots` modifier for an eyebrow with a leading dots mark, or use the
   standalone `.dots-mark` element. On the homepage the dots appear ONLY on the
   hero eyebrow, plus two standalone marks (give card, connect CTA).
   Two colorways: default (rust/gold/taupe) and --invert (dark/gold/cream).
   Eyebrow TEXT color is set per-block; the dots colors are fixed here.
   -------------------------------------------------------------------------- */
.eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 400;
	margin-bottom: 1.5rem;
}
/* Centered eyebrow (hero eyebrows on centered sections). Keyed off core's own
   alignment class so no bespoke modifier is needed — set the block's textAlign. */
.eyebrow.has-text-align-center { justify-content: center; }
.eyebrow--dots::before,
.dots-mark {
	content: "";
	flex: 0 0 auto;
	display: inline-block;
	width: 41px;
	height: 11px;
	background-repeat: no-repeat;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 11' width='41' height='11'%3E%3Crect width='11' height='11' fill='%238C3B25'/%3E%3Crect x='15' width='11' height='11' fill='%23C98A3C'/%3E%3Crect x='30' width='11' height='11' fill='%23B6A894'/%3E%3C/svg%3E");
}
.dots-mark--invert {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41 11' width='41' height='11'%3E%3Crect width='11' height='11' fill='%23241E1A'/%3E%3Crect x='15' width='11' height='11' fill='%23C98A3C'/%3E%3Crect x='30' width='11' height='11' fill='%23F3E9DD'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   2. Underlined text links (.link-underline) — gold rule under inline links
   -------------------------------------------------------------------------- */
.link-underline {
	color: inherit;
	font-weight: 600;
	text-decoration: none; /* kill theme's default link underline so only the gold border shows */
	border-bottom: 1px solid var(--wp--preset--color--primary-alt);
	padding-bottom: 0.1875rem;
}
.link-underline:hover {
	color: var(--wp--preset--color--primary-alt);
}

/* --------------------------------------------------------------------------
   3. (removed) Body copy color — now the `secondary` palette token applied on the
   paragraph blocks directly, not a CSS class.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. Serif display helpers for paragraphs (headings already get serif from
   theme.json elements.heading; these cover serif *paragraphs*).
   -------------------------------------------------------------------------- */
.font-serif {
	font-family: var(--wp--preset--font-family--secondary);
}
.quote-lg {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 300;
	line-height: 1.4;
	letter-spacing: -0.01em;
}
.quote-italic {
	font-family: var(--wp--preset--font-family--secondary);
	font-style: italic;
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   5. FAQ — core/details styled as the export accordion (+ → × toggle).
   Colors below are the DARK-section variant (homepage FAQ sits on --main).
   Light-section FAQ variants (faq.html, give.html) will add overrides later.
   -------------------------------------------------------------------------- */
.wp-block-details.faq-item {
	border-bottom: 1px solid var(--wp--preset--color--border-dark);
}
.faq-item summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	padding: 1.5rem 0.1875rem;
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--snug, 1.2);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
	content: "+";
	flex: 0 0 auto;
	font-family: var(--wp--preset--font-family--primary);
	font-size: 1.5rem;
	color: var(--wp--preset--color--primary-alt);
	transition: transform 0.15s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer {
	max-width: 42.5rem;
	margin: 0 0 1.5rem;
	padding: 1.25rem;
	background: var(--wp--preset--color--dark-alt);
	border: 1px solid var(--wp--preset--color--border-dark);
	border-radius: 0.625rem;
	color: #C9BCA9;
	line-height: 1.72;
}
/* Links inside FAQ copy. Ollie's global element style paints every link `main`
   (#241E1A), which on the dark answer card is invisible — so the dark variant
   goes gold-light and brightens to cream on hover. Underline is left alone: it
   is the affordance. (`.link-underline` §2 still wins where that class is used.)
   No !important needed — Ollie emits the global colour via `:where()`, so it
   computes to (0,1,0) and `.faq-item a` (0,1,1) beats it either way. */
.faq-item a { color: var(--wp--preset--color--primary-alt-accent); }
.faq-item a:hover { color: var(--wp--preset--color--base); }

/* Light-section FAQ variant (faq.html, give.html main sections on --base).
   Scope via a `faq-light` wrapper class on the group holding the accordions:
   cream answer fill, lighter item borders, muted (secondary) answer text. */
.faq-light .wp-block-details.faq-item { border-bottom-color: var(--wp--preset--color--border-light); }
.faq-light .faq-answer {
	background: var(--wp--preset--color--base);
	border-color: #EEE4D6;
	color: var(--wp--preset--color--secondary);
}
/* On cream, FAQ links are rust → gold on hover (the export's global link pair). */
.faq-light .faq-item a { color: var(--wp--preset--color--primary); }
.faq-light .faq-item a:hover { color: var(--wp--preset--color--primary-alt); }
/* FAQ group section headings ("The basics", etc.): heavier than the global
   serif heading weight (elements.heading = 400) and clear of the sticky header
   when reached via the jump nav. 500 = heaviest the Newsreader variable carries. */
.faq-light .wp-block-heading {
	font-weight: 500;
	scroll-margin-top: 6rem;
}

/* "Jump to" sidebar nav (faq.html) — hairline-underlined rows, each with a
   small colored square bullet. Decorative + repeated → lives in CSS. Default
   square is rust; .jump-gold / .jump-taupe recolor per the export sequence. */
.faq-jump a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	color: #463D34;
	text-decoration: none;
	border-bottom: 1px solid #E2D5C2;
}
.faq-jump a::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--primary);
}
.faq-jump a.jump-gold::before  { background: var(--wp--preset--color--primary-alt); }
.faq-jump a.jump-taupe::before { background: var(--wp--preset--color--main-accent); }
.faq-jump a:hover { color: var(--wp--preset--color--primary); }

/* --------------------------------------------------------------------------
   6. Update cards (dark) — image flush to top, padded body, gold tag.
   Card background/radius are set on the group block; these style the internals.
   -------------------------------------------------------------------------- */
.post-tag {
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--wp--preset--color--primary); /* rust — the export base (e.g. Updates post list) */
}
/* On the dark update cards the tag is gold instead (export: .update-card-body .post-tag). */
.update-card .post-tag { color: var(--wp--preset--color--primary-alt); }
.update-card { overflow: hidden; }
/* The homepage cards are a Query Loop now and carry NO featured image (not every
   post will have one), so the card is just the padded body: tag, linked title,
   excerpt. The image rules below still apply if an image is ever put back. */
.update-card h3 a { text-decoration: none; }
.update-card h3 a:hover { color: var(--wp--preset--color--primary-alt); }
.update-card img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 0;
}
/* Card body copy is taupe — but NOT the tag (which stays gold via the rule above;
   without :not() this higher-specificity rule would override it to taupe). */
.update-card .update-card-body p:not(.post-tag) { color: var(--wp--preset--color--main-accent); }

/* --------------------------------------------------------------------------
   7. Partnership band — host-church logo chip + small uppercase label
   -------------------------------------------------------------------------- */
.band-label {
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8A7B67;
}
.host-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	padding: 0.75rem 1.625rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 0.625rem;
}
.host-chip .host-chip__label { color: #8A7B67; }

/* --------------------------------------------------------------------------
   8. Email signup label — the small taupe line above a signup form. Put it on
   the group that wraps the label + form (the inner paragraph inherits it).
   The old `.signup-form` rules that styled the Custom HTML fallback form are
   GONE: every signup is a Gravity Forms block now, styled by §18 `.gf-signup`.
   -------------------------------------------------------------------------- */
.signup-label {
	display: block;
	letter-spacing: 0.04em;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--main-accent);
	margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   9. Text-measure utilities — cap line length where the export intends a
   narrower measure than the section container. Apply as a block className.
   -------------------------------------------------------------------------- */
.measure-sm { max-width: 34rem; }
.measure-sm.has-text-align-center { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------------------------
   10. Header & Footer template parts
   -------------------------------------------------------------------------- */

/* Sticky dark header bar. SOLID #2C2622 (not rgba): the `site-header` class lands on
   BOTH the template-part <header> wrapper and the inner group, so two translucent
   layers would stack to ~opaque #241E1A and match the hero exactly. Solid = one flat
   color, a touch warmer than the hero (#241E1A), matching the reference. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #2C2622;
	border-bottom: 1px solid var(--wp--preset--color--border-dark);
}

/* Brand wordmark: serif "'sup" + gold period. Set the WP Site Title to  'sup
   (no trailing period) — the gold "." is added here. */
.wp-block-site-title.brand-wordmark,
.wp-block-site-title.brand-wordmark a,
.brand-wordmark {
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
}
.wp-block-site-title.brand-wordmark a::after {
	content: ".";
	color: var(--wp--preset--color--primary-alt);
}
.brand-dot { color: var(--wp--preset--color--primary-alt); }

/* Primary nav links (on dark) — hover turns gold with NO underline, matching the
   export's global `a:hover { color: gold }` (the export has no nav underline). */
.site-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--primary-alt);
	text-decoration: none;
}

/* Active nav item — the current page reads brighter + bolder, matching the
   export's .nav-links[aria-current="page"]. Core navigation adds aria-current
   (and .current-menu-item) to the link for the page being viewed. */
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--base);
	font-weight: 600;
}
/* ...but NOT underlined. Ollie's core-navigation.css underlines the active item
   (`.current-menu-item > a`) via wp_enqueue_block_style, which theme.json can't
   beat — so this override mirrors Ollie's selector + adds `.site-header` to sit
   one notch higher in specificity and win regardless of load order. */
.site-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__container .current-menu-item > a {
	text-decoration: none;
}

/* Footer fine print / column headings — shades below palette-token granularity. */
.footer-col-title {
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #6E6252;
}
.footer-fine { color: #6E6252; }

/* --------------------------------------------------------------------------
   11. Pre-upload image placeholders
   Un-uploaded core/image blocks (src still contains "replace-me") render the
   export's striped-gradient placeholder instead of a broken-image icon, so the
   page previews like the reference. These selectors STOP applying automatically
   once real Media Library URLs are swapped in — remove nothing later.
   NOTE: the match is CASE-INSENSITIVE (`i` flag): the browser lowercases the
   hostname (REPLACE-ME.local → replace-me.local), so a case-sensitive selector
   would miss it and the broken-image icon would show.
   NOTE: the hero "image" is currently a core/cover block (not core/image), so it
   is not covered here; give it a real image or restyle that cover separately.
   -------------------------------------------------------------------------- */
.wp-block-image img[src*="replace-me" i] {
	display: block;
	width: 100%;
	min-height: 22rem;
	color: transparent;          /* hide alt text */
	font-size: 0;
	border-radius: 0.4375rem;
	background-image: repeating-linear-gradient(135deg, #DDCEBB, #DDCEBB 11px, #D8C9B4 11px, #D8C9B4 22px);
}
/* Rust duotone variant — add class "is-rust-duotone" to the image block (figure) */
.wp-block-image.is-rust-duotone img[src*="replace-me" i] {
	background-image:
		repeating-linear-gradient(135deg, rgba(36,30,26,.32), rgba(36,30,26,.32) 11px, rgba(36,30,26,.12) 11px, rgba(36,30,26,.12) 22px),
		linear-gradient(150deg, var(--wp--preset--color--primary), var(--wp--preset--color--primary-alt));
}
.update-card img[src*="replace-me" i] { min-height: 0; aspect-ratio: 16 / 10; border-radius: 0; }
.host-chip img[src*="replace-me" i] { min-height: 0; width: 34px; height: 34px; }

/* --------------------------------------------------------------------------
   12. Outline button (is-style-outline)
   Ollie's assets/styles/core-button.css styles the outline button with a
   dark `outline: 2px solid currentColor` ring and core forces its own smaller
   padding (0.667em/1.333em) — neither can be overridden from theme.json (the
   "outline" slug collides with core's built-in style). So we override it here
   to match the reference: subtle border-light hairline, transparent fill, dark
   text, and the SAME padding as the filled buttons (elements.button = .85/1.6rem).
   -------------------------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--main);
	border: 1px solid var(--wp--preset--color--border-light);
	outline: none;
	padding: 0.85rem 1.6rem;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--main);
}

/* --------------------------------------------------------------------------
   13. Divider grid (About "What guides us") — 2×2 cells split by hairlines.
   The 1px grid gap reveals the container's border-color background as thin
   dividers; each cell's own (tertiary) fill covers everything else. Cell
   background + padding are set on the block via tokens, so no .divider-cell
   rule is needed — only the grid container lives here.
   -------------------------------------------------------------------------- */
.divider-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	background: var(--wp--preset--color--border-light);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 0.625rem;
	overflow: hidden;
}
/* 3-column variant (Connect benefits grid). */
.divider-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* 1-column variant (Give "Where your gift goes" list). */
.divider-grid--1 { grid-template-columns: 1fr; }
@media (max-width: 781px) {
	.divider-grid,
	.divider-grid--3 { grid-template-columns: 1fr; }
}
/* The 1-column gift list (Give "Where your gift goes") uses BOLD SANS sub-headings
   — the reference renders these as Hanken 700 / 20px, NOT the global serif heading
   style that the .divider-grid--3 cells keep. Scoped to --1 so only this list flips. */
.divider-grid--1 .divider-cell h3 {
	font-family: var(--wp--preset--font-family--primary);
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.2;
	letter-spacing: normal;
}

/* --------------------------------------------------------------------------
   14. Interior page hero — uniform height across pages.
   Every interior hero is the same dark constrained band; without this its
   height floats with headline length (FAQ = 1 line, About = 2). A shared
   min-height + vertical centering makes them all match, so no per-page copy
   padding is needed. Ollie's constrained layout still centers the content
   horizontally (max-width + margin-inline:auto survive the flex context).
   -------------------------------------------------------------------------- */
.page-hero {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 28rem;
	/* Vertical padding lives here (not on the block) so it stays below min-height
	   and the hero height is controlled in one place. Deliberately tighter than
	   the xx-large section padding used elsewhere. */
	padding-block: 4.5rem;
}

/* --------------------------------------------------------------------------
   15. Contact rows (Connect "Rather just reach out?") — a colored-square
   bullet before an email link / location line. Default square rust; .is-gold
   recolors it. Links inside inherit color and drop the default underline.
   -------------------------------------------------------------------------- */
.contact-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.contact-row::before {
	content: "";
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--primary);
}
.contact-row.is-gold::before { background: var(--wp--preset--color--primary-alt); }
.contact-row a { color: inherit; text-decoration: none; }
.contact-row a:hover { color: var(--wp--preset--color--primary); }

/* --------------------------------------------------------------------------
   16. Updates — topic pills (.tag-list/.tag) + article list (.post-list/.post-row).
   Static markup (matches the homepage's static update cards); a real feed would
   be a Query Loop with a category taxonomy later. Pills are visual-only.
   -------------------------------------------------------------------------- */
.tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.tag {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.375rem 1rem;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 999px;
	color: #463D34;
	font-weight: 600;
}
/* Topic pills that link to a category archive. Core renders the pill as a <p>,
   so the chrome moves onto the anchor and the whole pill becomes clickable. */
.tag--link { padding: 0; border: 0; }
.tag--link > a {
	display: inline-flex;
	align-items: center;
	padding: 0.375rem 1rem;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 999px;
	color: inherit;
	text-decoration: none;
}
.tag--link > a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}
/* Current topic = filled dark pill. On /updates/ the "All" pill carries
   `is-active` in the markup; on an archive the template can't know which term
   it is showing, so WP's own body class (category-<slug>) picks the pill. */
.tag--link.is-active > a,
body.category-residency .tag--residency > a,
body.category-vision .tag--vision > a,
body.category-fuquay .tag--fuquay > a,
body.category-reflections .tag--reflections > a {
	background: var(--wp--preset--color--main);
	border-color: var(--wp--preset--color--main);
	color: var(--wp--preset--color--base);
}

/* The list is a Query Loop: `.post-list` sits on core/post-template (a <ul>) and
   each row is the group inside its <li>, so the row grid/borders are unchanged. */
.post-list { border-top: 1px solid var(--wp--preset--color--border-light); }
.post-list > li { margin: 0; }
.post-row h3 a { text-decoration: none; }
.post-row h3 a:hover { color: var(--wp--preset--color--primary); }
.post-row {
	display: grid;
	grid-template-columns: 9.375rem 1fr auto;
	gap: 2rem;
	align-items: baseline;
	padding: 2rem 0.1875rem;
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}
.post-meta {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}
.post-date { color: #8A7B67; }
.post-row h3 {
	font-size: 1.625rem; /* export fs-11 (26px) — between medium/large, so set exactly */
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin: 0 0 0.5rem;
}
.post-arrow {
	align-self: center;
	margin: 0;
	color: var(--wp--preset--color--primary-alt);
	font-size: var(--wp--preset--font-size--medium);
}
@media (max-width: 781px) {
	.post-row { grid-template-columns: 1fr; gap: 0.5rem; }
	.post-meta { flex-direction: row; gap: 1rem; }
	.post-arrow { display: none; }
}

/* --------------------------------------------------------------------------
   17. Single post template (templates/single.html)
   The header band is DARK (bg `main`) through the featured image — the export's
   two `.post-header` <section>s — then the article/author card sit on cream and
   the page finishes dark + rust. Colors follow the locked dark-context map:
   meta = `main-accent` (taupe), tag = `primary-alt` (gold), dek = `cream-body`.
   The kicker/byline/author card are built from core blocks + tokens, so only
   three things need CSS: the kicker separator squares, the article body
   (`.post-prose` — post_content is author-typed, so it carries no classes to
   hang tokens on), and the "Keep reading" cell hover.
   Reused from above, no new rules needed: .post-tag (§6), .post-date (§16),
   .dots-mark / --invert (§1), .link-underline (§2), .measure-sm (§9).
   -------------------------------------------------------------------------- */

/* Kicker separators — empty core/group blocks, same trick as .dots-mark. */
.post-kicker-sep {
	width: 8px;
	height: 8px;
	background: var(--wp--preset--color--primary);
}
.post-kicker-sep.is-taupe { background: var(--wp--preset--color--main-accent); }

/* Back link sits on the dark header band, so hover goes gold (site-wide dark
   hover), not rust. */
.post-back a { text-decoration: none; }
.post-back a:hover { color: var(--wp--preset--color--primary-alt); }

/* Article body. Everything inside post-content is user-typed, so the reading
   styles live here rather than on blocks. Headings keep the global serif from
   theme.json (elements.h2/h3) — only rhythm is set. */
.post-prose p {
	font-size: 1.125rem; /* export fs-7 (18px) — no slug at this size */
	line-height: 1.72;
	color: var(--wp--preset--color--secondary);
}
.post-prose h2 { margin-top: 3rem; margin-bottom: 1rem; }
.post-prose h3 { margin-top: 2.25rem; margin-bottom: 0.75rem; }
.post-prose ul,
.post-prose ol {
	padding-left: 1.25rem;
	font-size: 1.125rem;
	line-height: 1.72;
	color: var(--wp--preset--color--secondary);
}
.post-prose ul { list-style: disc; }
.post-prose li { margin-bottom: 0.5rem; }
.post-prose li::marker { color: var(--wp--preset--color--primary); }
/* Pull quote inside an article. Ollie already owns the rule itself —
   `:root :where(.wp-block-quote)` sets a 5px rust left border with
   `border-width: !important`, which a child rule can't beat — so we keep that
   and only add the indent + the site's serif quote treatment (same values as
   .quote-lg §4, one step up in size so it reads as a pull quote). */
.post-prose blockquote {
	margin: 2.75rem 0;
	padding-left: 1.75rem;
	font-family: var(--wp--preset--font-family--secondary);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.4;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--main);
}
.post-prose blockquote p {
	font: inherit;
	line-height: inherit;
	color: inherit;
}
.post-prose a { color: var(--wp--preset--color--primary); }
.post-prose img { border-radius: 0.4375rem; }

/* "Keep reading" cards — the whole cell is a link in the export; core can only
   link the title, so the cell border reacts on hover to keep it feeling clickable. */
.next-cell { transition: border-color 0.15s ease; }
.next-cell:hover { border-color: var(--wp--preset--color--primary-alt); }
.next-cell .wp-block-post-title a { text-decoration: none; }
.next-cell .wp-block-post-title a:hover { color: var(--wp--preset--color--primary-alt); }

/* --------------------------------------------------------------------------
   18. Gravity Forms — inline email signup (dark sections)
   Put `gf-signup` on the GROUP that holds the Gravity Forms block (hero, and
   any GF signup that replaces a gf-placeholder). Restyles the form to the
   export's `.signup-form`: cream pill field + gold pill button on one row.

   GF 2.9 ships the "orbital" theme, which paints every control from
   `--gf-ctrl-*` custom properties declared in a per-form <style> block scoped
   by the form's ID. An ID beats any class selector we can write, so the
   variable overrides below carry `!important` — same category of unavoidable
   override as Ollie's outline button (§12). It stays contained: nothing here
   applies outside `.gf-signup`, so other Gravity Forms keep their own styling.
   Orbital also derives control height/padding from its own size scale rather
   than a variable, so those two are set outright.
   -------------------------------------------------------------------------- */
/* Shared by every styled GF form: the submit button is the site's gold pill
   with a dark label (same look as theme.json elements.button). */
.gf-signup .gform_wrapper,
.gf-dark .gform_wrapper {
	--gf-ctrl-btn-radius: 999px !important;
	--gf-ctrl-btn-font-weight: 700 !important;
	--gf-ctrl-btn-bg-color-ctrl: var(--wp--preset--color--primary-alt) !important;
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--primary-alt) !important;
	--gf-ctrl-btn-bg-color-hover-ctrl: var(--wp--preset--color--primary-alt-accent) !important;
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--primary-alt-accent) !important;
	--gf-ctrl-btn-color-ctrl: var(--wp--preset--color--main) !important;
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--main) !important;
	--gf-ctrl-btn-color-hover-ctrl: var(--wp--preset--color--main) !important;
	--gf-ctrl-btn-color-hover-primary: var(--wp--preset--color--main) !important;
}
.gf-signup .gform_wrapper {
	/* Field: cream pill, dark text, no border (gold ring only on focus). */
	--gf-ctrl-radius: 999px !important;
	--gf-ctrl-bg-color: #F3E9DD !important;
	--gf-ctrl-bg-color-hover: #F3E9DD !important;
	--gf-ctrl-bg-color-focus: #F3E9DD !important;
	--gf-ctrl-border-color: transparent !important;
	--gf-ctrl-border-color-hover: transparent !important;
	--gf-ctrl-border-color-focus: var(--wp--preset--color--primary-alt) !important;
	--gf-ctrl-color: var(--wp--preset--color--main) !important;
}
/* A signup inside a hero. `.page-hero` (§14) is a flex COLUMN, and WP's
   constrained layout gives every child `margin-inline: auto` — in a flex
   container auto cross-axis margins make the item shrink-wrap instead of
   stretch, so the form collapsed to the intrinsic width of its controls
   (~337px, "squeezed"). Restoring an explicit width fixes it; 32.5rem is the
   export's form container (container--form), so it stays narrower than the
   900px hero measure. Any other block dropped into a hero that must FILL
   rather than shrink-wrap needs the same `width: 100%`. */
.page-hero .gf-signup {
	width: 100%;
	max-width: 32.5rem;
	margin-inline: auto;
}
/* One row: field + submit side by side. Orbital lays fields out on a 12-column
   grid; flex lets the button size to its own text and drop below on mobile. */
.gf-signup .gform_wrapper .gform_fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.gf-signup .gform_wrapper .gfield { flex: 1 1 15rem; padding: 0; }
.gf-signup .gform_wrapper .gfield--type-submit { flex: 0 0 auto; }
.gf-signup .gform_wrapper .gform_required_legend { display: none; }
.gf-signup .gform_wrapper .gform_footer { margin: 0; padding: 0; }
.gf-signup .gform_wrapper .gfield input {
	min-height: 3.5rem !important;   /* 56px = the export's signup pill */
	padding: 0 1.5rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
}
.gf-signup .gform_wrapper .gfield--type-submit input { padding: 0 2rem !important; cursor: pointer; }
.gf-signup .gform_wrapper input::placeholder { color: #8A7B67; opacity: 1; }
/* Validation + confirmation on dark: GF's default white/red boxes are
   unreadable against --main, so they become plain gold-light / cream text. */
.gf-signup .gform_wrapper .gform_validation_errors,
.gf-signup .gform_wrapper .gfield_validation_message {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0.25rem 0 0;
	color: var(--wp--preset--color--primary-alt-accent);
	font-size: var(--wp--preset--font-size--x-small);
}
.gf-signup .gform_confirmation_message { color: var(--wp--preset--color--cream-body); }
@media (max-width: 600px) {
	.gf-signup .gform_wrapper .gfield { flex: 1 1 100%; }
	.gf-signup .gform_wrapper .gfield--type-submit input { width: 100%; }
}

/* --------------------------------------------------------------------------
   19. Gravity Forms — stacked form on a DARK CARD (Connect contact, Give donation)
   Put `gf-dark` on the GROUP that holds the form (it replaces the
   `gf-placeholder` class that used to mark the spot). Mirrors the export's
   `.form-field` treatment: dark-alt field on a border-dark hairline, 0.625rem
   radius, gold pill submit. Donation-specific extras (radio pills, amount grid,
   total) are §20 — the Give form takes BOTH classes: `gf-dark gf-donate`.
   Same `!important` caveat as §18 — GF's per-form <style> is ID-scoped, so
   variables and control sizing have to outrank it.
   -------------------------------------------------------------------------- */
.gf-dark .gform_wrapper {
	--gf-ctrl-radius: 0.625rem !important;
	--gf-ctrl-bg-color: var(--wp--preset--color--dark-alt) !important;
	--gf-ctrl-bg-color-hover: var(--wp--preset--color--dark-alt) !important;
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--dark-alt) !important;
	--gf-ctrl-border-color: var(--wp--preset--color--border-dark) !important;
	--gf-ctrl-border-color-hover: var(--wp--preset--color--border-dark) !important;
	--gf-ctrl-border-color-focus: var(--wp--preset--color--primary-alt) !important;
	--gf-ctrl-color: var(--wp--preset--color--base) !important;
}
.gf-dark .gform_wrapper .gform_fields { row-gap: 1.25rem; }
.gf-dark .gform_wrapper .gform_required_legend { display: none; }
/* Form title + description (shown when the block's Title/Description toggles are
   on, e.g. Give's "Donate"). The title is an <h2>, so it already inherits the
   site's serif heading style from theme.json — it was simply painting `main`
   dark-on-dark. Colour is the whole fix; weight stays 400 to match every other
   heading on the site. */
.gf-dark .gform_wrapper .gform_heading { margin-bottom: 1.5rem; }
.gf-dark .gform_wrapper .gform_title {
	color: var(--wp--preset--color--base);
	margin: 0 0 0.5rem;
}
.gf-dark .gform_wrapper .gform_description {
	color: var(--wp--preset--color--cream-body);
	font-size: var(--wp--preset--font-size--small);
}
/* Field labels (Name, Email, Comments): the export's taupe x-small treatment
   read too quietly on this card, so the MAIN label is a step up — `small`
   (15px), semibold, cream — while the SUB-labels (First/Last, Enter/Confirm
   Email) stay taupe x-small so the two levels don't compete. */
.gf-dark .gform_wrapper .gfield_label {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0;
	margin-bottom: 0.5rem;
}
.gf-dark .gform_wrapper .gform-field-label--type-sub {
	color: var(--wp--preset--color--main-accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 400;
	letter-spacing: 0.04em;
	margin-bottom: 0.375rem;
}
.gf-dark .gform_wrapper .gfield_required {
	color: var(--wp--preset--color--main-accent);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--x-small);
}
.gf-dark .gform_wrapper .gfield_description,
.gf-dark .gform_wrapper .ginput_counter {
	color: #8A7B67;
	font-size: var(--wp--preset--font-size--x-small);
}
/* `.ginput_total` is excluded: it is a readonly <input> used purely as a
   display value, styled as text in §20 — without the exclusion this rule's
   specificity (two :not() attribute selectors count) beats anything §20 can
   reasonably write. */
.gf-dark .gform_wrapper .gfield input:not([type="checkbox"]):not([type="radio"]):not(.ginput_total),
.gf-dark .gform_wrapper .gfield textarea {
	min-height: 3.25rem !important;
	padding: 0.875rem 1.125rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
}
.gf-dark .gform_wrapper .gfield textarea { min-height: 9rem !important; resize: vertical; }
.gf-dark .gform_wrapper input::placeholder,
.gf-dark .gform_wrapper textarea::placeholder { color: #8A7B67; opacity: 1; }
/* Checkboxes must NOT inherit the 52px control height the text fields get. */
.gf-dark .gform_wrapper .gchoice { display: flex; align-items: flex-start; gap: 0.625rem; }
.gf-dark .gform_wrapper .gchoice label {
	color: var(--wp--preset--color--cream-body);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: 1.5;
}
.gf-dark .gform_wrapper input[type="checkbox"] {
	inline-size: 1.15rem !important;
	block-size: 1.15rem !important;
	min-block-size: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
	margin-top: 0.15rem;
	accent-color: var(--wp--preset--color--primary-alt);
}
.gf-dark .gform_wrapper .gform_footer { margin: 1.5rem 0 0; padding: 0; }
.gf-dark .gform_wrapper .gform_footer input[type="submit"] {
	min-height: 3.5rem !important;
	padding: 0 2rem !important;
	font-size: var(--wp--preset--font-size--small) !important;
	cursor: pointer;
}
.gf-dark .gform_wrapper .gform_validation_errors,
.gf-dark .gform_wrapper .gfield_validation_message {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0.25rem 0 0;
	color: var(--wp--preset--color--primary-alt-accent);
	font-size: var(--wp--preset--font-size--x-small);
}
.gf-dark .gform_confirmation_message { color: var(--wp--preset--color--cream-body); }


/* --------------------------------------------------------------------------
   20. Gravity Forms — choice PILLS (`gf-pills`) + donation extras (`gf-donate`)
   Adds to §19. Turns GF's radio/checkbox lists into the export's pill controls
   (.pill-group/.pill-label) with pure CSS — the real input stays in the DOM for
   keyboard + screen readers, visually replaced by its label via `:checked + label`.
   Class usage:  Volunteer = `gf-dark gf-pills` · Give = `gf-dark gf-pills gf-donate`
   NB the choices are nested `.ginput_container_* > .gfield_radio|.gfield_checkbox
   > .gchoice`, so the LAYOUT belongs on `.gfield_radio`/`.gfield_checkbox`, not
   the container — and GF stacks them with `flex-direction: column`, which has to
   be flipped explicitly.
   -------------------------------------------------------------------------- */
.gf-pills .gform_wrapper .gfield_radio,
.gf-pills .gform_wrapper .gfield_checkbox {
	display: flex;
	flex-direction: row !important;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.gf-pills .gform_wrapper .gchoice { display: block !important; margin: 0; }
.gf-pills .gform_wrapper .gchoice input {
	position: absolute !important;
	opacity: 0 !important;
	clip: rect(0 0 0 0);
	margin: 0 !important;
}
.gf-pills .gform_wrapper .gchoice label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	cursor: pointer;
	padding: 0.625rem 1.25rem;
	border: 1px solid var(--wp--preset--color--border-dark);
	border-radius: 999px;
	background: var(--wp--preset--color--dark-alt);
	color: var(--wp--preset--color--cream-body) !important;
	font-size: var(--wp--preset--font-size--x-small) !important;
	font-weight: 600 !important;
	line-height: 1.2;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.gf-pills .gform_wrapper .gchoice label:hover { border-color: var(--wp--preset--color--primary-alt); }
.gf-pills .gform_wrapper .gchoice input:checked + label {
	background: var(--wp--preset--color--primary-alt);
	border-color: var(--wp--preset--color--primary-alt);
	color: var(--wp--preset--color--main) !important;
	font-weight: 700 !important;
}
.gf-pills .gform_wrapper .gchoice input:focus-visible + label {
	outline: 2px solid var(--wp--preset--color--primary-alt-accent);
	outline-offset: 2px;
}
/* The export's little square dot, cycling rust/gold/taupe. CHECKBOX pills only
   (the export uses it on Volunteer's interest list; the donate amounts are
   radios and carry no dot). It flips to `main` when the pill fills gold. */
.gf-pills .gform_wrapper .gchoice input[type="checkbox"] + label::before {
	content: "";
	flex: 0 0 auto;
	width: 0.4375rem;
	height: 0.4375rem;
	border-radius: 0.0625rem;
	background: var(--wp--preset--color--primary);
}
.gf-pills .gform_wrapper .gchoice:nth-child(3n+2) input[type="checkbox"] + label::before { background: var(--wp--preset--color--primary-alt); }
.gf-pills .gform_wrapper .gchoice:nth-child(3n) input[type="checkbox"] + label::before { background: var(--wp--preset--color--main-accent); }
.gf-pills .gform_wrapper .gchoice input[type="checkbox"]:checked + label::before { background: var(--wp--preset--color--main); }

/* Donation extras: the amount grid + the total readout. */
.gf-donate .gform_wrapper .gfield--type-product .gfield_radio {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
	gap: 0.5rem;
}
.gf-donate .gform_wrapper .gfield--type-product .gchoice label {
	justify-content: center;
	text-align: center;
	border-radius: 0.625rem;
	padding: 0.875rem 0.75rem;
	font-size: var(--wp--preset--font-size--small) !important;
}
/* Total: a readonly <input> carrying GF's white `gform-text-input-reset`, plus
   the DISABLED control background. Shown as plain gold text, not a field. */
.gf-donate .gform_wrapper {
	--gf-ctrl-bg-color-disabled: transparent !important;
	--gf-ctrl-border-color-disabled: transparent !important;
}
.gf-donate .gform_wrapper .gfield--type-total input.ginput_total {
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 !important;
	min-height: 0 !important;
	color: var(--wp--preset--color--primary-alt) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 700 !important;
}