/* ==========================================================================
   Közös réteg – minden márkánál ugyanaz, a színeket és betűket a
   márkafájl --b-* változói adják. A szülőtéma --wps-* változóit
   :root:root-tal írjuk felül, így a Customizer inline :root-ja sem
   tudja visszaírni.
   ========================================================================== */

:root:root {
	--wps-color-bg: var(--b-paper);
	--wps-color-text: var(--b-ink);
	--wps-color-primary: var(--b-action);
	--wps-color-secondary: var(--b-accent);
	--wps-color-text-muted: var(--b-muted);
	--wps-color-border: var(--b-rule);
	--wps-color-surface: var(--b-surface-2);
	--wps-font-family-base: var(--b-font-body);
}

body {
	font-size: var(--b-body-size, 1.0625rem);
	line-height: var(--b-body-lh, 1.65);
	font-feature-settings: 'kern' 1;
}

h1, h2, h3, h4,
.site-title,
.home-hero__title,
.archive-title,
.card__title,
.entry-title,
.article-cta__title,
.home-service h2,
.related-posts__header h2,
.author-box__name,
.empty-state h2 {
	font-family: var(--b-font-display);
	font-weight: var(--b-display-weight, 700);
	letter-spacing: var(--b-display-tracking, -0.02em);
	font-variation-settings: var(--b-display-axes, normal);
}

/* Számok egymás alatt: táblázatok, árak */
table, .entry-content td, .entry-content th, .b-num {
	font-variant-numeric: tabular-nums;
}

/* --- Sablonos díszítések ki --------------------------------------------- */
.home-hero__eyebrow,
.home-service__eyebrow,
.article-cta__eyebrow,
.article-rail-cta__eyebrow,
.related-posts__eyebrow,
.site-header__label,
.home-proof,
.article-toc .article-toc__eyebrow,
.author-box__eyebrow,
.home-hero::after,
.home-service::after,
.article-cta::after,
.entry-title::before {
	display: none;
}

.card__read-more span[aria-hidden],
.article-cta__button span[aria-hidden],
.article-rail-cta a span[aria-hidden],
.home-hero__topics a::after {
	display: none;
}

.entry-content .article-summary__eyebrow,
.entry-content .article-inline-cta__label,
.card__category,
.article-toc .article-toc__title,
.site-footer__heading,
.entry-meta-label {
	text-transform: none;
	letter-spacing: 0;
}

.card,
.card:hover,
.card:focus-within,
.article-cta__form-shell {
	box-shadow: none;
}

/* --- Logó (szöveges, a téma betűjével) ---------------------------------- */
.brand-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--b-ink);
	text-decoration: none;
	line-height: 1;
}

.brand-logo svg {
	flex: none;
	display: block;
}

.site-footer .brand-logo {
	color: inherit;
}

/* --- Gombok: egy közös forma, a márka adja a színt ----------------------- */
.site-header__client-link,
.home-hero__cta,
.home-service > a,
.article-cta__button,
.article-rail-cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: 0.75rem 1.25rem;
	color: var(--b-btn-ink);
	background: var(--b-btn);
	border: 0;
	border-radius: var(--b-radius-btn, 6px);
	font-family: var(--b-font-body);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	text-decoration: none;
	transition: background-color 160ms ease, transform 160ms ease;
}

.site-header__client-link:hover,
.home-hero__cta:hover,
.home-service > a:hover,
.article-cta__button:hover,
.article-rail-cta a:hover,
.site-header__client-link:focus-visible,
.home-hero__cta:focus-visible,
.home-service > a:focus-visible,
.article-cta__button:focus-visible,
.article-rail-cta a:focus-visible {
	color: var(--b-btn-ink);
	background: var(--b-btn-hover);
	border-color: transparent;
	transform: none;
}

.site-header__client-link {
	min-height: 2.5rem;
	padding: 0.5rem 1rem;
	font-size: 0.9375rem;
}

/* Sötét paneleken (ajánló, oldalsó ajánló) külön gombszín */
.home-service > a,
.article-cta__button,
.article-rail-cta a {
	color: var(--b-btn-dark-ink, var(--b-btn-ink));
	background: var(--b-btn-dark, var(--b-btn));
}

