/*
Theme Name: Tankless Procare
Description: Custom theme for Tankless Procare — tankless water heater service, booking, and payments.
Author: Tankless Procare
Version: 0.1.0
Text Domain: tankless
*/

/* -----------------------------------------------------------------------
   Tokens
----------------------------------------------------------------------- */
:root {
	--color-ink: #0f1e33;
	--color-body: #3c4a5c;
	--color-muted: #647184;
	--color-line: #e1e7ee;
	--color-surface: #ffffff;
	--color-surface-alt: #eef3f8;
	--color-navy: #0a1830;
	--color-navy-alt: #0f2340;
	--color-brand: #1868d6;
	--color-brand-dark: #114fa8;
	--color-brand-darker: #0a1830;
	--color-brand-tint: #e8f0fc;
	--color-accent: #f2b807;
	--color-silver: #aab8c6;
	--color-silver-line: rgba(200, 213, 227, 0.28);
	--color-danger: #c0392b;
	--color-success: #1a7a4c;

	--font-sans: system-ui, -apple-system, "Segoe UI", sans-serif;
	--container: 1120px;
	--container-narrow: 640px;
	--radius: 10px;
	--radius-sm: 6px;
	--shadow-sm: 0 1px 3px rgba(16, 32, 48, 0.08);
	--shadow-md: 0 8px 24px rgba(16, 32, 48, 0.12);
}

/* -----------------------------------------------------------------------
   Base reset — kept intentionally minimal; visual design comes later.
----------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
/* Sticky footer: body is a full-viewport-height flex column so .site-main
   (flex: 1 0 auto below) absorbs any leftover space on short pages,
   pushing the footer to the bottom of the browser window instead of
   leaving a gap under it. Pages with enough content to scroll are
   unaffected — this only kicks in when content is shorter than the
   viewport. */
body {
	margin: 0;
	font-family: var(--font-sans);
	line-height: 1.45;
	color: var(--color-body);
	background: var(--color-surface);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--color-brand); text-decoration-color: rgba(10, 90, 156, 0.35); }
a:hover { color: var(--color-brand-dark); }
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

h1, h2, h3 { color: var(--color-ink); line-height: 1.2; font-weight: 700; }
h1 { font-size: clamp(1.8rem, 1.45rem + 1.6vw, 2.5rem); margin: 0 0 0.5rem; }
h2 { font-size: clamp(1.3rem, 1.15rem + 0.8vw, 1.7rem); margin: 0 0 0.5rem; }
h3 { font-size: 1.05rem; margin: 0 0 0.35rem; }
p { margin: 0 0 0.75rem; }
ul, ol { margin: 0 0 0.75rem; padding-left: 1.25rem; }

/* -----------------------------------------------------------------------
   Layout
----------------------------------------------------------------------- */
.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--color-navy);
	border-bottom: 1px solid var(--color-silver-line);
	position: sticky;
	top: 0;
	z-index: 20;
}
.site-branding a {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	line-height: 1.2;
	font-weight: 700;
	font-size: 1.2rem;
	color: #fff;
	text-decoration: none;
	letter-spacing: -0.01em;
}
.site-logo { width: 2.5rem; height: 2.5rem; flex-shrink: 0; }
.site-branding-text { display: flex; flex-direction: column; }
.site-tagline {
	font-size: 0.62rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-silver);
}
.header-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
}
.primary-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.primary-nav a {
	color: #c7d3e0;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.88rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 0.25rem 0;
}
.primary-nav a:hover { color: #fff; }
.header-buttons {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
}

/* Mobile-only header pieces — hidden on desktop, where .header-actions
   above already shows the nav + both buttons inline.
   .cta-button.mobile-book-btn (not just .mobile-book-btn): .mobile-book-btn
   also carries the .cta-button class, whose own `display: inline-flex`
   has equal specificity and is declared later in this file — without the
   extra class here that rule wins the specificity tie and the button
   leaks onto desktop. */
.cta-button.mobile-book-btn,
.mobile-menu-toggle,
.mobile-menu {
	display: none;
}
.mobile-menu-toggle {
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	padding: 0;
	background: transparent;
	border: 1px solid var(--color-silver);
	border-radius: var(--radius-sm);
	color: #fff;
	cursor: pointer;
}
.mobile-menu-toggle svg { width: 1.3rem; height: 1.3rem; }
.mobile-menu-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); }

