/*
 * Navigation — Main Nav Bar
 * Cornerstones Education theme.
 * Primary accent: Engage orange (#f99d31)
 */

/* ─── WP Admin Bar ───────────────────────────────────────────────────────── */

#wpadminbar,
#wpadminbar .ab-sub-wrapper {
	z-index: 1000001 !important;
}

/* ─── Fixed Header ───────────────────────────────────────────────────────── */

header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000000;
	background-color: #ffffff;
}

.admin-bar header.wp-block-template-part {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part {
		top: 46px;
	}
}

/* ── Compensate for the fixed header so page content isn't hidden beneath it ──
   Measured, not assumed.

   These were hardcoded numbers that had to match the header's real rendered
   bottom edge exactly. Any divergence — and there is at least one, the admin
   bar — puts the top of every page underneath the header.

   --nav-bottom is set by nav-front.js from the header's own offsetHeight plus
   the admin bar's, and re-measured whenever either could change, so it is
   correct by construction: whatever the device, orientation, header height or
   admin bar state, content starts exactly where the header ends.

   The hardcoded values survive as fallbacks, for the moment before the script
   runs and for the case where it never does — and that moment is a painted
   frame, not a technicality. THE FALLBACKS MUST BE GATED ON THE SAME
   CONDITIONS AS THE HEADER'S OWN HEIGHT, or the first paint is wrong and the
   script's correction shows up as a visible jump.

   That is exactly what went wrong on iPad landscape. The nav bar's
   `height: 64px` is gated on `(max-width: 1089px), (any-pointer: coarse)`, so
   a 1180px-wide touch screen gets the 64px header — but these fallbacks were
   gated on width alone, so the same device took the 55px desktop number. Nine
   pixels of the page were under the header until the script ran and pushed it
   down. Every query below now carries the coarse-pointer half too. */
.wp-site-blocks {
	padding-top: var(--header-height, 55px);
}

@media (max-width: 1089px), (any-pointer: coarse) {
	.wp-site-blocks {
		padding-top: var(--header-height, 64px);
	}
}

/* ── Two offsets, and which one goes where ──────────────────────────────────
   The rule above uses --header-height, NOT --nav-bottom, and the difference
   only shows when someone is logged in.

   WordPress emits `html { margin-top: 32px !important }` (46px below 782px)
   whenever the admin bar shows, moving the whole document down by the bar's
   height. This padding lives inside that shifted document, so it only has to
   clear the header itself — adding the bar again put a gap exactly one admin
   bar tall between the header and the top of every page.

   Everything else that references --nav-bottom is position:fixed, sticky, or a
   scroll-margin-top, all of which are measured against the VIEWPORT, where the
   admin bar genuinely is in the way. Those need the full admin bar + header,
   which is what --nav-bottom carries.

   Collapsing the two into one variable is the mistake to avoid: it fixes the
   gap here and drops the dropdown, the nav backdrop, the mobile menu, the
   sticky projects filter bar and the Ofsted modal up behind the header by the
   height of the admin bar. The header's own `top: 32px` above is the same
   distinction seen from the other side — viewport space, so it keeps the bar. */

/* ─── Nav Container ──────────────────────────────────────────────────────── */

.mainnav-container {
	box-shadow: var(--ci-nav-shadow);
	width: 100%;
	background-color: var(--ci-nav-bg);
}

.wp-block-group.mainnav-container,
header .mainnav-container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.mainnav-wrapper {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 2rem;
}

/* Main nav bar — logo left, links right */
.mainnav-item-bar {
	position: relative;
	display: flex !important;
	align-items: stretch !important;
	height: 55px !important;
	gap: 1rem;
	overflow: visible;
}

/* Logo */
.mainnav-logo,
.mainnav-logo figure,
.mainnav-logo .wp-block-image {
	margin: 0;
	padding: 0;
	line-height: 0;
	display: flex;
	align-items: center;
	align-self: center;
}

.mainnav-logo img {
	height: 36px;
	width: auto;
	display: block;
}

/* ─── Hamburger Icon ─────────────────────────────────────────────────────── */

