/* =========================================================
   Paces School — custom header
   Top branding bar (#FDE9F4, 200px) + white nav bar (92px)
   Font: Lexend. Pink #E92593, secondary #5b62a4.
   ========================================================= */

:root {
	--paces-pink: #e92593;
	--paces-blue: #5b62a4;
	--paces-top-bg: #fde9f4;
	--paces-bottom-bg: #ffffff;
	--paces-divider: rgba(233, 37, 147, 0.35);
	--paces-submenu-bg: #ffffff;
	--paces-submenu-line: #f3d7e7;
	--paces-font: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--paces-maxw: 1600px;
}

.paces-header {
	position: relative;
	z-index: 1000;
	font-family: var(--paces-font);
}

.paces-header *,
.paces-header *::before,
.paces-header *::after {
	box-sizing: border-box;
}

.paces-header button {
	font-family: inherit;
}

/* ---------------------------------------------------------
   TOP — branding bar
   --------------------------------------------------------- */
.paces-header__top {
	display: flex;
	align-items: center;
	min-height: 200px;
	background: var(--paces-top-bg);
}

.paces-header__top-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 34px;
	width: 100%;
	max-width: var(--paces-maxw);
	margin: 0 auto;
	padding: 16px 24px;
}

.paces-header__logo {
	display: block;
	flex: 0 0 auto;
	line-height: 0;
}

.paces-header__logo img {
	display: block;
	width: 198px;
	height: 136px;
	object-fit: contain;
}

/* Text fallback shown only until the real logo image is uploaded */
.paces-header__logo-placeholder {
	display: inline-block;
	width: 198px;
	height: 136px;
	line-height: 136px;
	text-align: center;
	font-size: 44px;
	font-weight: 700;
	color: var(--paces-pink);
}

.paces-header__divider {
	flex: 0 0 auto;
	width: 2px;
	height: 112px;
	background: var(--paces-divider);
}

.paces-header__titles {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.paces-header__title {
	margin: 0;
	color: var(--paces-pink);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.2px;
}

.paces-header__tagline {
	margin: 0;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.2px;
}

.paces-header__tagline .is-pink {
	color: var(--paces-pink);
}

.paces-header__tagline .is-blue {
	color: var(--paces-blue);
}

/* ---------------------------------------------------------
   BOTTOM — navigation bar
   --------------------------------------------------------- */
.paces-header__bottom {
	display: flex;
	align-items: center;
	min-height: 92px;
	background: var(--paces-bottom-bg);
	border-bottom: 2px solid var(--paces-pink);
}

.paces-header__bottom-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	width: 100%;
	max-width: var(--paces-maxw);
	margin: 0 auto;
	padding: 0 24px;
}

.paces-header__bar {
	display: flex;
	align-items: center;
	gap: 40px;
}

/* ---- Home icon (sits to the left of the menu) ---- */
.paces-header__home {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--paces-pink);
	transition: opacity 0.15s ease, width 0.25s ease, height 0.25s ease;
}

.paces-header__home img {
	display: block;
	width: 100%;
	height: 100%;
}

.paces-header__home:hover,
.paces-header__home:focus-visible {
	opacity: 0.65;
}

/* Slightly smaller home + search icons on desktop (they stay 40px on mobile). */
@media (min-width: 993px) {
	.paces-header .paces-header__home,
	.paces-header .paces-header__search-toggle,
	.paces-header .paces-header__search-toggle svg {
		width: 30px;
		height: 30px;
	}
}

/* ---- Primary menu ---- */
.paces-nav__menu {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.paces-nav__menu li {
	position: relative;
}

.paces-nav__menu a {
	display: block;
	padding: 10px 14px;
	color: var(--paces-pink);
	font-size: 18px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 0.15s ease, padding 0.2s ease, font-size 0.2s ease;
}

.paces-nav__menu a:hover,
.paces-nav__menu a:focus-visible {
	opacity: 0.65;
}

/* Dropdown indicator (chevron) on parent items */
.paces-nav__menu .menu-item-has-children > a {
	padding-right: 30px;
}

.paces-nav__menu .menu-item-has-children > a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	background: url("../../images/dropdown-icon.svg") no-repeat center;
	background-size: contain;
	transition: transform 0.2s ease;
}

/* ---- Sub-menus ---- */
.paces-nav__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--paces-submenu-bg);
	border: 1px solid var(--paces-submenu-line);
	border-top: 3px solid var(--paces-pink);
	border-radius: 0 0 8px 8px;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
	z-index: 50;
}

.paces-nav__menu .sub-menu a {
	padding: 9px 22px;
	color: #4a4a4a;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
	white-space: normal;
}

