/*
 * block-styles.css — Komorebi Learning Path
 *
 * Every rule here is a direct port of a utility combination used in
 * academy_moc/*.html, using the tokens declared in academy_moc/DESIGN.md
 * (mirrored 1:1 into theme.json's palette slugs). Class names are
 * prefixed `kmr-` so nothing collides with core block classes.
 *
 * Shadow vocabulary (DESIGN.md "Elevation & Depth" — diffused, navy-tinted,
 * ~6% opacity; elements rest on paper rather than hover). Every value is
 * ported 1:1 from an arbitrary `shadow-[...]` utility in academy_moc/*.html
 * so no box-shadow in this file is a hand-picked one-off:
 *   --wp--custom--shadow--soft        hero.html    .soft-shadow
 *   --wp--custom--shadow--ambient     course.html  shadow-ambient
 *   --wp--custom--shadow--ambient-sm  course.html  shadow-ambient-sm
 *   --wp--custom--shadow--ring        review.html  .shadow-ambient
 *   --wp--custom--shadow--sm          access.html  shadow-sm (header)
 *   --wp--custom--shadow--card        access.html  shadow-[...0.04] (map/table card)
 *   --wp--custom--shadow--subtle      access.html  shadow-[...0.03] (info box)
 *   --wp--custom--shadow--icon        access.html  shadow-sm (icon disc, navy-tinted)
 *   --wp--custom--shadow--float       access.html  shadow-[...] (mobile CTA bar)
 *   --wp--custom--shadow--deep        access.html  shadow-[...0.06] (form card)
 */

/* ==================================================================
   Shared primitives
   ================================================================== */

/* style.css sets `text-wrap: balance` on every heading. That is right
   for the centred section intros it was written for — short titles,
   evenly split. It is wrong for a title sitting in a narrow card
   column: balance splits the text into equal-length lines instead of
   filling line one, so the right edge visibly goes unused
   (「春期講習のお申 / し込み受付開始」 — 7 chars each, half the card
   left empty). Card titles fill the measure instead.

   word-break: auto-phrase then breaks on phrase boundaries rather than
   mid-word, since Japanese has no spaces to break on. Unsupported
   browsers fall back to the normal break, so it ships safely. */
.post-card__body .wp-block-post-title,
.kmr-course-card__title,
.kmr-info-box__title,
.kmr-profile h3 {
	text-wrap: wrap;
	word-break: auto-phrase;
}

/* Inline SVG icons stand in for the moc's Material Symbols font, so the
   theme carries no external font dependency for iconography. */
.kmr-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}

.kmr-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

/* warm-border — course.html: 1px solid rgba(228,226,226,.8) */
.kmr-warm-border {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 80%, transparent);
}

/* Section shell. hero.html alternates exactly two background levels:
   bg-surface (warm ivory) and bg-surface-container-lowest (pure white,
   with border-y). Nothing else — no grey tints. */
.kmr-section {
	padding-block: var(--wp--preset--spacing--stack-lg);
	padding-inline: var(--wp--preset--spacing--margin-mobile);
}

/* The moc pins every section to `max-w-container-max mx-auto` with
   `px-margin-mobile md:px-gutter`. Owning that here — rather than
   leaning on core's constrained-layout CSS — keeps the horizontal
   rhythm identical whether a section is dropped on the front page,
   inside a Page, or previewed in the editor canvas. */
.kmr-section>* {
	max-width: 1120px;
	margin-inline: auto;
}

/* Cancel core's constrained-layout "> *" margin-block-start between the
   top-level page sections. Each .kmr-section already sets its own
   padding-block for vertical rhythm, so the extra margin only doubles
   the gap — invisible between two same-coloured sections, but a stray
   band of body background where a white section meets a navy one.
   Core's own rule lives in global-styles-inline-css as
   `:root :where(.is-layout-constrained) > *`, which loads *after* this
   stylesheet — the :where() zeroes its class specificity, but the
   :root still ties ours at one class, so a plain single-class selector
   here loses on source order. Two classes breaks the tie regardless of
   load order. */
.site-main.wp-block-group-is-layout-constrained > * {
	margin-block-start: 0 !important;
}

@media (min-width: 768px) {
	.kmr-section {
		padding-block: var(--wp--preset--spacing--section);
		padding-inline: var(--wp--preset--spacing--stack-md);
	}
}

.kmr-section--white {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border-block: 1px solid var(--wp--preset--color--surface-variant);
}

/* Centered section intro — hero.html "Why Komorebi Learning Path?" */
.kmr-section-intro {
	text-align: center;
	max-width: 42rem;
	margin-inline: auto;
	margin-bottom: var(--wp--preset--spacing--stack-lg);
}

.kmr-section-intro p {
	color: var(--wp--preset--color--on-surface-variant);
}

/* Section heading accent — small centred bar in the CTA-orange brand
   accent (same color as the hero's highlighted word and the "Focus:"
   labels), so every section title reads as more than plain text. */
