/* ============================================================================
   Blog modul: a LÁTOGATÓI lapok KÖZÖS stíluslapja (Blog terv Spec 8., F3)
   ----------------------------------------------------------------------------
   Minden sablon ezt kapja (a sablon saját CSS-e: sablonok/{kulcs}.css). Bootstrap-osztály NINCS (a saját layoutok
   Bootstrap-mentesek). Színek CSAK tokenekből: a weboldal színsémájának változói, láncolt tartalékkal:
     - saját layout (Pénzügyilab: --ink, --surface, --green-700, --line, --r …),
     - központi layout a séma jeleivel (Bootstrap: --bs-body-color, --bs-link-color, --bs-border-color …),
     - végső tartalék: az örökölt szövegszín és áttetsző rétegek (color-mix), hogy világos és sötét lapon is AA legyen.
   Saját színkód (hex) szándékosan nincs.
   Blokkok: .blog (keret + tokenek) · .blog-gomb · .bl-cimke · .bl-jelveny · .blog-torzs (a tisztított törzs) ·
   .blog-rejtett (D11) · .blog-elonezet · .blog-lapozo · .ns-ures (üres állapot, a kánon szerinti alak).
   ============================================================================ */

.blog {
    --blog-ink: var(--ink, var(--bs-body-color, currentColor));
    --blog-hatter: var(--surface, var(--bs-tertiary-bg, color-mix(in srgb, currentColor 6%, transparent)));
    --blog-halvany: color-mix(in srgb, var(--blog-ink) 72%, transparent);
    /* Akcent: a saját layout sötétebb zöldje; a központi sémán a link színe a szöveg színe felé húzva (60/40), hogy a
       halvány hátteren is AA legyen, a séma árnyalatát megtartva. F6: a 78/22 a zöld-világos (4,21:1) és a piros-világos
       (3,89:1) sémán AA alatt maradt (mérve a tint- és a kártya-háttéren); 60/40-nel becsülve 5,50 és 5,21:1 */
    --blog-akcent: var(--green-700, color-mix(in srgb, var(--bs-link-color, currentColor) 60%, var(--bs-body-color, currentColor)));
    /* Az akcent-színű halvány háttér aránya (6 %: az akcent-szöveg rajta még AA; 12 %-on 4,28:1 volt) */
    --blog-tint: 6%;
    --blog-vonal: var(--line, var(--bs-border-color, color-mix(in srgb, currentColor 25%, transparent)));
    --blog-lekerekites: var(--r, .75rem);
    --blog-szelesseg: 72rem;
    --blog-szoveg-szelesseg: 46rem;

    box-sizing: border-box;
    width: 100%;
    max-width: var(--blog-szelesseg);
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
    color: var(--blog-ink);
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.blog *, .blog *::before, .blog *::after { box-sizing: border-box; }
.blog a { color: var(--blog-akcent); text-decoration: underline; text-underline-offset: .15em; }
.blog a:hover, .blog a:focus-visible { text-decoration-thickness: 2px; }
.blog a:focus-visible { outline: 2px solid var(--blog-akcent); outline-offset: 2px; border-radius: .2rem; }
/* Címsorok (F6): a központi layout `custom.css`-e minden h1/h2-re `font-size: 2rem !important`-ot, középre igazítást
   és alsó térközt ír. A blogban az igazítás és a térköz a blogé (a `.blog` alatti szelektor erősebb), a méret a
   `--blog-cim-meret` tokenből jön `!important`-tal (a központi `!important` csak így győzhető le; a saját layouton
   ugyanígy él). A sablon a címsor OSZTÁLYÁN a tokent állítja, nem a `font-size`-t. */
.blog :is(h1, h2) { text-align: start; padding-bottom: 0; font-size: var(--blog-cim-meret, 1.5rem) !important; }
.blog img { max-width: 100%; height: auto; }
/* A címek a lap szövegszínével (a központi layout custom.css-e a h1/h2-t a weboldal arany címszínére állítja, ami
   világos lapon 3,1:1; mérve) */
.blog h1, .blog h2, .blog h3, .blog h4 { color: var(--blog-ink); text-align: start; }

/* Lap-fejléc (lista-oldalak) */
.blog-fej { max-width: var(--blog-szoveg-szelesseg); margin: 0 0 2rem; }
.blog-fej__felirat { margin: 0 0 .25rem; font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--blog-halvany); }
.blog-fej__cim { margin: 0; --blog-cim-meret: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.15; }
.blog-fej__leiras { margin: .75rem 0 0; font-size: 1.0625rem; color: var(--blog-halvany); }
.blog-fej__vissza { margin: .75rem 0 0; font-size: .9375rem; }
.blog-szerzo-fej { margin: 0 0 2rem; }