.mainnav-burger-icon {
	display: block;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 999999;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

/* ─── Burger Animation ───────────────────────────────────────────────────── */

.mainnav-burger {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform 400ms;
	user-select: none;
}

.mainnav-burger-rotate.active {
	transform: rotate(45deg);
}

.mainnav-burger-line {
	fill: none;
	stroke: var(--ci-color-navy);
	stroke-width: 5.5;
	stroke-linecap: round;
}

.mainnav-burger-animation .mainnav-burger-top {
	stroke-dasharray: 40 139;
}

.mainnav-burger-animation.active .mainnav-burger-top {
	stroke-dashoffset: -98px;
}

.mainnav-burger-animation .mainnav-burger-bottom {
	stroke-dasharray: 40 180;
}

.mainnav-burger-animation.active .mainnav-burger-bottom {
	stroke-dashoffset: -138px;
}

/* ─── Mobile Menu Panel ──────────────────────────────────────────────────── */

.mainnav-menu-links {
	background: var(--ci-color-white);
	display: flex;
	flex-direction: column;
	width: 100%;
	left: 0;
	padding: 0;
	padding-top: var(--nav-bottom, 64px);
	position: fixed;
	top: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 10000;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	transition: opacity 0.28s ease,
	            pointer-events 0s linear 0.28s;
}

.mainnav-menu-links.active {
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.28s ease;
}

/* ─── Click-outside Overlay ──────────────────────────────────────────────── */

/* Leftover from an older narrow-drawer design (.active was a partial-width
   right-hand strip meant to sit beside the drawer). The panel is full-screen
   now (.mainnav-menu-links, z-index: 10000), so this overlay's z-index
   (previously 999980 — above the panel) rendered it as a dark stripe over
   part of the open menu. Neutralised by keeping it below the panel's
   z-index, so the opaque full-screen panel always covers it regardless of
   its own width. */
.menu-overlay {
	position: fixed;
	top: 0;
	left: 100%;
	width: 0;
	height: 100%;
	background: rgba(0, 0, 0, 0.25);
	transition: left 0.3s ease, width 0.3s ease, opacity 0.3s ease;
	opacity: 0;
	pointer-events: none;
	z-index: 9999;
}

.menu-overlay.active {
	left: 75%;
	width: 25%;
	opacity: 0.5;
	pointer-events: auto;
	cursor: pointer;
}

/* ─── Region pill switcher ───────────────────────────────────────────────── */

.mainnav-region {
	position: relative;
	width: fit-content;
}

.mainnav-region-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 0.375rem;
	padding: 0.4375rem 0.875rem;
	border-radius: 2rem;
	border: 1.5px solid var(--ci-color-border);
	background: none;
	font-family: var(--ci-font-primary);
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1;
	color: var(--ci-color-text);
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.mainnav-region-btn:hover {
	border-color: var(--ci-color-text);
}

.mainnav-region-btn[aria-expanded="true"] {
	border-color: var(--ci-color-navy);
}

.mainnav-region-chevron {
	display: inline-block;
	width: 5px;
	height: 5px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	position: relative;
	top: -1px;
	transition: transform 0.18s ease, top 0.18s ease;
}

.mainnav-region-btn[aria-expanded="true"] .mainnav-region-chevron {
	transform: rotate(-135deg);
	top: 2px;
}

.mainnav-region-dropdown {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--ci-color-white);
	border: 1.5px solid var(--ci-color-border);
	border-radius: 0.75rem;
	list-style: none;
	margin: 0;
	padding: 0.3rem;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	opacity: 0;
	transform: translateY(-6px);
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
	z-index: 1000;
}

.mainnav-region-dropdown.is-open {
	opacity: 1;
	transform: translateY(0);
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.mainnav-region-dropdown li {
	padding: 0 !important;
}

.mainnav-region-option {
	display: block;
	width: 100%;
	padding: 0.4rem 0.75rem;
	border: none;
	background: none;
	text-align: left;
	text-decoration: none;
	font-family: var(--ci-font-primary);
	font-size: 0.9rem;
	font-weight: 500;
	color: var(--ci-color-text);
	border-radius: 0.5rem;
	cursor: pointer;
	transition: background 0.12s ease;
	white-space: nowrap;
}

.mainnav-region-option:hover {
	background: var(--ci-color-light-bg);
}

.mainnav-region-option--active {
	font-weight: 700;
	color: var(--ci-color-navy);
}

/* ─── Action buttons (Book a demo + Login) ───────────────────────────────── */

.mainnav-actions {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin-left: auto !important;
}

.mainnav-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.4375rem 1.125rem;
	border: 1.5px solid transparent;
	border-radius: 2rem;
	font-family: var(--ci-font-primary);
	font-size: 0.9rem;
	line-height: 1;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}

.mainnav-btn--enquire {
	background-color: var(--ci-color-engage);
	color: var(--ci-color-white);
}

.mainnav-btn--enquire:hover {
	background-color: #e08a1f;
}

.mainnav-btn--login {
	background-color: var(--ci-color-innovate);
	color: var(--ci-color-white);
}

