/* =========================================================================
   MM8 Salon Template — front-end enhancements
   Layers an editorial, elevated-beauty register on top of theme.json: soft
   arched forms, a printed-menu treatment, a booking panel, gentle motion.
   All colours reference the theme.json palette via CSS custom properties, so
   a reskin needs no edits here.
   ========================================================================= */

:root {
	--mm8-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--mm8-shadow-soft: 0 2px 6px rgba(46, 33, 38, 0.04), 0 22px 50px -28px rgba(46, 33, 38, 0.22);
	--mm8-shadow-lift: 0 4px 12px rgba(46, 33, 38, 0.07), 0 40px 80px -32px rgba(46, 33, 38, 0.32);
	/* A soft arch used on portraits and feature images, a beauty-house motif. */
	--mm8-arch: 49% 49% 14px 14px / 34% 34% 3% 3%;
}

html { scroll-behavior: smooth; }

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

/* Atmosphere: two faint, warm light pools instead of a flat fill. Airy, not
   busy. Fixed so the page feels like it sits on a softly lit surface. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(60% 50% at 82% 8%, rgba(236, 215, 204, 0.55) 0%, rgba(236, 215, 204, 0) 60%),
		radial-gradient(55% 45% at 6% 88%, rgba(142, 156, 134, 0.16) 0%, rgba(142, 156, 134, 0) 60%);
}
.wp-site-blocks { position: relative; z-index: 1; }

/* -------------------------------------------------------------------------
   Buttons — refine the pill, define the outline style for light & dark
   ------------------------------------------------------------------------- */
.wp-block-button__link {
	transition: background-color 0.3s var(--mm8-ease), color 0.3s var(--mm8-ease), transform 0.3s var(--mm8-ease), box-shadow 0.3s var(--mm8-ease);
	box-shadow: 0 10px 24px -16px rgba(160, 90, 72, 0.7);
}
.wp-block-button__link:hover { transform: translateY(-2px); }

.wp-block-button.is-style-outline .wp-block-button__link {
	border-radius: 999px;
	border-width: 1px;
	background: transparent;
	box-shadow: none;
	padding: 1.05rem 2.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--rosewood);
	color: var(--wp--preset--color--ivory) !important;
	border-color: var(--wp--preset--color--rosewood);
}

/* -------------------------------------------------------------------------
   Header
   ------------------------------------------------------------------------- */
.mm8-header {
	position: sticky;
	top: 0;
	z-index: 50;
	backdrop-filter: saturate(115%) blur(12px);
	-webkit-backdrop-filter: saturate(115%) blur(12px);
	background-color: rgba(250, 244, 239, 0.78);
	border-bottom: 1px solid rgba(74, 60, 54, 0.07);
}
.mm8-header > .alignwide { max-width: 1500px; }
.mm8-header .wp-block-navigation a {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--cocoa);
	transition: color 0.25s var(--mm8-ease);
}
.mm8-header .wp-block-navigation a:hover { color: var(--wp--preset--color--rosewood); }

/* The header Book Now button stays compact and quietly emphatic. */
.mm8-book-btn .wp-block-button__link { padding-top: 0.8rem; padding-bottom: 0.8rem; }

/* Wordmark placeholder. Hides once a real Site Logo image is set. */
.mm8-logo-placeholder {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.85rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	color: var(--wp--preset--color--cocoa);
	white-space: nowrap;
}
body.wp-custom-logo .mm8-logo-placeholder { display: none; }
.mm8-header .custom-logo { max-height: 52px; width: auto; }

/* -------------------------------------------------------------------------
   Mobile header & floating Book button
   On mobile the header is just the logo (far left) and the hamburger (far
   right). Booking moves to a single floating action button pinned to the
   bottom-right, reachable at any scroll position. All scoped to mobile (below
   600px, matching where core swaps the inline nav for the hamburger), so the
   desktop header is left exactly as it is.
   ------------------------------------------------------------------------- */
/* Hidden by default; !important beats the block's own .wp-block-buttons flex
   rule so it never leaks onto desktop. */
.mm8-fab { display: none !important; }

