/*
 * Massage 1 Thai Spa — global design system ("Bright").
 * Hand-authored (no build step). Enqueued on the front end AND inside the block
 * editor (add_editor_style), so blocks look identical in both. Per-block
 * style.scss files consume the --m1-* custom properties below.
 *
 * Source: designs/massage-thai-spa/DESIGN.md and assets/css/bright.css. Values
 * are ported 1:1; where a comment quotes a contrast ratio it is the comp's.
 *
 * The webfonts' @font-face rules come from theme.json (settings.typography.
 * fontFamilies[].fontFace), which WordPress prints on the front end AND in the
 * editor canvas, so they are declared once there and not repeated here.
 *
 * The starter's token names (--m1-paper, --m1-accent, --m1-line, ...) are kept
 * as aliases at the bottom of :root so anything written against them still
 * resolves. New code uses the design's own names.
 */

:root {
	/* --- Grounds: white first, the flyer's warm shell, the peach blush. No dark
	   surfaces anywhere (DESIGN.md, "The White Ground Rule"). --- */
	--m1-white: #ffffff;
	--m1-shell: #fbf6f2;            /* the Hydrate Facial flyer's ground */
	--m1-blush: #fdeee6;            /* offers strip, line-button hover */

	/* --- Ink, warm rather than black --- */
	--m1-ink: #2e2724;              /* headings, nav, button text. 14.6:1 on white */
	--m1-text: #5b514c;             /* body. 7.6:1 on white, 7.1:1 on shell */
	--m1-text-soft: #786c66;        /* secondary, labels. 5.1:1 on white, 4.7:1 on shell */

	/* --- The logo's tones --- */
	--m1-coral: #e7835b;            /* fills, icons, rules. NEVER text (ink on it is 5.5:1) */
	--m1-peach: #e9967a;            /* coral pill hover, scrollbar thumb */
	--m1-coral-text: #dc6650;       /* coral as LARGE text only (24px+, or 19.2px bold):
	                                   3.5:1 white, 3.2:1 shell, 3.1:1 blush */
	--m1-rule-peach: #f2b8a0;       /* structural dividers */
	--m1-rule: rgba(46, 39, 36, 0.12); /* 1px hairlines in lists, drawer, stuck header */
	--m1-focus: #b9532e;            /* focus ring ONLY. 4.9:1 on white */

	/* --- Type --- */
	--m1-display: "Marcellus", Georgia, serif;
	--m1-sans: "Urbanist", "Segoe UI", system-ui, sans-serif;
	--m1-step--1: 0.875rem;
	--m1-step-0: 1.0625rem;
	--m1-step-1: 1.3rem;                                     /* title small */
	--m1-step-2: clamp(1.4rem, 1.15rem + 0.8vw, 1.75rem);    /* title */
	--m1-step-3: clamp(1.9rem, 1.35rem + 1.9vw, 2.75rem);    /* headline (H2) */
	--m1-step-4: clamp(2.45rem, 1.5rem + 2.7vw, 4.1rem);     /* display (H1) */

	/* --- Space and layout --- */
	--m1-gutter: clamp(16px, 4vw, 56px);
	--m1-max: 1240px;
	--m1-header-max: 1400px;
	--m1-section: clamp(72px, 9vw, 136px);
	--m1-radius: 6px;
	--m1-radius-pill: 999px;
	--m1-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--m1-header-h: 112px;
	--m1-svcnav-h: 62px;

	/* Scrollbar width, published by theme.js for full-bleed alignment. */
	--m1-sbw: 0px;

	/* --- Starter aliases (keep; see header comment) --- */
	--m1-paper: var(--m1-white);
	--m1-tint: var(--m1-shell);
	--m1-ink-soft: var(--m1-text);
	--m1-line: var(--m1-rule);
	--m1-accent: var(--m1-coral);
	--m1-accent-ink: var(--m1-focus);
	--m1-bg: var(--m1-white);
	--m1-surface: var(--m1-shell);
	--m1-border: var(--m1-rule);
	--m1-muted: var(--m1-text-soft);
	--m1-font-display: var(--m1-display);
	--m1-font-body: var(--m1-sans);
	--m1-wrap: var(--m1-max);
	--m1-container: var(--m1-max);
	--m1-pad: var(--m1-gutter);
	--m1-r-sm: var(--m1-radius);
	--m1-r-pill: var(--m1-radius-pill);
}

