/*
Theme Name: Maths Path
Description: One-page block theme for Maths Path Tutoring. All copy is edited in the block editor; design tokens live in theme.json.
Version: 1.1.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maths-path
*/

/* All values below reference theme.json tokens (--wp--preset--*, --wp--custom--*). */

html { scroll-behavior: smooth; scroll-padding-top: var(--wp--custom--header-height); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { -webkit-font-smoothing: antialiased; }
.wp-site-blocks > * + * { margin-block-start: 0; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: var(--wp--preset--color--highlight); }
:where(a, button, summary, .wp-block-button__link, .wp-block-navigation-item__content):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ---------- Header ---------- */
header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 0px); }
.mp-header {
	background: var(--wp--preset--color--cream);
	border-bottom: var(--wp--custom--hairline) solid var(--wp--preset--color--rule);
	padding-inline: var(--wp--preset--spacing--gutter);
}
.mp-header__inner { min-height: var(--wp--custom--header-height); gap: var(--wp--preset--spacing--40); }
.mp-wordmark { margin: 0; font-size: var(--wp--custom--wordmark-size); letter-spacing: -0.01em; white-space: nowrap; }
.mp-wordmark a { color: var(--wp--preset--color--navy); text-decoration: none; font-weight: 400; }
.mp-wordmark mark { background: none; font-weight: 600; }
.mp-wordmark strong { font-weight: 800; }
.mp-header__nav { gap: var(--wp--preset--spacing--40); }
.mp-nav .wp-block-navigation__container { gap: var(--wp--preset--spacing--40); }
/* Doubled class beats core's `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit }`. */
.mp-nav.mp-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--grey);
	text-decoration: none;
	padding-block: 6px;
	border-bottom: var(--wp--custom--hairline) solid transparent;
}
.mp-nav.mp-nav .wp-block-navigation-item__content:hover,
.mp-nav.mp-nav .wp-block-navigation-item__content.is-current { color: var(--wp--preset--color--navy); }
.mp-nav .wp-block-navigation-item__content.is-current { border-bottom-color: var(--wp--preset--color--navy); font-weight: 600; }
/* No-JS fallback: highlight the item whose section is the URL target. */
html:not(.mp-spy) body:has(#about-me:target) .mp-nav a[href$="#about-me"],
html:not(.mp-spy) body:has(#who-i-support:target) .mp-nav a[href$="#who-i-support"],
html:not(.mp-spy) body:has(#how-it-works:target) .mp-nav a[href$="#how-it-works"],
html:not(.mp-spy) body:has(#approach:target) .mp-nav a[href$="#approach"],
html:not(.mp-spy) body:has(#get-in-touch:target) .mp-nav a[href$="#get-in-touch"] {
	color: var(--wp--preset--color--navy);
	border-bottom-color: var(--wp--preset--color--navy);
	font-weight: 600;
}
.mp-header__cta .wp-block-button__link {
	font-size: var(--wp--preset--font-size--small);
	padding: 10px 16px;
}
/* "Get in touch" inside the menu only shows in the mobile overlay (the button covers desktop). */
.mp-nav .wp-block-navigation__responsive-container:not(.is-menu-open) .mp-nav__contact { display: none; }

/* Collapse the menu earlier than core's 600px so the header never crowds on tablets. */
@media (min-width: 600px) and (max-width: 959px) {
	.mp-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex !important; }
	.mp-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none !important; }
}
/* Core's .is-layout-flex sets display:flex, so match its specificity to hide the button on phones. */
@media (max-width: 599px) { .mp-header .mp-header__cta { display: none; } }
.mp-nav .wp-block-navigation__responsive-container-open,
.mp-nav .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; }
/* Mobile overlay, as in the design: cream, left-aligned rows, green "Get in touch" button.
   Repeated classes outrank core's white overlay (5-class selector) and right-justification rules. */
.mp-nav.mp-nav.mp-nav .wp-block-navigation__responsive-container.is-menu-open.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	background-color: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--navy);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--gutter);
}
.mp-nav.mp-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.mp-nav.mp-nav .is-menu-open .wp-block-navigation__container { align-items: stretch; gap: 0; width: 100%; }
.mp-nav.mp-nav .is-menu-open .wp-block-navigation-item { width: 100%; align-items: flex-start; border-bottom: var(--wp--custom--hairline) solid var(--wp--preset--color--rule); }
.mp-nav.mp-nav .is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--custom--font-size--menu);
	min-height: 52px;
	display: flex;
	align-items: center;
	border-bottom: 0;
}
.mp-nav.mp-nav .is-menu-open .mp-nav__contact { border-bottom: 0; padding-block: 16px 20px; }
.mp-nav.mp-nav .is-menu-open .mp-nav__contact .wp-block-navigation-item__content {
	min-height: 48px;
	padding: 0 20px;
	font-weight: 600;
	color: var(--wp--preset--color--cream);
	background: var(--wp--preset--color--green-deep);
	border-radius: var(--wp--custom--radius);
	text-decoration: none;
}

