/* ==========================================================================
   Santa Cruz Septic Service — site styles
   Look: service-truck signage. Pine + fog, one loud safety-orange for calling.
   ========================================================================== */

:root {
	--scs-pine: #1E3A2F;
	--scs-pine-deep: #142820;
	--scs-fog: #EDF1EE;
	--scs-ink: #15201B;
	--scs-text: #2B3632;
	--scs-slate: #4E5C56;
	--scs-line: #C9D3CD;
	--scs-signal: #F26A1B;
	--scs-signal-hi: #FF7D30;
	--scs-white: #FFFFFF;

	--scs-display: "Barlow Semi Condensed", "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
	--scs-body: "Barlow", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--scs-wrap: 1120px;
	--scs-measure: 68ch;
	--scs-gap: clamp(3rem, 7vw, 5.5rem);
}

/* ---------- Base type ---------- */
body {
	font-family: var(--scs-body);
	font-size: 1.125rem;
	line-height: 1.65;
	color: var(--scs-text);
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.entry-content h1, .entry-content h2, .entry-content h3 {
	font-family: var(--scs-display);
	font-weight: 700;
	color: var(--scs-ink);
	line-height: 1.08;
	letter-spacing: 0;
	text-wrap: balance;
}
.entry-content h1 { font-size: clamp(2.3rem, 5.6vw, 3.6rem); margin: 0 0 .9rem; }
.entry-content h2 { font-size: clamp(1.75rem, 3.6vw, 2.4rem); margin: 0 0 1rem; }
.entry-content h3 { font-size: 1.4rem; margin: 1.8rem 0 .5rem; }
.entry-content p,
.entry-content li { max-width: var(--scs-measure); }
.entry-content a { color: var(--scs-pine); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.entry-content a:hover { color: var(--scs-pine-deep); text-decoration-color: var(--scs-signal); }

:focus-visible {
	outline: 3px solid var(--scs-signal);
	outline-offset: 3px;
}

/* ---------- Top bar ---------- */
.scs-topbar {
	background: var(--scs-pine-deep);
	color: #CFDCD4;
	font-size: .95rem;
}
.scs-topbar__in {
	max-width: var(--scs-wrap);
	margin: 0 auto;
	padding: .5rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .75rem;
	align-items: center;
}
.scs-topbar a { color: var(--scs-signal-hi); font-weight: 600; text-decoration: none; }
.scs-topbar a:hover { text-decoration: underline; }

/* ---------- Sections (core Group blocks with a class) ---------- */
.entry-content > .scs-hero,
.entry-content > .scs-section,
.entry-content > .scs-band,
.entry-content > .scs-cta {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--scs-gap);
	padding-bottom: var(--scs-gap);
}
.entry-content > .scs-hero,
.entry-content > .scs-section,
.entry-content > .scs-band,
.entry-content > .scs-cta {
	padding-left: max(1.25rem, calc((100vw - var(--scs-wrap)) / 2));
	padding-right: max(1.25rem, calc((100vw - var(--scs-wrap)) / 2));
	box-sizing: border-box;
}
.scs-hero .wp-block-group__inner-container,
.scs-section .wp-block-group__inner-container,
.scs-band .wp-block-group__inner-container,
.scs-cta .wp-block-group__inner-container { max-width: none; padding: 0; }
.scs-hero > *, .scs-section > *, .scs-band > *, .scs-cta > * { margin-left: 0 !important; margin-right: 0 !important; }
.scs-hero p, .scs-section p, .scs-band p, .scs-cta p { max-width: var(--scs-measure); }
.scs-section > :first-child, .scs-band > :first-child, .scs-cta > :first-child, .scs-hero > :first-child { margin-top: 0; }

.scs-band { background: var(--scs-fog); }

/* Hero: the phone number is the sign on the truck door. */
.scs-hero {
	background: var(--scs-pine);
	color: #DCE6E0;
	padding-top: clamp(2.5rem, 6vw, 4.5rem) !important;
}
.scs-hero h1 { color: var(--scs-white); max-width: 18ch; }
.scs-hero p { color: #DCE6E0; font-size: 1.2rem; }
.scs-hero a { color: var(--scs-white); }
.scs-hero .scs-small { font-size: .95rem; color: #A9BDB2; }

.scs-bignum { margin: 1.5rem 0 .25rem; max-width: none !important; }
.scs-bignum a {
	display: inline-block;
	font-family: var(--scs-display);
	font-weight: 700;
	font-size: clamp(2.7rem, 10vw, 5.4rem);
	line-height: 1;
	color: var(--scs-signal) !important;
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	border-bottom: 4px solid var(--scs-signal);
	padding-bottom: .2rem;
}
.scs-bignum a:hover { color: var(--scs-signal-hi) !important; border-color: var(--scs-signal-hi); }
.scs-bignum span {
	display: block;
	margin-top: .6rem;
	font-size: 1rem;
	font-weight: 600;
	color: #A9BDB2;
}

/* ---------- Buttons ---------- */
.scs-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.scs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.25rem;
	padding: .8rem 1.4rem;
	border-radius: 6px;
	font-family: var(--scs-display);
	font-weight: 700;
	font-size: 1.25rem;
	text-decoration: none !important;
	border: 2px solid transparent;
	cursor: pointer;
}
.scs-btn-call { background: var(--scs-signal); color: var(--scs-ink) !important; }
.scs-btn-call:hover { background: var(--scs-signal-hi); }
.scs-btn-quiet { background: transparent; color: inherit !important; border-color: currentColor; }
.scs-hero .scs-btn-quiet, .scs-cta .scs-btn-quiet { color: var(--scs-white) !important; }
.scs-section .scs-btn-quiet, .scs-band .scs-btn-quiet { color: var(--scs-pine) !important; }

/* ---------- "What's going on?" issue list ---------- */
.scs-issues { list-style: none; padding-left: 0 !important; margin-top: 1rem; }
.scs-issues li {
	max-width: 44rem;
	border-top: 1px solid var(--scs-line);
	padding: 1rem 0;
	margin: 0;
	color: var(--scs-slate);
}
.scs-issues li:last-child { border-bottom: 1px solid var(--scs-line); }
.scs-issues a {
	display: block;
	font-family: var(--scs-display);
	font-weight: 700;
	font-size: 1.45rem;
	color: var(--scs-ink);
	text-decoration: none;
}
.scs-issues a:hover { color: var(--scs-pine); text-decoration: underline; text-decoration-color: var(--scs-signal); }

/* ---------- Steps (a real sequence) ---------- */
.scs-steps { counter-reset: scs; list-style: none; padding-left: 0 !important; }
.scs-steps li {
	counter-increment: scs;
	position: relative;
	padding-left: 3.25rem;
	margin: 0 0 1.25rem;
	max-width: 40rem;
}
.scs-steps li::before {
	content: counter(scs);
	position: absolute;
	left: 0;
	top: -.1rem;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--scs-pine);
	color: var(--scs-white);
	font-family: var(--scs-display);
	font-weight: 700;
	display: grid;
	place-items: center;
}

/* ---------- Plain checklists ---------- */
.scs-list { padding-left: 1.25rem !important; }
.scs-list li { margin-bottom: .4rem; }

/* ---------- FAQ (core Details block) ---------- */
.entry-content .wp-block-details {
	border-top: 1px solid var(--scs-line);
	padding: 1rem 0;
	max-width: 48rem;
}
.entry-content .wp-block-details:last-of-type { border-bottom: 1px solid var(--scs-line); }
.wp-block-details summary {
	font-family: var(--scs-display);
	font-weight: 700;
	font-size: 1.3rem;
	color: var(--scs-ink);
	cursor: pointer;
}
.wp-block-details[open] summary { color: var(--scs-pine); }
.wp-block-details p { margin-top: .6rem; padding: 0 !important; }

/* ---------- Callout ---------- */
.scs-note {
	border-left: 4px solid var(--scs-signal);
	background: var(--scs-white);
	padding: 1rem 1.25rem !important;
	max-width: 44rem !important;
}
.scs-band .scs-note { background: var(--scs-white); }

/* ---------- Bottom CTA band ---------- */
.scs-cta { background: var(--scs-pine-deep); color: #DCE6E0; }
.scs-cta h2 { color: var(--scs-white); }
.scs-cta p { color: #DCE6E0; }

/* ---------- Lead form ---------- */
.scs-form { max-width: 34rem; }
.scs-form label { display: block; font-weight: 600; color: var(--scs-ink); margin-bottom: .3rem; }
.scs-form label span { font-weight: 400; color: var(--scs-slate); }
.scs-form input[type="text"],
.scs-form input[type="tel"],
.scs-form select,
.scs-form textarea {
	width: 100%;
	min-height: 3rem;
	padding: .65rem .8rem;
	border: 1.5px solid #9AAAA2;
	border-radius: 6px;
	background: var(--scs-white);
	font: inherit;
	color: var(--scs-ink);
}
.scs-form input:focus, .scs-form select:focus, .scs-form textarea:focus {
	border-color: var(--scs-pine);
	outline: 3px solid rgba(242,106,27,.45);
	outline-offset: 1px;
}
.scs-form .scs-check label { font-weight: 500; display: flex; gap: .5rem; align-items: center; }
.scs-form-fine { font-size: .9rem; color: var(--scs-slate); }
.scs-hp { position: absolute !important; left: -9999px !important; height: 0; overflow: hidden; }
.scs-form-note { padding: 1rem 1.25rem !important; border-radius: 6px; max-width: 34rem; font-weight: 500; }
.scs-form-ok { background: #E3F1E6; border-left: 4px solid #2F7A45; }
.scs-form-err { background: #FDECE3; border-left: 4px solid var(--scs-signal); }

/* ---------- Disclosure + sticky call bar ---------- */
.scs-disclosure {
	background: var(--scs-ink);
	color: #9FB1A8;
	font-size: .85rem;
	padding: 1rem 1.25rem;
}
.scs-disclosure p { max-width: var(--scs-wrap); margin: 0 auto; }

.scs-callbar { display: none; }
@media (max-width: 800px) {
	.scs-callbar {
		display: flex;
		justify-content: center;
		gap: .5rem;
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 9999;
		background: var(--scs-signal);
		color: var(--scs-ink);
		font-family: var(--scs-display);
		font-weight: 600;
		font-size: 1.3rem;
		text-decoration: none;
		padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom, 0px));
		box-shadow: 0 -2px 0 var(--scs-pine-deep);
	}
	.scs-callbar strong { font-weight: 700; }
	body { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0px)); }
	.scs-topbar span { display: none; }
}

/* Blocksy content area: let our full-width sections run edge to edge on pages. */
.page .entry-content > .alignfull { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.page .entry-content > .scs-hero:first-child { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
	* { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}