/* The homepage runs a tighter rhythm: Anton found the gaps between its
   sections too large (home.css, 2026-10-28). The location comps keep the
   design's own spacing above, so only the front page changes. */
.home {
	--m1-section: clamp(56px, 6.5vw, 104px);
}

@media ( max-width: 640px ) {
	:root {
		--m1-header-h: 84px;
		--m1-svcnav-h: 54px;
	}
}

/* --- Base reset (WordPress ships none of this on the front end — SETUP §9) --- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* In-page jumps land below the sticky header and the services bar. */
	scroll-padding-top: calc(var(--m1-header-h) + var(--m1-svcnav-h) + 8px);
	scrollbar-color: var(--m1-peach) var(--m1-shell);
}

body {
	margin: 0;
	background: var(--m1-white);
	color: var(--m1-text);
	font: 400 var(--m1-step-0) / 1.7 var(--m1-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	caret-color: var(--m1-coral);
	/* clip, not hidden — hidden would make <body> a scroll container and break
	   the sticky header. */
	overflow-x: clip;
}

img,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

figure {
	margin: 0;
}

/* Form controls don't inherit font-family from body — force it, or unstyled
   inputs/buttons render in the user-agent font. */
button,
input,
select,
textarea,
optgroup {
	font-family: inherit;
}

/* Marcellus speaks: one weight, never bold, never uppercase (DESIGN.md,
   "The Two Voices Rule"). */
h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--m1-display);
	font-weight: 400;
	line-height: 1.15;
	color: var(--m1-ink);
	text-wrap: balance;
}

p {
	margin: 0;
	text-wrap: pretty;
}

a {
	color: inherit;
	text-underline-offset: 0.24em;
	text-decoration-thickness: 1px;
}

::selection {
	background: #fbd6c4;
	color: var(--m1-ink);
}

