/*
Theme Name: Edmonton Early Years Hub
Theme URI: https://early.ddev.site
Author: Council of Early Learning and Care
Description: Custom block theme for the Edmonton Early Years Hub — a directory of programs and services for young children.
Version: 1.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: early-years-hub
*/

/* =========================================================
   Edmonton Early Years Hub — global front-end styles
   Design tokens (colors, fonts, spacing) live in theme.json.
   This file holds bespoke layout that theme.json can't express
   (gradients, absolute positioning, the nav mega-menu, etc.).
   ========================================================= */

body {
	--eyh-teal: #4a8a8c;
	--eyh-teal-dark: #3c6f70;
	--eyh-navy: #3a3f64;
	--eyh-gold: #b89c46;
	--eyh-gold-dark: #a5892f;
	--eyh-bg-pale: #dceeec;
	--eyh-cream: #f4ecd6;
	--eyh-muted: #6e7396;

	/* The 2026 redesign palette. Deliberately separate from the values above:
	   the older tokens still drive the interior templates, and the two sets
	   are close enough that merging them would silently shift those pages. */
	--eyh-teal-deep: #178f96;
	--eyh-teal-deeper: #12777d;
	--eyh-gold-deep: #c7b02f;
	--eyh-navy-deep: #4a3f5c;
	--eyh-cream-page: #fcfaf2;
	--eyh-cream-light: #f4efd5;
	--eyh-field: #e8f7f8;
	--eyh-rule-pale: #a2d2d5;

	/* One content column for the whole redesign: the search card, the CTA row,
	   the gold rules and the footer rule all land on the same edges.
	   --eyh-content is the measure the artwork specifies; --eyh-shell is the
	   box that produces it once the gutters are added, so every section can
	   use `max-width: var(--eyh-shell); padding: 0 var(--eyh-gutter)` and end
	   up 1160px wide on a roomy viewport while still breathing on a phone. */
	--eyh-content: 1160px;
	--eyh-gutter: 20px;
	--eyh-shell: calc(var(--eyh-content) + (2 * var(--eyh-gutter)));
}

/* ---------------- Headings ---------------- */
/* Sitewide h1 standard. !important because block-editor content often
   carries per-block inline font-size styles or font-size utility classes
   (e.g. has-huge-font-size) that would otherwise win. */
h1 {
	font-size: 64px !important;
	font-weight: normal !important;
}

/* ---------------- Layout ---------------- */
/* WordPress applies a default root-level top margin to every top-level block
   ( :where(.wp-site-blocks) > * { margin-block-start: 24px } ), which leaves a
   gap between the header and the content (and above the footer). The :where()
   selector has zero specificity, so this single class-based rule overrides it
   and lets the sections sit flush. */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------------- Header ---------------- */
.eyh-header {
	padding: 12px 60px;
	background: #fff;
	/* The navy rule under the bar, as a border rather than markup so it can
	   never be dragged out of the header in the site editor and so it adds
	   its own height instead of eating into the hero below. */
	border-bottom: 10px solid var(--eyh-navy-deep);
	/* Establish a stacking context above the hero so nav dropdowns paint
	   over the hero content (which sits at z-index: 2). */
	position: relative;
	z-index: 50;
}
.eyh-brand { gap: 14px; }
.eyh-brand img { height: 68px; width: auto; display: block; }
.eyh-divider {
	width: 1px;
	height: 46px;
	background: #d5d8de;
	opacity: 1;
}
.eyh-brand-name {
	color: var(--eyh-teal);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.25;
}

