/**
 * Runtime layer for the directory Design Studio.
 *
 * The dynamic palette is printed after this file. All rules stay inside the
 * directory product boundary and do not restyle ordinary WordPress content.
 */

body.snm-directory-active {
	background-color: var(--snm-design-page-bg, #f4f7f5);
	color: var(--snm-design-text, #102a2e);
}

/*
 * The typography layer deliberately wins over theme selectors on directory
 * surfaces. Families are inherited by descendants, while semantic text types
 * receive their own size, weight, line-height, case and style tokens.
 */
body.snm-directory-active .snm-frontend,
body.snm-directory-active .snm-frontend * {
	font-family: var(--snm-font-body-family, "SNM Inter", "Segoe UI", Arial, sans-serif) !important;
}

body.snm-directory-active .snm-frontend {
	font-size: var(--snm-font-size-body, 17px) !important;
	font-style: var(--snm-font-body-style, normal);
	font-weight: var(--snm-font-body-weight, 400);
	line-height: var(--snm-font-body-line, 1.65);
	letter-spacing: var(--snm-font-body-tracking, 0);
	text-transform: var(--snm-font-body-transform, none);
}

body.snm-directory-active .snm-frontend :where(p, li, dt, dd, label, input, select, textarea) {
	font-size: var(--snm-font-size-body, 17px) !important;
	font-style: var(--snm-font-body-style, normal);
	font-weight: var(--snm-font-body-weight, 400);
	line-height: var(--snm-font-body-line, 1.65);
	letter-spacing: var(--snm-font-body-tracking, 0);
	text-transform: var(--snm-font-body-transform, none);
}

body.snm-directory-active .snm-frontend :is(h1, h2, h3, h4, h5, h6),
body.snm-directory-active .snm-frontend :is(h1, h2, h3, h4, h5, h6) * {
	font-family: var(--snm-font-heading-family, "SNM Manrope", "Segoe UI", Arial, sans-serif) !important;
	font-style: var(--snm-font-heading-style, normal) !important;
	font-weight: var(--snm-font-heading-weight, 700) !important;
	line-height: var(--snm-font-heading-line, 1.12) !important;
	letter-spacing: var(--snm-font-heading-tracking, -0.02em) !important;
	text-transform: var(--snm-font-heading-transform, none) !important;
}

body.snm-directory-active .snm-frontend h1 {
	font-size: var(--snm-font-size-h1, 54px) !important;
}

body.snm-directory-active .snm-frontend h2 {
	font-size: var(--snm-font-size-h2, 39px) !important;
}

body.snm-directory-active .snm-frontend h3 {
	font-size: var(--snm-font-size-h3, 29px) !important;
}

body.snm-directory-active .snm-frontend h4 {
	font-size: var(--snm-font-size-h4, 23px) !important;
}

body.snm-directory-active .snm-frontend h5 {
	font-size: var(--snm-font-size-h5, 19px) !important;
}

body.snm-directory-active .snm-frontend h6 {
	font-size: var(--snm-font-size-h6, 16px) !important;
}

body.snm-directory-active .snm-frontend :is(
	.snm-home-hero__lead,
	.snm-entry-hero__lead,
	.snm-page-hero__description,
	.snm-contribute-banner > div > p,
	.snm-material-content > p:first-child
) {
	font-size: var(--snm-font-size-lead, 21px) !important;
}

body.snm-directory-active .snm-frontend :is(
	small,
	.snm-kicker,
	.snm-directory-submission__eyebrow,
	.snm-directory-card__topline,
	.snm-directory-card__updated,
	.snm-directory-card__distance,
	.snm-directory-material-card__label,
	.snm-directory-google-map__popup-meta,
	.snm-directory-map__popup-meta
) {
	font-size: var(--snm-font-size-small, 14px) !important;
}

body.snm-directory-active .snm-frontend :is(
	.snm-directory-card__title,
	.snm-directory-material-card__body h3,
	.snm-section-card__content h3,
	.snm-sitebar__mega-card strong,
	.snm-request-card h3
),
body.snm-directory-active .snm-frontend :is(
	.snm-directory-card__title,
	.snm-directory-material-card__body h3,
	.snm-section-card__content h3,
	.snm-sitebar__mega-card strong,
	.snm-request-card h3
) * {
	font-family: var(--snm-font-heading-family, "SNM Manrope", "Segoe UI", Arial, sans-serif) !important;
	font-size: var(--snm-font-size-card-title, 21px) !important;
	font-style: var(--snm-font-heading-style, normal) !important;
	font-weight: var(--snm-font-heading-weight, 700) !important;
	line-height: var(--snm-font-heading-line, 1.12) !important;
	letter-spacing: var(--snm-font-heading-tracking, -0.02em) !important;
	text-transform: var(--snm-font-heading-transform, none) !important;
}

body.snm-directory-active .snm-frontend :is(
	.snm-directory-button,
	.snm-button--light,
	.snm-directory-location-button,
	.snm-directory-favorite-button,
	.snm-map-component__expand,
	.snm-sitebar__mega-close,
	button[type="submit"]
) {
	font-size: var(--snm-font-size-button, 15px) !important;
	font-style: var(--snm-font-control-style, normal) !important;
	font-weight: var(--snm-font-button-weight, 700) !important;
	letter-spacing: var(--snm-font-body-tracking, 0) !important;
	text-transform: var(--snm-font-button-transform, none) !important;
}

body.snm-directory-active .snm-frontend :is(
	.snm-sitebar__nav,
	.snm-account-nav,
	.snm-entry-anchor-nav,
	.snm-material-type-nav,
	.snm-directory-breadcrumbs
) :where(a, button),
body.snm-directory-active .snm-frontend :is(
	.snm-sitebar__account,
	.snm-sitebar__object-trigger
) {
	font-size: var(--snm-font-size-nav, 14px) !important;
	font-style: var(--snm-font-control-style, normal) !important;
	font-weight: var(--snm-font-nav-weight, 650) !important;
	letter-spacing: var(--snm-font-body-tracking, 0) !important;
	text-transform: var(--snm-font-nav-transform, none) !important;
}

.snm-frontend .snm-design-stack {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

.snm-frontend .snm-design-stack > .snm-design-block {
	width: 100%;
}

.snm-frontend .snm-design-block {
	min-width: 0;
}

.snm-frontend .snm-design-block[hidden] {
	display: none !important;
}

.snm-frontend .snm-design-block--custom-background {
	position: relative;
	isolation: isolate;
}

.snm-frontend .snm-directory-shell--content > :is(.snm-directory-section, .snm-discovery).snm-design-block--custom-background {
	padding: clamp(20px, 3vw, 34px);
	border-radius: var(--snm-directory-radius);
	overflow: hidden;
}

.snm-frontend .snm-design-block--background-image {
	background-color: var(--snm-design-heading, #071d21);
}

body.snm-directory-active .snm-sitebar,
.snm-frontend .snm-sitebar {
	border-bottom-color: color-mix(in srgb, var(--snm-design-border, #dce4e2) 72%, transparent);
	background: color-mix(in srgb, var(--snm-design-surface, #fff) 93%, transparent);
	color: var(--snm-design-text, #102a2e);
}

.snm-frontend .snm-home-hero {
	background:
		radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--snm-lime) 28%, transparent) 0 12%, transparent 12.4%),
		radial-gradient(circle at 73% 92%, color-mix(in srgb, var(--snm-brand) 40%, transparent) 0 18%, transparent 18.4%),
		linear-gradient(126deg, var(--snm-brand-deep), var(--snm-brand-strong) 58%, var(--snm-brand));
}

.snm-frontend :is(.snm-page-hero, .snm-material-hero, .snm-entry-hero) {
	background:
		radial-gradient(circle at 89% 24%, color-mix(in srgb, var(--snm-lime) 20%, transparent) 0 12%, transparent 12.4%),
		linear-gradient(140deg, var(--snm-design-accent-soft), var(--snm-design-surface) 52%, var(--snm-design-surface-soft));
}

.snm-frontend .snm-contribute-banner {
	background:
		radial-gradient(circle at 86% 20%, color-mix(in srgb, var(--snm-lime) 26%, transparent), transparent 24%),
		var(--snm-brand-dark);
}

.snm-frontend .snm-design-block--hero.snm-design-block--custom-background {
	background-color: transparent;
}

.snm-frontend .snm-design-block--custom-background :where(h1, h2, h3, p, span, strong, small, dt, dd) {
	text-shadow: none;
}

/*
 * Optional foreground colors belong to one configured block only. They are
 * deliberately separate from the global palette: leaving an admin field
 * empty emits neither a class nor a variable and preserves the old cascade.
 */
body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color {
	color: var(--snm-block-text-color) !important;
}

body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color :where(
	p:not([class*="status"]):not([class*="notice"]):not([class*="verified"]):not(
		.snm-account-notice *,
		.snm-community-notice *,
		.snm-directory-filters__notice *,
		.snm-directory-map__status *,
		.snm-directory-location-status *,
		.snm-directory-submission-form__status *,
		.snm-moderation__callout *,
		.snm-status *,
		.snm-status-chip *,
		.snm-status-pill *,
		.snm-timing-state *
	),
	.snm-directory-prose li,
	dt,
	dd,
	blockquote,
	figcaption,
	address,
	caption,
	th,
	td,
	label,
	legend
) {
	color: var(--snm-block-text-color) !important;
}

body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color :where(
	p:not([class*="status"]):not([class*="notice"]):not([class*="verified"]):not(
		.snm-account-notice *,
		.snm-community-notice *,
		.snm-directory-filters__notice *,
		.snm-directory-map__status *,
		.snm-directory-location-status *,
		.snm-directory-submission-form__status *,
		.snm-moderation__callout *,
		.snm-status *,
		.snm-status-chip *,
		.snm-status-pill *,
		.snm-timing-state *
	),
	.snm-directory-prose li,
	dt,
	dd,
	blockquote,
	figcaption,
	address,
	caption,
	th,
	td
) :where(a:not([class*="button"]):not([class*="badge"]), span, strong, small, em, b, time) {
	color: inherit !important;
}

body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color :is(
	.snm-kicker,
	.snm-home-hero__lead,
	.snm-home-hero__proof,
	.snm-home-hero__proof > span,
	.snm-home-search__heading > div > span,
	.snm-home-search__popular > span,
	.snm-page-hero__description,
	.snm-entry-hero__lead,
	.snm-entry-hero__address,
	.snm-entry-hero__address > span,
	.snm-entry-facts > div > span,
	.snm-entry-facts > div > strong,
	.snm-directory-breadcrumbs,
	.snm-directory-breadcrumbs a,
	.snm-directory-section-heading > div > span,
	.snm-content-heading__number,
	.snm-content-heading > div > span,
	.snm-contact-card__heading > span,
	.snm-directory-card__topline,
	.snm-directory-card__updated,
	.snm-directory-card__distance,
	.snm-directory-material-card__label,
	.snm-directory-text-link,
	.snm-directory-text-link > span,
	.snm-directory-map-links > span,
	.snm-directory-map-links > a,
	.snm-muted-copy
) {
	color: var(--snm-block-text-color) !important;
}

/*
 * The hero metric is a light contrast island. Its number and explanatory
 * text must remain dark even when the surrounding image hero deliberately
 * uses white custom text.
 */
body.snm-directory-active .snm-frontend .snm-page-hero__metric > strong {
	color: #075f5a !important;
	color: color-mix(in srgb, var(--snm-current-accent, #087a72) 62%, #071d21) !important;
}

body.snm-directory-active .snm-frontend .snm-page-hero__metric > span {
	color: #102a2e !important;
}

body.snm-directory-active .snm-frontend .snm-page-hero__metric > small {
	color: #5e7072 !important;
}

body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color.snm-account-nav a:not(:hover):not([aria-current="page"]),
body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color.snm-account-nav a:not(:hover):not([aria-current="page"]) small,
body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color.snm-material-type-nav > span,
body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color.snm-material-type-nav a:not(:hover),
body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color.snm-material-type-nav a:not(:hover) small {
	color: var(--snm-block-text-color) !important;
}

body.snm-directory-active .snm-frontend .snm-design-block--custom-heading-color :is(h1, h2, h3, h4, h5, h6),
body.snm-directory-active .snm-frontend .snm-design-block--custom-heading-color :is(h1, h2, h3, h4, h5, h6) :where(a, span, strong, small, em, b) {
	color: var(--snm-block-heading-color) !important;
}

@media (prefers-reduced-motion: reduce) {
	.snm-frontend .snm-design-block {
		scroll-behavior: auto;
	}
}

@media (max-width: 720px) {
	body.snm-directory-active .snm-frontend h1 {
		font-size: calc(var(--snm-font-size-h1, 54px) * 0.78) !important;
	}

	body.snm-directory-active .snm-frontend h2 {
		font-size: calc(var(--snm-font-size-h2, 39px) * 0.84) !important;
	}

	body.snm-directory-active .snm-frontend h3 {
		font-size: calc(var(--snm-font-size-h3, 29px) * 0.9) !important;
	}

	body.snm-directory-active .snm-frontend h4 {
		font-size: calc(var(--snm-font-size-h4, 23px) * 0.94) !important;
	}
}

@media print {
	.snm-frontend .snm-design-block--background-image {
		background-image: none !important;
	}

	body.snm-directory-active .snm-frontend .snm-design-block--custom-text-color {
		--snm-block-text-color: #111 !important;
	}

	body.snm-directory-active .snm-frontend .snm-design-block--custom-heading-color {
		--snm-block-heading-color: #111 !important;
	}
}