/* =============================================================================
   Jonathan Seet - design layer
   Phase 1B. Every colour, type size and spacing value is a theme.json token.
   The js-* class names are a fixed contract across 43 documents - see README.
   ============================================================================= */

/* Layout measures. Structural line-length constraints carried over from Phase 0.
   Not design tokens - they control measure, not spacing. Single-sourced here. */
:root {
	--js-measure-lead: 600px;
	--js-measure-text: 720px;
	--js-measure-wide: 820px;
	--js-measure-media: 840px;
	--js-measure-list: 860px;
	--js-measure-head: 900px;
	--js-card-min: 260px;
	--js-rule: 1px;
}

/* -----------------------------------------------------------------------------
   1. Vertical rhythm
   Colour, type and base spacing now come from theme.json.
   -------------------------------------------------------------------------- */
main.wp-block-group { margin-top: 0 !important; }

main > .wp-block-group {
	padding-top: var(--wp--preset--spacing--40) !important;
	padding-bottom: var(--wp--preset--spacing--60) !important;
}

.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > .wp-block-quote { max-width: var(--js-measure-text); }

.entry-content > * { margin-block: 0; }
.entry-content > * + * { margin-block-start: var(--wp--preset--spacing--40); }
.entry-content > h2 {
	margin-block-start: var(--wp--preset--spacing--60);
	max-width: var(--js-measure-head);
}
.entry-content > h2 + * { margin-block-start: var(--wp--preset--spacing--30); }
.entry-content > .wp-block-group { margin-block-start: var(--wp--preset--spacing--60); }

/* Phase 0 pinned every prose block to the left edge of the post-content wrapper
   so that blocks with different measures (720 / 820 / 900) still share one left
   edge instead of each centring on its own axis. The wrapper is now alignfull,
   so the same rule has to aim at the left edge of the content column rather than
   the left edge of the viewport. max() keeps it at 0 below contentSize. */
/* One left edge for the whole page. Blocks carry different measures (720 for
   body copy, 820 for the article head, 900 for headings, 1200 for cards and
   tool embeds); centring each on its own axis would give the page a ragged left
   margin, so every block is instead pinned to the left edge of the wide column -
   the same edge the header logo and the footer sit on. max() collapses the inset
   to zero once the viewport is narrower than the wide measure. */
:root { --js-column-inset: max(0px, calc(50% - (var(--wp--style--global--wide-size) / 2))); }

.entry-content > :not(.alignwide):not(.alignfull),
main.wp-block-group > :not(.alignwide):not(.alignfull) {
	margin-left: var(--js-column-inset) !important;
	margin-right: auto !important;
}
.entry-content > .wp-block-group:not(.alignwide):not(.alignfull),
.entry-content > .js-card,
.entry-content > .js-crosslink { max-width: var(--js-measure-wide); }

.wp-block-columns {
	gap: var(--wp--preset--spacing--40) !important;
	align-items: flex-start;
}

.wp-block-navigation {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* -----------------------------------------------------------------------------
   2. Focus ring
   Primary red is invisible on the primary button (1.0:1) and fails on the dark
   CTA band (2.91:1). The surface separator ring makes it visible on every
   background. Keep `summary` in the selector or all 88 FAQ accordions lose
   their keyboard indicator.
   -------------------------------------------------------------------------- */
:where(a, button, summary, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--surface);
}

/* -----------------------------------------------------------------------------
   3. Type roles
   -------------------------------------------------------------------------- */
.js-lead {
	font-size: var(--wp--preset--font-size--h-4) !important;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	max-width: var(--js-measure-lead);
}

.js-eyebrow {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--xsmall);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	font-weight: 500;
	margin: 0 0 var(--wp--preset--spacing--20) !important;
}

/* Branch wayfinding. Build brief 5.2 - each branch carries a distinct accent
   so visitors always know which of the three zones they are in. */
body.branch-copywriting .js-eyebrow { color: var(--wp--preset--color--branch-copywriting); }
body.branch-educator    .js-eyebrow { color: var(--wp--preset--color--branch-educator); }
body.branch-training    .js-eyebrow { color: var(--wp--preset--color--branch-training); }

.js-breadcrumb {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xsmall);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.js-breadcrumb a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}
.js-breadcrumb a:hover { color: var(--wp--preset--color--contrast); }

