/*
Theme Name: MyHair Clinic v2
Theme URI: https://myhairclinic.com.au
Author: MyHair Clinic
Description: Stand-alone theme for MyHair Clinic Sydney. Tokens, typography and block styles live in theme.json and styles/blocks; page sections are block patterns; this stylesheet only styles the site frame (header, menu, hero slider, footer) and the third-party form.
Version: 2.5.1
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: myhairclinic-v2
*/

/*
 * Cascade notes
 * - theme.json supplies colours, type, spacing and the block style variations; this file uses those values through the
 *   --wp--preset--* / --wp--custom--* variables and never repeats a literal that exists as a token.
 * - Core block CSS and the global-styles sheet are unlayered, so anything placed in an @layer would lose to them.
 *   Only the resets below are layered (so every other rule, core included, wins over them); everything else is
 *   unlayered and wins by order and by selecting our own class names. A few scoped !important rules are retained only where
 *   WordPress emits higher-priority block colour utilities that would otherwise defeat the documented surface roles.
 */
@layer mhc-base {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	html {
		background: var(--wp--preset--color--ink);
		-webkit-text-size-adjust: 100%;
	}

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

	img,
	video,
	iframe {
		max-width: 100%;
	}

	img {
		height: auto;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* The header is fixed: a focused field or an anchor target must not end up behind it. */
html {
	scroll-padding-top: 6.5rem;
}

body.menu-open,
body.dialog-open {
	overflow: hidden;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--green);
	outline-offset: 3px;
}

/* Green is intentionally reserved for dark surfaces here: it does not provide a strong enough focus indicator on cream. */
.is-style-cream-band :focus-visible,
.has-cream-background-color :focus-visible {
	outline-color: var(--wp--preset--color--ink);
}

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

.skip-link {
	position: absolute;
	top: 0.5rem;
	left: -999px;
	z-index: 100;
	padding: 0.625rem 1rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.skip-link:focus {
	left: 0.5rem;
}

/* Content that is not inside a section group (a stray paragraph at the top level) still gets a readable column. */
.entry-content > :where(:not(.alignfull, .alignwide)) {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--gutter);
}

/* ============================================================
   Pills: the small buttons of the header and hero (content buttons are core Button blocks)
   ============================================================ */
.mhc-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.8125rem 1.375rem;
	border: 1px solid transparent;
	border-radius: var(--wp--preset--border-radius--pill);
	font: 600 var(--wp--preset--font-size--small) / 1.2 var(--wp--preset--font-family--manrope);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.mhc-pill.is-green {
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

.mhc-pill.is-green:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.mhc-pill.is-cream {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.mhc-pill.is-cream:hover {
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

.mhc-pill.is-line {
	border-color: var(--wp--custom--line--strong);
	background: none;
	color: var(--wp--preset--color--cream);
}

.mhc-pill.is-line:hover {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.mhc-pill.is-ghost {
	border-color: var(--wp--custom--line--soft);
	background: var(--wp--custom--glass--strong);
	color: var(--wp--preset--color--cream);
	font-weight: 500;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

@media (prefers-reduced-motion: no-preference) {
	.mhc-pill {
		transition: background-color 0.3s, color 0.3s, border-color 0.3s;
	}
}

/* ============================================================
   Header and full-screen menu
   ============================================================ */
.site-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1.375rem var(--wp--preset--spacing--gutter);
	color: var(--wp--preset--color--cream);
}

/* Keep the menu toggle clickable above the open overlay; the rest of the header is inerted by theme.js. */
.menu-open .site-header {
	z-index: 70;
}

.admin-bar .site-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}

.site-header.is-solid {
	padding-block: 0.875rem;
	background: rgba(18, 18, 17, 0.86);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
}

@media (prefers-reduced-motion: no-preference) {
	.site-header {
		transition: background-color 0.3s, padding 0.3s;
	}
}

/* On the home page the logo is the page's h1 (header.php): it must look exactly like the div it is on every other page. */
.site-logo {
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	line-height: normal;
}

.site-logo .custom-logo-link,
.site-logo__text {
	display: flex;
	align-items: center;
	min-height: 2.875rem;
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}

/* The original two-colour logo uses charcoal letters; the v4 header is transparent, so restore the light logo treatment. */
.site-logo .custom-logo {
	display: block;
	width: 6.75rem;
	height: auto;
	filter: invert(1) hue-rotate(180deg) brightness(1.18);
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

@media (max-width: 800px) {
	.site-header__link {
		display: none;
	}
}

.menu-toggle {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	height: 2.875rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font: 600 var(--wp--preset--font-size--small) var(--wp--preset--font-family--manrope);
	cursor: pointer;
}

.menu-toggle__bars {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.menu-toggle__bars i {
	display: block;
	width: 16px;
	height: 2px;
	background: var(--wp--preset--color--ink);
}

.menu-toggle__bars i + i {
	width: 10px;
}

.menu-toggle__label {
	display: inline-grid;
}

.menu-toggle__label > span {
	grid-area: 1 / 1;
	transform: translateY(0);
}

.menu-toggle__close {
	opacity: 0;
	transform: translateY(0.4rem);
}

.menu-open .menu-toggle__bars i:first-child {
	transform: translateY(3px) rotate(45deg);
}

.menu-open .menu-toggle__bars i + i {
	width: 16px;
	transform: translateY(-3px) rotate(-45deg);
}

.menu-open .menu-toggle__open {
	opacity: 0;
	transform: translateY(-0.4rem);
}

.menu-open .menu-toggle__close {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: no-preference) {
	.menu-toggle__bars i {
		transform-origin: center;
		transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1), width 0.4s;
	}

	.menu-toggle__label > span {
		transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.65, 0, 0.35, 1);
	}
}

.site-menu {
	position: fixed;
	inset: 0;
	z-index: 55;
	overflow: auto;
	padding: 7.5rem var(--wp--preset--spacing--gutter) 3rem;
	background: var(--wp--preset--color--ink);
	opacity: 0;
	visibility: hidden;
}

.site-menu__close {
	position: absolute;
	top: 1.25rem;
	right: var(--wp--preset--spacing--gutter);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.625rem 0.875rem;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--preset--border-radius--pill);
	background: transparent;
	color: var(--wp--preset--color--cream);
	font: 600 var(--wp--preset--font-size--small) / 1 var(--wp--preset--font-family--manrope);
	cursor: pointer;
}

.site-menu__close > span:first-child {
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 0.75;
}

.site-menu__close:hover {
	border-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

.site-menu.is-open {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
	.site-menu {
		transition: opacity 0.3s ease, visibility 0s linear 0.3s;
	}

	.site-menu.is-open {
		transition-delay: 0s;
	}
}

.site-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-menu__list {
	max-width: 1300px;
	margin-inline: auto;
}

.site-menu a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
}

.site-menu a:hover {
	color: var(--wp--preset--color--green);
}

.site-menu__list > li > a {
	display: block;
	font: 500 clamp(2.5rem, 6.5vw, 5.5rem) / 1.04 var(--wp--preset--font-family--bricolage);
	letter-spacing: -0.035em;
}

.site-menu .sub-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.375rem 0 1rem;
}

.site-menu .sub-menu a {
	display: block;
	padding: 0.5625rem 1rem;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: var(--wp--preset--border-radius--pill);
	font-size: var(--wp--preset--font-size--small);
}

.site-menu .sub-menu a:hover {
	border-color: var(--wp--preset--color--green);
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

.site-menu .sub-menu .sub-menu {
	display: none; /* Two levels only. */
}

/* Without JavaScript the menu is a plain list under the header. */
html:not(.js) .site-menu {
	position: static;
	padding-top: 6.25rem;
	opacity: 1;
	visibility: visible;
}

html:not(.js) .menu-toggle {
	display: none;
}

html:not(.js) .site-menu__close {
	display: none;
}

/* ============================================================
   Home hero slider
   ============================================================ */
.hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 680px;
	overflow: hidden;
	background: var(--wp--preset--color--panel);
}

.hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
}

.hero__slide.is-active {
	opacity: 1;
	visibility: visible;
}

@media (prefers-reduced-motion: no-preference) {
	.hero__slide {
		transition: opacity 1.2s ease, visibility 1.2s;
	}

	.hero__slide.is-active .hero__img {
		animation: mhc-zoom 6s ease-out both;
	}

	.hero__slide.is-active .hero__eyebrow,
	.hero__slide.is-active .hero__title,
	.hero__slide.is-active .hero__card {
		animation: mhc-hero-enter 0.8s var(--wp--custom--ease) both;
	}

	.hero__slide.is-active .hero__title {
		animation-delay: 80ms;
	}

	.hero__slide.is-active .hero__card {
		animation-delay: 160ms;
	}
}

.hero__media,
.hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.hero__img {
	object-fit: cover;
	object-position: center 30%;
}

.hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--wp--custom--shade--side), transparent 78%),
		linear-gradient(var(--wp--custom--shade--top), var(--wp--custom--shade--mid) 35%, var(--wp--custom--shade--bottom));
}

