/*
 * Spine Health & Movement Institute — theme stylesheet.
 * Plain, hand-written CSS (no build step, no utility framework) so the
 * theme stays a drop-in Underscores-style install. Palette and type scale
 * are ported 1:1 from the original design system.
 * -----------------------------------------------------------------------
 * Contents:
 *   1. Design tokens
 *   2. Reset & base
 *   3. Layout helpers
 *   4. Typography helpers
 *   5. Buttons
 *   6. Cards
 *   7. Site header & navigation
 *   8. Hero slider
 *   9. Homepage page-sections (block-editor Pages picked in Customizer)
 *   10. Gutenberg block styles & core block polish
 *   11. Contact + Contact Form 7 overrides
 *   12. Footer
 *   13. Generic entry / 404 / prose (non front-page templates)
 * -----------------------------------------------------------------------
 */

/* 1. Design tokens ------------------------------------------------------ */
:root {
	--background: oklch(1 0 0);
	--foreground: oklch(28% .075 262);
	--primary: oklch(0.52 0.13 250);
	--primary-foreground: oklch(0.99 0.003 250);
	--muted-foreground: oklch(0.53 0.028 254);
	--border: oklch(0.918 0.01 250);
	--input: oklch(0.918 0.01 250);

	--navy: oklch(0.28 0.075 262);
	--navy-foreground: oklch(0.98 0.005 250);
	--surface: oklch(0.976 0.005 250);
	--tint: oklch(0.955 0.022 240);
	--sky: oklch(0.78 0.1 233); /* light blue — icons on dark/navy backgrounds */
	--hero-dark: oklch(0.08 0.02 262); /* near-black navy — Hero fallback color, shown before/if bg-slide.png loads */

	--radius: 0.5rem;
	--radius-lg: 1rem;
	--shadow-soft: 0 1px 2px oklch(0.28 0.075 262 / 0.04), 0 12px 32px -18px oklch(0.28 0.075 262 / 0.28);

	--font-display: "Libre Baskerville", Georgia, serif;
	--font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;

	--container-max: 72rem; /* 1152px */
	--container-max-narrow: 42rem; /* 672px */
	--container-max-statement: 56rem; /* 896px */

	/* Sticky header's own height (logo height + its vertical padding), so
	 * anchor-jumping to a section (nav clicks, #hash links) doesn't tuck the
	 * section's top under the fixed header. Kept in sync by hand with
	 * .site-logo img's height further down — bump both together. */
	--header-height: 5.25rem; /* 3.5rem logo + 0.875rem padding top/bottom */
}

@media (min-width: 1024px) {
	:root {
		--header-height: 6.25rem; /* 4.5rem logo + 0.875rem padding top/bottom */
	}
}

/* 2. Reset & base -------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	height: auto; /* Without this, the width/height attributes on <img> (set for CLS) lock in a fixed pixel height once width is overridden below, stretching every image. */
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

h1,
h2,
h3 {
	font-family: var(--font-display);
	letter-spacing: -0.01em;
	color: var(--navy);
	margin: 0;
	line-height: 1.2;
}

h4 {
	color: var(--navy);
	font-family: var(--font-display);
	margin: 0;
	padding: 10px 0;
}

/* h4 is used for "Why our institute" (dark navy background) — near-white
 * there instead of the default navy, so it stays readable. */
.page-section--dark h4 {
	color: var(--navy-foreground);
}

p {
	margin: 0 0 1.25rem;
}

p:last-child {
	margin-bottom: 0;
}

ul,
ol,
dl {
	margin: 0;
	padding: 0;
	list-style: none;
}

address {
	font-style: normal;
}

button {
	font: inherit;
	cursor: pointer;
}

.icon {
	width: 1.25rem;
	height: 1.25rem;
	flex-shrink: 0;
}

/* 3. Layout helpers -------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

.container {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 640px) {
	.container {
		padding-inline: 2rem;
	}
}

.section,
.hero,
.page-section {
	border-bottom: 1px solid var(--border);
	padding-block: 4rem;
}

/* Offsets anchor-jump targets (nav clicks, #hash links) so the sticky
 * header doesn't cover the top of the section it just scrolled to. */
.page-section,
.contact {
	scroll-margin-top: var(--header-height);
}

/* Reveal-on-scroll (assets/js/scroll-animate.js adds "is-visible" via
 * IntersectionObserver). Scoped under .js-animate — a class only added
 * (before paint, see header.php) when JS runs AND reduced-motion is off —
 * so sections are always visible by default and only animate as a bonus. */
