/* Services page (templates/services.php, template-parts/services/*).
 * Builds on the pricing page styles (pricing.css: .sbp cards, badges, prices, CTA box)
 * and the theme .button; everything here is scoped under .sbs.
 * navy #191937 · accent #ff0055 · text #62748a · line #e4e6ef
 */

/* ---------- Banner eyebrow ---------- */

.sbs-banner .sbs-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 14px;
	border-radius: 20px;
	background: #ff0055;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #fff;
}

/* ---------- Layout: services list on the left, services on the right ---------- */

.sbs-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 30px;
}

/* The card layout follows the width of this column, not the window */
.sbs-main {
	min-width: 0;
	container-type: inline-size;
}

/* ---------- Left column ---------- */

.sbs-side {
	min-width: 0;
}

.sbs-nav {
	padding: 24px;
	background: #fff;
	border: 1px solid var(--sbp-line);
	border-radius: 6px;
}

.sbs-nav-group + .sbs-nav-group {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--sbp-line);
}

#site .sbs-nav-label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--sbp-navy);
}

.sbs-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbs-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbs-nav li::before {
	content: none;
}

#site .sbs-nav li a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 8px 10px;
	border-left: 2px solid transparent;
	border-radius: 0 4px 4px 0;
	font-size: 15px;
	line-height: 1.4;
	color: var(--sbp-text);
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.sbs-nav li a span {
	flex: none;
	width: 40px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1px;
	color: var(--sbp-text);
}

#site .sbs-nav li a:hover,
#site .sbs-nav li a:focus-visible,
#site .sbs-nav li a[aria-current="true"] {
	border-left-color: var(--sbp-navy);
	background: #f4f4f9;
	color: var(--sbp-navy);
}

#site .sbs-nav li a[aria-current="true"] {
	font-weight: 600;
}

.sbs-side-cta {
	display: none;
}

/* Phones and tablets: the list sits above the services as two rows of links */
@media (max-width: 991px) {
	.sbs-nav {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 20px 30px;
		padding: 20px;
	}

	.sbs-nav-group + .sbs-nav-group {
		margin-top: 0;
		padding-top: 0;
		border-top: 0;
	}

	/* The theme's .button.full shows the quote button here too; keep a gap above it */
	.sbs-side-cta {
		margin-top: 12px;
	}
}

/* Desktop: a column on the left that stays in view while the services scroll past */
@media (min-width: 992px) {
	.sbs-layout {
		grid-template-columns: 320px minmax(0, 1fr);
		gap: 40px;
		align-items: start;
	}

	.sbs-side {
		position: sticky;
		top: 30px;
	}

	.sbs-side-cta {
		display: block;
		margin-top: 16px;
		text-align: center;
	}
}

/* The theme hides overflow on body and #site, which makes them scroll containers and
   stops position: sticky from working; clip gives the same look without that. */
body:has(.sbs) {
	overflow-x: clip;
}

body:has(.sbs) #site.site {
	overflow: clip;
}

/* ---------- Bands ---------- */

.sbs-band {
	scroll-margin-top: 100px;
}

.sbs-band + .sbs-band {
	margin-top: 70px;
}

.sbs-band-head {
	max-width: 760px;
	margin: 0 0 30px;
}

.sbs-band-head h2 {
	margin: 0 0 12px;
}

.sbs-band-head p {
	margin: 0;
}

/* ---------- Service ---------- */

.sbs-service {
	display: grid;
	grid-template-columns: 1fr;
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--sbp-line);
	border-radius: 6px;
	scroll-margin-top: 100px;
	transition: box-shadow 0.3s;
}

.sbs-service + .sbs-service {
	margin-top: 30px;
}

.sbs-service:hover {
	box-shadow: 0 15px 40px rgba(25, 25, 55, 0.1);
}

/* The featured images carry their own titles, so they are shown whole at their own size */
.sbs-media {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 20px 20px 0;
}

#site .sbs-media img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--sbp-line);
	border-radius: 4px;
}

.sbs-body {
	display: flex;
	flex-direction: column;
	min-width: 0;
	padding: 35px 30px 30px;
}

.sbs-body .sbp-badges {
	justify-content: flex-start;
}

#site .sbs-body h3 {
	margin: 0 0 8px;
	font-size: 1.5rem;
	line-height: 1.3em;
}

.sbs-promise {
	margin: 0;
	font-size: 1.05rem;
}

.sbs-included {
	margin-top: 24px;
}

#site .sbs-included h4 {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sbs-included ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Same tick as the pricing cards */
.sbs-included li {
	position: relative;
	margin: 8px 0;
	padding-left: 22px;
	font-size: 15px;
	list-style: none;
}

.sbs-included li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.45em;
	width: 9px;
	height: 5px;
	border-left: 2px solid var(--sbp-navy);
	border-bottom: 2px solid var(--sbp-navy);
	transform: rotate(-45deg);
}

.sbs-facts {
	margin: 0;
	padding: 4px 20px;
	border: 1px solid var(--sbp-line);
	border-radius: 6px;
}

.sbs-facts div {
	padding: 12px 0;
	border-bottom: 1px solid var(--sbp-line);
}

