/*
 * Site chrome: header, mobile drawer, footer, scroll-reveal.
 *
 * Consumes the --m1-* tokens from design-system.css, which is enqueued first.
 * Element IDs/classes are wired to header.php, footer.php and assets/js/theme.js.
 *
 * The header and drawer are the King Tide standard drawer, ported from Calgary
 * City Roofing (designs/_reference/mobile-menu-pattern.md). Structure and
 * behaviour are fixed; colours and type are the "Bright" re-skin from
 * designs/massage-thai-spa/assets/css/bright.css (white header, white drawer,
 * shell drawer foot and footer).
 *
 * NOT LOADED IN THE EDITOR — only design-system.css is added via
 * add_editor_style(). That matters for .m1-reveal below: it starts at opacity 0,
 * and if it were visible to the editor canvas every revealed block would be
 * invisible while editing. Keep reveal in this file, not the design system.
 */

/* ---------------------------------------------------------------- header --- */

/* White at 96% over an 8px blur, sticky (so <main> needs no offset). theme.js
   adds .is-stuck past 8px of scroll: a hairline and a faint drop. */
.m1-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, 0.96);
	-webkit-backdrop-filter: saturate(1.1) blur(8px);
	backdrop-filter: saturate(1.1) blur(8px);
	color: var(--m1-ink);
	border-bottom: 1px solid transparent;
	transition: border-color 0.3s var(--m1-ease), box-shadow 0.3s var(--m1-ease);
}

.m1-header.is-stuck {
	border-bottom-color: var(--m1-rule);
	box-shadow: 0 6px 24px -18px rgba(46, 39, 36, 0.35);
}

/* Logged-in users: sit under the admin bar instead of behind it. */
.admin-bar .m1-header {
	top: var(--wp-admin--admin-bar--height, 0px);
}

.m1-header__row {
	display: flex;
	align-items: center;
	gap: clamp(16px, 2vw, 36px);
	min-height: var(--m1-header-h);
	width: min(100% - 2 * var(--m1-gutter), var(--m1-header-max));
	margin-inline: auto;
}

.m1-brand {
	display: block;
	flex: none;
	text-decoration: none;
}

/* The lockup's lettering reads at about 11px caps at this height. */
.m1-brand img {
	height: 96px;
	width: auto;
}

.m1-nav {
	display: flex;
	align-items: center;
	gap: clamp(16px, 1.7vw, 30px);
	margin-left: auto;
}

/* Tracked uppercase sans with a coral line that draws in from the left. */
.m1-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 10px 0;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.2;
	color: var(--m1-ink);
	text-decoration: none;
	white-space: nowrap;
	background: linear-gradient(var(--m1-coral), var(--m1-coral)) left calc(100% - 4px) / 0 1.5px no-repeat;
	transition: background-size 0.3s var(--m1-ease);
}

.m1-nav__link:hover,
.m1-nav__link[aria-current="page"],
.m1-nav__group[open] > .m1-nav__link {
	background-size: 100% 1.5px;
}

/* Dropdown groups: native <details>, so keyboard and screen readers work
   without JS. theme.js closes them on outside click, Escape and when another
   group opens. */
.m1-nav__group {
	position: relative;
}

.m1-nav__group > summary {
	list-style: none;
	cursor: pointer;
}

.m1-nav__group > summary::-webkit-details-marker {
	display: none;
}

.m1-nav__group > summary svg {
	width: 16px;
	height: 16px;
	color: var(--m1-coral);
	transition: transform 0.25s var(--m1-ease);
}

.m1-nav__group[open] > summary svg {
	transform: rotate(180deg);
}

/* Same panel as the choose-your-spa picker. */
.m1-nav__menu {
	position: absolute;
	z-index: 50;
	top: calc(100% + 10px);
	left: -12px;
	min-width: 280px;
	display: grid;
	padding: 8px;
	background: var(--m1-white);
	border: 1px solid var(--m1-rule);
	border-radius: 14px;
	box-shadow: 0 18px 40px -24px rgba(46, 39, 36, 0.45);
}

.m1-nav__menu a {
	min-height: 44px;
	display: flex;
	align-items: center;
	padding: 10px 12px;
	border-radius: 10px;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--m1-ink);
	text-decoration: none;
	white-space: nowrap;
}

.m1-nav__menu a + a {
	border-top: 1px solid var(--m1-rule);
}

.m1-nav__menu a:hover,
.m1-nav__menu a:focus-visible {
	background: var(--m1-blush);
}

.m1-header__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: none;
}

/* The phone icon (a tel: link on a location page, a picker elsewhere) shows
   only with the drawer, as the comp does. */
.m1-header__tel {
	display: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	color: var(--m1-ink);
	cursor: pointer;
}

.m1-header__tel svg {
	width: 22px;
	height: 22px;
}

.m1-header__call {
	display: none;
}