.hero__content {
	position: absolute;
	inset: 6.5rem var(--wp--preset--spacing--gutter) 6.25rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1.25rem;
}

.hero__eyebrow {
	align-self: flex-start;
	margin: 0;
	padding: 0.4375rem 0.875rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
	font: 600 var(--wp--preset--font-size--x-small) var(--wp--preset--font-family--manrope);
}

.hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.5rem;
}

.hero__title {
	flex: 1 1 520px;
	max-width: 11ch;
	margin: 0;
	font-size: clamp(2.375rem, min(9.5vw, 9vh), 10.625rem);
	line-height: 0.9;
	letter-spacing: -0.045em;
	color: var(--wp--preset--color--cream);
}

.hero__card {
	flex: 0 1 380px;
	padding: 1.25rem;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--custom--glass--card);
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
}

.hero__card p {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--cream);
	font-size: 0.9375rem;
	line-height: 1.55;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.hero__controls {
	position: absolute;
	right: var(--wp--preset--spacing--gutter);
	bottom: 2.25rem;
	left: var(--wp--preset--spacing--gutter);
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 1.25rem;
}

.hero__controls[hidden] {
	display: none;
}

.hero__count {
	margin: 0;
	font: 0.9375rem var(--wp--preset--font-family--bricolage);
	font-variant-numeric: tabular-nums;
}

