/*
	Theme Name: Dr. Car Wash
	Theme URI: https:mateitudor.com
	Author: Tudor Matei
	Author URI: https:mateitudor.com
	Description: Block theme for Dr. Car Wash
	Requires at least: 6.7
	Tested up to: 6.9
	Requires PHP: 8.2
	Version: 0.5.2
	License: GNU General Public License v2 or later
	License URI: http:www.gnu.org/licenses/gpl-2.0.html
	Text Domain: drcarwash
*/

/* Tokens
   Short aliases for theme.json presets (--wp--preset--*).
   Prefer these in component CSS for readability.
   ========================================================= */

:root {
	--dcw-color-base: var(--wp--preset--color--base);
	--dcw-color-contrast: var(--wp--preset--color--contrast);
	--dcw-color-teal: var(--wp--preset--color--teal);
	--dcw-color-teal-50: var(--wp--preset--color--teal-50);
	--dcw-color-teal-100: var(--wp--preset--color--teal-100);
	--dcw-color-teal-400: var(--wp--preset--color--teal-400);
	--dcw-color-teal-800: var(--wp--preset--color--teal-800);
	--dcw-color-bluegray-25: var(--wp--preset--color--bluegray-25);
	--dcw-color-bluegray-50: var(--wp--preset--color--bluegray-50);
	--dcw-color-bluegray-75: var(--wp--preset--color--bluegray-75);
	--dcw-color-orange-600: var(--wp--preset--color--orange-600);
	--dcw-color-orange-50: var(--wp--preset--color--orange-50);

	--dcw-space-2xs: var(--wp--preset--spacing--2-xs);
	--dcw-space-xs: var(--wp--preset--spacing--xs);
	--dcw-space-s: var(--wp--preset--spacing--s);
	--dcw-space-m: var(--wp--preset--spacing--m);
	--dcw-space-l: var(--wp--preset--spacing--l);
	--dcw-space-xl: var(--wp--preset--spacing--xl);
	--dcw-space-2xl: var(--wp--preset--spacing--2-xl);
	--dcw-space-3xl: var(--wp--preset--spacing--3-xl);
	/* Legacy aliases (old slug forms + pre-rename spacing names) */
	--dcw-space-sm: var(--wp--preset--spacing--s);
	--dcw-space-md: var(--wp--preset--spacing--m);
	--dcw-space-lg: var(--wp--preset--spacing--l);
	--wp--preset--spacing--sm: var(--wp--preset--spacing--s);
	--wp--preset--spacing--md: var(--wp--preset--spacing--m);
	--wp--preset--spacing--lg: var(--wp--preset--spacing--l);
	--wp--preset--spacing--2xs: var(--wp--preset--spacing--2-xs);
	--wp--preset--spacing--2xl: var(--wp--preset--spacing--2-xl);
	--wp--preset--spacing--3xl: var(--wp--preset--spacing--3-xl);
	--wp--preset--font-size--2xl: var(--wp--preset--font-size--2-xl);

	--dcw-font-sm: var(--wp--preset--font-size--sm);
	--dcw-font-md: var(--wp--preset--font-size--md);
	--dcw-font-m: var(--wp--preset--font-size--md);
}

/* Base & accessibility
   Site-wide primitives: focus, text wrap, heading links, pre.
   ========================================================= */

:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

:where(h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p) {
	text-wrap: pretty;
}

/* Body/content links — hover distinction (theme.json :hover css is unreliable) */
a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content)) {
	transition: text-decoration-color 0.2s ease, text-decoration-thickness 0.2s ease;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content)):hover,
a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content)):focus {
	text-decoration-thickness: 0.14em;
	text-decoration-color: currentColor;
}

@supports (color: oklch(from red l c h)) {
	a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content)) {
		text-decoration-color: oklch(from currentColor calc(l + 0.15) c h / 0.45);
	}

	a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content)):hover,
	a:where(:not(.wp-element-button):not(.wp-block-button__link):not(.wp-block-navigation-item__content)):focus {
		text-decoration-color: oklch(from currentColor l c h);
	}
}

:where(h1, h2, h3, h4, h5, h6):has(a) a {
	transition: text-decoration-color 0.2s ease, text-decoration-thickness 0.2s ease;
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}

@supports (color: oklch(from red l c h)) {
	:where(h1, h2, h3, h4, h5, h6):has(a) a {
		text-decoration-color: oklch(from currentColor calc(l + 0.15) c h / 0.45);
	}
}

:where(h1, h2, h3, h4, h5, h6):has(a) a:hover,
:where(h1, h2, h3, h4, h5, h6):has(a) a:focus {
	text-decoration: underline;
	text-decoration-thickness: 0.14em;
	text-underline-offset: 0.18em;
	text-decoration-color: currentColor;
}

@supports (color: oklch(from red l c h)) {
	:where(h1, h2, h3, h4, h5, h6):has(a) a:hover,
	:where(h1, h2, h3, h4, h5, h6):has(a) a:focus {
		text-decoration-color: oklch(from currentColor l c h);
	}
}

.text_wrap-balanced {
	text-wrap: balance;
}

.more-link {
	display: block;
}

:where(pre) {
	overflow-x: auto;
}

.screen-reader-text {
	display: none !important;
}

/* //▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
   Navigation
   Outline offsets and submenu item spacing for core/navigation.
   //▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ */

.wp-block-navigation {
	.wp-block-navigation-submenu {
		.wp-block-navigation-item:not(:last-child) {
			margin-bottom: 3px;
		}
	}

	.wp-block-navigation-item {
		.wp-block-navigation-item__content {
			outline-offset: 4px;
		}

		ul.wp-block-navigation__submenu-container {
			.wp-block-navigation-item__content {
				outline-offset: 0;
			}
		}
	}
}

/* Utilities
   Manual helpers for the editor/front when block supports aren't enough.
   Prefer theme.json presets when possible.
   ========================================================= */

.rotate-2deg-ccw {
	rotate: -2deg;
}

.rotate-2deg-cw {
	rotate: 2deg;
}

.font_size-xs { font-size: var(--wp--preset--font-size--xs); }
.font_size-sm { font-size: var(--wp--preset--font-size--sm); }
.font_size-md { font-size: var(--wp--preset--font-size--md); }
.font_size-lg { font-size: var(--wp--preset--font-size--lg); }
.font_size-xl { font-size: var(--wp--preset--font-size--xl); }
.font_size-2xl { font-size: var(--wp--preset--font-size--2-xl); }

.font_family-figtree { font-family: var(--wp--preset--font-family--figtree); }

.text_color-base { color: var(--wp--preset--color--base); }
.text_color-contrast { color: var(--wp--preset--color--contrast); }
.text_color-teal { color: var(--wp--preset--color--teal); }
.text_color-teal-50 { color: var(--wp--preset--color--teal-50); }
.text_color-teal-100 { color: var(--wp--preset--color--teal-100); }
.text_color-teal-400 { color: var(--wp--preset--color--teal-400); }
.text_color-teal-800 { color: var(--wp--preset--color--teal-800); }
.text_color-bluegray-25 { color: var(--wp--preset--color--bluegray-25); }
.text_color-bluegray-50 { color: var(--wp--preset--color--bluegray-50); }
.text_color-bluegray-75 { color: var(--wp--preset--color--bluegray-75); }
.text_color-orange-50 { color: var(--wp--preset--color--orange-50); }
.text_color-orange-600 { color: var(--wp--preset--color--orange-600); }

.bg_color-base { background-color: var(--wp--preset--color--base); }
.bg_color-contrast { background-color: var(--wp--preset--color--contrast); }
.bg_color-teal { background-color: var(--wp--preset--color--teal); }
.bg_color-teal-50 { background-color: var(--wp--preset--color--teal-50); }
.bg_color-teal-100 { background-color: var(--wp--preset--color--teal-100); }
.bg_color-teal-400 { background-color: var(--wp--preset--color--teal-400); }
.bg_color-teal-800 { background-color: var(--wp--preset--color--teal-800); }
.bg_color-bluegray-25 { background-color: var(--wp--preset--color--bluegray-25); }
.bg_color-bluegray-50 { background-color: var(--wp--preset--color--bluegray-50); }
.bg_color-bluegray-75 { background-color: var(--wp--preset--color--bluegray-75); }
.bg_color-orange-50 { background-color: var(--wp--preset--color--orange-50); }
.bg_color-orange-600 { background-color: var(--wp--preset--color--orange-600); }

.space-2xs { gap: var(--wp--preset--spacing--2-xs); }
.space-xs { gap: var(--wp--preset--spacing--xs); }
.space-s { gap: var(--wp--preset--spacing--s); }
.space-m { gap: var(--wp--preset--spacing--m); }
.space-l { gap: var(--wp--preset--spacing--l); }
.space-xl { gap: var(--wp--preset--spacing--xl); }
.space-2xl { gap: var(--wp--preset--spacing--2-xl); }
.space-3xl { gap: var(--wp--preset--spacing--3-xl); }
.space-sm { gap: var(--wp--preset--spacing--s); }
.space-md { gap: var(--wp--preset--spacing--m); }
.space-lg { gap: var(--wp--preset--spacing--l); }
.space-xxl { gap: var(--wp--preset--spacing--2-xl); }

/*
 * Vertical Stack / flex column defaults to flex-wrap: wrap in core.
 * With nested Query grids + card min-height: 100%, wrap inflates the
 * Query’s used height (content ~850px → box ~3000px). Keep columns wrapping;
 * vertical stacks must not wrap.
 */
.wp-block-group.is-layout-flex.is-vertical,
.wp-block-group.is-vertical.is-layout-flex {
	flex-wrap: nowrap;
}

.order_reversed-mobile {
	@media (max-width: 768px) {
		flex-direction: row-reverse;
	}
}

.display_flex {
	display: flex;
}

.flex_direction-row {
	flex-direction: row;
}

.flex_direction-column {
	flex-direction: column;
}

.flex_direction-row-reverse {
	flex-direction: row-reverse;
}

.flex_direction-column-reverse {
	flex-direction: column-reverse;
}

.align_items-stretch {
	align-items: stretch;
}

.align_items-center {
	align-items: center;
}

.align_items-end {
	align-items: end;
}

.align_items-start {
	align-items: start;
}

.margin_top-auto {
	margin-top: auto !important;
}

.margin_bottom-auto {
	margin-bottom: auto;
}

/* Card
   Reusable surface. Set --card-* on the element or via modifiers.
   ========================================================= */