@media (max-width: 599.98px) {
	/* Clean mobile bar: drop the in-bar Book Now and send the hamburger to the
	   far right, leaving only the logo and the toggle with comfortable gutters. */
	.mm8-header .mm8-book-btn { display: none; }
	.mm8-header .wp-block-navigation__responsive-container-open {
		padding: 0.6rem;
		margin: -0.4rem -0.5rem -0.4rem 0;
	}

	/* The header template-part wrapper is only as tall as the header, so the
	   inner sticky element has no room to pin. Make the wrapper itself sticky on
	   mobile (its parent .wp-site-blocks spans the whole page) so the bar pins at
	   every scroll position. Scoped to mobile so desktop is left exactly as is. */
	.wp-site-blocks > header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 50;
	}
	.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; }

	/* Opaque header background so it sits solidly on top of all page content and
	   fully covers whatever scrolls beneath it, with nothing bleeding above or
	   through. The desktop header keeps its frosted, translucent look. */
	.mm8-header {
		background-color: var(--wp--preset--color--porcelain);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* Floating Book button: pinned bottom-right, elevated above page content,
	   restrained and on brand. The accent lives on the pill, with a soft shadow
	   so it reads as intentionally raised. */
	.mm8-fab {
		display: flex !important;
		position: fixed;
		right: 20px;
		bottom: 20px;
		z-index: 60;
		margin: 0;
	}
	.mm8-fab .wp-block-button__link {
		padding: 0.95rem 1.9rem;
		box-shadow: 0 10px 28px -8px rgba(46, 33, 38, 0.45), 0 2px 6px rgba(46, 33, 38, 0.22);
	}
}

/* -------------------------------------------------------------------------
   Eyebrow label (small, widely tracked kicker above headings)
   ------------------------------------------------------------------------- */
.mm8-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: 0.72rem;
	font-weight: 500;
	color: var(--wp--preset--color--rosewood);
	margin-bottom: 0.35rem;
}
.mm8-eyebrow.has-blush-color { color: var(--wp--preset--color--blush); }
/* A small centred flourish for centred eyebrows. */
.mm8-eyebrow.has-text-align-center::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 1px;
	margin: 0.85rem auto 0;
	background: currentColor;
	opacity: 0.5;
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.mm8-hero { position: relative; overflow: hidden; }
.mm8-hero .wp-block-cover__inner-container { width: 100%; }
.mm8-hero h1 {
	text-wrap: balance;
	font-weight: 500;
}
.mm8-hero .mm8-eyebrow::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 1px;
	margin-top: 0.9rem;
	background: var(--wp--preset--color--blush);
	opacity: 0.7;
}
.mm8-hero-note { font-weight: 400; letter-spacing: 0.04em; opacity: 0.92; }

/* -------------------------------------------------------------------------
   Section rhythm
   ------------------------------------------------------------------------- */
.mm8-section { padding-block: var(--wp--preset--spacing--70); position: relative; }
.mm8-intro { padding-block: var(--wp--preset--spacing--80); }
.mm8-pillars .wp-block-column { position: relative; }
.mm8-pillars .wp-block-column + .wp-block-column::before {
	content: "";
	position: absolute;
	left: calc(var(--wp--preset--spacing--50) / -2);
	top: 10%;
	height: 80%;
	width: 1px;
	background: rgba(74, 60, 54, 0.12);
}
@media (max-width: 781px) {
	.mm8-pillars .wp-block-column + .wp-block-column::before { display: none; }
}

/* -------------------------------------------------------------------------
   Service menu — the centrepiece, treated like a printed menu
   ------------------------------------------------------------------------- */
