/*
Theme Name: Maine Soggy Dog
Author: Page One Web Solutions
Author URI: https://pageonewebsolutions.com
Description: Full site editing block theme for Maine Soggy Dog, a self-serve dog wash and full-service grooming spa in Falmouth, Maine. Built from the approved Claude Design comps.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Version: 1.0.15
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maine-soggy-dog
Tags: full-site-editing, block-templates, one-column, custom-colors, custom-menu, accessibility-ready
*/

/* ---------------------------------------------------------------------------
   Supplemental CSS. Everything expressible in theme.json lives there; this file
   carries only what theme.json cannot express: masks, gradients, grid spans,
   :hover motion, the <details> accordion, and the responsive collapses.
   Bump the Version above on every change to this file - the BionicWP edge cache
   keys on the ?ver= query string that functions.php derives from it.
   --------------------------------------------------------------------------- */

/* --- Shared helpers ------------------------------------------------------ */

/* Heading measures. A max-width written into a static block's inline style is not
   one of its attributes, so the editor's save() drops it and flags the block
   "unexpected or invalid content". A class round-trips. */
.msd-maxw-560 {
	max-width: 560px;
}

.msd-maxw-620 {
	max-width: 620px;
}

/* Paragraph measures, same reason as the heading measures above: a core paragraph is validated
   against its own save(), which has no max-width, so an inline max-width or an inline margin-top
   makes the editor flag the block. The element prefix lifts specificity above the layout rule
   that caps constrained children at the content width. */
p.msd-maxw-320 {
	max-width: 320px;
}

p.msd-maxw-460 {
	max-width: 460px;
}

p.msd-maxw-480 {
	max-width: 480px;
}

p.msd-maxw-540 {
	max-width: 540px;
}

p.msd-maxw-560 {
	max-width: 560px;
}

/* Doubled with .msd-eyebrow so these beat the base .msd-eyebrow rule below, which sets the
   margin shorthand and comes later in the file. A lone modifier class has equal specificity
   and loses on order, so the FAQ group spacing never applied. */
.msd-eyebrow.msd-eyebrow--first {
	margin-top: 0;
}

.msd-eyebrow.msd-eyebrow--next {
	margin-top: var(--wp--preset--spacing--12);
}

.msd-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--green-700);
	margin: 0 0 var(--wp--preset--spacing--3);
}

.msd-eyebrow.is-on-dark {
	color: var(--wp--preset--color--green-300);
}

.lift {
	transition: transform 160ms var(--wp--custom--motion--ease), box-shadow 160ms var(--wp--custom--motion--ease);
}

.lift:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--md);
}

@media (prefers-reduced-motion: reduce) {
	.lift,
	.lift:hover {
		transition: none;
		transform: none;
	}
}

.msd-stars {
	/* brass-500 measured 2.58:1 against the cards these sit on. brass-700 is 4.99:1. */
	color: var(--wp--preset--color--brass-700);
	font-size: 15px;
	letter-spacing: 2px;
	line-height: 1;
}

.msd-stars.is-on-dark {
	color: var(--wp--preset--color--brass-300);
}

.msd-nowrap {
	white-space: nowrap;
}

/* Accent (green) button: the design system's accent variant, white label. */
.wp-block-button.is-style-msd-accent > .wp-block-button__link {
	background-color: var(--wp--preset--color--green-600);
	border: 1px solid var(--wp--preset--color--green-600);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-msd-accent > .wp-block-button__link:hover,
.wp-block-button.is-style-msd-accent > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--green-700);
	border-color: var(--wp--preset--color--green-700);
	color: var(--wp--preset--color--white);
}

/* Outline button on a dark ground (hero secondary). */
.wp-block-button.is-style-msd-outline-dark > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid rgba(253, 252, 249, 0.45);
	color: var(--wp--preset--color--cream-50);
	padding: 16px 30px;
}

.wp-block-button.is-style-msd-outline-dark > .wp-block-button__link:hover,
.wp-block-button.is-style-msd-outline-dark > .wp-block-button__link:focus {
	background-color: rgba(253, 252, 249, 0.1);
	border-color: var(--wp--preset--color--cream-50);
	color: var(--wp--preset--color--cream-50);
}

/* Secondary (outlined navy) button, used beside the primary in book bands. */
.wp-block-button.is-style-msd-secondary > .wp-block-button__link {
	background-color: transparent;
	border: 1px solid var(--wp--preset--color--line-200);
	color: var(--wp--preset--color--navy-800);
}

