/**
 * EyeQBoost inner pages: Programs, Our Approach, About, For Schools, Contact.
 * Used by the eyeqboost/page-* patterns. Mobile-first; all tokens from theme.json.
 *
 * @package eyeqboost
 */

/* ---------- Sections & hero ---------- */

.wp-block-group.eqb-page-section,
.wp-block-group.eqb-page-hero {
	margin-block: 0;
	padding-block: var(--wp--preset--spacing--70);
}

.wp-block-group.eqb-page-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
}

/* Sparing playful shape behind each hero. */
.wp-block-group.eqb-page-hero::before {
	content: "";
	position: absolute;
	inset-block-start: -6rem;
	inset-inline-end: -6rem;
	width: 18rem;
	height: 18rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sunshine);
	opacity: 0.18;
	pointer-events: none;
}

.eqb-page-hero--approach::before {
	background: var(--wp--preset--color--magenta);
	opacity: 0.12;
}

.eqb-page-hero--about::before {
	background: var(--wp--preset--color--purple);
	opacity: 0.1;
}

.eqb-page-hero--schools::before {
	background: var(--wp--preset--gradient--brand);
	opacity: 0.35;
}

.eqb-page-hero > * {
	position: relative;
}

.eqb-page-hero h1 {
	overflow-wrap: break-word;
	hyphens: auto;
}

.eqb-page-hero__art {
	margin-inline: auto;
	max-width: 22rem;
}

.eqb-page-hero__art img,
.eqb-page-logo img,
.eqb-page-avatar img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 782px) {
	.eqb-page-hero__art {
		max-width: none;
	}
}

.eqb-page-lead {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.eqb-page-promise {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	color: var(--wp--preset--color--purple);
}

.eqb-page-highlight {
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 4px solid var(--wp--preset--color--purple);
}

/* Centred section intro (eyebrow + h2 + short paragraph). */
.wp-block-group.eqb-page-intro {
	margin-block-end: var(--wp--preset--spacing--60);
}

.eqb-page-intro > p:not(.is-style-eqb-eyebrow) {
	color: var(--wp--preset--color--ink-soft);
}

.eqb-page-section :is(h1, h2, h3) {
	overflow-wrap: break-word;
}

/* ---------- Cards ---------- */

.wp-block-group.eqb-page-grid {
	gap: var(--wp--preset--spacing--40);
}

.wp-block-group.eqb-page-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	border-radius: var(--wp--custom--radius--medium);
}

/* Tinted cards that don't use the Card block style still need padding. */
.wp-block-group.eqb-page-card:not(.is-style-eqb-card),
.wp-block-group.eqb-page-pillar,
.wp-block-group.eqb-page-logo-panel {
	padding: var(--wp--preset--spacing--50);
}

.wp-block-group.eqb-page-card > * {
	margin-block: 0;
}

.wp-block-group.eqb-page-card > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.wp-block-group.eqb-page-card > .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--40);
}

.eqb-page-tag {
	align-self: flex-start;
	padding: 0.3em 0.9em;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--purple-tint);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.eqb-page-label {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.eqb-page-meta,
.eqb-page-role {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.eqb-page-role {
	font-weight: 700;
}

/* Programs: featured card gets a brand-gradient top bar. */
.wp-block-group.eqb-page-program {
	position: relative;
	overflow: hidden;
}

.eqb-page-program--featured::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: var(--wp--preset--gradient--brand);
}

/* Feature icons. */
.eqb-page-feature__icon img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---------- Lists ---------- */

.eqb-page-pillar-list,
.eqb-page-ticks,
.eqb-page-contact-list {
	list-style: none;
	padding-inline-start: 0;
}

.eqb-page-pillar-list li,
.eqb-page-ticks li {
	position: relative;
	padding-inline-start: 1.6em;
}

.eqb-page-pillar-list li + li,
.eqb-page-ticks li + li,
.eqb-page-contact-list li + li {
	margin-block-start: 0.4em;
}

/* Five-pillar colour dots, in the fixed brand order. */
.eqb-page-pillar-list li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.2em;
	inset-block-start: 0.5em;
	width: 0.7em;
	height: 0.7em;
	border-radius: 50%;
	background: var(--wp--preset--color--blue);
}

