/* AGD Service Page V2 — component CSS
   Loaded ONLY on template-service-page-v2.php (see jiffyautoglass_v2_assets()).

   Scope: styles ONLY the components this template genuinely introduces.
   Everything the theme already owns is reused, not restyled:
     hero / overlay_gradient ... build/parts/hero.php + assets/styles.css
     .card / .card-header / .card-body ... assets/styles.css (shadow + hover scale)
     .btn-primary (red) / .btn-secondary (navy) ... assets/styles.css
     hr.redline (centered with .mx-auto, left with .mx-0) ... assets/styles.css
     .grey_background / .navy_background ... assets/styles.css (colour only; py-5 in markup)
     .cta / .cta_j (the J is an <img>, attachment 152) ... assets/styles.css

   The starter's .card-box / .comp-card / .fact-card / .res-card box treatments and
   its .redline--left helper were removed — the theme already provides both.

   TYPE SCALE — corrected after QA. Dropping ALL of the starter's font-size rules
   went too far. The Build Brief protects the theme's HEADING and BODY scale
   (18px/28px copy, 18px/26px h3 in .card .card-body); it explicitly lists the
   trust band, component cards, fact cards and resource cards under "BUILD new
   components (add minimal CSS)". With no sizes at all, card titles and card copy
   both rendered at 18px — separated only by weight — and trust-band labels
   inherited 18px inside a ~135px grid cell. The sizes below are restored to the
   prototype's intent and scoped to the new components only. */

:root {
	--agd-red: rgb(229, 64, 63);
	--agd-navy: rgb(18, 49, 104);
	--agd-grey: rgb(244, 244, 245);
}

/* ── Cards: reuse the theme .card, add only the red accent ─────────────── */
/* SPECIFICITY — do not drop the `body.page` prefix from any rule in this file
   that sets a border colour. assets/styles.css carries
   `body.page .card{border-color:#f4f4f5}` at (0,0,2,1); a plain
   `.service-page .card` is (0,0,2,0) and LOSES, so the accent silently
   repaints in near-white and every card renders as a flat box. The prefix
   below takes these rules to (0,0,3,1). */
body.page .service-page .card {
	border: 0;
	/*border-bottom: 10px solid var(--agd-red);*/
	border-radius: 10px;
}

.service-page .card a {
	color: inherit;
	text-decoration: none;
	display: block;
}

.service-page .card a:hover,
.service-page .card a:focus {
	color: inherit;
}

.service-page .card .card-header img {
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ── Slot 2 · Trust band (global, Universal Settings) ──────────────────── */
.trust-band {
	background-color: var(--agd-navy);
}

.trust-band .trust-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 24px 12px;
	max-width: 1180px;
	margin: 0 auto;
}

.trust-band .trust-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* `svg` is listed alongside `i` on every icon rule below: a Font Awesome Kit
   runs in SVG+JS mode and REPLACES the <i> with <svg class="svg-inline--fa">,
   which silently drops any rule that only targets `i`. Webfont CSS keeps the
   <i>. Matching both means the icons stay styled either way. */
.trust-band .trust-item i,
.trust-band .trust-item svg {
	color: var(--agd-red);
	font-size: 22px;
	margin-bottom: 10px;
}

.trust-band .trust-item .ti-title {
	color: #fff;
	/* font-size was unset, so these inherited the theme's `body span` rule
	   (18px/28px, letter-spacing -1px). At 8 columns each cell is ~135px and
	   "Lifetime Workmanship Warranty" wrapped to 3-4 lines. The band is a new
	   component under Build Brief §5, so a label size here is in scope — the
	   type-scale rule the brief protects is headings and body copy. */
	font-size: 13px;
	line-height: 1.3;
	letter-spacing: 0;
	font-weight: 600;
}

