/* ═══════════════════════════════════════════════════════════════════════════
   ARCULAT 2026 — fekete-fehér, tekintélyes, letisztult (tulaj, 2026-10-25)

   Csak a `bl_arculat2` kapcsolóval töltődik (inc/arculat.php), a fő stíluslap UTÁN:
   ez a fájl csak FELÜLÍR, a budailux.css változatlan. A színeket tokenekkel írja
   felül, így a bolt, a kalkulátor és a WooCommerce is követi.

   - Világos mód: tiszta fehér alap, fekete tinta, hideg szürkék; a barna kiemelés helyett fekete.
   - Címbetű: Jost (a logó betűje), vékonyabb súlyban; a felületi szöveg Archivo, a cikk talpas.
   - Formák: éles sarkok (2 px), hajszálvonalak, árnyék szinte semmi.
   - Hangulatkép nappal fekete-fehér; este marad a meleg fény (a sötét mód színei nem változnak).
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
	font-family: "Jost";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/jost-hu.woff2") format("woff2");
}

:root {
	--bl-fej: "Jost", "Futura", "Century Gothic", "Avenir Next", "Helvetica Neue", Arial, sans-serif;
	--bl-sarok: 2px;
	--r-kicsi: 2px;
	--r-gomb: 2px;
	--r-kep: 2px;
	--r-ablak: 4px;
	--fejlec-m: 4.5rem;
}

/* ── 1. Világos mód ─────────────────────────────────────────────────────── */

