/*
 * Services pages — pairs with template-service.php and
 * template-services-index.php. Loaded only when those templates render
 * (get_query_var('gm_service_slug') / ('gm_services_index')), see
 * functions-enqueue-snippet.php.
 *
 * Self-contained (own scoped vars + gm-svc-* classes) rather than reusing
 * shared.css's .gm-service-card/.gm-services__grid/.gm-btn, which only
 * resolve inside #gm-home — same convention fleet-program.css/
 * manager-resources.css already established for non-homepage pages.
 */

#gm-service {
	--gm-svc-red: var(--awb-color2, #ed2e38);
	--gm-svc-black: var(--awb-color1, #0a0a0a);
	--gm-svc-white: #ffffff;
	--gm-svc-gray-lt: #f4f4f4;
	--gm-svc-gray-md: #595959;
	--gm-svc-radius: 6px;
	max-width: 900px;
	margin: 0 auto;
	padding: 48px 24px 64px;
	font-family: var(--awb-body-typography-font-family, inherit);
	color: var(--gm-svc-black);
	box-sizing: border-box;
}

#gm-service h1,
#gm-service h2,
#gm-service h3,
#gm-service h4 {
	font-family: var(--awb-heading-typography-font-family, inherit);
	line-height: 1.25;
	margin: 32px 0 12px;
}

.gm-service-hero__img {
	width: 100%;
	max-height: 320px;
	object-fit: cover;
	border-radius: var(--gm-svc-radius);
	margin-bottom: 24px;
	display: block;
}

.gm-service-hero h1 {
	font-size: clamp(28px, 5vw, 40px);
	margin-top: 0;
}

.gm-service-hero__sub {
	font-size: 16px;
	color: var(--gm-svc-gray-md);
	max-width: 640px;
	line-height: 1.6;
	margin: 0 0 24px;
}

/* Body content — headings/paragraphs/lists extracted from the old site */
.gm-service-body {
	line-height: 1.65;
}

.gm-service-body h2 {
	font-size: 1.5rem;
}

.gm-service-body h3 {
	font-size: 1.2rem;
}

.gm-service-body h4 {
	font-size: 1.05rem;
}

.gm-service-body p {
	margin: 0 0 16px;
	color: var(--gm-svc-black);
}

.gm-service-body ul,
.gm-service-body ol {
	margin: 0 0 16px;
	padding-left: 24px;
}

.gm-service-body li {
	margin-bottom: 6px;
}

/* .gm-service-cta / .gm-svc-btn* removed 2026-08-06 — the CTA they
   styled ("Find a Grease Monkey Near You") was fabricated, never on the
   real site (confirmed: zero matches across every real page fetched).
   Replaced by inc/service-trust-block.php's real "Locally Owned &
   Trusted" content, styled by .gm-svc-trust below. */

/* Index grid — /services/ */
.gm-svc-index {
	text-align: center;
}

.gm-svc-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: 24px;
}

.gm-svc-card {
	display: block;
	text-decoration: none;
	color: var(--gm-svc-black);
	background: var(--gm-svc-gray-lt);
	border-radius: var(--gm-svc-radius);
	overflow: hidden;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.gm-svc-card:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.gm-svc-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.gm-svc-card h3 {
	margin: 0;
	padding: 16px;
	font-size: 1rem;
}

@media (max-width: 900px) {
	.gm-svc-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	#gm-service {
		padding: 32px 16px 48px;
	}
	.gm-svc-grid {
		grid-template-columns: 1fr;
	}
}

/* Shared FAQ accordion (added 2026-08-06 fidelity audit) — every real
   service page has this block and it was previously missing entirely
   here. Same visual language and real button + [aria-expanded] toggle
   already proven on the store-location pages' FAQ
   (assets/css/store-location.css's .gm-faq-*), ported to this
   stylesheet's own scoped --gm-svc-* vars rather than --gm-navy/
   --coupon-red, which are only defined in store-location.css and would
   resolve to nothing here. Toggle JS: assets/js/services.js. */
.gm-service-faq {
	margin-top: 48px;
}

.gm-faq-heading h2 {
	margin: 0 0 20px;
}

.gm-faq-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gm-faq-item {
	background: var(--gm-svc-white);
	border-radius: 12px;
	box-shadow: 0 4px 8px rgba(10, 10, 10, 0.06);
}

.gm-faq-item h3 {
	margin: 0;
}

