/**
 * Osita — brand skin for the Foundry marketing blocks.
 *
 * ARCHITECTURE: this file re-skins generic Foundry blocks; it never forks them.
 * Band rhythm is achieved by RE-DEFINING THE FOUNDRY COLOUR TOKENS per section
 * (`--wp--preset--color--*`) rather than overriding block rules. The blocks read
 * those variables, so re-theming the variables re-skins the block with zero
 * block edits. That is the token contract working as designed.
 *
 * Sections
 *   1. Brand primitives + the mono signature
 *   2. Band rhythm (Paper / Night)
 *   3. Chrome — header + footer
 *   4. Hero + proof line
 *   5. What we do (pricing)
 *   6. How it works (process-steps)
 *   7. Stack cards (card-grid on Night)
 *   8. Founder note
 *   9. Closing CTA
 *  10. Funnel pages
 *  11. Responsive
 */

/* ═══ 1. Brand primitives ═════════════════════════════════════════════════ */

:root {
	--osa-night: #14173a;
	--osa-night-card: #1c2050;
	--osa-night-border: #2a2f63;
	--osa-night-muted: #9aa0bf;

	/* Editorial rhythm — generous, whitespace-forward. */
	--osa-band-pad: clamp(3.5rem, 7vw, 6rem);
	--osa-rule: 1px solid var(--wp--preset--color--border);
}

/*
 * The mono signature. Per the brand spec, audit numbers, ledger lines, prices
 * and data strips ALWAYS render in IBM Plex Mono — it is a brand signature, not
 * decoration. Uppercasing happens here rather than in stored content so the text
 * stays screen-reader-friendly and doesn't shout in the block editor.
 */
.osa-mono,
.osa-hero .foundry-hero__eyebrow,
.osa-services .foundry-pricing__eyebrow,
.osa-steps .foundry-process-steps__eyebrow,
.osa-stack .foundry-card-grid__eyebrow {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Thin horizon-line dividers are the brand's structural motif. */
.osa-rule-top { border-top: var(--osa-rule); }

/* ═══ 2. Band rhythm ══════════════════════════════════════════════════════ */

.osa-band {
	padding-block: var(--osa-band-pad);
}

/*
 * Night band. Re-themes the whole Foundry token set so any block dropped in
 * here inherits the dark treatment — including blocks a future editor adds.
 * Headings pick this up automatically because theme.json points
 * elements.heading at var(--wp--preset--color--secondary).
 */
.osa-band--night {
	--wp--preset--color--base: var(--osa-night);
	--wp--preset--color--surface: var(--osa-night-card);
	--wp--preset--color--contrast: #fafaf7;
	--wp--preset--color--surface-contrast: #fafaf7;
	--wp--preset--color--secondary: #fafaf7;
	--wp--preset--color--muted: var(--osa-night-muted);
	--wp--preset--color--border: var(--osa-night-border);
	color: #fafaf7;
}

/* The wrapper owns the band background, so nested blocks must not paint their own. */
.osa-band--night > .foundry-card-grid,
.osa-band--night > .foundry-cta,
.osa-band--night > .foundry-pricing {
	background: transparent;
}

/* Mono footnote that closes a band. */
.osa-band__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	max-width: 62ch;
	margin-block: 2.25rem 0;
}

.osa-band--night .osa-band__note {
	margin-inline: auto;
	text-align: center;
}

/* ═══ 3. Chrome ═══════════════════════════════════════════════════════════ */

.osa-header {
	border-bottom: var(--osa-rule);
	position: relative;
	z-index: 10;
}

.osa-header__right {
	gap: clamp(1.25rem, 3vw, 2.25rem);
}