:root:not([data-theme="dark"]) {
	--wp--preset--color--alap: #FFFFFF;
	--wp--preset--color--felulet: #FFFFFF;
	--wp--preset--color--felulet-melyebb: #F4F4F5;
	--wp--preset--color--tinta: #0B0B0C;
	--wp--preset--color--tinta-lagy: #45474C;
	--wp--preset--color--halvany: #6F7278;
	--wp--preset--color--vonal: #E2E2E5;
	--wp--preset--color--vonal-lagy: #EDEDEF;
	--wp--preset--color--borostyan: #0B0B0C;
	--wp--preset--color--borostyan-halo: #F4F4F5;
	--gomb-hatter: #0B0B0C;
	--gomb-szoveg: #FFFFFF;
	--gomb-hover: #2B2C30;
	--uveg: rgba(255, 255, 255, .9);
	--arnyek-1: 0 1px 2px rgba(11, 11, 12, .05);
	--arnyek-2: 0 24px 48px -24px rgba(11, 11, 12, .22);
}
:root:not([data-theme="dark"]) ::selection { background: #0B0B0C; color: #FFFFFF; }
:root:not([data-theme="dark"]) .bl-olvaso { background: #0B0B0C; }
:root:not([data-theme="dark"]) .bl-cikk .wp-block-post-content a { text-decoration-color: color-mix(in srgb, #0B0B0C 35%, transparent); text-decoration-thickness: 1px; }
:root:not([data-theme="dark"]) .bl-cikk .wp-block-post-content a:hover { text-decoration-color: currentColor; }

/* A mindig sötét sávok (kategóriák, lábléc) világos módban semleges feketék, nem kékesek. */
:root:not([data-theme="dark"]) .bl-este,
:root:not([data-theme="dark"]) .bl-este .bl-tk__kep[style*="--bl-ejjel"] { background: #0B0B0C; }
:root:not([data-theme="dark"]) .bl-este { --wp--preset--color--alap: #0B0B0C; --alap: #0B0B0C; --wp--preset--color--vonal: #26272B; --vonal: #26272B; }
:root:not([data-theme="dark"]) .bl-lablec { background: #0B0B0C; --alap: #0B0B0C; --felulet: #141416; --vonal: #26272B; }

/* Hangulatkép: nappal fekete-fehér, mint egy építészeti fotó; este a meleg fény marad. */
:root:not([data-theme="dark"]) .bl-hero__nappal { filter: grayscale(1) contrast(1.05) brightness(1.03); }

/* ── 2. Betűk ───────────────────────────────────────────────────────────── */

body :is(h1, h2, h3, h4, h5, h6),
.bl-hero__cim, .bl-lapcim, .bl-cikk__cim, .bl-ck__cim, .bl-mobilmenu__fo a,
.bl-kategoria__nev, .bl-kalkulator strong, .bl-gyik summary, .bl-tk__nev, .bl-tj summary {
	font-family: var(--bl-fej);
	font-stretch: 100%;
}
body :is(h1, h2) { font-weight: 400; letter-spacing: -.022em; }
body :is(h3, h4) { font-weight: 500; letter-spacing: -.008em; }
body :is(h5, h6) { font-weight: 500; }

.bl-hero__cim {
	font-size: clamp(2.75rem, 5.4vw, 5.4rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.03em;
}
.bl-lapcim, .bl-cikk__cim { font-weight: 400 !important; line-height: 1.04 !important; letter-spacing: -.025em; }
.bl-szakasz > h2, .bl-szakasz__fej h2 { font-weight: 400; letter-spacing: -.022em; }
.bl-ck__cim { font-weight: 500; font-size: 1.22rem; line-height: 1.22; letter-spacing: -.005em; }
.bl-ck--kiemelt .bl-ck__cim { font-weight: 400; line-height: 1.08; letter-spacing: -.02em; }
.bl-kategoria__nev, .bl-kalkulator strong { font-weight: 500; }
.bl-tk__nev { font-weight: 450; letter-spacing: 0; }
.bl-gyik summary { font-weight: 450; }
.bl-mobilmenu__fo a { font-weight: 400; letter-spacing: -.015em; }

/* Felső címkék (rovat, szakasz): kicsi, nagybetűs, ritkított. */
.bl-ck__tema, .bl-cikk__tema a, .bl-lablec h2, .bl-mobilmenu__cim {
	font-family: var(--bl-fej);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}
:root:not([data-theme="dark"]) :is(.bl-ck__tema, .bl-cikk__tema a) { color: var(--tinta-lagy); }

/* ── 3. Gombok, menü, mezők ─────────────────────────────────────────────── */

.bl-gomb {
	font-family: var(--bl-fej);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	box-shadow: none;
}
.bl-gomb--nagy { font-size: .84rem; }
.bl-gomb--szellem { border-color: var(--tinta); }
.bl-gomb--szellem:hover { background: var(--tinta); color: var(--alap); }
.bl-gomb--szoveg { text-transform: none; letter-spacing: 0; font-size: var(--wp--preset--font-size--kicsi); }
.bl-tovabb { font-family: var(--bl-fej); font-weight: 500; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; text-underline-offset: .45em; text-decoration-thickness: 1px; }

.bl-fomenu > ul > li > a {
	font-family: var(--bl-fej);
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: .01em;
	color: var(--tinta);
	border-radius: 0;
}
.bl-fomenu > ul > li > a:hover, .bl-fomenu .van-almenu:hover > a { background: none; text-decoration: underline; text-underline-offset: .5em; text-decoration-thickness: 1px; }
.bl-fomenu > ul > li > a[aria-current="page"]::after { left: .85rem; right: .85rem; width: auto; height: 1px; margin: 0; bottom: .35rem; border-radius: 0; background: currentColor; box-shadow: none; }

/* Éles sarkok mindenütt, ahol eddig lekerekített „buborék" volt.
   Kivétel: a villanykapcsoló, a kosár darabszám-jelzője, a pöttyök és a csúszkák. */
.bl-ikon-gomb, .bl-csipek a, .bl-almenu, .bl-almenu ul a, .bl-almenu__mind, .bl-keresogomb, .bl-keresogomb kbd,
.bl-kereso__tetel, .bl-kereso__tetel img, .bl-kereso__tetel .bl-kereso__ikon, .bl-kereso__mind, .bl-kt img,
.bl-hero__kapcsolo, .bl-kalkulator, .bl-lapozo a, .bl-lapozo span, .bl-ures, .bl-keresomezo,
.bl-404 .wp-block-search__inside-wrapper, .bl-tj__doboz, .bl-gyors-valasz, .bl-abra img, .wp-block-image img,
.wp-block-table, .bl-tk__jel, .bl-tk__plusz, .bl-tk__kedvenc, .bl-szamjel, .bl-jelzes, .bl-jelenetek__fulek button,
.bl-jelenet__kep, .bl-pont__kartya, .bl-pont__kep, .bl-szoba__szinpad, .bl-kereso__cimkek span, .bl-okos-talalat,
.bl-bevezeto ol li, .bl-google__gomb, .bl-sutisav, .bl-figyelmeztetes, .bl-ablak--fiok .bl-fiok__fej::before,
.bl-szuro-gomb, .bl-szuro__jel, .bl-tl__abra, .bl-tl__vezerlo, .bl-gyorsadatok, .bl-tl__elfogyott, .bl-tl-sav,
.woocommerce-MyAccount-navigation a, .woocommerce form .input-text, .woocommerce-account input.input-text,
.wc-blocks-components-select .wc-blocks-components-select__container, .wc-block-cart-items__row .wc-block-cart-item__image img,
.bl-tl__belyeg, .bl-izzo-ajanlo__nev img, .bl-kalk, .bl-kalk__urlap, .bl-kalk :where(select, input[type="number"]),
.bl-kalk__foertek, .bl-fenyszin__svg, .bl-bemutato {
	border-radius: var(--bl-sarok);
}
.bl-jegyzet { border-radius: 0; }
.wc-block-components-notice-banner, .woocommerce-message, .woocommerce-info, .woocommerce-error,
.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input,
.wc-blocks-components-select .wc-blocks-components-select__select { border-radius: var(--bl-sarok) !important; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { border-radius: 0; outline-color: var(--tinta); }

.bl-kalkulator { border-color: var(--vonal); }
.bl-kalkulator:hover { border-color: var(--tinta); transform: none; }
.bl-kalkulator__ikon { color: var(--tinta); }
[data-theme="dark"] .bl-kalkulator__ikon { color: var(--akcent); }

/* ── 4. Fejléc és logó ──────────────────────────────────────────────────── */

.bl-fejlec { border-bottom-color: var(--vonal); }
.bl-logo--2026 { gap: 0; color: var(--tinta); }
.bl-logo2 { display: block; width: auto; height: 2.15rem; overflow: visible; }
.bl-logo2 path { fill: currentColor; }
.bl-lablec .bl-logo--2026 { color: #FFFFFF; }
@media (max-width: 47.99rem) { .bl-logo2 { height: 1.9rem; } }

/* ── 5. Hero és szakaszok ───────────────────────────────────────────────── */

.bl-hero__bevezeto { font-size: 1.15rem; line-height: 1.6; }
.bl-hero__kapcsolo { backdrop-filter: blur(10px); }
.bl-szakasz__fej { padding-bottom: 1rem; border-bottom: 1px solid var(--vonal); margin-bottom: 2rem; }
.bl-este .bl-szakasz__fej { border-bottom-color: #26272B; }
.bl-miert > ul { border-top: 0; padding-top: 0; }
.bl-miert h3 { font-size: 1.25rem; }

/* Szobajelenet: nappal ugyanúgy fekete-fehér, mint a hero; este a lámpák fénye színes. */
:root:not([data-theme="dark"]) .bl-jelenet__nappal { filter: grayscale(1) contrast(1.04) brightness(1.03); }
/* Akció-címke: világos módban fekete (a borostyán az esti fényé). */
:root:not([data-theme="dark"]) .bl-tk__jel--akcio { background: #0B0B0C; color: #FFFFFF; }
.bl-tk__jel { font-family: var(--bl-fej); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .66rem; }
.bl-gomb--uveg { border-color: var(--tinta); }
.bl-gomb--uveg:hover { background: var(--tinta); color: var(--alap); }

/* ── 6. A borostyán világos módban fekete (a meleg szín az esti fényé) ─────── */
:root:not([data-theme="dark"]) { --wp--preset--color--borostyan-jel: #0B0B0C; }
:root:not([data-theme="dark"]) .bl-gyors-valasz { background: var(--melyebb); border-color: var(--vonal); }
:root:not([data-theme="dark"]) .bl-szallitas-sav__csik span { background: #0B0B0C; }
:root:not([data-theme="dark"]) .bl-szuro__jel, :root:not([data-theme="dark"]) .bl-szamjel { color: #FFFFFF; }
:root:not([data-theme="dark"]) .bl-kereso__cimkek span { background: var(--melyebb); }

/* ── 7. Bolt: termékcím, ár, szűrő, pénztár ─────────────────────────────── */
.bl-tl__cim { font-family: var(--bl-fej); font-size: clamp(1.9rem, 1.3rem + 2vw, 3rem); font-weight: 400; font-stretch: 100%; line-height: 1.06; letter-spacing: -.022em; }
.bl-tl__ar { font-weight: 600; }
.bl-tk__ar { font-weight: 600; }
.bl-szuro__csoport summary, .bl-reszlet summary h2 { font-family: var(--bl-fej); font-weight: 500; }
.wc-block-cart .wc-block-cart__totals-title, .wc-block-components-title, .wc-block-components-checkout-step__title { font-family: var(--bl-fej) !important; font-weight: 500 !important; }
.woocommerce .button, .woocommerce-account button.button { font-family: var(--bl-fej); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: .8rem; }
.bl-kalk__szam { font-family: var(--bl-fej); font-weight: 400; letter-spacing: -.02em; }
@media (max-width: 760px) {
	.bl-hero .bl-gombsor .bl-gomb { font-size: .72rem; letter-spacing: .08em; white-space: nowrap; }
}

/* ── 8. Mobil: érintési célok ≥ 44 px, nincs kilógás, nincs iOS-nagyítás ──── */
/* A kártyagombok rajzolata marad, csak a megérinthető terület nő (láthatatlan perem). */
.bl-tk__kedvenc::after, .bl-tk__plusz::after, .bl-pont::after { content: ""; position: absolute; inset: -5px; }
.bl-szakasz__fej { flex-wrap: wrap; row-gap: .75rem; }
.bl-tovabb { display: inline-block; padding-block: .75rem; margin-block: -.75rem; white-space: nowrap; }
.bl-adattabla { width: 100%; table-layout: fixed; }
.bl-adattabla :is(th, td) { overflow-wrap: anywhere; }
.bl-lablec a:not(.bl-logo):hover { color: #FFFFFF; }
.bl-kereso__csoport { font-family: var(--bl-fej); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; }
@media (max-width: 760px) {
	.bl-rendezes select, .bl-szuro input[type="number"] { font-size: 16px; }
	.bl-lablec li + li { margin-top: 0; }
	.bl-lablec li a:not(.bl-logo) { display: inline-block; padding-block: .62rem; }
	.bl-cikk__tema a { display: inline-block; padding-block: .7rem; margin-block: -.7rem; }
}