/*
 * HW Plus CMS - "bootstrap-alap" tema SAJAT stilusa.
 *
 * MI VAN EBBEN A FAJLBAN
 *   Kizarolag az, amit a Bootstrap 5.3.8 onmagaban NEM tud:
 *     - a CMS eszkozonkenti lathatosagi kulcsai (mobil / tablet / desktop),
 *     - a savok hatterkepe es a hero/CTA fatyol,
 *     - a CMS terkoz- es meretkulcsainak lekepezese,
 *     - a szerkesztoi rich text tartalom tipografiaja,
 *     - a tulcsordulas elleni vedelem.
 *
 *   MINDEN MAS a Bootstrap sajat osztalyaival tortenik. Ha egy megjelenesre van
 *   Bootstrap-osztaly, azt hasznaljuk - sajat, barkacs megoldast nem irunk.
 *
 * MIERT NINCS BENNE SZIN- ES BETUDEFINICIO
 *   A tema SEMLEGES: a Bootstrap alap szinpalettajat es tipografiajat hasznalja.
 *   Az arculati ertekek (szin, betutipus, logo) TEMABEALLITASBOL fognak jonni -
 *   a manifeszt `beallitas_sema` kulcsa mar deklaralja oket. Beegetett
 *   ugyfelspecifikus ertek ITT SEM lehet (CLAUDE.md 4.1).
 *
 * BREAKPOINTOK - a Bootstrap sajat hatarai
 *   mobil   : < 768px   (a Bootstrap `md` alatt)
 *   tablet  : 768-991px (`md` .. `lg` kozott)
 *   desktop : >= 992px  (`lg` folott)
 */

/* ==========================================================================
   1. ALAPOK
   ========================================================================== */

/*
 * VIZSZINTES GORGETES elleni elsodleges vedelem.
 * A CMS-tartalomba kerulhet nagyon hosszu, szokoz nelkuli szo (URL, azonosito).
 * Enelkul az a szo szethuzna az oszlopot, es az egesz oldal gorgethetove valna.
 */
.tema-bootstrap-alap {
    overflow-x: hidden;
}

