/* BudaiLux — a négy kalkulátor közös stíluslapja.
   CSAK akkor töltődik be, ha van kalkulátor az oldalon (functions.php,
   render_block horog). Egy közös fájl négy helyett: mind a négy eszköz ugyanazt
   a mezőt, eredmény-dobozt és táblázatot használja. */

.bl-kalk {
	background: var(--wp--preset--color--felulet);
	border: 1px solid var(--wp--preset--color--vonal);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--lagy);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.bl-kalk__cim {
	font-size: var(--wp--preset--font-size--h2);
	margin: 0;
}

.bl-kalk__altcim {
	font-family: var(--wp--preset--font-family--adat);
	font-size: var(--wp--preset--font-size--apro);
	font-weight: 500;
	letter-spacing: 0;
	font-weight: 600;
	color: var(--wp--preset--color--halvany);
	margin: var(--wp--preset--spacing--20) 0 0;
}

.bl-kalk__bevezeto {
	color: var(--wp--preset--color--tinta-lagy);
	margin: 0;
}

/* ── Űrlap ───────────────────────────────────────────────────────────────── */

.bl-kalk__urlap {
	background: var(--wp--preset--color--alap);
	border: 1px solid var(--wp--preset--color--vonal-lagy);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.bl-kalk__mezok {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.bl-kalk__mezo {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	margin: 0;
}

.bl-kalk__mezo label,
.bl-kalk__valaszto legend {
	font-family: var(--wp--preset--font-family--cim);
	font-size: var(--wp--preset--font-size--kicsi);
	font-weight: 600;
	color: var(--wp--preset--color--tinta-lagy);
}

.bl-kalk :where(select, input[type="number"]) {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--alap);
	padding: 0.5rem 0.7rem;
	border: 1px solid var(--wp--preset--color--vonal);
	border-radius: 6px;
	background: var(--wp--preset--color--felulet);
	color: var(--wp--preset--color--tinta);
	/* Legalább 16px a beviteli mezőn, különben az iOS ránagyít fókuszkor,
	   és onnantól az egész oldal el van tolva. */
	min-height: 2.6rem;
}

.bl-kalk__valaszto {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.2rem;
	align-items: baseline;
}
.bl-kalk__valaszto legend {
	float: left;
	width: 100%;
	margin-bottom: 0.4rem;
}
.bl-kalk__valaszto label,
.bl-kalk__jelolo label {
	font-family: var(--wp--preset--font-family--cim);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--kicsi);
	color: var(--wp--preset--color--tinta-lagy);
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	cursor: pointer;
}
.bl-kalk__jelolo { margin: 0; }

/* ── Eredmény ────────────────────────────────────────────────────────────── */

.bl-kalk__eredmeny {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.bl-kalk__foertek {
	background: var(--wp--preset--color--borostyan-halo);
	border: 1px solid var(--wp--preset--color--borostyan-jel);
	border-radius: 10px;
	padding: var(--wp--preset--spacing--30);
	text-align: center;
}

.bl-kalk__szam {
	font-family: var(--wp--preset--font-family--cim);
	font-size: clamp(2.1rem, 6vw, 3rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--tinta);
	margin: 0;
	font-variant-numeric: tabular-nums;
}
.bl-kalk__szam span {
	font-size: 0.4em;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--wp--preset--color--borostyan);
	display: block;
	margin-top: 0.25em;
}

.bl-kalk__szam-alcim {
	font-family: var(--wp--preset--font-family--adat);
	font-size: var(--wp--preset--font-size--apro);
	color: var(--wp--preset--color--tinta-lagy);
	margin: 0.6rem 0 0;
}

.bl-kalk__magyarazat,
.bl-kalk__jegyzet-sor {
	font-size: var(--wp--preset--font-size--kicsi);
	color: var(--wp--preset--color--tinta-lagy);
	margin: 0;
}

.bl-kalk__hiba {
	color: var(--wp--preset--color--borostyan);
	font-size: var(--wp--preset--font-size--kicsi);
	margin: 0;
}

.bl-kalk__tabla { margin: 0; }
.bl-kalk__tabla table { min-width: 0; }
.bl-kalk__modszertan { margin: 0; }

/* ── Fényszín-szimulátor ─────────────────────────────────────────────────── */

.bl-fenyszin__jelenet { margin: 0; }

.bl-fenyszin__svg {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	/* Az arány a viewBox-ból jön; a rögzített arány megakadályozza, hogy a
	   kép betöltésekor lelökje az alatta lévő tartalmat. */
	aspect-ratio: 640 / 360;
	background: var(--wp--preset--color--felulet-melyebb);
}

.bl-fenyszin__urlap { padding-block: var(--wp--preset--spacing--20); }

.bl-fenyszin__csuszka input[type="range"] {
	width: 100%;
	/* A csúszka háttere maga a skála — így a mozgatás előtt is látszik,
	   milyen tartományban járunk. */
	background: linear-gradient(90deg, #FFB56B, #FFC98D, #FFD6A8, #FFEBD5, #FFF7EC, #F1F6FF);
	border-radius: 99px;
	height: 0.7rem;
	appearance: none;
	border: 1px solid var(--wp--preset--color--vonal);
}
.bl-fenyszin__csuszka input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--felulet);
	border: 2px solid var(--wp--preset--color--tinta);
	cursor: pointer;
}
.bl-fenyszin__csuszka input[type="range"]::-moz-range-thumb {
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--felulet);
	border: 2px solid var(--wp--preset--color--tinta);
	cursor: pointer;
}