.m1-burger {
	display: none;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: transparent;
	color: var(--m1-ink);
	font: 500 0.8rem var(--m1-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
}

.m1-burger svg {
	width: 24px;
	height: 24px;
}

/* 1240px: the comp measured the eight-item nav fitting one line from 1241px. */
@media ( max-width: 1240px ) {
	.m1-nav {
		display: none;
	}

	.m1-header__actions {
		margin-left: auto;
	}

	.m1-burger,
	.m1-header__tel {
		display: flex;
	}

	.m1-header__call {
		display: block;
	}
}

@media ( max-width: 640px ) {
	.m1-header__row {
		gap: 10px;
	}

	.m1-header__actions {
		gap: 2px;
	}

	.m1-brand img {
		height: 72px;
	}

	/* Phone bar = logo + phone icon + Menu only. Book now lives in the drawer. */
	.m1-header__book {
		display: none;
	}
}

/* Phones held sideways (about 340px of visible height): a 64px bar, so the
   hero's Book now still lands in the first screen. */
@media ( orientation: landscape ) and ( max-height: 500px ) and ( max-width: 1239px ) {
	:root {
		--m1-header-h: 64px;
	}

	.m1-header__row {
		min-height: 64px;
	}

	.m1-brand img {
		height: 50px;
	}
}

/* --------------------------------------------------------- mobile drawer --- */

/* Scrim and drawer are siblings AFTER the header, never inside it, so the
   sticky header's stacking context cannot trap them. z: header 40, scrim 70,
   drawer 80. */
.m1-scrim {
	position: fixed;
	inset: 0;
	z-index: 70;
	background: rgba(46, 39, 36, 0.38);
	opacity: 0;
	transition: opacity 0.3s var(--m1-ease);
}

.m1-scrim.is-open {
	opacity: 1;
}

/* visibility (delayed on close) keeps closed-drawer links out of the Tab order
   and the accessibility tree without a display:none that would kill the slide. */
.m1-mobile {
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 80;
	width: min(88vw, 380px);
	display: flex;
	flex-direction: column;
	background: var(--m1-white);
	color: var(--m1-ink);
	box-shadow: -18px 0 48px -24px rgba(46, 39, 36, 0.35);
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.35s var(--m1-ease), visibility 0s linear 0.35s;
}

.m1-mobile.is-open {
	transform: none;
	visibility: visible;
	transition: transform 0.35s var(--m1-ease), visibility 0s;
}

.m1-mobile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px var(--m1-gutter);
	border-bottom: 1px solid var(--m1-rule);
}

.m1-mobile__head img {
	height: 52px;
	width: auto;
}

.m1-mobile__close {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	background: transparent;
	color: var(--m1-ink);
	cursor: pointer;
}

.m1-mobile__close svg {
	width: 24px;
	height: 24px;
}

.m1-mobile__nav {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 6px var(--m1-gutter);
}

.m1-mobile__link {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid var(--m1-rule);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--m1-ink);
	text-decoration: none;
}

.m1-mobile__group > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	list-style: none;
	cursor: pointer;
}

.m1-mobile__group > summary::-webkit-details-marker {
	display: none;
}

.m1-mobile__group > summary svg {
	width: 18px;
	height: 18px;
	color: var(--m1-coral);
	transition: transform 0.25s var(--m1-ease);
}

.m1-mobile__group[open] > summary svg {
	transform: rotate(180deg);
}

.m1-mobile__sublink {
	display: block;
	padding: 12px 0 12px 16px;
	border-bottom: 1px solid rgba(46, 39, 36, 0.07);
	font-size: 1.0625rem;
	color: var(--m1-text);
	text-decoration: none;
}

.m1-mobile__foot {
	display: grid;
	gap: 14px;
	padding: 20px var(--m1-gutter) 40px;
	background: var(--m1-shell);
	border-top: 1px solid var(--m1-rule);
}

/* Three spas, three numbers, none favoured. */
.m1-mobile__calls {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.m1-mobile__calls li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 0.9375rem;
	color: var(--m1-text);
}

.m1-mobile__tel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--m1-ink);
	text-decoration: none;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

.m1-mobile__tel svg {
	width: 18px;
	height: 18px;
	color: var(--m1-coral);
}

/* Short screens (Safari's visible area on small iPhones): tighter rows so all
   eight links and the booking foot fit. */
@media ( max-height: 760px ) {
	.m1-mobile__head {
		padding-block: 6px;
	}

	.m1-mobile__head img {
		height: 44px;
	}

	.m1-mobile__link {
		padding: 9px 0;
		font-size: 1.06rem;
	}

	.m1-mobile__sublink {
		padding: 8px 0 8px 16px;
	}

	.m1-mobile__foot {
		padding: 10px var(--m1-gutter) 28px;
		gap: 8px;
	}
}

/* ------------------------------------------------------------ breadcrumb --- */

/* A quiet row under the header, never a label above the H1. */
.m1-crumbs {
	width: min(100% - 2 * var(--m1-gutter), var(--m1-max));
	margin: 0 auto;
	padding-top: 14px;
	font-size: 0.875rem;
	color: var(--m1-text-soft);
}

.m1-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.m1-crumbs li + li::before {
	content: "/";
	margin-right: 10px;
	color: var(--m1-rule-peach);
}

.m1-crumbs a {
	color: var(--m1-ink);
	text-decoration-color: var(--m1-coral);
}

@media ( max-width: 899px ) and ( max-height: 600px ) and ( orientation: portrait ) {
	.m1-crumbs {
		padding-top: 8px;
	}
}

/* ---------------------------------------------------------------- footer --- */

.m1-footer {
	padding-block: 32px 40px;
	background: var(--m1-shell);
	color: var(--m1-text);
}

.m1-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
}

.m1-footer .m1-brand img {
	height: 88px;
}

.m1-footer__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.8rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.m1-footer__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--m1-ink);
	text-decoration: none;
}

.m1-footer__nav a:hover {
	text-decoration: underline;
	text-decoration-color: var(--m1-coral);
}

.m1-footer__copy {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--m1-rule);
	font-size: 0.875rem;
	color: var(--m1-text-soft);
}

.m1-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 20px;
}

.m1-footer__legal a {
	color: var(--m1-text);
	text-decoration-color: var(--m1-coral);
}

@media ( max-width: 600px ) {
	.m1-footer__copy {
		flex-direction: column;
	}
}

/* ---------------------------------------------------------- scroll reveal --- */

.m1-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.9s var(--m1-ease), transform 0.9s var(--m1-ease);
}

.m1-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media ( prefers-reduced-motion: reduce ) {
	.m1-reveal {
		opacity: 1;
		transform: none;
	}
}