.hero__count strong {
	font-size: 1.375rem;
}

.hero__count span {
	color: var(--wp--preset--color--cream-muted);
}

.hero__dots {
	display: flex;
	flex: 1;
	gap: 0.5rem;
	max-width: 360px;
}

.hero__dots button {
	position: relative;
	flex: 1;
	height: 1.375rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.hero__dots span {
	position: absolute;
	inset: 10px 0 auto;
	height: 3px;
	border-radius: 3px;
	background: var(--wp--custom--line--strong);
}

.hero__dots span::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 3px;
	background: var(--wp--preset--color--green);
}

.hero__dots .is-done span::after,
.hero__dots .is-active span::after {
	width: 100%;
}

/* The progress bar is the slide timer: theme.js moves on when its animation ends (and not at all with reduced motion). */
@media (prefers-reduced-motion: no-preference) {
	.hero__dots .is-active span::after {
		animation: mhc-progress 6s linear both;
	}

	.hero.is-paused .hero__dots .is-active span::after {
		animation-play-state: paused;
	}
}

.hero__arrows {
	display: flex;
	gap: 0.5rem;
	margin-left: auto;
}

.hero__arrows button {
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 1px solid var(--wp--custom--line--strong);
	border-radius: 50%;
	background: rgba(18, 18, 17, 0.4);
	color: var(--wp--preset--color--cream);
	font-size: 1.125rem;
	cursor: pointer;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.hero__arrows [data-next] {
	border: 0;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.hero__arrows button[hidden] {
	display: none; /* The display rule above would otherwise show a pause button the script hid for reduced motion. */
}

.hero__pause {
	font-size: 0.6875rem;
	letter-spacing: -0.1em;
}

@keyframes mhc-zoom {
	from {
		transform: scale(1.1);
	}

	to {
		transform: scale(1);
	}
}

@keyframes mhc-hero-enter {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mhc-progress {
	from {
		width: 0;
	}

	to {
		width: 100%;
	}
}

@media (max-width: 800px) {
	.hero__content {
		inset-block: 5.625rem 6.875rem;
	}

	/* On phones the headline sits higher up the photo, so the lower shade starts earlier (keeps the cream headline readable). */
	.hero__media::after {
		background: linear-gradient(var(--wp--custom--shade--top), var(--wp--custom--shade--mid) 22%, var(--wp--custom--shade--lower) 50%, var(--wp--custom--shade--bottom));
	}
}

/* Services band under the hero. */
.marquee {
	overflow: hidden;
	padding: 1.75rem 0;
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

/* The v4 reference uses a cream canvas behind the dark hero and green bands. */
.home .site-main {
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.home .entry-content {
	color: var(--wp--preset--color--ink);
}

.home .entry-content > .wp-block-group > .wp-block-heading,
.home .entry-content > .wp-block-group > .is-style-eyebrow,
.home .entry-content > .wp-block-group > .is-style-section-head > .wp-block-heading,
.home .entry-content > .wp-block-group > .is-style-cta-row > .wp-block-heading,
.home .entry-content > .wp-block-group > .wp-block-columns .wp-block-heading {
	color: var(--wp--preset--color--ink);
}

.home .entry-content > .wp-block-group:first-child > .wp-block-columns :is(.has-cream-color, .has-cream-70-color) {
	color: var(--wp--preset--color--ink) !important;
}

.home .entry-content > .wp-block-group:nth-child(2) > .is-style-section-head .has-cream-75-color {
	color: var(--wp--preset--color--ink);
	opacity: 0.8;
}

.marquee__track {
	display: flex;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--cream);
}

.marquee__track li {
	padding-right: 2.5rem;
	font: 500 clamp(1.75rem, 4vw, 3.25rem) / normal var(--wp--preset--font-family--bricolage);
	letter-spacing: -0.03em;
	white-space: nowrap;
	color: inherit;
}

.marquee__track li::after {
	content: "✦";
	content: "✦" / "";
	margin-left: 2.5rem;
}

@media (prefers-reduced-motion: no-preference) {
	.marquee__track {
		animation: mhc-marquee 38s linear infinite;
	}

	.marquee:hover .marquee__track {
		animation-play-state: paused;
	}
}

@media (prefers-reduced-motion: no-preference) {
	.js .site-menu.is-open .site-menu__list > li {
		animation: mhc-menu-enter 0.45s var(--wp--custom--ease) both;
	}

	.js .site-menu.is-open .site-menu__list > li:nth-child(2) { animation-delay: 50ms; }
	.js .site-menu.is-open .site-menu__list > li:nth-child(3) { animation-delay: 100ms; }
	.js .site-menu.is-open .site-menu__list > li:nth-child(4) { animation-delay: 150ms; }
	.js .site-menu.is-open .site-menu__list > li:nth-child(5) { animation-delay: 200ms; }
}

@keyframes mhc-menu-enter {
	from {
		opacity: 0;
		transform: translateY(0.75rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mhc-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* ============================================================
   Inner pages: pinned hero, then the content panel slides up over it
   ============================================================ */
.page-hero {
	position: sticky;
	top: 0;
	z-index: 0;
	height: clamp(34rem, 78svh, 48rem);
	overflow: hidden;
	background: var(--wp--preset--color--panel);
}

.page-hero__media {
	position: absolute;
	inset: -6% 0;
	will-change: transform;
}

.page-hero__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.page-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, var(--wp--custom--shade--side), transparent 78%),
		linear-gradient(var(--wp--custom--shade--top), var(--wp--custom--shade--mid) 35%, var(--wp--custom--shade--bottom));
}

.page-hero__inner {
	position: absolute;
	inset: 6.5rem var(--wp--preset--spacing--gutter) 3rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 1.25rem;
}

.breadcrumbs {
	display: inline-flex;
	max-width: 100%;
	box-sizing: border-box;
	align-self: flex-start;
	padding: 0.4375rem 0.875rem;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
	font: 600 var(--wp--preset--font-size--x-small) var(--wp--preset--font-family--manrope);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumbs li + li::before {
	content: "/";
	content: "/" / "";
	margin-right: 0.375rem;
}

.breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.page-hero__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2.5rem;
}

.page-hero__title {
	flex: 1 1 420px;
	margin: 0;
	font-size: clamp(3.65625rem, 11.25vw, 10.125rem);
	line-height: 0.88;
	letter-spacing: -0.05em;
	color: var(--wp--preset--color--cream);
}

.page-hero--long-title .page-hero__title {
	font-size: var(--wp--preset--font-size--display-lg);
}

.page-hero__tag {
	flex: 0 1 360px;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--wp--custom--line--soft);
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--custom--glass--card);
	color: var(--wp--preset--color--cream);
	font: 300 1.625rem / 1.1 var(--wp--preset--font-family--bricolage);
	letter-spacing: -0.02em;
	-webkit-backdrop-filter: blur(22px);
	backdrop-filter: blur(22px);
}

.page-panel {
	position: relative;
	z-index: 2;
	margin-top: calc(var(--wp--preset--border-radius--panel) * -1);
	padding-top: var(--wp--custom--panel--padding-top);
	border-radius: var(--wp--preset--border-radius--panel) var(--wp--preset--border-radius--panel) 0 0;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

/* Inner pages use the same cream content canvas as the v4 home surface. Component styles below keep their own dark, green,
   and white roles, so this only changes the unboxed page content around them. */
.has-page-hero .page-panel > .wp-block-group:not(.is-style-cream-band):not(.is-style-green-band) {
	color: var(--wp--preset--color--ink);
}

.has-page-hero .page-panel > .wp-block-group:not(.is-style-cream-band):not(.is-style-green-band) :is(h1, h2, h3, h4, h5, h6, p, li, figcaption, blockquote) {
	color: var(--wp--preset--color--ink);
}

.has-page-hero .page-panel > .wp-block-group:not(.is-style-cream-band):not(.is-style-green-band) :is(.has-cream-color, .has-cream-65-color, .has-cream-70-color, .has-cream-75-color, .has-cream-80-color) {
	color: var(--wp--preset--color--ink-muted) !important;
}

/* The header image drifts and the title fades while the panel covers the hero. Scroll-driven, so there is nothing to run
   in JavaScript; browsers without support, and visitors who prefer reduced motion, get the still hero. */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.page-hero__media {
			animation: mhc-hero-drift linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 78svh;
		}

		.page-hero__inner {
			animation: mhc-hero-fade linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 55vh;
		}
	}
}

@keyframes mhc-hero-drift {
	to {
		transform: translateY(8%) scale(1.08);
	}
}

@keyframes mhc-hero-fade {
	to {
		opacity: 0;
		visibility: hidden; /* Fully faded means out of the tab order too: the panel is covering it. */
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-hero {
		position: relative;
	}
}

@media (max-width: 800px) {
	.page-hero__media::after {
		background:
			linear-gradient(90deg, var(--wp--custom--shade--side), transparent 90%),
			linear-gradient(var(--wp--custom--shade--top), var(--wp--custom--shade--mid) 35%, var(--wp--custom--shade--bottom));
	}

	.page-hero__img {
		object-position: 45% center;
	}
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
	position: relative;
	z-index: 2;
	margin: 0;
	padding: clamp(0.75rem, 1.5vw, 1.25rem);
	border-radius: 0;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--white);
}

.site-footer__inner {
	max-width: none;
	box-sizing: border-box;
	margin-inline: auto;
	padding: clamp(3.5rem, 6vw, 5rem) clamp(1rem, 1.5vw, 1.25rem) 2.25rem;
	border-radius: var(--wp--preset--border-radius--xl);
	background: var(--wp--preset--color--green);
	overflow: hidden;
}

.site-footer .site-footer__brand {
	margin: 0 0 clamp(3rem, 5vw, 4rem);
	font: 700 clamp(4rem, 13vw, 13rem) / 0.82 var(--wp--preset--font-family--bricolage);
	letter-spacing: -0.06em;
	white-space: nowrap;
	color: var(--wp--preset--color--white);
}

.site-footer .site-footer__brand span {
	font-weight: 300;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(max(210px, calc(25% - 27px)), 1fr));
	gap: 2.25rem;
	padding-top: 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.28);
	font-size: 0.9375rem;
	line-height: 1.7;
}