:focus-visible {
	outline: 2px solid var(--m1-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Visually hidden, still read by screen readers. */
.m1-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Locks page scroll while the mobile drawer is open (set by theme.js on both
   <html> and <body>: iOS Safari still scrolls the page behind the drawer when
   only <body> is locked). */
.m1-no-scroll,
.m1-no-scroll body {
	overflow: hidden;
	overscroll-behavior: none;
}

/* Skip link — visible only when focused. Keyboard users land here first. */
.m1-skip {
	position: absolute;
	left: 0.5rem;
	top: -100%;
	z-index: 100;
	padding: 0.75rem 1.1rem;
	background: var(--m1-coral);
	color: var(--m1-ink);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	border-radius: var(--m1-radius-pill);
}

.m1-skip:focus-visible {
	top: 0.5rem;
}

/* --- Layout helpers ---
   .m1-wrap is the comp's container; .m1-container is the starter's name for
   the same box, kept so either resolves. */
.m1-wrap,
.m1-container {
	width: min(100% - 2 * var(--m1-gutter), var(--m1-max));
	margin-inline: auto;
}

.m1-section {
	padding-block: var(--m1-section);
}

/* Section grounds. The block's `background` attribute resolves to one of
   these, validated against a PHP allowlist first (inc/partials.php →
   m1ts_section_bg). */
.m1-section--white {
	background: var(--m1-white);
}

.m1-section--shell {
	background: var(--m1-shell);
}

.m1-section--blush {
	background: var(--m1-blush);
}

/* Centred section head: H2 over a short peach rule. */
.m1-section__head {
	display: grid;
	justify-items: center;
	text-align: center;
	margin-bottom: clamp(36px, 4vw, 60px);
}

.m1-section__head h2 {
	font-size: var(--m1-step-3);
}

.m1-section__head h2::after {
	content: "";
	display: block;
	width: 56px;
	height: 1.5px;
	margin: 22px auto 0;
	background: var(--m1-rule-peach);
}

/* --- Starter section-head helpers (used by the example block until it is
   removed in batch 1). Re-skinned, not redesigned. --- */
.m1-shead {
	max-width: 66ch;
	margin-bottom: clamp(36px, 4vw, 60px);
}

.m1-shead__h {
	font-size: var(--m1-step-3);
	margin-block: 0.6rem 1rem;
}

.m1-shead > :last-child {
	margin-bottom: 0;
}

.m1-eyebrow {
	font-weight: 600;
	font-size: 0.75rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--m1-text-soft);
}

.m1-lede {
	font-size: 1.125rem;
	max-width: 62ch;
}

/* --- Buttons: the flyer's coral pill. Ink text, because white on the brand
   coral is 2.7:1 (DESIGN.md, "The Ink On Coral Rule").
   .m1-btn          base: tracked uppercase sans, full pill, 48px
   .m1-btn--coral   primary (every Book now)
   .m1-btn--line    white with a coral border, sentence case (the call action)
   .m1-btn--lg      56px, wider (hero)
   .m1-btn--block   full width
   Variants are written as .m1-btn.m1-btn--x so a later shorthand can't beat
   them (SETUP §9, "Specificity beats intent"). --- */
.m1-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 48px;
	padding: 0.8em 2em;
	border-radius: var(--m1-radius-pill);
	border: 1.5px solid transparent;
	font: 600 0.875rem / 1 var(--m1-sans);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.25s var(--m1-ease), color 0.25s var(--m1-ease), border-color 0.25s var(--m1-ease), transform 0.25s var(--m1-ease);
}

.m1-btn:active {
	transform: translateY(1px);
}

.m1-btn svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.m1-btn.m1-btn--coral,
.m1-btn.m1-btn--accent {
	background: var(--m1-coral);
	color: var(--m1-ink);
}

.m1-btn.m1-btn--coral:hover,
.m1-btn.m1-btn--accent:hover {
	background: var(--m1-peach);
}