.js-link {
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: 2px;
	transition: border-color 0.15s;
}
.js-link:hover { border-bottom-color: var(--wp--preset--color--contrast); }

/* -----------------------------------------------------------------------------
   4. Buttons
   Ghost padding subtracts the border so ghost and solid buttons align on a row.
   Border is 1px in the new system - the calc is recalculated, not copied.
   -------------------------------------------------------------------------- */
.js-btn .wp-block-button__link,
a.js-btn {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--surface) !important;
	border-radius: 2px;
	border: 0;
	font-weight: 500;
	padding: 0.875rem var(--wp--preset--spacing--40);
	text-decoration: none;
	transition: background 0.15s;
}
.js-btn .wp-block-button__link:hover,
a.js-btn:hover { background: var(--wp--preset--color--primary-hover) !important; }

.js-btn-ghost .wp-block-button__link,
a.js-btn-ghost {
	background: transparent !important;
	border: var(--js-rule) solid var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 2px;
	font-weight: 500;
	padding: calc(0.875rem - var(--js-rule)) calc(var(--wp--preset--spacing--40) - var(--js-rule));
	text-decoration: none;
	transition: background 0.15s, color 0.15s;
}
.js-btn-ghost .wp-block-button__link:hover,
a.js-btn-ghost:hover {
	background: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--surface) !important;
}

/* -----------------------------------------------------------------------------
   5. Surfaces
   Cards are full tap targets, so their boundary uses border-strong (3.23:1).
   The decorative `border` token (1.32:1) would fail WCAG 1.4.11.
   No offset shadows - the new direction is flat.
   -------------------------------------------------------------------------- */
.js-card {
	background: var(--wp--preset--color--surface);
	border: var(--js-rule) solid var(--wp--preset--color--border-strong);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--40);
}
.js-card > * { margin-block: 0; }
.js-card > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.js-card p { color: var(--wp--preset--color--muted); }
.js-card p:last-child { margin-block-start: var(--wp--preset--spacing--30); }

.js-cta {
	background: var(--wp--preset--color--contrast);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--50);
}
.js-cta > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.js-cta h1, .js-cta h2, .js-cta h3 { color: var(--wp--preset--color--surface); }
.js-cta p {
	color: var(--wp--preset--color--border);
	max-width: var(--js-measure-lead);
}
.js-cta a {
	color: var(--wp--preset--color--surface);
	border-bottom-color: var(--wp--preset--color--primary);
	font-weight: 500;
}
.js-cta .wp-block-button__link {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--surface) !important;
}

.js-crosslink {
	background: var(--wp--preset--color--surface);
	border-left: 3px solid var(--wp--preset--color--accent);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
}
.js-crosslink p {
	color: var(--wp--preset--color--muted);
	margin: 0;
}
.js-crosslink a {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

/* -----------------------------------------------------------------------------
   6. FAQ accordions - native <details>, 88 instances
   -------------------------------------------------------------------------- */
.js-faq {
	border-top: var(--js-rule) solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--20) 0;
}
.js-faq summary {
	font-weight: 500;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--base);
}
.js-faq[open] summary { margin-bottom: var(--wp--preset--spacing--10); }

/* -----------------------------------------------------------------------------
   7. Sidebar rail
   -------------------------------------------------------------------------- */
.js-rail {
	position: sticky;
	top: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}
.js-rail > * { margin: 0 !important; }
.js-rail .js-card {
	padding: var(--wp--preset--spacing--30);
	max-width: none !important;
}
.js-rail h3 { font-size: var(--wp--preset--font-size--h-4); margin-top: 0; }

.js-rail-links ul {
	list-style: none;
	margin: var(--wp--preset--spacing--10) 0 0;
	padding: 0;
}
.js-rail-links li { margin: var(--wp--preset--spacing--10) 0; }
.js-rail-links a {
	border-bottom: 2px solid var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
}

.js-credentials { color: var(--wp--preset--color--muted); }
.js-rail .js-credentials {
	font-size: var(--wp--preset--font-size--xsmall);
	display: block;
	line-height: 1.5;
}

@media (max-width: 781px) {
	.js-rail { position: static; }
}

/* -----------------------------------------------------------------------------
   8. Shortcode grids - [js_testimonials], [js_resources]
   The grid is load-bearing: the shortcodes emit a flat list of cards.
   -------------------------------------------------------------------------- */