.site-footer address {
	font-style: normal;
}

.site-footer p {
	margin: 0;
	font: inherit;
}

.site-footer a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.site-footer a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .site-footer__copy {
	margin-top: 3rem;
	color: rgba(255, 255, 255, 0.72);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: normal;
}

/* Fallback templates (blog index, search, 404). */
.plain__inner {
	max-width: 1100px;
	margin-inline: auto;
	padding: 8.75rem var(--wp--preset--spacing--gutter) 5rem;
}

.plain h1 {
	font-size: clamp(2.5rem, 6vw, 5rem);
}

@media (max-width: 800px) {
	.page-panel,
	.site-footer {
		border-radius: 2rem;
	}

	.site-footer {
		border-radius: 0;
	}

	.site-footer__inner {
		border-radius: 1.5rem;
	}

	.site-footer .site-footer__brand {
		font-size: clamp(3.25rem, 16vw, 7rem);
		white-space: normal;
		word-break: normal;
	}

	.page-panel {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

/* ============================================================
   Contact Form 7 (plugin markup, styled in place: no DOM moves)
   ============================================================ */
.wpcf7 {
	--mhc-field-bg: var(--wp--preset--color--panel);
	--mhc-field-fg: var(--wp--preset--color--cream);
	--mhc-field-line: var(--wp--custom--line--soft);
	--mhc-submit-bg: var(--wp--preset--color--green);
	--mhc-submit-fg: var(--wp--custom--on-green);
	--mhc-submit-hover-bg: var(--wp--preset--color--cream);
	--mhc-submit-hover-fg: var(--wp--preset--color--ink);
	--mhc-label-fg: var(--wp--preset--color--cream);
	--mhc-error: #ff9a8a;
	--mhc-form-gap: 0.625rem;
	--mhc-focus-ring: var(--wp--preset--color--cream);
}

.is-style-cream-band .wpcf7 {
	--mhc-field-bg: rgba(255, 255, 255, 0.55);
	--mhc-field-fg: var(--wp--preset--color--ink);
	--mhc-field-line: rgba(18, 18, 17, 0.35);
	--mhc-submit-bg: var(--wp--preset--color--ink);
	--mhc-submit-fg: var(--wp--preset--color--cream);
	--mhc-submit-hover-bg: var(--wp--preset--color--deep-green);
	--mhc-submit-hover-fg: var(--wp--preset--color--cream);
	--mhc-label-fg: var(--wp--preset--color--ink);
	--mhc-error: #a52a1c;
	--mhc-form-gap: 0.75rem;
	--mhc-focus-ring: var(--wp--preset--color--ink);
}

/* Ordinary page panels are cream, so their form labels need ink for readable contrast. */
.has-page-hero .page-panel .wpcf7 {
	--mhc-label-fg: var(--wp--preset--color--ink);
	--mhc-focus-ring: var(--wp--preset--color--ink);
}

.has-page-hero .page-panel :is(.is-style-cream-band, .is-style-green-band, .is-style-panel, .has-panel-2-background-color) .wpcf7 {
	--mhc-label-fg: var(--wp--preset--color--cream);
	--mhc-focus-ring: var(--wp--preset--color--cream);
}

.wpcf7 form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--mhc-form-gap) 1rem;
	max-width: 35rem;
}