.wp-block-button.is-style-msd-secondary > .wp-block-button__link:hover,
.wp-block-button.is-style-msd-secondary > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--sage-100);
	color: var(--wp--preset--color--navy-800);
}

/* Large buttons match the design system's lg size. */
.wp-block-button.is-style-msd-accent.msd-btn-lg > .wp-block-button__link,
.wp-block-button.is-style-msd-secondary.msd-btn-lg > .wp-block-button__link,
.wp-block-button.msd-btn-lg > .wp-block-button__link {
	padding: 14px 30px;
	font-size: var(--wp--preset--font-size--lg);
}

/* Visible keyboard focus everywhere, on both grounds. */
:where(a, button, summary, input, select, textarea):focus-visible {
	outline: 3px solid var(--wp--preset--color--green-500);
	outline-offset: 2px;
}

.msd-on-dark :where(a, button, summary):focus-visible {
	outline-color: var(--wp--preset--color--brass-300);
}

/* --- Header -------------------------------------------------------------- */

.msd-topbar {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--wide);
	color: var(--wp--preset--color--sage-200);
}

.msd-topbar a {
	color: var(--wp--preset--color--cream-50);
	font-weight: 600;
	text-decoration: none;
}

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

.msd-logo {
	display: inline-flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
}

.msd-logo__mark img,
.msd-logo__mark .wp-block-site-logo img {
	height: 40px;
	width: auto;
	display: block;
}

.msd-logo__rule {
	display: block;
	width: 1px;
	align-self: stretch;
	min-height: 34px;
	background: var(--wp--preset--color--line-200);
}

.msd-logo__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 21px;
	line-height: 1;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--navy-800);
	white-space: nowrap;
	text-decoration: none;
}

.msd-logo__tag {
	font-family: var(--wp--preset--font-family--body);
	font-size: 9.5px;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green-700);
	white-space: nowrap;
}

.msd-header {
	border-bottom: 1px solid var(--wp--preset--color--line-100);
}

.msd-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	letter-spacing: var(--wp--custom--tracking--wide);
	font-weight: 500;
}

.msd-header .wp-block-navigation .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-500);
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
}

.msd-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--navy-800);
}

.msd-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.msd-header .wp-block-navigation .current_page_item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--navy-800);
	border-bottom-color: var(--wp--preset--color--green-500);
}

/* Footer logo variant sits on navy. */
.msd-footer .msd-logo__name {
	color: var(--wp--preset--color--cream-50);
	font-size: 24px;
}

.msd-footer .msd-logo__tag {
	color: var(--wp--preset--color--green-300);
	font-size: 11px;
}

.msd-footer .msd-logo__rule {
	background: rgba(253, 252, 249, 0.28);
	min-height: 40px;
}

.msd-footer .msd-logo__mark img {
	height: 46px;
	filter: brightness(0) invert(1);
}

.msd-footer a {
	color: var(--wp--preset--color--sage-200);
	text-decoration: none;
}

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

.msd-footer__rule {
	height: 6px;
	background: linear-gradient(90deg, var(--wp--preset--color--white) 0%, var(--wp--preset--color--white) 50%, var(--wp--preset--color--green-500) 50%);
}

.msd-footcol__title {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--green-300);
	font-weight: 600;
	margin: 0 0 14px;
}

.msd-footer__legal {
	border-top: 1px solid var(--wp--custom--border--on-dark);
	font-size: var(--wp--preset--font-size--xs);
	color: var(--wp--preset--color--sage-200);
}

/* --- Hero ---------------------------------------------------------------- */

.msd-hero {
	position: relative;
	min-height: 660px;
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--navy-900);
	overflow: hidden;
}

.msd-hero__media {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58%;
	margin: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 20%, #000 52%);
	mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 20%, #000 52%);
}

.msd-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.msd-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 36, 87, 0.9) 0%, rgba(18, 36, 87, 0.78) 40%, rgba(18, 36, 87, 0.42) 60%, rgba(18, 36, 87, 0.1) 82%, rgba(18, 36, 87, 0.04) 100%);
	pointer-events: none;
}

.msd-hero__inner {
	position: relative;
	width: 100%;
	z-index: 1;
}