/* Navigation */
.eyh-nav {
	font-weight: 400;
	font-size: 16px;
}
.eyh-nav .wp-block-navigation-item__label { color: var(--eyh-muted); }
/* Replace the default chevron-stroke submenu icon with a solid gold triangle. */
.eyh-nav .wp-block-navigation__submenu-icon { color: var(--eyh-gold); position: relative; width: 10px; height: 10px; }
.eyh-nav .wp-block-navigation__submenu-icon svg { display: none; }
.eyh-nav .wp-block-navigation__submenu-icon::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--eyh-gold);
	transition: transform 200ms ease;
}
.eyh-nav .wp-block-navigation-item.has-child:hover .wp-block-navigation__submenu-icon::after,
.eyh-nav .wp-block-navigation-item.has-child:focus-within .wp-block-navigation__submenu-icon::after {
	transform: translate(-50%, -50%) rotate(180deg);
}
.eyh-nav .wp-block-navigation__submenu-container {
	min-width: 320px;
	background: #fff;
	border: 1px solid #e1ecea;
	border-radius: 12px;
	box-shadow: 0 18px 40px -12px rgba(58, 63, 100, 0.18), 0 4px 12px -4px rgba(58, 63, 100, 0.08);
	padding: 10px 0;
	margin-top: 14px;
	z-index: 60;
}
/* Invisible bridge spanning the 14px gap between the menu item and the
   dropdown, so moving the cursor down to the submenu keeps it open. */
.eyh-nav .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	top: -14px;
	left: 0;
	right: 0;
	height: 14px;
}
.eyh-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 10px 20px;
	font-size: 16px;
	font-weight: 600;
	color: var(--eyh-navy);
	border-left: 3px solid transparent;
	transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.eyh-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--eyh-bg-pale);
	color: var(--eyh-teal-dark);
	border-left-color: var(--eyh-teal);
}

/* ---------------- Hero ---------------- */
/* The gradient is radial, brightest behind the headline and deepening toward
   every edge — a linear ramp cannot reproduce it, since the top-left corner is
   as saturated as the bottom-right. Height is fixed to the artwork's 420px so
   the filter card's -43px overhang lands where the design puts it, regardless
   of how tall the cut-out photo is. */
.eyh-hero-section {
	position: relative;
	overflow: hidden;
	min-height: 420px;
	background: radial-gradient(
		120% 110% at 62% 22%,
		#e3f1f1 0%,
		#dfeff0 32%,
		#c3e2e4 72%,
		#add6d2 100%
	);
	padding-bottom: 0;
}
/* The hero's own shell. It matches every other section's measure so the
   headline and the cut-out are placed against the 1160px column rather than
   against the viewport — otherwise the photo drifts further from the text the
   wider the window gets. */
.eyh-hero {
	position: relative;
	max-width: var(--eyh-shell);
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 var(--eyh-gutter);
	box-sizing: border-box;
	min-height: 420px;
	display: flex;
	align-items: center;
}
/* The cut-out figure stands on the hero's floor and is clipped by the section's
   overflow, exactly as it bleeds off the bottom of the artwork. It is absolute
   rather than a flex item so the headline stays optically centred in the hero
   whether or not the photo has loaded. */
.eyh-hero-cutout.wp-block-image {
	position: absolute;
	/* 22px into the content column, per the artwork. */
	left: calc(var(--eyh-gutter) + 22px);
	bottom: 0;
	width: min(480px, 36vw);
	margin: 0;
	z-index: 1;
	pointer-events: none;
}
.eyh-hero-cutout.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}
.eyh-hero-inner {
	position: relative;
	z-index: 2;
	width: 100%;
}
/* The extra specificity (vs. a bare .eyh-hero-content) is required to beat
   WordPress's global flex block-gap reset (.is-layout-flex > :is(*, div)
   { margin: 0 }), which outranks a single class selector. */
.eyh-hero-inner .eyh-hero-content {
	/* Centred within the space the cut-out leaves, not within the hero. */
	margin: 0 0 0 auto;
	max-width: 660px;
	width: 100%;
	text-align: center;
}
/* Overrides the sitewide `h1 { font-size: 64px !important }` further up. The
   redesign's hero title measures 48px, and the !important there can only be
   beaten by another !important. */