.wpcf7 form > * {
	flex: 1 0 100%;
	margin: 0;
}

/* The plugin wraps nothing around the empty spacer paragraphs it prints; they would still take a gap each. */
.wpcf7 form > p:empty {
	display: none;
}

/* Keep the anti-spam check before the submit control so the action reads naturally. */
.wpcf7 form > p:has(> input[type="submit"]) {
	flex: 0 0 auto;
	order: 2;
}

.wpcf7 form > .cf7-cf-turnstile {
	flex: 0 0 100%;
	order: 1;
	margin: 0 0 var(--mhc-form-gap) !important;
}

.wpcf7 form > .wpcf7-response-output {
	order: 3;
}

.wpcf7 label {
	display: flex;
	flex-direction: column;
	gap: var(--mhc-form-gap);
	line-height: normal;
	color: var(--mhc-label-fg);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
}

.wpcf7 br {
	display: none;
}

.wpcf7 .wpcf7-form-control-wrap {
	display: block;
	font-weight: 400;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
	display: block;
	width: 100%;
	margin: 0 0 0.375rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--mhc-field-line);
	border-radius: var(--wp--preset--border-radius--sm);
	background: var(--mhc-field-bg);
	color: var(--mhc-field-fg);
	font: 400 1rem var(--wp--preset--font-family--manrope);
}