.eqb-page-pillar-list li:nth-child(2)::before {
	background: var(--wp--preset--color--magenta);
}

.eqb-page-pillar-list li:nth-child(3)::before {
	background: var(--wp--preset--color--sunshine);
}

.eqb-page-pillar-list li:nth-child(4)::before {
	background: var(--wp--preset--color--purple);
}

.eqb-page-pillar-list li:nth-child(5)::before {
	background: var(--wp--preset--gradient--brand);
}

/* Tick lists: a rotated-L check in the context colour. */
.eqb-page-ticks {
	--eqb-page-tick: var(--wp--preset--color--purple);
}

.eqb-page-ticks li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0.25em;
	inset-block-start: 0.3em;
	width: 0.45em;
	height: 0.8em;
	border: solid var(--eqb-page-tick);
	border-width: 0 0.18em 0.18em 0;
	transform: rotate(45deg);
}

/* ---------- Approach: pillars ---------- */

.wp-block-group.eqb-page-pillars {
	counter-reset: eqb-page-pillar;
}

.wp-block-group.eqb-page-pillar {
	--eqb-page-accent: var(--wp--preset--color--blue);
	position: relative;
	counter-increment: eqb-page-pillar;
	border-radius: var(--wp--custom--radius--medium);
	border-inline-start: 6px solid var(--eqb-page-accent);
}

.eqb-page-pillar + .eqb-page-pillar {
	margin-block-start: var(--wp--preset--spacing--40);
}

.eqb-page-pillar--magenta {
	--eqb-page-accent: var(--wp--preset--color--magenta);
}

.eqb-page-pillar--sunshine {
	--eqb-page-accent: var(--wp--preset--color--sunshine);
}

.eqb-page-pillar--purple {
	--eqb-page-accent: var(--wp--preset--color--purple);
}

.eqb-page-pillar--lead {
	--eqb-page-accent: var(--wp--preset--color--magenta);
	border-inline-start: 0;
	background-image: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)), var(--wp--preset--gradient--brand);
	background-origin: border-box;
	background-clip: padding-box, border-box;
	border: 3px solid transparent;
}

.eqb-page-pillar .eqb-page-ticks {
	--eqb-page-tick: var(--eqb-page-accent);
}

/* Sunshine ticks are too light on a tint; use ink there. */
.eqb-page-pillar--sunshine .eqb-page-ticks {
	--eqb-page-tick: var(--wp--preset--color--ink);
}

.eqb-page-pillar--lead .eqb-page-ticks {
	--eqb-page-tick: var(--wp--preset--color--sunshine);
}

.eqb-page-pillar h3::before {
	content: counter(eqb-page-pillar, decimal-leading-zero);
	display: inline-grid;
	place-items: center;
	width: 2.4em;
	height: 2.4em;
	margin-inline-end: 0.6em;
	border: 3px solid var(--eqb-page-accent);
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--small);
	vertical-align: middle;
}

.eqb-page-pillar .wp-block-columns {
	margin-block: 0;
}

@media (min-width: 782px) {
	.eqb-page-pillar:nth-child(even) > .wp-block-columns {
		flex-direction: row-reverse;
	}
}

/* ---------- Steps (numbered automatically) ---------- */

.wp-block-group.eqb-page-steps {
	counter-reset: eqb-page-step;
}

.wp-block-group.eqb-page-step {
	counter-increment: eqb-page-step;
}

.wp-block-group.eqb-page-step::before {
	content: counter(eqb-page-step);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-block-end: var(--wp--preset--spacing--30);
	border-radius: 50%;
	background: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
}

/* ---------- Results ---------- */