.card {
	--card-padding: var(--dcw-space-md);
	--card-radius: 0;
	--card-background: transparent;

	background-color: var(--card-background);
	padding: var(--card-padding);
	border-radius: var(--card-radius);
	min-width: 0;
	overflow-wrap: break-word;

	display: flex;
	flex-direction: column;
	gap: var(--dcw-space-2xs);

	& :where(figure) {
		margin: 0;
	}
}

.card_flare {
	padding: var(--dcw-space-2xs);
	text-transform: uppercase;
	line-height: 0.9;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.2px;
}

.card_background--base {
	--card-background: var(--dcw-color-base);
	background-color: var(--dcw-color-base);
	border: 1px solid var(--dcw-color-bluegray-50);
}

.card_background--teal-50 {
	--card-background: var(--dcw-color-teal-50);
	background-color: var(--dcw-color-teal-50);
}

.card_background--teal {
	--card-background: var(--dcw-color-teal);
	background-color: var(--dcw-color-teal);
}

.card_background--teal-400 {
	--card-background: var(--dcw-color-teal-400);
	background-color: var(--dcw-color-teal-400);
}

.card_background--bluegray-50 {
	--card-background: var(--dcw-color-bluegray-50);
	background-color: var(--dcw-color-bluegray-50);
}

.card_background--bluegray-75 {
	--card-background: var(--dcw-color-bluegray-75);
	background-color: var(--dcw-color-bluegray-75);
}

.card_background--orange-600 {
	--card-background: var(--dcw-color-orange-600);
	background-color: var(--dcw-color-orange-600);
}

.card_border_color--bluegray-50 {
	border: 1px solid var(--dcw-color-bluegray-50);
}

.card_border_color--bluegray-75 {
	border: 1px solid var(--dcw-color-bluegray-75);
}

/*
 * Cover embed (Vimeo/YouTube) — true object-fit: cover.
 * Core sizes the iframe to 100vw×100vh (viewport), so non-16:9 Covers
 * letterbox inside the player. Scale a 16:9 iframe to cover the Cover box.
 * SVG filter:url() on the embed wrapper blanks/ignores in Safari — keep none.
 */
.wp-block-cover .wp-block-cover__embed-background {
	container-type: size;
	overflow: hidden !important;
	filter: none !important;
	pointer-events: none;
}

.wp-block-cover .wp-block-cover__embed-background iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, calc(100cqh * 16 / 9)) !important;
	height: max(100cqh, calc(100cqw * 9 / 16)) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	border: 0;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/*
 * Cover video/embed + duotone (Safari-safe).
 * SVG filters don't apply to <video> / cross-origin iframes in Safari.
 * Approximate WP orange-duotone (#000 → #ea580c) with multiply overlay.
 */
.wp-block-cover.wp-duotone-orange-duotone:has(> .wp-block-cover__video-background),
.wp-block-cover.wp-duotone-orange-duotone:has(> .wp-block-cover__embed-background) {
	isolation: isolate;
}

.wp-block-cover.wp-duotone-orange-duotone > video.wp-block-cover__video-background {
	filter: grayscale(1) !important;
}

.wp-block-cover.wp-duotone-orange-duotone:has(> .wp-block-cover__video-background) > .wp-block-cover__background,
.wp-block-cover.wp-duotone-orange-duotone:has(> .wp-block-cover__embed-background) > .wp-block-cover__background {
	background-color: var(--dcw-color-orange-600, #ea580c) !important;
	opacity: 1 !important;
	mix-blend-mode: multiply;
	z-index: 1;
}

/* Embeds can't be grayscale'd cross-origin — lean harder on the orange multiply */
.wp-block-cover.wp-duotone-orange-duotone:has(> .wp-block-cover__embed-background) > .wp-block-cover__background {
	mix-blend-mode: color;
	opacity: 0.92 !important;
}

.wp-block-cover.wp-duotone-orange-duotone:has(> .wp-block-cover__video-background) > .wp-block-cover__inner-container,
.wp-block-cover.wp-duotone-orange-duotone:has(> .wp-block-cover__embed-background) > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	isolation: isolate;
}

.wp-block-cover.wp-duotone-teal-duotone:has(> .wp-block-cover__video-background),
.wp-block-cover.wp-duotone-teal-duotone:has(> .wp-block-cover__embed-background) {
	isolation: isolate;
}

.wp-block-cover.wp-duotone-teal-duotone > video.wp-block-cover__video-background {
	filter: grayscale(1) !important;
}

.wp-block-cover.wp-duotone-teal-duotone:has(> .wp-block-cover__video-background) > .wp-block-cover__background,
.wp-block-cover.wp-duotone-teal-duotone:has(> .wp-block-cover__embed-background) > .wp-block-cover__background {
	background-color: var(--dcw-color-teal, #39bfc2) !important;
	opacity: 1 !important;
	mix-blend-mode: multiply;
	z-index: 1;
}

.wp-block-cover.wp-duotone-teal-duotone:has(> .wp-block-cover__embed-background) > .wp-block-cover__background {
	mix-blend-mode: color;
	opacity: 0.92 !important;
}

.wp-block-cover.wp-duotone-teal-duotone:has(> .wp-block-cover__video-background) > .wp-block-cover__inner-container,
.wp-block-cover.wp-duotone-teal-duotone:has(> .wp-block-cover__embed-background) > .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	isolation: isolate;
}

/* Dr. Car Wash — list block styles (editor + front). */