.wpcf7 textarea {
	height: 6.25rem;
	min-height: 0;
	margin-bottom: 0.75rem;
	resize: vertical;
}

.wpcf7 ::placeholder {
	color: var(--mhc-field-fg);
	opacity: 0.78;
}

.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible {
	border-color: var(--wp--preset--color--green);
	outline: 2px solid var(--mhc-focus-ring);
	outline-offset: 2px;
}

.wpcf7 input[type="submit"] {
	padding: 1.125rem 2.125rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--mhc-submit-bg);
	color: var(--mhc-submit-fg);
	font: 600 0.9375rem var(--wp--preset--font-family--manrope);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.wpcf7 input[type="submit"]:hover {
	background: var(--mhc-submit-hover-bg);
	color: var(--mhc-submit-hover-fg);
}

.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
	margin: 0.375rem 0 0;
	padding: 0;
	border: 0;
	color: var(--mhc-error);
	font-size: var(--wp--preset--font-size--x-small);
}

.wpcf7 .wpcf7-spinner {
	display: none;
}

.wpcf7 .cf-turnstile {
	margin: 0.25rem 0;
}

/* ============================================================
   Dialog (booking widget and photo viewer), opened by theme.js; without JavaScript the links simply navigate
   ============================================================ */
.mhc-dialog {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	padding: 3vh 3vw;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--ink);
}

