/* ==========================================================================
   Gas First — Page templates (Day 3, item 3)
   Uses existing brand tokens: --gasfirst-primary (#0F172A), --gasfirst-accent
   (#F97316). Fonts Poppins/Inter already enqueued by the theme.
   Enqueue this AFTER main.css.
   ========================================================================== */

:root {
	--gf-primary: var(--gasfirst-primary, #0F172A);
	--gf-accent:  var(--gasfirst-accent, #F97316);
	--gf-ink: #0F172A;
	--gf-muted: #5b6577;
	--gf-line: #e6e9ef;
	--gf-bg-soft: #f7f8fa;
	--gf-radius: 14px;
	--gf-maxw: 1080px;
}

.gf-page { color: var(--gf-ink); font-family: 'Inter', system-ui, sans-serif; }
.gf-container { max-width: var(--gf-maxw); margin: 0 auto; padding: 0 20px; }
.gf-section { padding: 56px 0; }
.gf-page h1, .gf-page h2, .gf-page h3 { font-family: 'Poppins', 'Inter', sans-serif; color: var(--gf-primary); line-height: 1.15; }

/* ---- HERO ---- */
.gf-hero {
	background:
		radial-gradient(1200px 400px at 80% -10%, rgba(249,115,22,0.18), transparent 60%),
		linear-gradient(160deg, var(--gf-primary) 0%, #16243f 100%);
	color: #fff;
	padding: 72px 0 64px;
}
.gf-hero-title { color: #fff; font-size: clamp(2rem, 4.5vw, 3.1rem); font-weight: 800; margin: 0 0 14px; }
.gf-hero-sub { color: #cdd5e3; font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 60ch; margin: 0 0 28px; }

/* ---- CTA buttons ---- */
.gf-cta-group { display: flex; flex-wrap: wrap; gap: 12px; }
.gf-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 22px; border-radius: 50px; font-weight: 700; font-size: 1.02rem;
	text-decoration: none; transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.gf-btn:hover { transform: translateY(-1px); }
.gf-btn-call { background: var(--gf-accent); color: #fff; box-shadow: 0 8px 20px rgba(249,115,22,0.35); }
.gf-btn-call:hover { background: #ea670f; }
.gf-btn-wa { background: #25D366; color: #fff; }
.gf-btn-wa:hover { background: #1ebe5a; }
.gf-btn-quote { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.4); }
.gf-hero .gf-btn-quote:hover { background: rgba(255,255,255,0.2); }
/* On light bands, recolour the quote button for contrast */
.gf-cta-band .gf-btn-quote, .gf-final-cta .gf-btn-quote { background: #fff; color: var(--gf-primary); border-color: var(--gf-line); }

/* ---- TRUST BAR ---- */
.gf-trustbar { background: #fff; border-bottom: 1px solid var(--gf-line); }
.gf-trustbar-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; padding: 22px 20px; }
.gf-trust-item { text-align: center; display: flex; flex-direction: column; gap: 2px; }
.gf-trust-item strong { font-family: 'Poppins', sans-serif; font-size: 1.15rem; color: var(--gf-primary); }
.gf-trust-item span { font-size: .86rem; color: var(--gf-muted); }

/* ---- BODY SECTIONS ---- */
.gf-section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 18px; }
.gf-intro { padding-top: 48px; }
.gf-intro :is(p, li) { font-size: 1.08rem; line-height: 1.7; color: #333b4a; }
.gf-text-block :is(p, li) { line-height: 1.7; color: #333b4a; }
.gf-section.gf-section-alt { background: var(--gf-bg-soft); }

/* Feature grid */
.gf-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 10px; }
.gf-feature { background: #fff; border: 1px solid var(--gf-line); border-radius: var(--gf-radius); padding: 22px; }
.gf-feature h3 { font-size: 1.12rem; margin: 0 0 8px; }
.gf-feature p { margin: 0; color: var(--gf-muted); line-height: 1.6; }

/* CTA band */
.gf-cta-band { background: var(--gf-primary); }
.gf-cta-band-text { color: #fff; font-size: 1.25rem; font-weight: 600; font-family: 'Poppins', sans-serif; margin: 0 0 18px; }

/* ---- FAQ accordion ---- */
.gf-accordion { border: 1px solid var(--gf-line); border-radius: var(--gf-radius); overflow: hidden; }
.gf-acc-item { border-bottom: 1px solid var(--gf-line); }
.gf-acc-item:last-child { border-bottom: 0; }
.gf-acc-q {
	cursor: pointer; padding: 18px 22px; font-weight: 600; font-family: 'Poppins', sans-serif;
	color: var(--gf-primary); list-style: none; position: relative; padding-right: 48px;
}
.gf-acc-q::-webkit-details-marker { display: none; }
.gf-acc-q::after { content: "+"; position: absolute; right: 22px; top: 16px; font-size: 1.4rem; color: var(--gf-accent); transition: transform .15s ease; }
.gf-acc-item[open] .gf-acc-q::after { transform: rotate(45deg); }
.gf-acc-a { padding: 0 22px 20px; color: #333b4a; line-height: 1.7; }

/* ---- Related ---- */
.gf-related-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.gf-related-list a {
	display: inline-block; padding: 10px 16px; background: var(--gf-bg-soft); border: 1px solid var(--gf-line);
	border-radius: 50px; text-decoration: none; color: var(--gf-primary); font-weight: 600; font-size: .95rem;
}
.gf-related-list a:hover { border-color: var(--gf-accent); color: var(--gf-accent); }

/* ---- Final CTA ---- */
.gf-final-cta {
	text-align: center;
	background: radial-gradient(800px 300px at 50% 0%, rgba(249,115,22,0.12), transparent 60%), var(--gf-bg-soft);
}
.gf-final-cta h2 { margin-bottom: 10px; }
.gf-final-cta p { color: var(--gf-muted); margin: 0 0 22px; font-size: 1.08rem; }
.gf-final-cta .gf-cta-group { justify-content: center; }

/* ---- Mobile ---- */
@media (max-width: 720px) {
	.gf-trustbar-inner { grid-template-columns: repeat(2, 1fr); }
	.gf-section { padding: 40px 0; }
	.gf-cta-group { flex-direction: column; }
	.gf-btn { justify-content: center; }
}