.sbs-facts div:last-child {
	border-bottom: 0;
}

.sbs-facts dt,
.sbs-price-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--sbp-navy);
}

.sbs-facts dd {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

/* What we need, not included, reporting, not a fit: plain two-by-two grid */
.sbs-terms {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px 30px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--sbp-line);
}

#site .sbs-terms h4 {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sbs-terms ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sbs-terms li {
	position: relative;
	margin: 6px 0;
	padding-left: 16px;
	font-size: 14px;
	line-height: 1.5;
	list-style: none;
}

.sbs-terms li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.65em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--sbp-text);
}

.sbs-terms p {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
}

.sbs-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: auto;
	padding-top: 24px;
}

/* Questions: full-width row across the card, one accordion item per question */
.sbs-faq {
	grid-column: 1 / -1;
	padding: 28px 30px 30px;
	border-top: 1px solid var(--sbp-line);
}

#site .sbs-faq h4 {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.sbs-faq-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px 20px;
	align-items: start;
}

.sbs-faq details {
	border: 1px solid var(--sbp-line);
	border-radius: 6px;
}

.sbs-faq summary {
	position: relative;
	padding: 14px 44px 14px 18px;
	font-size: 15px;
	font-weight: 600;
	color: var(--sbp-navy);
	list-style: none;
	cursor: pointer;
}

.sbs-faq summary::-webkit-details-marker {
	display: none;
}

/* Plus sign that turns into a minus when open */
.sbs-faq summary::before,
.sbs-faq summary::after {
	content: "";
	position: absolute;
	right: 18px;
	top: 50%;
	width: 12px;
	height: 2px;
	margin-top: -1px;
	background: var(--sbp-navy);
	transition: transform 0.2s;
}

.sbs-faq summary::after {
	transform: rotate(90deg);
}

.sbs-faq details[open] summary::after {
	transform: rotate(0);
}

.sbs-faq summary:focus-visible {
	outline: 2px solid var(--sbp-navy);
	outline-offset: 2px;
}

.sbs-faq details p {
	margin: 0;
	padding: 0 18px 16px;
	font-size: 14px;
	line-height: 1.5;
}

.sbs-terms + .sbs-foot {
	margin-top: 24px;
	border-top: 1px solid var(--sbp-line);
}

/* Starting price, under the facts box in the left column */
.sbs-price {
	padding: 0 20px;
}

.sbs-price .sbp-price {
	margin: 4px 0 0;
	font-size: 1.6rem;
}

.sbs .button.outline {
	border-width: 2px;
	line-height: 36px;
	color: var(--sbp-navy);
}

.sbs .button.outline:hover {
	border-color: #231834;
	color: #fff;
}

/* ---------- Page end ---------- */

/* The theme already leaves 80px under the page content; the row's own bottom padding
   would add to it */
.sbs .sbp-row:last-child {
	padding-bottom: 0 !important;
}

/* ---------- Wider screens ---------- */

/* Service cards, by the width of the services column */
@container (min-width: 620px) {
	.sbs-terms,
	.sbs-faq-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* Image and facts on the left, details on the right */
@container (min-width: 700px) {
	.sbs-service {
		grid-template-columns: minmax(0, 32%) minmax(0, 1fr);
	}

	.sbs-media {
		padding: 40px 0 40px 40px;
	}

	.sbs-body {
		padding: 40px;
	}

	.sbs-faq {
		padding: 32px 40px 40px;
	}
}

/* Phones and tablets: one column in reading order. The two column wrappers step aside
   (display: contents) so their parts can be ordered: image, title, what is included,
   facts, terms, then the starting price right above the buttons, then questions. */
@container (max-width: 699.98px) {
	.sbs-service {
		padding: 24px 30px 30px;
	}

	.sbs-media,
	.sbs-body {
		display: contents;
	}

	#site .sbs-service .sbs-media img {
		order: 0;
		margin-bottom: 24px;
	}

	.sbs-body .sbp-badges { order: 1; }
	.sbs-body h3 { order: 2; }
	.sbs-promise { order: 3; }
	.sbs-included { order: 4; }

	.sbs-facts {
		order: 5;
		margin-top: 24px;
	}

	.sbs-terms { order: 6; }

	.sbs-price {
		order: 7;
		margin-top: 24px;
		padding: 24px 0 0;
		border-top: 1px solid var(--sbp-line);
	}

	.sbs-foot,
	.sbs-terms + .sbs-foot {
		order: 8;
		margin-top: 16px;
		padding-top: 0;
		border-top: 0;
	}

	.sbs-faq {
		order: 9;
		margin: 30px -30px -30px;
	}
}

@media (max-width: 600px) {
	.sbs-band + .sbs-band {
		margin-top: 50px;
	}

	.sbs-band-head {
		margin-bottom: 28px;
	}

	.sbs-service {
		padding: 20px 20px 24px;
	}

	.sbs-faq {
		margin: 24px -20px -24px;
		padding: 24px 20px;
	}

	.sbs-foot .sbp-buttons,
	.sbs-foot .sbp-buttons .button {
		width: 100%;
	}
}