/*
Theme Name: Dragon Massage
Theme URI: https://www.dragonmassage.com.au/
Author: Dragon Massage
Description: Lightweight hybrid theme for Dragon Massage, Anna Bay. Block-editor first, with no jQuery, no icon fonts and no external requests.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dragon
Tags: custom-logo, custom-menu, block-patterns, accessibility-ready, wide-blocks
*/

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

/* Keep block-editor figures from collapsing their intrinsic ratio. */
figure {
	margin: 0;
}

a {
	color: inherit;
}

:where(a:focus-visible),
:where(button:focus-visible),
:where(input:focus-visible),
:where(select:focus-visible),
:where(textarea:focus-visible),
:where(summary:focus-visible) {
	outline: 3px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   2. Accessibility helpers
   ---------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 0.5rem;
	z-index: 999;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 4px 4px;
	transition: top 0.15s ease-in-out;
}

.skip-link:focus {
	top: 0;
}

/* -------------------------------------------------------------------------
   3. Site header
   ---------------------------------------------------------------------- */

/* Solid white, not frosted: the logo is artwork on a white ground, so any
   tint in the bar draws a box around it as photographs scroll underneath. */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding: 0.9rem var(--wp--preset--spacing--30);
}

.site-branding {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.site-branding a {
	text-decoration: none;
}

.site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.01em;
}

.site-tagline {
	margin: 0.15rem 0 0;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--ink-soft);
}

.custom-logo {
	max-height: 62px;
	width: auto;
}

@media (max-width: 600px) {
	.custom-logo {
		max-height: 48px;
	}
}

/* Header call-to-action: the most valuable control on a local service site. */
.site-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.1rem;
	border-radius: 4px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	border-radius: 999px;
}

.site-header__phone:hover,
.site-header__phone:focus {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
}

.site-header__phone::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--dragon-icon-phone) center / contain no-repeat;
	mask: var(--dragon-icon-phone) center / contain no-repeat;
}

/* -------------------------------------------------------------------------
   4. Navigation (no JavaScript — <details> drives the mobile panel)
   ---------------------------------------------------------------------- */

