/* =============================================================
   The Cranial Doc — frontend CSS
   Tokens come from theme.json (--wp--preset--*). This file
   handles layout shapes that theme.json can't express directly:
   asymmetric grids, hairline rules, mono details, focus rings.
   =============================================================
   Voice: NO em dashes in comments meant for output. NO blue
   except --wp--preset--color--stamp on credentials.
   Match the homepage mockup token-for-token.
============================================================= */

/* ----- Reset details (only what theme.json doesn't cover) ----- */

* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

/* ----- Focus ring (a11y baseline) ----- */

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--clay);
	outline-offset: 2px;
}

/* ----- Mono details ----- */

.is-style-mono,
.has-mono-font-family {
	font-family: var(--wp--preset--font-family--mono);
	letter-spacing: 0.04em;
}

.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* ----- Site header (sparse, badge left + nav right) ----- */

.wp-site-blocks > header {
	padding-block: var(--wp--preset--spacing--lg);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

/* ----- Form inputs (operator-direct, no glow, no rounding flourish) ----- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
textarea {
	font-family: var(--wp--preset--font-family--geist);
	font-size: var(--wp--preset--font-size--body-sm);
	padding: 13px 14px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 4px;
	width: 100%;
	max-width: 100%;
}

input:focus,
textarea:focus {
	outline: 2px solid var(--wp--preset--color--clay);
	outline-offset: -1px;
	border-color: var(--wp--preset--color--clay);
}

/* ----- Buttons inherit from theme.json elements.button — only override pseudo where needed ----- */

button,
.wp-block-button__link {
	transition: background-color 120ms ease;
}

/* ----- Forminator opt-in forms (homepage + lead-magnet landing pages) -----
   theme.json elements.button styles .wp-element-button only, and a Forminator
   submit is a bare <button>, so it never inherits the brand button. Forminator
   also ships per-form CSS at #forminator-module-NN ID specificity, hence the
   !important. Mirrors theme.json elements.button so every Forminator form
   matches the site's other CTAs. */

.forminator-ui .forminator-button-submit {
	background-color: var(--wp--preset--color--clay) !important;
	border: 1px solid var(--wp--preset--color--clay) !important;
	border-radius: 4px !important;
	color: var(--wp--preset--color--surface) !important;
	font-family: var(--wp--preset--font-family--geist) !important;
	font-size: var(--wp--preset--font-size--body-sm) !important;
	font-weight: 600 !important;
	padding: 13px 20px !important;
	width: auto !important;
	cursor: pointer;
	transition: background-color 120ms ease;
}

.forminator-ui .forminator-button-submit:hover {
	background-color: var(--wp--preset--color--clay-deep) !important;
}

.forminator-ui .forminator-button-submit:focus-visible {
	outline: 2px solid var(--wp--preset--color--clay) !important;
	outline-offset: 2px;
}

/* ----- Essay reading column (single-column, 760px) ----- */

.is-essay-body > * {
	max-width: 760px;
	margin-inline: auto;
}

.is-essay-body p {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.62;
}

/* ----- Disclaimer block (auto-injected by mu-plugin at end of essays) ----- */

.cranial-doc-disclaimer {
	margin-block-start: var(--wp--preset--spacing--3-xl);
	padding: var(--wp--preset--spacing--lg);
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--muted);
	font-style: italic;
}

/* ----- Pull quote (highlight yellow, sparingly, inside essays only) ----- */

.wp-block-pullquote {
	background: var(--wp--preset--color--highlight);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	border: none;
	font-style: normal;
}

.wp-block-pullquote p {
	font-size: var(--wp--preset--font-size--h4);
	line-height: 1.35;
}

/* ----- Credentials strip (stamp blue, mono, ONLY here) ----- */

.cranial-doc-credentials {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--credentials);
	color: var(--wp--preset--color--stamp);
	letter-spacing: 0.04em;
	line-height: 1.8;
}

.cranial-doc-credentials__label {
	color: var(--wp--preset--color--muted);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.1em;
	display: block;
	margin-block-end: 4px;
}