.bl-fenyszin__minta {
	display: inline-block;
	width: 0.85rem;
	height: 0.85rem;
	border-radius: 3px;
	border: 1px solid var(--wp--preset--color--vonal);
	margin-right: 0.45rem;
	vertical-align: -1px;
}

/* Képernyőolvasónak szánt, vizuálisan rejtett szöveg (táblázat-feliratok). */
.bl-kalk .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Kristály- és műszaki adatlap ────────────────────────────────────────── */

/* Ugyanabban a fájlban él, mint a kalkulátorok: mindkettő csak akkor töltődik,
   ha van budailux/ blokk az oldalon (functions.php, render_block horog), és
   ugyanazt a táblázat- és doboz-nyelvet használják. */

.bl-adatlap {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.bl-adatlap__cim {
	font-size: var(--wp--preset--font-size--h3);
	margin: 0;
}

.bl-adatlap__tabla { margin: 0; }
.bl-adatlap__tabla table { min-width: 0; }

/* A csoportnév a táblázat feliratában él — így a képernyőolvasó is
   megkapja a szerkezetet, nem csak a látó felhasználó. */
.bl-adatlap__tabla caption {
	caption-side: top;
	text-align: left;
	font-family: var(--wp--preset--font-family--adat);
	font-size: var(--wp--preset--font-size--apro);
	font-weight: 500;
	letter-spacing: 0;
	font-weight: 600;
	color: var(--wp--preset--color--halvany);
	padding: 0 0 0.5rem;
}

/* Az érték legyen a hangsúlyos, a megnevezés a halkabb — fordítva, mint egy
   szokásos táblázatban. Itt az adatot keresi az olvasó. */
.bl-adatlap__tabla th[scope="row"] {
	font-family: var(--wp--preset--font-family--cim);
	font-weight: 400;
	color: var(--wp--preset--color--tinta-lagy);
	width: 45%;
}
.bl-adatlap__tabla td {
	font-family: var(--wp--preset--font-family--adat);
	font-size: var(--wp--preset--font-size--kicsi);
	color: var(--wp--preset--color--tinta);
}

.bl-adatlap__jegyzet {
	display: block;
	font-family: var(--wp--preset--font-family--cim);
	font-size: var(--wp--preset--font-size--apro);
	color: var(--wp--preset--color--halvany);
	margin-top: 0.25rem;
	line-height: 1.45;
}

.bl-adatlap__doc {
	margin: 0;
	font-size: var(--wp--preset--font-size--kicsi);
}
.bl-adatlap__doc a {
	font-family: var(--wp--preset--font-family--cim);
	font-weight: 600;
}

.bl-adatlap__forras { margin: 0; }

@media (max-width: 480px) {
	/* Kis kijelzőn a két oszlop egymás alá kerül, különben az érték elszorul. */
	.bl-adatlap__tabla table { min-width: 0; }
	.bl-adatlap__tabla :where(th[scope="row"], td) {
		display: block;
		width: auto;
		border-bottom: 0;
		padding-block: 0.2rem;
	}
	.bl-adatlap__tabla th[scope="row"] { padding-top: 0.7rem; }
	.bl-adatlap__tabla tr { display: block; border-bottom: 1px solid var(--wp--preset--color--vonal-lagy); }
	.bl-adatlap__tabla tr:last-child { border-bottom: 0; }
}

/* ── Bemutatóterem ───────────────────────────────────────────────────────── */

.bl-bemutato {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	background: var(--wp--preset--color--felulet);
	border: 1px solid var(--wp--preset--color--vonal);
	border-radius: 12px;
	padding: var(--wp--preset--spacing--40);
	box-shadow: var(--wp--preset--shadow--lagy);
}

.bl-bemutato__racs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--wp--preset--spacing--40);
}

.bl-bemutato__blokk { display: flex; flex-direction: column; gap: 0.5rem; }

.bl-bemutato__alcim {
	font-family: var(--wp--preset--font-family--adat);
	font-size: var(--wp--preset--font-size--apro);
	font-weight: 500;
	letter-spacing: 0;
	font-weight: 600;
	color: var(--wp--preset--color--halvany);
	margin: 0;
}

/* A cím a lap legfontosabb adata — ez az, amiért a látogató ide jött. */
.bl-bemutato__cim {
	font-family: var(--wp--preset--font-family--cim);
	font-size: var(--wp--preset--font-size--nagyobb);
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--tinta);
	margin: 0;
}

.bl-bemutato__link { margin: 0; font-size: var(--wp--preset--font-size--kicsi); }

.bl-bemutato__tabla { margin: 0; }
.bl-bemutato__tabla table { min-width: 0; }
.bl-bemutato__tabla th[scope="row"] {
	font-family: var(--wp--preset--font-family--cim);
	font-weight: 400;
	color: var(--wp--preset--color--tinta-lagy);
	padding-block: 0.45rem;
}
.bl-bemutato__tabla td {
	font-family: var(--wp--preset--font-family--adat);
	font-size: var(--wp--preset--font-size--kicsi);
	padding-block: 0.45rem;
	text-align: right;
}
.bl-bemutato__zarva { color: var(--wp--preset--color--halvany); }

.bl-bemutato__megkozelites { margin: 0; }
.bl-bemutato__megkozelites p { margin: 0 0 0.4rem; }
.bl-bemutato__megkozelites p:last-child { margin-bottom: 0; }

.bl-bemutato__nyitas {
	margin: 0;
	font-family: var(--wp--preset--font-family--cim);
	font-size: var(--wp--preset--font-size--kicsi);
	color: var(--wp--preset--color--borostyan);
}