.main-nav ul {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-nav a {
	display: block;
	padding: 0.35rem 0;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a:focus {
	border-bottom-color: var(--wp--preset--color--accent);
}

.main-nav .current-menu-item > a,
.main-nav .current_page_item > a {
	border-bottom-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

.nav-toggle {
	display: none;
}

.nav-toggle > summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
}

.nav-toggle > summary::-webkit-details-marker {
	display: none;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--wp--preset--color--primary);
	content: "";
}

.nav-toggle__bars::before {
	transform: translateY(-7px);
}

.nav-toggle__bars::after {
	transform: translateY(5px);
}

@media (max-width: 560px) {
	/* Icon-only call button: the full number pushed the header to two rows. */
	.site-header__phonenum {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.site-header__phone {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
		gap: 0;
	}

	.site-header__phone::before {
		width: 1.15em;
		height: 1.15em;
	}

	.site-title {
		font-size: 1.15rem;
	}
}

@media (max-width: 860px) {
	.nav-toggle {
		display: block;
	}

	.site-header__inner {
		flex-wrap: wrap;
	}

	.main-nav {
		order: 3;
		flex-basis: 100%;
	}

	.site-header__phone {
		margin-left: auto;
	}

	.nav-toggle:not([open]) + .main-nav {
		display: none;
	}

	.main-nav ul {
		flex-direction: column;
		gap: 0;
		padding-bottom: 0.5rem;
	}

	.main-nav a {
		padding: 0.7rem 0;
		border-bottom: 1px solid var(--wp--preset--color--border);
	}
}

@media (min-width: 861px) {
	.nav-toggle {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   5. Hero
   ---------------------------------------------------------------------- */

/* Patterns apply .dragon-hero; the editor's block-style variation applies
   .is-style-dragon-hero. Both should look the same. */
.dragon-hero,
.is-style-dragon-hero {
	position: relative;
	display: grid;
	align-items: center;
	min-height: clamp(420px, 64vh, 620px);
	padding-block: var(--wp--preset--spacing--60);
	background-color: var(--wp--preset--color--primary-deep);
	background-image: var(--dragon-hero-image);
	background-size: cover;
	background-position: center;
	isolation: isolate;
	/* Inset the content area to the wide grid so the panel's left edge lines up
	   with the site title above it, rather than sitting on the viewport edge. */
	padding-inline: max(
		var(--wp--preset--spacing--30),
		calc((100% - var(--wp--style--global--wide-size)) / 2)
	);
}

/* Frosted panel, offset to one side rather than centred — an asymmetric
   composition reads as designed rather than as a default. */
/* Core's constrained layout sets `margin-left/right: auto !important` on every
   child, which centres the panel. !important is the only way to opt out. */
.dragon-hero > .dragon-hero__panel,
.is-style-dragon-hero > .dragon-hero__panel {
	margin-left: 0 !important;
	margin-right: auto !important;
}

.dragon-hero__panel {
	max-width: 34rem;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 24px;
	background: rgba(1, 24, 58, 0.42);
	backdrop-filter: blur(18px) saturate(1.25);
	-webkit-backdrop-filter: blur(18px) saturate(1.25);
	box-shadow: 0 34px 70px -38px rgba(0, 0, 0, 0.75);
}

@supports not (backdrop-filter: blur(1px)) {
	.dragon-hero__panel {
		background: rgba(1, 24, 58, 0.78);
	}
}

.dragon-hero__panel > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* The open/closed chip is its own object, while the eyebrow and the heading
   are a pair that belongs tight together. The generic stack rule above cannot
   do that on its own: `.dragon-eyebrow { margin: 0 }` further down the file
   has equal specificity and wins, so the chip ends up flush against it.
   One number, so the gap is easy to tune. */
.dragon-hero__panel {
	--dragon-status-gap: 1rem;
}

.dragon-hero__panel .dragon-status {
	margin-bottom: var(--dragon-status-gap);
}

.dragon-hero__actions {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
}

.dragon-hero__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	color: rgba(255, 255, 255, 0.82);
}

/* Small uppercase label above a heading — cheap way to add hierarchy. */
.dragon-eyebrow {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
}

/* Scrim: keeps text legible over any photograph and holds WCAG contrast.
   Near-neutral rather than heavily blue, so the photograph still reads. */
.dragon-hero::before,
.is-style-dragon-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(
			100deg,
			rgba(1, 24, 58, 0.55) 0%,
			rgba(1, 24, 58, 0.28) 55%,
			rgba(1, 24, 58, 0.12) 100%
		);
}

.dragon-hero :where(h1, h2, p),
.is-style-dragon-hero :where(h1, h2, p) {
	color: var(--wp--preset--color--base);
}

.dragon-hero :where(h1),
.is-style-dragon-hero :where(h1) {
	margin: 0;
	text-wrap: balance;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.dragon-hero :where(p),
.is-style-dragon-hero :where(p) {
	color: rgba(255, 255, 255, 0.9);
}

/* The hero button is the primary conversion on the site — give it presence. */
.dragon-hero .wp-block-button__link,
.is-style-dragon-hero .wp-block-button__link {
	box-shadow: 0 10px 26px -12px rgba(1, 24, 58, 0.7);
}

/* -------------------------------------------------------------------------
   6. Treatments (master-detail)
   ---------------------------------------------------------------------- */

/* Pick from the list, the panel changes. Checked radios drive everything, so
   it works without JavaScript. Every panel stays in the DOM, so all the
   descriptions remain crawlable even though one shows at a time.

   Laid out to fit a single screen: the length selector shares a bar with the
   list heading, and the panel puts image and copy side by side. */
.dragon-tx {
	max-width: none;
	display: grid;
	grid-template-columns: minmax(13rem, 17rem) 1fr;
	grid-template-areas:
		"bar  bar"
		"list panel";
	gap: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	align-items: start;
}

.dragon-tx__input,
.dragon-tx__durinput {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.dragon-tx__bar {
	grid-area: bar;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.dragon-tx__listlabel {
	margin: 0;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.dragon-tx__durs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0;
	padding: 0;
	border: 0;
}

.dragon-tx__durlabel {
	margin: 0;
	padding: 0.5rem 0.9rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.dragon-tx__list {
	grid-area: list;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.dragon-tx__tab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	margin: 0;
	padding: 0.65rem 0.85rem;
	border: 1px solid transparent;
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	cursor: pointer;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.dragon-tx__tab:hover {
	border-color: var(--wp--preset--color--border);
}

.dragon-tx__tabname {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
}

.dragon-tx__tabprice {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* A length this treatment is not offered at — a note, not a price. */
.dragon-tx__price--na {
	font-size: 0.78rem;
	font-weight: 500;
	color: var(--wp--preset--color--ink-soft);
}

.dragon-tx__tab:has(:checked) .dragon-tx__price--na {
	color: inherit;
	opacity: 0.8;
}

.dragon-tx__panels {
	grid-area: panel;
}

.dragon-tx__panel {
	display: none;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	gap: var(--wp--preset--spacing--30);
	align-items: start;
}

.dragon-tx__image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 14px;
}

/* Holds the photograph's place until there is one, rather than letting the
   copy jump left and reflow the moment an image is added. */
.dragon-tx__image--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1rem;
	border: 1px dashed var(--wp--preset--color--muted);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
	text-align: center;
}

.dragon-tx__title {
	margin: 0 0 0.15rem;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

.dragon-tx__tagline {
	margin: 0 0 0.6rem;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-deep);
}

.dragon-tx__text {
	margin: 0 0 0.7rem;
	font-size: 0.97rem;
	max-width: 56ch;
}

.dragon-tx__text:last-of-type {
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Key characteristics: a label and a line each, kept tight so a longer
   description does not push the section past a screen. */
.dragon-tx__points {
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
	max-width: 56ch;
	font-size: 0.92rem;
}

.dragon-tx__points li {
	position: relative;
	padding-left: 1.1rem;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.5;
}

.dragon-tx__points li + li {
	margin-top: 0.3rem;
}

.dragon-tx__points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.6em;
	width: 0.35rem;
	height: 0.35rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.dragon-tx__points strong {
	color: var(--wp--preset--color--ink);
	font-weight: 600;
}

.dragon-tx__note {
	margin: 0 0 var(--wp--preset--spacing--30);
	max-width: 56ch;
	font-size: 0.9rem;
	font-style: italic;
	color: var(--wp--preset--color--ink-soft);
}

.dragon-tx__rates {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 var(--wp--preset--spacing--30);
	padding: 0;
	list-style: none;
}

.dragon-tx__rate {
	display: flex;
	flex-direction: column;
	gap: 0.05rem;
	padding: 0.4rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.dragon-tx__rate:only-child {
	border-color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.dragon-tx__ratetime {
	font-size: 0.72rem;
	color: var(--wp--preset--color--ink-soft);
}

.dragon-tx__rate:only-child .dragon-tx__ratetime {
	color: rgba(255, 255, 255, 0.8);
}

.dragon-tx__rateprice {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.dragon-tx__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}

.dragon-tx__cta:hover,
.dragon-tx__cta:focus {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
}

/* Phone icon only on the click-to-call variant; a product link is not a call. */
.dragon-tx__cta:not(.dragon-tx__cta--product)::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--dragon-icon-phone) center / contain no-repeat;
	mask: var(--dragon-icon-phone) center / contain no-repeat;
}

@media (max-width: 900px) {
	.dragon-tx {
		grid-template-columns: 1fr;
		grid-template-areas:
			"bar"
			"list"
			"panel";
		gap: var(--wp--preset--spacing--20);
	}

	/* Stacked, so the four lengths get a full-width row of their own and stop
	   wrapping onto a second line. */
	.dragon-tx__bar {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
	}

	.dragon-tx__durs {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}

	.dragon-tx__durlabel {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0.5rem 0.4rem;
		text-align: center;
	}

	/* Every treatment visible at once. A side-scrolling rail fits in less
	   height but hides four of the six behind a gesture, and a list you have
	   to swipe through is not a list you can compare. auto-fit gives two
	   columns on a phone and four on a tablet. */
	.dragon-tx__list {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
		gap: 0.4rem;
	}

	/* Name over price: side by side, a two-word treatment name wraps and the
	   price ends up alone on the second line anyway. */
	.dragon-tx__tab {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 0.1rem;
		min-height: 44px;
		padding: 0.45rem 0.6rem;
		text-align: center;
	}

	.dragon-tx__tabname {
		font-size: 0.9rem;
	}

	.dragon-tx__panel {
		gap: var(--wp--preset--spacing--20);
	}

	.dragon-tx__text {
		margin-bottom: var(--wp--preset--spacing--20);
	}

	/* Four across on one row: left to wrap, the rates cost a second line. */
	.dragon-tx__rates {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		margin-bottom: var(--wp--preset--spacing--20);
	}

	.dragon-tx__rate {
		align-items: center;
		padding: 0.3rem 0.4rem;
		text-align: center;
	}
}

@media (max-width: 600px) {
	/* Image over copy: side by side leaves neither enough room on a phone. */
	.dragon-tx__panel {
		grid-template-columns: 1fr;
	}

	.dragon-tx__image {
		aspect-ratio: 2 / 1;
		max-height: 10rem;
	}
}

/* -------------------------------------------------------------------------
   7. Details / accordion
   ---------------------------------------------------------------------- */

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Custom marker: rotates on open, and does not inherit the heavy default. */
.wp-block-details summary::before {
	content: "";
	flex: none;
	width: 0.55em;
	height: 0.55em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.15s ease-in-out;
}

.wp-block-details[open] summary::before {
	transform: rotate(45deg);
}

.wp-block-details[open] summary {
	margin-bottom: var(--wp--preset--spacing--20);
}


/* -------------------------------------------------------------------------
   8. Content
   ---------------------------------------------------------------------- */

.site-main {
	display: block;
}

.entry-header {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) 0;
}

.entry-title {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.entry-meta {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.entry-content {
	padding-block: var(--wp--preset--spacing--50);
}

/* A full-bleed hero should meet the header directly, with no canvas strip. */
.entry-content:has(> .alignfull:first-child) {
	padding-block-start: 0;
}

/* Sections sit as panels on the canvas, so the gap between them is a seam
   rather than open space — tighter than a document would use. */
.entry-content > * {
	margin-block: var(--wp--preset--spacing--40);
}

.entry-content > .alignfull:first-child {
	margin-block-start: 0;
}

/* Every top-level section except the hero becomes a floating rounded panel.
   Geometry and surface are separate rules: the legend and the call to action
   keep the panel shape but paint their own background. */
.entry-content > .wp-block-group:not(.dragon-hero):not(.is-style-dragon-hero) {
	max-width: min(
		var(--wp--style--global--wide-size),
		calc(100% - 2 * var(--wp--preset--spacing--30))
	);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	border-radius: 24px;
	box-shadow:
		0 1px 2px rgba(1, 24, 58, 0.04),
		0 24px 50px -38px rgba(1, 24, 58, 0.55);
}

.entry-content > .wp-block-group:not(.dragon-hero):not(.is-style-dragon-hero):not(.dragon-legend):not(.dragon-cta) {
	background: var(--wp--preset--color--base);
}

/* Inside a panel, the panel's own padding sets the measure — re-clamping
   children to contentSize left headings inset from the components below them. */
.entry-content > .wp-block-group:not(.dragon-hero) > :not(.alignfull) {
	max-width: none;
}

/* Prose still needs a readable line length. */
.entry-content > .wp-block-group:not(.dragon-hero) > p {
	max-width: 62ch;
}

@media (max-width: 640px) {
	.entry-content > .wp-block-group:not(.dragon-hero):not(.is-style-dragon-hero) {
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
		border-radius: 18px;
	}
}

.entry-content > :first-child {
	margin-block-start: 0;
}

.entry-content > :last-child {
	margin-block-end: 0;
}

/* Editorial images inside a two-column section. Originals here range from
   750px squares to a 1000px portrait; without a shared ratio the tallest one
   stretches its column and strands white space beside the text. */
.entry-content .wp-block-columns .wp-block-image {
	margin: 0;
}

.entry-content .wp-block-columns .wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}

.entry-content .wp-block-columns .wp-block-image + .wp-block-image {
	margin-top: var(--wp--preset--spacing--30);
}

/* Columns start at the top so headings across the row line up. */
.entry-content .wp-block-columns:not(.are-vertically-aligned-center) > .wp-block-column {
	align-self: flex-start;
}

/* Post lists (blog/archive/search) — plain, no magazine furniture. */
.post-list {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30);
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

.post-summary h2 {
	margin: 0 0 0.35rem;
}

.post-summary h2 a {
	text-decoration: none;
}

.post-summary h2 a:hover {
	text-decoration: underline;
}

.pagination {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--60);
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.pagination .page-numbers {
	padding: 0.45rem 0.8rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
	text-decoration: none;
}

.pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

/* -------------------------------------------------------------------------
   9. Forms (Contact Form 7 renders plain inputs — style them here)
   ---------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: inherit;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 4px;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

form label {
	display: block;
	font-weight: 600;
	margin-bottom: 0.3rem;
}

input[type="submit"],
button[type="submit"] {
	padding: 0.85em 1.6em;
	font: inherit;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
   10. Footer (the visit details, as a panel matching the body sections)
   ---------------------------------------------------------------------- */

.site-footer {
	margin-top: var(--wp--preset--spacing--40);
}

/* Same panel treatment as a body section, so moving the block down here did
   not change how it reads. */
.site-footer__panel {
	max-width: min(
		var(--wp--style--global--wide-size),
		calc(100% - 2 * var(--wp--preset--spacing--30))
	);
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--base);
	border-radius: 24px;
	box-shadow:
		0 1px 2px rgba(1, 24, 58, 0.04),
		0 24px 50px -38px rgba(1, 24, 58, 0.55);
}

.site-footer__title {
	margin: 0 0 var(--wp--preset--spacing--40);
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.site-footer__col h3 {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--large);
}

.site-footer__col p {
	margin: 0 0 0.5rem;
}

.site-footer__hours {
	margin: 0 0 0.5rem;
	padding: 0;
	list-style: none;
}

.site-footer__hours li {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	justify-content: space-between;
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	font-size: 0.95rem;
}

.site-footer__hours li:last-child {
	border-bottom: 0;
}

.site-footer__hours .is-closed {
	color: var(--wp--preset--color--ink-soft);
}

.site-footer__note,
.site-footer__areas {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__areas {
	margin: var(--wp--preset--spacing--40) 0 0;
}

.site-footer__call {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.25rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	text-decoration: none;
}

.site-footer__call::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--dragon-icon-phone) center / contain no-repeat;
	mask: var(--dragon-icon-phone) center / contain no-repeat;
}

.site-footer__call:hover,
.site-footer__call:focus {
	background: var(--wp--preset--color--accent-deep);
	color: var(--wp--preset--color--base);
}

/* The closing rule: brand, menu and copyright only. */
.site-footer__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	max-width: var(--wp--style--global--wide-size);
	margin: var(--wp--preset--spacing--40) auto 0;
	padding: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--ink-soft);
}

.site-footer__bar p {
	margin: 0;
}

.site-footer__brand {
	font-weight: 700;
	color: var(--wp--preset--color--ink);
}

.site-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Pushed to the far end on wide screens, wraps underneath on narrow ones. */
.site-footer .site-footer__legal {
	margin-left: auto;
}

/* -------------------------------------------------------------------------
   11. Components
   ---------------------------------------------------------------------- */

/* Live open/closed state. Computed server-side from the hours in
   dragon_business(), so it never disagrees with the list below it. */
.dragon-status {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.35rem 0.85rem;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	font-size: 0.82rem;
	font-weight: 600;
	color: #fff;
}

.dragon-status__dot {
	width: 0.5rem;
	height: 0.5rem;
	flex: none;
	border-radius: 50%;
	background: #c9ab4f;
}

.dragon-status.is-open .dragon-status__dot {
	background: #6fcf87;
	box-shadow: 0 0 0 3px rgba(111, 207, 135, 0.28);
}

.dragon-status--light {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--ink);
}

/* Eyebrow on a light panel needs a darker tone than the hero version. */
.dragon-eyebrow--dark {
	color: var(--wp--preset--color--accent-deep);
}

/* Feature chips — short checkable claims, scannable in one pass. */
.dragon-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.75rem;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.95rem;
	color: var(--wp--preset--color--ink-soft);
}

/* Ticked facts, not pills: bordered capsules read as buttons and invite a
   click that goes nowhere. */
.dragon-chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.dragon-chip::before {
	content: "";
	width: 0.9em;
	height: 0.9em;
	flex: none;
	background-color: var(--wp--preset--color--accent);
	-webkit-mask: var(--dragon-icon-check) center / contain no-repeat;
	mask: var(--dragon-icon-check) center / contain no-repeat;
}

/* House rules. Calm surface and plain sentences: the old bar-and-uppercase
   treatment read as a warning sign, which is the wrong first impression for
   a massage room. The wording stays unambiguous. */
.dragon-notice {
	margin-top: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
}

.dragon-notice__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--ink);
}