/* ----- Homepage hero asymmetric grid (58/42) ----- */

.cranial-doc-hero {
	display: grid;
	grid-template-columns: 58fr 42fr;
	gap: 64px;
	align-items: center;
	padding-block: var(--wp--preset--spacing--6-xl);
}

.cranial-doc-hero__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
}

/* ----- Training section grid (3fr / 2fr) ----- */

.cranial-doc-training {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 64px;
	align-items: center;
	padding-block: var(--wp--preset--spacing--5-xl);
	border-block-start: 1px solid var(--wp--preset--color--border);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.cranial-doc-training__meta {
	display: grid;
	row-gap: var(--wp--preset--spacing--md);
}

.cranial-doc-training__row {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--wp--preset--spacing--md);
	padding-block: var(--wp--preset--spacing--sm);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.cranial-doc-training__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.cranial-doc-training__value {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--body-sm);
}

/* ----- Podcast strip ----- */

.cranial-doc-podcast__hero > .cranial-doc-podcast__hero-art {
	flex: 0 0 140px;
	margin: 0;
}

.cranial-doc-podcast__hero > .cranial-doc-podcast__hero-text {
	flex: 1 1 360px;
	min-width: 0;
}

.cranial-doc-podcast__chips {
	display: flex;
	gap: var(--wp--preset--spacing--md);
	flex-wrap: wrap;
}

.cranial-doc-podcast__chip {
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	padding: 10px 18px;
	border: 1.5px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-radius: 4px;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.cranial-doc-podcast__chip:hover {
	background-color: var(--wp--preset--color--clay);
	border-color: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--surface);
}

.cranial-doc-podcast__episode {
	display: grid;
	grid-template-columns: 48px 1fr auto;
	gap: var(--wp--preset--spacing--md);
	padding-block: var(--wp--preset--spacing--md);
	border-block-start: 1px solid var(--wp--preset--color--border);
	align-items: baseline;
}

.cranial-doc-podcast__num,
.cranial-doc-podcast__meta {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--body-sm);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.cranial-doc-podcast__num::before {
	content: "#";
}

.cranial-doc-podcast__title {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cranial-doc-podcast__title:hover {
	color: var(--wp--preset--color--clay);
}

/* ----- Writing list (de-emphasized) ----- */

.cranial-doc-writing__row {
	display: grid;
	grid-template-columns: 140px 1fr auto;
	gap: var(--wp--preset--spacing--md);
	padding-block: var(--wp--preset--spacing--md);
	border-block-start: 1px solid var(--wp--preset--color--border);
	align-items: baseline;
}

.cranial-doc-writing__meta,
.cranial-doc-writing__length {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.cranial-doc-writing__title {
	font-weight: 500;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.cranial-doc-writing__title:hover {
	color: var(--wp--preset--color--clay);
}

/* ----- Resource hub (/free-resources/) + in-context resource block ----- */

/* Single-column stack of hard-edged bordered blocks. No grid: a stack is
   editorial, a multi-column grid is the SaaS-template tell. */
.cranial-doc-resource-list {
	display: grid;
	row-gap: var(--wp--preset--spacing--lg);
}

/* The whole block is one <a>. Hard edge: 1px rule, 4px radius, no shadow. */
.cranial-doc-resource {
	display: block;
	padding: var(--wp--preset--spacing--lg);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background-color 120ms ease, border-color 120ms ease;
}

.cranial-doc-resource:hover {
	background: var(--wp--preset--color--surface-2);
	border-color: var(--wp--preset--color--clay);
}

/* Featured resource: a clay border and a mono flag lift the promoted lead
   magnet (menu_order < 0) above the date-ordered stack. No size jump, no
   fill, no shadow — rank by border color the way the meta panel ranks rows. */
.cranial-doc-resource--featured {
	border-color: var(--wp--preset--color--clay);
}

.cranial-doc-resource__flag {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--clay);
	margin-block-end: var(--wp--preset--spacing--xs);
}

/* In-context block sits in essay flow; give it breathing room. */
.cranial-doc-resource--inline {
	margin-block: var(--wp--preset--spacing--xl);
}

.cranial-doc-resource__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 0;
	margin-block-end: var(--wp--preset--spacing--md);
}

/* Mono eyebrow marks the in-context block as an aside. */
.cranial-doc-resource__eyebrow {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-block-end: var(--wp--preset--spacing--xs);
}

.cranial-doc-resource__name {
	display: block;
	margin: 0;
	font-family: var(--wp--preset--font-family--geist);
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--ink);
}