/* Lists
   Styles panel (is-style-plus / is-style-checkmark-list) owns markers.
   Legacy Additional CSS classes (list_style--*) are ignored on .wp-block-list.
   ========================================================= */

.list_indent--none {
	padding-inline-start: 0;
}

.list_style--none {
	list-style: none;
	padding: 0;
}

/*
 * Default — anything that is not Plus / Checkmark.
 * Wins over leftover list_style--plus / list_style--none on the same ul.
 */
.wp-block-list:not(.is-style-plus):not(.is-style-checkmark-list) {
	list-style-type: disc !important;
	padding-inline-start: 1.5em !important;
}

ol.wp-block-list:not(.is-style-plus):not(.is-style-checkmark-list) {
	list-style-type: decimal !important;
}

.wp-block-list:not(.is-style-plus):not(.is-style-checkmark-list) > li {
	display: list-item;
	padding: 0;
	background: transparent;
	box-shadow: none;
	position: static;
}

.wp-block-list:not(.is-style-plus):not(.is-style-checkmark-list) > li::before {
	content: none !important;
	display: none !important;
}

/*
 * Block spacing between items.
 * Must stay in sync with style.spacing.blockGap via editor JS / render_block
 * (--wp--style--block-gap on the ul). This selector beats core layout's
 * container rule, so the var has to be the real gap — not a stale default.
 */
.wp-block-list {
	--wp--style--block-gap: 0.5rem;
}

.wp-block-list > li + li,
.wp-block-list > .wp-block-list-item + .wp-block-list-item {
	margin-block-start: var(--wp--style--block-gap);
}

/* Plus / Checkmark — Styles panel only */
.wp-block-list.is-style-plus,
.wp-block-list.is-style-checkmark-list {
	list-style: none !important;
	padding-inline-start: 0 !important;
}

.wp-block-list.is-style-plus > li,
.wp-block-list.is-style-checkmark-list > li {
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	color: var(--dcw-color-contrast);
	font-weight: 400;
	position: relative;
	padding: var(--dcw-space-2xs) var(--dcw-space-2xs) var(--dcw-space-2xs) calc(var(--dcw-space-sm) + 0.8em);
	display: flow-root;
	min-width: 0;
	list-style: none;
}

.wp-block-list.is-style-plus > li > :where(ul, ol),
.wp-block-list.is-style-checkmark-list > li > :where(ul, ol) {
	clear: both;
	margin-block-start: var(--dcw-space-2xs);
	padding-inline-start: var(--dcw-space-sm);
	width: 100%;
	box-sizing: border-box;
}

/*
 * Center the divider in the block-gap (margin), so space above/below the
 * line matches. Inset box-shadow sat under the margin → uneven rhythm.
 */
.wp-block-list.is-style-plus > li + li,
.wp-block-list.is-style-checkmark-list > li + li {
	box-shadow: none;
}

.wp-block-list.is-style-plus > li + li::after,
.wp-block-list.is-style-checkmark-list > li + li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(var(--wp--style--block-gap, 0.5rem) * -0.5);
	border-top: 1px solid var(--dcw-color-bluegray-25);
	pointer-events: none;
}

.wp-block-list.is-style-plus > li > .wp-block-icon,
.wp-block-list.is-style-checkmark-list > li > .wp-block-icon {
	transition: transform 0.1s ease-in-out;
	position: absolute;
	left: var(--dcw-space-2xs);
	top: var(--dcw-space-2xs);
	height: 1lh;
	display: flex;
	align-items: center;
	color: var(--dcw-color-teal);
	line-height: 1;
	transform: translateX(-8px) scale(1);
	transform-origin: left center;
}

.wp-block-list.is-style-plus > li > .wp-block-icon svg,
.wp-block-list.is-style-checkmark-list > li > .wp-block-icon svg {
	width: 1.25em;
	height: 1.25em;
}

.wp-block-list.is-style-plus > li:not(:has(> .wp-block-icon))::before,
.wp-block-list.is-style-checkmark-list > li:not(:has(> .wp-block-icon))::before {
	transition: transform 0.1s ease-in-out;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: var(--dcw-space-2xs);
	top: var(--dcw-space-2xs);
	height: 1lh;
	color: var(--dcw-color-teal);
	font-weight: 800;
	line-height: 1;
	transform: translateX(-8px) scale(1);
	transform-origin: left center;
}

.wp-block-list.is-style-plus > li:hover:not(:has(li:hover)),
.wp-block-list.is-style-checkmark-list > li:hover:not(:has(li:hover)) {
	background-color: var(--dcw-color-teal-50);
}

.wp-block-list.is-style-plus > li:hover:not(:has(li:hover)) > .wp-block-icon,
.wp-block-list.is-style-checkmark-list > li:hover:not(:has(li:hover)) > .wp-block-icon {
	transform: translateX(0) scale(1.4);
}

.wp-block-list.is-style-plus > li:hover:not(:has(li:hover)):not(:has(> .wp-block-icon))::before,
.wp-block-list.is-style-checkmark-list > li:hover:not(:has(li:hover)):not(:has(> .wp-block-icon))::before {
	transform: translateX(0) scale(1.4);
}

.wp-block-list.is-style-plus > li:not(:has(> .wp-block-icon))::before {
	content: "+";
	font-size: 1.4em;
	font-style: italic;
}

.wp-block-list.is-style-checkmark-list > li:not(:has(> .wp-block-icon))::before {
	content: "\2713";
	font-size: 1.15em;
	font-style: normal;
}

