/*!
 * All-In-One-Coach — Coach Header (invisible at rest, sticky + glassy once scrolled)
 */

.aioc-header {
	--aioc-header-h: 78px;
	--aioc-header-pad: 56px;
	--aioc-header-bg: rgba(237, 227, 216, 0.82);
	--aioc-header-border: rgba(94, 17, 15, 0.12);
	--aioc-header-blur: 14px;
	--aioc-header-progress: var(--aioc-maroon);
	--aioc-nav-fg: #2a1f1b;
	--aioc-nav-fg-hover: var(--aioc-maroon);
	--aioc-nav-gap: 34px;
	--aioc-panel-bg: var(--aioc-cream);
	--aioc-logo-w: 46px;

	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: 9990;
	font-family: var(--aioc-font-body);

	/* On load the bar is present but completely transparent: it reads as part
	   of the hero. The background only arrives once the page is scrolled. */
	background-color: transparent;
	border-block-end: 1px solid transparent;
	transform: translate3d(0, 0, 0);
	transition:
		transform 0.62s var(--aioc-ease-out),
		background-color 0.5s linear,
		border-color 0.5s linear,
		box-shadow 0.5s linear,
		backdrop-filter 0.5s linear,
		-webkit-backdrop-filter 0.5s linear;
	will-change: transform;
}

/* Scrolled past the threshold: glass bar. */
.aioc-header.is-stuck {
	background-color: var(--aioc-header-bg);
	border-block-end-color: var(--aioc-header-border);
	box-shadow: 0 18px 40px -34px rgba(23, 19, 19, 0.55);
	backdrop-filter: blur(var(--aioc-header-blur)) saturate(1.4);
	-webkit-backdrop-filter: blur(var(--aioc-header-blur)) saturate(1.4);
}

/* Retreating while the visitor scrolls down. */
.aioc-header.is-hidden {
	transform: translate3d(0, -101%, 0);
}

/* Keep it usable while a keyboard user tabs into it. */
.aioc-header:focus-within,
.aioc-header.is-open {
	transform: translate3d(0, 0, 0);
}

.aioc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 100%;
	max-width: var(--aioc-shell-max);
	margin-inline: auto;
	min-height: var(--aioc-header-h);
	padding-inline: var(--aioc-header-pad, var(--aioc-shell-gut));
	line-height: normal;
}

/* ------------------------------------------------------------------ Brand */

.aioc-header__brand {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.aioc-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: var(--aioc-nav-fg);
	transition: opacity 0.35s var(--aioc-ease-out);
}

.aioc-header__logo:hover {
	opacity: 0.72;
}

.aioc-header__logo img {
	display: block;
	width: var(--aioc-logo-w);
	height: auto;
}

.aioc-header__logo-text {
	font-family: var(--aioc-font-display);
	font-size: 20px;
	letter-spacing: -0.01em;
}

/* ------------------------------------------------------------------- Nav */

.aioc-header__nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: flex-end;
}