/* ---------- Sections ---------- */
.mp-section { padding-inline: var(--wp--preset--spacing--gutter); padding-block-start: var(--wp--preset--spacing--70); }
/* Constrained layout centres anything narrower than the content width; the design aligns it to the content's left edge. */
.mp-section.is-layout-constrained > :not(.alignfull) {
	margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important;
	margin-right: auto !important;
}
.mp-eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: var(--wp--preset--color--green-deep);
}
.mp-eyebrow--rule { display: flex; align-items: center; gap: 14px; }
.mp-eyebrow--rule::before { content: ""; width: 28px; height: var(--wp--custom--hairline); background: var(--wp--preset--color--green); flex: none; }
.mp-section h2.wp-block-heading:not(.mp-eyebrow) { max-width: 18ch; margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); }
.mp-tag {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-deep);
}
.mp-lede { font-size: var(--wp--preset--font-size--medium); line-height: 1.45; letter-spacing: -0.005em; }
.mp-cols { gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60); margin-block: 0; }
.mp-measure, .mp-cols p { max-width: var(--wp--custom--measure); }

/* Hero */
.mp-hero { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); }
.mp-hero__title { position: relative; z-index: 0; text-wrap: initial; margin-block-start: 0; }
.mp-hero__title mark {
	background-color: var(--wp--preset--color--highlight);
	color: inherit;
	position: relative;
	z-index: -1;
	padding: 0 0.06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.mp-hero .mp-lede { max-width: 36ch; margin-block-start: var(--wp--preset--spacing--40); }
.mp-hero .wp-block-buttons { margin-block-start: var(--wp--preset--spacing--50); }

/* 4 → 2 → 1 columns for facts and steps (no orphaned item) */
.mp-facts .mp-facts__grid, .mp-how .mp-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 999px) { .mp-facts .mp-facts__grid, .mp-how .mp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .mp-facts .mp-facts__grid, .mp-how .mp-steps { grid-template-columns: minmax(0, 1fr); } }

/* Facts */
.mp-section.mp-facts {
	background: var(--wp--preset--color--highlight);
	padding-block: clamp(64px, 8vw, 104px);
}
.mp-facts .mp-facts__grid { gap: var(--wp--custom--facts-gap); }
.mp-fact { padding: 0; }
.mp-fact > * + *, .mp-fact > p + p { margin-block-start: 12px; }
.mp-fact p { margin: 0; font-size: var(--wp--custom--font-size--fact-text); line-height: 1.5; color: var(--wp--preset--color--navy); max-width: 30ch; }
.mp-fact p.mp-fact__label { font-size: var(--wp--custom--font-size--fact-label); font-weight: 650; letter-spacing: -0.015em; line-height: 1.2; color: var(--wp--preset--color--navy); }

/* About */
/* Manual heading tweak from the approved design: large, extra-bold green label. */
.mp-about h2.mp-eyebrow {
	font-size: var(--wp--custom--font-size--about-label);
	font-weight: 800;
	letter-spacing: 0.02em;
	line-height: 1.1;
	margin-block-end: 32px;
}
.mp-about__photo { margin: 0 0 0 auto; max-width: 440px; }
@media (max-width: 781px) { .mp-about__photo { margin-inline-start: 0; } }
.mp-about__photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--wp--custom--radius);
}

/* Who I support */
.mp-rows { border-top: var(--wp--custom--hairline) solid var(--wp--preset--color--navy); }
.mp-rows > .mp-row {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--40);
	border-bottom: var(--wp--custom--hairline) solid var(--wp--preset--color--rule);
}
.mp-row h3 { margin-block-start: 12px; max-width: 22ch; }
.mp-row p:not(.mp-tag) { margin: 0; }

/* Pull quote */
.mp-quote { margin: 0; padding-inline-start: min(22%, 232px); }
@media (max-width: 781px) { .mp-quote { padding-inline-start: 0; } }
.mp-quote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: -0.02em;
	max-width: 30ch;
}
.mp-quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--wp--preset--color--grey);
}

/* How it works */
.mp-intro { color: var(--wp--preset--color--grey); max-width: 52ch; }
.mp-how__head { gap: 20px var(--wp--preset--spacing--60); margin-block-end: var(--wp--preset--spacing--50); }
.mp-how__head > h2.wp-block-heading { flex: 2 1 300px; margin: 0 !important; }
.mp-how__head > .mp-intro { flex: 3 1 380px; margin: 0; font-size: 18px; line-height: 1.55; }
.mp-steps { gap: 0 var(--wp--preset--spacing--40); }
.mp-step {
	border-top: var(--wp--custom--hairline) solid var(--wp--preset--color--navy);
	padding-block: 20px 36px;
}
.mp-step > * + * { margin-block-start: 10px; }
.mp-step h3 { margin-block-start: 16px; font-size: var(--wp--custom--font-size--step-title); line-height: 1.2; }
.mp-step p { margin-block-end: 0; }
.mp-step p:not(.mp-step__n):not(.mp-step__sub) { font-size: var(--wp--custom--font-size--step-text); line-height: 1.62; }
.mp-step__n { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--green-deep); font-variant-numeric: tabular-nums; margin: 0; }
.mp-step__sub { font-size: var(--wp--preset--font-size--small); font-weight: 600; color: var(--wp--preset--color--grey); }