/*
 * Wash-package legacy: .list_style--plus on description wrapper.
 * Raw lists only — never Gutenberg .wp-block-list.
 */
.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) {
	list-style: none;
	padding-inline-start: 0;
}

.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) > li {
	transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	color: var(--dcw-color-contrast);
	font-weight: 400;
	position: relative;
	padding: var(--dcw-space-2xs) var(--dcw-space-2xs) var(--dcw-space-2xs) calc(var(--dcw-space-sm) + 0.8em);
	display: flow-root;
	min-width: 0;
	list-style: none;
}

.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) > li + li {
	box-shadow: inset 0 1px 0 var(--dcw-color-bluegray-25);
}

.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) > li:not(:has(> .wp-block-icon))::before {
	transition: transform 0.1s ease-in-out;
	content: "+";
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	left: var(--dcw-space-2xs);
	top: var(--dcw-space-2xs);
	height: 1lh;
	color: var(--dcw-color-teal);
	font-size: 1.4em;
	font-style: italic;
	font-weight: 800;
	line-height: 1;
	transform: translateX(-8px) scale(1);
	transform-origin: left center;
}

.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) > li:hover:not(:has(li:hover)) {
	background-color: var(--dcw-color-teal-50);
}

.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) > li:hover:not(:has(li:hover)):not(:has(> .wp-block-icon))::before {
	transform: translateX(0) scale(1.4);
}

/* FAQ card content (optional class hooks on AQL card markup).
   ========================================================= */

.faq-card__item {
	--card-padding: var(--dcw-space-md);
	--card-radius: 0;

	.faq-card__question {
		font-size: var(--dcw-font-m);
		font-weight: 600;
		line-height: 1.125;
		letter-spacing: -0.1px;
		margin: 0 0 var(--dcw-space-sm) 0;
		color: var(--dcw-color-contrast);
	}

	.faq-card__answer {
		font-size: var(--dcw-font-md);
		line-height: 1.4;
		color: var(--dcw-color-contrast);

		p {
			margin: 0;
		}

		p + p {
			margin-top: var(--dcw-space-sm);
		}
	}

	img {
		max-width: 100%;
	}
}

/* Testimonials
   Quote card layout: content, meta, author.
   ========================================================= */

.testimonial-cards {
	list-style: none;
	padding: 0;
	margin: 0;
}

.testimonial-card__item {
	--card-padding: var(--dcw-space-md);
	--card-radius: 0;
	display: flex;
}

.testimonial-card {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
}

.testimonial-card__content {
	display: flex;
	flex-direction: column;
	gap: var(--dcw-space-sm);
	margin: 0;
	width: 100%;
}

.testimonial-card__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

.testimonial-card__quote p {
	margin: 0;
	font-size: var(--dcw-font-sm);
	line-height: 1.6;
	color: var(--dcw-color-contrast);
}

.testimonial-card__meta {
	margin: 0;
	padding-top: var(--dcw-space-2xs);
	border-top: 1px solid var(--dcw-color-bluegray-25);
}

.testimonial-card__author {
	display: inline-block;
	margin: 0;
	font-style: normal;
	font-size: var(--dcw-font-sm);
	font-weight: 600;
	color: var(--dcw-color-teal-800);
}

/* Masonry
   Utility for Gutenberg grids / Post Template / .grid.
   Add class `masonry` (or Post Template style “Masonry”).
   --dcw-masonry-gap is set from Block Spacing (see includes/masonry.php).
   Safari 26.4+: grid-lanes. Else: CSS multi-column packing.
   ========================================================= */

.masonry.is-layout-grid,
.is-layout-grid.masonry,
.wp-block-post-template.masonry,
.wp-block-post-template.is-layout-grid.masonry,
.wp-block-post-template.masonry.wp-block-post-template-is-layout-grid,
.wp-block-post-template.is-style-masonry,
.wp-block-post-template.is-style-masonry.wp-block-post-template-is-layout-grid,
.grid.masonry,
.is-style-masonry.is-layout-grid {
	align-items: start;
}

@supports (display: grid-lanes) {
	.masonry.is-layout-grid,
	.is-layout-grid.masonry,
	.wp-block-post-template.masonry,
	.wp-block-post-template.is-layout-grid.masonry,
	.wp-block-post-template.masonry.wp-block-post-template-is-layout-grid,
	.wp-block-post-template.is-style-masonry,
	.wp-block-post-template.is-style-masonry.wp-block-post-template-is-layout-grid,
	.grid.masonry,
	.is-style-masonry.is-layout-grid {
		display: grid-lanes !important;
	}
}

@supports (grid-template-rows: masonry) {
	@supports not (display: grid-lanes) {
		.masonry.is-layout-grid,
		.is-layout-grid.masonry,
		.wp-block-post-template.masonry,
		.wp-block-post-template.is-layout-grid.masonry,
		.wp-block-post-template.masonry.wp-block-post-template-is-layout-grid,
		.wp-block-post-template.is-style-masonry,
		.grid.masonry,
		.is-style-masonry.is-layout-grid {
			display: grid !important;
			grid-template-rows: masonry;
			align-items: start;
		}
	}
}