.aioc-menu {
	display: flex;
	align-items: center;
	gap: var(--aioc-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.aioc-menu__item,
.aioc-menu > li {
	position: relative;
	list-style: none;
}

.aioc-navlink,
.aioc-menu--wp a {
	position: relative;
	display: inline-block;
	color: var(--aioc-nav-fg);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.35s var(--aioc-ease-out);
}

.aioc-navlink:hover,
.aioc-menu--wp a:hover,
.aioc-navlink:focus-visible {
	color: var(--aioc-nav-fg-hover);
}

.aioc-navlink__inner {
	position: relative;
	display: block;
	overflow: hidden;
}

.aioc-navlink__text {
	display: block;
	transition: transform 0.5s var(--aioc-ease-inout);
}

.aioc-navlink__text--ghost {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	transform: translate3d(0, 110%, 0);
}

.aioc-header--hover-swap .aioc-navlink:hover .aioc-navlink__text,
.aioc-header--hover-swap .aioc-navlink:focus-visible .aioc-navlink__text {
	transform: translate3d(0, -110%, 0);
}

.aioc-header--hover-swap .aioc-navlink:hover .aioc-navlink__text--ghost,
.aioc-header--hover-swap .aioc-navlink:focus-visible .aioc-navlink__text--ghost {
	transform: translate3d(0, 0, 0);
}

.aioc-header--hover-underline .aioc-navlink__text--ghost {
	display: none;
}

.aioc-header--hover-underline .aioc-navlink::after,
.aioc-header--hover-underline .aioc-menu--wp a::after {
	content: "";
	position: absolute;
	inset-block-end: -5px;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
	background-color: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.45s var(--aioc-ease-inout);
}

[dir="rtl"] .aioc-header--hover-underline .aioc-navlink::after,
[dir="rtl"] .aioc-header--hover-underline .aioc-menu--wp a::after {
	transform-origin: right center;
}

.aioc-header--hover-underline .aioc-navlink:hover::after,
.aioc-header--hover-underline .aioc-navlink:focus-visible::after,
.aioc-header--hover-underline .aioc-menu--wp a:hover::after {
	transform: scaleX(1);
}

.aioc-header--hover-none .aioc-navlink__text--ghost {
	display: none;
}

/* Depth-2 submenu for WordPress menus. */
.aioc-menu--wp .sub-menu {
	position: absolute;
	inset-block-start: calc(100% + 14px);
	inset-inline-start: 0;
	z-index: 5;
	min-width: 210px;
	margin: 0;
	padding: 12px;
	list-style: none;
	border-radius: 14px;
	background-color: var(--aioc-panel-bg);
	box-shadow: 0 24px 48px -24px rgba(23, 19, 19, 0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.3s var(--aioc-ease-out), transform 0.3s var(--aioc-ease-out), visibility 0s linear 0.3s;
}

.aioc-menu--wp li:hover > .sub-menu,
.aioc-menu--wp li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}

.aioc-menu--wp .sub-menu a {
	display: block;
	padding: 9px 10px;
	letter-spacing: 0.06em;
}

/* --------------------------------------------------------------- Actions */

.aioc-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 0 0 auto;
	margin-inline-start: 28px;
}

.aioc-header .aioc-btn {
	font-size: 11px;
}

/* ---------------------------------------------------------------- Burger */

.aioc-burger {
	display: none;
	position: relative;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--aioc-header-border);
	border-radius: 50%;
	background: transparent;
	color: var(--aioc-nav-fg);
	cursor: pointer;
	transition: background-color 0.35s var(--aioc-ease-out);
}

.aioc-burger:hover {
	background-color: rgba(94, 17, 15, 0.07);
}

.aioc-burger:focus-visible {
	outline: 2px solid var(--aioc-nav-fg-hover);
	outline-offset: 2px;
}

.aioc-burger__box {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.aioc-burger__line {
	display: block;
	width: 18px;
	height: 1.5px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform 0.45s var(--aioc-ease-inout), opacity 0.3s linear;
}

.aioc-burger[aria-expanded="true"] .aioc-burger__line:first-child {
	transform: translateY(3.25px) rotate(45deg);
}

.aioc-burger[aria-expanded="true"] .aioc-burger__line:last-child {
	transform: translateY(-3.25px) rotate(-45deg);
}

/* ------------------------------------------------- Full-screen menu overlay */

/* The burger opens a full page rather than a drawer under the bar: on a phone
   a drawer competes with the page behind it, and a full sheet gives the links
   room to be read at a glance. */
/* .aioc-header carries `transform` and `will-change: transform` for its
   hide-on-scroll, and either one makes it the containing block for a fixed
   child — the sheet sized itself to the 58px bar instead of the viewport. The
   bar is pinned open anyway while the menu is showing, so it can give both up
   for the duration. */
.aioc-header.is-open {
	transform: none;
	will-change: auto;
}

.aioc-header__panel {
	position: fixed;
	inset: 0;
	/* dvh so the sheet is not cut by a mobile browser's collapsing toolbar. */
	height: 100dvh;
	z-index: 1;
	max-height: none;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--aioc-panel-bg);
	border: 0;
	opacity: 0;
	visibility: hidden;
	/* Wipes down from the top edge rather than fading, so it reads as a sheet
	   arriving rather than the page dissolving. */
	clip-path: inset(0 0 100% 0);
	transition:
		clip-path 0.7s var(--aioc-ease-inout),
		opacity 0.35s linear,
		visibility 0s linear 0.7s;
}

/* The bar itself stays above the sheet so the burger is always reachable. */
.aioc-header__inner {
	position: relative;
	z-index: 2;
}

.aioc-header__panel[hidden] {
	display: none;
}