.eyh-hero-inner h1 {
	color: var(--eyh-navy-deep);
	font-size: clamp(32px, 3.6vw, 48px) !important;
	font-weight: 400 !important;
	line-height: 1.15;
	margin: 0 0 10px;
	letter-spacing: 0.2px;
}
.eyh-hero-sub {
	color: var(--eyh-teal-deep);
	font-weight: 400;
	font-size: 22px;
	margin: 0;
}
.eyh-cta-row { margin-bottom: 18px; }

/* Branded pill buttons, registered as the "Teal" and "Gold" block style
   variations (register_block_style in functions.php). Apply to any Button
   block from the Styles panel. */
.wp-block-button.is-style-teal .wp-block-button__link,
.wp-block-button.is-style-gold .wp-block-button__link {
	border-radius: 999px;
	padding: 13px 60px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	border: 3px solid transparent;
	box-shadow: 0 2px 0 rgba(0, 0, 0, 0.04);
	transition: transform 180ms ease, box-shadow 220ms ease, background-color 180ms ease, filter 180ms ease;
}
.wp-block-button.is-style-teal .wp-block-button__link:hover,
.wp-block-button.is-style-gold .wp-block-button__link:hover {
	transform: translateY(-2px);
	filter: brightness(1.05);
}
.wp-block-button.is-style-teal .wp-block-button__link { background: #468c95; border-color: #add0d4; }
.wp-block-button.is-style-teal .wp-block-button__link:hover { background: var(--eyh-teal-dark); box-shadow: 0 10px 20px -8px rgba(74, 138, 140, 0.55); }
.wp-block-button.is-style-gold .wp-block-button__link { background: #c2b242; border-color: #e7e0b0; }
.wp-block-button.is-style-gold .wp-block-button__link:hover { background: var(--eyh-gold-dark); box-shadow: 0 10px 20px -8px rgba(184, 156, 70, 0.55); }

/* "Round Blue" image style, registered for core/image and
   core/post-featured-image (register_block_style in functions.php). Crops
   the image into a circle and applies a flat duotone-style treatment
   (grayscale photo + tinted overlay via blend modes) instead of relying on
   the editor's built-in duotone filter, which can't target a circular crop
   on its own. */
.wp-block-image.is-style-round-blue,
.wp-block-post-featured-image.is-style-round-blue {
	position: relative;
	overflow: hidden;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	background-color: #7da8aa;
}
.wp-block-image.is-style-round-blue img,
.wp-block-post-featured-image.is-style-round-blue img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(100%) contrast(1);
	mix-blend-mode: multiply;
	opacity: 1;
}
.wp-block-image.is-style-round-blue::before,
.wp-block-post-featured-image.is-style-round-blue::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #178f96;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 1;
}

/* Same treatment for eyhub/hero-slideshow. It differs from the single-image
   version in two ways: the teal backdrop the photo multiplies against sits on
   each slide (each slide is its own stacking context — see the block's
   style.scss), and the tint overlay has to clear the stacked slides, which
   occupy z-index 1 and 2 during a crossfade. */
.wp-block-eyhub-hero-slideshow.is-style-round-blue {
	border-radius: 50%;
}
.wp-block-eyhub-hero-slideshow.is-style-round-blue .eyh-slide {
	background-color: #7da8aa;
}
.wp-block-eyhub-hero-slideshow.is-style-round-blue .eyh-slide img {
	filter: grayscale(100%) contrast(1);
	mix-blend-mode: multiply;
}
.wp-block-eyhub-hero-slideshow.is-style-round-blue::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #178f96;
	mix-blend-mode: screen;
	pointer-events: none;
	z-index: 3;
}
.eyh-cta-tags {
	color: var(--eyh-muted);
	font-size: 14px;
	line-height: 1.7;
	text-align: center;
}