.m1-btn.m1-btn--line {
	border-color: var(--m1-coral);
	color: var(--m1-ink);
	background: var(--m1-white);
	letter-spacing: 0.06em;
	text-transform: none;
	font-size: 1rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.m1-btn.m1-btn--line:hover {
	background: var(--m1-blush);
}

.m1-btn.m1-btn--line svg {
	color: var(--m1-coral);
}

.m1-btn.m1-btn--lg {
	min-height: 56px;
	padding-inline: 2.3em;
}

.m1-btn.m1-btn--block {
	width: 100%;
}

/* A row of CTAs. */
.m1-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

@media ( max-width: 480px ) {
	.m1-ctas .m1-btn,
	.m1-ctas .m1-pick,
	.m1-ctas .m1-pick > summary {
		width: 100%;
	}
}

/* --- Text link: ink words on a coral underline that thickens on hover. --- */
.m1-link {
	color: var(--m1-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--m1-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
	transition: text-decoration-thickness 0.2s var(--m1-ease), text-underline-offset 0.2s var(--m1-ease);
}

.m1-link:hover {
	text-decoration-thickness: 3px;
	text-underline-offset: 0.22em;
}

/* Body links inside sections and long-form prose take the same treatment. */
.m1-section p a:not(.m1-btn),
.m1-prose a:not(.m1-btn) {
	color: var(--m1-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--m1-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.m1-section p a:not(.m1-btn):hover,
.m1-prose a:not(.m1-btn):hover {
	text-decoration-thickness: 3px;
	text-underline-offset: 0.22em;
}

/* --- Copy areas (feature, menu-section, pair): body links are ink words on a
   coral underline (.m1-link), and the two core block styles the theme
   registers (inc/blocks.php). --- */
.m1-copy a:not(.m1-btn):not(.m1-textlink),
.m1-pair a:not(.m1-btn) {
	color: var(--m1-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--m1-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

.m1-copy a:not(.m1-btn):not(.m1-textlink):hover,
.m1-pair a:not(.m1-btn):hover {
	text-decoration-thickness: 3px;
	text-underline-offset: 0.22em;
}

/* Link row: links side by side, wrapping, as the comp's .m1-links. */
.is-style-m1-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 28px;
}

/* 404.php: the main-pages row between the plain hero and the locations. */
.m1-404__links {
	padding-bottom: clamp(40px, 5vw, 72px);
}

/* Ruled list: hairlines, the bold lead in Marcellus. */
ul.is-style-m1-styles {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	border-top: 1.5px solid var(--m1-rule-peach);
}

ul.is-style-m1-styles li {
	padding: 14px 0;
	border-bottom: 1px solid var(--m1-rule);
}

ul.is-style-m1-styles strong {
	font-family: var(--m1-display);
	font-weight: 400;
	font-size: var(--m1-step-1);
	color: var(--m1-ink);
	margin-right: 0.2em;
}

/* Text page (Group block style, inc/blocks.php): long reading such as the
   Privacy Policy and Terms. One column on the hero's measure, H2s in
   Marcellus, plain lists, generous paragraph spacing. Core blocks bring
   their own margins; this sets them all. */
.is-style-m1-prose {
	width: min(100% - 2 * var(--m1-gutter), var(--m1-max));
	margin: 0 auto;
	padding-block: clamp(8px, 1.5vw, 24px) var(--m1-section);
}

.is-style-m1-prose > * {
	max-width: 46rem;
	margin-block: 0;
}

.is-style-m1-prose > * + * {
	margin-top: 1.1em;
}

.is-style-m1-prose h2 {
	margin-top: clamp(40px, 4vw, 56px);
	padding-top: clamp(24px, 2.4vw, 32px);
	border-top: 1px solid var(--m1-rule);
	font-size: var(--m1-step-2);
}

.is-style-m1-prose h3 {
	margin-top: 1.8em;
	font-size: var(--m1-step-1);
}

.is-style-m1-prose h2 + *,
.is-style-m1-prose h3 + * {
	margin-top: 0.75em;
}

.is-style-m1-prose ul,
.is-style-m1-prose ol {
	padding-left: 1.3em;
}

.is-style-m1-prose li + li {
	margin-top: 0.45em;
}

.is-style-m1-prose li::marker {
	color: var(--m1-coral);
}

.is-style-m1-prose a:not(.m1-btn) {
	color: var(--m1-ink);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--m1-coral);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

/* --- Split: heading left (sticky), ruled list right. Shared by m1ts/facts
   and m1ts/faq, which also appear apart. From the comp's location.css. --- */
.m1-split {
	padding-block: var(--m1-section);
}

.m1-split__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: clamp(32px, 6vw, 96px);
	align-items: start;
}

.m1-split__head {
	position: sticky;
	top: calc(var(--m1-header-h) + 32px);
	display: grid;
	gap: 22px;
	justify-items: start;
}

.m1-split__head h2 {
	font-size: var(--m1-step-3);
	max-width: 16ch;
}

.m1-split__head .m1-ctas {
	display: grid;
	justify-items: start;
	gap: 12px;
}

/* Directly after another split, the FAQ opens on a hairline instead of a
   second full gap. */
.m1-split + .m1-split--faq {
	padding-top: 0;
}

.m1-split + .m1-split--faq .m1-split__grid {
	padding-top: var(--m1-section);
	border-top: 1px solid var(--m1-rule);
}

@media ( max-width: 860px ) {
	.m1-split__grid {
		grid-template-columns: 1fr;
	}

	.m1-split__head {
		position: static;
	}
}

/* --- Prices: tabular lining figures in Salmon Coral, large text only
   (DESIGN.md, "The Large Coral Rule"). 1.2rem bold on phones keeps it large
   text. --- */
.m1-price {
	font-family: var(--m1-sans);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.1;
	color: var(--m1-coral-text);
	font-variant-numeric: tabular-nums lining-nums;
}

@media ( max-width: 640px ) {
	.m1-price {
		font-size: 1.2rem;
		font-weight: 700;
	}
}

/* Phone numbers set with tabular figures everywhere. */
a[href^="tel:"] {
	font-variant-numeric: tabular-nums;
}

/* --- Choose-your-spa picker. Native <details>, the <summary> styled as the
   pill, so it works without script; theme.js adds one-open-at-a-time,
   outside click and Escape. Rendered by m1ts_spa_picker() (inc/partials.php)
   in the header and, from batch 1, the hero. Lives here, not in chrome.css,
   because the hero block also shows it inside the editor canvas. --- */
.m1-pick {
	position: relative;
}

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

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

.m1-pick__chev {
	width: 16px;
	height: 16px;
	margin-left: -0.2em;
	transition: transform 0.25s var(--m1-ease);
}

.m1-btn .m1-pick__chev {
	width: 16px;
	height: 16px;
}

.m1-pick[open] .m1-pick__chev {
	transform: rotate(180deg);
}

.m1-pick__panel {
	position: absolute;
	z-index: 50;
	top: calc(100% + 8px);
	left: 0;
	min-width: 100%;
	width: max-content;
	max-width: min(88vw, 340px);
	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);
	text-align: left;
}

/* Header pickers sit at the right edge, so their panel opens leftwards. */
.m1-pick--end .m1-pick__panel {
	left: auto;
	right: 0;
}

.m1-pick__title {
	padding: 8px 12px 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--m1-text-soft);
}

.m1-pick__panel a {
	display: grid;
	gap: 2px;
	min-height: 48px;
	padding: 10px 12px;
	border-radius: 10px;
	text-decoration: none;
	color: var(--m1-ink);
}

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

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

.m1-pick__panel strong {
	font-weight: 600;
}

.m1-pick__panel .m1-pick__where {
	font-size: 0.875rem;
	color: var(--m1-text-soft);
}

.m1-pick__panel .m1-pick__tel {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--m1-ink);
	font-variant-numeric: tabular-nums;
}

.m1-pick__tel svg {
	width: 16px;
	height: 16px;
	flex: none;
	color: var(--m1-coral);
}

/* An open picker must paint above whatever follows it. The hero's entrance
   animation (and any reveal) leaves each line of copy as its own stacking
   context, so without this the intro and hours lines below the buttons paint
   OVER the panel and swallow the taps on its numbers (Anton, 2026-11-05).
   Lifting the row that holds the open picker fixes it in every block that
   uses m1ts_spa_actions(), not just the hero. */
.m1-pick[open],
.m1-ctas:has(> .m1-pick[open]) {
	position: relative;
	z-index: 60;
}

/* ...and the section holding it above the next section, which the panel
   can hang over (the hero's trust row). Below the sticky header. */
.entry-content > :has(.m1-pick[open]) {
	position: relative;
	z-index: 5;
}

/* On small phones the in-flow pickers (hero) push content down instead of
   floating, so the panel never runs off-screen. Header pickers keep
   floating: they sit in the sticky bar. */
@media ( max-width: 480px ) {
	.m1-pick:not(.m1-pick--end) .m1-pick__panel {
		position: static;
		width: auto;
		max-width: none;
		margin-top: 8px;
		box-shadow: none;
	}
}

/* --- Reduced motion. --- */
@media ( prefers-reduced-motion: reduce ) {
	html {
		scroll-behavior: auto;
	}

	/* `transition: none`, NOT `transition-duration: .01ms`. The short-duration
	   form gives every child of the drawer a tiny `all` transition, so they
	   briefly keep the closed panel's `visibility: hidden` and the drawer's
	   first focus() silently fails (WebKit drops focus to <body>). Found on
	   this site's design comp, 2026-10-24; see
	   designs/_reference/mobile-menu-pattern.md. */
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}