.js-animate .page-section,
.js-animate .contact {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-animate .page-section.is-visible,
.js-animate .contact.is-visible {
	opacity: 1;
	transform: none;
}

@media (min-width: 1024px) {
	.section,
	.hero,
	.page-section {
		padding-block: 6rem;
	}
}

.contact {
	padding-block: 4rem;
}

@media (min-width: 1024px) {
	.contact {
		padding-block: 6rem;
	}
}

.section-intro {
	max-width: var(--container-max-narrow);
	margin-bottom: 3rem;
}

/* 4. Typography helpers ----------------------------------------------------- */
.eyebrow,
.is-style-eyebrow,
h3 {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--primary);
	font-family: var(--font-sans);
}

.eyebrow--dark {
	color: oklch(0.98 0.005 250 / 0.6);
}

h2 {
	font-size: 1.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

/* No top/bottom padding when the heading opens/closes its container (any
 * nesting level — a card, a column, .page-section__content itself), so it
 * doesn't leave a gap at the edge of the page/box. */
h2:first-child {
	padding-top: 0;
}

h2:last-child {
	padding-bottom: 0;
}

@media (min-width: 640px) {
	h2 {
		font-size: 1.875rem;
	}
}

@media (min-width: 1024px) {
	h2 {
		font-size: 2.25rem;
	}
}

.section-intro p {
	margin-top: 1.25rem;
	line-height: 1.7;
	color: var(--muted-foreground);
}

/* 5. Buttons ---------------------------------------------------------------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border-radius: var(--radius);
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
	border: 1px solid transparent;
}

.button--navy {
	background-color: var(--navy);
	color: var(--navy-foreground);
}

.button--navy:hover {
	background-color: var(--primary);
}

.button--outline {
	background-color: var(--background);
	border-color: var(--border);
	color: var(--foreground);
}

.button--outline:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* 6. Cards ------------------------------------------------------------------ */
/* Also used as the "Card" Group block style (.is-style-card) — see
 * inc/blocks.php — and as .box-style-one, the custom class used on hand-built
 * Group blocks (e.g. the Services cards, icon + heading + paragraph) — so
 * anything built by hand in Gutenberg can look like the original card boxes
 * without extra CSS classes. */
.card,
.is-style-card,
.box-style-one {
	background-color: var(--background);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	padding: 1.75rem;
}

@media (min-width: 640px) {
	.card,
	.is-style-card,
	.box-style-one {
		padding: 2.25rem;
	}
}

.is-style-card > :first-child,
.box-style-one > :first-child {
	margin-top: 0;
}

/* Icon (Lucide Icons block: .lucide-icon-block / .icon-color-brand).
 * Two looks, depending on where it's dropped:
 * - Plain, on its own (e.g. the "Why our institute" pillars): just a
 *   colored icon, no background — see the light-blue override further
 *   down for dark .page-section context.
 * - Inside a .box-style-one card: the small rounded-square badge from the
 *   original Services design — see the .box-style-one-scoped rules below. */
.lucide-icon-block {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.lucide-icon-block.icon-color-brand {
	color: var(--primary);
}

.lucide-icon-block svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* Gutenberg's "constrained" layout auto-centers unaligned blocks by default
 * (.is-layout-constrained > * gets margin-inline: auto) — the extra
 * .wp-block-group ancestor selector outranks that core rule so the icon
 * stays flush left instead of floating to the middle of its container. */
.wp-block-group .lucide-icon-block {
	margin: 0 auto 1.25rem 0;
}

/* Light blue on dark backgrounds (Why our institute) instead of the plain
 * "brand" blue, which would be too low-contrast on navy. */
.page-section--dark .lucide-icon-block.icon-color-brand {
	color: var(--sky);
}

/* The rounded-square badge look — only inside a .box-style-one card. */
.box-style-one .lucide-icon-block {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 0.75rem;
}

.box-style-one .lucide-icon-block svg {
	width: 1.25rem;
	height: 1.25rem;
}

.box-style-one .lucide-icon-block.icon-color-brand {
	background-color: var(--tint);
	color: var(--primary);
}

.page-section--dark .box-style-one .lucide-icon-block.icon-color-brand {
	background-color: oklch(1 0 0 / 0.08);
	color: var(--sky);
}

/* 7. Site header & navigation ------------------------------------------------ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid oklch(0.918 0.01 250 / 0.7);
	background-color: oklch(1 0 0 / 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.site-header__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 0.875rem 1.25rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1rem;
}

@media (min-width: 640px) {
	.site-header__inner {
		padding-inline: 2rem;
	}
}

.site-logo {
	display: flex;
	min-width: 0;
	align-items: center;
}

.site-logo .custom-logo-link {
	display: flex;
	align-items: center;
	min-width: 0;
}

.site-logo img,
.site-logo .custom-logo {
	height: 3.5rem;
	width: auto;
	max-height: 3.5rem;
}

@media (min-width: 1024px) {
	.site-logo img,
	.site-logo .custom-logo {
		height: 4.5rem;
		max-height: 4.5rem;
	}
}

.site-logo__text {
	font-family: var(--font-display);
	font-size: 1.125rem;
	color: var(--navy);
}

.site-nav {
	display: none;
	align-items: center;
	gap: 1.75rem;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.site-nav__list a {
	font-size: 0.875rem;
	color: var(--muted-foreground);
	transition: color 0.15s ease;
}

.site-nav__list a:hover {
	color: var(--primary);
}

.site-nav__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--navy);
	white-space: nowrap;
}

.site-nav__phone:hover {
	color: var(--primary);
}

.site-nav__phone .icon {
	width: 1.05rem;
	height: 1.05rem;
}

.menu-toggle {
	justify-self: end;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: none;
	padding: 0.5rem;
	color: var(--foreground);
	display: inline-flex;
}

.menu-toggle__close {
	display: none;
}

.site-header.is-menu-open .menu-toggle__open {
	display: none;
}

.site-header.is-menu-open .menu-toggle__close {
	display: block;
}

.mobile-nav {
	display: none;
	border-top: 1px solid var(--border);
	background-color: var(--background);
	padding: 0.75rem 1.25rem;
}

.site-header.is-menu-open .mobile-nav {
	display: block;
}

.mobile-nav__list a {
	display: block;
	padding: 0.75rem 0;
	border-bottom: 1px solid oklch(0.918 0.01 250 / 0.6);
	font-size: 0.875rem;
	color: var(--muted-foreground);
}

.mobile-nav__list li:last-child a {
	border-bottom: 0;
}

@media (min-width: 1024px) {
	.site-nav {
		display: flex;
	}

	.menu-toggle,
	.mobile-nav {
		display: none;
	}
}

/* 8. Hero slider -------------------------------------------------------------- */
/* Real photographed/rendered background (assets/images/bg-slide.png) instead
 * of the earlier CSS-only gradient+grain attempt — shared by every slide.
 * background-color is just a fallback for the instant before the image
 * loads (and if it 404s). Text/buttons below are flipped to the light
 * palette to sit on top of it. */
.hero {
	position: relative;
	padding-block: 0;
	overflow: hidden;
	background-color: var(--hero-dark);
	background-image: url("../images/bg-slide-2.webp");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-bottom-color: oklch(1 0 0 / 0.15);
}

.hero-slider {
	position: relative;
	z-index: 1;
}

.hero-slider__track {
	display: flex;
	transition: transform 0.5s ease;
}

.hero-slide {
	flex: 0 0 100%;
	min-width: 0;
	padding-block: 4rem;
}

@media (min-width: 1024px) {
	.hero-slide {
		padding-block: 6rem;
	}
}

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

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

.hero__content {
	min-width: 0;
}

.hero__heading {
	margin-top: 1.25rem;
	font-size: 1.875rem;
	line-height: 1.2;
	color: var(--navy-foreground);
}

@media (min-width: 640px) {
	.hero__heading {
		font-size: 2.25rem;
	}
}

@media (min-width: 1024px) {
	.hero__heading {
		font-size: 3rem;
	}
}

.hero .eyebrow {
	color: var(--sky);
}

.hero__paragraph {
	margin-top: 1.5rem;
	max-width: 36rem;
	font-size: 1rem;
	line-height: 1.7;
	color: oklch(0.98 0.005 250 / 0.75);
}

@media (min-width: 640px) {
	.hero__paragraph {
		font-size: 1.125rem;
	}
}

.hero__actions {
	margin-top: 2.25rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

/* Solid navy would blend into the glow background, so the primary button
 * becomes a frosted-glass pill instead; the outline button drops its white
 * fill for a light, translucent border. */
.hero .button--navy {
	background-color: oklch(1 0 0 / 0.14);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hero .button--navy:hover {
	background-color: oklch(1 0 0 / 0.24);
}

.hero .button--outline {
	background-color: transparent;
	border-color: oklch(1 0 0 / 0.35);
	color: var(--navy-foreground);
}

.hero .button--outline:hover {
	border-color: var(--navy-foreground);
	color: var(--navy-foreground);
}

.hero__stats {
	margin-top: 3rem;
	display: grid;
	gap: 1.5rem;
	border-top: 1px solid oklch(1 0 0 / 0.2);
	padding-top: 2rem;
}

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

.hero__stat dt {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--navy-foreground);
}

.hero__stat dd {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: oklch(0.98 0.005 250 / 0.65);
}

.hero__image {
	width: 100%;
	border-radius: var(--radius-lg);
	border: 1px solid oklch(1 0 0 / 0.25);
	object-fit: cover;
	box-shadow: 0 25px 70px -25px oklch(0.05 0.03 262 / 0.7);
}

.hero-slider__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding-bottom: 2rem;
}

@media (min-width: 1024px) {
	.hero-slider__controls {
		padding-bottom: 3rem;
	}
}

.hero-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	border: 1px solid oklch(1 0 0 / 0.3);
	background-color: oklch(1 0 0 / 0.08);
	color: var(--navy-foreground);
	flex-shrink: 0;
}

.hero-slider__arrow:hover {
	border-color: var(--navy-foreground);
	background-color: oklch(1 0 0 / 0.18);
}

.hero-slider__arrow-icon--prev {
	transform: rotate(180deg);
}

.hero-slider__dots {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.hero-slider__dot {
	width: 0.5rem;
	height: 0.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background-color: oklch(1 0 0 / 0.3);
	transition: background-color 0.15s ease, width 0.15s ease;
}

.hero-slider__dot.is-active {
	width: 1.5rem;
	background-color: var(--navy-foreground);
}

/* 9. Homepage page-sections (block-editor Pages picked in Customizer) --------- */
.page-section--surface {
	background-color: var(--surface);
}

.page-section--dark {
	background-color: var(--navy);
	border-bottom-color: var(--navy);
	color: var(--navy-foreground);
}

/* Whatever gets typed into a "dark" slot's page (Why our institute, by
 * default) should read correctly without the editor manually recoloring
 * every block — flip headings/eyebrow/text to the light palette here. */
.page-section--dark h1,
.page-section--dark h2 {
	color: var(--navy-foreground);
}

.page-section--dark p,
.page-section--dark li {
	color: oklch(0.98 0.005 250 / 0.7);
}

/* h3 is styled like .eyebrow (see Typography helpers), so on dark
 * backgrounds it should dim like an eyebrow too, not turn solid white
 * like the other headings. */
.page-section--dark .eyebrow,
.page-section--dark .is-style-eyebrow,
.page-section--dark h3 {
	color: oklch(0.98 0.005 250 / 0.6);
}

.page-section--dark .is-style-card,
.page-section--dark .box-style-one {
	background-color: oklch(1 0 0 / 0.04);
	border-color: oklch(0.98 0.005 250 / 0.2);
	box-shadow: none;
}

.page-section--dark hr {
	border-color: oklch(0.98 0.005 250 / 0.2);
}

.page-section__content > :first-child {
	margin-top: 0;
}

/* 10. Gutenberg block styles & core block polish ------------------------------- */
.is-style-statement {
	max-width: var(--container-max-statement);
	margin-inline: auto;
	text-align: center;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--navy);
	font-family: var(--font-display);
}

@media (min-width: 640px) {
	.is-style-statement {
		font-size: 1.5rem;
	}
}

.is-style-section-heading {
	max-width: var(--container-max-narrow);
}

.page-section__content .wp-block-columns {
	gap: 2rem;
}

.page-section__content .wp-block-group.is-style-card > .wp-block-group__inner-container,
.page-section__content .wp-block-group.is-style-card,
.page-section__content .wp-block-group.box-style-one > .wp-block-group__inner-container,
.page-section__content .wp-block-group.box-style-one {
	height: 100%;
}

.page-section__content .wp-block-image img {
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-soft);
}

