/*
 * Skin: Hearth (Denver Chimney Sweep Pros, 2026-11-08).
 * Masonry trades: limewash paper, soot brown-black, fired-brick calls to action, and a slab serif like
 * painted trade signage. The hero carries a low ember glow from the corner, the only decoration.
 * Loaded after style.css when business.json → brand.skin = "hearth". Colors still come from the brand tokens.
 */
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/zilla-slab-600.woff2") format("woff2"); }
@font-face { font-family: "Zilla Slab"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/zilla-slab-700.woff2") format("woff2"); }

:root {
	--sf-font-h: "Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
	--sf-radius: 10px;
	--sf-card: #fffdf9;
	--sf-line: #e3d8c8;
	--sf-soft: #f3e4d6;
	--sf-muted: #66574b;
	--hh-soot: #1f1916;
	--hh-soot-2: #2f2622;
	--hh-brick-text: color-mix(in srgb, var(--sf-accent) 80%, #000);
	--hh-ember: color-mix(in srgb, var(--sf-accent) 42%, transparent);
	--sf-shadow: 0 1px 2px rgba(31, 25, 22, .06), 0 12px 28px -14px rgba(31, 25, 22, .28);
}

body { caret-color: var(--sf-accent); scrollbar-color: color-mix(in srgb, var(--sf-ink) 35%, transparent) transparent; }
::selection { background: var(--sf-accent); color: #fff; }
:focus-visible { outline-color: var(--sf-accent); }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.015em; }
h1 { font-size: clamp(38px, 5.2vw, 60px); line-height: 1.02; }
h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.08; }
h3 { font-weight: 600; letter-spacing: 0; }
a { color: var(--hh-brick-text); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sf-ink); }

/* The heading speaks for itself: no kicker above it. */
.sf-eyebrow { display: none; }