/* Gomb (körvonalas: a szöveg színe az akcent, a háttér a lapé, így a kontraszt a lap kontrasztja) */
.blog-gomb { display: inline-block; padding: .55rem 1.1rem; border: 2px solid var(--blog-akcent);
    border-radius: 999px; color: var(--blog-akcent); font-weight: 600; text-decoration: none; line-height: 1.2; }
/* Hover: NEM háttér-tint (az akcent-szöveg azon 4,3:1 volt, mérve), hanem aláhúzás + vastagabb keret, a kontraszt marad */
.blog-gomb:hover, .blog-gomb:focus-visible { text-decoration: underline; text-decoration-thickness: 2px;
    box-shadow: inset 0 0 0 1px var(--blog-akcent); }

/* Kategória- és címke-csip */
.bl-cimke { display: inline-block; padding: .15rem .6rem; border-radius: 999px; font-size: .8125rem; font-weight: 600;
    line-height: 1.4; text-decoration: none; color: var(--blog-akcent);
    background: color-mix(in srgb, var(--blog-akcent) var(--blog-tint), transparent); }
.bl-cimke:hover, .bl-cimke:focus-visible { text-decoration: underline; box-shadow: inset 0 0 0 1px var(--blog-akcent); }
.blog .bl-cimke--halvany { color: var(--blog-ink); background: color-mix(in srgb, var(--blog-ink) 8%, transparent); }

/* Jelvény (Kiemelt, Videó) */
.bl-jelveny { display: inline-block; padding: .1rem .5rem; border: 1px solid var(--blog-vonal); border-radius: .35rem;
    font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--blog-halvany); }
.bl-jelveny--kiemelt { color: var(--blog-akcent); border-color: var(--blog-akcent); }

/* A bejegyzés tisztított törzse (D26: h2..h4, p, ul/ol, a, img, blockquote, table, pre, figure) */
.blog-torzs { max-width: var(--blog-szoveg-szelesseg); font-size: 1.0625rem; line-height: 1.7; }
.blog-torzs > :first-child { margin-top: 0; }
.blog-torzs h2, .blog-torzs h3, .blog-torzs h4 { line-height: 1.25; margin: 1.75em 0 .6em; }
.blog-torzs h2 { --blog-cim-meret: 1.5rem; }
.blog-torzs h3 { font-size: 1.25rem; }
.blog-torzs h4 { font-size: 1.0625rem; }
.blog-torzs p, .blog-torzs ul, .blog-torzs ol { margin: 0 0 1.1em; }
.blog-torzs img { display: block; border-radius: var(--blog-lekerekites); }
.blog-torzs figure { margin: 1.5em 0; }
.blog-torzs figcaption { margin-top: .5em; font-size: .9rem; color: var(--blog-halvany); }
.blog-torzs blockquote { margin: 1.5em 0; padding: .25em 0 .25em 1.25em; border-left: 4px solid var(--blog-akcent);
    font-style: italic; }
.blog-torzs pre { overflow: auto; padding: 1em; border-radius: var(--blog-lekerekites);
    background: color-mix(in srgb, var(--blog-ink) 7%, transparent); font-size: .9375rem; }
.blog-torzs table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .9375rem; }
.blog-torzs th, .blog-torzs td { padding: .5em .75em; border: 1px solid var(--blog-vonal); text-align: left; vertical-align: top; }
.blog-torzs th { background: color-mix(in srgb, var(--blog-ink) 7%, transparent); }