/* ---------------- Interior page hero (FAQ, etc.) ---------------- */
.eyh-page-hero-section {
	background: linear-gradient(to bottom, var(--eyh-bg-pale) 0%, var(--eyh-bg-pale) 15%, var(--eyh-cream-page) 45%);
	padding-bottom: 30px;
}
.eyh-page-hero {
	position: relative;
	padding: 50px 60px 0;
}
.eyh-page-hero-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
}
.eyh-page-hero-inner .eyh-page-title.wp-block-heading {
	color: var(--eyh-navy);
	font-size: clamp(30px, 4.5vw, 42px);
	margin: 6px 0 0;
}
.eyh-page-hero-image.wp-block-image {
	flex: 0 0 auto;
	width: min(240px, 22vw);
	margin: 0;
}

/* FAQ accordion */
/* The extra specificity (vs. a bare .eyh-faq-wrap) is required to beat
   WordPress's global block-gap rule (:root :where(.is-layout-flow) > *),
   which carries the same specificity as a single class and is output later
   in the cascade, so it wins ties by source order. See the identical fix on
   .eyh-search-wrap for the homepage filter card. */
.eyh-page-hero-section .eyh-faq-wrap {
	max-width: 900px;
	margin: -78px auto 0;
	padding: 0 30px;
	position: relative;
	z-index: 3;
}
.eyh-faq-card {
	background: #fff;
	border: 2px solid #a2d2d5;
	border-radius: 16px;
	padding: 10px 44px;
	box-shadow: 0 20px 40px -16px rgba(58, 63, 100, 0.22), 0 4px 12px -2px rgba(58, 63, 100, 0.08);
}
/* Expand/collapse-all control, injected into the card by inc/faq.php. */
.eyh-faq-card .eyh-faq-controls {
	display: flex;
	justify-content: flex-end;
	padding: 16px 0 2px;
}
/* Scaled-down version of the homepage .eyh-search-submit button. */
.eyh-faq-card .eyh-faq-toggle-all {
	background: var(--eyh-teal);
	color: #fff;
	border: 2px solid #add0d4;
	border-radius: 8px;
	padding: 8px 24px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
}
.eyh-faq-card .eyh-faq-toggle-all:hover {
	background: var(--eyh-teal-dark);
}
/* Overrides WordPress's global block-gap rule (:root :where(.is-layout-
   constrained) > *), which otherwise adds margin-block-start: 24px on top
   of our own padding for every item after the first. */