.msd-hero__rating {
	position: absolute;
	right: max(24px, calc((100% - 1200px) / 2 + 32px));
	bottom: 40px;
	z-index: 2;
	background: var(--wp--preset--color--cream-50);
	border-radius: var(--wp--custom--radius--md);
	padding: 18px 22px;
	box-shadow: var(--wp--preset--shadow--lg);
	display: flex;
	align-items: center;
	gap: 16px;
}

.msd-score {
	font-family: var(--wp--preset--font-family--display);
	font-size: 40px;
	line-height: 1;
	color: var(--wp--preset--color--navy-800);
	margin: 0;
}

/* --- Page banner --------------------------------------------------------- */

.msd-banner {
	position: relative;
	min-height: 380px;
	display: flex;
	align-items: center;
	background: var(--wp--preset--color--navy-900);
	overflow: hidden;
}

.msd-banner__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.msd-banner__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.msd-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(85deg, rgba(18, 36, 87, 0.93) 0%, rgba(18, 36, 87, 0.7) 50%, rgba(18, 36, 87, 0.2) 100%);
	pointer-events: none;
}

.msd-banner__inner {
	position: relative;
	width: 100%;
	z-index: 1;
}

/* --- Service cards ------------------------------------------------------- */

.msd-servicecard {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.msd-servicecard__media {
	height: 260px;
	margin: 0;
}

.msd-servicecard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 42%;
}

.msd-servicecard__points {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: var(--wp--preset--font-size--sm);
}

.msd-servicecard__points li::before {
	content: "\2014";
	color: var(--wp--preset--color--brass-500);
	margin-right: 10px;
}

.msd-servicecard__more {
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--4);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	letter-spacing: var(--wp--custom--tracking--wide);
	text-decoration: none;
}

.msd-chip {
	background: var(--wp--preset--color--cream-50);
	border: 1px solid var(--wp--preset--color--line-200);
	border-radius: var(--wp--custom--radius--pill);
	padding: 9px 16px;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--navy-800);
	display: inline-block;
}

.msd-chip strong {
	color: var(--wp--preset--color--brass-700);
	font-weight: 600;
}

/* --- How it works -------------------------------------------------------- */

.msd-step {
	display: flex;
	gap: var(--wp--preset--spacing--6);
	padding-bottom: var(--wp--preset--spacing--6);
	border-bottom: 1px solid var(--wp--custom--border--on-dark);
}

.msd-step__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	color: var(--wp--preset--color--green-300);
	min-width: 48px;
	line-height: 1.1;
	margin: 0;
}

.msd-pullquote {
	position: absolute;
	left: -18px;
	bottom: -18px;
	background: var(--wp--preset--color--brass-500);
	color: var(--wp--preset--color--navy-900);
	padding: 18px 22px;
	border-radius: var(--wp--custom--radius--md);
	max-width: 210px;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.15;
	margin: 0;
}

.msd-figure-stack {
	position: relative;
}

.msd-figure-stack > .wp-block-image img {
	border-radius: var(--wp--custom--radius--lg);
	display: block;
	width: 100%;
}

.msd-figure-inset {
	position: absolute;
	right: -24px;
	bottom: -40px;
	width: 190px;
	margin: 0;
}

.msd-figure-inset img {
	width: 190px;
	height: 230px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
	border: 6px solid var(--wp--preset--color--cream-100);
}

/* --- Gallery mosaic ------------------------------------------------------ */

.msd-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 200px;
	gap: var(--wp--preset--spacing--4);
}

.msd-gallery figure,
.msd-gallery .wp-block-image {
	margin: 0;
	height: 100%;
}

.msd-gallery img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--md);
	display: block;
}

.msd-gallery .msd-g-2x2 {
	grid-column: span 2;
	grid-row: span 2;
}

.msd-gallery .msd-g-1x2 {
	grid-row: span 2;
}

.msd-gallery .msd-g-2x1 {
	grid-column: span 2;
}

/* --- Reviews ------------------------------------------------------------- */

.msd-reviewcard {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--line-100);
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--preset--shadow--sm);
	padding: var(--wp--preset--spacing--8);
}

.msd-reviewcard__avatar {
	margin: 0;
	flex-shrink: 0;
}

.msd-reviewcard__avatar img {
	width: 92px;
	height: 92px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--wp--preset--color--brass-500);
	display: block;
}