/* Buttons: squared like a brick, not pills */
.sf-btn, .wp-block-button__link { border-radius: 6px; letter-spacing: .005em; transition: transform .25s cubic-bezier(.16, 1, .3, 1), background-color .2s, box-shadow .25s; }
.sf-btn--accent, .wp-block-button__link { background: var(--sf-accent); color: #fff; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--sf-accent) 80%, #000); }
.sf-btn--accent:hover, .wp-block-button__link:hover { background: color-mix(in srgb, var(--sf-accent) 86%, #000); color: #fff; box-shadow: 0 14px 26px -12px color-mix(in srgb, var(--sf-accent) 85%, #000); }
.sf-btn--primary { background: var(--hh-soot); color: #fff; }

/* Top bar and header */
.sf-topbar { background: var(--hh-soot); color: #e9dfd3; }
.sf-topbar .sf-i { color: color-mix(in srgb, var(--sf-accent) 60%, #fff); }
.sf-header { background: color-mix(in srgb, var(--sf-paper) 92%, #fff); border-bottom-color: var(--sf-line); }
.sf-nav a { font-weight: 600; border-radius: 6px; }
.sf-nav a:hover, .sf-nav .is-current > a { background: var(--sf-soft); color: var(--sf-ink); }
.sf-nav .sf-sub, .sf-mnav__panel { background: var(--sf-card); }

/* Hero: soot with a low ember glow from the lower corner */
.sf-hero, .sf-pagehead {
	background:
		radial-gradient(90% 120% at 0% 110%, var(--hh-ember), transparent 60%),
		radial-gradient(60% 80% at 100% 0%, rgba(255, 236, 214, .05), transparent 70%),
		linear-gradient(165deg, var(--hh-soot-2), var(--hh-soot));
	color: #f6efe6;
}
.sf-hero { padding-block: 56px 72px; }
.sf-hero h1 { color: #fffaf3; }
.sf-lead { color: #e8ddd0; opacity: 1; font-size: 19.5px; line-height: 1.55; }
.sf-checks li { color: #f6efe6; }
.sf-checks li::before { background-color: var(--sf-accent); }
.sf-section .sf-checks li { color: inherit; }
.sf-hero .sf-btn--ghost { color: #fffaf3; border-color: rgba(255, 244, 230, .55); }
.sf-hero .sf-btn--ghost:hover { background: rgba(255, 244, 230, .08); }

/* Form: a solid card, no colored top rule */
.sf-form { background: var(--sf-card); border-top: 0; border-radius: var(--sf-radius); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .12); }
.sf-form__title { font-weight: 700; font-size: 24px; }
.sf-form input, .sf-form select, .sf-form textarea { border-radius: 6px; border-color: var(--sf-line); background: #fff; }
.sf-form input:focus, .sf-form select:focus, .sf-form textarea:focus { border-color: var(--sf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sf-accent) 20%, transparent); }
.sf-form__call a { color: var(--hh-brick-text); }

/* Trust strip */
.sf-trust { background: var(--sf-card); border-color: var(--sf-line); border-radius: var(--sf-radius); box-shadow: var(--sf-shadow); }
.sf-trust__item .sf-i { color: var(--sf-accent); }

/* Sections */
.sf-section--white { background: #fbf7f1; border-color: var(--sf-line); }
.sf-section h2 + p { color: var(--sf-muted); }
.sf-callstrip { background: var(--sf-soft); color: var(--sf-ink); }

/* Cards, features, steps: one border, no lift shadow at rest */
.sf-card, .sf-features > .wp-block-group, .sf-feature, ol.sf-steps li, .sf-post, .sf-review, .sf-toc, .wp-block-details.sf-faq, details.sf-faq { background: var(--sf-card); border-color: var(--sf-line); border-radius: var(--sf-radius); }
.sf-card:hover, .sf-post:hover { border-color: var(--sf-accent); box-shadow: var(--sf-shadow); }
.sf-card__icon { border-radius: 6px; background: var(--sf-soft); color: var(--hh-brick-text); }
.sf-card__body strong, .sf-post__body strong { font-weight: 600; font-size: 19px; }
.sf-card__go { color: var(--sf-accent); }
.sf-features h3 { font-size: 21px; }
ol.sf-steps li::before { border-radius: 6px; background: var(--sf-accent); color: #fff; font-family: var(--sf-font-h); }
.sf-faq summary { font-weight: 600; font-size: 19px; }
.sf-faq summary::after { color: var(--sf-accent); }
.sf-pill, .sf-jump a { background: var(--sf-card); border-color: var(--sf-line); border-radius: 6px; }
.sf-pill:hover, .sf-jump a:hover { border-color: var(--sf-accent); color: var(--sf-ink); }
.sf-pill .sf-i { color: var(--sf-accent); }
.sf-table table, .sf-article table { background: var(--sf-card); }
.sf-table th { background: var(--sf-soft); }
.sf-photo img, .wp-block-image.sf-photo img { border-radius: var(--sf-radius); }

/* Closing call to action: soot panel with the same ember */
.sf-cta {
	background: radial-gradient(80% 140% at 100% 100%, var(--hh-ember), transparent 60%), linear-gradient(165deg, var(--hh-soot-2), var(--hh-soot));
	color: #f6efe6; border-radius: var(--sf-radius);
}
.sf-cta p { color: #e8ddd0; opacity: 1; }
.sf-cta .sf-btn--light { background: var(--sf-accent); color: #fff; }
.sf-cta .sf-btn--ghost { color: #fffaf3; border-color: rgba(255, 244, 230, .55); }

/* Footer */
.sf-footer { background: var(--hh-soot); color: #d9cdbf; border-top: 4px solid var(--sf-accent); }
.sf-footer a:hover { color: color-mix(in srgb, var(--sf-accent) 55%, #fff); }
.sf-footer__title, .sf-footer__brand { font-family: var(--sf-font-h); letter-spacing: .02em; }
.sf-pagination .current { background: var(--sf-accent); }

@media (max-width: 640px) {
	.sf-hero { padding-block: 34px 52px; }
	h1 { font-size: clamp(34px, 9vw, 44px); }
	.sf-callbar { background: var(--sf-card); border-top-color: var(--sf-line); }
}