/**
 * Fallback section backgrounds when no palette color is saved on the block.
 * Once a color is chosen in the editor, WordPress adds .has-background and preset classes.
 */
.wp-block-custom-theme-saela-faq-section:not(.has-background),
.wp-block-custom-theme-saela-pillars-grid:not(.has-background),
.wp-block-custom-theme-saela-state-intro:not(.has-background),
.wp-block-custom-theme-saela-split-intro:not(.has-background),
.wp-block-custom-theme-saela-comparison-table:not(.has-background),
.wp-block-custom-theme-saela-section-intro:not(.has-background),
.wp-block-custom-theme-saela-stats-bar:not(.has-background),
.wp-block-custom-theme-saela-nap-section:not(.has-background) {
	background-color: var(--wp--preset--color--sand);
}

.wp-block-custom-theme-saela-reviews-grid:not(.has-background),
.wp-block-custom-theme-saela-services-grid:not(.has-background),
.wp-block-custom-theme-saela-office-cards:not(.has-background),
.wp-block-custom-theme-saela-scenic-band:not(.has-background),
.wp-block-custom-theme-saela-protection-program:not(.has-background),
.wp-block-custom-theme-saela-steps-grid:not(.has-background),
.wp-block-custom-theme-saela-pest-cards:not(.has-background),
.wp-block-custom-theme-saela-photo-band:not(.has-background),
.wp-block-custom-theme-saela-city-hero:not(.has-background),
.wp-block-custom-theme-saela-locations-grid:not(.has-background),
.wp-block-custom-theme-saela-lead-form:not(.has-background),
.wp-block-custom-theme-saela-area-map:not(.has-background),
.wp-block-custom-theme-saela-header:not(.has-background),
.wp-block-custom-theme-saela-hero:not(.has-background),
.wp-block-custom-theme-saela-feature-cards:not(.has-background),
.wp-block-custom-theme-saela-media-split:not(.has-background),
.wp-block-custom-theme-saela-state-hero:not(.has-background) {
	background-color: var(--wp--preset--color--white);
}

.wp-block-custom-theme-saela-city-directory:not(.has-background),
.wp-block-custom-theme-saela-state-cta:not(.has-background),
.wp-block-custom-theme-saela-diy-split:not(.has-background),
.wp-block-custom-theme-saela-offices-band:not(.has-background),
.wp-block-custom-theme-saela-footer:not(.has-background) {
	background-color: var(--wp--preset--color--forest);
}

.wp-block-custom-theme-saela-stat-callout:not(.has-background) {
	background-color: var(--wp--preset--color--sunset);
}

/* ------------------------------------------------------------------
   Hero library (saela-hero-*) — default section backgrounds
   ------------------------------------------------------------------ */
.wp-block-custom-theme-saela-hero-split-form:not(.has-background),
.wp-block-custom-theme-saela-hero-centered:not(.has-background),
.wp-block-custom-theme-saela-hero-stat-band:not(.has-background),
.wp-block-custom-theme-saela-hero-image-overlay:not(.has-background) {
	background-color: var(--wp--preset--color--forest);
}

.wp-block-custom-theme-saela-hero-phone-bar:not(.has-background),
.wp-block-custom-theme-saela-hero-minimal:not(.has-background) {
	background-color: var(--wp--preset--color--sand);
}

.wp-block-custom-theme-saela-hero-editorial:not(.has-background),
.wp-block-custom-theme-saela-hero-split-image:not(.has-background) {
	background-color: var(--wp--preset--color--white);
}

/* ------------------------------------------------------------------
   Hero library — shared primitives (eyebrow, stats, ghost button,
   chips, office-card text). Scoped to .saela-hlib__* classes used by
   the saela-hero-* block templates.
   ------------------------------------------------------------------ */
.saela-hlib__eyebrow {
	align-items: center;
	gap: 8px;
	margin-bottom: 1.125rem;
}

.saela-hlib__eyebrow-line {
	border: 0;
	flex: 0 0 28px;
	height: 1px;
	margin: 0;
	opacity: 1;
	width: 28px;
}