.dragon-notice ul {
	display: grid;
	gap: 0.85rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Block, not flex: a flex item is created per inline child, which split each
   sentence into columns around its <strong>. */
.dragon-notice li {
	position: relative;
	margin: 0;
	padding-left: 1.25rem;
	max-width: 62ch;
	color: var(--wp--preset--color--ink-soft);
	line-height: 1.6;
}

.dragon-notice li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.dragon-notice strong {
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* -------------------------------------------------------------------------
   12. Legend (the one section that gets to be atmospheric)
   ---------------------------------------------------------------------- */

/* A dark, lit-from-above panel. The rest of the page is daylight and clean
   surfaces; this is the section where the name comes from, so it is allowed
   to feel like a temple rather than a price list. Out-specifies the generic
   white-panel rule in section 8. */
.entry-content > .wp-block-group.dragon-legend {
	position: relative;
	overflow: hidden;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	background:
		radial-gradient(80% 100% at 20% 0%, rgba(156, 133, 59, 0.26), transparent 60%),
		radial-gradient(70% 90% at 90% 100%, rgba(12, 101, 107, 0.55), transparent 65%),
		linear-gradient(165deg, var(--wp--preset--color--primary-deep), var(--wp--preset--color--ink));
	color: rgba(255, 255, 255, 0.8);
}

.dragon-legend h2 {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-family: var(--wp--preset--font-family--serif);
	color: #fff;
}

.dragon-legend__lead {
	max-width: 34ch;
	margin: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--50);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--x-large);
	font-style: italic;
	line-height: 1.35;
	color: rgba(255, 255, 255, 0.94);
}