.mm8-menu-grouphead h3 {
	color: var(--wp--preset--color--rosewood);
	position: relative;
	padding-bottom: 0.75rem;
}
.mm8-menu-grouphead h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, rgba(160, 90, 72, 0.45), rgba(160, 90, 72, 0));
}
.mm8-menu-item {
	padding-bottom: 1.25rem;
	border-bottom: 1px solid rgba(74, 60, 54, 0.10);
}
.mm8-menu-group .mm8-menu-item:last-child { border-bottom: 0; padding-bottom: 0; }
.mm8-menu-head { align-items: baseline !important; }
.mm8-menu-head h4 { margin: 0; line-height: 1.2; }
.mm8-menu-head .mm8-leader {
	flex: 1 1 auto;
	min-width: 1.5rem;
	align-self: flex-end;
	margin-bottom: 0.4rem;
	border-bottom: 1px dotted rgba(160, 90, 72, 0.55);
}
.mm8-menu-price { margin: 0 !important; white-space: nowrap; font-size: 1.15rem; }
.mm8-menu-sub { align-items: baseline !important; }
.mm8-menu-sub p { margin: 0; }
.mm8-menu-dur {
	white-space: nowrap;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.72rem !important;
}
.mm8-menu-cols { --wp--style--block-gap: 0; }

/* -------------------------------------------------------------------------
   Stylists — arched portraits
   ------------------------------------------------------------------------- */
.mm8-stylist-photo {
	margin: 0;
	overflow: hidden;
	border-radius: var(--mm8-arch);
	box-shadow: var(--mm8-shadow-soft);
}
.mm8-stylist-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	transition: transform 0.7s var(--mm8-ease);
}
.mm8-stylist:hover .mm8-stylist-photo img { transform: scale(1.05); }
.mm8-stylist-role {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.74rem !important;
}

/* -------------------------------------------------------------------------
   Booking — the functional spine
   ------------------------------------------------------------------------- */
.mm8-booking { overflow: hidden; }
.mm8-booking-panel {
	background: rgba(250, 244, 239, 0.06);
	border: 1px solid rgba(250, 244, 239, 0.18);
	border-radius: 20px;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.55);
}
/* The placeholder shown until a live booking widget is configured. Reads as a
   finished panel, not a broken embed. */
.mm8-booking-placeholder {
	text-align: center;
	border: 1px dashed rgba(250, 244, 239, 0.30);
	border-radius: 14px;
	padding: clamp(2rem, 5vw, 3.25rem) 1.5rem;
	background: rgba(250, 244, 239, 0.03);
}
.mm8-booking-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(192, 136, 122, 0.18);
	color: var(--wp--preset--color--blush);
	margin-bottom: 1.25rem;
}
.mm8-booking-mark svg { width: 32px; height: 32px; }
.mm8-booking-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.3em;
	font-size: 0.7rem;
	font-weight: 500;
	color: var(--wp--preset--color--clay);
	margin: 0 0 0.6rem;
}
.mm8-booking-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2rem, 4vw, 2.6rem);
	font-weight: 500;
	line-height: 1.1;
	color: var(--wp--preset--color--porcelain);
	margin: 0 0 0.85rem;
}
.mm8-booking-copy {
	color: var(--wp--preset--color--blush);
	max-width: 30rem;
	margin: 0 auto 1.6rem;
	line-height: 1.7;
	font-weight: 300;
}
.mm8-booking-pill {
	display: inline-block;
	font-size: 0.74rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--porcelain);
	background: rgba(160, 90, 72, 0.55);
	border-radius: 999px;
	padding: 0.6rem 1.3rem;
}
/* When the live Square embed is present, let it fill the panel cleanly. */
.mm8-booking-live { width: 100%; }
.mm8-booking-live iframe { width: 100%; border: 0; border-radius: 10px; display: block; }

/* -------------------------------------------------------------------------
   Lookbook
   ------------------------------------------------------------------------- */
.mm8-look-grid.wp-block-gallery { gap: 1.25rem; }
.mm8-look-grid .wp-block-image,
.mm8-look-grid figure {
	overflow: hidden;
	border-radius: 14px;
	margin: 0;
}
.mm8-look-grid img {
	border-radius: 14px;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.8s var(--mm8-ease);
}
.mm8-look-grid .wp-block-image:hover img { transform: scale(1.07); }
.mm8-look-follow a {
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.78rem;
	font-weight: 500;
}

/* -------------------------------------------------------------------------
   Reviews
   ------------------------------------------------------------------------- */
