/**
 * American Mechanical Systems — HVAC Rebate Center
 * Scoped styles (.hrb-*) for the [hvac_rebates_naperville] shortcode.
 * Navy/red "civic" theme, self-contained (no Tailwind dependency).
 *
 * Colors are set with the .hrb-page root selector (and !important on the
 * dark-section light text) so the parent theme / Elementor can never override
 * them into dark-on-dark. Design is intentionally layered: patterned hero,
 * pill tabs, accent-bar cards, gradient step markers.
 *
 * Powered by GND
 */

.hrb-page {
	--hrb-navy-950: #071a31;
	--hrb-navy-900: #0d2b4e;
	--hrb-navy-800: #143a68;
	--hrb-navy-700: #1e5bd6;
	--hrb-blue-100: #eaf1ff;
	--hrb-flag: #d7263d;
	--hrb-flag-dark: #b01d30;
	--hrb-gold: #f4b942;
	--hrb-ink: #1a2436;
	--hrb-muted: #55617a;
	--hrb-line: #e4e8f0;
	--hrb-bg-soft: #f5f7fb;
	--hrb-radius: 18px;
	--hrb-shadow: 0 18px 40px -24px rgba(8, 29, 54, 0.45);
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--hrb-ink);
	line-height: 1.65;
	font-size: 1.02rem;
}
.hrb-page *, .hrb-page *::before, .hrb-page *::after { box-sizing: border-box; }

.hrb-container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2.5rem); }

.hrb-page h1, .hrb-page h2, .hrb-page h3, .hrb-page h4 {
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	color: var(--hrb-navy-950);
	line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 0.5em;
}
.hrb-page p { margin: 0 0 1rem; }
.hrb-page a { color: var(--hrb-navy-700); }

