/* ==========================================================================
   SAN DIEGO BBQ CLEANERS - COMPONENTS
   Cascade position 3. Depends on foundations.css tokens.

   Reusable pieces used by more than one template: the compare slider and
   WPForms. The accordion, feature trio, booking band and the old location
   page rules went once nothing used them (2026-10-14).
   ========================================================================== */

/* ==========================================================================
   COMPARE (before / after)
   The "after" layer is clipped from the right by --sdb-compare-pos, which
   compare.js sets from the range input. The input itself is stretched over
   the whole element, transparent, and only its thumb has a hit area, so the
   native control does all the pointer and keyboard work.
   ========================================================================== */

.sdb-compare {
	position: relative;
	overflow: hidden;
	border-radius: var(--sdb-radius-card);
	line-height: 0;
	user-select: none;
	-webkit-user-select: none;
}

.sdb-compare__layer { position: relative; }
.sdb-compare__layer--after { position: absolute; inset: 0; }

.sdb-compare__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sdb-compare__layer--after {
	clip-path: inset(0 calc(100% - var(--sdb-compare-pos)) 0 0);
}

.sdb-compare__tag {
	position: absolute;
	top: var(--sdb-s2);
	padding: 4px 10px;
	border-radius: var(--sdb-radius-input);
	background: rgba(6, 15, 20, .7);
	color: var(--sdb-cream);
	font-family: var(--sdb-font-body);
	font-size: var(--sdb-tiny);
	font-weight: var(--sdb-w-semi);
	line-height: 1.2;
	pointer-events: none;
}

.sdb-compare__tag--before { right: var(--sdb-s2); }
.sdb-compare__tag--after  { left: var(--sdb-s2); }

.sdb-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--sdb-compare-pos);
	width: 2px;
	margin-left: -1px;
	pointer-events: none;
	background: linear-gradient(180deg,
		transparent,
		rgba(244, 247, 249, .9) 12%,
		rgba(244, 247, 249, .9) 88%,
		transparent);
}

/* The knob carries the flame. Chrome at rest, ember while hovered, dragged or
   focused, with a glow behind the ring. */
.sdb-compare__knob {
	position: absolute;
	top: 50%;
	left: var(--sdb-compare-pos);
	width: 48px;
	height: 48px;
	padding: 16px;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	pointer-events: none;
	background: rgba(15, 17, 19, .5);
	backdrop-filter: blur(14px) saturate(140%);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	box-shadow: inset 0 0 0 1px rgba(244, 247, 249, .34);
	transition: box-shadow .3s ease, background-color .3s ease;
}

.sdb-compare__knob path { fill: var(--sdb-cr-1); transition: fill .3s ease; }

.sdb-compare:hover .sdb-compare__knob,
.sdb-compare.is-dragging .sdb-compare__knob,
.sdb-compare__range:focus-visible ~ .sdb-compare__knob {
	background: rgba(15, 17, 19, .62);
	box-shadow: inset 0 0 0 1px rgba(204, 89, 68, .75), 0 0 22px rgba(204, 89, 68, .35);
}

.sdb-compare:hover .sdb-compare__knob path,
.sdb-compare.is-dragging .sdb-compare__knob path,
.sdb-compare__range:focus-visible ~ .sdb-compare__knob path { fill: var(--sdb-red-hot); }

/* The hint sits on the knob and retires once somebody uses it. An instruction
   that stays after it has been followed is clutter. */
.sdb-compare__hint {
	position: absolute;
	top: 50%;
	left: var(--sdb-compare-pos);
	transform: translate(-50%, -50%) translateY(44px);
	padding: 5px 12px;
	border-radius: var(--sdb-radius-btn);
	background: rgba(15, 17, 19, .55);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: inset 0 0 0 1px rgba(244, 247, 249, .2);
	font-size: 11px;
	font-weight: var(--sdb-w-semi);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sdb-cr-2);
	pointer-events: none;
	transition: opacity .5s ease;
}

.sdb-compare.is-used .sdb-compare__hint { opacity: 0; }

.sdb-compare__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	background: transparent;
	cursor: ew-resize;
	-webkit-appearance: none;
	appearance: none;
	opacity: 0;
}

.sdb-compare__range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 48px;
	height: 48px;
	background: transparent;
	border: 0;
	cursor: ew-resize;
}