.mm8-card {
	background: var(--wp--preset--color--ivory);
	border: 1px solid rgba(74, 60, 54, 0.08);
	border-radius: 18px;
	box-shadow: var(--mm8-shadow-soft);
	transition: transform 0.4s var(--mm8-ease), box-shadow 0.4s var(--mm8-ease);
	height: 100%;
}
.mm8-card:hover { transform: translateY(-6px); box-shadow: var(--mm8-shadow-lift); }
.mm8-stars { margin: 0 !important; letter-spacing: 0.25em; font-size: 0.85rem; }
.mm8-review p:nth-of-type(2) { color: var(--wp--preset--color--cocoa); }

/* -------------------------------------------------------------------------
   About — arched feature image
   ------------------------------------------------------------------------- */
.mm8-about-photo {
	margin: 0;
	overflow: hidden;
	border-radius: var(--mm8-arch);
	box-shadow: var(--mm8-shadow-lift);
}
.mm8-about-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* -------------------------------------------------------------------------
   Closing CTA
   ------------------------------------------------------------------------- */
.mm8-cta { position: relative; overflow: hidden; }
.mm8-cta h2 { text-wrap: balance; font-weight: 500; }

/* -------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------- */
.mm8-footer a { color: var(--wp--preset--color--blush); transition: color 0.25s var(--mm8-ease); }
.mm8-footer a:hover { color: var(--wp--preset--color--ivory); }
.mm8-footer .wp-block-site-title a { color: var(--wp--preset--color--porcelain); }

/* -------------------------------------------------------------------------
   Motion — one orchestrated load reveal, plus gentle scroll reveals.
   Respects reduced-motion. Scroll reveals are gated behind .mm8-js so content
   is never hidden if JavaScript fails to run.
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	.mm8-reveal > * {
		opacity: 0;
		transform: translateY(22px);
		animation: mm8-rise 1.1s var(--mm8-ease) forwards;
	}
	.mm8-reveal > *:nth-child(1) { animation-delay: 0.15s; }
	.mm8-reveal > *:nth-child(2) { animation-delay: 0.32s; }
	.mm8-reveal > *:nth-child(3) { animation-delay: 0.49s; }
	.mm8-reveal > *:nth-child(4) { animation-delay: 0.66s; }
	.mm8-reveal > *:nth-child(5) { animation-delay: 0.83s; }

	.mm8-js .mm8-inview {
		opacity: 0;
		transform: translateY(30px);
		transition: opacity 0.9s var(--mm8-ease), transform 0.9s var(--mm8-ease);
		will-change: opacity, transform;
	}
	.mm8-js .mm8-inview.is-visible { opacity: 1; transform: none; }
}

@keyframes mm8-rise {
	to { opacity: 1; transform: none; }
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 781px) {
	.mm8-menu-cols { --wp--style--block-gap: 0; }
	.mm8-stylist-row .wp-block-column { flex-basis: 45% !important; }
}
@media (max-width: 600px) {
	.mm8-hero { text-align: left; }
	.mm8-stylist-row .wp-block-column { flex-basis: 100% !important; }
}

/* -------------------------------------------------------------------------
   Mobile navigation overlay
   Core toggles .is-menu-open on the navigation's responsive container when the
   hamburger is tapped. We style that open state into a full-screen plum panel
   with centred, generously spaced links and a contained close button. The
   .is-menu-open class only ever appears on mobile (the hamburger is hidden on
   desktop), so the desktop nav is untouched.
   ------------------------------------------------------------------------- */

/* Hamburger trigger colour, sitting in the porcelain header bar. */
.mm8-header .wp-block-navigation__responsive-container-open {
	color: var(--wp--preset--color--cocoa);
}

/* The opened panel: an opaque plum overlay above everything, with depth.
   background-color is forced because core ships a higher-specificity rule
   (.wp-block-navigation:not(.has-background) ... .is-menu-open) that paints the
   overlay white. */