.kmr-section-intro h2 {
	position: relative;
	padding-bottom: var(--wp--preset--spacing--stack-sm);
}

.kmr-section-intro h2::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 3rem;
	height: 4px;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--on-tertiary-container);
}

/* Eyebrow — access.html: label-sm, surface-tint, uppercase, tracked out */
.kmr-eyebrow {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--surface-tint);
	margin: 0 0 var(--wp--preset--spacing--unit);
}

/* Chips — DESIGN.md: 0% fill, thin border, navy or green text */
.kmr-chip-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--unit);
}

.kmr-chip {
	display: inline-block;
	padding: 0.25em 0.75em;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--full);
	background-color: transparent;
	font-size: var(--wp--preset--font-size--label-sm);
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
}

/* Icon circle — hero.html feature cards / review.html admission cards */
.kmr-icon-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: var(--wp--custom--radius--full);
	font-size: 1.5rem;
}

.kmr-icon-circle--sm {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.25rem;
}

.kmr-icon-circle--primary {
	background-color: var(--wp--preset--color--primary-fixed);
	color: var(--wp--preset--color--primary);
}

.kmr-icon-circle--tertiary {
	background-color: var(--wp--preset--color--tertiary-fixed);
	color: var(--wp--preset--color--tertiary-container);
}

.kmr-icon-circle--secondary {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

/* ==================================================================
   Buttons — DESIGN.md "Components > Buttons"
   Primary CTA orange / Secondary CTA green / Ghost navy outline.
   All 56px tall, rounded-lg (1rem).
   ================================================================== */

.kmr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	min-height: 56px;
	padding: 0 2rem;
	border-radius: var(--wp--custom--radius--lg);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	text-align: center;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

/* DESIGN.md: hover should not glow — scale up ~2% to mimic a tactile press. */
.kmr-btn:hover,
.kmr-btn:focus-visible {
	transform: scale(1.02);
}

.kmr-btn--primary {
	background-color: var(--wp--preset--color--on-tertiary-container);
	color: var(--wp--preset--color--on-primary);
	box-shadow: var(--wp--custom--shadow--ambient-sm);
}

/* Same soft green as the schedule table's "Open" badge
   (.kmr-badge--open), instead of a solid fill in a green that
   otherwise never appears as a strong colour on this site. Text/border
   lightened toward white — plain `success` is too dark against this
   tinted-on-navy background to clear accessible contrast. */
.kmr-btn--phone {
	background-color: color-mix(in srgb, var(--wp--preset--color--success) 15%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--success) 60%, white);
	color: color-mix(in srgb, var(--wp--preset--color--success) 60%, white);
}

.kmr-btn--ghost {
	background-color: transparent;
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.kmr-btn--ghost:hover,
.kmr-btn--ghost:focus-visible {
	background-color: var(--wp--preset--color--surface-container);
}

.kmr-btn--navy {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.kmr-btn--peach {
	background-color: var(--wp--preset--color--tertiary-fixed);
	color: var(--wp--preset--color--on-tertiary-fixed);
}

.kmr-btn--block {
	display: flex;
	width: 100%;
}

/* Pill CTA in the header — hero.html: rounded-full, px-6 py-3 */
.kmr-btn--pill {
	min-height: 0;
	padding: 0.75rem 1.5rem;
	border-radius: var(--wp--custom--radius--full);
	box-shadow: var(--wp--custom--shadow--ambient-sm);
}

/* ==================================================================
   Header — hero.html
   <header class="bg-surface shadow-sm sticky top-0 z-50">
     <div class="flex justify-between items-center max-w-container-max h-20">
   ================================================================== */

.kmr-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background-color: var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--sm);
}

.kmr-header__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--stack-md);
	width: 100%;
	max-width: 1120px;
	height: 80px;
	margin-inline: auto;
	padding-inline: 16px;
}

@media (min-width: 768px) {
	.kmr-header__inner {
		padding-inline: 24px;
	}
}

/* Brand: logo + wordmark, gap-2. Wordmark hides below the desktop nav
   breakpoint so the header stays a single logo mark on mobile. */
.kmr-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
}

.kmr-brand .wp-block-site-title,
.kmr-brand .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--headline-md);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	margin: 0;
}

@media (max-width: 767px) {
	.kmr-brand .wp-block-site-title {
		display: none;
	}
}

.kmr-brand .custom-logo {
	max-height: 40px;
	width: auto !important;
	height: auto;
}

/* Desktop nav — hidden md:flex items-center gap-8 */
.kmr-header__nav {
	display: none;
}

@media (min-width: 768px) {
	.kmr-header__nav {
		display: flex;
		align-items: center;
	}
}

.kmr-header__nav .wp-block-navigation {
	--wp--style--block-gap: 2rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 500;
	letter-spacing: 0.05em;
}

.kmr-header__nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, transform 0.2s ease;
}

.kmr-header__nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--surface-tint);
	transform: scale(1.02);
}

/* Header actions — hidden md:flex items-center gap-4 */
.kmr-header__actions {
	display: none;
}