.paces-nav__menu .sub-menu a:hover,
.paces-nav__menu .sub-menu a:focus-visible {
	color: var(--paces-pink);
	opacity: 1;
}

/* Second level appears to the side */
.paces-nav__menu .sub-menu .sub-menu {
	top: -8px;
	left: 100%;
	border-top: 1px solid var(--paces-submenu-line);
	border-radius: 0 8px 8px 0;
}

.paces-nav__menu .sub-menu .menu-item-has-children > a::after {
	right: 16px;
	transform: rotate(-90deg);
}

/* ---- CTA buttons ---- */
.paces-actions__menu {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.paces-actions__menu a {
	display: inline-block;
	padding: 11px 22px;
	border: 2px solid var(--paces-pink);
	border-radius: 6px;
	color: var(--paces-pink);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, color 0.15s ease, padding 0.2s ease, font-size 0.2s ease;
}

.paces-actions__menu a:hover,
.paces-actions__menu a:focus-visible {
	background: var(--paces-pink);
	color: #ffffff;
}

/* Submenu toggle button + hamburger are mobile-only (hidden by default) */
.paces-submenu-toggle {
	display: none;
}

.paces-header__toggle {
	display: none;
}

/* ---------------------------------------------------------
   DESKTOP dropdown reveal (hover + keyboard focus)
   --------------------------------------------------------- */
@media (min-width: 993px) {
	.paces-nav__menu li:hover > .sub-menu,
	.paces-nav__menu li:focus-within > .sub-menu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}

	.paces-nav__menu .sub-menu .sub-menu {
		transform: translateX(6px);
	}

	.paces-nav__menu .sub-menu li:hover > .sub-menu,
	.paces-nav__menu .sub-menu li:focus-within > .sub-menu {
		transform: translateX(0);
	}

	/* Top-level chevron flips up when open */
	.paces-nav__menu > .menu-item-has-children:hover > a::after,
	.paces-nav__menu > .menu-item-has-children:focus-within > a::after {
		transform: rotate(180deg);
	}
}

/* ---------------------------------------------------------
   MOBILE / TABLET  (≤ 992px)
   --------------------------------------------------------- */
