/* HeartFire Media — brand tokens and global rules.
   Colors and sizes on individual elements are set in Elementor so editors can change them;
   this file holds the shared tokens, the display-font hook, and structural styles. */

:root {
	--hf-ink: #0B0B0B;
	--hf-white: #FFFFFF;
	--hf-cream: #F4F1EA;
	--hf-gold: #C9A24A;
	--hf-gold-deep: #8A6A1F;
	--hf-muted: #5F5B55;
	--hf-stone: #D9D4CB;
	--hf-rule: rgba(11, 11, 11, .14);
	--hf-ease: cubic-bezier(.2, .7, .2, 1);
	/* --hf-display / --hf-dw / --hf-fallback-img are printed by the theme from the Customizer. */
}

body {
	font-family: 'Satoshi', system-ui, sans-serif;
	color: var(--hf-ink);
	background: var(--hf-white);
	-webkit-font-smoothing: antialiased;
}
a { color: var(--hf-ink); text-underline-offset: 4px; }
a:hover { color: var(--hf-gold-deep); }
:focus-visible { outline: 2px solid var(--hf-gold); outline-offset: 3px; }
::selection { background: var(--hf-gold); color: var(--hf-ink); }

/* Display headings — add CSS class "hf-display" to any Heading widget. Font comes from Appearance → Customize → HeartFire Brand. */
.elementor .hf-display .elementor-heading-title,
.hf-page-header__title,
.hf-logo__word,
.hf-metrics__v {
	font-family: var(--hf-display);
	font-weight: var(--hf-dw);
}
.elementor-heading-title { text-wrap: balance; }
.elementor-widget-text-editor p { text-wrap: pretty; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* Italic accent words: wrap a word in <em> inside a heading. Gold on dark, deep gold on light (add "hf-em-deep"). */
.hf-display em,
.hf-page-header__title em { font-style: italic; color: var(--hf-gold); }
.hf-em-deep em { color: var(--hf-gold-deep); }

/* Eyebrow label — add CSS class "hf-eyebrow" to a Heading widget. */
.hf-eyebrow .elementor-heading-title { display: inline-flex; align-items: center; gap: 12px; }
.hf-eyebrow .elementor-heading-title::before { content: ""; width: 28px; height: 1px; background: currentColor; flex: none; }

/* Fallback background photo for the home hero until a real one is set in Elementor. */
.hf-fallback-bg { background-image: var(--hf-fallback-img); background-size: cover; background-position: center; }

/* Linked containers (service rows, cards) */
a.e-con, a.elementor-element { text-decoration: none; color: inherit; }
.hf-row-link .hf-arrow .elementor-heading-title { transition: transform 200ms var(--hf-ease); }
.hf-row-link:hover .hf-arrow .elementor-heading-title { transform: translateX(6px); }
.hf-card .hf-frame__img { transition: transform 600ms var(--hf-ease); }
.hf-card:hover .hf-frame__img { transform: scale(1.03); }

/* Header scrolled state (html.hf-scrolled is toggled by heartfire.js) */
.hf-site-header { transition: background-color 250ms ease, backdrop-filter 250ms ease; }
.hf-scrolled .hf-site-header { background-color: rgba(11, 11, 11, .92) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* Scroll reveal — add CSS class "hf-reveal" to any container. */
.hf-reveal-ready .hf-reveal { opacity: 0; transform: translateY(16px); transition: opacity 480ms var(--hf-ease), transform 480ms var(--hf-ease); }
.hf-reveal-ready .hf-reveal.hf-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.hf-reveal-ready .hf-reveal { opacity: 1; transform: none; transition: none; }
}

/* Taxonomy Filter (Work page) — square pills on brand */
.hf-filter .e-filter { gap: 8px; }
.hf-filter .e-filter-item { border: 1px solid rgba(11, 11, 11, .24); border-radius: 0; padding: 12px 18px; font: 600 12px/1 'Satoshi', system-ui, sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--hf-ink); background: transparent; }
.hf-filter .e-filter-item[aria-pressed="true"],
.hf-filter .e-filter-item:hover { background: var(--hf-ink); color: var(--hf-white); border-color: var(--hf-ink); }