.cranial-doc-resource__desc {
	display: block;
	margin-block-start: var(--wp--preset--spacing--xs);
	font-size: var(--wp--preset--font-size--body-sm);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* The CTA is a control, not a text line: an outlined clay button at rest so
   the card reads as clickable WITHOUT a hover state (touch has none). Padding
   matches the form submit button, so the tap target clears 44px. */
.cranial-doc-resource__cta {
	display: inline-block;
	margin-block-start: var(--wp--preset--spacing--md);
	padding: 13px 20px;
	font-family: var(--wp--preset--font-family--geist);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--clay);
	border: 1px solid var(--wp--preset--color--clay);
	border-radius: 4px;
	transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

/* Card hover fills the CTA: motion that confirms the affordance, not one
   that introduces it. */
.cranial-doc-resource:hover .cranial-doc-resource__cta {
	background: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--surface);
}

/* Featured CTA reads as the primary action on the hub: filled at rest. */
.cranial-doc-resource--featured .cranial-doc-resource__cta {
	background: var(--wp--preset--color--clay);
	color: var(--wp--preset--color--surface);
}

.cranial-doc-resource--featured:hover .cranial-doc-resource__cta {
	background: var(--wp--preset--color--clay-deep);
	border-color: var(--wp--preset--color--clay-deep);
}

/* ----- Bio strip ----- */

.cranial-doc-bio {
	padding-block: var(--wp--preset--spacing--5-xl);
	background: var(--wp--preset--color--surface);
	border-block-start: 1px solid var(--wp--preset--color--border);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.cranial-doc-bio__inner {
	display: grid;
	grid-template-columns: 2fr 3fr;
	gap: 64px;
	align-items: start;
	width: min(100% - 2 * var(--wp--preset--spacing--md), 1200px);
	margin-inline: auto;
}

.cranial-doc-bio__photo img {
	display: block;
	width: 100%;
	max-width: 280px;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0;
}

/* ----- TL;DR summary box (essays + episodes) ----- */

.cranial-doc-tldr {
	margin-block-end: var(--wp--preset--spacing--xl);
	padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--lg);
	border-inline-start: 2px solid var(--wp--preset--color--clay);
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--body-sm);
}

.cranial-doc-tldr__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-block-end: var(--wp--preset--spacing--xs);
	display: block;
}

/* ----- Transcript toggle (episode page) ----- */

.cranial-doc-transcript[hidden] { display: none; }

.cranial-doc-transcript__toggle {
	background: transparent;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--eyebrow);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 4px;
	cursor: pointer;
}

.cranial-doc-transcript__toggle[aria-expanded="true"] {
	background: var(--wp--preset--color--surface-2);
}

/* ----- Mobile breakpoints ----- */

@media (max-width: 860px) {
	.cranial-doc-hero,
	.cranial-doc-training {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--xl);
		padding-block: var(--wp--preset--spacing--4-xl);
	}

	.cranial-doc-bio {
		padding-block: var(--wp--preset--spacing--4-xl);
	}

	.cranial-doc-bio__inner {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--xl);
	}

	.cranial-doc-writing__row {
		grid-template-columns: 100px 1fr;
	}

	.cranial-doc-writing__length {
		display: none;
	}
}

@media (max-width: 600px) {
	body {
		font-size: var(--wp--preset--font-size--body-sm);
	}

	.cranial-doc-resource {
		padding: var(--wp--preset--spacing--md);
	}
}