/*
 * Service archive + singles (archive-service.php, single-service.php,
 * parts/service/*, parts/sections/{benefits,cta}.php).
 * Builds on tokens.css and the shared section shells in home.css, which is
 * enqueued alongside this file on service views.
 */

/* ---- Single: hero (live outline: subtitle is the H1) ---- */

/*
 * Service heroes render the marketing line as an H2 (the SEO keyword line
 * below it is the H1, mirroring the live pages). Re-assert the display
 * styling so home.css's generic `.home h2` rule doesn't shrink it.
 */
.home .hero .hero__title {
	margin: 0 0 var(--bhc-space-1);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h1);
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
}

/* ---- Single: lead copy section ---- */

.home .svc-lead .section-head__sub {
	margin-bottom: var(--bhc-space-4);
}

.svc-lead__copy {
	max-width: var(--bhc-maxw-prose);
	margin-inline: auto;
}

.svc-lead__copy a {
	color: var(--bhc-color-brand-dark);
}

.svc-lead__copy ul {
	margin: 0 0 var(--bhc-space-2);
	padding-left: 1.25em;
	color: var(--bhc-color-muted);
}

.svc-lead__copy li {
	margin-bottom: 0.375em;
}

.svc-lead__copy h4 {
	margin: var(--bhc-space-3) 0 var(--bhc-space-1);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h4);
	line-height: 1.3;
}

/* ---- CTA band ---- */

.cta-band {
	text-align: center;
}

.home .cta-band .home-section__cta {
	margin-top: var(--bhc-space-3);
}

.service-single .cta-band {
	border-bottom: 1px solid var(--bhc-color-line);
}

/* ---- What's Included comparison tabs (parts/sections/whats-included.php) ----
 * TablePress default CSS is disabled (tablepress_use_default_css filter in
 * inc/assets.php), so all .tablepress styling below is authoritative. The
 * live tables mark cells with Font Awesome <i> classes (fa-check,
 * fa-times-circle, fa-dollar-sign); the theme doesn't load Font Awesome, so
 * the glyphs are drawn with ::before content instead.
 */

.whats-included__inner {
	max-width: var(--bhc-maxw-mid);
	margin-inline: auto;
}

/* Tablist is a JS-only affordance: hidden until tabs.js lands .is-js, with
 * the per-panel H3 labels covering the no-JS stacked rendering. */
.whats-included__tablist {
	display: none;
}

.whats-included.is-js .whats-included__tablist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bhc-space-1);
	justify-content: center;
	margin-bottom: var(--bhc-space-3);
}

.whats-included.is-js .whats-included__panel-title {
	display: none;
}

.whats-included__tab {
	min-height: 44px;
	padding: 10px 18px;
	border: 1px solid var(--bhc-color-line);
	border-radius: 999px;
	background: var(--bhc-color-paper);
	color: var(--bhc-color-muted);
	font-family: inherit;
	font-size: var(--bhc-size-small);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
}

.whats-included__tab:hover {
	border-color: var(--bhc-color-accent);
	color: var(--bhc-color-heading);
}

.whats-included__tab:focus-visible {
	outline: 2px solid var(--bhc-color-brand);
	outline-offset: 2px;
}

.whats-included__tab[aria-selected="true"] {
	border-color: var(--bhc-color-accent);
	background: var(--bhc-color-accent);
	color: var(--bhc-color-on-accent);
}

.whats-included__panel {
	margin-top: var(--bhc-space-3);
}

.whats-included.is-js .whats-included__panel {
	margin-top: 0;
}

.whats-included__panel:focus-visible {
	outline: 2px solid var(--bhc-color-brand);
	outline-offset: 2px;
}

main.bhc-main .whats-included__panel-title {
	margin-bottom: var(--bhc-space-2);
	text-align: center;
}

/* Wide tables scroll inside the section instead of stretching the page. */
.whats-included__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.whats-included .tablepress {
	width: 100%;
	min-width: 640px;
	margin: 0;
	border-collapse: collapse;
	background: var(--bhc-color-paper);
	font-size: var(--bhc-size-ui);
	line-height: 1.5;
}

.whats-included .tablepress th,
.whats-included .tablepress td {
	padding: 10px 14px;
	border-bottom: 1px solid var(--bhc-color-line);
	text-align: center;
}