/* Elementor Pro Form — chip-style checkboxes / radios */
.hf-form .elementor-field-subgroup.elementor-subgroup-inline { gap: 8px; }
.hf-form .elementor-field-subgroup .elementor-field-option { margin: 0; }
.hf-form .elementor-field-subgroup .elementor-field-option input { position: absolute; opacity: 0; }
.hf-form .elementor-field-subgroup .elementor-field-option label { display: inline-block; padding: 12px 16px; border: 1px solid rgba(11, 11, 11, .24); background: var(--hf-cream); cursor: pointer; font-weight: 500; transition: background 150ms, color 150ms; }
.hf-form .elementor-field-subgroup .elementor-field-option input:checked + label { background: var(--hf-ink); color: var(--hf-white); border-color: var(--hf-ink); }
.hf-form .elementor-field-subgroup .elementor-field-option input:focus-visible + label { outline: 2px solid var(--hf-gold); outline-offset: 2px; }
.hf-form .elementor-field-type-acceptance .elementor-field-option label { padding: 0; border: 0; background: none; }
.hf-form .elementor-field-type-acceptance .elementor-field-option input { position: static; opacity: 1; accent-color: var(--hf-ink); }

/* Shortcode output: [hf_list] [hf_pairs] [hf_metrics] */
.hf-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hf-rule); }
.hf-list li { display: flex; gap: 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--hf-rule); font-size: 18px; line-height: 1.5; }
.hf-list__n { font: 600 13px/1 'Satoshi', system-ui, sans-serif; letter-spacing: .2em; color: var(--hf-gold-deep); flex: none; }
.hf-pairs { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px 48px; }
.hf-pairs__row { border-top: 1px solid var(--hf-rule); padding-top: 14px; }
.hf-pairs dt { font: 600 12px/1.4 'Satoshi', system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--hf-muted); }
.hf-pairs dd { margin: 6px 0 0; font-size: 18px; }
.hf-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.hf-metrics__item { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid rgba(201, 162, 74, .55); padding-top: 20px; }
.hf-metrics__v { font-size: clamp(36px, 4.5vw, 64px); line-height: 1; color: var(--hf-gold); }
.hf-metrics__k { font: 600 12px/1.4 'Satoshi', system-ui, sans-serif; letter-spacing: .24em; text-transform: uppercase; color: var(--hf-stone); }

/* ---------- HF Page Header (structure only; visuals are widget controls) ---------- */
.hf-page-header { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: flex-end; }
.hf-page-header__media,
.hf-page-header__overlay { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hf-page-header__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-page-header__inner { position: relative; width: 100%; margin-inline: auto; display: flex; flex-direction: column; }
.hf-page-header__crumbs { display: flex; flex-wrap: wrap; align-items: center; }
.hf-page-header__crumbs a { text-decoration: none; }
.hf-page-header__eyebrow { display: inline-flex; align-items: center; margin: 0; }
.hf-page-header__eyebrow-line { display: block; height: 1px; background: currentColor; flex: none; }
.hf-page-header__title { margin: 0; }
.hf-page-header__desc { margin: 0; }
.hf-page-header__note { margin: 0; }
.hf-page-header__buttons { display: flex; flex-wrap: wrap; }
.hf-page-header__btn { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; white-space: nowrap; transition-property: color, background-color, border-color, transform, gap; }
.hf-page-header__btn:hover { transform: translateY(-2px); gap: 14px; }
.hf-page-header--center .hf-page-header__inner { align-items: center; text-align: center; }
.hf-page-header--center .hf-page-header__crumbs,
.hf-page-header--center .hf-page-header__buttons { justify-content: center; }

/* ---------- HF Logo ---------- */
.hf-logo { display: inline-flex; align-items: center; text-decoration: none; }
.hf-logo__mark { display: block; width: auto; }
.hf-logo__words { display: flex; flex-direction: column; align-items: flex-end; }
.hf-logo__word, .hf-logo__sub { display: block; line-height: .9; text-transform: uppercase; white-space: nowrap; }

/* ---------- HF Image Frame ---------- */
.hf-frame { position: relative; margin: 0; }
.hf-frame__box { position: relative; overflow: hidden; }
.hf-frame__box--ratio .hf-frame__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hf-frame__img { display: block; width: 100%; height: auto; }
.hf-frame__offset { position: absolute; pointer-events: none; z-index: 0; }
.hf-frame__box { z-index: 1; }
.hf-frame__label { position: absolute; z-index: 2; }
.hf-frame__placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.hf-frame__caption { display: block; }