.mobile-menu {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 1.25rem;
	width: 15rem;
	max-width: calc(100vw - 2.5rem);
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--color-navy);
	border: 1px solid var(--color-silver-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}
.mobile-menu:not([hidden]) { display: flex; }
.mobile-menu-nav ul {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mobile-menu-nav a {
	display: block;
	padding: 0.6rem 0.25rem;
	color: #e2e9f1;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	border-bottom: 1px solid var(--color-silver-line);
}
.mobile-menu-nav a:hover { color: #fff; }
.mobile-menu .cta-button { justify-content: center; }

.site-main { flex: 1 0 auto; width: 100%; max-width: var(--container); margin: 0 auto; padding: 1.25rem 1.5rem; }

.site-footer {
	background: var(--color-navy);
	color: #cfe0ef;
	padding: 1.75rem 1.5rem 1.25rem;
	margin-top: 2rem;
}
.footer-grid {
	max-width: var(--container);
	margin: 0 auto 1.25rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	text-align: center;
}
.footer-col {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.footer-col .widget-title {
	color: #fff;
	font-size: 0.95rem;
	margin: 0 0 0.5rem;
}
.footer-brand-name {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	margin: 0 0 0.35rem;
}
.footer-logo { flex-shrink: 0; }
.footer-brand p { color: #9fb8cd; font-size: 0.88rem; margin: 0; }
.footer-widgets a { color: #cfe0ef; }
.footer-widgets a:hover { color: #fff; }
.footer-nav ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.footer-nav a { color: #cfe0ef; text-decoration: none; font-size: 0.88rem; }
.footer-nav a:hover { color: #fff; }
.footer-contact-line {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 0.5rem;
	margin: 0 0 0.6rem;
	font-size: 0.88rem;
	color: #cfe0ef;
	text-align: left;
}
.footer-contact-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 1.1rem;
	height: 1.1rem;
	margin-top: 0.1rem;
	color: var(--color-silver);
}
.footer-contact-icon svg { width: 100%; height: 100%; }
.footer-contact-line a { color: #cfe0ef; text-decoration: none; }
.footer-contact-line a:hover { color: #fff; }
.footer-cta .cta-button { margin-top: 0.15rem; }
.site-footer .site-info {
	max-width: var(--container);
	margin: 0 auto;
	padding-top: 0.75rem;
	border-top: 1px solid var(--color-silver-line);
	font-size: 0.82rem;
	color: #9fb8cd;
	text-align: center;
}

/* -----------------------------------------------------------------------
   Buttons
----------------------------------------------------------------------- */
.cta-button {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.65rem 1.35rem;
	background: var(--color-brand);
	color: #fff;
	text-decoration: none;
	border: none;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	font-family: inherit;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}
.cta-button svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.cta-button:hover { background: var(--color-brand-dark); color: #fff; }
.cta-button:active { transform: translateY(1px); }
.cta-button.cancel-button { background: var(--color-danger); }
.cta-button.cancel-button:hover { background: #8f1e18; }

.cta-button--sm { padding: 0.45rem 1rem; font-size: 0.85rem; }

.cta-button--outline {
	background: transparent;
	color: #fff;
	border: 1px solid var(--color-silver);
}
.cta-button--outline:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Outline button used against a light/white surface (pricing cards) needs
   dark ink instead of the default white-on-dark variant. */
.site-main .cta-button--outline {
	color: var(--color-brand-dark);
	border-color: var(--color-brand);
}
.site-main .cta-button--outline:hover { background: var(--color-brand-tint); color: var(--color-brand-dark); }

/* The hero sits on a dark photo (not a light surface like the override
   above assumes) — its outline button needs to stay white, not dark blue. */
.hero-actions .cta-button--outline {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: var(--color-silver);
}
.hero-actions .cta-button--outline:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* -----------------------------------------------------------------------
   Homepage sections
----------------------------------------------------------------------- */
.site-main > section {
	padding: 1.75rem 0;
	border-bottom: 1px solid var(--color-line);
}
.site-main > section:last-child { border-bottom: none; padding-bottom: 0.5rem; }

section.hero {
	position: relative;
	overflow: hidden;
	padding: 2.25rem 1.5rem 4.5rem;
	border-bottom: none;
	background: var(--color-navy);
	margin: -1.25rem -1.5rem 0;
	border-radius: 0 0 var(--radius) var(--radius);
}
.hero-bg-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Text lives in the left third now — darken there for contrast and
	   fade out over the right two-thirds so the photo (shield, house,
	   unit) actually shows through instead of being washed out evenly. */
	background: linear-gradient(90deg, rgba(10, 24, 48, 0.88) 0%, rgba(10, 24, 48, 0.8) 30%, rgba(10, 24, 48, 0.4) 60%, rgba(10, 24, 48, 0.12) 100%);
}
.hero-grid {
	position: relative;
	z-index: 2;
	max-width: var(--container);
	margin: 0 auto;
}
.hero-copy { max-width: 30rem; margin-right: auto; text-align: left; }
.hero h1 { color: #fff; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 1.25rem; }
.hero p { font-size: 1.05rem; color: #dbe6f1; margin: 0 0 2rem; }
.hero-actions { display: flex; justify-content: flex-start; gap: 0.75rem; flex-wrap: wrap; }

@media (max-width: 800px) {
	section.hero { padding: 3rem 1.25rem; }
	.hero-overlay { background: rgba(10, 24, 48, 0.82); }
	.hero-copy { max-width: none; margin: 0 auto; text-align: center; }
	.hero-actions { justify-content: center; }
	/* The floating-card overlap under the hero is a desktop nicety — hero
	   text wraps to more lines once it centers at this width, so a fixed
	   negative margin can no longer reliably clear the buttons above it
	   (it was covering them). Simplest fix: stop overlapping. */
	section.trust-bar:not(.trust-bar--alt) { margin-top: 0; }
}

.problem-intro { text-align: center; }
.problem-intro p { max-width: 40rem; margin-left: auto; margin-right: auto; }

/* -----------------------------------------------------------------------
   Trust bar (icon row) — used once light (under hero) and once dark
   (--alt, just above the footer).
----------------------------------------------------------------------- */
section.trust-bar {
	position: relative;
	z-index: 2;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
	margin: -3rem 0 0.5rem;
	padding: 1.5rem 1.75rem;
}
.trust-bar-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.25rem;
	text-align: left;
}
.trust-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	text-align: left;
}
/* min-width:0 overrides flexbox's default min-width:auto, which otherwise
   refuses to shrink below the text's intrinsic width and pushes it past
   the card edge instead of wrapping — this is what actually fixes wrapping. */
.trust-item-text { flex: 1 1 auto; min-width: 0; }
.trust-item h3 { font-size: 0.95rem; margin: 0 0 0.15rem; }
.trust-item p { font-size: 0.85rem; color: var(--color-muted); margin: 0; }
.trust-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 2.1rem;
	height: 2.1rem;
	align-items: center;
	justify-content: center;
	color: var(--color-brand);
}
.trust-icon svg { width: 100%; height: 100%; }

section.trust-bar.trust-bar--alt {
	position: static;
	z-index: auto;
	background: var(--color-navy);
	color: #fff;
	border: none;
	box-shadow: none;
	border-radius: var(--radius);
	margin: 0 -1.5rem;
	padding: 1.5rem;
	border-bottom: none;
}
.trust-bar--alt .trust-item h3 { color: #fff; }
.trust-bar--alt .trust-icon { color: var(--color-silver); }

/* -----------------------------------------------------------------------
   Checklist section (service-visit breakdown + product visual)
----------------------------------------------------------------------- */
section.checklist {
	position: relative;
	overflow: hidden;
	margin: 0 -1.5rem;
	padding: 3rem 1.5rem;
	border-bottom: none;
	border-radius: var(--radius);
}
.checklist-bg-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0;
}
.checklist-grid {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	margin: 0 auto;
}
.checklist-intro,
.checklist-cta {
	text-align: center;
}
.checklist-copy {
	max-width: 34rem;
	margin-left: auto;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: blur(3px);
	border-radius: var(--radius);
	padding: 1.75rem;
	box-shadow: var(--shadow-md);
}

.accent-text { color: var(--color-brand); }

.checklist-items {
	list-style: none;
	margin: 0.85rem 0 1.1rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 0.45rem 1.25rem;
}
.checklist-items--full { grid-template-columns: repeat(3, 1fr); }
.checklist-items li {
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
	padding-left: 1.5rem;
	position: relative;
	font-weight: 600;
	color: var(--color-ink);
}
.checklist-items li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0.1em;
	color: var(--color-brand);
	font-weight: 700;
}
.checklist-num { flex-shrink: 0; color: var(--color-brand); }
.checklist-desc { flex: 1 1 auto; min-width: 0; }

@media (max-width: 800px) {
	.checklist-copy { max-width: none; margin-left: 0; text-align: center; }
	.checklist-items { text-align: left; }
	.checklist-items--full { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
	.checklist-items--full { grid-template-columns: 1fr; }
}

section.pricing {
	text-align: center;
	background: var(--color-surface-alt);
	border-radius: var(--radius);
	margin: 1.75rem -1.5rem;
	padding: 1.75rem 1.5rem;
	border-bottom: none;
}
.pricing p { max-width: 34rem; margin-left: auto; margin-right: auto; }

.pricing-grid {
	margin-top: 1.25rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.1rem;
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.pricing-card {
	position: relative;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: 0 1.25rem 1.25rem;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}
.pricing-card ul {
	list-style: none;
	margin: 0 0 0.35rem;
	padding: 0;
	width: 100%;
	text-align: left;
}
.pricing-card ul li {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	margin-bottom: 0.5rem;
}
.pricing-card ul li::before {
	content: "\2022";
	flex-shrink: 0;
	color: var(--color-brand);
	font-weight: 700;
	line-height: 1.4;
}
.pricing-card-head {
	width: calc(100% + 2.5rem);
	margin: 0 -1.25rem 0.35rem;
	padding: 0.85rem 1.25rem;
	background: var(--color-navy);
	border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 0.5rem;
}
.pricing-card-head h3 { color: #fff; margin: 0; }
.pricing-card-head .pricing-subtitle { width: 100%; text-align: center; color: rgba(255, 255, 255, 0.75); }
.pricing-icon {
	display: inline-flex;
	width: 1.3rem;
	height: 1.3rem;
	color: #fff;
}
.pricing-icon svg { width: 100%; height: 100%; }
.pricing-subtitle { font-size: 0.85rem; margin: 0; }
.pricing-rate { margin: 0.4rem 0 0; }
.pricing-amount { font-size: 1.6rem; font-weight: 800; color: var(--color-ink); }
.pricing-period { font-size: 0.85rem; color: var(--color-muted); }
.pricing-card .cta-button { margin-top: auto; width: 100%; justify-content: center; text-align: center; }

.pricing-card--featured {
	border-color: var(--color-brand);
	box-shadow: var(--shadow-md);
}
.pricing-card--featured .pricing-card-head { background: var(--color-brand); }
.pricing-ribbon {
	position: absolute;
	top: -0.65rem;
	right: 1.1rem;
	background: var(--color-danger);
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
}

.brand-coverage { text-align: center; }
.brand-coverage p {
	font-size: 1rem;
	color: var(--color-muted);
	letter-spacing: 0.02em;
}

.service-areas { text-align: center; }
.service-area-list,
.region-list,
.city-list {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}
.service-area-list li,
.region-list li,
.city-list li { margin: 0; }
.service-area-list a,
.region-list a,
.city-list a {
	display: inline-block;
	padding: 0.35rem 0.8rem;
	background: var(--color-brand-tint);
	border: 1px solid var(--color-line);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--color-brand-dark);
}
.service-area-list a:hover,
.region-list a:hover,
.city-list a:hover { background: var(--color-brand); color: #fff; }

/* -----------------------------------------------------------------------
   About Us — photo + story/credentials. Both are placeholders (dashed
   border, matching the testimonials/FAQ convention) until real content
   and a real team photo are on hand — see front-page.php.
----------------------------------------------------------------------- */
.about-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	align-items: center;
	gap: 1.75rem;
}
.about-photo-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	aspect-ratio: 4 / 3;
	background: var(--color-surface-alt);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius);
	color: var(--color-muted);
}
.about-photo-placeholder svg { width: 2.5rem; height: 2.5rem; }
.about-photo-placeholder p { margin: 0; font-size: 0.9rem; font-style: italic; }
.about-copy em {
	display: block;
	padding: 0.85rem 1.25rem;
	margin-bottom: 0.75rem;
	background: var(--color-surface-alt);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius);
	font-style: italic;
	color: var(--color-muted);
}

@media (max-width: 800px) {
	.about-grid { grid-template-columns: 1fr; text-align: center; }
	.about-photo-placeholder { max-width: 20rem; margin: 0 auto; }
}

.testimonials, .faq { text-align: center; }
.testimonials p, .faq p { max-width: 34rem; margin: 0 auto; color: var(--color-muted); }
.testimonials em, .faq em {
	display: inline-block;
	padding: 0.85rem 1.25rem;
	background: var(--color-surface-alt);
	border: 1px dashed var(--color-line);
	border-radius: var(--radius);
	font-style: italic;
}

section.final-cta {
	text-align: center;
	background: var(--color-brand);
	color: #fff;
	border: 1px solid var(--color-silver-line);
	border-radius: var(--radius);
	margin: 0 -1.5rem -0.5rem;
	padding: 1.75rem 1.5rem;
}
.final-cta h2 { color: #fff; }
.final-cta .cta-button { background: #fff; color: var(--color-brand-dark); }
.final-cta .cta-button:hover { background: var(--color-brand-tint); }

/* -----------------------------------------------------------------------
   Generic content pages (page.php, index.php, service areas)
----------------------------------------------------------------------- */
.entry-content { max-width: var(--container-narrow); }
.entry-content > *:first-child { margin-top: 0; }

.service-area .breadcrumb {
	margin-bottom: 0.75rem;
}
.service-area .breadcrumb a {
	font-weight: 600;
	text-decoration: none;
	font-size: 0.88rem;
}
.service-area .breadcrumb a:hover { text-decoration: underline; }
.service-area h1 { max-width: var(--container-narrow); }

/* -----------------------------------------------------------------------
   Forms — booking + account
----------------------------------------------------------------------- */
.booking-page {
	max-width: var(--container-narrow);
	margin: 0 auto;
	text-align: center;
}
.booking-page form { text-align: left; }
.booking-page .form-submit,
.booking-page .booking-status { text-align: center; }
.booking-page .form-submit { display: flex; justify-content: center; gap: 0.6rem; }

/* -----------------------------------------------------------------------
   Booking wizard (page-book.php)
----------------------------------------------------------------------- */
.wizard-progress {
	display: flex;
	justify-content: center;
	gap: 0;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	counter-reset: wizard-step;
}
.wizard-progress li {
	position: relative;
	flex: 1;
	max-width: 8rem;
	text-align: center;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-muted);
}
.wizard-progress li::before {
	counter-increment: wizard-step;
	content: counter(wizard-step);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	margin: 0 auto 0.3rem;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-line);
	border-radius: 50%;
	color: var(--color-muted);
	font-size: 0.8rem;
}
.wizard-progress li::after {
	content: "";
	position: absolute;
	top: 0.8rem;
	left: -50%;
	width: 100%;
	height: 1px;
	background: var(--color-line);
	z-index: -1;
}
.wizard-progress li:first-child::after { display: none; }
.wizard-progress li.is-current { color: var(--color-ink); }
.wizard-progress li.is-current::before { background: var(--color-brand); border-color: var(--color-brand); color: #fff; }
.wizard-progress li.is-done::before { background: var(--color-brand-tint); border-color: var(--color-brand); color: var(--color-brand-dark); content: "✓"; }

.wizard-banner {
	max-width: var(--container-narrow);
	margin: 0 0 1.25rem;
	padding: 0.75rem 1rem;
	background: var(--color-brand-tint);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	color: var(--color-brand-dark);
	font-size: 0.9rem;
	font-weight: 600;
	text-align: center;
}

.wizard-step fieldset {
	border: none;
	margin: 0 0 0.85rem;
	padding: 0;
}
.wizard-step legend {
	padding: 0;
	margin-bottom: 0.35rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-ink);
}
.wizard-step .radio-option {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-right: 1.25rem;
	font-weight: 500;
	color: var(--color-body);
	cursor: pointer;
}
.wizard-step .radio-option input { width: auto; }
.wizard-step h2:focus { outline: none; }

.booking-page form,
#tankless-request-form,
#tankless-account-status,
#tankless-account-error {
	max-width: var(--container-narrow);
}

.booking-page form p,
#tankless-request-form p {
	margin-bottom: 0.85rem;
}

.booking-page form label,
#tankless-request-form label {
	display: block;
	margin-bottom: 0.3rem;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-ink);
}

.booking-page form input[type="text"],
.booking-page form input[type="email"],
.booking-page form input[type="tel"],
.booking-page form select,
.booking-page form textarea,
#tankless-request-form input[type="email"] {
	display: block;
	width: 100%;
	padding: 0.55rem 0.75rem;
	font: inherit;
	color: var(--color-ink);
	background: var(--color-surface);
	border: 1px solid #c4d0da;
	border-radius: var(--radius-sm);
	transition: border-color 0.15s ease;
}
#tankless-request-form input[type="email"] { margin-bottom: 1rem; }
.booking-page form input:focus,
.booking-page form select:focus,
.booking-page form textarea:focus,
#tankless-request-form input:focus {
	border-color: var(--color-brand);
}
.booking-page form textarea { min-height: 4rem; resize: vertical; }

.booking-status,
#tankless-request-status {
	min-height: 1.1rem;
	font-size: 0.88rem;
	font-weight: 600;
}
.booking-status:not(:empty),
#tankless-request-status:not(:empty) {
	padding: 0.5rem 0.8rem;
	border-radius: var(--radius-sm);
	background: var(--color-surface-alt);
}

