/* WhyFire Pages — scoped block styles, aligned to The Stove Shop's interior-
   page conventions (studied on /products/, /our-showroom/, /service/ 8/11):
   slate #232C39 CENTERED headings (red = links/CTAs only), thin hairline
   rules between major sections, square corners on a white canvas, chip
   anatomy = white + 1px slate border, estimate CTA = their slate rectangle,
   visualize CTA = their red flame pill. Fonts inherit (Figtree site-wide). */

.wfp {
	--wfp-accent: #a72c32;
	--wfp-slate: #232c39;
	--wfp-ink: #232c39;
	--wfp-muted: #7a7a7a;
	--wfp-line: rgba(35, 44, 57, 0.85);
	--wfp-chipline: #232c39;
	--wfp-bg-soft: #f6f6f6;
	color: var(--wfp-ink);
	line-height: 1.65;
}

.wfp section {
	margin: 0 0 2.5rem;
}

/* Hairline rules between major sections — their divider convention. */
.wfp section + section {
	border-top: 1px solid var(--wfp-line);
	padding-top: 2.25rem;
}

.wfp h2 {
	font-size: 1.9rem;
	font-weight: 600;
	color: var(--wfp-slate);
	text-align: center;
	margin: 0 0 1.1rem;
	line-height: 1.25;
}

.wfp a {
	color: var(--wfp-accent);
}

/* Page title centered — their band-heading convention (best-effort across
   classic and block themes; scoped to our CPT's body class). */
.single-wf_page .entry-title,
.single-wf_page .wp-block-post-title,
.single-wf_page h1 {
	text-align: center;
	font-weight: 700;
}

/* Breadcrumbs — quiet, centered, matches the BreadcrumbList schema. */
.wfp-crumbs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	font-size: 0.85rem;
	color: var(--wfp-muted);
	margin: 0 0 1.4rem;
}
.wfp .wfp-crumbs a {
	color: var(--wfp-muted);
	text-decoration: none;
}
.wfp .wfp-crumbs a:hover {
	color: var(--wfp-accent);
}

/* Hero — image leads at full column width; identity line centered below
   (Matt 8/11: bigger image, info under it). White canvas, square corners. */
.wfp-hero {
	display: block;
}
.wfp-hero-media {
	margin: 0 0 1.1rem;
}
.wfp-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: contain;
}
/* Identity line — one centered row under the image, box dividers between
   items (Matt 8/11: consolidate, no repeated stack). */
.wfp-hero-info {
	text-align: center;
}
.wfp-idline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 0;
	font-size: 0.95rem;
}
.wfp-idline > span {
	padding: 0.15rem 1.1rem;
}
.wfp-idline > span + span {
	border-left: 1px solid rgba(35, 44, 57, 0.35);
}
/* All identity items share one voice; only the $$$ marks are red. */
.wfp-id-item {
	color: var(--wfp-slate);
	font-weight: 700;
}
.wfp-id-mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wfp-tier-marks {
	color: var(--wfp-accent);
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* CTA pair — THE observed site convention (4-page sweep 8/11): every button
   on fireplaceexperts.com is the brick-red pill: #A72C32, white label,
   radius 50px, 17px/600, capitalize, 15/30 padding. Hero/body CTAs carry the
   white flame icon; footer pills omit it. Primary = pill + flame,
   secondary = same pill, no flame. No other button dialect exists. */
.wfp-ctas {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 0 0 2.5rem;
}
.wfp .wfp-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-align: center;
	padding: 15px 30px;
	font-weight: 600;
	font-size: 17px;
	text-transform: capitalize;
	text-decoration: none;
	border: 0;
	border-radius: 50px;
	background: var(--wfp-accent);
	color: #fff;
}
.wfp .wfp-btn-primary:hover {
	background: #8f2229;
	color: #fff;
}
.wfp .wfp-btn-primary::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Secondary = hollow inversion of the primary: white bg, red outline + text,
   eye mark for Visualize (Matt's ruling 8/11). Padding trimmed 2px to offset
   the border so the twins stay pixel-equal. */
.wfp .wfp-btn-secondary {
	background: #fff;
	color: var(--wfp-accent);
	border: 2px solid var(--wfp-accent);
	padding: 13px 28px;
}
.wfp .wfp-btn-secondary::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a72c32' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.wfp .wfp-btn-secondary:hover {
	background: var(--wfp-accent);
	color: #fff;
}
.wfp .wfp-btn-secondary:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}

/* Specs — their filter-chip anatomy: white, 1px slate border, square. */
.wfp-facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 0.75rem;
	margin: 0;
}
.wfp-fact {
	border: 1px solid var(--wfp-chipline);
	padding: 0.75rem 0.9rem;
	background: #fff;
}
/* Label style: Title Case, no caps/letterspacing — the ALL-CAPS microlabel
   was WOE-widget dialect, not the site's (their headings are Title Case). */
.wfp-fact dt {
	font-size: 0.85rem;
	color: var(--wfp-muted);
	margin: 0 0 0.2rem;
	font-weight: 600;
}
.wfp-fact dd {
	margin: 0;
	font-weight: 700;
	color: var(--wfp-slate);
}

/* Product resources — chip anatomy, EQUAL-width grid (squared per Matt),
   download icon so the action is unmistakable. */
.wfp-doc-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.6rem;
}
.wfp .wfp-doc {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.7rem 1rem;
	border: 1px solid var(--wfp-chipline);
	color: var(--wfp-slate);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	background: #fff;
	text-align: center;
}
.wfp .wfp-doc::before {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23232c39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.wfp .wfp-doc:hover {
	background: var(--wfp-slate);
	color: #fff;
}
.wfp .wfp-doc:hover::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpolyline points='7 10 12 15 17 10'/%3E%3Cline x1='12' x2='12' y1='15' y2='3'/%3E%3C/svg%3E");
}

/* FAQ */
.wfp-faq-item {
	border-bottom: 1px solid rgba(35, 44, 57, 0.2);
	padding: 0.35rem 0;
}
.wfp-faq-item summary {
	cursor: pointer;
	font-weight: 700;
	color: var(--wfp-slate);
	padding: 0.55rem 0;
}
.wfp-faq-a p {
	margin: 0.25rem 0 0.75rem;
	color: #4a4a4a;
}
.wfp-faq-src {
	font-size: 0.85rem;
}
.wfp-faq-src a {
	font-weight: 600;
}

/* Related products */
.wfp-related-list {
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
	display: grid;
	gap: 0.4rem;
	text-align: center;
}
.wfp .wfp-related-list a {
	font-weight: 600;
	color: var(--wfp-slate);
}
.wfp .wfp-related-list a:hover {
	color: var(--wfp-accent);
}
.wfp-related-all {
	text-align: center;
}
.wfp-related-all a {
	font-weight: 700;
}

/* Service area — flat light-gray band (their review-card surface), square. */
.wfp-serving {
	background: var(--wfp-bg-soft);
	padding: 1.4rem 1.6rem;
}
.wfp-serving p {
	margin: 0;
	color: #4a4a4a;
	text-align: center;
}

@media (max-width: 640px) {
	.wfp-ctas {
		grid-template-columns: 1fr;
	}
	.wfp-doc-list {
		grid-template-columns: 1fr;
	}
	.wfp h2 {
		font-size: 1.5rem;
	}
}