.whats-included .tablepress thead th,
.whats-included .tablepress thead td {
	background: var(--bhc-color-surface);
	border-bottom-color: var(--bhc-color-line);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-small);
	white-space: nowrap;
}

.whats-included .tablepress .column-1 {
	color: var(--bhc-color-ink);
	text-align: left;
}

/* Section-divider rows (e.g. "EXTRAS") span visually via their first cell. */
.whats-included .tablepress tbody .column-1 strong {
	color: var(--bhc-color-heading);
}

/* Font Awesome markers, redrawn without Font Awesome. */
.whats-included .tablepress .fas {
	font-style: normal;
	font-weight: 700;
}

.whats-included .tablepress .fa-check::before {
	content: "\2713";
	content: "\2713" / "Included";
	color: var(--bhc-color-brand);
	font-size: 1.0625rem;
}

.whats-included .tablepress .fa-times-circle::before {
	content: "\2715";
	content: "\2715" / "Not included";
	color: var(--bhc-color-label);
	font-size: 0.875rem;
}

.whats-included .tablepress .fa-dollar-sign::before {
	content: "$";
	content: "$" / "Available as a paid extra";
	color: var(--bhc-color-accent);
	font-size: 1rem;
}

/* ---- Generic fallback part ---- */

.service-generic {
	max-width: var(--bhc-maxw-content);
	margin-inline: auto;
	padding: var(--bhc-space-5) var(--bhc-space-2);
}

.service-generic h1 {
	margin: 0 0 var(--bhc-space-3);
	color: var(--bhc-color-heading);
	font-size: var(--bhc-size-h2);
	line-height: 1.25;
}

/* ---- Archive ---- */

.service-archive__head {
	padding: var(--bhc-space-5) var(--bhc-space-2) 0;
	text-align: center;
}

/* The archive H1 reads at H2 scale: the page's real hero is the card grid.
   Same weight as the part's h1 rule; this file loads later, so it wins. */
.service-archive__head h1.section-head__title {
	font-size: var(--bhc-size-h2);
	line-height: 1.25;
}

.service-archive__head .section-head__sub {
	margin-bottom: 0;
}

/* Cards use H2 (H1 is the page title); restyle to the card-title look. */
.home.service-archive .services__title {
	margin: 0 0 var(--bhc-space-1);
	font-size: var(--bhc-size-h4);
	font-weight: 600;
	line-height: 1.3;
	text-align: left;
}

.home.service-archive .services__title a {
	color: inherit;
	text-decoration: none;
}

.home.service-archive .services__title a:hover {
	color: var(--bhc-color-brand-dark);
}

.service-archive__empty {
	max-width: var(--bhc-maxw-content);
	margin-inline: auto;
	text-align: center;
}

/* ---- Photo collage strip (between lead copy and benefits) ---- */

.photo-strip img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- Lead section: copy + review badge columns (per prod layout) ---- */

.svc-lead__cols {
	display: grid;
	gap: var(--bhc-space-3);
	align-items: start;
}

@media (min-width: 981px) {
	.svc-lead__cols:has(.svc-lead__badge) {
		grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
		gap: var(--bhc-space-4);
	}
}

.svc-lead__badge {
	display: flex;
	justify-content: center;
}

/* ---- "Our Customers Love Us" photo band + reviews embed ---- */

.customers-banner {
	display: flex;
	align-items: center;
	min-height: 280px;
	padding: var(--bhc-space-5) var(--bhc-space-2);

	/* Live parity: #444 blended 'overlay' darkens the photo under the white heading. */
	background-color: #444444;
	background-image: url("../img/customers-love-us.webp");
	background-image: image-set(
		url("../img/customers-love-us-800.webp") 800w,
		url("../img/customers-love-us.webp") 1200w
	);
	background-size: cover;
	background-position: 50% 50%;
	background-blend-mode: overlay;
}

.customers-banner .customers-banner__heading {
	max-width: var(--bhc-maxw-wide);
	margin: 0 auto;
	width: 100%;
	color: var(--bhc-color-on-accent);
	font-size: var(--bhc-size-h2);
	font-weight: 600;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.svc-reviews__inner {
	max-width: var(--bhc-maxw-wide);
	margin-inline: auto;
}

@media (min-width: 981px) {
	.customers-banner {
		min-height: 373px;
	}
}