.msd-reviewcard__quote {
	font-family: var(--wp--preset--font-family--display);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	line-height: var(--wp--custom--leading--snug);
	color: var(--wp--preset--color--navy-800);
	margin: 10px 0 14px;
}

/* --- FAQ accordion (native <details>) ------------------------------------ */

.msd-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line-200);
	padding: 0;
	margin: 0;
	background: transparent;
}

.msd-faq .wp-block-details:first-of-type {
	border-top: 1px solid var(--wp--preset--color--line-200);
}

.msd-faq .wp-block-details > summary {
	list-style: none;
	cursor: pointer;
	padding: var(--wp--preset--spacing--5) 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--lg);
	font-weight: 500;
	color: var(--wp--preset--color--navy-800);
}

.msd-faq .wp-block-details > summary::-webkit-details-marker,
.msd-faq .wp-block-details > summary::marker {
	display: none;
	content: "";
}

.msd-faq .wp-block-details > summary::after {
	content: "+";
	color: var(--wp--preset--color--green-600);
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}

.msd-faq .wp-block-details[open] > summary::after {
	content: "\2013";
}

.msd-faq .wp-block-details > :not(summary) {
	font-size: var(--wp--preset--font-size--base);
	color: var(--wp--preset--color--ink-500);
	line-height: var(--wp--custom--leading--relaxed);
	margin: 0 0 var(--wp--preset--spacing--5);
	max-width: 680px;
}

/* --- Price rows ---------------------------------------------------------- */

.msd-pricerow {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 13px 0;
	border-bottom: 1px solid var(--wp--preset--color--line-100);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	margin: 0;
}

.msd-pricerow__label {
	color: var(--wp--preset--color--navy-800);
}

.msd-pricerow__price {
	font-weight: 600;
	color: var(--wp--preset--color--green-700);
	white-space: nowrap;
}

.msd-on-dark .msd-pricerow {
	border-bottom-color: rgba(253, 252, 249, 0.16);
}

.msd-on-dark .msd-pricerow__label {
	color: var(--wp--preset--color--cream-50);
}

.msd-on-dark .msd-pricerow__price {
	color: var(--wp--preset--color--green-300);
}

.msd-statbox {
	background: rgba(253, 252, 249, 0.07);
	border: 1px solid rgba(253, 252, 249, 0.16);
	border-radius: var(--wp--custom--radius--md);
	padding: var(--wp--preset--spacing--5);
}

.msd-statbox__figure {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxl);
	color: var(--wp--preset--color--green-300);
	margin: 0 0 6px;
}

.msd-stat {
	border-left: 3px solid var(--wp--preset--color--green-300);
	padding-left: var(--wp--preset--spacing--5);
}

.msd-stat__figure {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xxxl);
	color: var(--wp--preset--color--cream-50);
	line-height: 1;
	margin: 0;
}

/* --- Contact ------------------------------------------------------------- */

.msd-infocard {
	border-radius: var(--wp--custom--radius--lg);
	height: 100%;
	display: block;
	text-decoration: none;
}

/* The card is a group with a background, so the reset near the end of this file
   (.wp-block-group.has-background { padding: 0 }) outranks a single-class rule and left
   the cards at 0px. Three classes win regardless of source order. */
.wp-block-group.has-background.msd-infocard {
	padding: var(--wp--preset--spacing--6);
}

.msd-infocard:hover {
	text-decoration: none;
}

.msd-infocard__label {
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 10px;
}

.msd-infocard__value {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	line-height: 1.3;
	margin: 0;
}

.msd-infocard__sub {
	font-size: var(--wp--preset--font-size--sm);
	margin: 8px 0 0;
}

.msd-map {
	border-radius: var(--wp--custom--radius--lg);
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--line-100);
	min-height: 460px;
}

.msd-map iframe {
	width: 100%;
	height: 100%;
	min-height: 460px;
	border: 0;
	display: block;
}

.msd-sticky-aside {
	position: sticky;
	top: 120px;
}

/* Gravity Forms, styled to the design system's Input/Select/Button. */
.msd-form .gform_wrapper .gfield_label {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	color: var(--wp--preset--color--ink-500);
	font-weight: 500;
}

.msd-form .gform_wrapper input[type="text"],
.msd-form .gform_wrapper input[type="email"],
.msd-form .gform_wrapper input[type="tel"],
.msd-form .gform_wrapper textarea,
.msd-form .gform_wrapper select {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	padding: 10px 14px;
	border-radius: var(--wp--custom--radius--sm);
	border: 1px solid var(--wp--preset--color--line-100);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink-900);
}