.gm-faq-toggle,
.gm-faq-toggle:hover,
.gm-faq-toggle:focus {
	/* background repeated under :hover/:focus — confirmed live via
	   Playwright getComputedStyle() (2026-08-06) that GeneratePress's own
	   button:focus{background-color:#3f4047} otherwise wins here (same
	   class-vs-type+pseudo-class specificity bug already hit 3x elsewhere
	   in this project; earlier confirmed NOT to affect the store-location
	   pages' .gm-faq-toggle, but this stylesheet is loaded in a different
	   page context and IS affected — checked directly, not assumed). */
	background: transparent;
}

.gm-faq-toggle {
	position: relative;
	width: 100%;
	padding: 18px 44px 18px 20px;
	border: none;
	appearance: none;
	text-align: left;
	font-weight: 600;
	font-size: 1.2rem;
	color: var(--gm-svc-black);
	cursor: pointer;
}

.gm-faq-toggle:hover {
	color: var(--gm-svc-red);
}

.gm-faq-icon-plus,
.gm-faq-icon-minus {
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	transition: transform 0.3s ease, opacity 0.3s ease;
	font-size: 0.85rem;
}

.gm-faq-icon-minus {
	opacity: 0;
}

.gm-faq-toggle[aria-expanded="true"] .gm-faq-icon-plus {
	opacity: 0;
	transform: translateY(-50%) rotate(180deg);
}

.gm-faq-toggle[aria-expanded="true"] .gm-faq-icon-minus {
	opacity: 1;
}

.gm-faq-content {
	padding: 0 20px 18px;
}

.gm-faq-content p {
	color: var(--gm-svc-black);
	font-size: 1.05rem;
	line-height: 1.5;
	margin: 0;
}

/* /services/ index only — category filter tabs above the FAQ accordion
   (added 2026-08-06). Real button elements (not the live site's bare
   <a href="#">), toggled via assets/js/services.js. */
.gm-svc-faq {
	margin-top: 48px;
}

.gm-faq-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 20px;
}

.gm-faq-filter,
.gm-faq-filter:hover,
.gm-faq-filter:focus {
	/* background/border repeated under :hover/:focus — same GeneratePress
	   button:focus specificity collision already fixed on .gm-faq-toggle
	   above, checked directly rather than assumed here too. */
	background: transparent;
	border-color: var(--gm-svc-gray-md);
}

.gm-faq-filter {
	padding: 8px 18px;
	border: 1px solid var(--gm-svc-gray-md);
	border-radius: 999px;
	color: var(--gm-svc-black);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	appearance: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.gm-faq-filter.is-active,
.gm-faq-filter.is-active:hover,
.gm-faq-filter.is-active:focus {
	background: var(--gm-svc-red);
	border-color: var(--gm-svc-red);
	color: var(--gm-svc-white);
}

/* "Locally Owned & Trusted" trust block (added 2026-08-06), /services/
   index only — 2-column layout matching the real page's side-by-side
   Fusion columns. */
.gm-svc-trust {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
	margin-top: 56px;
	padding-top: 40px;
	border-top: 1px solid var(--gm-svc-gray-lt);
}

.gm-svc-trust__col h2 {
	margin: 0 0 8px;
}

.gm-svc-trust__col p {
	margin: 0 0 16px;
	color: var(--gm-svc-gray-md);
}

.gm-svc-trust__col img {
	max-width: 300px;
	height: auto;
	display: block;
}

.gm-svc-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.gm-svc-checklist li {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.gm-svc-checklist i {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gm-svc-red);
	color: var(--gm-svc-white);
	font-size: 0.9rem;
}

.gm-svc-checklist span {
	color: var(--gm-svc-black);
	line-height: 1.4;
	padding-top: 4px;
}

@media (max-width: 700px) {
	.gm-svc-trust {
		grid-template-columns: 1fr;
	}
}

/* Previous/Next navigation (added 2026-08-06) — real site markup:
   <div class="single-navigation clearfix"><a rel="prev">Previous</a>
   <a rel="next">Next</a></div>, at the top of the page. Flexbox with
   margin-left:auto on the "next" link (rather than
   justify-content:space-between) so Next still lands on the right even
   when Previous is absent — the real oil-change page has no Previous at
   all (it's first in the sequence), and space-between alone would leave
   a lone Next link stuck on the left in that case. */
.gm-svc-nav {
	display: flex;
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--gm-svc-gray-lt);
}

.gm-svc-nav a {
	color: var(--gm-svc-black);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.95rem;
	padding: 8px 4px;
}

.gm-svc-nav a:hover {
	color: var(--gm-svc-red);
}

.gm-svc-nav a[rel="prev"]::before {
	content: '\2190';
	margin-right: 6px;
}

.gm-svc-nav a[rel="next"] {
	margin-left: auto;
}

.gm-svc-nav a[rel="next"]::after {
	content: '\2192';
	margin-left: 6px;
}