@media (min-width: 768px) {
	.kmr-header__actions {
		display: flex;
		align-items: center;
		gap: 1rem;
	}
}

.kmr-header__call {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
}

.kmr-header__call:hover {
	color: var(--wp--preset--color--surface-tint);
}

/* Mobile: hide the desktop nav list, keep only the hamburger toggle */
@media (max-width: 767px) {
	.kmr-header__mobile-toggle .wp-block-navigation__responsive-container-open {
		display: flex !important;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		color: var(--wp--preset--color--primary);
	}
}

@media (min-width: 768px) {
	.kmr-header__mobile-toggle {
		display: none;
	}
}

/* ==================================================================
   Hero — hero.html section 1
   grid md:grid-cols-12 gap-8 items-center, 6 / 6 split
   ================================================================== */

.kmr-hero {
	position: relative;
	overflow: hidden;
	max-width: 1120px;
	margin-inline: auto;
	padding: 3rem 16px 6rem;
}

@media (min-width: 768px) {
	.kmr-hero {
		padding: 6rem 24px 8rem;
	}
}

.kmr-hero__grid {
	display: grid;
	gap: 2rem;
	align-items: center;
}

@media (min-width: 768px) {
	.kmr-hero__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kmr-hero__copy>*+* {
	margin-top: 1.5rem;
}

/* Eyebrow pill — bg-surface-container + border-surface-variant + rounded-full.
   The sun glyph is CTA orange; the label text is surface-tint. */
.kmr-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.25rem 0.75rem;
	background-color: var(--wp--preset--color--surface-container);
	border: 1px solid var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--full);
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--surface-tint);
}

.kmr-hero__badge .kmr-icon {
	font-size: 0.875rem;
	color: var(--wp--preset--color--on-tertiary-container);
}

.kmr-hero h1 {
	font-size: var(--wp--preset--font-size--display-lg-mobile);
	line-height: 1.3;
}

@media (min-width: 768px) {
	.kmr-hero h1 {
		font-size: var(--wp--preset--font-size--display-lg);
		line-height: 1.2;
		letter-spacing: -0.02em;
	}
}

/* Highlighted word: CTA orange text with a hand-drawn squiggle beneath,
   stroked in primary-fixed-dim (pale blue). */
.kmr-hero__highlight {
	position: relative;
	display: inline-block;
	color: var(--wp--preset--color--on-tertiary-container);
}

.kmr-hero__squiggle {
	position: absolute;
	left: 0;
	bottom: -0.25rem;
	width: 100%;
	height: 0.75rem;
	color: var(--wp--preset--color--primary-fixed-dim);
	overflow: visible;
}

.kmr-hero__lead {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.8;
	color: var(--wp--preset--color--on-surface-variant);
	max-width: 32rem;
}

.kmr-hero__buttons {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: 1rem;
}

@media (min-width: 640px) {
	.kmr-hero__buttons {
		flex-direction: row;
	}
}

/* Photo: rounded-2xl, soft shadow, 4:3, white card behind */
.kmr-hero__media {
	position: relative;
	margin-top: 3rem;
}

@media (min-width: 768px) {
	.kmr-hero__media {
		margin-top: 0;
	}
}

.kmr-hero__photo {
	position: relative;
	border-radius: var(--wp--custom--radius--xl);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	box-shadow: var(--wp--custom--shadow--soft);
	border: 1px solid var(--wp--preset--color--surface-container-high);
	background-color: var(--wp--preset--color--surface-container-lowest);
	margin: 0;
}

.kmr-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Floating badge, bottom-left, overhanging the photo */
.kmr-hero__float {
	position: absolute;
	bottom: -1.5rem;
	left: -0.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	max-width: 200px;
	padding: 1rem;
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--surface-container-high);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--soft);
}

.kmr-hero__float-icon {
	width: 3rem;
	height: 3rem;
	font-size: 1.25rem;
	background-color: var(--wp--preset--color--primary-fixed);
	color: var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--full);
}

.kmr-hero__float-title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	margin: 0;
	line-height: 1.3;
}

.kmr-hero__float-note {
	display: block;
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
	line-height: 1.3;
}

/* ==================================================================
   Feature / profile cards — hero.html "Why Us"
   bg-surface p-8 rounded-xl border border-surface-variant soft-shadow
   hover:-translate-y-1
   ================================================================== */

.kmr-card-grid {
	display: grid;
	gap: 2rem;
}

@media (min-width: 768px) {
	.kmr-card-grid--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.kmr-card-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kmr-card {
	padding: 2rem;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--soft);
	transition: transform 0.3s ease;
}

.kmr-card:hover {
	transform: translateY(-4px);
}

/* On a white section the card flips to ivory-on-white for separation. */
.kmr-section--white .kmr-card {
	background-color: var(--wp--preset--color--surface);
}

.kmr-card h3 {
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--primary);
	margin: 1.5rem 0 0.75rem;
}

.kmr-card p {
	font-size: var(--wp--preset--font-size--label-sm);
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
}