.saela-hlib__eyebrow-text {
	color: #ea9230;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.13em;
	margin: 0;
	text-transform: uppercase;
}

.saela-hlib__stats {
	gap: 2rem;
}

.saela-hlib__stat-value {
	color: #ea9230;
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 1.875rem;
	line-height: 1;
	margin: 0;
}

.saela-hlib__stat-label {
	color: rgba(38, 69, 61, 0.6);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.78125rem;
	margin: 0.25rem 0 0;
}

.saela-hlib--dark .saela-hlib__stat-label {
	color: rgba(245, 245, 235, 0.65);
}

/* Ghost button — transparent with hairline border. */
.saela-btn-ghost .wp-block-button__link {
	background: transparent;
	border: 1.5px solid rgba(38, 69, 61, 0.25);
	color: #26453d;
}

.saela-btn-ghost--dark .wp-block-button__link {
	background: rgba(245, 245, 235, 0.08);
	border-color: rgba(245, 245, 235, 0.28);
	color: #f5f5eb;
}

/* Every button changes color on hover: solid buttons darken (works for any
   background color), ghost buttons pick up the sunset accent. */
.wp-block-button__link {
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, filter 160ms ease;
}

.wp-block-button__link:hover {
	filter: brightness(0.88);
}

.saela-btn-ghost .wp-block-button__link:hover,
.saela-btn-ghost--dark .wp-block-button__link:hover {
	background: rgba(234, 146, 48, 0.14);
	border-color: #ea9230;
	filter: none;
}

/* Trust-badge chip. */
.saela-hlib__chip {
	align-items: center;
	background: #f5f5eb;
	border: 1px solid rgba(38, 69, 61, 0.16);
	border-radius: 100px;
	color: #26453d;
	display: inline-flex;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.8125rem;
	gap: 8px;
	margin: 0;
	padding: 0.5625rem 0.9375rem;
}

.saela-hlib__chip::before {
	background: #ea9230;
	border-radius: 50%;
	content: "";
	display: inline-block;
	flex: 0 0 6px;
	height: 6px;
	width: 6px;
}

/* ------------------------------------------------------------------
   Section library (saela-sec-*) — default section backgrounds
   ------------------------------------------------------------------ */
.wp-block-custom-theme-saela-sec-two-col-intro:not(.has-background),
.wp-block-custom-theme-saela-sec-three-col-prose:not(.has-background),
.wp-block-custom-theme-saela-sec-centered-prose:not(.has-background),
.wp-block-custom-theme-saela-sec-promise-callout:not(.has-background),
.wp-block-custom-theme-saela-sec-feature-grid:not(.has-background),
.wp-block-custom-theme-saela-sec-walkthrough:not(.has-background),
.wp-block-custom-theme-saela-sec-program-chips:not(.has-background),
.wp-block-custom-theme-saela-sec-compact-cards:not(.has-background),
.wp-block-custom-theme-saela-sec-link-tiles:not(.has-background),
.wp-block-custom-theme-saela-sec-detail-table:not(.has-background),
.wp-block-custom-theme-saela-sec-factor-cards:not(.has-background) {
	background-color: var(--wp--preset--color--white);
}

.wp-block-custom-theme-saela-sec-image-text:not(.has-background),
.wp-block-custom-theme-saela-sec-stat-strip:not(.has-background),
.wp-block-custom-theme-saela-sec-tabs:not(.has-background),
.wp-block-custom-theme-saela-sec-card-grid:not(.has-background),
.wp-block-custom-theme-saela-sec-sector-tiles:not(.has-background),
.wp-block-custom-theme-saela-sec-cta-form:not(.has-background),
.wp-block-custom-theme-saela-sec-cta-centered:not(.has-background),
.wp-block-custom-theme-saela-sec-check-table:not(.has-background),
.wp-block-custom-theme-saela-sec-pricing-tiers:not(.has-background) {
	background-color: var(--wp--preset--color--sand);
}