/* True packing fallback when Grid Lanes is unavailable. */
@supports not (display: grid-lanes) {
	@supports not (grid-template-rows: masonry) {
		.masonry.is-layout-grid,
		.is-layout-grid.masonry,
		.wp-block-post-template.masonry,
		.wp-block-post-template.is-layout-grid.masonry,
		.wp-block-post-template.masonry.wp-block-post-template-is-layout-grid,
		.wp-block-post-template.is-style-masonry,
		.wp-block-post-template.is-style-masonry.wp-block-post-template-is-layout-grid,
		.grid.masonry,
		.is-style-masonry.is-layout-grid {
			display: block !important;
			column-count: 3;
			column-fill: balance;
			grid-template-columns: none;
			grid-template-rows: none;
			gap: unset;
			column-gap: var(--dcw-masonry-gap, var(--wp--preset--spacing--m));
		}

		.masonry.columns-1,
		.columns-1.masonry {
			column-count: 1;
		}

		.masonry.columns-2,
		.columns-2.masonry {
			column-count: 2;
		}

		.masonry.columns-3,
		.columns-3.masonry {
			column-count: 3;
		}

		.masonry.columns-4,
		.columns-4.masonry {
			column-count: 4;
		}

		.masonry.columns-5,
		.columns-5.masonry {
			column-count: 5;
		}

		.masonry.columns-6,
		.columns-6.masonry {
			column-count: 6;
		}

		.wp-block-post-template.masonry > .wp-block-post,
		.wp-block-post-template.is-style-masonry > .wp-block-post,
		.is-layout-grid.masonry > *,
		.grid.masonry > * {
			display: block;
			width: 100%;
			max-width: 100%;
			break-inside: avoid;
			page-break-inside: avoid;
			margin: 0 0 var(--dcw-masonry-gap, var(--wp--preset--spacing--m));
		}

		@media (max-width: 1024px) {
			.masonry.is-layout-grid:not(.columns-1),
			.wp-block-post-template.masonry:not(.columns-1),
			.grid.masonry:not(.columns-1) {
				column-count: 2;
			}
		}

		@media (max-width: 600px) {
			.masonry.is-layout-grid,
			.wp-block-post-template.masonry,
			.grid.masonry {
				column-count: 1;
			}
		}
	}
}

/* Live search (Query / AQL with class `live-search`)
   ========================================================= */

.live-search__control {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dcw-space-sm);
	margin: 0 0 var(--dcw-space-md) 0;
}

.live-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.live-search__input {
	transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
	flex: 1 1 16rem;
	min-width: 0;
	width: 100%;
	font: inherit;
	font-size: var(--dcw-font-sm);
	line-height: 1.4;
	color: var(--dcw-color-contrast);
	background-color: var(--dcw-color-base);
	border: 1px solid var(--dcw-color-bluegray-50);
	border-radius: 0;
	padding: var(--dcw-space-2xs) var(--dcw-space-sm);
	appearance: none;
}

.live-search__input::placeholder {
	color: var(--dcw-color-contrast);
	opacity: 0.45;
}

.live-search__input:hover {
	border-color: var(--dcw-color-teal-400);
}

.live-search__input:focus {
	border-color: var(--dcw-color-teal);
	background-color: var(--dcw-color-teal-50);
	outline-offset: 2px;
}

.live-search .wp-block-post.is-live-search-hidden {
	display: none !important;
}

.live-search__empty {
	display: none;
	margin: var(--dcw-space-md) 0 0;
	font-size: var(--dcw-font-sm);
	color: var(--dcw-color-contrast);
	opacity: 0.7;
}

.live-search.is-empty .live-search__empty {
	display: block;
}

::highlight(live-search) {
	background-color: rgba(234, 88, 12, 0.25);
	color: inherit;
}

/* Grid
   Container-query layout utility (.grid-col_*, .grid-gap_*).
   ========================================================= */

.grid {
	display: grid;
	gap: var(--dcw-space-md);
	container-type: inline-size;
	width: 100%;

	> * {
		min-width: 0;
	}

	&.grid-col_1 {
		grid-template-columns: 1fr;
	}

	&.grid-col_2,
	&.grid-col_3,
	&.grid-col_4 {
		grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	}

	&.grid-gap_none {
		gap: 0;
	}

	&.grid-gap_xs {
		gap: var(--dcw-space-2xs);
	}

	&.grid-gap_sm {
		gap: var(--dcw-space-sm);
	}

	&.grid-gap_md {
		gap: var(--dcw-space-md);
	}

	&.grid-gap_lg {
		gap: var(--dcw-space-lg);
	}

	&.grid-gap_xl {
		gap: var(--dcw-space-xl);
	}
}

@container (max-width: 599px) {
	.grid.grid-col_2,
	.grid.grid-col_3,
	.grid.grid-col_4 {
		grid-template-columns: 1fr;
	}
}