.aioc-header__panel.is-open {
	opacity: 1;
	visibility: visible;
	clip-path: inset(0 0 0 0);
	transition:
		clip-path 0.7s var(--aioc-ease-inout),
		opacity 0.25s linear,
		visibility 0s;
}

.aioc-header__panel-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	min-height: 100%;
	text-align: center;
	/* Clears the bar, which floats above the sheet. */
	/* Top and bottom match so `justify-content: center` centres the block on
	   the screen rather than in the space left under the bar. */
	padding:
		calc(var(--aioc-header-h-m, 66px) + 28px)
		var(--aioc-header-pad-m, 10px);
}

.aioc-menu--panel {
	flex-direction: column;
	align-items: center;
	gap: 6px;
	width: 100%;
}

/* Each row is its own mask; the link slides up from behind it. */
.aioc-menu--panel .aioc-menu__item {
	overflow: hidden;
	opacity: 1;
	transform: none;
	transition: none;
}

.aioc-menu--panel .aioc-navlink {
	transform: translate3d(0, 110%, 0);
	transition: transform 0.75s var(--aioc-ease-out);
}

.aioc-header__panel.is-open .aioc-menu--panel .aioc-navlink {
	transform: translate3d(0, 0, 0);
}

.aioc-menu--panel .aioc-menu__item:nth-child(1) .aioc-navlink { transition-delay: 0.12s; }
.aioc-menu--panel .aioc-menu__item:nth-child(2) .aioc-navlink { transition-delay: 0.19s; }
.aioc-menu--panel .aioc-menu__item:nth-child(3) .aioc-navlink { transition-delay: 0.26s; }
.aioc-menu--panel .aioc-menu__item:nth-child(4) .aioc-navlink { transition-delay: 0.33s; }
.aioc-menu--panel .aioc-menu__item:nth-child(5) .aioc-navlink { transition-delay: 0.40s; }
.aioc-menu--panel .aioc-menu__item:nth-child(n + 6) .aioc-navlink { transition-delay: 0.47s; }

/* The CTA follows the last link in. */
.aioc-header__panel .aioc-btn {
	/* Centred rather than edge to edge, to sit with the centred links. */
	width: 100%;
	max-width: 320px;
	opacity: 0;
	transform: translate3d(0, 16px, 0);
	transition:
		opacity 0.5s var(--aioc-ease-out) 0.5s,
		transform 0.5s var(--aioc-ease-out) 0.5s;
}

.aioc-header__panel.is-open .aioc-btn {
	opacity: 1;
	transform: translate3d(0, 0, 0);
}

.aioc-menu--panel .aioc-navlink {
	display: block;
	padding: 10px 0;
	font-family: var(--aioc-font-display);
	font-size: clamp(1.25rem, 5.5vw, 1.6rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	text-align: center;
	text-transform: none;
	/* No rules between the links: the spacing does the separating. */
	border-block-end: 0;
}

/* -------------------------------------------------------------- Progress */

.aioc-header__progress {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	height: 2px;
	overflow: hidden;
	pointer-events: none;
}

.aioc-header__progress-bar {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--aioc-header-progress);
	transform: scaleX(var(--aioc-p, 0));
	transform-origin: left center;
	will-change: transform;
}

[dir="rtl"] .aioc-header__progress-bar {
	transform-origin: right center;
}

/* ----------------------------------------------------------- Breakpoints */

.aioc-header.is-compact .aioc-header__nav,
.aioc-header.is-compact .aioc-header__cta {
	display: none;
}

.aioc-header.is-compact .aioc-burger {
	display: block;
}

@media (max-width: 1024px) {
	.aioc-header {
		--aioc-header-pad: 22px;
		--aioc-header-h: 66px;
	}
}

@media (max-width: 767px) {
	/* Setting the property, not redefining --aioc-header-h/--aioc-header-pad:
	   those arrive inline on the element and win over any stylesheet rule. */
	.aioc-header__inner {
		min-height: var(--aioc-header-h-m, 66px);
		padding-inline: var(--aioc-header-pad-m, 10px);
	}

	.aioc-header__panel-inner {
		padding-inline: var(--aioc-header-pad-m, 10px);
	}

	.aioc-header__logo img {
		width: min(var(--aioc-logo-w), 38px);
	}

	.aioc-header__actions {
		margin-inline-start: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.aioc-header,
	.aioc-header__panel,
	.aioc-menu--panel .aioc-menu__item,
	.aioc-burger__line {
		transition-duration: 0.01ms !important;
	}
}