.mainnav-btn--login:hover {
	background-color: #437a96;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PRIMARY NAV  (custom desktop nav)
   ═══════════════════════════════════════════════════════════════════════════ */

.mainnav-primary-nav {
	display: none;
	height: 100%;
	align-items: stretch;
}

.mainnav-primary-list {
	display: flex;
	align-items: stretch;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 100%;
}

.mainnav-primary-item {
	display: flex;
	align-items: stretch;
}

.mainnav-primary-btn {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 1rem;
	background: none;
	border: none;
	cursor: pointer;
	font-family: var(--ci-font-primary);
	font-size: 1rem;
	font-weight: 500;
	color: var(--ci-color-text);
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.15s ease;
}

.mainnav-primary-item.is-open > .mainnav-primary-btn {
	color: var(--ci-color-engage);
}

/* ─── Dropdown panel ─────────────────────────────────────────────────────── */

.mainnav-item-bar.is-switching .mainnav-dropdown {
	transition: none !important;
}
.mainnav-item-bar.is-switching .mainnav-primary-item.is-open > .mainnav-dropdown {
	clip-path: inset(0 0 0% 0) !important;
	visibility: visible !important;
	pointer-events: auto !important;
}

.mainnav-dropdown-label,
.mainnav-dropdown-links li,
.mainnav-dropdown-sublinks li,
.mainnav-dropdown-cta {
	opacity: 0;
	transition: opacity 0.15s ease;
}

.mainnav-primary-item.is-open:not(.is-animating) .mainnav-dropdown-label,
.mainnav-primary-item.is-open:not(.is-animating) .mainnav-dropdown-links li,
.mainnav-primary-item.is-open:not(.is-animating) .mainnav-dropdown-sublinks li,
.mainnav-primary-item.is-open:not(.is-animating) .mainnav-dropdown-cta {
	opacity: 1;
}

@keyframes ddItemIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes megaColIn {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0);    }
}