.home-service > a:hover,
.article-cta__button:hover,
.article-rail-cta a:hover,
.home-service > a:focus-visible,
.article-cta__button:focus-visible,
.article-rail-cta a:focus-visible {
	color: var(--b-btn-dark-ink, var(--b-btn-ink));
	background: var(--b-btn-dark-hover, var(--b-btn-hover));
}

/* Fókusz mindenhol jól látható */
:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--b-focus);
	outline-offset: 2px;
}

/* --- Főoldali hero: szöveg + márkavizuál -------------------------------- */
.home-hero {
	align-items: center;
}

.home-hero__visual {
	position: relative;
	z-index: 1;
	min-width: 0;
}

@media (min-width: 900px) {
	.home-hero {
		grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
	}
}

/* --- Cikk-tartalom -------------------------------------------------------- */
.entry-content a {
	color: var(--b-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.entry-content a:hover {
	text-decoration-thickness: 2px;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375em;
}

@media (min-width: 720px) {
	.entry-content table {
		display: table;
	}
}

.entry-content th {
	background: transparent;
}

.entry-content th,
.entry-content td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--b-rule);
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	font-weight: 700;
	border-bottom: 2px solid var(--b-ink);
}

.entry-content mark {
	color: inherit;
	background: var(--b-mark, transparent);
	padding: 0 0.15em;
}

/* --- Láthatatlan mozgás, ha a felhasználó ezt kéri ---------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

/* --- Kalkulátoros / űrlapos oldal: teljes szélesség --------------------- */
.brand-wide .page-content-shell,
.brand-wide .entry-content {
	max-width: var(--wps-grid-width);
}

.brand-wide .entry-header {
	display: block;
	max-width: var(--wps-grid-width);
	margin-bottom: clamp(0.5rem, 2vw, 1rem);
	padding-bottom: 0;
	border-bottom: 0;
}

.brand-wide .entry-title {
	max-width: 22ch;
}