.mm8-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--plum) !important;
	background-image:
		radial-gradient(72% 50% at 82% 6%, rgba(192, 136, 122, 0.30) 0%, rgba(192, 136, 122, 0) 60%),
		radial-gradient(64% 50% at 8% 94%, rgba(142, 156, 134, 0.18) 0%, rgba(142, 156, 134, 0) 60%);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	padding: 0;
	z-index: 100000;
	overflow-y: auto;
}
@media (prefers-reduced-motion: no-preference) {
	.mm8-header .wp-block-navigation__responsive-container.is-menu-open {
		animation: mm8-fade 0.35s var(--mm8-ease);
	}
}

/* Centre the dialog within the panel. */
.mm8-header .is-menu-open .wp-block-navigation__responsive-close {
	max-width: none;
	width: 100%;
	height: 100%;
}
.mm8-header .is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 4.5rem 1.5rem;
}
.mm8-header .is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
}

/* Close button, contained in the panel's top-right corner. */
.mm8-header .is-menu-open .wp-block-navigation__responsive-container-close {
	position: absolute;
	top: 1.6rem;
	right: 1.6rem;
	color: var(--wp--preset--color--blush);
	padding: 0.5rem;
	transition: color 0.25s var(--mm8-ease), transform 0.25s var(--mm8-ease);
}
.mm8-header .is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}
.mm8-header .is-menu-open .wp-block-navigation__responsive-container-close:hover {
	color: var(--wp--preset--color--porcelain);
	transform: rotate(90deg);
}

/* The link list: a centred, generously spaced column. !important overrides the
   navigation block's generated flex-layout rules, which otherwise left-align. */
.mm8-header .is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	text-align: center;
}
.mm8-header .is-menu-open .wp-block-navigation__container {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center;
	width: 100% !important;
	gap: 0.35rem;
}
.mm8-header .is-menu-open .wp-block-navigation-item {
	width: 100% !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}
.mm8-header .is-menu-open .wp-block-navigation-item__content {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display);
	font-size: 2.1rem;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--porcelain);
	padding: 0.7rem 1rem;
	transition: color 0.25s var(--mm8-ease);
}
.mm8-header .is-menu-open .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blush);
	text-decoration: none;
}

/* Book Now: hidden in the desktop nav, shown as a pill inside the overlay. */
.mm8-mobile-book { display: none !important; }
.mm8-header .is-menu-open .mm8-mobile-book {
	display: block !important;
	margin-top: 1.4rem;
}
.mm8-header .is-menu-open .mm8-mobile-book .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.82rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--porcelain);
	background: var(--wp--preset--color--rosewood);
	border-radius: 999px;
	padding: 1.05rem 2.6rem;
}
.mm8-header .is-menu-open .mm8-mobile-book .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--rosewood-deep);
	color: var(--wp--preset--color--porcelain);
}

/* Gentle staggered entrance for the panel's items. */
@media (prefers-reduced-motion: no-preference) {
	.mm8-header .is-menu-open .wp-block-navigation-item {
		animation: mm8-menu-in 0.5s var(--mm8-ease) backwards;
	}
	.mm8-header .is-menu-open .wp-block-navigation-item:nth-child(1) { animation-delay: 0.08s; }
	.mm8-header .is-menu-open .wp-block-navigation-item:nth-child(2) { animation-delay: 0.14s; }
	.mm8-header .is-menu-open .wp-block-navigation-item:nth-child(3) { animation-delay: 0.20s; }
	.mm8-header .is-menu-open .wp-block-navigation-item:nth-child(4) { animation-delay: 0.26s; }
	.mm8-header .is-menu-open .wp-block-navigation-item:nth-child(5) { animation-delay: 0.32s; }
	.mm8-header .is-menu-open .wp-block-navigation-item:nth-child(6) { animation-delay: 0.40s; }
}

/* Lock background scroll while the overlay is open. Core toggles
   .has-modal-open on the nav container (not the body), so we key the lock off
   the open overlay itself with :has(), with the class selectors as a fallback. */
html:has(.wp-block-navigation__responsive-container.is-menu-open) { overflow: hidden; }
html.has-modal-open,
body.has-modal-open { overflow: hidden; }

@keyframes mm8-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes mm8-menu-in {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}