.page-section--dark .wp-block-image img {
	border-color: oklch(0.98 0.005 250 / 0.2);
}

.page-section__content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: var(--radius);
	background-color: var(--navy);
	color: var(--navy-foreground);
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
}

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

.page-section__content .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--border);
	color: var(--foreground);
}

.page-section__content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--primary);
	color: var(--primary);
}

/* Numbered list block, styled like the original design's checklist: a
 * small light-blue circle with the number instead of the browser's default
 * "1." marker — built with CSS counters, so it works on the plain <ol>
 * the core List block outputs (no extra markup needed). */
.page-section__content ol.wp-block-list {
	list-style: none;
	margin: 1.5rem 0;
	padding: 0;
	counter-reset: sh-list;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.page-section__content ol.wp-block-list li {
	position: relative;
	counter-increment: sh-list;
	padding-left: 2.5rem;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--muted-foreground);
}

.page-section__content ol.wp-block-list li::before {
	content: counter(sh-list);
	position: absolute;
	left: 0;
	top: 0.125rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background-color: var(--tint);
	color: var(--primary);
	font-size: 0.75rem;
	font-weight: 600;
}

.page-section--dark ol.wp-block-list li::before {
	background-color: oklch(1 0 0 / 0.08);
	color: var(--sky);
}