.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-label {
	animation: ddItemIn 0.22s ease forwards 0.18s;
}
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(1) { animation: ddItemIn 0.22s ease forwards 0.22s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(2) { animation: ddItemIn 0.22s ease forwards 0.27s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(3) { animation: ddItemIn 0.22s ease forwards 0.31s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(4) { animation: ddItemIn 0.22s ease forwards 0.35s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(5) { animation: ddItemIn 0.22s ease forwards 0.38s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(6) { animation: ddItemIn 0.22s ease forwards 0.41s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-links li:nth-child(7) { animation: ddItemIn 0.22s ease forwards 0.44s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-sublinks li:nth-child(1) { animation: ddItemIn 0.22s ease forwards 0.27s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-sublinks li:nth-child(2) { animation: ddItemIn 0.22s ease forwards 0.31s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-sublinks li:nth-child(3) { animation: ddItemIn 0.22s ease forwards 0.35s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-sublinks li:nth-child(4) { animation: ddItemIn 0.22s ease forwards 0.31s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-sublinks li:nth-child(5) { animation: ddItemIn 0.22s ease forwards 0.35s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-sublinks li:nth-child(6) { animation: ddItemIn 0.22s ease forwards 0.38s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-cta { animation: ddItemIn 0.22s ease forwards 0.47s; }

.mainnav-dropdown {
	position: fixed;
	top: var(--nav-bottom, 55px);
	left: 0;
	right: 0;
	background: var(--ci-color-white);
	box-shadow: 0 16px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
	z-index: 998;
	visibility: hidden;
	pointer-events: none;
	clip-path: inset(0 0 100% 0);
	transition: clip-path 0.42s cubic-bezier(0.4, 0, 0.2, 1),
	            visibility 0s linear 0.42s;
}

.mainnav-primary-item.is-open > .mainnav-dropdown {
	visibility: visible;
	pointer-events: auto;
	clip-path: inset(0 0 0% 0);
	transition: clip-path 0.42s cubic-bezier(0.4, 0, 0.2, 1),
	            visibility 0s;
}

.mainnav-dropdown-inner {
	padding: 1.5rem 2rem 2rem;
	padding-left: var(--logo-left, 2rem);
}

/* ─── Mega menu layout ───────────────────────────────────────────────────── */

.mainnav-dropdown-inner--mega {
	display: flex;
	align-items: flex-start;
	gap: 0;
	padding: 1.75rem 2rem 2rem;
	padding-left: var(--logo-left, 2rem);
}

.mainnav-mega-col {
	display: flex;
	flex-direction: column;
	min-width: 200px;
	padding: 0 2.5rem;
}

.mainnav-mega-col:first-child {
	padding-left: 0;
}

.mainnav-mega-col--cta {
	flex-shrink: 0;
	padding-right: 0;
}

.mainnav-mega-col--cta .mainnav-dropdown-links {
	margin-top: -3px;
}

.mainnav-mega-col--cta .mainnav-dropdown-links a.mainnav-cta-arrow {
	color: var(--ci-color-engage);
}

.mainnav-mega-col--cta .mainnav-dropdown-links a.mainnav-cta-arrow:hover {
	color: var(--ci-color-engage);
	opacity: 0.7;
}

/* Row stagger for mega menu */
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-label        { animation: megaColIn 0.25s ease forwards 0.20s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-links li:nth-child(1) { animation: megaColIn 0.25s ease forwards 0.27s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-links li:nth-child(2) { animation: megaColIn 0.25s ease forwards 0.34s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-links li:nth-child(3) { animation: megaColIn 0.25s ease forwards 0.41s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-links li:nth-child(4) { animation: megaColIn 0.25s ease forwards 0.48s; }
.mainnav-primary-item.is-open.is-animating .mainnav-dropdown-inner--mega .mainnav-dropdown-cta           { animation: megaColIn 0.25s ease forwards 0.55s; }

/* Category label */
.mainnav-dropdown-label {
	display: block;
	font-family: var(--ci-font-primary);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--ci-color-text-muted);
	margin-bottom: 0.35rem;
}

/* Links list */
.mainnav-dropdown-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.mainnav-dropdown-links a {
	display: block;
	padding: 0.3rem 0;
	color: var(--ci-color-navy);
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.3;
	transition: color 0.12s ease;
}

.mainnav-dropdown-links a:hover {
	color: var(--ci-color-engage);
}

.mainnav-dropdown-sublinks {
	list-style: none;
	margin: 0.25rem 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.mainnav-dropdown-sublinks a {
	display: block;
	padding: 0.2rem 0;
	color: var(--ci-color-navy);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.4;
	opacity: 0.75;
	transition: color 0.12s ease, opacity 0.12s ease;
}

.mainnav-dropdown-sublinks a:hover {
	color: var(--ci-color-engage);
	opacity: 1;
}

/* CTA arrow link */
.mainnav-cta-arrow {
	display: block;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ci-color-engage);
	text-decoration: none;
	transition: gap 0.15s ease, opacity 0.12s ease;
}

.mainnav-cta-arrow::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 8px;
	vertical-align: middle;
	position: relative;
	top: -1px;
	transition: transform 0.15s ease;
}

.mainnav-cta-arrow:hover {
	opacity: 0.7;
}

.mainnav-cta-arrow:hover::after {
	transform: rotate(45deg) translate(2px, -2px);
}

/* ─── Tabbed dropdown ────────────────────────────────────────────────────── */

.mainnav-tab-bar {
	display: flex;
	align-items: stretch;
	border-bottom: 1px solid var(--ci-color-border);
	padding: 0 2rem;
	padding-left: var(--logo-left, 2rem);
}

.mainnav-tab {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.25rem;
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	font-family: var(--ci-font-primary);
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--ci-color-text-muted);
	cursor: pointer;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.mainnav-tab:first-child {
	padding-left: 0;
}

.mainnav-tab:hover {
	color: var(--ci-color-navy);
}

.mainnav-tab.is-active {
	color: var(--ci-color-navy);
	border-bottom-color: var(--ci-color-engage);
}

.mainnav-tab-icon {
	flex-shrink: 0;
	opacity: 0.6;
}

.mainnav-tab.is-active .mainnav-tab-icon {
	opacity: 1;
}

.mainnav-tab-panel {
	display: none;
}

.mainnav-tab-panel.is-active {
	display: block;
}

/* Page backdrop */
.nav-backdrop {
	position: fixed;
	top: var(--nav-bottom, 55px);
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.15);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.16s ease-in;
	z-index: 997;
}

.nav-backdrop.active {
	opacity: 1;
	transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE  (max-width: 1089px), (any-pointer: coarse)
   All the mobile menu panel's internal styling (colours, spacing, sub-panel
   sliding, animations) lives in this one block. any-pointer:coarse is true
   on any touchscreen at any width and false on mouse-only desktops, so
   touch devices at iPad landscape width (above 1089px) still get this
   styling instead of an unstyled, functionally-empty panel.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1089px), (any-pointer: coarse) {

	/* ── Press feedback: only for a press that actually happened ─────────────
	   This whole section is scoped to (any-pointer: coarse) as well as narrow
	   widths, so on a phone it is the only nav styling in play — and every
	   state rule in it used to read ":hover, :active". Both are wrong on touch:

	     :hover  a tap leaves the emulated hover stuck on the link afterwards,
	             and a finger that lands on a link to start a scroll picks it
	             up on the way past;
	     :active applies the moment a finger touches down, before any decision
	             to follow the link has been made — so beginning a scroll from
	             a link flashes it orange.

	   Either way the colour appeared without the link ever being followed,
	   which is the opposite of what it is for: it should mean "this is where
	   you tapped, the page is on its way".

	   So the coloured state now hangs off .is-activating, which header.js
	   adds on click — an event that only fires for a completed press on the
	   element, never for a touch that turns into a scroll. Hover is restored
	   below for real pointers, where it has always behaved correctly. */
	@media (hover: hover) and (pointer: fine) {
		.mainnav-mobile-link:hover      { color: var(--ci-color-engage); }
		.mainnav-mobile-cta:hover       { opacity: 0.75; }
		.mainnav-mobile-back:hover      { color: var(--ci-color-navy); }
		.mainnav-mobile-sublink:hover   { color: var(--ci-color-engage); }
		.mainnav-mobile-sublink--nested:hover { opacity: 1; }
	}

	/* The two panel <button>s — .mainnav-mobile-link and .mainnav-mobile-back
	   — carry the same class, but header.js only holds it on them while the
	   finger is down, clearing it on release. They swap the visible panel
	   rather than navigating, so a colour meaning "the page is loading" would
	   have nothing to clear it and would sit there until the menu closed. */
	.mainnav-mobile-link.is-activating {
		color: var(--ci-color-engage);
		transition: none;
	}

	.mainnav-mobile-back.is-activating {
		color: var(--ci-color-navy);
		transition: none;
	}


	.mainnav-container {
		box-shadow: none;
	}

	.mainnav-item-bar {
		padding: 0 !important;
		height: 64px !important;
	}

	.mainnav-actions {
		display: none !important;
	}

	.mainnav-toggler {
		margin-left: auto !important;
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.mainnav-burger-icon {
		position: static;
		transform: none;
	}

	/* ── Sliding panels container ── */
	.mainnav-mobile-panels {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.mainnav-mobile-panel-primary,
	.mainnav-mobile-panel-sub {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		/* auto (not hidden) — without this, any panel taller than the
		   screen just gets clipped with no way to reach the rest of it */
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 1.75rem 2rem 2rem;
		box-sizing: border-box;
		transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
		display: flex;
		flex-direction: column;
	}

	.mainnav-mobile-panel-sub {
		transform: translateX(100%);
	}

	.mainnav-mobile-panels.sub-active .mainnav-mobile-panel-primary {
		transform: translateX(-100%);
	}

	.mainnav-mobile-panel-sub.is-active {
		transform: translateX(0);
	}

	/* ── Primary nav items ── */
	.mainnav-mobile-list {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mainnav-mobile-item,
	.mainnav-mobile-actions {
		opacity: 0;
	}

	@keyframes mobileItemIn {
		from { opacity: 0; }
		to   { opacity: 1; }
	}

	.mainnav-menu-links.active .mainnav-mobile-item:nth-child(1) {
		animation: mobileItemIn 0.28s ease forwards 0.06s;
	}
	.mainnav-menu-links.active .mainnav-mobile-item:nth-child(2) {
		animation: mobileItemIn 0.28s ease forwards 0.10s;
	}
	.mainnav-menu-links.active .mainnav-mobile-item:nth-child(3) {
		animation: mobileItemIn 0.28s ease forwards 0.14s;
	}
	.mainnav-menu-links.active .mainnav-mobile-item:nth-child(4) {
		animation: mobileItemIn 0.28s ease forwards 0.18s;
	}
	.mainnav-menu-links.active .mainnav-mobile-item:nth-child(5) {
		animation: mobileItemIn 0.28s ease forwards 0.22s;
	}
	.mainnav-menu-links.active .mainnav-mobile-actions {
		animation: mobileItemIn 0.28s ease forwards 0.27s;
	}

	.mainnav-mobile-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin: 0;
		padding: 0.65rem 0;
		border: none;
		background: none;
		font-family: var(--ci-font-primary);
		font-size: 1.38rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
		color: var(--ci-color-navy);
		text-align: left;
		cursor: pointer;
		transition: color 0.15s ease;
		/* Without this, tapping shows the browser's default full-box highlight
		   over the whole row — the :active rule below is the only "pressed"
		   feedback we actually want, scoped to the text itself. */
		-webkit-tap-highlight-color: transparent;
	}

	/* ── Mobile actions ── */
	.mainnav-mobile-actions {
		display: flex;
		flex-direction: column;
		margin-top: 0;
	}

	.mainnav-mobile-cta {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		margin-top: 0;
		padding: 0.5rem 0;
		font-size: 1.38rem;
		font-weight: 700;
		color: var(--ci-color-engage);
		text-decoration: none;
		transition: opacity 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}

	/* translateY before the rotate, and only on the vertical: align-items
	   centres this caret's BOX on the line box, and a line box is not where
	   text looks centred.

	   The reference that matters is the X-HEIGHT band, not the ink bounding
	   box. Ink-box centring is dominated by caps and ascenders, which are
	   sparse and visually light; the mass the eye actually reads sits between
	   the baseline and the x-height. For Lato at 22.08px the baseline is
	   26.16px down the line box and the x-height is 11.33px, putting the
	   x-height centre at 20.5px against a line-box centre of 17.66px.

	   So 3px, not the 2px this first carried — 2px was measured to the ink-box
	   centre (19.83px), which still left the caret sitting visibly high.

	   Order matters: translate first, then rotate. Reversed, the translation
	   is applied in the rotated frame and moves the caret diagonally. */
	.mainnav-mobile-cta::after {
		content: '';
		display: inline-block;
		width: 7px;
		height: 7px;
		border-right: 2px solid currentColor;
		border-top: 2px solid currentColor;
		transform: translateY(3px) rotate(45deg);
		flex-shrink: 0;
	}

	.mainnav-mobile-cta--login {
		color: #253d47;
	}

	.mainnav-mobile-cta.is-activating {
		opacity: 0.75;
		/* No transition on the way in. The base rule fades colour over 0.15s,
		   which is fine for hover but wrong here: the browser starts navigating
		   the moment the link is pressed, so a fade that takes 150ms is still
		   only part-way when the page is replaced — the press looked like it did
		   nothing. Landing on the colour immediately is what makes it read as
		   "yes, that one". */
		transition: none;
	}

	/* ── Sub-panel stagger ── */
	.mainnav-mobile-back,
	.mainnav-mobile-group-label,
	.mainnav-mobile-sublist li,
	.mainnav-mobile-panel-sub .mainnav-mobile-cta {
		opacity: 0;
	}

	/* One simple fade-in for all sub-panel content, rather than hand-indexed
	   per-item delays — panels now hold varying numbers of groups/links, so a
	   fixed nth-of-type sequence would silently stop animating (or reveal
	   nothing) once content grew past the indices it was written for. */
	.mainnav-mobile-panel-sub.is-active .mainnav-mobile-back,
	.mainnav-mobile-panel-sub.is-active .mainnav-mobile-group-label,
	.mainnav-mobile-panel-sub.is-active .mainnav-mobile-sublist li,
	.mainnav-mobile-panel-sub.is-active .mainnav-mobile-cta {
		animation: mobileItemIn 0.25s ease forwards 0.1s;
	}

	/* ── Back button ── */
	.mainnav-mobile-back {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		padding: 0;
		margin-bottom: 1.5rem;
		border: none;
		background: none;
		font-family: var(--ci-font-primary);
		font-size: 1.04rem;
		font-weight: 600;
		color: var(--ci-color-text-muted);
		cursor: pointer;
		transition: color 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}

	/* 1px here, against the 3px on .mainnav-mobile-cta::after above, and the
	   difference is which letter the caret is standing next to.

	   A caret is read against its IMMEDIATE neighbour, not the average of the
	   whole word. On the CTAs it trails the word — "Enquire›", "Login›" — so it
	   sits beside a lowercase e and n, and the x-height band is the right
	   reference. This one leads — "‹Back" — so it sits beside a capital B, and
	   pure x-height centring drops it visibly below the letter it is paired
	   with.

	   The numbers at 16.64px, measured down from the top of the 20px line box:
	   cap centre 9.98, x-height centre 11.73. Cap-centred (translateY 0, where
	   this started) read too high; x-height-centred (2px) read too low. 1px
	   puts the caret at 11px, between the two — which is where a word carrying
	   both a cap B and an a-c-k lowercase band actually balances. */
	.mainnav-mobile-back-icon {
		display: inline-block;
		width: 7px;
		height: 7px;
		border-left: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(1px) rotate(45deg);
		flex-shrink: 0;
	}

	/* ── Sub-panel group labels ──────────────────────────────────────────
	   These are the only thing telling you where one group ends and the next
	   begins, and at 0.85rem muted against 1.38rem bold navy links they were
	   the smallest, faintest elements on a panel of sixteen — 62% the size of
	   what they were meant to segment, so the Curriculum panel read as one
	   undifferentiated wall rather than four short lists.

	   1rem puts them back on the 16px floor the rest of the site keeps, and
	   the extra space above each group does more work than the size does: a
	   label with room above it reads as a heading, one crowded against the
	   link before it reads as a caption. Letter-spacing and sentence case
	   follow .mainnav-dropdown-label, the desktop equivalent. */
	.mainnav-mobile-group-label {
		margin: 1.6rem 0 0.35rem;
		font-size: 1rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		color: #4a4a4b;
	}

	.mainnav-mobile-group-label:first-of-type {
		margin-top: 0.5rem;
	}

	/* ── Sub-panel links ── */
	.mainnav-mobile-sublist {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.mainnav-mobile-sublink {
		display: block;
		margin: 0;
		padding: 0.65rem 0;
		font-size: 1.38rem;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -0.01em;
		color: var(--ci-color-navy);
		text-decoration: none;
		transition: color 0.15s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.mainnav-mobile-sublink.is-activating {
		color: var(--ci-color-engage);
		/* No transition on the way in. The base rule fades colour over 0.15s,
		   which is fine for hover but wrong here: the browser starts navigating
		   the moment the link is pressed, so a fade that takes 150ms is still
		   only part-way when the page is replaced — the press looked like it did
		   nothing. Landing on the colour immediately is what makes it read as
		   "yes, that one". */
		transition: none;
	}

	/* ── Nested items — the six single subjects ──────────────────────────
	   Mirrors .mainnav-dropdown-sublinks on desktop, which sets these apart
	   from their parent with weight 400 at 1rem and 0.75 opacity rather than
	   an indent alone. On mobile they were rendering identically to "Our
	   single subject curriculum", so seven rows read as seven peers when they
	   are one product and its six subjects.

	   Two columns, as on desktop. The labels are short — "Geography" is the
	   longest — and it takes the group from six rows to three, which is where
	   most of the length in this panel was going. */
	.mainnav-mobile-sublist--nested {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 1rem;
		margin-top: 0.15rem;
		/* Indents the block as a whole. Applied here rather than to each link
		   so the tap target still starts at the text, not 14px to its left.
		   The indent, the lighter weight and the opacity carry the nesting on
		   their own — there was a rule down this edge as well, which turned
		   out to be one signal too many. */
		padding-left: 0.9rem;
	}

	.mainnav-mobile-sublink--nested {
		/* 0.55rem gives a 38px row. Under the 44px comfort target, but these
		   are deliberately secondary to the 47px bold links around them, and
		   38px still clears the 24px WCAG 2.5.8 minimum with room to spare. */
		padding: 0.55rem 0;
		font-size: 1rem;
		font-weight: 400;
		line-height: 1.3;
		letter-spacing: 0;
		opacity: 0.75;
	}

	.mainnav-mobile-sublink--nested.is-activating {
		opacity: 1;
		/* No transition on the way in. The base rule fades colour over 0.15s,
		   which is fine for hover but wrong here: the browser starts navigating
		   the moment the link is pressed, so a fade that takes 150ms is still
		   only part-way when the page is replaced — the press looked like it did
		   nothing. Landing on the colour immediately is what makes it read as
		   "yes, that one". */
		transition: none;
	}

	/* Reset WP nav list padding inside mobile panel */
	.mainnav-mobile-list li,
	.mainnav-mobile-sublist li {
		border-bottom: none !important;
		padding: 0 !important;
	}

}

/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP  (min-width: 1089px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 1089px) {

	/* These rules assume "wide viewport = desktop = mouse", which breaks on
	   iPad landscape (1180-1366px on most models, above this 1089px
	   breakpoint) where the device is touch-only. Scoped to exclude
	   .is-touch-nav (set on <html> inline in wp_head — see functions.php)
	   so touch devices keep the working hamburger + full-screen mobile
	   panel at any width, instead of losing it with no working replacement
	   (the desktop nav below is hover-driven and unusable via touch). */
	html:not(.is-touch-nav) .mainnav-primary-nav {
		display: flex;
	}

	html:not(.is-touch-nav) .mainnav-burger-icon,
	html:not(.is-touch-nav) .menu-overlay {
		display: none;
	}

	/* Hide mobile panel on desktop (mouse) only */
	html:not(.is-touch-nav) .mainnav-menu-links {
		display: none !important;
	}

}

/* ═══════════════════════════════════════════════════════════════════════════
   SMALL SCREENS  (max-width: 520px)
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 520px) {

	.mainnav-menu-links {
		width: 100%;
	}

	.menu-overlay.active {
		left: 100%;
		width: 0;
	}

}


/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE SUB-PANELS — TWO COLUMNS ON A TABLET

   The hamburger panel is a phone layout shown on a 1180px-wide iPad, because
   the nav switches on touch capability rather than width (see the note on
   html:not(.is-touch-nav) above). That left the Curriculum sub-panel as one
   full-width column running 955px tall inside a 704px box — 251px of it below
   the fold behind a scroll, with half the screen empty beside it.

   GRID, not multi-column. Columns were the obvious tool and they do fit the
   content, but they can only split the source order at a contiguous point:
   Curriculum / Single subject / Specialist / Get started can become
   "1,2 | 3,4" but never "1,2,4 | 3". Putting Specialist alongside while
   Get started stays under the subjects means taking Specialist out of the
   sequence, and only explicit placement can do that.

   That is why the groups gained wrappers in parts/header.html — a flat run of
   <p> label + <ul> list has no "group" element to place.

   Everything is scoped inside the query: the panel is in use below the desktop
   breakpoint or on a coarse pointer — the same pair its own styles use further
   up — and wants two columns only where there is width for them. On a browser
   too old for the `or` syntax the block is skipped and the single-column
   layout stands, which is today's behaviour.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (min-width: 768px) and ((max-width: 1089px) or (any-pointer: coarse)) {

	/* COLUMNS SIZED TO THEIR CONTENT, not to equal shares of the panel.
	   
	   `1fr 1fr` cut a 1116px panel into two 538px halves and put each heading
	   at the start of one. The widest thing in the left column is "Our primary
	   curriculum" at ~375px, so the other 160px became empty track, and the
	   right column started 500px away from text that ended long before it —
	   the two lists read as unrelated rather than as one menu.
	   
	   max-content columns are as wide as their widest line and no wider, and
	   justify-content: start parks the whole set at the left edge, so the gap
	   between columns is the gap you actually asked for. minmax(0, max-content)
	   rather than bare max-content so a long link can still shrink instead of
	   pushing the grid wider than the panel. */
	.mainnav-mobile-panel-sub {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, max-content));
		justify-content: start;
		column-gap: 3rem;
		/* start, so the rows keep their content heights instead of stretching
		   to fill a panel that is always full-viewport tall. */
		align-content: start;
	}

	/* Back spans the full width and takes row 1 on its own, so the first
	   heading in each column starts on the same line as the other's. */
	.mainnav-mobile-back {
		grid-column: 1 / -1;
	}

	/* No explicit placement anywhere in here: auto-flow does the arranging.
	   
	   Two columns fill 1→left, 2→right, 3→left, 4→right; three columns fill a
	   row at a time. Either way the order on screen is the order in the
	   markup, which is the order the menu is written in.

	   An earlier version pinned Specialist with grid-row spans to keep it
	   clear of the other column's row heights. That is all gone. */

	/* Groups are spaced with a margin, NOT row-gap.
	   
	   row-gap applies between every row including the empty implicit ones the
	   span above creates, so a 1.25rem gap became 20 gaps of dead space and
	   pushed the panel nearly 1900px tall. A margin only exists where an
	   element does, so the empty rows collapse to nothing and cost exactly
	   what they should. */
	.mainnav-mobile-group {
		margin-bottom: 1.25rem;
	}

	.mainnav-mobile-group .mainnav-mobile-group-label {
		margin-top: 0;
	}

	/* ── Four columns once there is room for them ──────────────────────────
	   Nested inside the block above so it inherits the coarse-pointer half of
	   the condition and only ever adds columns to a grid that already exists.

	   Four is the most groups any panel has, so at this width nothing wraps:
	   every sub-menu is a single row. That is what removed the last piece of
	   placement CSS from this file. While Curriculum wrapped, "Get started"
	   landed in row two under a row whose height was set by Specialist's six
	   links — 180px below the link it should have followed — and the third
	   group had to span both rows to escape it. With a column of its own there
	   is no second row and no row height to escape, so the span is gone.

	   The panels with fewer groups simply use fewer columns: max-content
	   tracks collapse to zero when nothing is in them and justify-content:
	   start keeps the rest packed left, so Case studies still shows two snug
	   columns rather than two stretched to the panel's edges.

	   1024px is a measured floor, not a round number. The four Curriculum
	   groups are ~789px of content plus three 48px gaps and the panel's 64px
	   of padding — 997px, which clears 1024 by 27px and iPad landscape's
	   1180px by ~180px. iPad portrait at 768px cannot hold it and keeps the
	   two-column layout above. */
	@media (min-width: 1024px) {
		.mainnav-mobile-panel-sub {
			grid-template-columns: repeat(4, minmax(0, max-content));
		}
	}
}