.msd-form .gform_wrapper input:focus,
.msd-form .gform_wrapper textarea:focus,
.msd-form .gform_wrapper select:focus {
	border-color: var(--wp--preset--color--green-600);
	box-shadow: 0 0 0 3px var(--wp--preset--color--green-100);
	outline: none;
}

.msd-form .gform_wrapper .gform_footer input[type="submit"],
.msd-form .gform_wrapper .gform_button {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	letter-spacing: var(--wp--custom--tracking--wide);
	padding: 11px 22px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--navy-800);
	border: 1px solid var(--wp--preset--color--navy-800);
	color: var(--wp--preset--color--cream-50);
	cursor: pointer;
}

.msd-form .gform_wrapper .gform_footer input[type="submit"]:hover,
.msd-form .gform_wrapper .gform_button:hover {
	background: var(--wp--preset--color--navy-700);
	border-color: var(--wp--preset--color--navy-700);
}

/* --- Responsive collapses ------------------------------------------------ */

@media (max-width: 1024px) {
	.msd-hero {
		min-height: 560px;
	}

	.msd-hero__media {
		width: 100%;
		-webkit-mask-image: none;
		mask-image: none;
		opacity: 0.5;
	}

	.msd-hero__scrim {
		background: linear-gradient(180deg, rgba(18, 36, 87, 0.88) 0%, rgba(18, 36, 87, 0.8) 60%, rgba(18, 36, 87, 0.92) 100%);
	}

	.msd-hero__rating {
		position: static;
		margin: var(--wp--preset--spacing--8) 0 0;
		width: fit-content;
	}

	.msd-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 170px;
	}
}

@media (max-width: 900px) {
	.msd-stack-on-mobile {
		grid-template-columns: 1fr !important;
		flex-direction: column !important;
	}

	.msd-stack-on-mobile > .wp-block-column,
	.msd-stack-on-mobile > .wp-block-group {
		width: 100% !important;
		flex-basis: 100% !important;
	}

	.msd-figure-inset {
		position: static;
		width: 100%;
		margin-top: var(--wp--preset--spacing--4);
	}

	.msd-figure-inset img {
		width: 100%;
		height: 220px;
		border-width: 0;
	}

	.msd-pullquote {
		position: static;
		max-width: none;
		margin-top: var(--wp--preset--spacing--4);
	}

	.msd-sticky-aside {
		position: static;
	}

	.msd-topbar .msd-topbar__inner {
		flex-direction: column;
		gap: 4px;
		text-align: center;
	}
}

@media (max-width: 600px) {
	.msd-gallery {
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 140px;
	}

	.msd-gallery .msd-g-2x2 {
		grid-column: span 2;
		grid-row: span 2;
	}

	.msd-reviewcard {
		padding: var(--wp--preset--spacing--6);
	}

	.msd-reviewcard__avatar img {
		width: 64px;
		height: 64px;
	}
}

/* --- Classes introduced by the patterns --------------------------------- */

.msd-headerwrap {
	position: sticky;
	top: 0;
	z-index: 20;
}

.msd-hero__copy {
	max-width: 600px;
}

.msd-eyebrow.is-ink {
	color: var(--wp--preset--color--ink-700);
}

/* Link with the design's 2px underline rule rather than a text-decoration. */
.msd-underlink a {
	text-decoration: none;
	font-weight: 600;
	border-bottom: 2px solid var(--wp--preset--color--green-500);
	padding-bottom: 3px;
}

.msd-underlink.is-brass a {
	border-bottom-color: var(--wp--preset--color--brass-500);
}

.msd-underlink a:hover {
	color: var(--wp--preset--color--navy-700);
}

/* Price and hours rows: the flex behaviour is the row's, not the block layout's. */
.msd-pricerow > p {
	margin: 0;
}

/* Fixed-aspect photographs. */
.msd-aspect-4-5 img,
.msd-aspect-4-3 img,
.msd-aspect-1-1 img,
.msd-aspect-3-4 img,
.msd-square-image img {
	width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--lg);
	display: block;
}

.msd-aspect-4-5 img {
	aspect-ratio: 4 / 5;
}