.osa-header .osa-nav a {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.osa-header .osa-nav a:hover {
	color: var(--wp--preset--color--primary);
}

.osa-header__cta .wp-block-button__link {
	border-radius: 4px;
	padding: 0.6rem 1.1rem;
	font-size: 0.92rem;
	font-weight: 600;
}

/*
 * The CTA exists twice: as a button beside the nav (desktop) and as a nav item
 * inside the hamburger overlay (mobile). Only one is ever shown. Without the
 * nav-item copy the action would simply vanish on mobile, because the button
 * sits OUTSIDE wp:navigation and so never enters the overlay.
 */
/* Specificity note: core ships `.wp-block-buttons{display:flex}` and
   `.wp-block-navigation-item{display:flex}` at the same weight as a single
   class, and block-library CSS is emitted AFTER the theme's — so a bare
   `.osa-nav__cta{display:none}` loses the tie. Qualify with the header scope. */
.osa-header .osa-nav__cta { display: none; }

@media (max-width: 782px) {
	.osa-header .osa-header__cta { display: none; }
	.osa-header .osa-nav__cta { display: block; }
	.osa-header .osa-nav .osa-nav__cta a { color: var(--wp--preset--color--primary); }
	.osa-header__logo img { max-width: 96px; }
}

/* Footer sits on Night; links and copy go light. */
.osa-footer {
	--wp--preset--color--muted: var(--osa-night-muted);
	color: var(--osa-night-muted);
	font-size: 0.9rem;
}

.osa-footer__row { gap: 1.5rem 2rem; }
.osa-footer__links { gap: 1.75rem; }

.osa-footer p { margin: 0; }

.osa-footer a {
	color: var(--osa-night-muted);
	text-decoration: none;
}

.osa-footer a:hover {
	color: #fafaf7;
	text-decoration: none;
}

/* ═══ 4. Hero + proof line ════════════════════════════════════════════════ */

/*
 * The Foundry hero paints its section with `surface`, which globally maps to
 * white (cards want white). Osita's hero sits on Paper, so re-point the token
 * for this block only — one declaration instead of a background override.
 */
.osa-hero {
	--wp--preset--color--surface: var(--wp--preset--color--base);
	padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem);
}

.osa-hero .foundry-hero__title {
	font-size: clamp(2.9rem, 6.6vw, 4.75rem);
	font-weight: 600;
	line-height: 1.04;
	letter-spacing: -0.025em;
	max-width: 12ch;
}

.osa-hero .foundry-hero__subtitle {
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	max-width: 46ch;
}

/* The report visual is a document mockup: show it whole, never crop it. */
.osa-hero .foundry-hero__media img {
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 24px 60px -24px rgba(20, 23, 58, 0.35);
}

/*
 * Proof line. Lives outside the hero block (no native field, no content hook),
 * so it is re-aligned here to read as part of the hero's left column: same
 * 1200px measure, capped near the column width, behind a hairline rule.
 */
.osa-proof {
	padding-block: 0 clamp(3rem, 6vw, 5rem);
}

/* WP's constrained layout puts `margin-inline: auto` on group children, which
   centred this line instead of anchoring it under the hero copy. Pin it left. */
.osa-proof > .osa-proof__line {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.8rem;
	line-height: 1.9;
	color: var(--wp--preset--color--muted);
	border-top: var(--osa-rule);
	padding-top: 1.25rem;
	max-width: 48%;
	margin-block: 0;
	margin-inline: 0 auto;
}

/*
 * Funnel hero. The `center` layout centres a narrow content column, but on the
 * funnel pages the hero must share the 860px measure of the body below it or
 * the headline and the form sit on different left edges. Also unset the home
 * hero's 12ch title cap, which would wrap "Know your starting line." in two.
 */
.osa-hero--funnel {
	padding-block: clamp(3rem, 6vw, 4.5rem) clamp(1rem, 2vw, 1.5rem);
	padding-inline: 1.25rem;
}

/* `__inner` carries its own padding-inline, which pushed the headline ~113px
   right of the body measure below. Zero it and let the section own the edge
   padding, so the hero and the form share one left edge at every width. */
.osa-hero--funnel .foundry-hero__inner {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: 0;
	text-align: left;
}

.osa-hero--funnel .foundry-hero__content {
	max-width: none;
	margin-inline: 0;
	text-align: left;
	align-items: flex-start;
}

.osa-hero--funnel .foundry-hero__title {
	max-width: none;
	font-size: clamp(2.5rem, 5.2vw, 3.6rem);
}

.osa-hero--funnel .foundry-hero__subtitle {
	max-width: 62ch;
}

/* ═══ 5. What we do (pricing) ═════════════════════════════════════════════ */

/* The block seats itself on `surface` (white); Osita's mid-page bands are Paper. */
.osa-services {
	background: var(--wp--preset--color--base);
	padding-block: var(--osa-band-pad);
	padding-inline: 1.25rem;
}

/*
 * foundry/pricing ships NO `__inner` measure wrapper — unlike card-grid, whose
 * `__inner` caps at wide-size and centres. Under align:full that leaves pricing
 * running the full viewport width. Restore the measure here.
 * Filed upstream: docs/osita-block-requests.md #2.
 */
.osa-services .foundry-pricing__head,
.osa-services .foundry-pricing__tiers {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Legacy left-aligns the section headings on the two Paper bands. Both blocks
   centre theirs via a narrow max-width plus `margin-inline: auto`, so the
   centring has to be undone as well as the text alignment. */
.osa-services .foundry-pricing__head,
.osa-steps .foundry-process-steps__head {
	text-align: left;
}

.osa-steps .foundry-process-steps__head {
	max-width: none;
	margin-inline: 0;
}

.osa-services .foundry-pricing__title {
	font-size: clamp(2rem, 3.6vw, 2.75rem);
	margin-bottom: 2.75rem;
}

.osa-services .foundry-pricing__tier {
	background: var(--wp--preset--color--surface);
	border: var(--osa-rule);
	border-radius: 10px;
	padding: 2rem 1.75rem;
}

.osa-services .foundry-pricing__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--wp--preset--color--secondary);
	line-height: 1.25;
}

/* Price + period are ledger data → mono, per the brand signature. */
.osa-services .foundry-pricing__amount,
.osa-services .foundry-pricing__period {
	font-family: var(--wp--preset--font-family--mono);
}

/* Legacy renders the amount in Ink Indigo, not Sunrise — Sunrise is reserved
   for actions. Only the trailing qualifier goes muted. */
.osa-services .foundry-pricing__amount {
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
}

.osa-services .foundry-pricing__period {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}

.osa-services .foundry-pricing__features {
	border-top: var(--osa-rule);
	margin-top: 1.4rem;
	padding-top: 1.4rem;
	display: grid;
	gap: 0.85rem;
}

.osa-services .foundry-pricing__feature {
	display: flex;
	gap: 0.75rem;
	align-items: flex-start;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
}

/*
 * Check discs via the house data-URI ::before pattern rather than an icon font —
 * the legacy site pulled Iconify from a CDN for these; a brand glyph should not
 * cost a third-party runtime dependency.
 */