@media (max-width: 992px) {
	.trust-band .trust-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 576px) {
	.trust-band .trust-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── Heading colour ────────────────────────────────────────────────────────
   The theme sets NO colour on headings anywhere: `body h1..h4` in
   assets/styles.css declare font only, and Bootstrap's `--bs-heading-color`
   is `inherit`, so every heading site-wide falls back to
   `--bs-body-color: #212529` (near-black). The approved prototype uses navy
   (`h1,h2,h3,h4{color:var(--navy)}`). Scoped to .service-page so no other
   page changes — delete this block to put the page back in line with the
   rest of the site.

   Both white-on-navy exceptions stay safe: `.text-white` is a Bootstrap
   utility (!important), and the .navy_background rule below is (0,0,3,0)
   against this rule's (0,0,1,1). */
.service-page h1,
.service-page h2,
.service-page h3,
.service-page h4,
.service-page .faq summary {
	color: var(--agd-navy);
}

/* ── Slot 5 · Decision helper ──────────────────────────────────────────── */
.service-page .decision-footer {
	font-style: italic;
}

/* ── Slot 6 · Low-friction CTA (navy section) ──────────────────────────── */
.service-page .navy_background h2,
.service-page .navy_background .h2 {
	color: #fff;
}

/* ── Slot 7 · Component cards: navy edge to separate from the fact cards ─ */
body.page .service-page .comp-card {
	border-left: 8px solid var(--agd-navy);
}

/* Two more prototype accents the same border-color reset was swallowing. */
body.page .service-page .fact-card {
	border-top: 4px solid var(--agd-red);
}

/* (0,0,4,1) — beats the theme's `body.page .card .card-body{border:0}`. */
body.page .service-page .res-card .card-body {
	border-top: 4px solid var(--agd-red);
}

/* ── Slot 8 · Fact cards, program panel, resource eyebrow ─────────────── */
.service-page .fact-card i,
.service-page .fact-card svg {
	color: var(--agd-red);
	font-size: 22px;
	margin-bottom: 10px;
	display: block;
}

.service-page .program {
	background-color: #fff;
	border-left: 8px solid var(--agd-red);
	border-radius: 10px;
	padding: 30px;
}

.service-page .eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
	color: var(--agd-red);
	text-align: center;
	margin-bottom: 20px;
}

/* ── Slot 9 · Numbered steps ───────────────────────────────────────────── */
.service-page .step {
	display: flex;
	gap: 20px;
	margin-bottom: 24px;
}

.service-page .step .num {
	background-color: var(--agd-navy);
	color: #fff;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	flex-shrink: 0;
}

/* ── Slot 10 · Reason rows ─────────────────────────────────────────────── */
.service-page .ti-row {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px solid rgba(18, 49, 104, 0.12);
}

.service-page .ti-row:last-child {
	border-bottom: 0;
}

.service-page .ti-row i,
.service-page .ti-row svg {
	color: var(--agd-red);
	font-size: 20px;
	margin-top: 6px;
	flex-shrink: 0;
}

.service-page .ti-title {
	font-weight: 700;
	color: var(--agd-navy);
	display: block;
}

/* ── Slot 13 · FAQ accordion (native <details>, works without JS) ──────── */
.service-page .faq details {
	border-bottom: 1px solid rgba(18, 49, 104, 0.15);
	padding: 18px 0;
}

.service-page .faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

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

.service-page .faq summary h3 {
	display: inline;
	margin: 0;
}

.service-page .faq summary::after {
	content: '\002B';
	color: var(--agd-red);
	font-weight: 700;
	flex-shrink: 0;
}

.service-page .faq details[open] summary::after {
	content: '\2212';
}

.service-page .faq .faq-answer {
	margin-top: 12px;
}

.service-page .faq .faq-answer p:last-child {
	margin-bottom: 0;
}

/* ── Card copy scale (new components only — see the type-scale note above) ── */
.service-page .comp-card p,
.service-page .fact-card p,
.service-page .res-card p {
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0;
}

.service-page .eyebrow {
	font-size: 15px;
}