.eyh-faq-card .wp-block-details {
	margin-top: 0;
	border-bottom: 1px solid #d0e8ea;
	padding: 18px 0;
}
.eyh-faq-card .wp-block-details:last-child {
	border-bottom: 0;
}
.eyh-faq-card .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	list-style: none;
	cursor: pointer;
	color: var(--eyh-navy);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
}
.eyh-faq-card .wp-block-details summary::-webkit-details-marker {
	display: none;
}
.eyh-faq-card .wp-block-details summary::after {
	content: "+";
	flex: 0 0 auto;
	color: #c9b323;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}
.eyh-faq-card .wp-block-details[open] summary::after {
	content: "\2212";
}
.eyh-faq-card .wp-block-details p {
	margin: 14px 0 0;
	padding-left: 28px;
	color: var(--eyh-navy);
	font-size: 18px;
	line-height: 1.7;
	overflow-wrap: break-word;
	word-break: break-word;
}
.eyh-faq-card .wp-block-details p a {
	color: var(--eyh-teal);
	text-decoration: underline;
}

/* ---------------- Generic content page (default "page" template) ---------------- */
.eyh-content-hero-section {
	background: linear-gradient(to bottom, var(--eyh-bg-pale) 0%, var(--eyh-bg-pale) 15%, var(--eyh-cream-page) 45%);
	padding: 50px 0 40px;
}
/* Hero row and body-wrap both center as a 1280px box with the same 60px
   internal padding, so their content shares one left edge. (The divider
   below skips the padding and uses a matching 1160px max-width instead,
   since a border can't be inset by padding.) This replaces relying on
   core's is-layout-constrained centering, which centered the hero row
   against the viewport and the body text against a different box,
   producing mismatched left edges. */
.eyh-content-hero {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	max-width: 1280px;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 0 60px;
	box-sizing: border-box;
}
.eyh-content-hero .eyh-content-title.wp-block-post-title {
	flex: 1 1 auto;
	min-width: 0;
	color: var(--eyh-navy);
	margin: 0;
	max-width: 700px;
}
/* The image hangs 48px below the hero row's baseline (negative bottom margin)
   so the divider that follows crosses its lower third, matching the approved
   artwork. Anchoring the crossing to the image rather than pulling the divider
   up into the row keeps it correct no matter how tall the title grows: a title
   that wraps to several lines simply pushes the divider down below itself
   instead of being sliced through it. */
.eyh-content-hero-image.wp-block-post-featured-image {
	flex: 0 0 auto;
	width: min(220px, 20vw);
	margin: 0 0 -48px;
	position: relative;
	z-index: 0;
}
/* Small top gap so a long, wrapped title never touches the divider. The divider
   needs an explicit z-index above the image because the image establishes its
   own stacking context. */
.eyh-content-hero-section .eyh-content-divider.wp-block-separator {
	max-width: 1160px;
	margin: 8px auto 0 !important;
	border: none;
	border-top: 3px solid #e7e0b0;
	position: relative;
	z-index: 1;
}
.eyh-content-body-wrap {
	max-width: 1280px;
	padding: 0 60px 60px;
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}
.eyh-content-body-wrap .wp-block-post-content {
	max-width: 760px;
	margin-left: 0 !important;
	margin-right: auto !important;
}
.eyh-content-body-wrap .wp-block-post-content > * {
	color: var(--eyh-navy);
	font-size: 16px;
	line-height: 1.7;
}
/* Body copy runs one step larger than the surrounding chrome; lists match
   paragraphs so mixed prose stays visually level. */
.eyh-content-body-wrap .wp-block-post-content > p,
.eyh-content-body-wrap .wp-block-post-content > ul,
.eyh-content-body-wrap .wp-block-post-content > ol {
	font-size: 18px;
}
.eyh-content-body-wrap .wp-block-post-content > ul,
.eyh-content-body-wrap .wp-block-post-content > ol {
	padding-left: 20px;
}
.eyh-content-body-wrap .wp-block-post-content a {
	color: var(--eyh-teal);
	text-decoration: underline;
}

/* =========================================================
   Homepage sections (2026 redesign)
   ========================================================= */

/* One shared measure. Sections are full-bleed groups so their rules and
   backgrounds can reach the viewport edge; this centres their contents on the
   1160px column every other element lines up with. */
.eyh-welcome,
.eyh-intro.wp-block-columns,
.eyh-cta-row.wp-block-columns,
.eyh-partner-logos,
.eyh-land.wp-block-columns,
.eyh-gold-rule.wp-block-separator {
	max-width: var(--eyh-shell);
	/* !important because WordPress ships `.has-global-padding > .alignfull
	   { margin-left: calc(var(--wp--style--root--padding-left) * -1) }` to let
	   full-bleed blocks escape the root padding. Root padding is 0 here, so the
	   rule contributes nothing but a zero margin — yet it outranks a single
	   class selector and would leave every section stuck to the left edge. */
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: var(--eyh-gutter);
	padding-right: var(--eyh-gutter);
	box-sizing: border-box;
}

/* ---------------- Welcome statement ---------------- */
.eyh-welcome.wp-block-heading {
	color: var(--eyh-teal-deep);
	font-weight: 300;
	font-size: clamp(24px, 2.7vw, 34px);
	line-height: 1.2;
	text-align: center;
	/* Explicit margins on every section below, because WordPress's constrained
	   layout adds `margin-block-start: 24px` between siblings via a :where()
	   rule. The artwork spaces these sections with their own padding instead,
	   so most of them need that gap set to zero rather than inherited. */
	margin-top: 51px;
	margin-bottom: 56px;
	max-width: 940px;
}

/* ---------------- Intro: leaf bullets + round photo ---------------- */
.eyh-intro.wp-block-columns {
	align-items: center;
	gap: 40px;
	margin-top: 0;
	margin-bottom: 77px;
}

/* A core list block, so editors keep list semantics and can add or remove
   points; the leaf replaces the marker and a hairline separates the items.
   Three left edges, all from the artwork: the leaf at 58px into the column,
   the copy at 133px, and the hairline starting at 121px — between the two,
   which is why the rule is a pseudo-element rather than a border on the item. */
.eyh-leaf-list {
	list-style: none;
	margin: 0 0 0 58px;
	padding: 0;
}
.eyh-leaf-list li {
	position: relative;
	padding: 0 0 20px 75px;
	margin: 0 0 20px;
	color: #000;
	font-size: 18px;
	line-height: 1.5;
}
.eyh-leaf-list li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 63px;
	right: 0;
	bottom: 0;
	border-bottom: 3px solid var(--eyh-rule-pale);
}
.eyh-leaf-list li:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}
.eyh-leaf-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 33px;
	height: 42px;
	background-color: var(--eyh-navy-deep);
	-webkit-mask: url("assets/images/leaf.svg?v=2") no-repeat center / contain;
	mask: url("assets/images/leaf.svg?v=2") no-repeat center / contain;
}