.brand-wide .zm-head h2,
.brand-wide .lf-head h2 {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.brand-wide .zm-wrap,
.brand-wide .lf-wrap {
	max-width: none;
}

.brand-wide .zm-lead,
.brand-wide .lf-lead {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

/* --- Mobil fejléc: a logó, a keresés és a menü férjen el ---------------- */
@media (max-width: 600px) {
	.site-header__client-link {
		display: none;
	}

	.site-header__inner {
		gap: 0.75rem;
	}
}

@media (max-width: 380px) {
	.zm-logo { font-size: 1.35rem; }
	.szo-logo__word, .rf-logo__word { font-size: 1.25rem; }
}


/* ==========================================================================
   Rezsifelező – „Hőkamera és számla”
   A hőkamera színlogikája a jelentés: narancs = veszteség, kék = megtakarítás.
   Egy betűcsalád (Archivo), szélesített címekkel, táblázatos számokkal.
   ========================================================================== */

:root {
	--b-ink: #121A2B;          /* tinta: szöveg, sötét szekciók */
	--b-action: #2546E8;       /* megtakarítás-kék: linkek */
	--b-paper: #F3F5F7;        /* hideg törtfehér */
	--b-surface: #FFFFFF;
	--b-surface-2: #E8ECF1;
	--b-heat: #FF5A1F;         /* hőveszteség – gombháttér tinta szöveggel */
	--b-heat-text: #C2410C;    /* narancs, ha szöveg */
	--b-mark: #FFC83D;
	--b-muted: #5B6577;
	--b-rule: #D5DBE3;
	--b-accent: #FF5A1F;
	--b-link: #2546E8;
	--b-focus: #2546E8;

	--b-btn: #FF5A1F;
	--b-btn-ink: #121A2B;
	--b-btn-hover: #FF7A45;
	--b-radius-btn: 4px;

	--b-font-display: 'Archivo Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--b-font-body: 'Archivo Variable', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--b-display-weight: 760;
	--b-display-tracking: -0.02em;
	--b-display-axes: 'wdth' 112;
	--b-body-size: 1.0625rem;
	--b-body-lh: 1.62;
}

body {
	font-variation-settings: 'wdth' 100;
}

/* --- Logó ----------------------------------------------------------------- */
.rf-logo__mark {
	width: 2.1rem;
	height: 2.1rem;
}

.rf-logo__word {
	display: inline-flex;
	align-items: center;
	font-family: var(--b-font-display);
	font-size: 1.45rem;
	font-weight: 820;
	font-variation-settings: 'wdth' 118;
	letter-spacing: -0.025em;
	line-height: 1;
}

.rf-logo__word > span:last-child {
	color: var(--b-action);
}

.site-footer .rf-logo__word > span:last-child {
	color: #8FA5FF;
}

.rf-logo__cut {
	display: inline-block;
	width: 2px;
	height: 1.15em;
	margin: 0 0.18em;
	background: currentColor;
	opacity: 0.55;
}

/* --- Fejléc --------------------------------------------------------------- */
.site-header {
	background-color: color-mix(in srgb, var(--b-paper) 94%, transparent);
}

/* --- Hero ------------------------------------------------------------------ */
.home-hero {
	padding: clamp(1.5rem, 5vw, 4rem) 0 clamp(2rem, 5vw, 3.5rem);
	background: transparent;
	border: 0;
	border-radius: 0;
	overflow: visible;
	gap: clamp(2rem, 5vw, 4rem);
}

.home-hero__title {
	max-width: 13ch;
	font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
	font-weight: 820;
	font-variation-settings: 'wdth' 118;
	letter-spacing: -0.035em;
	line-height: 0.98;
}

.home-hero__intro {
	max-width: 46ch;
	color: var(--b-muted);
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
}

.home-hero__cta {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	min-height: 3.25rem;
	padding-inline: 1.5rem;
	font-size: 1.0625rem;
}

.rf-thermo {
	margin: 0;
}

.rf-thermo svg {
	display: block;
	width: 100%;
	height: auto;
	max-width: 28rem;
	margin-inline: auto;
}

.rf-thermo__legend {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin-top: 1rem;
	color: var(--b-muted);
	font-size: 0.9375rem;
}

.rf-thermo__key {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.rf-thermo__key::before {
	content: '';
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 2px;
	background: var(--b-heat);
}

.rf-thermo__key--cool::before {
	background: var(--b-action);
}

/* Az egyetlen mozgás: a jobb fél kihűl */
.rf-thermo__cool {
	animation: rf-cool 1100ms 600ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes rf-cool {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- Kártyák --------------------------------------------------------------- */
.archive-title {
	font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
}

.card {
	background: var(--b-surface);
	border: 1px solid var(--b-rule);
	border-radius: 6px;
}

.card:hover,
.card:focus-within {
	border-color: var(--b-ink);
	transform: none;
}

.card__category a {
	color: var(--b-heat-text);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

.card__title {
	font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem);
	font-variation-settings: 'wdth' 106;
	line-height: 1.2;
}

.card__read-more {
	color: var(--b-ink);
	font-weight: 700;
}

/* --- Sötét panelek ---------------------------------------------------------- */
.home-service,
.article-cta {
	background: var(--b-ink);
	border-radius: 6px;
}

.home-service :focus-visible,
.article-cta :focus-visible {
	outline-color: var(--b-mark);
}

/* --- Cikk ------------------------------------------------------------------- */
.entry-title {
	font-weight: 800;
	font-variation-settings: 'wdth' 115;
	letter-spacing: -0.035em;
}

.entry-content h2 {
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.85rem);
	font-variation-settings: 'wdth' 108;
}

.entry-content strong {
	font-weight: 700;
}

/* --- Lábléc ---------------------------------------------------------------- */
.site-footer {
	color: #D3D9E4;
	background: var(--b-ink);
	border-top: 0;
}

.site-footer a,
.site-footer .footer-menu a {
	color: #FFFFFF;
}

.site-footer__intro,
.site-footer__copyright {
	color: #B9C1CF;
}

.site-footer :focus-visible {
	outline-color: var(--b-mark);
}