.wp-block-custom-theme-saela-sec-why-grid:not(.has-background),
.wp-block-custom-theme-saela-sec-process:not(.has-background),
.wp-block-custom-theme-saela-sec-location-tiles:not(.has-background),
.wp-block-custom-theme-saela-sec-cta-forest:not(.has-background) {
	background-color: var(--wp--preset--color--forest);
}

.wp-block-custom-theme-saela-sec-cta-split:not(.has-background),
.wp-block-custom-theme-saela-sec-cta-stat:not(.has-background) {
	background-color: var(--wp--preset--color--sunset);
}

/* ------------------------------------------------------------------
   Section library — shared primitives (.saela-slib__*)
   Section head (eyebrow + title + sub), grids, chips, checks, links.
   .saela-slib--dark on the section flips text to sand.
   ------------------------------------------------------------------ */
.saela-slib__inner {
	margin: 0 auto;
	max-width: 1200px;
}

/* Baseline horizontal gutters for section-library blocks. Block style.css files
   normally set full padding; this catches omissions and editor-only tweaks. */
[class*="wp-block-custom-theme-saela-sec-"] {
	padding-inline: 1.5rem;
}

/* Groups placed directly in page content without a section wrapper. */
#main-content > .wp-block-group.saela-slib__inner {
	padding-inline: 1.5rem;
}

.saela-slib__eyebrow {
	color: #ea9230;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.125em;
	margin: 0 0 0.875rem;
	text-transform: uppercase;
}

.saela-slib__title {
	color: #26453d;
	font-family: "DM Serif Display", Georgia, serif;
	font-size: clamp(2rem, 3.3vw, 2.625rem);
	font-weight: 400;
	line-height: 1.1;
	margin: 0;
	text-wrap: balance;
}

.saela-slib__sub {
	color: rgba(38, 69, 61, 0.72);
	font-family: Inter, system-ui, sans-serif;
	font-size: 1.0625rem;
	line-height: 1.6;
	margin: 1.125rem 0 0;
}

.saela-slib--dark .saela-slib__title {
	color: #f5f5eb;
}

.saela-slib--dark .saela-slib__sub {
	color: rgba(245, 245, 235, 0.72);
}

/* CSS grids for tile/card layouts (core groups laid out as grid). */
.saela-slib__grid-2 {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(2, 1fr);
}

/* Core flow layout adds margin-block-start between siblings, which staggers
   grid cells (e.g. a fat divider strip above the second card). */
.saela-slib__grid-2 > *,
.saela-slib__grid-3 > *,
.saela-slib__grid-4 > * {
	margin-block-end: 0 !important;
	margin-block-start: 0 !important;
}

.saela-slib__grid-3 {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, 1fr);
}

.saela-slib__grid-4 {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 991px) {
	.saela-slib__grid-3,
	.saela-slib__grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.saela-slib__grid-2,
	.saela-slib__grid-3,
	.saela-slib__grid-4 {
		grid-template-columns: 1fr;
	}
}

/* Media-library images replacing the striped placeholders on city pages. */
.saela-city-media img {
	border-radius: 12px;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.saela-city-media {
	margin: 0;
}

.saela-city-media img {
	aspect-ratio: 16 / 10;
}

.saela-city-media--wide img {
	aspect-ratio: 21 / 9;
}

.saela-city-media--square img {
	aspect-ratio: 1 / 1;
}

.saela-city-media--card img {
	aspect-ratio: 4 / 3;
	border-radius: 12px 12px 0 0;
}

.saela-city-media--tall img {
	aspect-ratio: 4 / 5;
}

.saela-city-media--step img {
	aspect-ratio: 3 / 4;
}

/* Service-area map + surrounding-city links ([saela_locations_area]). */
.saela-locations-area {
	background: #f5f5eb;
	padding: 5.25rem 1.5rem;
}

.saela-locations-area__inner {
	margin: 0 auto;
	max-width: 1200px;
}

.saela-locations-area__head {
	margin-bottom: 2.25rem;
	max-width: 720px;
}

.saela-locations-area__title {
	color: #26453d;
	font-family: "DM Serif Display", Georgia, serif;
	font-size: clamp(1.875rem, 3.4vw, 2.375rem);
	font-weight: 400;
	line-height: 1.12;
	margin: 0;
}

.saela-locations-area__grid {
	align-items: start;
	display: grid;
	gap: 2.5rem;
	grid-template-columns: 0.9fr 1.1fr;
}

.saela-locations-area__grid--no-map {
	grid-template-columns: 1fr;
}

.saela-locations-area__map {
	border: 1px solid rgba(38, 69, 61, 0.14);
	border-radius: 14px;
	overflow: hidden;
}

.saela-locations-area__map-frame {
	aspect-ratio: 4 / 3;
	border: 0;
	display: block;
	height: auto;
	width: 100%;
}

.saela-locations-area__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
}