/* "Round Cream" image style — registered in functions.php. A plain circular
   crop over an offset cream disc, which reads as the crescent in the artwork.
   The disc is a pseudo-element on the figure rather than a second image so it
   tracks the photo's size at every breakpoint. */
.wp-block-image.is-style-round-cream {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}
.wp-block-image.is-style-round-cream::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--eyh-cream-light);
	transform: translate(25px, 25px);
	z-index: 0;
}
.wp-block-image.is-style-round-cream img {
	position: relative;
	z-index: 1;
	display: block;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ---------------- CTA card row ---------------- */
.eyh-cta-row.wp-block-columns {
	gap: 50px;
	margin-top: 0;
	margin-bottom: 71px;
}

/* ---------------- Gold rules ---------------- */
.eyh-gold-rule.wp-block-separator {
	width: auto;
	border: none;
	border-top: 3px solid var(--eyh-gold-deep);
	opacity: 1;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------------- Partner logos ---------------- */
.eyh-partner-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 40px 126px;
	padding-top: 46px;
	padding-bottom: 46px;
	margin-top: 0;
	margin-bottom: 0;
}
.eyh-partner-logos .wp-block-image { margin: 0; }
/* Heights are per-logo rather than uniform: each mark has its own proportion
   of cap-height to whitespace, and the artwork sizes them to match optically
   rather than mathematically. */
.eyh-partner-logos img {
	display: block;
	width: auto;
	height: 78px;
}
.eyh-partner-logos .eyh-logo-ecf img { height: 77px; }
.eyh-partner-logos .eyh-logo-211 img { height: 96px; }

/* ---------------- Land acknowledgement ---------------- */
/* The extra 25px of bottom padding is the crescent's overhang: it is a
   pseudo-element offset out of the figure's box, so it paints below the photo
   without adding to the section's height. */
.eyh-land.wp-block-columns {
	align-items: center;
	gap: 40px;
	padding-top: 56px;
	padding-bottom: 84px;
	margin-top: 0;
	margin-bottom: 0;
}
/* The land photo sits against its column's inner edge, not centred in it. */
.eyh-land .wp-block-image.is-style-round-cream {
	margin-left: auto;
	margin-right: 25px;
}
.eyh-land-heading.wp-block-heading {
	position: relative;
	padding-left: 51px;
	color: var(--eyh-teal-deep);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 4px;
}
.eyh-land-heading.wp-block-heading::before {
	content: "";
	position: absolute;
	left: 0;
	top: -12px;
	width: 35px;
	height: 44px;
	background-color: var(--eyh-gold-deep);
	-webkit-mask: url("assets/images/leaf.svg?v=2") no-repeat center / contain;
	mask: url("assets/images/leaf.svg?v=2") no-repeat center / contain;
}
.eyh-land-body.wp-block-paragraph,
p.eyh-land-body {
	padding-left: 51px;
	color: #000;
	font-size: 15px;
	line-height: 1.35;
	margin: 0;
}

/* ---------------- Info cards ---------------- */
.eyh-info { margin-top: 60px; }
.eyh-info-card {
	background: var(--eyh-cream);
	border: 2px solid #e9dfac;
	border-radius: 12px;
	padding: 26px 28px;
	box-shadow: 0 4px 10px -4px rgba(58, 63, 100, 0.15);
}
.eyh-info-card h3 {
	color: var(--eyh-teal);
	font-size: 22px;
	margin: 0 0 14px;
	font-weight: 700;
	line-height: 1.25;
}
.eyh-info-card p {
	margin: 0;
	color: var(--eyh-navy);
	font-size: 18px;
	line-height: 1.7;
}

/* ---------------- Description ---------------- */
.eyh-description {
	max-width: 760px;
	margin: 50px auto 60px;
	text-align: center;
	color: var(--eyh-navy);
	font-size: 18px;
	line-height: 1.7;
}

/* ---------------- Footer ---------------- */
.eyh-footer {
	background: var(--eyh-teal-deep);
	padding: 46px 0 90px;
}
/* Positioned so the tree mark can be absolutely placed against the same 1160px
   column the links start from, rather than against the viewport. */
.eyh-footer-inner {
	position: relative;
	max-width: var(--eyh-shell);
	margin: 0 auto;
	padding: 0 var(--eyh-gutter);
	box-sizing: border-box;
}
.eyh-footer .eyh-footer-rule.wp-block-separator {
	width: auto;
	border: none;
	border-top: 3px solid var(--eyh-gold-deep);
	opacity: 1;
	margin: 0 0 40px;
}
.eyh-footer .wp-block-navigation { font-weight: 400; }
.eyh-footer .eyh-footer-nav {
	/* The links are their own column, narrow enough that the tree mark beside
	   them is never crowded by a long label. */
	max-width: 620px;
	gap: 0;
}
.eyh-footer .wp-block-navigation-item { margin: 0; }
.eyh-footer a,
.eyh-footer .wp-block-navigation .wp-block-navigation-item__content {
	display: block;
	color: var(--eyh-cream-light);
	text-decoration: none;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	padding: 6px 0;
}
.eyh-footer a:hover,
.eyh-footer .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: #fff;
	text-decoration: underline;
}
/* Cream-on-teal needs its own ring; the browser default is nearly invisible
   against the footer's fill. */