/* 11. Contact + Contact Form 7 overrides -------------------------------------------------- */
.contact__grid {
	display: grid;
	gap: 3rem;
}

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

.contact__content {
	min-width: 0;
}

.contact__content p {
	margin-top: 1.25rem;
	line-height: 1.7;
	color: var(--muted-foreground);
}

.contact__details {
	margin-top: 2.25rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	border-top: 1px solid var(--border);
	padding-top: 2rem;
}

.contact__row {
	display: flex;
	gap: 1rem;
	color: var(--primary);
}

.contact__row address,
.contact__row a {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--muted-foreground);
}

.contact__row a:hover {
	color: var(--primary);
}

.contact__map {
	margin-top: 1.75rem;
	position: relative;
	width: 100%;
	padding-top: 56.25%; /* 16:9 */
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--border);
}

.contact__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.contact__form-placeholder {
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--muted-foreground);
}

/* Contact Form 7 default markup, styled to match the theme's inputs/button. */
.contact__form .wpcf7-form p {
	margin-bottom: 1.25rem;
}

.contact__form .wpcf7-form label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--navy);
	margin-bottom: 0.5rem;
}

.contact__form .wpcf7-form-control:not([type="submit"]) {
	width: 100%;
	border: 1px solid var(--input);
	border-radius: var(--radius);
	background-color: var(--background);
	padding: 0.625rem 0.875rem;
	font-size: 0.875rem;
	font-family: inherit;
	color: var(--foreground);
	outline: none;
	transition: border-color 0.15s ease;
}