/* Approach */
.mp-approach { padding-block-end: var(--wp--preset--spacing--70); }
.mp-approach .mp-cols {
	border-top: var(--wp--custom--hairline) solid var(--wp--preset--color--navy);
	padding-top: var(--wp--preset--spacing--50);
}
.mp-approach .mp-cols .wp-block-column > p + p { margin-block-start: 24px; }
.mp-approach h3.mp-tag { margin-block-end: 8px; }
.mp-list { list-style: none; margin: 0; padding: 0; }
.mp-list li {
	display: flex;
	gap: 14px;
	padding-block: 14px;
	line-height: 1.45;
	border-bottom: var(--wp--custom--hairline) solid var(--wp--preset--color--rule);
}
.mp-list li::before { content: "–"; color: var(--wp--preset--color--green-deep); flex: none; }

/* Get in touch */
.mp-contact {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--cream);
	padding-block: var(--wp--preset--spacing--70);
}
.mp-contact h2.wp-block-heading:not(.mp-eyebrow) { color: var(--wp--preset--color--cream); max-width: 16ch; margin-block: 0; }
/* Core sets align-items: normal !important on columns. */
.mp-contact .mp-cols { align-items: flex-end !important; }
.mp-contact .mp-lede { max-width: 40ch; margin-block-start: var(--wp--preset--spacing--40); }
.mp-contact p:not(.mp-lede):not(.mp-email) { color: var(--wp--preset--color--mist); }
.mp-contact__email {
	border-top: var(--wp--custom--hairline) solid var(--wp--preset--color--green);
	padding-top: var(--wp--preset--spacing--40);
}
.mp-contact__email > * + * { margin-block-start: 14px; }
.mp-email { margin: 0; font-size: var(--wp--preset--font-size--medium); font-weight: 600; overflow-wrap: anywhere; }
.mp-contact a { color: var(--wp--preset--color--highlight); text-decoration-thickness: var(--wp--custom--hairline); text-underline-offset: 6px; }
.mp-contact a:hover, .mp-contact a:focus { color: var(--wp--preset--color--cream); }
.mp-contact .mp-reply { font-size: var(--wp--custom--font-size--fact-text); }

/* Footer */
.mp-footer {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--mist);
	border-top: var(--wp--custom--hairline) solid var(--wp--custom--footer-rule);
	padding: 28px var(--wp--preset--spacing--gutter);
	font-size: var(--wp--preset--font-size--small);
}
.mp-footer p { margin: 0; }
.mp-footer .mp-footer__name { color: var(--wp--preset--color--cream); font-weight: 600; }
.mp-footer a { color: var(--wp--preset--color--highlight); }
.mp-footer a[target="_blank"] { color: var(--wp--preset--color--mist); }

.mp-footer__meta { gap: 12px var(--wp--preset--spacing--40); }
.mp-footer a { text-underline-offset: 4px; }
.mp-footer a:hover, .mp-footer a:focus { color: var(--wp--preset--color--cream); }

/* Text-only pages (Privacy Notice etc.). The :has() selectors give the Privacy Notice the same look inside the editor. */
.mp-page { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--gutter); }
/* Left edge lines up with the header's content column; text stays at a readable measure. */
.mp-page > * { max-width: 68ch; margin-left: max(0px, calc((100% - var(--wp--style--global--content-size)) / 2)) !important; margin-right: auto !important; }
.mp-page .wp-block-post-content > * { max-width: 68ch; margin-inline: 0 !important; }
.mp-page h1.wp-block-post-title { font-size: var(--wp--preset--font-size--xx-large); line-height: 1; margin-block-end: var(--wp--preset--spacing--30); }
.mp-page .wp-block-post-content h2,
.editor-styles-wrapper:has(.mp-legal__meta) h2.wp-block-heading {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.25;
	margin-block: var(--wp--preset--spacing--50) 16px;
	padding-top: 24px;
	border-top: var(--wp--custom--hairline) solid var(--wp--preset--color--rule);
}
.mp-page .wp-block-post-content ul,
.editor-styles-wrapper:has(.mp-legal__meta) ul.wp-block-list { padding-left: 20px; }
.mp-page .wp-block-post-content li + li,
.editor-styles-wrapper:has(.mp-legal__meta) li + li { margin-top: 8px; }
.editor-styles-wrapper:has(.mp-legal__meta) .is-root-container > * { max-width: 68ch; }
.mp-legal__meta { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--grey); }