@media (max-width: 992px) {
	.paces-header__top {
		min-height: 0;
	}

	.paces-header__top-inner {
		gap: 18px;
		padding: 16px;
	}

	.paces-header__logo img,
	.paces-header__logo-placeholder {
		width: 120px;
		height: auto;
	}

	.paces-header__logo-placeholder {
		height: 82px;
		line-height: 82px;
		font-size: 30px;
	}

	.paces-header__divider {
		height: 72px;
	}

	.paces-header__title {
		font-size: 24px;
	}

	.paces-header__tagline {
		font-size: 13px;
	}

	/* Put each "Blue Pink." phrase on its own line so the alternating colours
	   no longer break awkwardly mid-phrase as the text wraps. Desktop is
	   unaffected — these wrappers stay inline there. */
	.paces-header__tagline-part {
		display: block;
	}

	.paces-header__bottom {
		min-height: 64px;
	}

	.paces-header__bottom-inner {
		justify-content: flex-end;
		gap: 14px;
	}

	/* Pin the home icon to the far left; hamburger + search stay on the right. */
	.paces-header__home {
		margin-right: auto;
	}

	/* Hamburger */
	.paces-header__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		padding: 0;
		background: transparent;
		border: 2px solid var(--paces-pink);
		border-radius: 6px;
		cursor: pointer;
	}

	/* Keep the toggle transparent in every state — the parent theme's default
	   button styling otherwise paints a background on hover/focus/active. */
	.paces-header__toggle:hover,
	.paces-header__toggle:focus,
	.paces-header__toggle:focus-visible,
	.paces-header__toggle:active,
	.paces-header__toggle[aria-expanded="true"] {
		background: transparent;
		box-shadow: none;
	}

	.paces-header__toggle-bar,
	.paces-header__toggle-bar::before,
	.paces-header__toggle-bar::after {
		display: block;
		width: 22px;
		height: 2px;
		background: var(--paces-pink);
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.paces-header__toggle-bar {
		position: relative;
	}

	.paces-header__toggle-bar::before,
	.paces-header__toggle-bar::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.paces-header__toggle-bar::before {
		top: -7px;
	}

	.paces-header__toggle-bar::after {
		top: 7px;
	}

	.paces-header__toggle[aria-expanded="true"] .paces-header__toggle-bar {
		background: transparent;
	}

	.paces-header__toggle[aria-expanded="true"] .paces-header__toggle-bar::before {
		top: 0;
		transform: rotate(45deg);
	}

	.paces-header__toggle[aria-expanded="true"] .paces-header__toggle-bar::after {
		top: 0;
		transform: rotate(-45deg);
	}

	/* Collapsible panel */
	.paces-header__bar {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 60;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: 0;
		overflow: hidden;
		visibility: hidden;
		background: #ffffff;
		border-bottom: 2px solid var(--paces-pink);
		box-shadow: 0 18px 30px rgba(0, 0, 0, 0.12);
		transition: max-height 0.28s ease, visibility 0.28s ease;
	}

	.paces-header.is-open .paces-header__bar {
		max-height: 85vh;
		overflow-y: auto;
		visibility: visible;
	}

	.paces-nav__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.paces-nav__menu li {
		border-bottom: 1px solid var(--paces-submenu-line);
	}

	.paces-nav__menu a {
		padding: 14px 20px;
		font-size: 16px;
	}

	/* Use the dedicated toggle button's chevron on mobile, not the ::after */
	.paces-nav__menu .menu-item-has-children > a {
		padding-right: 64px;
	}

	.paces-nav__menu .menu-item-has-children > a::after {
		display: none;
	}

	.paces-submenu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 54px;
		height: 50px;
		padding: 0;
		background: transparent;
		border: 0;
		border-left: 1px solid var(--paces-submenu-line);
		cursor: pointer;
	}

	/* Keep the toggle transparent in every state — the parent theme's default
	   button styling otherwise paints a background on hover/focus/active. */
	.paces-submenu-toggle:hover,
	.paces-submenu-toggle:focus,
	.paces-submenu-toggle:focus-visible,
	.paces-submenu-toggle:active,
	.paces-submenu-toggle[aria-expanded="true"] {
		background: transparent;
		box-shadow: none;
	}

	.paces-submenu-toggle::after {
		content: "";
		width: 16px;
		height: 16px;
		background: url("../../images/dropdown-icon.svg") no-repeat center;
		background-size: contain;
		transition: transform 0.2s ease;
	}

	.paces-submenu-toggle[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}

	/* Mobile sub-menus expand inline (accordion) */
	.paces-nav__menu .sub-menu {
		position: static;
		min-width: 0;
		padding: 0;
		max-height: 0;
		overflow: hidden;
		opacity: 1;
		visibility: visible;
		transform: none;
		background: #fbeaf4;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		transition: max-height 0.28s ease;
	}

	.paces-nav__menu li.is-expanded > .sub-menu {
		max-height: 1200px;
	}

	.paces-nav__menu .sub-menu a {
		padding: 12px 20px 12px 34px;
	}

	.paces-nav__menu .sub-menu .sub-menu a {
		padding-left: 48px;
	}

	/* Buttons stack full width inside the panel */
	.paces-actions {
		padding: 16px 20px 20px;
	}

	.paces-actions__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.paces-actions__menu a {
		text-align: center;
	}
}

/* ---------------------------------------------------------
   STICKY bottom bar
   Sticks to the top once the page is scrolled past the top branding bar and
   gains an 80% translucent, blurred backdrop. Toggled by .is-stuck (added
   from assets/js/paces-header.js). The spacer reserves the bar's space so the
   page doesn't jump when the bar leaves normal flow.

   When stuck the bar also SHRINKS for a more compact scrolled state. This is
   safe from layout shift because the stuck bar is position:fixed (out of flow)
   and the spacer keeps the bar's ORIGINAL, un-stuck height reserved — so the
   page content never reflows regardless of the shrunken bar's size.
   --------------------------------------------------------- */
.paces-header__bottom {
	transition: min-height 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, -webkit-backdrop-filter 0.25s ease, backdrop-filter 0.25s ease;
}

.paces-header__spacer {
	height: 0;
}

.paces-header.is-stuck .paces-header__bottom {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background: rgba(255, 255, 255, 0.8);
	-webkit-backdrop-filter: blur(40px);
	backdrop-filter: blur(40px);
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
}

/* The bar first sticks at full size (.is-stuck). Only after scrolling a further
   100px does .is-condensed get added (from paces-header.js) to shrink it. */
.paces-header.is-condensed .paces-header__bottom {
	min-height: 64px;
}

/* Compact the bar's contents to match the shorter condensed height.
   Desktop only — on mobile the nav is a slide-out panel, so shrinking its rows
   would squash them and stop the fixed-size sub-menu toggle from fitting. */
@media (min-width: 993px) {
	.paces-header.is-condensed .paces-nav__menu a {
		padding-top: 6px;
		padding-bottom: 6px;
		font-size: 16px;
	}

	.paces-header.is-condensed .paces-actions__menu a {
		padding-top: 7px;
		padding-bottom: 7px;
		font-size: 16px;
	}

	.paces-header.is-condensed .paces-header__search-toggle {
		width: 26px;
		height: 26px;
	}

	.paces-header.is-condensed .paces-header__search-toggle svg {
		width: 26px;
		height: 26px;
	}

	.paces-header.is-condensed .paces-header__home {
		width: 26px;
		height: 26px;
	}
}

/* Stay clear of the WordPress admin bar (fixed only at >= 783px) */
@media screen and (min-width: 783px) {
	body.admin-bar .paces-header.is-stuck .paces-header__bottom {
		top: 32px;
	}
}

/* ---------------------------------------------------------
   SITE SEARCH — header toggle + popup
   --------------------------------------------------------- */
/* Sits inline in the nav row, just after the CTA buttons. Never has a
   background in any state — it just grows slightly on hover/focus. */
.paces-header__search-toggle {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--paces-pink);
	cursor: pointer;
	transition: transform 0.15s ease, width 0.25s ease, height 0.25s ease;
}

.paces-header__search-toggle svg {
	width: 40px;
	height: 40px;
	transition: width 0.25s ease, height 0.25s ease;
}

.paces-header__search-toggle:hover,
.paces-header__search-toggle:focus,
.paces-header__search-toggle:focus-visible,
.paces-header__search-toggle:active {
	background: transparent;
	color: var(--paces-pink);
	opacity: 1;
	transform: scale(1.15);
}

.paces-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 120px 20px 20px;
	background: rgba(233, 37, 147, 0.35);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.paces-search-overlay.is-visible {
	opacity: 1;
}

.paces-search-overlay[hidden] {
	display: none;
}

.paces-search-modal {
	position: relative;
	width: 100%;
	max-width: 640px;
	padding: 40px;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
	font-family: var(--paces-font);
	transform: translateY(16px) scale(0.98);
	transition: transform 0.2s ease;
}

.paces-search-overlay.is-visible .paces-search-modal {
	transform: translateY(0) scale(1);
}

/* Elementor's frontend CSS disables EVERY CSS transition when the visitor has
   "reduce motion" enabled at the OS level:

       @media (prefers-reduced-motion: reduce) {
           html * { transition-duration: 0s !important; transition-delay: 0s !important; }
       }

   That editing lives in the Elementor plugin (so it can't be removed there
   without being wiped on update). The header's transitions are deliberate,
   subtle UI feedback, so we re-enable them here — a class-scoped, !important
   rule outranks Elementor's universal-selector rule, and stays limited to the
   header so the rest of the site keeps Elementor's reduced-motion behaviour. */
@media (prefers-reduced-motion: reduce) {
	.paces-header,
	.paces-header *:not(.paces-header__spacer),
	.paces-header *::before,
	.paces-header *::after {
		transition-duration: 0.2s !important;
		transition-delay: 0s !important;
	}
}

/* The sticky spacer reserves the bar's space and MUST resize instantly, never
   animated — otherwise the reserved height grows over ~0.2s while the bar pins
   instantly, and the page visibly jumps. (This was the shift: the reduce-motion
   rule above was giving the spacer a height transition.) Kept out of the rule
   above via :not(), and hard-locked here for good measure. */
.paces-header .paces-header__spacer {
	transition: none !important;
}

.paces-search-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--paces-pink);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.paces-search-modal__close svg {
	width: 24px;
	height: 24px;
}

.paces-search-modal__title {
	margin: 0 0 20px;
	color: var(--paces-pink);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.paces-search-form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--paces-pink);
}

.paces-search-form__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 4px 0;
	background: transparent;
	border: 0;
	outline: 0;
	color: #4a4a4a;
	font-family: var(--paces-font);
	font-size: 20px;
}

.paces-search-form__input::placeholder {
	color: #a9a9a9;
}

.paces-search-form__submit {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--paces-pink);
	cursor: pointer;
}

.paces-search-form__submit svg {
	width: 22px;
	height: 22px;
}

.paces-search-form__submit:hover,
.paces-search-form__submit:focus-visible {
	opacity: 0.65;
}

@media (max-width: 600px) {
	.paces-search-overlay {
		padding: 80px 16px 16px;
	}

	.paces-search-modal {
		padding: 28px 20px;
	}

	.paces-search-modal__title {
		font-size: 20px;
	}

	.paces-search-form__input {
		font-size: 17px;
	}
}