.js-testimonials,
.js-reslist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--js-card-min), 1fr));
	gap: var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--30) 0;
}
.js-reslist .js-card { margin: 0; }

.js-tcard {
	background: var(--wp--preset--color--surface);
	border: var(--js-rule) solid var(--wp--preset--color--border-strong);
	border-radius: 2px;
	padding: var(--wp--preset--spacing--30);
	margin: 0;
}
.js-tcard p { font-style: italic; }
.js-tcard cite {
	font-style: normal;
	font-weight: 500;
	font-size: var(--wp--preset--font-size--small);
	display: block;
	margin-top: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--muted);
}

/* -----------------------------------------------------------------------------
   9. Images
   Five of the six js-imgph instances hold real photography; one is a labelled
   placeholder. object-fit is structural - without it images distort.
   -------------------------------------------------------------------------- */
.js-imgph {
	background: var(--wp--preset--color--surface);
	border: var(--js-rule) solid var(--wp--preset--color--border);
	border-radius: 2px;
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: var(--js-measure-media);
	margin: var(--wp--preset--spacing--40) 0;
	overflow: hidden;
}
.js-imgph:not(.js-hero-media) img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.js-imgph-label {
	font-family: var(--wp--preset--font-family--body) !important;
	font-size: var(--wp--preset--font-size--xsmall);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	text-align: center;
	margin: 0;
	padding: var(--wp--preset--spacing--20);
}

.js-hero-media {
	aspect-ratio: 4 / 5;
	max-width: none;
	margin: 0 0 var(--wp--preset--spacing--30);
}
@media (max-width: 781px) {
	.js-hero-media { aspect-ratio: 16 / 9; }
}

/* The hero portrait is deliberately left out of the object-fit rule above so it
   is never cropped, which also leaves it at intrinsic width. Inside a flex
   column (min-width defaults to auto) that intrinsic width becomes the column's
   floor, and the home hero pushed the page ~170px wide on a 390px screen.
   Clamping the image and letting the column shrink fixes it without touching
   how the hero renders above the breakpoint. */
.wp-block-column { min-width: 0; }
.js-hero-media { max-width: 100%; }
.js-hero-media img { max-width: 100%; height: auto; }

/* -----------------------------------------------------------------------------
   10. Article head and blog list
   -------------------------------------------------------------------------- */
.js-article-head { max-width: var(--js-measure-wide); }
/* The head is already sitting on the column edge, so its children align flush
   inside it rather than centring on their own narrower measures - otherwise the
   H1 and the lead paragraph each start at a different x from the body below. */
.js-article-head > * {
	margin-left: 0 !important;
	margin-right: auto !important;
}
.js-article-head .wp-block-post-title { margin: var(--wp--preset--spacing--10) 0; }
.js-article-head .wp-block-post-terms.js-eyebrow { margin: 0 0 var(--wp--preset--spacing--20) !important; }
.js-article-head .js-breadcrumb {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
}
main > .js-article-head {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.wp-block-post-date {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xsmall);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-top: var(--wp--preset--spacing--10);
}
.wp-block-post-terms.js-eyebrow a {
	text-decoration: none;
	color: inherit;
}

.js-bloglist {
	max-width: var(--js-measure-list);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--50);
}
.js-bloglist > li,
.js-bloglist .wp-block-post { margin: 0; }
.js-bloglist .js-card { max-width: none; }
.js-bloglist .wp-block-post-title { margin: 0 0 var(--wp--preset--spacing--10); }
.js-bloglist .wp-block-post-title a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.js-bloglist .wp-block-post-date { margin: 0 0 var(--wp--preset--spacing--10); }
.js-bloglist .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted); }
.js-bloglist .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: var(--wp--preset--spacing--10);
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	text-decoration: none;
}

/* -----------------------------------------------------------------------------
   11. Comparison table - js-table, one instance, previously unstyled
   -------------------------------------------------------------------------- */
.js-table table {
	border-collapse: collapse;
	width: 100%;
}
.js-table th,
.js-table td {
	border: var(--js-rule) solid var(--wp--preset--color--border);
	padding: var(--wp--preset--spacing--20);
	text-align: left;
	vertical-align: top;
}
.js-table th {
	background: var(--wp--preset--color--surface);
	font-weight: 600;
}