@container (max-width: 899px) {
	.grid.grid-col_3,
	.grid.grid-col_4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (max-width: 1199px) {
	.grid.grid-col_4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (min-width: 900px) {
	.grid.grid-col_3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (min-width: 1200px) {
	.grid.grid-col_4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Wash packages
   Product cards: hero, title variants (Ceramic / Regular), pricing.
   Plus lists inside packages inherit package accent colors.
   ========================================================= */

.wash-packages {
}

.wash-package__item {
	.wash-package__details {
		ul {
			padding: 0;
		}
	}

	.wash-package__hero {
		order: -1;
		position: relative;
		overflow: hidden;

		&::before {
			transition: translate 0.4s ease-in-out;
			will-change: translate;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			content: "+";
			font-size: calc(100cqh * 1.4);
			line-height: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--dcw-color-teal);
			font-weight: 800;
			font-style: italic;
			text-box-trim: trim-x-height;
			mix-blend-mode: multiply;
			translate: -0.2em 0;
			pointer-events: none;
			z-index: 1;
		}

		&:hover::before {
			translate: -0.15em 0;
		}
	}

	.wash-package__flare {
		position: absolute;
		top: var(--dcw-space-sm);
		right: var(--dcw-space-sm);
		margin: 0;
		background: var(--dcw-color-teal);
		color: var(--dcw-color-base);
	}

	.wash-package__image {
		margin: 0;
		overflow: hidden;
		display: block;

		img {
			display: block;
			width: 100%;
			height: auto;
			object-fit: cover;
		}
	}

	.wash-package__title {
		margin: 0;
		font-size: var(--dcw-font-md);
		font-weight: 600;
		padding: var(--dcw-space-sm);
		line-height: 1.2;
		background: var(--dcw-color-teal);
		color: var(--dcw-color-base);
	}

	&.wash-package__title--Ceramic,
	&.wash-package--ceramic-wax-wash,
	&.wash-package__title--ceramic-wax-wash {
		.wash-package__title,
		.wash-package__flare {
			background: var(--dcw-color-orange-600);
		}

		.wash-package__hero::before,
		.wp-block-list.is-style-plus > li > .wp-block-icon,
		.wp-block-list.is-style-checkmark-list > li > .wp-block-icon,
		.wp-block-list.is-style-plus > li:not(:has(> .wp-block-icon))::before,
		.wp-block-list.is-style-checkmark-list > li:not(:has(> .wp-block-icon))::before,
		.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) > li:not(:has(> .wp-block-icon))::before {
			color: var(--dcw-color-orange-600);
		}

		.wp-block-list.is-style-plus > li:hover:not(:has(li:hover)),
		.wp-block-list.is-style-checkmark-list > li:hover:not(:has(li:hover)),
		.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) > li:hover:not(:has(li:hover)) {
			background-color: var(--dcw-color-orange-50);
		}

		.wash-package__pricing {
			.wash-package__price-single {
				background: var(--dcw-color-orange-50);
			}

			.wash-package__price-monthly {
				background: var(--dcw-color-orange-600);
			}

			.wash-package__price-status.status-coming_soon {
				background: var(--dcw-color-orange-600);
			}
		}
	}

	&.wash-package__title--Regular,
	&.wash-package--regular-wash,
	&.wash-package__title--regular-wash {
		.wash-package__title,
		.wash-package__flare {
			background: var(--dcw-color-teal);
		}

		.wash-package__hero::before,
		.wp-block-list.is-style-plus > li > .wp-block-icon,
		.wp-block-list.is-style-checkmark-list > li > .wp-block-icon,
		.wp-block-list.is-style-plus > li:not(:has(> .wp-block-icon))::before,
		.wp-block-list.is-style-checkmark-list > li:not(:has(> .wp-block-icon))::before,
		.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) > li:not(:has(> .wp-block-icon))::before {
			color: var(--dcw-color-teal);
		}

		.wp-block-list.is-style-plus > li:hover:not(:has(li:hover)),
		.wp-block-list.is-style-checkmark-list > li:hover:not(:has(li:hover)),
		.wash-package__description.list_style--plus :is(ul, ol):not(.wp-block-list):not([class*="is-style-"]) > li:hover:not(:has(li:hover)) {
			background-color: var(--dcw-color-teal-50);
		}

		.wash-package__pricing {
			.wash-package__price-single {
				background: var(--dcw-color-teal-50);
			}

			.wash-package__price-monthly {
				background: var(--dcw-color-teal);
			}

			.wash-package__price-status.status-coming_soon {
				background: var(--dcw-color-teal-400);
			}
		}
	}

	.wash-package__intro {
		margin: 0;
		color: var(--dcw-color-contrast);
		font-size: var(--dcw-font-sm);
		font-weight: 600;
		padding: var(--dcw-space-2xs) var(--dcw-space-sm);
	}

	.wash-package__description {
		margin: 0;
		color: var(--dcw-color-contrast);
		line-height: 1.5;
		font-size: var(--dcw-font-sm);
		font-weight: 400;
		padding: var(--dcw-space-2xs) var(--dcw-space-sm) var(--dcw-space-sm) var(--dcw-space-sm);
	}

	.wash-package__pricing {
		display: grid;
		gap: 0;
		margin-top: auto;
		padding: 0;
		border: 0;
		background: transparent;

		p {
			margin: 0;
			font-size: var(--dcw-font-sm);
			font-weight: 700;
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: var(--dcw-space-2xs);
		}

		strong {
			font-weight: 700;
		}

		.wash-package__price-amount,
		.wash-package__price-amount bdi,
		.wash-package__price-status {
			font-size: var(--dcw-font-sm);
			font-weight: 700;
		}

		.wash-package__price-tax {
			display: inline;
			font-size: 11px;
			font-weight: 500;
			letter-spacing: 0.2px;
			opacity: 0.9;
		}

		.wash-package__price-single,
		.wash-package__price-monthly {
			padding: var(--dcw-space-sm);
			margin: 0;
			border: 0;
			background: var(--dcw-color-teal-50);
		}

		.wash-package__price-monthly {
			background: var(--dcw-color-teal);
			color: var(--dcw-color-base);
			border-top: 0;

			strong,
			.wash-package__price-status,
			bdi {
				color: inherit;
			}
		}

		.wash-package__price-status {
			&.status-coming_soon {
				background: var(--dcw-color-teal-400);
				color: var(--dcw-color-base);
			}
		}
	}
}

