/* ────────────────────────────────────────────────────────────────
   CCC brand.css — only what theme.json cannot express.
   Ported from the Additional CSS that ran under Ollie (custom_css
   post 7904), plus the signature header and component styles.
   ──────────────────────────────────────────────────────────────── */

/* ── Buttons ─────────────────────────────────────────────────────
   Outline buttons: clay-deep on paper, never white (the invisible-
   CTA fix). On ink bands they flip to paper. */
.wp-block-button.is-style-outline > .wp-block-button__link,
.wp-block-button .wp-block-button__link.is-style-outline {
	background-color: transparent;
	color: var(--wp--preset--color--clay-deep);
	outline-color: var(--wp--preset--color--clay-deep);
	border-color: var(--wp--preset--color--clay-deep);
	border-width: 1.5px;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.is-style-outline:hover {
	background-color: var(--wp--preset--color--clay-deep);
	color: var(--wp--preset--color--paper);
}
.has-ink-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--paper);
	outline-color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--paper);
}

/* Focus ring: 2px at 2px offset, on every interactive element.
   Cedar was the brand choice but fails WCAG 1.4.11 (3:1) on half the
   grounds — wheat 2.29, sprout 2.65, moss 1.83, fern 1.25, cedar 1.00.
   Ink clears 3:1 on every light ground (wheat 9.60, fern 5.25, cedar
   4.19); the two grounds ink cannot carry flip to paper below. */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-navigation a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}
.has-ink-background-color :focus-visible,
.has-moss-background-color :focus-visible {
	outline-color: var(--wp--preset--color--paper);
}

/* ── Eyebrow ─────────────────────────────────────────────────────
   Both the hand-written .eyebrow class (existing content) and the
   registered block style (what staff click). */
p.eyebrow, p.is-style-eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-block-end: 0;
}
p.eyebrow + h1, p.eyebrow + h2, p.eyebrow + h3, p.eyebrow + .wp-block-heading,
p.is-style-eyebrow + h1, p.is-style-eyebrow + h2, p.is-style-eyebrow + h3,
p.is-style-eyebrow + .wp-block-heading { margin-block-start: 8px; }

/* ── Lead ────────────────────────────────────────────────────────
   The opening paragraph of a page or band. :where() zeroes the
   specificity of the size so an explicit size control still wins. */
:where(p.is-style-lead) { font-size: var(--wp--preset--font-size--medium); }
p.is-style-lead { line-height: 1.4; }

/* ── Scripture frame ─────────────────────────────────────────────
   Italic on wheat, source credited underneath — the guide's fixed
   frame for scripture and hymns. */
.wp-block-quote.is-style-scripture {
	background: var(--wp--preset--color--wheat);
	color: var(--wp--preset--color--ink);
	border: none;
	border-radius: 4px;
	padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1.5rem, 4vw, 2rem);
	font-style: italic;
}
.wp-block-quote.is-style-scripture cite {
	display: block;
	margin-block-start: .75rem;
	padding-block-start: .75rem;
	border-top: 1px solid #CBAE84;
	font-style: normal;
	font-size: var(--wp--preset--font-size--small);
	color: #64522F;
}

/* ── Card ────────────────────────────────────────────────────────
   Registered group style: card ground, hairline, 4px radius. */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: 4px;
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

/* ── Vertical rhythm ─────────────────────────────────────────────
   Overrides WP's flat 32px sibling gap. All selectors are (0,1,1)+
   so they win over :root :where(.is-layout-constrained) > *. */
h1.wp-block-heading + p, h2.wp-block-heading + p,
h3.wp-block-heading + p { margin-block-start: 12px; }

p.wp-block-paragraph + p.wp-block-paragraph { margin-block-start: 1em; }

p.wp-block-paragraph + .wp-block-buttons,
h2.wp-block-heading  + .wp-block-buttons { margin-block-start: 24px; }

p.wp-block-paragraph + .wp-block-columns,
h2.wp-block-heading  + .wp-block-columns,
h2.wp-block-heading  + .wp-block-query,
h2.wp-block-heading  + .wp-block-cp-library-query { margin-block-start: clamp(1.5rem, 4vw, 2rem); }

/* Section bands breathe at 48–64px. */
.entry-content > .wp-block-group.alignfull {
	padding-top:    clamp(3rem, 7vw, 4rem);
	padding-bottom: clamp(3rem, 7vw, 4rem);
}

h1.wp-block-heading { line-height: 1.08; letter-spacing: -.022em; }
h2.wp-block-heading { line-height: 1.12; letter-spacing: -.02em; }

/* ── Colour bands ────────────────────────────────────────────────
   Colour presets set the ground; these recolour links, eyebrows,
   borders and rules inside it. */
.has-ink-background-color a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--wheat); }
.has-ink-background-color p.eyebrow,
.has-ink-background-color p.is-style-eyebrow { color: var(--wp--preset--color--wheat); }
.has-ink-background-color h1, .has-ink-background-color h2,
.has-ink-background-color h3 { color: var(--wp--preset--color--paper); }
.has-ink-background-color .has-border-light-border-color { border-color: #4A4140; }
.has-ink-background-color .wp-block-separator { color: #3B3332; }

/* Cedar: ink type only — the guide forbids white on cedar. */
.has-cedar-background-color { color: var(--wp--preset--color--ink); }
.has-cedar-background-color a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--ink); text-decoration: underline; }
/* Cedar tops out at 4.19:1 against ink, so it cannot carry 13px text at
   AA at all — ink is the best available, not a pass. Keep small copy off
   cedar grounds. */
.has-cedar-background-color p.eyebrow,
.has-cedar-background-color p.is-style-eyebrow { color: var(--wp--preset--color--ink); }
.has-cedar-background-color .wp-element-button { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

/* Hairlines on tinted bands. */
.entry-content > .has-paper-tint-background-color {
	border-top: 1px solid var(--wp--preset--color--border-light);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

/* Adjacent full-bleed bands touch — colour, not extra space, separates
   bands. Kills the blockGap sliver between hero and facts bar, and
   between any two stacked bands. */
.entry-content > .alignfull + .alignfull {
	margin-block-start: 0;
}

/* No root-level gap either: header, main and footer butt together.
   Interior pages set their own top margin on <main> inline. */
body .wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* ── Signature header ────────────────────────────────────────────
   Icon · hairline · two-line name (the guide's UI signature). */
.ccc-signature-name {
	font-family: var(--wp--preset--font-family--alegreya-sans);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.12;
	letter-spacing: .005em;
	border-left: 1px solid var(--wp--preset--color--border-light);
	padding-left: 12px;
	margin: 0;
}
.ccc-signature-name a { color: var(--wp--preset--color--ink); text-decoration: none; }
.ccc-signature-icon { margin: 0; }
.ccc-signature-icon img { display: block; }

/* Header nav: quiet links, clay-deep on hover/current. */
.ccc-header .wp-block-navigation a { text-decoration: none; }
.ccc-header .wp-block-navigation a:hover { color: var(--wp--preset--color--clay-deep); }
.ccc-header .wp-block-navigation .current-menu-item > a {
	box-shadow: inset 0 -2px 0 var(--wp--preset--color--clay-deep);
}

/* ── Hero ────────────────────────────────────────────────────────
   Measure caps and the facts row core cover cannot express. */
.hero-inner { text-align: left; }
.hero-inner h1 { max-width: 16ch; margin-block-start: 10px; }
.hero-inner .hero-lead { max-width: 40ch; line-height: 1.35; margin-block-start: 12px; }
.hero-inner .wp-block-buttons { margin-block-start: clamp(1rem, 3vw, 1.5rem); }

.hero-facts {
	display: flex; flex-wrap: wrap; gap: .4rem .9rem;
	font-weight: 600; margin-block-start: clamp(1rem, 3vw, 1.5rem);
}
.hero-facts span { white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; }
.hero-facts span::before { content: "\00B7"; color: var(--wp--preset--color--wheat); font-size: .9em; }
.hero-facts span:first-child::before { content: none; }

/* Wheat facts bar under the hero — never scrolls out of first screen. */
.ccc-facts-bar { font-size: var(--wp--preset--font-size--base); }
.ccc-facts-bar strong { font-weight: 600; }

/* Core exposes one focalPoint; shift the crop on phones so faces stay in frame. */
@media (max-width: 560px) {
	.wp-block-cover > img.wp-block-cover__image-background { object-position: 32% 45% !important; }
	.hero-inner .wp-block-button, .hero-inner .wp-block-button__link { width: 100%; text-align: center; }
}

/* ── Measure ─────────────────────────────────────────────────────
   Width caps live ONLY inside .ccc-stack flow groups. In WP's
   constrained layout, any width-capped child is auto-centered
   (margin:auto !important), which staggers left edges. A stack is
   a plain flow group that owns the grid line; its children keep
   their measure and share one left edge. */
.ccc-stack > p.wp-block-paragraph { max-width: 65ch; }
.ccc-stack > .wp-block-list { max-width: 65ch; }
.ccc-stack > p.has-medium-font-size { max-width: 52ch; }
.ccc-stack > h1.wp-block-heading { max-width: 20ch; }
.ccc-stack > h2.wp-block-heading { max-width: 24ch; }