.msd-aspect-4-3 img {
	aspect-ratio: 4 / 3;
}

.msd-aspect-1-1 img,
.msd-square-image img {
	aspect-ratio: 1 / 1;
}

.msd-aspect-3-4 img {
	aspect-ratio: 3 / 4;
}

/* Panels on the Services page keep their photograph flush to the rounded corner. */
.msd-panel {
	overflow: hidden;
	height: 100%;
	box-sizing: border-box;
}

.msd-panel__media {
	margin: 0;
}

.msd-panel__media img {
	width: 100%;
	height: 280px;
	object-fit: cover;
	object-position: center 40%;
	display: block;
}

.msd-equal-cards > .wp-block-column {
	display: flex;
}

.msd-equal-cards > .wp-block-column > .wp-block-group {
	width: 100%;
}

/* The add-on band: label block keeps its width, chips take the rest. */
.msd-addons__lede {
	min-width: 200px;
}

.msd-addons__chips {
	flex: 1;
}

/* Service card bullet list: the design uses an em dash, not a disc. */
.msd-servicecard__points.wp-block-list {
	list-style: none;
	padding-left: 0;
}

.msd-gallery__tile {
	margin: 0;
}

.msd-score.is-on-dark {
	font-size: 52px;
	color: var(--wp--preset--color--brass-300);
}

.msd-photorow {
	gap: var(--wp--preset--spacing--4);
}

/* Images returned by msd_img() inside a figure never carry stray inline space. */
figure.wp-block-image {
	margin-top: 0;
	margin-bottom: 0;
}

/* Current page in the header navigation (core sets aria-current, not always a class). */
.msd-header .wp-block-navigation a[aria-current="page"] {
	color: var(--wp--preset--color--navy-800);
	border-bottom-color: var(--wp--preset--color--green-500);
}

/* Logo links inherit the logo's own colour rather than the global link colour. */
.msd-logo a,
.msd-logo__name a {
	color: inherit;
	text-decoration: none;
}

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

.msd-infocard a:hover {
	text-decoration: underline;
}

@media (max-width: 900px) {
	.msd-photorow {
		flex-wrap: wrap !important;
	}

	.msd-photorow > .wp-block-column {
		flex-basis: calc(50% - var(--wp--preset--spacing--4)) !important;
		flex-grow: 0;
	}

	.msd-panel__media img {
		height: 220px;
	}
}

/* --- Gaps -----------------------------------------------------------------
   theme.json sets blockGap to 0 globally, because every designed section here
   carries its own margins and a global gap shows up as a white seam between
   full-bleed bands. Two places still need a gap that theme.json cannot express:
   the vertical gap when a columns row wraps to one column, and the space
   between two buttons in a row.
   -------------------------------------------------------------------------- */

.wp-block-columns.msd-stack-on-mobile {
	row-gap: var(--wp--preset--spacing--10);
}

.wp-block-buttons {
	gap: var(--wp--preset--spacing--4);
}

@media (max-width: 900px) {
	.wp-block-columns.msd-stack-on-mobile {
		row-gap: var(--wp--preset--spacing--10);
	}

	.msd-photorow {
		row-gap: var(--wp--preset--spacing--4);
	}
}

/* --- Contrast corrections from the first visual QA pass ------------------
   Measured on staging 2026-09-11 with visual-qa.py, which samples the colour
   actually painted behind each text node rather than the one the CSS asks for.
   ------------------------------------------------------------------------- */

/*
 * THE IMPORTANT ONE. theme.json sets a global link colour of navy-800. Inside a
 * section with a navy ground that is navy on navy: the "See the full menu" and
 * "Read all reviews" links measured 1.00:1, i.e. invisible. Every one of these
 * paragraphs already sets the colour the design wants, so the link should take
 * the colour of the text around it rather than the global one.
 */
.msd-on-dark :where(p, li, h1, h2, h3, h4, span, div) > a,
.msd-servicecard :where(p, li) > a,
.msd-infocard :where(p) > a {
	color: inherit;
}

.msd-on-dark :where(p, li, h1, h2, h3, h4, span, div) > a:hover,
.msd-servicecard :where(p, li) > a:hover {
	color: inherit;
	text-decoration: underline;
}

/* The footer sets its own link colours and must keep them. */
.msd-footer :where(p, li) > a {
	color: var(--wp--preset--color--sage-200);
}