@supports (grid-template-rows: subgrid) {
	.wash-packages {
		grid-auto-flow: row;
		grid-template-rows: repeat(5, max-content);
		grid-auto-rows: max-content;
		row-gap: 0;
		column-gap: var(--dcw-space-md);
	}

	.wash-package__item {
		display: grid;
		grid-row: span 5;
		grid-template-columns: 1fr;
		grid-template-rows: subgrid;
		row-gap: 0;
	}

	.wash-package__hero {
		grid-row: 1;
		order: 0;
	}

	.wash-package__details {
		display: contents;
	}

	.wash-package__title {
		grid-row: 2;
	}

	.wash-package__intro {
		grid-row: 3;
	}

	.wash-package__description {
		grid-row: 4;
	}

	.wash-package__pricing {
		grid-row: 5;
		margin-top: 0;
		gap: 0;
	}
}

/* Motion
   Scroll-driven fade/slide/scale (view() timeline).
   ========================================================= */

@keyframes fade_slide_scale {
	0% {
		opacity: 0;
		transform: scale(0.98) translateY(5vh);
	}

	20% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	80% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}

	100% {
		opacity: 0;
		transform: scale(0.98) translateY(-5vh);
	}
}

.scroll_anim--fade_slide_scale {
	@media (prefers-reduced-motion: no-preference) {
		@supports (animation-timeline: view()) {
			animation: fade_slide_scale linear both;
			animation-timeline: view();
			animation-range: entry 0% exit 100%;
		}
	}
}

/* //▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃
   Gravity Forms (Orbital)
   Map CSS API tokens to theme.json presets. !important beats
   block Form Styles px values for font sizes.
   //▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃▃ */

.gform-theme--framework {
	/* Typography → theme font sizes */
	--gf-font-size-primary: var(--wp--preset--font-size--sm) !important;
	--gf-font-size-secondary: var(--wp--preset--font-size--sm) !important;
	--gf-font-size-tertiary: var(--wp--preset--font-size--xs) !important;
	--gf-ctrl-font-size: var(--wp--preset--font-size--sm);
	--gf-ctrl-label-font-size-primary: var(--wp--preset--font-size--sm);
	--gf-ctrl-label-font-size-secondary: var(--wp--preset--font-size--sm);
	--gf-ctrl-desc-font-size: var(--wp--preset--font-size--xs);
	--gf-form-validation-font-size: var(--wp--preset--font-size--sm);
	--gf-form-validation-heading-font-size: var(--wp--preset--font-size--md);
	--gf-form-validation-summary-font-size: var(--wp--preset--font-size--sm);

	/* Errors → orange-600 */
	--gf-color-danger: var(--wp--preset--color--orange-600) !important;
	--gf-color-danger-rgb: 234, 88, 12;
	--gf-color-danger-contrast: var(--wp--preset--color--base) !important;
	--gf-color-danger-contrast-rgb: 255, 255, 255 !important;
	--gf-radius: 0 !important;

	--gf-ctrl-outline-style: dotted !important;
	--gf-ctrl-outline-width: 2px !important;
	--gf-ctrl-outline-width-focus: 2px !important;
	--gf-ctrl-outline-color-focus: var(--wp--preset--color--teal-400) !important;
	--gf-ctrl-border-color-focus: var(--wp--preset--color--contrast) !important;
}

.gfield_label {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: space-between !important;
	align-items: center !important;
	align-content: center !important;
}

.gform_required_legend {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 0.3em;
}

/*
  Badge size is always 1.4em of the label/legend — never of a shrunk
  glyph font-size (that + min-font-size clamping made an oval / huge circle).
*/
.gfield_label > .gfield_required,
.gform_required_legend > .gfield_required {
	box-sizing: border-box;
	display: inline-grid !important;
	place-items: center !important;
	flex: none !important;
	font-size: 1em !important;
	line-height: 1 !important;
	width: 1.1em;
	height: 1.1em;
	padding: 0;
	overflow: hidden;
	color: var(--dcw-color-bluegray-75) !important;
	border: 1px solid var(--dcw-color-bluegray-50) !important;
	border-radius: 50% !important;
}

/* Nested indicator: fill the outer badge; scale ink only */
.gfield_label > .gfield_required > .gfield_required,
.gform_required_legend > .gfield_required > .gfield_required {
	display: inline-grid !important;
	place-items: center !important;
	width: 100%;
	height: 100%;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

/* Asterisk metrics are garbage — redraw via ::before and optically center */
.gfield_required_asterisk {
	color: transparent !important;

	&::before {
		content: "*";
		font-size: 0.9em;
		line-height: 1;
		color: var(--gf-color-danger);
		transform: translateY(0.1em);
	}
}

/* Only shrink ink when nested inside the sized badge shell */
.gfield_label > .gfield_required > .gfield_required_custom,
.gform_required_legend > .gfield_required > .gfield_required_custom {
	font-size: 0.55em;
	line-height: 1;
}

.gsection_title {
	margin: 0;
}