.saela-locations-area__link {
	background: #fff;
	border: 1px solid rgba(38, 69, 61, 0.16);
	border-radius: 100px;
	color: #26453d;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.625rem 1.125rem;
	text-decoration: none;
	transition: background 120ms, border-color 120ms;
}

.saela-locations-area__link:hover {
	background: rgba(234, 146, 48, 0.12);
	border-color: #ea9230;
}

@media (max-width: 781px) {
	.saela-locations-area__grid {
		grid-template-columns: 1fr;
	}
}

/* Check row — orange-ringed ✓ before the text. */
.saela-slib__check {
	color: #26453d;
	display: flex;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.96875rem;
	font-weight: 500;
	gap: 0.875rem;
	line-height: 1.4;
	margin: 0;
}

.saela-slib__check::before {
	align-items: center;
	border: 1.5px solid #ea9230;
	border-radius: 50%;
	color: #ea9230;
	content: "✓";
	display: inline-flex;
	flex: 0 0 22px;
	font-size: 0.75rem;
	font-weight: 700;
	height: 22px;
	justify-content: center;
	width: 22px;
}

/* Dark pill chip (forest panels). */
.saela-slib__chip-dark {
	background: rgba(245, 245, 235, 0.04);
	border: 1px solid rgba(245, 245, 235, 0.22);
	border-radius: 100px;
	color: #f5f5eb;
	display: inline-block;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.875rem;
	margin: 0;
	padding: 0.625rem 1rem;
}

/* Badge pill with orange dot (forest sections). */
.saela-slib__badge {
	align-items: center;
	border: 1px solid rgba(245, 245, 235, 0.22);
	border-radius: 100px;
	color: #f5f5eb;
	display: inline-flex;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.84375rem;
	gap: 8px;
	margin: 0;
	padding: 0.625rem 1rem;
}

.saela-slib__badge::before {
	background: #ea9230;
	border-radius: 50%;
	content: "";
	display: inline-block;
	flex: 0 0 7px;
	height: 7px;
	width: 7px;
}

/* Orange arrow link. */
.saela-slib__arrow-link {
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.90625rem;
	font-weight: 600;
	margin: 0;
}

.saela-slib__arrow-link a {
	border-bottom: 1px solid #ea9230;
	color: #ea9230;
	padding-bottom: 2px;
	text-decoration: none;
}

/* Office-card text (hero 02). */
.saela-hlib__card-label {
	color: rgba(38, 69, 61, 0.55);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	margin: 0 0 0.375rem;
	text-transform: uppercase;
}

.saela-hlib__card-value {
	color: #26453d;
	font-family: "DM Serif Display", Georgia, serif;
	font-size: 1.375rem;
	margin: 0;
}

.saela-hlib__card-value a {
	color: inherit;
	text-decoration: none;
}

.saela-hlib__card-address {
	color: #26453d;
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.8125rem;
	line-height: 1.4;
	margin: 0;
}

.saela-hlib__card-hours {
	color: rgba(38, 69, 61, 0.55);
	font-family: Inter, system-ui, sans-serif;
	font-size: 0.75rem;
	margin: 0;
}