/* A nem látható bejegyzés doboza (D11) */
.blog-rejtett { max-width: var(--blog-szoveg-szelesseg); margin: 1.5rem 0 2rem; padding: 1.25rem 1.5rem;
    border: 1px solid var(--blog-vonal); border-left: 4px solid var(--blog-akcent); border-radius: var(--blog-lekerekites);
    background: color-mix(in srgb, var(--blog-ink) 4%, transparent); }
.blog-rejtett__cim { margin: 0 0 .35rem; font-weight: 700; font-size: 1.0625rem; }
.blog-rejtett__szoveg { margin: 0; }
.blog-rejtett__gomb { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.blog-rejtett__hint { font-size: .9rem; color: var(--blog-halvany); }

/* Az előnézet jelzése (a szerkeszteni jogosultnak) */
.blog-elonezet { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .85rem; margin: 0 0 1.5rem;
    padding: .75rem 1rem; border: 1px solid var(--blog-akcent); border-radius: var(--blog-lekerekites);
    background: color-mix(in srgb, var(--blog-akcent) var(--blog-tint), transparent); }
.blog-elonezet__jel { display: inline-block; padding: .2rem .6rem; border-radius: .35rem; font-size: .8125rem;
    font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blog-akcent);
    border: 2px solid var(--blog-akcent); }
.blog-elonezet__szoveg { font-weight: 500; }
.blog-elonezet__link { font-weight: 600; }

/* Lapozó */
.blog-lapozo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
    margin: 2.5rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--blog-vonal); }
