/*
 * Global Content Styles
 * =====================
 * Scope  : :is(body.page .entry-content, .product-body-content)
 * Purpose: Restore heading/text/list/link styles that are reset by the
 *          Tailwind preflight inside tbr-design-system.css. The DS loads
 *          as a <link> AFTER WordPress theme.json inline styles, so the
 *          Tailwind reset (h1-h6 { font-size: inherit; margin: 0 }) wins
 *          the cascade on plain content pages. This file uses class-level
 *          specificity (0,2,1) to beat the reset (0,0,1).
 *
 * Loads  : after theblogrelay-ds (declared as dependency in functions.php).
 * Sizes  : via --tbr-h*-size tokens in base.css — never hardcode here.
 *          To change a heading size: update base.css only.
 *
 * Applies to: all pages using core/post-content (page.html, page-about,
 *             page-contact etc.). Does NOT apply to body.single-post.
 *
 * Long-term fix: Fiona to scope Tailwind preflight in tbr-design-system.css
 *                to a component container class so it stops fighting theme.json.
 */

/* ── Headings — font family ── */
:is(body.page .entry-content, .product-body-content) h1,
:is(body.page .entry-content, .product-body-content) h2,
:is(body.page .entry-content, .product-body-content) h3 {
    font-family: var(--wp--preset--font-family--display);
}

:is(body.page .entry-content, .product-body-content) h4,
:is(body.page .entry-content, .product-body-content) h5,
:is(body.page .entry-content, .product-body-content) h6 {
    font-family: var(--wp--preset--font-family--body);
}

/* ── First heading — reset margin-top so zone padding isn't doubled ── */
/* margin-top on h2/h3 exists for spacing between headings in prose flow.
   When the heading is the very first element in entry-content, that margin
   stacks on top of .page-body's padding-top and creates an outsized gap. */
:is(body.page .entry-content, .product-body-content) > h2:first-child,
:is(body.page .entry-content, .product-body-content) > h3:first-child {
    margin-top: 0;
}

/* ── Headings — size, weight, spacing ── */
:is(body.page .entry-content, .product-body-content) h1 {
    font-size: var(--tbr-h1-size);
    font-weight: 300;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: 0.5em;
}

:is(body.page .entry-content, .product-body-content) h2 {
    font-size: var(--tbr-h2-size);
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -.01em;
    margin-top: 1.25em;
    margin-bottom: 0.5em;
}

:is(body.page .entry-content, .product-body-content) h3 {
    font-size: var(--tbr-h3-size);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-top: 1.75em;
    margin-bottom: 0.4em;
}

:is(body.page .entry-content, .product-body-content) h4 {
    font-size: var(--tbr-h4-size);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .01em;
    margin-top: 1.5em;
    margin-bottom: 0.35em;
}

:is(body.page .entry-content, .product-body-content) h5 {
    font-size: var(--tbr-h5-size);
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--wp--preset--color--warm-600);
    margin-top: 1.25em;
    margin-bottom: 0.3em;
}

:is(body.page .entry-content, .product-body-content) h6 {
    font-size: var(--tbr-h6-size);
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--wp--preset--color--warm-500);
    margin-top: 1em;
    margin-bottom: 0.25em;
}

/* ── Paragraphs ── */
:is(body.page .entry-content, .product-body-content) p {
    line-height: 1.75;
    margin-bottom: 1.25em;
}

/* ── Component reset — section headers ── */
/* .eyebrow (<p>) and .section-title (<h2>) sit inside .section-header components.
   The prose margin rules above (p margin-bottom, h2 margin-top) incorrectly apply
   to these component elements and create outsized gaps. Reset both here so the DS
   component styles control the spacing, not prose flow rules. */
:is(body.page .entry-content, .product-body-content) .eyebrow {
    margin-bottom: 0;
    line-height: inherit;
}
:is(body.page .entry-content, .product-body-content) .section-title {
    margin-top: 0;
}

/* ── Lists ── */
:is(body.page .entry-content, .product-body-content) ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}

:is(body.page .entry-content, .product-body-content) ol {
    list-style: decimal;
    padding-left: 1.5em;
    margin-bottom: 1.25em;
}

:is(body.page .entry-content, .product-body-content) ul ul,
:is(body.page .entry-content, .product-body-content) ol ul {
    list-style: circle;
}

:is(body.page .entry-content, .product-body-content) li {
    margin-bottom: 0.35em;
    line-height: 1.75;
}

/* ── Links ── */
:is(body.page .entry-content, .product-body-content) a:not(.wp-element-button) {
    color: var(--wp--preset--color--primary-700);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--wp--preset--color--primary-200);
}

:is(body.page .entry-content, .product-body-content) a:not(.wp-element-button):hover {
    color: var(--wp--preset--color--primary-800);
    text-decoration-color: var(--wp--preset--color--primary-600);
}

/* ══════════════════════════════════════════════════════════════════════════
   STANDARD PAGE ZONE CLASSES
   Anatomy: page-header → page-feature → page-body → page-supplement → page-cta
   See: specs/page-template/00-overview.dev.md
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Zone 1: Page Header (REQUIRED on all pages) ── */
.page-header {
    background: var(--warm-50);
    border-bottom: 1px solid var(--warm-200);
    padding: 3rem 0 3.5rem;
}

.page-header__breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--warm-500);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.page-header__breadcrumb a {
    color: var(--warm-500);
    text-decoration: none;
    transition: color 0.15s;
}

.page-header__breadcrumb a:hover { color: var(--primary-700); }

.page-header__breadcrumb__sep { color: var(--warm-300); }

.page-header__label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--primary-600);
    margin-bottom: 0.75rem;
}

.page-header__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 400;
    font-style: italic;
    color: var(--warm-900);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.page-header__subtitle {
    font-size: 1.0625rem;
    color: var(--warm-600);
    line-height: 1.7;
    max-width: 56ch;
    margin: 0;
}

.page-header__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--warm-500);
    margin-top: 1rem;
}

.page-header__meta-sep { color: var(--warm-300); }

/* ── Zone 2: Page Feature (OPTIONAL — portrait, hero image, quote) ── */
.page-feature {
    padding: 5rem 0;
    background: #fff;
    border-bottom: 1px solid var(--warm-200);
}

/* ── Zone 3: Page Body (prose — entry-content scoped) ── */
.page-body {
    padding: 5rem 0;
    background: #fff;
    border-bottom: 1px solid var(--warm-200);
}

/* Privacy policy — reduce top padding; plain text page doesn't need the full zone inset */
body.privacy-policy .page-body {
    padding-top: 2.5rem;
}

/* Matches blog post content column: 1fr in (1fr 320px / gap 4rem) inside .container (1152px inner).
   Left-aligned — same position as blog post body text, no sidebar version. */
.page-body__prose {
    max-width: var(--container-article);
}

/* ── Zone 4: Page Supplement (OPTIONAL — cards, grids) ── */
.page-supplement {
    padding: 5rem 0;
    background: var(--warm-50);
    border-bottom: 1px solid var(--warm-200);
}

/* ── Zone 5: Page CTA (OPTIONAL — what's next) ── */
.page-cta {
    padding: 5rem 0;
    background: var(--primary-50);
    border-bottom: 1px solid var(--primary-100);
}

/* ── Dark-section paragraph colour fix ── */
/* .author-note__body sets color:warm-200 on the wrapper div, but WP paragraph
   blocks (.wp-block-paragraph) don't inherit it reliably — same inheritance
   failure as .footer__desc. Set explicitly so the dark background is readable. */
.author-note__body p,
.author-note__body .wp-block-paragraph {
    color: var(--warm-200);
}

/* ── Quote / Blockquote ─────────────────────────────────────── */
.post-content blockquote,
.post-content .wp-block-quote,
.product-body-content blockquote,
.product-body-content .wp-block-quote,
.product-content blockquote,
.product-content .wp-block-quote,
.entry-content blockquote,
.entry-content .wp-block-quote {
	background: linear-gradient(180deg, #ecf9fc 0%, #fff 100%);
	border-radius: 12px;
	padding: 1rem 1.5rem 1.25rem 1.5rem;
	margin: 2rem 0;
	position: relative;
	border: none;
}

.post-content blockquote::before,
.post-content .wp-block-quote::before,
.product-body-content blockquote::before,
.product-body-content .wp-block-quote::before,
.product-content blockquote::before,
.product-content .wp-block-quote::before,
.entry-content blockquote::before,
.entry-content .wp-block-quote::before {
	content: '\201C';
	font-family: var(--font-display);
	font-size: 4rem;
	color: var(--primary-100);
	line-height: 0.75;
	display: block;
	margin-bottom: .25rem;
	user-select: none;
}

.post-content blockquote p,
.post-content .wp-block-quote p,
.product-body-content blockquote p,
.product-body-content .wp-block-quote p,
.product-content blockquote p,
.product-content .wp-block-quote p,
.entry-content blockquote p,
.entry-content .wp-block-quote p {
	font-family: var(--font-display);
	font-size: 1.125rem;
	font-style: italic;
	font-weight: 400;
	color: var(--warm-600);
	line-height: 1.6;
	margin-bottom: 1rem;
}

.post-content blockquote cite,
.post-content .wp-block-quote cite,
.product-body-content blockquote cite,
.product-body-content .wp-block-quote cite,
.product-content blockquote cite,
.product-content .wp-block-quote cite,
.entry-content blockquote cite,
.entry-content .wp-block-quote cite {
	font-family: var(--font-body);
	font-size: .875rem;
	font-style: normal;
	color: var(--warm-500);
}

.post-content blockquote cite::before,
.post-content .wp-block-quote cite::before,
.product-body-content blockquote cite::before,
.product-body-content .wp-block-quote cite::before,
.product-content blockquote cite::before,
.product-content .wp-block-quote cite::before,
.entry-content blockquote cite::before,
.entry-content .wp-block-quote cite::before {
	content: '\2014\00A0';
}

/* ── AdSense: collapse unfilled ad slots ─────────────────────── */
ins.adsbygoogle[data-ad-status="unfilled"] {
	display: none !important;
}


/* ── Pullquote ───────────────────────────────────────────────── */

.post-content .wp-block-pullquote,
.product-body-content .wp-block-pullquote,
.product-content .wp-block-pullquote,
.entry-content .wp-block-pullquote {
	border-top: 2px solid var(--warm-200);
	border-bottom: 2px solid var(--warm-200);
	padding: 2.5rem 2rem;
	margin: 3rem 0;
	text-align: center;
	color: var(--warm-900) !important;
}

.post-content .wp-block-pullquote blockquote,
.product-body-content .wp-block-pullquote blockquote,
.product-content .wp-block-pullquote blockquote,
.entry-content .wp-block-pullquote blockquote {
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	color: inherit !important;
}

.post-content .wp-block-pullquote blockquote::before,
.product-body-content .wp-block-pullquote blockquote::before,
.product-content .wp-block-pullquote blockquote::before,
.entry-content .wp-block-pullquote blockquote::before {
	content: none;
}

.post-content .wp-block-pullquote blockquote p,
.post-content .wp-block-pullquote p,
.product-body-content .wp-block-pullquote blockquote p,
.product-body-content .wp-block-pullquote p,
.product-content .wp-block-pullquote blockquote p,
.product-content .wp-block-pullquote p,
.entry-content .wp-block-pullquote blockquote p,
.entry-content .wp-block-pullquote p {
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1.25vw + 0.625rem, 1.375rem);
	font-style: normal;
	font-weight: 300;
	color: var(--warm-900);
	line-height: 1.45;
	margin-bottom: 1rem;
}

.post-content .wp-block-pullquote cite,
.product-body-content .wp-block-pullquote cite,
.product-content .wp-block-pullquote cite,
.entry-content .wp-block-pullquote cite {
	font-family: var(--font-body);
	font-size: .875rem;
	font-style: normal;
	color: var(--warm-500);
	display: block;
}

.post-content .wp-block-pullquote cite::before,
.product-body-content .wp-block-pullquote cite::before,
.product-content .wp-block-pullquote cite::before,
.entry-content .wp-block-pullquote cite::before {
	content: '— ';
}

/* ── Verse (poetry / preserved line breaks) ──────────────────── */
.post-content .wp-block-verse,
.post-content pre.wp-block-verse,
.product-body-content .wp-block-verse,
.product-body-content pre.wp-block-verse,
.product-content .wp-block-verse,
.product-content pre.wp-block-verse,
.entry-content .wp-block-verse,
.entry-content pre.wp-block-verse {
	font-family: var(--font-display);
	font-size: 1rem;
	font-style: italic;
	font-weight: 400;
	color: var(--warm-600);
	line-height: 1.9;
	white-space: pre-wrap;
	background: var(--warm-50);
	border: none;
	border-left: 3px solid var(--primary-100);
	border-radius: 0 6px 6px 0;
	padding: .75rem 1.25rem .75rem 1.5rem;
	margin: 2rem 0;
}

/* ── Columns block ───────────────────────────────────────────── */
.post-content .wp-block-columns,
.product-body-content .wp-block-columns,
.product-content .wp-block-columns,
.entry-content .wp-block-columns {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
	margin: 2rem 0;
	align-items: flex-start;
}

.post-content .wp-block-column,
.product-body-content .wp-block-column,
.product-content .wp-block-column,
.entry-content .wp-block-column {
	flex-grow: 1;
	flex-basis: 0;
	min-width: 0;
	padding: 1.25rem 1.5rem;
}

/* Divider variant — is-style-border adds a separator between columns */
.post-content .wp-block-columns.is-style-border .wp-block-column + .wp-block-column,
.product-body-content .wp-block-columns.is-style-border .wp-block-column + .wp-block-column,
.product-content .wp-block-columns.is-style-border .wp-block-column + .wp-block-column,
.entry-content .wp-block-columns.is-style-border .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--warm-200);
}

/* Mobile: stack unless WP adds is-not-stacked-on-mobile */
@media (max-width: 599px) {
	.post-content .wp-block-columns:not(.is-not-stacked-on-mobile),
	.product-body-content .wp-block-columns:not(.is-not-stacked-on-mobile),
	.product-content .wp-block-columns:not(.is-not-stacked-on-mobile),
	.entry-content .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-direction: column;
	}

	.post-content .wp-block-columns.is-style-border .wp-block-column + .wp-block-column,
	.product-body-content .wp-block-columns.is-style-border .wp-block-column + .wp-block-column,
	.product-content .wp-block-columns.is-style-border .wp-block-column + .wp-block-column,
	.entry-content .wp-block-columns.is-style-border .wp-block-column + .wp-block-column {
		border-left: none;
		padding-left: 0;
		border-top: 1px solid var(--warm-200);
		padding-top: 1.5rem;
	}
}