.eyh-footer a:focus-visible {
	outline: 3px solid var(--eyh-cream-light);
	outline-offset: 3px;
}

/* A background image rather than a mask. The mark is always cream, so there is
   nothing to recolour — and Chrome drops the clip-path references inside an SVG
   when it is loaded as a mask image, which collapses the canopy into blocks.
   Ratio matches the artwork (250 x 237). */
.eyh-footer-tree {
	position: absolute;
	right: var(--eyh-gutter);
	bottom: -16px;
	width: 250px;
	aspect-ratio: 250 / 237;
	background: url("assets/images/tree.svg?v=2") no-repeat center / contain;
	pointer-events: none;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
	.eyh-header { padding: 12px 20px; }
	.eyh-hero-section,
	.eyh-hero { min-height: 0; }
	/* Flex column with an explicit order rather than the source order: the
	   cut-out comes first in the markup because it sits left of the headline on
	   desktop, but stacked it would push 200px of photo above the first words. */
	.eyh-hero { padding: 34px 20px 0; display: flex; flex-direction: column; }
	.eyh-hero-inner { order: 1; }
	.eyh-hero-inner { flex-wrap: wrap; justify-content: center; gap: 28px; }
	.eyh-hero-image.wp-block-image,
	.eyh-hero-image.wp-block-eyhub-hero-slideshow { width: min(240px, 60vw); }
	.eyh-hero-inner .eyh-hero-content { max-width: none; margin: 0; text-align: center; }
	.eyh-hero-content .eyh-cta-row { justify-content: center !important; }
	/* The cut-out returns to the flow below the headline: at this width there
	   is no column beside it to stand in without colliding with the text. */
	.eyh-hero-cutout.wp-block-image {
		position: static;
		order: 2;
		width: min(300px, 68vw);
		margin: 18px auto 0;
	}
	.eyh-hero-sub { font-size: 18px; }

	.eyh-welcome.wp-block-heading { margin-top: 40px; margin-bottom: 34px; }
	.eyh-intro.wp-block-columns { gap: 34px; margin-bottom: 48px; }
	.eyh-leaf-list { margin-left: 0; }
	.eyh-leaf-list li { padding-left: 40px; }
	.eyh-leaf-list li::before { width: 25px; height: 31px; top: 3px; }
	.eyh-leaf-list li:not(:last-child)::after { left: 40px; }
	.wp-block-image.is-style-round-cream::before { transform: translate(16px, 16px); }
	.eyh-cta-row.wp-block-columns { gap: 24px; margin-bottom: 48px; }
	.eyh-partner-logos { gap: 30px 50px; padding-top: 32px; padding-bottom: 32px; }
	.eyh-partner-logos img { height: 52px; }
	.eyh-partner-logos .eyh-logo-211 img { height: 38px; }
	.eyh-partner-logos .eyh-logo-ecf img { height: 48px; }
	.eyh-land.wp-block-columns { gap: 26px; padding-top: 36px; padding-bottom: 36px; }
	.eyh-land-heading.wp-block-heading,
	p.eyh-land-body { padding-left: 40px; }
	.eyh-land-heading.wp-block-heading::before { width: 25px; height: 31px; top: -6px; }

	.eyh-footer { padding: 34px 0 46px; }
	.eyh-footer .eyh-footer-rule.wp-block-separator { margin-bottom: 26px; }
	.eyh-footer a,
	.eyh-footer .wp-block-navigation .wp-block-navigation-item__content { font-size: 17px; }
	/* Below the link column rather than beside it, and smaller — at this width
	   there is no room to its right. */
	.eyh-footer-tree {
		position: static;
		width: 150px;
		margin: 30px 0 0 auto;
	}
}

@media (max-width: 900px) {
	.eyh-page-hero { padding: 40px 20px 0; }
	.eyh-page-hero-inner { flex-wrap: wrap; justify-content: center; text-align: center; }
	.eyh-page-hero-image.wp-block-image { width: min(200px, 55vw); }
	.eyh-page-hero-section .eyh-faq-wrap { margin-top: 24px; }
	.eyh-faq-card { padding: 6px 20px; }
}

@media (max-width: 900px) {
	.eyh-content-hero-section { padding: 40px 20px 30px; }
	.eyh-content-hero.is-nowrap { flex-wrap: wrap; justify-content: center; text-align: center; }
	.eyh-content-hero .eyh-content-title.wp-block-post-title { max-width: 100%; }
	.eyh-content-hero-image.wp-block-post-featured-image { width: min(160px, 45vw); margin-bottom: 0; }
	.eyh-content-hero-section .eyh-content-divider.wp-block-separator { margin-top: 24px !important; }
	.eyh-content-body-wrap { padding: 30px 20px 40px; }
}