.osa-services .foundry-pricing__feature::before {
	content: "";
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	margin-top: 0.22rem;
	background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.25' fill='none' stroke='%23F2742C' stroke-width='1.5'/%3E%3Cpath d='M4.8 8.2l2.1 2.1 4.3-4.4' fill='none' stroke='%23F2742C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* The block ships its own ✓ glyph in `__feature-mark`; ours replaces it.
   (Hiding the wrong class here is what produced doubled ticks on round 1.) */
.osa-services .foundry-pricing__feature-mark { display: none; }

/* Cards are equal-height with the CTA pinned to the bottom, as in the legacy. */
.osa-services .foundry-pricing__tiers { align-items: stretch; }

.osa-services .foundry-pricing__tier {
	display: flex;
	flex-direction: column;
	padding: 2.25rem 2rem 2rem;
}

.osa-services .foundry-pricing__cta {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	background: none;
	border: 0;
	padding: 0;
	margin-top: auto;
	padding-top: 1.6rem;
	text-decoration: none;
	align-self: flex-start;
}

/* Legacy renders "Activate →"; the pricing block emits no arrow of its own
   (card-grid does — do not assume parity between blocks). */
/* A literal space collapses inside ::after — use NBSP so it reads "Activate →". */
.osa-services .foundry-pricing__cta::after {
	content: "\00a0→";
}

.osa-services .foundry-pricing__cta:hover { text-decoration: underline; }

/* ═══ 6. How it works (process-steps) ═════════════════════════════════════ */

.osa-steps {
	background: var(--wp--preset--color--base);
	padding-block: var(--osa-band-pad);
}

.osa-steps .foundry-process-steps__title {
	font-size: clamp(2rem, 3.6vw, 2.75rem);
	margin-bottom: 2.5rem;
}

/*
 * Legacy reads "1 — The audit." on one line with the body beneath, each step
 * opening with a hairline rule and a Sunrise dot.
 *
 * The block nests title+text inside a `__step-body` div, so `display: contents`
 * dissolves that wrapper and lets the numeral, title and text participate
 * directly in the step's flex row — no markup fork required.
 */
/* `__list` is a 4-column grid, and grid/flex items default to `min-width: auto`
   — a flex row here let the long body text force the track wider than 1fr and
   the columns bled into each other. Plain inline flow needs no such guard. */
.osa-steps .foundry-process-steps__step {
	border-top: var(--osa-rule);
	padding-top: 1.1rem;
	display: block;
	min-width: 0;
	position: relative;
}

.osa-steps .foundry-process-steps__step::before {
	content: "";
	position: absolute;
	top: -3.5px;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

.osa-steps .foundry-process-steps__step-body { display: contents; }

.osa-steps .foundry-process-steps__num {
	display: inline;
	background: none;
	color: var(--wp--preset--color--secondary);
	width: auto;
	height: auto;
	min-width: 0;
	padding: 0;
	border-radius: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.12rem;
	font-weight: 500;
	line-height: 1.4;
}

.osa-steps .foundry-process-steps__num::after {
	content: " —";
	font-weight: 400;
	color: var(--wp--preset--color--muted);
}

.osa-steps .foundry-process-steps__step-title {
	display: inline;
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wp--preset--color--secondary);
}

.osa-steps .foundry-process-steps__step-text {
	display: block;
	margin: 0.7rem 0 0;
	font-size: 0.9rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

/* ═══ 7. Stack cards (card-grid on Night) ═════════════════════════════════ */

.osa-band--night .osa-stack .foundry-card-grid__title {
	text-align: center;
	font-size: clamp(1.9rem, 3.4vw, 2.6rem);
	margin-bottom: 2.5rem;
}

.osa-stack .foundry-card-grid__card {
	background: var(--osa-night-card);
	border: 1px solid var(--osa-night-border);
	border-radius: 8px;
	padding: 1.75rem 1.5rem;
}

.osa-stack .foundry-card-grid__card-title {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	color: #fafaf7;
	margin: 0 0 0.35rem;
}

.osa-stack .foundry-card-grid__card-text {
	font-size: 0.88rem;
	color: var(--osa-night-muted);
	margin: 0;
}

/* Osita is the featured card — Sunrise ring, matching the legacy highlight. */
.osa-stack .foundry-card-grid__card--featured {
	border-color: var(--wp--preset--color--primary);
}

.osa-stack .foundry-card-grid__card--featured .foundry-card-grid__card-title {
	color: var(--wp--preset--color--primary);
}

/* Legacy shows no "Most popular"-style pill on these cards. */
.osa-stack .foundry-card-grid__badge { display: none; }

/* ═══ 8. Founder note ═════════════════════════════════════════════════════ */

.osa-founder { padding-block: var(--osa-band-pad); }

.osa-founder__quote {
	font-family: var(--wp--preset--font-family--heading);
	font-style: italic;
	font-size: clamp(1.15rem, 2vw, 1.45rem);
	line-height: 1.75;
	color: var(--wp--preset--color--secondary);
	margin: 0;
}

.osa-founder__by {
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
	margin-top: 1.75rem;
}

/* ═══ 9. Closing CTA ══════════════════════════════════════════════════════ */

/* The cta band lays content and actions out side by side; legacy stacks them
   centred, with the button beneath the copy. */
.osa-band--close .foundry-cta__inner {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1.75rem;
}

.osa-band--close .foundry-cta__title {
	font-size: clamp(2rem, 3.8vw, 2.9rem);
}

.osa-band--close .foundry-cta__text {
	color: var(--osa-night-muted);
	max-width: 58ch;
	margin-inline: auto;
}

/* ═══ 10. Funnel pages ════════════════════════════════════════════════════ */

/*
 * The legacy funnel pages rendered with NO horizontal container — content sat
 * flush against the viewport edge at every width. That is a legacy defect, not
 * a design choice, so the rebuild constrains them properly.
 */
.osa-funnel {
	padding-block: 0 clamp(3rem, 6vw, 5rem);
}

.osa-funnel__list {
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
}

.osa-funnel__list li {
	border-top: var(--osa-rule);
	padding: 1rem 0 1rem 1.6rem;
	position: relative;
	font-size: 1rem;
	line-height: 1.6;
}

.osa-funnel__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.45rem;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

/* --- The audit request form (posts to /audit-request.php) --------------- */

.osa-form {
	background: var(--wp--preset--color--surface);
	border: var(--osa-rule);
	border-radius: 10px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-top: 2.5rem;
}

.osa-field { margin-bottom: 1.35rem; }

.osa-field label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 0.5rem;
}

.osa-field input {
	width: 100%;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: var(--osa-rule);
	border-radius: 6px;
	padding: 0.8rem 0.95rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.osa-field input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(242, 116, 44, 0.15);
}

/* Honeypot trio — hidden from humans, reachable by bots. Never display:none
   (some bots skip those); keep it off-screen and out of the tab order. */
.osa-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.osa-btn--primary {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--on-primary);
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 6px;
	padding: 0.85rem 1.6rem;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.osa-btn--primary:hover { background: var(--wp--preset--color--primary-hover); }

.osa-form__note {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
	margin: 1.1rem 0 0;
}

/* ═══ 11. Responsive ══════════════════════════════════════════════════════ */

@media (max-width: 900px) {
	.osa-proof__line {
		max-width: 100%;
	}
}

@media (max-width: 782px) {
	.osa-hero .foundry-hero__title {
		max-width: none;
	}

	.osa-footer__row {
		justify-content: flex-start;
	}

	.osa-band__note {
		text-align: left;
	}
}

/* Respect reduced-motion for the parent's reveal system (belt-and-braces). */
@media (prefers-reduced-motion: reduce) {
	.foundry-reveal {
		opacity: 1 !important;
		transform: none !important;
	}
}