.tema-szovegtorzs,
.tema-oldal-cim,
.tema-cim {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Az ugras-a-tartalomra link, ha billentyuzettel fokuszt kap. */
.tema-ugras:focus {
    position: fixed;
    top: .5rem;
    left: .5rem;
    z-index: 1080;
    padding: .5rem 1rem;
    background: var(--bs-body-bg);
    border: 2px solid var(--bs-primary);
    border-radius: .375rem;
}

/* ==========================================================================
   2. ESZKOZONKENTI LATHATOSAG
   --------------------------------------------------------------------------
   A CMS `mobil_lathato` / `tablet_lathato` / `desktop_lathato` kulcsainak
   megfeleloje. FONTOS: a tartalom KIKERUL a HTML-be - a keresok es a
   kepernyoolvasok latjak -, csak az adott eszkozon nem jelenik meg. Igy a
   lathatosagi kapcsolo nem SEO-kockazat.
   ========================================================================== */

@media (max-width: 767.98px) {
    .tema-rejtve-mobil { display: none !important; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .tema-rejtve-tablet { display: none !important; }
}

@media (min-width: 992px) {
    .tema-rejtve-desktop { display: none !important; }
}

/* ==========================================================================
   3. SAV (szekcio)
   ========================================================================== */

/*
 * A SAV HATTERKEPE.
 * A kep a sav teljes teruletet kitolti, es DEKORATIV (`aria-hidden`), ezert a
 * tartalom mindig folotte all. A `z-index` nelkul a hatterkep eltakarna a
 * szoveget.
 */
.tema-sav-hatter {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.tema-sav-hatter .tema-kep,
.tema-sav-hatter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.tema-sav-tartalom {
    z-index: 1;
}

/*
 * A KERETEZETT HATTER (`hatter_szelesseg = tartalom`).
 *
 * Ilyenkor NEM a `<section>`, hanem a container viszi a hattert es a fuggoleges
 * terkozt. A savbol igy kartya lesz: a szin vagy a kep a tartalom szelesseget
 * koveti, es nem er a kepernyo szeleig.
 *
 * A `border-radius` teszi lathatova a hatart; az `overflow: hidden` (a markupban)
 * gondoskodik rola, hogy a hatterkep se logjon ki a lekerekitett sarkokon.
 */
.tema-sav-hatterkeret {
    border-radius: var(--bs-border-radius-lg, .5rem);
}

/*
 * A KERETEZETT HATTERNEL a container sajat vizszintes belso margojat MEGTARTJUK,
 * de a hatter a container TELJES szelessegen latszik. A tartalom igy nem tapad a
 * szines felulet szelehez.
 */
.tema-sav--hatterszel-tartalom.tema-sav--hatter-szin .tema-sav-hatterkeret,
.tema-sav--hatterszel-tartalom.tema-sav--hatter-kep .tema-sav-hatterkeret {
    padding-left: var(--bs-gutter-x, 1.5rem);
    padding-right: var(--bs-gutter-x, 1.5rem);
}

/*
 * HATTER NELKUL a keretezes nem jelent semmit: a `hatter_szelesseg` erteke ilyenkor
 * lathatatlan. Ezert a lekerekites es a belso margo NEM lep eletbe - kulonben a
 * szerkeszto egy olyan beallitas hatasat latna, amelynek nincs is tartalma.
 */
.tema-sav--hatter-nincs .tema-sav-hatterkeret {
    border-radius: 0;
}

/* Az EXTRA NAGY terkoz - a Bootstrap skalaja csak 5-ig (3rem) megy. */
.tema-terkoz-felul-extra { padding-top: 6rem; }
.tema-terkoz-alul-extra  { padding-bottom: 6rem; }

@media (max-width: 767.98px) {
    /* Mobilon a 6rem tul sok: a latogato csak ures kepernyot latna. */
    .tema-terkoz-felul-extra { padding-top: 3.5rem; }
    .tema-terkoz-alul-extra  { padding-bottom: 3.5rem; }
}

/*
 * A SAV VIZUALIS HATARA.
 * A hatter nelkuli savok kozott alapertelmezetten SEMMI nem latszik - a
 * szerkeszto nem tudja ellenorizni, hol kezdodik es hol vegzodik egy sav.
 * Ezert a hatter nelkuli savok NAGYON halvany elvalasztot kapnak. Ez tudatos,
 * dokumentalt donteés ennel az ELLENORZO alaptemanal.
 */
.tema-sav--hatter-nincs + .tema-sav--hatter-nincs {
    border-top: 1px solid var(--bs-border-color-translucent);
}

/* ==========================================================================
   4. BLOKKOK
   ========================================================================== */

/* Egymas alatti blokkok kozott mindig legyen levego. */
.tema-blokk + .tema-blokk {
    margin-top: 1.25rem;
}

/* A terkoz- es elvalaszto blokk sajat margoval dolgozik. */
.tema-blokk-terkoz + .tema-blokk,
.tema-blokk + .tema-blokk-terkoz,
.tema-blokk-elvalaszto + .tema-blokk,
.tema-blokk + .tema-blokk-elvalaszto {
    margin-top: 0;
}

/* --- A rich text tartalom tipografiaja ---------------------------------- */

.tema-szovegtorzs > *:last-child { margin-bottom: 0; }

.tema-szovegtorzs p,
.tema-szovegtorzs ul,
.tema-szovegtorzs ol,
.tema-szovegtorzs blockquote {
    margin-bottom: 1rem;
}

.tema-szovegtorzs h2,
.tema-szovegtorzs h3,
.tema-szovegtorzs h4,
.tema-szovegtorzs h5,
.tema-szovegtorzs h6 {
    margin-top: 1.75rem;
    margin-bottom: .75rem;
}

.tema-szovegtorzs > h2:first-child,
.tema-szovegtorzs > h3:first-child,
.tema-szovegtorzs > h4:first-child { margin-top: 0; }

.tema-szovegtorzs blockquote {
    padding: .75rem 1.25rem;
    border-left: .25rem solid var(--bs-border-color);
    color: var(--bs-secondary-color);
    font-style: italic;
}

.tema-szovegtorzs table {
    width: 100%;
    margin-bottom: 1rem;
    border-collapse: collapse;
}

.tema-szovegtorzs th,
.tema-szovegtorzs td {
    padding: .5rem .75rem;
    border: 1px solid var(--bs-border-color);
    vertical-align: top;
}

/*
 * A TABLAZAT TULCSORDULASA.
 * Egy szeles tablazat mobilon vizszintes gorgetést okozna az EGESZ oldalon.
 * A `display: block` + `overflow-x` a tablazatot SAJAT gorgetheto dobozba
 * teszi - az oldal maga nem gorog el.
 */
@media (max-width: 767.98px) {
    .tema-szovegtorzs table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* --- KEPBLOKK: a megjelenitesi meretkulcsok ------------------------------ */

.tema-blokk-kep--kicsi   .tema-kep { max-width: 320px; }
.tema-blokk-kep--kozepes .tema-kep { max-width: 640px; }
.tema-blokk-kep--nagy    .tema-kep { max-width: 100%; }
.tema-blokk-kep--teljes  .tema-kep { max-width: 100%; width: 100%; }

.tema-blokk-kep--teljes .tema-kep img { width: 100%; }

/* A `<picture>` alapbol inline: a mereteket az `inline-block` teszi ervenyesse. */
.tema-kep { display: inline-block; max-width: 100%; }
.tema-kep img { max-width: 100%; height: auto; }

/* Az object-fit kulcsok. `nincs` eseten SEMMIT nem allitunk. */
.tema-objektum-cover img   { object-fit: cover;   width: 100%; }
.tema-objektum-contain img { object-fit: contain; width: 100%; }
.tema-objektum-fill img    { object-fit: fill;    width: 100%; }

/* --- HERO es CTA -------------------------------------------------------- */

.tema-kiemelt {
    /* A minimalis magassag nelkul egy rovid cimu hero osszelapulna. */
    min-height: 8rem;
}

.tema-blokk-hero.tema-kiemelt          { min-height: 16rem; }
.tema-blokk-hero--kiemelt.tema-kiemelt { min-height: 22rem; }

.tema-kiemelt--hatter-nincs {
    background-color: var(--bs-tertiary-bg);
}

.tema-kiemelt-hatter {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.tema-kiemelt-hatter .tema-kep,
.tema-kiemelt-hatter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/*
 * A FATYOL (overlay).
 * A hatterkep folott allo sotet reteg. Enelkul a vilagos kepen a feher szoveg
 * olvashatatlan lenne - ez akadalymentessegi kerdes, nem dizajn.
 */
.tema-kiemelt-fatyol {
    position: absolute;
    inset: 0;
    display: block;
}

.tema-kiemelt-fatyol--gyenge  { background: rgba(0, 0, 0, .25); }
.tema-kiemelt-fatyol--kozepes { background: rgba(0, 0, 0, .45); }
.tema-kiemelt-fatyol--eros    { background: rgba(0, 0, 0, .65); }

/* Fatyol folott VILAGOS szoveg - kulonben nem olvashato. */
.tema-kiemelt--vilagos,
.tema-kiemelt--vilagos .tema-cim,
.tema-kiemelt--vilagos .tema-hero-alcim,
.tema-kiemelt--vilagos .tema-cta-szoveg {
    color: #fff;
}

/* --- ELVALASZTO --------------------------------------------------------- */

.tema-elvalaszto--rovid  { width: 25%; opacity: .5; }
.tema-elvalaszto--teljes { width: 100%; opacity: .3; }

.tema-elvalaszto--nincs { height: 1rem; }

/* --- TERKOZ ------------------------------------------------------------- */

.tema-terkoz--kicsi      { height: 1rem; }
.tema-terkoz--normal     { height: 2rem; }
.tema-terkoz--nagy       { height: 4rem; }
.tema-terkoz--extra_nagy { height: 6rem; }

@media (max-width: 767.98px) {
    .tema-terkoz--nagy       { height: 2.5rem; }
    .tema-terkoz--extra_nagy { height: 3.5rem; }
}

/* ==========================================================================
   5. FEJLEC, MENU, LABLEC
   ========================================================================== */

/* A HARMADIK MENUSZINT a legordulon belul, behuzva. */
.tema-menu-szint-3 {
    padding-left: 2rem;
    font-size: .9375rem;
}

.tema-menu-szint-3::before {
    content: "– ";
    opacity: .6;
}

/*
 * A LEGORDULO ERINTOKEPERNYON.
 * A `navbar-expand-lg` alatt a Bootstrap a legordulot beagyazott listakent
 * mutatja - ez erintessel is mukodik. Csak a behuzast allitjuk be.
 */
@media (max-width: 991.98px) {
    .tema-fomenu .dropdown-menu {
        border: 0;
        padding-left: 1rem;
        box-shadow: none;
    }
}

/* Az AKTIV MENUAG jelzese - a szerkeszto ebbol latja, mukodik-e a hierarchia. */
.tema-fomenu .nav-link.active {
    font-weight: 600;
}

/* A lablec- es a fejlec-extra menu behuzott alszintjei. */
.tema-lista-menu--szint-1 > li { margin-bottom: .35rem; }

.tema-lista-menu--szint-2,
.tema-lista-menu--szint-3 {
    padding-left: 1rem;
    margin-top: .25rem;
}

.tema-lista-menu a {
    text-decoration: none;
}

.tema-lista-menu a:hover,
.tema-lista-menu a:focus {
    text-decoration: underline;
}

.tema-lista-menu-csoport {
    font-weight: 600;
    color: var(--bs-secondary-color);
}

/* A fejlec-extra menu desktopon VIZSZINTES. */
@media (min-width: 992px) {
    .tema-fejlec-extra .tema-lista-menu--szint-1 {
        display: flex;
        gap: 1rem;
    }

    .tema-fejlec-extra .tema-lista-menu--szint-1 > li { margin-bottom: 0; }

    /* A fejlecben MASODIK szint nem fer el: ott kizarolag a felso szint latszik. */
    .tema-fejlec-extra .tema-lista-menu--szint-2 { display: none; }
}

/* ==========================================================================
   6. OLDALFEJLEC
   ========================================================================== */

.tema-oldal-kiemelt-kep img {
    width: 100%;
    max-height: 28rem;
    object-fit: cover;
}