.mhc-dialog[open] {
	display: grid;
	place-items: center;
}

.mhc-dialog::backdrop {
	background: rgba(18, 18, 17, 0.88);
}

.mhc-dialog__box {
	position: relative;
	width: min(1100px, 94vw);
	height: min(88vh, 900px);
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--md);
	background: var(--wp--preset--color--white);
	box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.mhc-dialog__box.is-image {
	width: auto;
	height: auto;
	max-width: 94vw;
	max-height: 88vh;
	background: none;
	box-shadow: none;
}

/* The gallery uses the same native dialog as booking, but becomes a quiet, cream full-screen portfolio view. */
.mhc-dialog.mhc-gallery-dialog {
	padding: 0;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
}

.mhc-dialog.mhc-gallery-dialog::backdrop {
	background: var(--wp--preset--color--cream);
}

.mhc-gallery-dialog .mhc-dialog__box {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	border-radius: 0;
	background: var(--wp--preset--color--cream);
	box-shadow: none;
	overflow: auto;
}

.mhc-gallery-dialog__scroll {
	min-height: 100%;
}

.mhc-gallery-dialog .mhc-dialog__close {
	position: fixed;
	top: clamp(1rem, 2vw, 2rem);
	right: clamp(1rem, 2vw, 2rem);
}