/* A rule that fades out from the lead, rather than a hard divider. */
.dragon-legend__lead::after {
	content: "";
	display: block;
	width: 8rem;
	height: 1px;
	margin-top: var(--wp--preset--spacing--30);
	background: linear-gradient(90deg, var(--wp--preset--color--accent), transparent);
}

.entry-content > .wp-block-group.dragon-legend p {
	max-width: 60ch;
	line-height: 1.75;
}

.dragon-legend__quote {
	margin: var(--wp--preset--spacing--40) 0;
	padding-left: var(--wp--preset--spacing--30);
	border-left: 2px solid var(--wp--preset--color--accent);
	font-family: var(--wp--preset--font-family--serif);
	font-size: var(--wp--preset--font-size--large);
	font-style: italic;
	color: rgba(255, 255, 255, 0.92);
}

.dragon-legend__close {
	color: rgba(255, 255, 255, 0.68);
}

.dragon-legend__figure {
	margin: 0;
}

.dragon-legend__figure img {
	width: 100%;
	height: auto;
	border-radius: 18px;
	filter: saturate(0.88) contrast(1.02) brightness(0.96);
	box-shadow:
		0 30px 60px -30px rgba(0, 0, 0, 0.8),
		inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* A held breath of light behind the pair. */
.dragon-legend__art {
	position: relative;
}

.dragon-legend__art::before {
	content: "";
	position: absolute;
	inset: -12% -8% 10%;
	background: radial-gradient(60% 50% at 50% 40%, rgba(156, 133, 59, 0.22), transparent 70%);
	pointer-events: none;
}

/* Overlapped and inset, so the pair reads as one arrangement instead of two
   stacked pictures. Needs to out-specify the three-class image rule that
   section 8 applies to every figure inside a columns block. */
.entry-content .dragon-legend .dragon-legend__art .dragon-legend__figure--offset {
	margin: calc(-1 * var(--wp--preset--spacing--50)) 0 0 var(--wp--preset--spacing--50);
}

@media (max-width: 781px) {
	/* The columns block has stacked by now, so the pair sits side by side
	   instead of running the section on for another two screens. */
	.dragon-legend__art {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--20);
		align-items: start;
	}

	.entry-content .dragon-legend .dragon-legend__art .dragon-legend__figure--offset {
		margin: 0;
	}
}