/* -----------------------------------------------------------------------------
   12. Tool embeds
   The three classroom tools were authored against a ~1000px canvas. theme.json
   holds prose to 800px, so each tool root is let out of the prose column to the
   wide measure with a symmetric negative inline margin. The percentage resolves
   against the post-content wrapper, so the tool stays centred on the same axis
   as the prose above it, and the wrapper itself is left at 800px so headings
   and paragraphs keep the same left edge as every other page on the site.
   No transform is used: the timer opens fixed-position overlays, and a
   transformed ancestor would become their containing block.
   Keep this selector list in sync if a fourth tool is added.
   -------------------------------------------------------------------------- */
main :is(#jsct-root, #jsw-root, .rrad-app, .rrad-root) {
	--js-tool-width: min(var(--wp--style--global--wide-size), 100%);
	max-width: none;
	width: var(--js-tool-width);
	/* Core's constrained layout sets margin-left/right to auto with !important on
	   every direct child of the post-content wrapper, so the breakout has to match
	   that weight or the tool overflows to the right instead of centring. */
	margin-inline: calc(50% - (var(--js-tool-width) / 2)) !important;
}

/* The embed template is a bare chrome-free shell: no column, no page margins.
   It has to opt out of both the shared left edge and the tool breakout, or the
   column inset would push the tool sideways inside the iframe. */
.js-embed-root > *,
.js-embed-root .entry-content > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.js-embed-root :is(#jsct-root, #jsw-root, .rrad-app, .rrad-root) {
	--js-tool-width: 100%;
	margin-inline: 0 !important;
}

/* -----------------------------------------------------------------------------
   13. Footer CTA band
   Shipped as parts/footer-cta.html and referenced per template, never baked into
   the footer, so contact, enquiry and embed views can leave it out. The band is
   full-bleed; its contents sit on the same left edge as the rest of the page.
   -------------------------------------------------------------------------- */
.js-cta-band {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--surface);
}
.js-cta-band > * {
	margin-left: var(--js-column-inset) !important;
	margin-right: auto !important;
}
.js-cta-band > * + * { margin-block-start: var(--wp--preset--spacing--30); }
.js-cta-band h2 {
	color: var(--wp--preset--color--surface);
	margin-block-start: 0;
}
.js-cta-band p {
	color: var(--wp--preset--color--border);
	max-width: var(--js-measure-lead);
}
.js-cta-band a { color: var(--wp--preset--color--surface); }
.js-cta-band .wp-block-button__link {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--surface) !important;
}
.js-cta-band .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary-hover) !important;
}

/* Below the breakpoint the band centres and the button takes the full row, so
   the CTA stays the largest tap target on a phone. */
@media (max-width: 781px) {
	.js-cta-band { text-align: center; }
	.js-cta-band > * {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}
	.js-cta-band p { margin-inline: auto; }
	.js-cta-band .wp-block-buttons { justify-content: center; }
	.js-cta-band .wp-block-button { width: 100%; }
	.js-cta-band .wp-block-button__link {
		display: block;
		width: 100%;
		/* The core button link is content-box, so a plain width:100% adds its two
		   32px paddings on top and the button runs off the right edge. */
		box-sizing: border-box;
		text-align: center;
	}
}

/* -----------------------------------------------------------------------------
   14. Search field
   Used by the 404 and search templates. The input carries border-strong rather
   than border: it is an interactive control, so WCAG 1.4.11 applies.
   -------------------------------------------------------------------------- */
.js-search { max-width: var(--js-measure-text); }
.js-search .wp-block-search__inside-wrapper {
	border: var(--js-rule) solid var(--wp--preset--color--border-strong);
	border-radius: 2px;
	background: var(--wp--preset--color--surface);
	padding: 0;
}
.js-search .wp-block-search__input {
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	padding: 0.75rem var(--wp--preset--spacing--30);
}
.js-search .wp-block-search__input:focus { outline: none; }
.js-search .wp-block-search__inside-wrapper:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.js-search .wp-block-search__button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	padding: 0.75rem var(--wp--preset--spacing--40);
	transition: background 0.15s;
}
.js-search .wp-block-search__button:hover { background: var(--wp--preset--color--primary-hover); }

.js-search-branches {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.js-search-branches a { color: var(--wp--preset--color--primary); }