/* Instructor cards need a readable portrait, not a thumbnail:
   96px avatar, name at headline scale, blurb at body scale. */
.kmr-profile__avatar {
	width: 96px;
	height: 96px;
	border-radius: var(--wp--custom--radius--full);
	overflow: hidden;
	margin: 0;
	border: 4px solid var(--wp--preset--color--surface-container-lowest);
	box-shadow: var(--wp--custom--shadow--ambient-sm);
}

.kmr-profile__avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kmr-profile h3 {
	font-size: var(--wp--preset--font-size--headline-md);
	margin-bottom: 0.5rem;
}

.kmr-profile__meta {
	font-size: var(--wp--preset--font-size--body-md) !important;
	color: var(--wp--preset--color--on-surface-variant);
	line-height: 1.6;
}

.kmr-profile__quote {
	margin: 1.5rem 0 0;
	padding-left: 1rem;
	border-left: 3px solid var(--wp--preset--color--tertiary-fixed-dim);
	font-size: var(--wp--preset--font-size--body-md);
	font-style: italic;
	color: var(--wp--preset--color--on-surface);
}

/* ==================================================================
   Course cards — white card on ivory, photo on top
   ================================================================== */

.kmr-course-card {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 80%, transparent);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--ambient);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease;
}

.kmr-course-card:hover {
	transform: translateY(-4px);
}

.kmr-course-card__media {
	margin: 0;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.kmr-course-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kmr-course-card__body {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	flex: 1;
}

.kmr-course-card__title {
	font-size: var(--wp--preset--font-size--headline-md);
	margin: 0;
}

.kmr-course-card__focus {
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 700;
	color: var(--wp--preset--color--tertiary-container);
	margin: 0;
}

.kmr-course-card__body p {
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
}

.kmr-course-card__link {
	margin-top: auto;
	padding-top: 0.5rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--on-tertiary-container);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
}

.kmr-course-card__link:hover {
	color: var(--wp--preset--color--tertiary-container);
	text-decoration: underline;
}

/* ==================================================================
   Bento grid — course.html
   12-col: Elementary spans all, then Middle (7) beside High (5).
   ================================================================== */

.kmr-bento {
	display: grid;
	gap: 2rem;
}

@media (min-width: 768px) {
	.kmr-bento {
		grid-template-columns: 7fr 5fr;
	}

	.kmr-bento__wide {
		grid-column: 1 / -1;
	}
}

.kmr-bento__wide,
.kmr-bento__main,
.kmr-bento__feature {
	padding: 2rem;
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--ambient);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kmr-bento__wide,
.kmr-bento__main {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 80%, transparent);
}

@media (min-width: 768px) {
	.kmr-bento__wide {
		flex-direction: row;
		align-items: center;
		gap: 2rem;
	}
}

.kmr-bento__copy {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kmr-bento__media {
	flex: 1;
	margin: 0;
	height: 16rem;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 80%, transparent);
}

.kmr-bento__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kmr-bento__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.kmr-bento__title h2 {
	margin: 0;
}

/* Rounded square icon badge — course.html `p-2 rounded-lg` chip */
.kmr-bento__badge {
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1.25rem;
	border-radius: var(--wp--custom--radius--base);
}

.kmr-bento__badge--sand {
	background-color: var(--wp--preset--color--secondary-container);
	color: var(--wp--preset--color--on-secondary-container);
}

.kmr-bento__badge--navy {
	background-color: var(--wp--preset--color--primary-container);
	color: var(--wp--preset--color--primary-fixed);
}

.kmr-bento__focus {
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 700;
	color: var(--wp--preset--color--tertiary-container);
	margin: 0;
}

.kmr-bento__focus--peach {
	color: var(--wp--preset--color--on-tertiary-container);
}

.kmr-bento__wide p,
.kmr-bento__main p {
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
}

/* High School card — navy, with a soft container-tinted glow */
.kmr-bento__feature {
	position: relative;
	overflow: hidden;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.kmr-bento__feature::before {
	content: "";
	position: absolute;
	top: -2.5rem;
	right: -2.5rem;
	width: 8rem;
	height: 8rem;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--primary-container);
	filter: blur(48px);
	opacity: 0.5;
	pointer-events: none;
}

.kmr-bento__feature>* {
	position: relative;
	z-index: 1;
}

.kmr-bento__feature h2 {
	color: var(--wp--preset--color--primary-fixed);
}

.kmr-bento__feature p {
	color: var(--wp--preset--color--primary-fixed-dim);
	margin: 0;
}

.kmr-bento__feature .kmr-btn {
	margin-top: auto;
}

/* Check list — course.html's check_circle bullets */
.kmr-ticklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.kmr-ticklist li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.kmr-ticklist .kmr-icon {
	color: var(--wp--preset--color--tertiary-container);
	font-size: 1.15rem;
	margin-top: 0.1rem;
}

/* ==================================================================
   Testimonials — review.html "Voices from our Community"
   flex md:flex-row gap-8 items-center, white card, rounded-xl,
   192px circular portrait, italic body-lg
   ================================================================== */