/* ---------------- HERO ---------------- */
.hrb-hero {
	position: relative; overflow: hidden;
	background:
		radial-gradient(120% 140% at 85% -10%, rgba(30,91,214,0.55), transparent 55%),
		linear-gradient(135deg, var(--hrb-navy-950) 0%, var(--hrb-navy-800) 100%);
	padding: clamp(3.2rem, 7vw, 6rem) 0 clamp(2.6rem, 6vw, 4.8rem);
}
/* Subtle blueprint grid overlay for depth. */
.hrb-hero::before {
	content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none;
	background-image:
		linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
	background-size: 46px 46px;
	-webkit-mask-image: radial-gradient(120% 90% at 20% 0%, #000 30%, transparent 78%);
	        mask-image: radial-gradient(120% 90% at 20% 0%, #000 30%, transparent 78%);
}
.hrb-hero::after {
	content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--hrb-flag) 0 38%, #fff 38% 62%, var(--hrb-navy-700) 62% 100%);
}
.hrb-hero__inner { position: relative; max-width: 840px; }
.hrb-page .hrb-hero h1 { color: #fff !important; font-size: clamp(2rem, 4.6vw, 3.35rem); }
.hrb-page .hrb-hero__lede { color: #cfe0f7 !important; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 500; margin-bottom: 1.4rem; max-width: 46rem; }
.hrb-page .hrb-hero__meta {
	display: inline-flex; align-items: center; gap: 0.5rem;
	color: #9fb2d4 !important; font-size: 0.82rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
}
.hrb-page .hrb-hero__meta::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--hrb-gold); box-shadow: 0 0 0 4px rgba(244,185,66,0.22); }
.hrb-eyebrow {
	display: inline-flex; align-items: center; gap: 0.55rem;
	font-size: 0.76rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
	color: #ff9db0 !important; margin-bottom: 1.1rem;
	background: rgba(215,38,61,0.14); border: 1px solid rgba(255,157,176,0.28);
	padding: 0.4rem 0.85rem; border-radius: 999px;
}
.hrb-eyebrow::before { content: ""; width: 20px; height: 2px; background: var(--hrb-flag); display: inline-block; }

/* ---------------- BODY ---------------- */
.hrb-body { padding: clamp(2.6rem, 5vw, 4rem) 0; background:
	radial-gradient(60% 30% at 100% 0%, rgba(30,91,214,0.05), transparent 60%); }
.hrb-intro .hrb-lead {
	font-size: 1.2rem; color: var(--hrb-navy-900); font-weight: 500;
	padding-left: 1.1rem; border-left: 4px solid var(--hrb-flag); margin-bottom: 1.3rem;
}
.hrb-intro p { color: #33405a; }

/* Notes / disclaimers */
.hrb-note {
	position: relative; border-radius: var(--hrb-radius); padding: 1.2rem 1.4rem 1.2rem 1.6rem;
	margin: 1.6rem 0; border: 1px solid var(--hrb-line); background: #fff; box-shadow: var(--hrb-shadow); font-size: 0.99rem;
}
.hrb-note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; border-radius: 6px 0 0 6px; background: var(--hrb-navy-700); }
.hrb-note--warn { background: linear-gradient(180deg, #fffaf0, #fff6e6); border-color: #f2d6a0; }
.hrb-note--warn::before { background: var(--hrb-gold); }
.hrb-note--warn strong { color: #9a5b00; }
.hrb-note strong { color: var(--hrb-navy-900); }
.hrb-note h3 { margin-top: 0 !important; }

/* ---------------- TABS ---------------- */
.hrb-tabs { margin-top: 2.6rem; }
.hrb-tablist {
	display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.5rem;
	background: var(--hrb-bg-soft); border: 1px solid var(--hrb-line); border-radius: 16px; margin-bottom: 2rem;
	position: sticky; top: 0.5rem; z-index: 5; backdrop-filter: blur(6px);
}
.hrb-tab {
	appearance: none; border: 0; background: transparent; cursor: pointer;
	font-family: "Inter", sans-serif; font-size: 0.96rem; font-weight: 600; color: var(--hrb-muted);
	padding: 0.66rem 1.1rem; border-radius: 11px; transition: color 0.18s, background 0.18s, box-shadow 0.18s; position: relative;
}
.hrb-tab:hover { color: var(--hrb-navy-900); background: #fff; }
.hrb-tab[aria-selected="true"] {
	color: #fff; background: linear-gradient(135deg, var(--hrb-navy-900), var(--hrb-navy-700));
	box-shadow: 0 8px 18px -8px rgba(20,58,104,0.7);
}
.hrb-panel { display: none; animation: hrb-fade 0.3s ease; }
.hrb-panel.is-active { display: block; }
@keyframes hrb-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hrb-panel { animation: none; } }

.hrb-panel h2 { font-size: clamp(1.55rem, 3vw, 2.1rem); position: relative; padding-bottom: 0.6rem; }
.hrb-panel h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 3px; background: var(--hrb-flag); }
.hrb-panel h3 { font-size: 1.28rem; margin-top: 1.6rem; color: var(--hrb-navy-900); }

/* Provider / program cards */
.hrb-card {
	position: relative; overflow: hidden;
	border: 1px solid var(--hrb-line); border-radius: var(--hrb-radius);
	padding: 1.6rem 1.7rem; margin: 1.3rem 0; background: #fff; box-shadow: var(--hrb-shadow);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.hrb-card::before { content: ""; position: absolute; left: 0; top: 0; height: 100%; width: 4px; background: linear-gradient(180deg, var(--hrb-navy-700), var(--hrb-flag)); opacity: 0.9; }
.hrb-card:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -28px rgba(8,29,54,0.55); }
.hrb-card h3 { margin-top: 0; display: flex; align-items: center; gap: 0.5rem; }
.hrb-card__amount {
	display: inline-block; font-family: "Fraunces", serif; font-size: 1.28rem; font-weight: 700; color: #fff;
	background: linear-gradient(135deg, var(--hrb-flag), var(--hrb-flag-dark));
	border-radius: 10px; padding: 0.28rem 0.85rem; margin: 0.25rem 0 0.75rem; box-shadow: 0 8px 16px -8px rgba(215,38,61,0.6);
}
.hrb-card--expired { background: var(--hrb-bg-soft); }
.hrb-card--expired::before { background: #b9c2d3; }
.hrb-card--expired .hrb-card__amount { color: #6b7793; background: #e3e8f1; box-shadow: none; text-decoration: line-through; }

.hrb-list { margin: 0.5rem 0 1.1rem; padding: 0; list-style: none; }
.hrb-list li { position: relative; padding-left: 1.7rem; margin-bottom: 0.45rem; }
.hrb-list li::before {
	content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; border-radius: 2px;
	background: var(--hrb-navy-700); transform: rotate(45deg);
}

.hrb-steps { counter-reset: hrb-step; list-style: none; margin: 1rem 0; padding: 0; }
.hrb-steps li { position: relative; padding: 0.2rem 0 0.9rem 3.1rem; margin-bottom: 0.4rem; }
.hrb-steps li::before {
	counter-increment: hrb-step; content: counter(hrb-step);
	position: absolute; left: 0; top: 0; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 50%;
	background: linear-gradient(135deg, var(--hrb-navy-900), var(--hrb-navy-700)); color: #fff; font-weight: 700; font-size: 0.95rem;
	box-shadow: 0 8px 16px -8px rgba(20,58,104,0.7);
}

/* Buttons */
.hrb-btn {
	display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; cursor: pointer;
	font-family: "Inter", sans-serif; font-weight: 600; font-size: 0.95rem; line-height: 1.2;
	border-radius: 999px; padding: 0.68rem 1.3rem; border: 1.5px solid transparent;
	transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
.hrb-btn:hover { transform: translateY(-2px); }
.hrb-btn--primary { background: linear-gradient(135deg, var(--hrb-flag), var(--hrb-flag-dark)); color: #fff !important; box-shadow: 0 12px 24px -10px rgba(215,38,61,0.65); }
.hrb-btn--primary:hover { box-shadow: 0 16px 30px -10px rgba(215,38,61,0.75); }
.hrb-btn--ghost { background: #fff; color: var(--hrb-navy-900) !important; border-color: var(--hrb-line); }
.hrb-btn--ghost:hover { border-color: var(--hrb-navy-700); box-shadow: 0 12px 24px -14px rgba(20,58,104,0.6); }
.hrb-btn--sm { font-size: 0.87rem; padding: 0.52rem 1.05rem; }
.hrb-btn__arrow { transition: transform 0.16s ease; }
.hrb-btn:hover .hrb-btn__arrow { transform: translateX(3px); }
.hrb-btn-row { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.7rem 0 0.1rem; }

/* Final CTA band */
.hrb-cta {
	position: relative; overflow: hidden; margin-top: 3.2rem; border-radius: 24px; text-align: center;
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(30,91,214,0.5), transparent 55%),
		linear-gradient(135deg, var(--hrb-navy-950), var(--hrb-navy-800));
	padding: clamp(2.2rem, 5vw, 3.4rem);
}
.hrb-cta::before {
	content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
	background: linear-gradient(90deg, var(--hrb-flag) 0 38%, #fff 38% 62%, var(--hrb-navy-700) 62% 100%);
}
.hrb-page .hrb-cta h2 { color: #fff !important; }
.hrb-page .hrb-cta p { color: #cfe0f7 !important; }
.hrb-page .hrb-cta__phone {
	font-family: "Fraunces", serif; font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 700;
	color: #fff !important; display: inline-block; margin: 0.3rem 0 1.2rem; text-decoration: none;
}
.hrb-cta__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; }

/* NAP strip */
.hrb-nap { margin-top: 2.6rem; padding-top: 1.7rem; border-top: 1px solid var(--hrb-line); color: var(--hrb-muted); font-size: 0.95rem; text-align: center; }
.hrb-nap strong { color: var(--hrb-navy-900); }
.hrb-nap__services { font-weight: 600; color: var(--hrb-navy-900); margin-top: 0.6rem; letter-spacing: 0.02em; }

@media (max-width: 640px) {
	.hrb-tablist { position: static; gap: 0.3rem; }
	.hrb-tab { padding: 0.55rem 0.75rem; font-size: 0.88rem; }
}