#tankless-account-request p:first-child { color: var(--color-muted); }
#tankless-account-status .status-text {
	background: var(--color-surface-alt);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: 1rem;
	color: var(--color-ink);
}
#tankless-account-error p {
	background: #fbeceb;
	border: 1px solid #f1c4c0;
	color: var(--color-danger);
	border-radius: var(--radius);
	padding: 0.85rem 1.1rem;
}

/* -----------------------------------------------------------------------
   Responsive
----------------------------------------------------------------------- */
@media (max-width: 640px) {
	.site-header { padding: 0.65rem 1.25rem; flex-wrap: nowrap; }
	/* Logo — Book Service — hamburger. Nav links + Member Login move into
	   the dropdown panel (see .mobile-menu above) instead of cramming a
	   third row into the header bar. */
	.header-actions { display: none; }
	.cta-button.mobile-book-btn,
	.mobile-menu-toggle { display: inline-flex; }
	.cta-button.mobile-book-btn { padding: 0.4rem 0.8rem; font-size: 0.82rem; }
	.site-branding-text { display: none; } /* tagline — no room for it alongside the button + toggle at this width */
	.site-main { padding: 1.1rem 1.25rem; }
	section.hero { margin: -1.1rem -1.25rem 0; }
	.hero-actions { justify-content: center; }
	section.trust-bar:not(.trust-bar--alt) .trust-bar-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem 0.75rem; }
	section.trust-bar:not(.trust-bar--alt) { padding: 1.25rem; }
	section.checklist,
	section.pricing,
	section.trust-bar.trust-bar--alt,
	section.final-cta { margin-left: -1.25rem; margin-right: -1.25rem; }
	.site-main > section { padding: 1.5rem 0; }
	/* The generic rule above resets ALL section padding, including
	   horizontal — fine for normal sections (their content is already
	   inset via .site-main's own padding), but these three bleed full
	   width via negative margins, so losing horizontal padding here means
	   their content sits flush against the viewport edge. Same
	   specificity as the rule above, so this has to come after it to win
	   the tie. */
	section.checklist,
	section.pricing,
	section.final-cta { padding-left: 1.25rem; padding-right: 1.25rem; }
}