/* Statbox figures sit on navy lightened by a 7% white overlay, which drags
   green-300 to 3.96:1. green-200 on that same ground is 5.14:1. */
.msd-statbox__figure {
	color: var(--wp--preset--color--green-200);
}

/* --- Comp geometry ------------------------------------------------------
   Measured against the approved comp on 2026-09-12 with both documents open
   in the same browser at 1440px. Three WordPress behaviours moved things the
   comp never moved, and all three are corrected here rather than pattern by
   pattern.

   1. Constrained layout centres children. WordPress gives every direct child
      of a constrained group `margin-inline: auto`, so the hero copy - 600px
      wide inside a 1376px content area - was pushed 388px to the right. The
      comp has it flush to the container's left edge. Measured: h1 at 420px
      against the comp's 120px, a 300px error, identical width.

   2. Flex layout ignores contentSize. The header and announcement bar use
      flex for their space-between rows, and `contentSize` applies only to
      constrained layout, so both spanned the full viewport instead of
      stopping at 1200px. That is why the phone number and the Book now
      button did not line up with the content below them.

   3. Core pads any group that has a background: the stylesheet ships
      `:where(.wp-block-group.has-background){padding:1.25em 2.375em}`. Being
      em-based it differs per band - 30.9px on the 13px announcement bar,
      40.4px on the 17px header - so coloured sections drifted by varying
      amounts that no single correction would have fixed.
   ------------------------------------------------------------------------- */

.msd-wrap {
	box-sizing: border-box;
	max-width: calc(1200px + (var(--wp--preset--spacing--8) * 2));
	margin-inline: auto;
}

/* Children sit where the document puts them, not centred by the layout engine.
   Only the auto margins are reset. Resetting max-width here as well would clobber the
   deliberate caps - .msd-hero__copy's 600px, for one - because this rule and those carry
   the same specificity and this one comes later in the file. WordPress's own 1200px cap on
   children is harmless once the wrapper itself is capped. */
.msd-wrap > * {
	margin-inline: 0;
}

/* The header rows are flex, so they need the cap applied directly. */
.msd-topbar__inner,
.msd-header > .wp-block-group {
	box-sizing: border-box;
	max-width: calc(1200px + (var(--wp--preset--spacing--8) * 2));
	margin-inline: auto;
}

/* Neutralise core's background padding on BOTH axes. Every band in this theme sets the
   padding it wants explicitly, as an inline style, which still wins.
   This originally zeroed only padding-inline, which left `padding-block: 1.25em` in place and
   pushed every section down by an amount that varied with its font size: 16px on the 13px
   announcement bar, compounding to 90px by the hero. Invisible horizontally, which is why the
   first geometry pass called it a match - the vertical comparison is what caught it. */
.wp-block-group.has-background {
	padding: 0;
}

/* --- Mobile menu overlay --------------------------------------------------
   The header link rules above colour links ink-500 for the white bar. The same
   selector reaches the open overlay, which is navy, so the links read grey on navy.
   Restore the overlay's own cream, and move Book now in here from the header bar
   (the hero carries the other booking button). 600px is core's overlay breakpoint. */
.msd-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--8);
}

.msd-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.msd-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.msd-header .wp-block-navigation__responsive-container.is-menu-open a[aria-current="page"] {
	color: var(--wp--preset--color--cream-50);
	border-bottom-color: transparent;
}

.msd-header .wp-block-navigation__responsive-container.is-menu-open a[aria-current="page"] {
	border-bottom-color: var(--wp--preset--color--green-500);
}

.msd-header .wp-block-navigation .msd-nav-book {
	display: none;
}

.msd-header .wp-block-navigation__responsive-container.is-menu-open .msd-nav-book {
	display: block;
	margin-top: var(--wp--preset--spacing--6);
}

.msd-header .wp-block-navigation__responsive-container.is-menu-open .msd-nav-book .wp-block-navigation-item__content {
	display: inline-block;
	padding: 12px 22px;
	border: 1px solid var(--wp--preset--color--green-600);
	border-radius: 6px;
	background-color: var(--wp--preset--color--green-600);
	color: var(--wp--preset--color--white);
	font-weight: 600;
}

@media (max-width: 599px) {
	/* Needs the extra selectors: core's .wp-block-buttons.is-layout-flex sets display:flex. */
	.msd-header .wp-block-buttons.msd-header-book {
		display: none;
	}
}