.kmr-testimonials {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--stack-lg);
}

.kmr-testimonial {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	padding: 2rem;
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--ring);
}

@media (min-width: 768px) {
	.kmr-testimonial {
		flex-direction: row;
	}

	.kmr-testimonial--reverse {
		flex-direction: row-reverse;
	}
}

.kmr-testimonial__figure {
	flex: 0 0 auto;
	width: 100%;
	display: flex;
	justify-content: center;
	margin: 0;
}

@media (min-width: 768px) {
	.kmr-testimonial__figure {
		width: 33.333%;
	}
}

.kmr-testimonial__figure img {
	width: 12rem;
	height: 12rem;
	border-radius: var(--wp--custom--radius--full);
	object-fit: cover;
	border: 4px solid var(--wp--preset--color--surface);
	box-shadow: var(--wp--custom--shadow--ambient-sm);
}

.kmr-testimonial__body {
	width: 100%;
}

@media (min-width: 768px) {
	.kmr-testimonial__body {
		width: 66.666%;
	}
}

.kmr-testimonial__quote {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.8;
	font-style: italic;
	color: var(--wp--preset--color--on-surface);
	margin: 0 0 1.5rem;
}

.kmr-testimonial__name {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.kmr-testimonial__role {
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
}

/* ==================================================================
   Access — access.html bento grid (7 / 5 split)
   ================================================================== */

.kmr-access {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
}

@media (min-width: 1024px) {
	.kmr-access {
		grid-template-columns: 7fr 5fr;
	}
}

.kmr-access__left {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
}

/* Right column has fewer boxes than the left (map + 2 boxes), so it's
   naturally shorter. Rather than pack it to the top and leave a gap at
   the bottom, stretch it to match the left column's height and let the
   navy "Immediate Support" card — the prominent one — absorb the extra
   space, with the quieter peach "Prefer to write?" card staying compact. */
.kmr-access__right {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: var(--wp--preset--spacing--stack-md);
}

/* Map card: white frame with 8px inset around the image */
.kmr-map-card {
	padding: 0.5rem;
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--card);
	overflow: hidden;
}

.kmr-map-card figure {
	margin: 0;
	position: relative;
	height: 20rem;
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-variant);
}

@media (min-width: 640px) {
	.kmr-map-card figure {
		height: 24rem;
	}
}

.kmr-map-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.7s ease-out;
}

.kmr-map-card:hover img {
	transform: scale(1.05);
}

.kmr-access__boxes {
	display: grid;
	gap: var(--wp--preset--spacing--stack-md);
}

@media (min-width: 640px) {
	.kmr-access__boxes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Directions box — pale blue tint (primary-fixed), the same accent the
   hero uses for its "Tailored" float badge, so this section reads as
   part of the same system instead of introducing a new hue. */
.kmr-info-box {
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--stack-md);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--subtle);
}

.kmr-info-box--sand {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary-fixed) 40%, transparent);
	border: 1px solid var(--wp--preset--color--primary-fixed);
}

.kmr-info-box--white {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--surface-variant);
}

.kmr-info-box__icon {
	background-color: var(--wp--preset--color--surface-container-lowest);
	color: var(--wp--preset--color--primary);
	box-shadow: var(--wp--custom--shadow--icon);
	margin-bottom: 1rem;
}

.kmr-info-box--white .kmr-info-box__icon {
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 5%, transparent);
	box-shadow: none;
}

.kmr-info-box__title {
	font-size: var(--wp--preset--font-size--headline-md);
	margin: 0 0 0.5rem;
}

.kmr-info-box p {
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
}

.kmr-info-box strong {
	color: var(--wp--preset--color--primary);
	font-weight: 500;
}

/* Parking note sits below a hairline rule, pushed to the box's bottom */
.kmr-info-box__note {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin-top: auto;
	padding-top: 1rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent);
}

.kmr-info-box__note .kmr-icon {
	color: var(--wp--preset--color--surface-tint);
	font-size: 1.25rem;
	margin-top: 0.15rem;
}

.kmr-info-box__note p {
	font-size: var(--wp--preset--font-size--label-sm);
}

/* Hours list — label left, time right, hairline between rows */
.kmr-hours {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	color: var(--wp--preset--color--on-surface-variant);
}

.kmr-hours li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--wp--preset--color--surface);
}

.kmr-hours li:last-child {
	border-bottom: none;
}

.kmr-hours span:last-child {
	font-weight: 500;
	color: var(--wp--preset--color--primary);
}

.kmr-hours .kmr-hours__closed {
	color: var(--wp--preset--color--surface-tint);
}

/* Immediate-support banner — navy, the same card treatment as
   .kmr-bento__feature (the course cards): this is the site's
   established "dark feature card" identity, taller than its neighbour
   so the right column reads as one prominent card + one small one. */
/* space-between (not center) so the label sits near the top, the
   button near the bottom, and the extra height from matching the left
   column actually gets used instead of just padding out a centred
   cluster. */