@media (max-width: 600px) {
	/* Two-up on a phone leaves each picture too small to carry the mood. */
	.dragon-legend__art {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--30);
	}
}

/* -------------------------------------------------------------------------
   13. Call to action
   ---------------------------------------------------------------------- */

/* Out-specifies the generic panel rule in section 8, which paints every
   top-level group white. */
.entry-content > .wp-block-group.dragon-cta {
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	background:
		radial-gradient(90% 120% at 50% 0%, rgba(156, 133, 59, 0.3), transparent 62%),
		var(--wp--preset--color--primary);
	color: rgba(255, 255, 255, 0.88);
	text-align: center;
}

.dragon-cta > * {
	margin-inline: auto;
}

.dragon-cta h2 {
	margin: var(--wp--preset--spacing--20) 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--serif);
	color: #fff;
}

.entry-content > .wp-block-group.dragon-cta > p {
	max-width: 46ch;
	margin-inline: auto;
}

.dragon-cta .dragon-status {
	display: inline-flex;
}

.dragon-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	margin-top: var(--wp--preset--spacing--40);
}

.dragon-cta__call {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.9rem 1.9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	/* White on gold is 3.6:1 — under AA at body size, but the label clears the
	   large-text threshold at 1.2rem bold, where 3:1 is the bar. */
	font-size: 1.2rem;
	font-weight: 700;
	text-decoration: none;
}

.dragon-cta__call::before {
	content: "";
	width: 1em;
	height: 1em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: var(--dragon-icon-phone) center / contain no-repeat;
	mask: var(--dragon-icon-phone) center / contain no-repeat;
}

/* Hover goes darker, not lighter: a paler gold under white text would drop
   below 3:1. */
.dragon-cta__call:hover,
.dragon-cta__call:focus {
	background: var(--wp--preset--color--accent-deep);
}

.dragon-cta__link {
	color: rgba(255, 255, 255, 0.9);
	text-underline-offset: 0.25em;
}

.dragon-cta .dragon-cta__note {
	margin-top: var(--wp--preset--spacing--30);
	color: rgba(255, 255, 255, 0.8);
}

/* -------------------------------------------------------------------------
   14. Icons (inline masks — avoids loading an icon font)
   ---------------------------------------------------------------------- */

:root {
	--dragon-icon-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8L19 6.8z"/></svg>');
	--dragon-icon-phone: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black"><path d="M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C11.1 21 3 12.9 3 3c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z"/></svg>');
}