.blog-lapozo__oldalak { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.blog-lapozo__oldal { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem;
    height: 2.25rem; padding: 0 .5rem; border-radius: .5rem; border: 1px solid var(--blog-vonal); text-decoration: none;
    font-weight: 600; color: var(--blog-ink); }
.blog-lapozo__oldal:hover, .blog-lapozo__oldal:focus-visible { background: color-mix(in srgb, var(--blog-akcent) var(--blog-tint), transparent); text-decoration: none; }
.blog-lapozo__oldal--aktiv { border-color: var(--blog-akcent); color: var(--blog-akcent);
    background: color-mix(in srgb, var(--blog-akcent) var(--blog-tint), transparent); }
.blog-lapozo__pont { display: inline-flex; align-items: center; min-width: 1.5rem; justify-content: center; color: var(--blog-halvany); }
.blog-lapozo__lep { font-weight: 600; }
.blog-lapozo__lep--tilt { color: var(--blog-halvany); }
.blog-nincs-tobb { margin: 2rem 0; color: var(--blog-halvany); }

/* Üres állapot (a kánon 4. pontjának alakja; a központi <x-ns::ures> megépüléséig a részlet rajzolja) */
.ns-ures { max-width: var(--blog-szoveg-szelesseg); margin: 2rem auto; padding: 2.5rem 1.5rem; text-align: center;
    border: 1px dashed var(--blog-vonal); border-radius: var(--blog-lekerekites); }
.ns-ures__cim { margin: 0 0 .5rem; font-size: 1.25rem; font-weight: 700; }
.ns-ures__szoveg { margin: 0 0 1.25rem; color: var(--blog-halvany); }
.ns-ures > :last-child { margin-bottom: 0; }

@media (max-width: 600px) {
    .blog { padding: 1.75rem 1rem 3rem; }
    .blog-lapozo { justify-content: center; }
}

/* ============================================================================
   Visszajelzés (F4; Spec 10., D12, D13, D24, D30): tetszik, hozzászólások, bejelentés. Csak téma-tokenek (a fenti
   --blog-* változók), saját színkód nincs; a gombok és a hover-állapotok AA (a .blog-gomb mintája: körvonalas,
   a hover aláhúzás + belső keret, nem háttér-tint). 390 px-en egy oszlop, a mezők a szülő szélességére (min-width: 0).
   ============================================================================ */

/* A horgony-célok (JS nélküli visszairányítás: #blog-tetszik, #blog-hozzaszolasok, #blog-hsz-N, #blog-bejelentes-N,
   #blog-hozzaszolas-urlap) a weboldal ragadó fejléce alól kiemelve */
.blog-tetszik, .blog-hozzaszolasok, .blog-hsz, .blog-bejelentes, .blog-hozzaszolas-urlap, .blog-hozzaszolasok__zarva {
    scroll-margin-top: 6rem; }
/* A `hidden` attribútum a saját (Bootstrap-mentes) layoutokon is rejt: a display-t adó osztályok (flex, grid) felett */
.blog [hidden] { display: none !important; }
/* A mezők kerete: a halvány vonal-token (1,2..1,6:1) helyett az ink-ből kevert, 3:1 feletti keret (V-012) */
.blog { --blog-mezo-keret: color-mix(in srgb, var(--blog-ink) 58%, transparent); }

/* Tetszik */
.blog-tetszik { margin: 2.5rem 0 0; }
.blog-tetszik__urlap { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; }
.blog-tetszik__gomb { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem 1.1rem;
    border: 2px solid var(--blog-akcent); border-radius: 999px; background: transparent; color: var(--blog-akcent);
    font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; }
.blog-tetszik__gomb:hover, .blog-tetszik__gomb:focus-visible { text-decoration: underline; text-decoration-thickness: 2px;
    box-shadow: inset 0 0 0 1px var(--blog-akcent); }
.blog-tetszik__gomb:focus-visible { outline: 2px solid var(--blog-akcent); outline-offset: 2px; }
/* Küldés alatt: folyamat-mutató; a JELÖLT (D34: disabled, nem nyomható) gomb teljes kontraszttal, tele szívvel */
.blog-tetszik__gomb[data-kuldes] { cursor: progress; opacity: .7; }
.blog-tetszik__gomb[data-jelolve] { cursor: default; opacity: 1; text-decoration: none; box-shadow: none;
    background: color-mix(in srgb, var(--blog-akcent) var(--blog-tint), transparent); }
.blog-tetszik__ikon { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; }
.blog-tetszik__gomb[data-jelolve] .blog-tetszik__ikon { fill: currentColor; }
.blog-tetszik__szam { font-weight: 600; color: var(--blog-halvany); }

/* Közös: állapot-üzenet (aria-live) és a flash */
.blog-visszajelzes__uzenet { display: block; margin: .5rem 0 0; font-size: .9375rem; font-weight: 600; }
.blog-visszajelzes__uzenet:empty { display: none; }
.blog-visszajelzes__uzenet[data-tipus="hiba"] { color: var(--blog-ink); }
.blog-visszajelzes__uzenet[data-tipus="hiba"]::before { content: "\26A0\00A0"; }
.blog-tetszik .blog-visszajelzes__uzenet { margin: 0; flex-basis: 100%; }
.blog-visszajelzes__flash { margin: 0 0 1rem; padding: .75rem 1rem; border: 1px solid var(--blog-akcent);
    border-left-width: 4px; border-radius: var(--blog-lekerekites); font-weight: 600;
    background: color-mix(in srgb, var(--blog-akcent) var(--blog-tint), transparent); }

/* Hozzászólások */
.blog-hozzaszolasok { max-width: var(--blog-szoveg-szelesseg); margin: 2.5rem 0 0; padding-top: 1.5rem;
    border-top: 1px solid var(--blog-vonal); }
.blog-hozzaszolasok__cim { margin: 0 0 1rem; --blog-cim-meret: 1.375rem; line-height: 1.25; }
.blog-hozzaszolasok__db { font-weight: 500; color: var(--blog-halvany); }
.blog-hozzaszolasok__ures { margin: 0 0 1.5rem; color: var(--blog-halvany); }
.blog-hsz-lista { margin: 0 0 2rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.blog-hsz { padding: 1rem 1.25rem; border: 1px solid var(--blog-vonal); border-radius: var(--blog-lekerekites);
    background: var(--blog-hatter); }
.blog-hsz--uj { border-color: var(--blog-akcent); }
.blog-hsz__fej { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0 0 .5rem; }
.blog-hsz__nev { font-weight: 700; }
.blog-hsz__ido { font-size: .875rem; color: var(--blog-halvany); }
/* A szöveg sima szöveg, a látogató sortörései megmaradnak (nem nl2br) */
.blog-hsz__szoveg { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }

/* Bejelentés (details: JS nélkül is nyílik) */
.blog-bejelentes { margin: .75rem 0 0; }
.blog-bejelentes__gomb { display: inline-block; cursor: pointer; font-size: .875rem; font-weight: 600;
    color: var(--blog-akcent); text-decoration: underline; text-underline-offset: .15em; list-style: none; }
.blog-bejelentes__gomb::-webkit-details-marker { display: none; }
.blog-bejelentes__gomb::before { content: "\2691\00A0"; }
.blog-bejelentes__gomb:hover, .blog-bejelentes__gomb:focus-visible { text-decoration-thickness: 2px; }
.blog-bejelentes__gomb:focus-visible { outline: 2px solid var(--blog-akcent); outline-offset: 2px; border-radius: .2rem; }
.blog-bejelentes__urlap { margin: .75rem 0 0; padding: 1rem 1.25rem; border: 1px solid var(--blog-vonal);
    border-radius: var(--blog-lekerekites); }

/* Űrlap-elemek (önhordó: a saját layoutok mező-stílusa nem ér ide) */
.blog-urlap { max-width: var(--blog-szoveg-szelesseg); }
.blog-hozzaszolas-urlap { padding: 1.25rem 1.5rem; border: 1px solid var(--blog-vonal); border-radius: var(--blog-lekerekites);
    background: var(--blog-hatter); }
.blog-urlap__cim { margin: 0 0 .5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
.blog-urlap__hint { display: block; margin: .35rem 0 0; font-size: .875rem; color: var(--blog-halvany); }
p.blog-urlap__hint { margin: .5rem 0 .75rem; }
.blog-urlap__hiba { margin: 0 0 .75rem; padding: .6rem .9rem; border: 1px solid var(--blog-ink); border-left-width: 4px;
    border-radius: var(--blog-lekerekites); font-weight: 600; }
.blog-mezo { display: flex; flex-direction: column; min-width: 0; margin: 0 0 .9rem; }
.blog-mezo label { margin: 0 0 .3rem; font-weight: 600; font-size: .9375rem; }
.blog-mezo input, .blog-mezo textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: .55rem .75rem;
    border: 1px solid var(--blog-mezo-keret); border-radius: calc(var(--blog-lekerekites) - 4px); background: transparent;
    color: inherit; font: inherit; line-height: 1.4; }
.blog-mezo input:focus-visible, .blog-mezo textarea:focus-visible { outline: 2px solid var(--blog-akcent); outline-offset: 1px;
    border-color: var(--blog-akcent); }
.blog-mezo textarea { resize: vertical; min-height: 5.5rem; }
.blog-mezo-sor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 1rem; }
@media (min-width: 640px) { .blog-mezo-sor { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.blog-jelolo { display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .5rem; }
.blog-jelolo input { flex: none; width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--blog-akcent);
    border: 1px solid var(--blog-mezo-keret); }
.blog-jelolo input:focus-visible { outline: 2px solid var(--blog-akcent); outline-offset: 2px; }
.blog-jelolo label { font-size: .9375rem; }
.blog-urlap__gombok { margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.blog-gomb--kuld { background: transparent; font: inherit; font-weight: 600; cursor: pointer; }
.blog-gomb--kuld:disabled { cursor: progress; opacity: .7; }
.blog-gomb:focus-visible { outline: 2px solid var(--blog-akcent); outline-offset: 2px; }
.blog-hozzaszolasok__zarva { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0;
    padding: 1rem 1.25rem; border: 1px dashed var(--blog-vonal); border-radius: var(--blog-lekerekites);
    color: var(--blog-halvany); }
/* A robot-csapda a látogató elől rejtve (nem display:none: azt több robot is felismeri) */
.blog-csapda { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }