/**
 * Shared "WordPress editor content" styling system (Phase 7) — makes any
 * Page's `the_content()` output automatically match the theme's
 * typography/spacing/colors with zero per-page CSS. Targets `.entry-content`,
 * the wrapper class ALREADY present in template-parts/content-page.php
 * (confirmed via direct read — no template change needed, this file is
 * the only thing that was missing). Loaded on every Page (`is_page()`,
 * see functions.php) — never on posts (article-single.css's `.art-body`
 * remains the article-specific system; the two are intentionally separate
 * files since an article's tone — e.g. the drop-cap — doesn't belong on
 * a legal/informational page).
 *
 * Base H1–H6 family/color and link color already come from
 * assets/css/base/typography.css (global, bare tag selectors) — this file
 * only adds what's NOT already global: spacing, lists, blockquote,
 * tables, images, code, hr, buttons, embeds, and the two heading
 * conventions below.
 *
 * TWO EDITOR CONVENTIONS (zero custom fields/settings — just heading
 * level choice):
 *   - Use an H2 for a section heading — gets a top divider line
 *     (border-top) simulating a boxed section, matching Disclaimer/
 *     Contributor Guidelines' "each section is its own box" layout.
 *   - Use an H3 instead for a plain heading with no divider line.
 *   - Use an H1 WITHIN the content (after the page's own hero title) for
 *     a large part-divider — confirmed from Contributor Guidelines' own
 *     ad-hoc "Editorial Rights" heading.
 */

/* Page-level shells for the two new reusable Page Templates — provide the
   side padding the content-hero "left" variant deliberately omits (see
   content-hero.css), and the narrower centered shell the "Simple Hero +
   Content" template uses. Values confirmed from Design Refrance's
   `.doc-shell` and Careers' own inline-styled content wrapper. */
.legal-shell {
	padding: 8px 56px 72px;
}

/* Disclaimer's own shell uses a shorter bottom padding (20px, not 72px) —
   confirmed from the "Final" reference's `.disc-shell{padding:8px 56px 20px}`.
   Contributor Guidelines' plain `.legal-shell` above is unaffected. */
.legal-shell--disclaimer {
	padding-bottom: 20px;
}

/* The "Simple Hero + Content" template's first paragraph is styled as an
   italic serif lede — confirmed from Careers' own inline-styled lede
   paragraph in Design Refrance ("Journalism is an art..."). Scoped to
   this shell specifically (not a general .entry-content rule) since it's
   this template's own convention, not a sitewide one. */
.simple-content-shell .entry-content > p:first-of-type {
	font-family: var(--font-secondary);
	font-style: italic;
	font-size: 26px;
	line-height: 1.4;
	color: var(--color-ink);
	margin-bottom: 0;
}

/* Careers' own 2nd/3rd paragraph spacing — Design Refrance hardcodes
   margin-top:28px / 32px on these (not the generic 20px every other
   .entry-content paragraph uses), and its closing "send us your pitch"
   line is styled darker/tighter than ordinary body copy. Margins collapse
   with the generic p's margin-bottom, so only margin-top needs setting. */
.simple-content-shell .entry-content > p:first-of-type + p {
	margin-top: 28px;
}

.simple-content-shell .entry-content > p:last-child:not(:first-of-type) {
	margin-top: 32px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-ink);
}

/* Design Refrance bolds the mailto link specifically in this closing line
   (`font-weight:600` on the <a>, confirmed inline in TSI Careers.html) —
   every other .entry-content link stays regular weight. */
.simple-content-shell .entry-content > p:last-child:not(:first-of-type) a {
	font-weight: 600;
}

.simple-content-shell {
	max-width: 720px;
	margin: 0 auto;
	padding: 60px 56px 84px;
	text-align: center;
}

@media (max-width: 768px) {
	.legal-shell {
		padding: 16px 16px 48px;
	}

	/* .simple-content-shell (Careers) deliberately has NO mobile override
	   here — confirmed directly against Design Refrance at 375px: its
	   inline-styled body wrapper keeps the exact same padding
	   (60px 56px 84px) at every viewport width, unlike .legal-shell above
	   (which does reduce on mobile). An earlier assumption that it would
	   follow the same desktop→mobile reduction pattern was wrong and made
	   the side margins too narrow on mobile compared to the reference. */
}

.entry-content {
	counter-reset: malasiya-section;
}

.entry-content h1 {
	font-size: 34px;
	letter-spacing: -.8px;
	line-height: 1.1;
	margin: 52px 0 8px;
}

.entry-content h1:first-child {
	margin-top: 0;
}

/**
 * Reference wraps each heading+paragraphs group in its own `<section
 * class="disc-sec">` with `padding:34px 0;border-top:1px solid var(--line)`
 * — a real per-section box. Flat WP block content has no such wrapper, so
 * this is approximated on the heading itself using the CSS box model
 * directly, without needing a wrapper div or `:has()`:
 *   margin-top: 34px   → sits OUTSIDE the border, i.e. BEFORE it — this is
 *                        the "previous section's own trailing padding".
 *                        It collapses with the preceding paragraph's own
 *                        margin-bottom (15/20px) — collapsing takes the
 *                        MAX of the two, not the sum, so it resolves to
 *                        exactly 34px regardless, matching the reference's
 *                        `.sec p:last-child{margin-bottom:0}` (which zeroes
 *                        the paragraph and relies purely on the section's
 *                        own padding) without needing that rule at all.
 *   border-top          → drawn at the margin/padding boundary, exactly
 *                        where the reference's section border sits.
 *   padding-top: 34px   → sits INSIDE the border — the new section's own
 *                        leading padding, before the heading text.
 * Net effect: 34px, border, 34px, heading — byte-for-byte the same visual
 * result as two adjoining `.disc-sec` boxes, with zero markup changes.
 */
/* h2/h3 share one unified size (22px, on request — tried the reference's
   own literal 27px first, but 22px reads better here) and the same
   section-divider treatment (border-top + matching margin/padding), so
   every section looks consistent whether or not it's numbered — only the
   ::before badge differs between them. */
.entry-content h2,
.entry-content h3 {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 22px;
	letter-spacing: -.3px;
	margin: 34px 0 14px;
	padding-top: 34px;
	border-top: 1px solid var(--color-line);
}

.entry-content > h2:first-child,
.entry-content > h3:first-child,
.entry-content > *:first-child h2,
.entry-content > *:first-child h3 {
	border-top: 0;
	padding-top: 0;
	margin-top: 0;
}

.entry-content h4 {
	font-size: 19px;
	margin: 24px 0 10px;
}

.entry-content h5,
.entry-content h6 {
	margin: 20px 0 8px;
}

.entry-content p {
	font-size: 17px;
	line-height: 1.75;
	color: var(--color-ink-mid);
	margin-bottom: 20px;
}

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

/* Contributor Guidelines uses 20px body copy — Design Refrance's
   `.sec p`/`.sec li` (TSI Contributor Guidelines.html), with NO
   mobile-size reduction — NOT the 17px/16px this shared system otherwise
   uses for Careers (a genuinely different, confirmed value there,
   borrowed from .art-body for the general case). Scoped to .legal-shell
   so Careers' .simple-content-shell is untouched. */
.legal-shell .entry-content p,
.legal-shell .entry-content li {
	font-size: 20px;
}

.legal-shell .entry-content p {
	margin-bottom: 15px;
}

.legal-shell .entry-content ul,
.legal-shell .entry-content ol {
	margin-bottom: 15px;
}

/* Disclaimer specifically uses 15.5px, not 20px — confirmed from the
   richer "Disclaimer (Standalone)" reference (`.sec p`/`.sec li`), which
   superseded the plainer TSI Disclaimer.html this 20px value was
   originally (wrongly) generalized from. */
.legal-shell--disclaimer .entry-content p,
.legal-shell--disclaimer .entry-content li {
	font-size: 15.5px;
}

.entry-content p b,
.entry-content p strong {
	color: var(--color-ink);
	font-weight: 600;
}

.entry-content a {
	color: var(--color-primary-deep);
	border-bottom: 1px solid var(--color-line-mid);
}

.entry-content a:hover,
.entry-content a:focus {
	border-color: var(--color-primary-deep);
}

/* Lists — real counter-based numbers for <ol>, not the browser default
   (a gap article-single.css's .art-body itself has — fixed here). */
.entry-content ul,
.entry-content ol {
	margin: 4px 0 20px;
	padding-left: 0;
	list-style: none;
	counter-reset: malasiya-ol;
}

.entry-content li {
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-ink-mid);
	padding-left: 26px;
	position: relative;
	margin-bottom: 10px;
}

.entry-content ul > li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 11px;
	width: 6px;
	height: 6px;
	background: var(--color-primary);
	border-radius: 50%;
}

.entry-content ol > li {
	counter-increment: malasiya-ol;
}

.entry-content ol > li::before {
	content: counter(malasiya-ol) '.';
	position: absolute;
	left: 0;
	font-weight: 700;
	color: var(--color-primary-deep);
}

/* Blockquote as a highlighted callout — confirmed from Design Refrance's
   `.doc-intro` (the intro highlight box on both Disclaimer and
   Contributor Guidelines): a native WP Quote block, styled automatically. */
/* Border color/background are CSS custom properties (Appearance →
   Customize → Global Settings → Content Callout Boxes) with a fallback
   equal to this rule's original hardcoded values, so the box looks
   identical if that Customizer section is ever skipped/removed. The
   border SIDE (left by default) is a plain literal here — switching it to
   right/top/bottom isn't a color, so it can't be a CSS variable; that
   case is handled by a small override block in
   inc/customizer/inline-css.php, which also flips this rule's corner
   radius to match whichever side ends up with the border. */
.entry-content blockquote {
	font-size: 20px;
	line-height: 1.7;
	color: var(--color-ink);
	border-left: 3px solid var(--callout-border-color, var(--color-primary));
	background: var(--callout-bg, var(--color-primary-wash));
	padding: 22px 26px;
	border-radius: 0 6px 6px 0;
	margin: 0 0 44px;
}

/* The callout's own <p> directly matches ".entry-content p" above (its
   own color: var(--color-ink-mid), grey) — a direct match on the element
   itself beats color merely INHERITED from the blockquote ancestor, so
   the grey rule was winning and the callout text rendered grey instead of
   the intended near-black ink color. Re-asserted here explicitly rather
   than relying on inheritance. */
.entry-content blockquote p {
	color: var(--color-ink);
}

/* Disclaimer's intro callout is 18px, not the 20px Contributor Guidelines
   uses — confirmed from the richer "Disclaimer (Standalone)" reference. */
.legal-shell--disclaimer .entry-content blockquote {
	font-size: 18px;
}

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

/* The intro callout's own bold text is a full 700 weight, not the 600 the
   generic ".entry-content p strong" rule above gives ordinary paragraph
   bold text — confirmed from the richer Disclaimer reference's dedicated
   `.doc-intro b { font-weight: 700; }` override. Re-added on request after
   an earlier revert had removed it along with everything else that round —
   this one specifically was still wanted. */
.entry-content blockquote strong,
.entry-content blockquote b {
	font-weight: 700;
}

.entry-content blockquote cite {
	display: block;
	font-style: normal;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-ink-soft);
	margin-top: 12px;
}

.entry-content hr {
	border: 0;
	border-top: 1px solid var(--color-line);
	margin: 40px 0;
}

.entry-content img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-thumb);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin-bottom: 24px;
}

.entry-content th,
.entry-content td {
	border: 1px solid var(--color-line);
	padding: 10px 14px;
	text-align: left;
}

.entry-content th {
	background: var(--color-primary-wash);
	font-weight: 700;
	color: var(--color-ink);
}

.entry-content code {
	font-family: monospace;
	font-size: .9em;
	background: var(--color-wash);
	padding: 2px 6px;
	border-radius: 4px;
}

.entry-content pre {
	background: var(--color-ink);
	color: var(--color-white);
	padding: 18px 20px;
	border-radius: var(--radius-thumb);
	overflow-x: auto;
	margin-bottom: 24px;
}

.entry-content pre code {
	background: none;
	padding: 0;
	color: inherit;
	font-size: 14px;
	line-height: 1.6;
}

.entry-content .wp-block-button__link,
.entry-content .wp-element-button {
	font-family: var(--font-primary);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	background: var(--color-primary-deep);
	color: var(--color-white);
	border: 0;
	border-radius: var(--radius-pill);
	padding: 15px 38px;
	display: inline-block;
}

.entry-content .wp-block-button__link:hover {
	background: var(--color-primary);
}

/* Pullquote block → the dark closing "risk warning" note box — Design
   Refrance's `.doc-note` (a real, used element in the richer "Disclaimer
   (Standalone)" reference — a dark green box with a small yellow kicker
   and light body text). The Pullquote block's own `cite` becomes that
   kicker (e.g. "Risk warning"); its quote paragraph becomes the body. */
.entry-content .wp-block-pullquote {
	margin: 44px 0 0;
	background: var(--risk-box-bg, var(--color-bar));
	border-radius: var(--radius-thumb);
	padding: 34px 36px;
	/* Core's Pullquote block defaults to center-aligned text — Design
	   Refrance's `.doc-note` is left-aligned block text. */
	text-align: left;
}

.entry-content .wp-block-pullquote blockquote {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-size: inherit;
}

.entry-content .wp-block-pullquote p {
	font-size: 15px;
	line-height: 1.7;
	color: #dfe7dd;
	margin-bottom: 0;
}

.entry-content .wp-block-pullquote p b,
.entry-content .wp-block-pullquote p strong {
	color: var(--color-white);
}

.entry-content .wp-block-pullquote cite {
	order: -1;
	display: block;
	font-style: normal;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--risk-box-kicker, var(--color-accent));
	margin-bottom: 12px;
}

.entry-content .wp-block-embed,
.entry-content .wp-embed {
	margin-bottom: 24px;
}

.entry-content .wp-block-embed iframe {
	width: 100%;
	border-radius: var(--radius-thumb);
}

@media (max-width: 768px) {
	.entry-content h1 {
		font-size: 28px;
	}

	/* No mobile reduction for h2/h3 section headings — 22px is already
	   conservative enough to not need one. */

	.entry-content p,
	.entry-content li {
		font-size: 16px;
	}

	/* .legal-shell keeps its own body-copy size at every width — confirmed
	   no mobile override exists for `.sec p`/`.sec li` in any of the legal
	   reference files — so these must win back over the 16px rule above. */
	.legal-shell .entry-content p,
	.legal-shell .entry-content li {
		font-size: 20px;
	}

	.legal-shell--disclaimer .entry-content p,
	.legal-shell--disclaimer .entry-content li {
		font-size: 15.5px;
	}

	.entry-content blockquote {
		font-size: 17px;
		padding: 18px 20px;
	}

	.legal-shell--disclaimer .entry-content blockquote {
		font-size: 16px;
	}
}