.kmr-contact-banner {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: var(--wp--preset--spacing--section) var(--wp--preset--spacing--stack-md);
	background-color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary-container);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--ambient-sm);
	text-align: center;
}

.kmr-contact-banner::after {
	content: "";
	position: absolute;
	right: -2.5rem;
	bottom: -2.5rem;
	width: 10rem;
	height: 10rem;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--primary-container);
	filter: blur(48px);
	opacity: 0.5;
	pointer-events: none;
}

.kmr-contact-banner>* {
	position: relative;
	z-index: 1;
}

/* Same treatment as .kmr-info-box__icon / .kmr-hero__float-icon — a
   soft tinted circle, not a bare glyph. */
.kmr-contact-banner__icon {
	align-self: center;
	background-color: color-mix(in srgb, var(--wp--preset--color--on-primary) 15%, transparent);
	color: var(--wp--preset--color--tertiary-fixed);
	margin: 0 auto 1rem;
}

.kmr-contact-banner__label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tertiary-fixed);
	margin: 0 0 0.75rem;
}

.kmr-contact-banner__number {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-lg);
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--on-primary);
	text-decoration: none;
	margin: 0 0 1.25rem;
	font-variant-numeric: tabular-nums;
}

.kmr-contact-banner__note {
	font-size: var(--wp--preset--font-size--body-lg);
	color: var(--wp--preset--color--primary-fixed-dim);
	margin: 0 auto 1.5rem;
	max-width: 85%;
}

/* Prefer-to-write card — the peach (tertiary-fixed) treatment,
   deliberately the small/quiet neighbour to the navy support card. */
.kmr-info-box--peach {
	background-color: var(--wp--preset--color--tertiary-fixed);
	border: 1px solid var(--wp--preset--color--tertiary-fixed-dim);
}

.kmr-info-box--peach .kmr-info-box__title {
	color: var(--wp--preset--color--primary);
}

.kmr-info-box--peach p {
	color: var(--wp--preset--color--on-tertiary-fixed-variant);
}

/* ==================================================================
   Enrollment steps
   ================================================================== */

.kmr-steps {
	display: grid;
	gap: var(--wp--preset--spacing--stack-lg);
}

@media (min-width: 640px) {
	.kmr-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.kmr-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.kmr-step {
	text-align: center;
}

.kmr-step__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	border-radius: var(--wp--custom--radius--full);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body-lg);
}

.kmr-step h3 {
	font-size: var(--wp--preset--font-size--body-lg);
	margin: 0 0 0.5rem;
}

.kmr-step p {
	font-size: var(--wp--preset--font-size--label-sm);
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
}

/* ==================================================================
   FAQ — course.html: each item is its own white rounded card
   ================================================================== */

.kmr-faq {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-width: 48rem;
	margin-inline: auto;
}

.kmr-faq__item {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 80%, transparent);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--ambient-sm);
	padding: 1.5rem;
	margin: 0;
}

.kmr-faq__item summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--body-lg);
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.kmr-faq__item summary::-webkit-details-marker {
	display: none;
}

.kmr-faq__item summary::marker {
	content: "";
}

/* Chevron rotates instead of swapping +/− glyphs, matching the moc's
   expand_more icon. */
.kmr-faq__item summary::after {
	content: "";
	flex-shrink: 0;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid var(--wp--preset--color--surface-tint);
	border-bottom: 2px solid var(--wp--preset--color--surface-tint);
	transform: rotate(45deg) translate(-0.1em, -0.1em);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.kmr-faq__item[open] summary::after {
	transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.kmr-faq__item summary:hover::after {
	border-color: var(--wp--preset--color--tertiary-container);
}

.kmr-faq__item p {
	margin: 0.5rem 0 0;
	color: var(--wp--preset--color--on-surface-variant);
}

/* ==================================================================
   Tables — course.html pricing / schedule
   ================================================================== */

.kmr-table {
	margin: 0;
}

.kmr-table table {
	width: 100%;
	min-width: 600px;
	border-collapse: collapse;
}

.kmr-table thead tr {
	border-bottom: 2px solid var(--wp--preset--color--surface-variant);
}

.kmr-table th {
	text-align: left;
	padding: 1rem 1.5rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary);
	border: none;
}

.kmr-table td {
	padding: 1rem 1.5rem;
	color: var(--wp--preset--color--on-surface-variant);
	border: none;
	border-bottom: 1px solid var(--wp--preset--color--surface-variant);
}

.kmr-table tbody tr:last-child td {
	border-bottom: none;
}

.kmr-table tbody tr {
	transition: background-color 0.2s ease;
}

.kmr-table tbody tr:hover {
	background-color: var(--wp--preset--color--surface-container-lowest);
}

.kmr-table td:first-child {
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

/* Pure white (surface-container-lowest), not surface-container-low —
   the section itself sits on the warm-ivory `surface` background, and
   surface-container-low is close enough to it that the card barely
   registered against the page. */
.kmr-table-wrap {
	overflow-x: auto;
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--card);
	padding-block: var(--wp--preset--spacing--stack-md);
}

.kmr-table-note {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-style: italic;
	color: var(--wp--preset--color--on-surface-variant);
	text-align: center;
	margin: 1.5rem 0 0;
}

/* Schedule availability badges */
.kmr-badge {
	display: inline-block;
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	font-weight: 700;
	padding: 0.15em 0.65em;
	border-radius: var(--wp--custom--radius--full);
	white-space: nowrap;
}

.kmr-badge--open {
	background-color: color-mix(in srgb, var(--wp--preset--color--success) 12%, transparent);
	color: var(--wp--preset--color--success);
}

.kmr-badge--limited {
	background-color: var(--wp--preset--color--tertiary-fixed);
	color: var(--wp--preset--color--on-tertiary-fixed-variant);
}

.kmr-badge--full {
	background-color: var(--wp--preset--color--surface-container-high);
	color: var(--wp--preset--color--on-surface-variant);
}

.kmr-grade-label {
	display: block;
	font-size: 12px;
	color: var(--wp--preset--color--on-surface-variant);
	margin-bottom: 0.2em;
}

/* ==================================================================
   Trial CTA band
   ================================================================== */

.kmr-cta {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.kmr-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 45% 60% at 50% 50%,
			color-mix(in srgb, var(--wp--preset--color--primary-container) 90%, transparent),
			transparent 70%);
	pointer-events: none;
}

.kmr-cta>* {
	position: relative;
	z-index: 1;
}

.kmr-cta h2 {
	font-size: var(--wp--preset--font-size--display-lg-mobile);
	color: var(--wp--preset--color--on-primary);
	margin: 0 0 1rem;
}

@media (min-width: 768px) {
	.kmr-cta h2 {
		font-size: var(--wp--preset--font-size--display-lg);
	}
}

.kmr-cta__lead {
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.8;
	color: var(--wp--preset--color--primary-fixed-dim);
	max-width: 36rem;
	margin: 0 auto 2rem;
}

.kmr-cta__buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}

@media (min-width: 640px) {
	.kmr-cta__buttons {
		flex-direction: row;
	}
}

.kmr-cta__phone {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-primary) 20%, transparent);
}

.kmr-cta__phone-label {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	color: var(--wp--preset--color--primary-fixed-dim);
	margin: 0 0 0.35rem;
}

.kmr-cta__phone-number {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-lg-mobile);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--on-primary);
	text-decoration: none;
}

.kmr-cta__phone-number:hover {
	color: var(--wp--preset--color--tertiary-fixed-dim);
}

/* ==================================================================
   Footer — hero.html <footer class="bg-primary">
   Brand column (peach glyph + wordmark + tagline + ©) on the left,
   two link columns on the right.
   ================================================================== */

.kmr-footer {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--on-primary);
}

.kmr-footer__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 2rem;
	max-width: 1120px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--stack-lg) 16px;
}

@media (min-width: 768px) {
	.kmr-footer__inner {
		flex-direction: row;
		padding-inline: 24px;
	}
}

.kmr-footer__brand {
	max-width: 20rem;
}

.kmr-footer__brand-row {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	text-decoration: none;
}

.kmr-footer__brand-row .kmr-icon {
	font-size: 1.5rem;
	color: var(--wp--preset--color--tertiary-fixed);
}

.kmr-footer__brand-row .wp-block-site-title,
.kmr-footer__brand-row .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--headline-md);
	font-weight: 600;
	color: var(--wp--preset--color--on-primary);
	text-decoration: none;
	margin: 0;
}

.kmr-footer__tagline {
	font-size: var(--wp--preset--font-size--label-sm);
	color: var(--wp--preset--color--primary-fixed-dim);
	margin: 0 0 1.5rem;
}

.kmr-footer__copyright {
	font-family: var(--wp--preset--font-family--label);
	font-size: 12px;
	color: var(--wp--preset--color--primary-fixed-dim);
	margin: 0;
}

.kmr-footer__cols {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/* Cancel core's flow-layout "> * + *" margin-block-start (24px) so the
   columns don't get extra, uneven spacing on top of our own flex gap. */
.kmr-footer__cols>.kmr-footer__col {
	margin-top: 0;
}

@media (min-width: 768px) {
	.kmr-footer__cols {
		flex-direction: row;
		gap: 4rem;
	}
}

.kmr-footer__col .wp-block-navigation {
	--wp--style--block-gap: 0.75rem;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	letter-spacing: 0.05em;
}

.kmr-footer__col .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary-fixed-dim);
	text-decoration: none;
	transition: color 0.2s ease;
}

.kmr-footer__col .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--on-primary);
	text-decoration: underline;
}

/* ==================================================================
   Global mobile CTA bar — DESIGN.md: two equal buttons, always present.
   Call Now (green) / Free Trial (orange).
   ================================================================== */

.kmr-mobile-cta {
	display: none;
}

@media (max-width: 767px) {
	.kmr-mobile-cta {
		display: flex;
		gap: 0.5rem;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 50;
		padding: 0.75rem;
		background-color: var(--wp--preset--color--surface-container-lowest);
		border-top: 1px solid var(--wp--preset--color--surface-variant);
		box-shadow: var(--wp--custom--shadow--float);
	}

	.kmr-mobile-cta a {
		flex: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.35rem;
		min-height: 48px;
		border-radius: var(--wp--custom--radius--lg);
		font-family: var(--wp--preset--font-family--label);
		font-size: var(--wp--preset--font-size--label-sm);
		font-weight: 700;
		text-decoration: none;
		color: var(--wp--preset--color--on-primary);
	}

	.kmr-mobile-cta__call {
		background-color: var(--wp--preset--color--success);
	}

	.kmr-mobile-cta__trial {
		background-color: var(--wp--preset--color--on-tertiary-container);
	}

	/* Reserve room so the bar never covers the end of the footer. */
	.wp-site-blocks {
		padding-bottom: 4.5rem;
	}

	/* hero.html gives the footer extra bottom padding for the same reason. */
	.kmr-footer__inner {
		padding-bottom: var(--wp--preset--spacing--section);
	}
}

/* ==================================================================
   Contact form — access.html "Send a Message"
   DESIGN.md: inputs use a soft cream background, focus = 2px navy.
   ================================================================== */

.kmr-form-card {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--deep);
	padding: var(--wp--preset--spacing--stack-md);
}

.kmr-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1.5rem;
}

.kmr-form__row {
	display: grid;
	gap: 1rem;
}

@media (min-width: 640px) {
	.kmr-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.kmr-form label {
	display: block;
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.25rem;
}

.kmr-form input,
.kmr-form select,
.kmr-form textarea {
	width: 100%;
	padding: 0.75rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-md);
	color: var(--wp--preset--color--on-surface);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface-variant);
	border-radius: var(--wp--custom--radius--base);
}

.kmr-form input::placeholder,
.kmr-form textarea::placeholder {
	color: var(--wp--preset--color--outline-variant);
}

.kmr-form input:focus,
.kmr-form select:focus,
.kmr-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
}

.kmr-form textarea {
	resize: vertical;
}

/* ==================================================================
   Comments form — core wp:post-comments-form output
   ================================================================== */

/* The reset in style.css zeroes every margin, which leaves the comment
   textarea's wrapper flush against the label above and the submit row
   below. Restore a gap on just that field. */
.comment-form-comment {
	margin-block: 1rem;
}

/* ==================================================================
   Post cards — blog archive query loop (templates/archive.html) and
   the front-page "Announcements" section, both built on
   patterns/query-loop-card.php so they share one card recipe: photo
   on top, category/title/meta/excerpt below — same shape as
   .kmr-course-card.
   ================================================================== */

.post-card {
	background-color: var(--wp--preset--color--surface-container-lowest);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--surface-variant) 80%, transparent);
	border-radius: var(--wp--custom--radius--xl);
	box-shadow: var(--wp--custom--shadow--ambient);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 0.3s ease;
}

.post-card:hover {
	transform: translateY(-4px);
}

.post-card__media {
	margin: 0;
}

.post-card__media img {
	width: 100%;
	object-fit: cover;
	display: block;
}

.post-card__body {
	padding: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	flex: 1;
}

.post-card__body .wp-block-post-terms {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
}

.post-card__body .wp-block-post-terms a {
	display: inline-block;
	padding: 0.25em 0.75em;
	border: 1px solid var(--wp--preset--color--outline-variant);
	border-radius: var(--wp--custom--radius--full);
	background-color: transparent;
	color: var(--wp--preset--color--surface-tint);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
}

/* Japanese titles break mid-word by default — "お申し込み" splitting
   across lines as "お申 / し込み". auto-phrase breaks on phrase
   boundaries instead, so the wrap lands where a reader expects it.
   Browsers without support fall back to the normal break, which is
   what we had before, so this is safe to ship unprefixed. */
.post-card__body .wp-block-post-title {
	font-size: var(--wp--preset--font-size--headline-md);
	line-height: 1.3;
	margin: 0;
	min-height: 2.6em;
	word-break: auto-phrase;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.post-card__body .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.post-meta {
	font-family: var(--wp--preset--font-family--label);
	font-size: var(--wp--preset--font-size--label-sm);
	color: var(--wp--preset--color--on-surface-variant);
}

.post-card__excerpt {
	color: var(--wp--preset--color--on-surface-variant);
	margin: 0;
}

.post-card__excerpt p {
	margin: 0;
	line-height: 1.6;
	min-height: 4.8em;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==================================================================
   Motion — reveal on scroll (assets/js/reveal.js).
   Scoped under .js-enabled so no-JS visitors never see hidden content;
   style.css already crushes durations under prefers-reduced-motion.
   ================================================================== */

.js-enabled .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.js-enabled .reveal.is-visible {
	opacity: 1;
	transform: none;
}