.sdb-compare__range::-moz-range-thumb {
	width: 48px;
	height: 48px;
	background: transparent;
	border: 0;
	cursor: ew-resize;
}

.sdb-compare__range:focus-visible { outline: var(--sdb-focus); outline-offset: -3px; }

/* ==========================================================================
   SERVICE HERO
   Moved to service.css with the 2026-09-18 rebuild of template-parts/
   service-hero.php. Nothing here on purpose.
   ========================================================================== */

/* ==========================================================================
   SERVICE BODY, GALLERY
   Deleted 2026-09-18 with the last of the three service page rebuilds:
   .sdb-svc__* (page section), .sdb-restore, .sdb-process, .sdb-gallery. None
   is referenced by any template. The accordion, the brand lines and the
   contact FAQ rules followed when contact and showroom were rebuilt.
   ========================================================================== */

/* ==========================================================================
   WPFORMS
   Light touch: match the tokens, leave layout to the plugin. Inputs stay
   white on any background, so a form is always a bright surface to fill in.
   ========================================================================== */

.wpforms-container .wpforms-field-label {
	font-family: var(--sdb-font-body) !important;
	font-size: var(--sdb-small) !important;
	font-weight: var(--sdb-w-med) !important;
}

.wpforms-container .wpforms-field input:not([type="checkbox"]):not([type="radio"]),
.wpforms-container .wpforms-field select,
.wpforms-container .wpforms-field textarea {
	padding: 14px 12px !important;
	border: 1px solid var(--sdb-cr-4) !important;
	border-radius: var(--sdb-radius-input) !important;
	background: var(--sdb-white) !important;
	color: var(--sdb-ink) !important;
	font-family: var(--sdb-font-body) !important;
	font-size: var(--sdb-body) !important;
}

.wpforms-container .wpforms-field input:focus,
.wpforms-container .wpforms-field select:focus,
.wpforms-container .wpforms-field textarea:focus {
	outline: var(--sdb-focus) !important;
	outline-offset: 1px !important;
	border-color: var(--sdb-cr-3) !important;
}

.wpforms-container .wpforms-submit {
	padding: 18px 30px !important;
	border: 0 !important;
	border-radius: var(--sdb-radius-btn) !important;
	background: var(--sdb-red) !important;
	color: var(--sdb-white) !important;
	font-family: var(--sdb-font-body) !important;
	font-size: var(--sdb-btn) !important;
	font-weight: var(--sdb-w-med) !important;
	box-shadow: none !important;
	transition: background-color .18s ease;
}

.wpforms-container .wpforms-submit:hover { background: var(--sdb-red-hot) !important; }

/* ==========================================================================
   FLAME LIST
   The mark as a list marker, on lists that describe what the service actually
   does. Not a decoration applied to every list: only the ones where each item
   is a thing the crew does to your grill.
   ========================================================================== */

.sdb-flamelist {
	display: grid;
	gap: var(--sdb-s2);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sdb-flame;
}

.sdb-flamelist li {
	position: relative;
	padding-left: 34px;
	margin: 0;
}

.sdb-flamelist .sdb-flamelist__mark {
	position: absolute;
	left: 0;
	top: .15em;
	width: 11px;
	height: auto;
}

.sdb-flamelist .sdb-flamelist__mark path { fill: var(--sdb-red-hot); }

/* Numbered variant: the tune-up is a ten-point sequence, so the number is
   information and the flame is the marker for it. */
.sdb-flamelist--numbered li { counter-increment: sdb-flame; padding-left: 46px; }

.sdb-flamelist--numbered li::before {
	content: counter(sdb-flame);
	position: absolute;
	left: 20px;
	top: 0;
	font-family: var(--sdb-font-display);
	font-variation-settings: "wdth" var(--sdb-display-wide);
	font-weight: 700;
	font-size: var(--sdb-tiny);
	color: var(--sdb-text-quiet);
}

.sdb-section--cream .sdb-flamelist .sdb-flamelist__mark path { fill: var(--sdb-red); }

/* reCAPTCHA v3: badge hidden, notice shown under the submit button instead
   (inc/service-pages.php), as Google's terms require. */
.grecaptcha-badge { visibility: hidden !important; }
.sdb-recaptcha-note { margin: var(--sdb-s2) 0 0; font-size: var(--sdb-tiny); line-height: 1.5; color: var(--sdb-cr-3); }
.sdb-recaptcha-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sdb-recaptcha-note a:hover { color: var(--sdb-white); }