.mhc-gallery-dialog .is-style-photo-strip {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	grid-auto-rows: 1px;
	grid-auto-flow: dense;
	gap: clamp(0.75rem, 1.4vw, 1.5rem);
	padding: clamp(5rem, 8vw, 8rem) clamp(1rem, 4vw, 4rem) 6rem !important;
}

.mhc-gallery-dialog .is-style-photo-strip .wp-block-image,
.mhc-gallery-dialog .is-style-photo-strip .wp-block-image:nth-child(n) {
	display: block;
	width: 100%;
	height: auto;
	block-size: auto;
	min-height: 0;
	align-self: start;
	grid-column: auto;
	grid-row: auto;
	margin: 0;
	overflow: hidden;
}

.mhc-gallery-dialog .is-style-photo-strip .wp-block-image a,
.mhc-gallery-dialog .is-style-photo-strip .wp-block-image img {
	height: auto !important;
	block-size: auto !important;
	max-height: none !important;
	aspect-ratio: auto !important;
	object-fit: contain;
}

.mhc-gallery__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	margin: 0;
	padding: 0.85rem 1.2rem;
	border: 1px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--cream);
	font: 600 0.875rem var(--wp--preset--font-family--manrope);
	cursor: pointer;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.mhc-gallery__toggle::after {
	content: "↗";
	font-size: 1.1em;
	line-height: 1;
}

.mhc-gallery__toggle:hover,
.mhc-gallery__toggle:focus-visible {
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

.mhc-gallery__toggle:active {
	transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
	.mhc-gallery__toggle {
		transition: none;
	}
}

.mhc-dialog__box iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.mhc-dialog__box img {
	display: block;
	max-width: 94vw;
	max-height: 88vh;
	border-radius: var(--wp--preset--border-radius--md);
	object-fit: contain;
}

.mhc-dialog__close {
	position: absolute;
	top: 0.875rem;
	right: 0.875rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--cream);
	color: var(--wp--preset--color--ink);
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.mhc-dialog__close:hover {
	background: var(--wp--preset--color--green);
	color: var(--wp--custom--on-green);
}

/* Scroll reveal: only hidden once theme.js is running and motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
	.js .mhc-reveal {
		opacity: 0;
		transform: translateY(3.5rem);
		transition: opacity 0.95s var(--wp--custom--ease), transform 0.95s var(--wp--custom--ease);
		transition-delay: var(--mhc-reveal-delay, 0ms);
		will-change: opacity, transform;
	}

	.js .page-hero__inner > [data-mhc-reveal],
	.js .page-hero__row > [data-mhc-reveal] {
		animation: mhc-hero-enter 0.95s var(--wp--custom--ease) both;
	}

	.js .page-hero__row > [data-mhc-reveal] {
		animation-delay: 120ms;
	}

	.js .page-hero__row > [data-mhc-reveal]:nth-child(2) {
		animation-delay: 220ms;
	}

	.js .has-page-hero .page-panel {
		animation: mhc-panel-enter 1s var(--wp--custom--ease) 180ms both;
	}

	.js .mhc-reveal.is-visible {
		opacity: 1;
		transform: none;
	}

	.js .mhc-reveal:not(.is-visible) img {
		transform: scale(1.04);
	}

	.js .mhc-reveal img {
		transition: transform 1s var(--wp--custom--ease);
	}
}

@keyframes mhc-panel-enter {
	from {
		opacity: 0.2;
		transform: translateY(2rem);
	}

	to {
		opacity: 1;
		transform: none;
	}
}