.wp-block-group.eqb-page-stat {
	text-align: center;
}

.eqb-page-stat__num {
	margin-block-end: 0;
	color: var(--wp--preset--color--purple);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 800;
	line-height: 1.1;
	overflow-wrap: break-word;
}

.wp-block-columns.eqb-page-results {
	margin-block-start: var(--wp--preset--spacing--60);
}

.wp-block-quote.eqb-page-quote {
	margin: 0;
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--soft);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
}

.eqb-page-quote::before {
	content: "\201C";
	display: block;
	color: var(--wp--preset--color--magenta);
	font-size: var(--wp--preset--font-size--huge);
	line-height: 0.6;
}

.eqb-page-quote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--ink-soft);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	font-weight: 400;
}

/* ---------- Table ---------- */

.wp-block-table.eqb-page-table {
	overflow-x: auto;
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--soft);
}

.eqb-page-table table {
	min-width: 36rem;
	border-collapse: collapse;
}

.eqb-page-table :is(th, td) {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border: 0;
	border-block-end: 1px solid var(--wp--preset--color--purple-tint);
	text-align: start;
}

.eqb-page-table thead th {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--heading);
}

.eqb-page-table tbody td:first-child {
	font-weight: 700;
}

.eqb-page-table tbody tr:last-child td {
	border-block-end: 0;
}

/* ---------- FAQ (core/details) ---------- */

.eqb-page-faq .wp-block-details {
	margin-block-start: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--surface);
	box-shadow: var(--wp--preset--shadow--soft);
}

.eqb-page-faq summary {
	position: relative;
	padding-inline-end: 2rem;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
}

.eqb-page-faq summary::-webkit-details-marker {
	display: none;
}

.eqb-page-faq summary::after {
	content: "+";
	position: absolute;
	inset-inline-end: 0;
	inset-block-start: 50%;
	transform: translateY(-50%);
	color: var(--wp--preset--color--purple);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}

.eqb-page-faq details[open] summary::after {
	content: "\2212";
}

.eqb-page-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--small);
}

/* ---------- About ---------- */

.wp-block-group.eqb-page-logo-panel {
	border-radius: var(--wp--custom--radius--large);
}

.eqb-page-logo {
	margin: 0;
}

.eqb-page-statement--mission {
	border-block-start: 6px solid var(--wp--preset--color--blue);
}

.eqb-page-statement--vision {
	border-block-start: 6px solid var(--wp--preset--color--magenta);
}

.eqb-page-citation {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-style: italic;
}

.eqb-page-citation::before {
	content: "\2014\00a0";
}

.wp-block-group.eqb-page-member {
	text-align: center;
}

.eqb-page-avatar {
	align-self: center;
	width: 8rem;
	max-width: 100%;
}

.eqb-page-avatar img {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 50%;
}

/*
 * Symmetric card rows. The grid layout's auto-fill keeps empty tracks, so a short
 * row (2 statements, 3 team members, 4 steps) sat to the left. These rules size
 * the rows to their cards and centre them, whatever number the editor keeps.
 */

/* About: mission and vision, two equal columns from tablet up, text centred. */
.wp-block-group.eqb-page-grid:has(> .eqb-page-statement) {
	grid-template-columns: minmax(0, 1fr);
}

.wp-block-group.eqb-page-statement {
	text-align: center;
}

@media (min-width: 782px) {
	.wp-block-group.eqb-page-grid:has(> .eqb-page-statement) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* About: team members, centred cards of equal width (any number of people). */
.wp-block-group.eqb-page-team {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.wp-block-group.eqb-page-team > * {
	flex: 0 1 16rem;
	min-width: 0;
}

/* For Schools: "How a partnership works", 1 / 2 / 4 equal columns. */
.wp-block-group.eqb-page-steps {
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 600px) {
	.wp-block-group.eqb-page-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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

/* ---------- Dark bands (For Schools hero, enquiry band, leadership pillar) ---------- */

.eqb-page-on-dark :is(h1, h2, h3, h4) {
	color: inherit;
}

.eqb-page-on-dark .is-style-eqb-eyebrow,
.eqb-page-on-dark .eqb-page-label {
	color: var(--wp--preset--color--sunshine);
}

.eqb-page-on-dark a:not(.wp-element-button) {
	color: var(--wp--preset--color--sunshine);
}

.eqb-page-on-dark .eqb-page-ticks {
	--eqb-page-tick: var(--wp--preset--color--sunshine);
}

.eqb-page-on-dark .is-style-eqb-ghost .wp-block-button__link {
	color: var(--wp--preset--color--surface);
}

/* Form card on a dark band keeps light-surface colours. */
.eqb-page-on-dark .eqb-page-form-card a:not(.wp-element-button) {
	color: var(--wp--preset--color--purple);
}

/* ---------- Contact / forms ---------- */

.wp-block-group.eqb-page-form-card,
.wp-block-group.eqb-page-contact-card {
	min-width: 0;
}

.eqb-page-form-card > .wp-block-eyeqboost-enquiry-form {
	margin-block: 0;
	scroll-margin-block-start: var(--wp--preset--spacing--60);
}

.eqb-page-form-card > [id] {
	scroll-margin-block-start: var(--wp--preset--spacing--60);
}

.eqb-page-contact-list li {
	overflow-wrap: anywhere;
}

.eqb-page-note-text {
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--purple-tint);
	font-size: var(--wp--preset--font-size--small);
}

.eqb-page-note {
	border-block-start: 6px solid var(--wp--preset--color--purple);
}

/* ---------- Legal pages (Privacy Policy, Terms & Conditions) ----------
 * Used by eyeqboost/page-privacy and eyeqboost/page-terms.
 * Structure: .eqb-page-hero--legal, then .eqb-legal section holding
 * .eqb-legal-notice, .eqb-legal-toc (card) and .eqb-legal__body (flow prose).
 */

.wp-block-group.eqb-page-hero--legal {
	padding-block: var(--wp--preset--spacing--60);
}

.eqb-legal-updated {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

/* Draft notice. */
.wp-block-group.eqb-legal-notice {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-inline-start: 6px solid var(--wp--preset--color--sunshine);
	border-radius: var(--wp--custom--radius--medium);
	background: var(--wp--preset--color--sunshine-tint);
	color: var(--wp--preset--color--ink);
}

.eqb-legal-notice > * {
	margin-block: 0;
}

.eqb-legal-notice > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* "On this page" contents card (uses the eqb-card block style). */
.wp-block-group.eqb-legal-toc {
	margin-block-start: var(--wp--preset--spacing--50);
}

.eqb-legal-toc > * {
	margin-block: 0;
}

.eqb-legal-toc__list {
	margin-block-start: var(--wp--preset--spacing--30);
	padding-inline-start: 0;
}

/* Margin on each item (not the list) keeps markers inside their own column. */
.eqb-legal-toc__list li {
	margin-inline-start: 1.75em;
	padding-block: 0.2em;
	break-inside: avoid;
}

.eqb-legal-toc__list li::marker {
	color: var(--wp--preset--color--purple);
	font-weight: 700;
}

.eqb-legal-toc__list a {
	overflow-wrap: break-word;
}

@media (min-width: 782px) {
	.eqb-legal-toc__list {
		columns: 2;
		column-gap: var(--wp--preset--spacing--50);
	}
}

/* Prose. */
.wp-block-group.eqb-legal__body {
	margin-block-start: var(--wp--preset--spacing--60);
}

.eqb-legal__body > :is(p, ul, ol) {
	max-width: 70ch;
}

.eqb-legal__body :is(ul, ol) {
	padding-inline-start: 1.4em;
}

.eqb-legal__body li + li {
	margin-block-start: 0.5em;
}

.eqb-legal__body a {
	overflow-wrap: anywhere;
}

/* Numbered section headings. */
.eqb-legal__body > h2.wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 2px solid var(--wp--preset--color--purple-tint);
	font-size: var(--wp--preset--font-size--x-large);
}

.eqb-legal__body > h2.wp-block-heading:first-child {
	margin-block-start: 0;
	padding-block-start: 0;
	border-block-start: 0;
}

.eqb-legal__body > h3.wp-block-heading {
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--large);
}

/* Anchored headings clear the sticky header via html { scroll-padding-top } in base.css. */

@media print {
	body:has(.eqb-legal) :is(header, footer).wp-block-template-part {
		display: none;
	}

	.wp-block-group.eqb-page-hero--legal::before {
		display: none;
	}

	.wp-block-group.eqb-legal-toc {
		box-shadow: none;
	}

	.eqb-legal__body > :is(h2, h3) {
		break-after: avoid;
	}
}

/* ---------- Pillar pages (/our-approach/<pillar>/) ----------
 * Built by inc/pillar-page.php on top of the hero, card, ticks, quote and FAQ
 * styles above. The hero eyebrow links back to Our Approach.
 */

.eqb-page-hero--pillar .is-style-eqb-eyebrow a {
	color: inherit;
	text-underline-offset: 0.2em;
}

.wp-block-group.eqb-page-pillar-practises {
	border-radius: var(--wp--custom--radius--medium);
}

.eqb-page-card > .eqb-home-more {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

/* Our Approach hub: each pillar summary ends in a link to its own page. */
.eqb-page-pillar > .eqb-home-more {
	margin-block-end: 0;
}

/* Visually hidden text for links whose visible label is short ("Learn more"). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	word-wrap: normal !important;
}

/* ---------- Resources & safeguarding ----------
 * eyeqboost/page-resources: "Coming soon" pill, category cards and the
 * "Be the first to know" band (on top of .eqb-page-hero, .eqb-page-grid,
 * .eqb-page-card and .eqb-page-on-dark above).
 * eyeqboost/page-safeguarding uses the legal-page styles above unchanged.
 */

/* Pill above the hero h1; the hero copy is centred, so auto margins centre it. */
.eqb-page-pill {
	inline-size: fit-content;
	max-inline-size: 100%;
	padding: 0.35em 1em;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.eqb-page-pill--soon {
	border: 2px solid var(--wp--preset--color--sunshine);
	background: var(--wp--preset--color--sunshine-tint);
	color: var(--wp--preset--color--ink);
}

/* Category cards: pillar-colour bar on top of the matching tint. */
.wp-block-group.eqb-page-resource {
	--eqb-page-accent: var(--wp--preset--color--blue);
	position: relative;
	overflow: hidden;
	border-block-start: 6px solid var(--eqb-page-accent);
}

.eqb-page-resource.has-magenta-tint-background-color {
	--eqb-page-accent: var(--wp--preset--color--magenta);
}

.eqb-page-resource.has-sunshine-tint-background-color {
	--eqb-page-accent: var(--wp--preset--color--sunshine);
}

.eqb-page-resource.has-purple-tint-background-color {
	--eqb-page-accent: var(--wp--preset--color--purple);
}

/* Financial literacy + leadership: sunshine card with the leadership gradient bar. */
.wp-block-group.eqb-page-card.eqb-page-resource--lead {
	border-block-start: 0;
	padding-block-start: calc(var(--wp--preset--spacing--50) + 6px);
}

.eqb-page-resource--lead::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: var(--wp--preset--gradient--brand);
}

/* "Be the first to know" band (dusk gradient): keep focus rings visible on navy. */
.eqb-page-notify :focus-visible {
	outline-color: var(--wp--preset--color--sunshine);
}

.eqb-page-notify .wp-block-button__link:hover,
.eqb-page-notify .wp-block-button__link:focus-visible {
	box-shadow: var(--wp--preset--shadow--lift);
}