.contact__form .wpcf7-form-control:not([type="submit"]):focus {
	border-color: var(--primary);
}

/* iOS/Android auto-zoom the whole page when a focused input's font-size is
 * under 16px — bump it back up to 16px only below the breakpoint where that
 * kicks in, instead of disabling pinch-zoom in the viewport meta tag (which
 * would break zoom for low-vision visitors too). */
@media (max-width: 639px) {
	.contact__form .wpcf7-form-control:not([type="submit"]) {
		font-size: 1rem;
	}
}

.contact__form textarea.wpcf7-form-control {
	min-height: 8rem;
	resize: vertical;
}

.contact__form input[type="submit"].wpcf7-form-control {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--radius);
	background-color: var(--navy);
	color: var(--navy-foreground);
	padding: 0.75rem 1.5rem;
	font-size: 0.875rem;
	font-weight: 500;
	transition: background-color 0.15s ease;
}

.contact__form input[type="submit"].wpcf7-form-control:hover {
	background-color: var(--primary);
	cursor: pointer;
}

.contact__form .wpcf7-response-output {
	margin-top: 1rem;
	border-radius: var(--radius);
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
}

.contact__form .wpcf7-not-valid-tip {
	color: oklch(0.577 0.245 27.325);
	font-size: 0.8125rem;
	margin-top: 0.375rem;
}

/* 12. Footer ------------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--navy);
}

.site-footer__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding: 2.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 640px) {
	.site-footer__inner {
		padding-inline: 2rem;
	}
}

@media (min-width: 768px) {
	.site-footer__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

.site-footer__name {
	font-size: 0.875rem;
	color: oklch(0.98 0.005 250 / 0.7);
}

.site-footer__copyright {
	font-size: 0.75rem;
	color: oklch(0.98 0.005 250 / 0.5);
}

/* 13. Generic entry / 404 / prose (non front-page templates) -------------------------------- */
.entry__title {
	font-size: 1.875rem;
}

.prose {
	max-width: var(--container-max-statement);
	line-height: 1.7;
	color: var(--foreground);
}

.prose > * + * {
	margin-top: 1.25rem;
}

.home-extra {
	padding-block: 4rem;
}

.error-404__inner {
	max-width: 32rem;
	text-align: center;
	padding-block: 6rem;
}

.error-404__inner h1 {
	margin-top: 1rem;
	font-size: 1.5rem;
}

.error-404__text {
	margin-top: 0.75rem;
	color: var(--muted-foreground);
}

.error-404__inner .button {
	margin-top: 1.5rem;
}