/* reanimatio_new.css - Bootstrap 5 alapú redesign */

/* ══════════════════════════════════════════════════════════════════════
   TIPOGRÁFIAI DESIGN TOKENEK (2026-08-06, user által megadott terv alapján)
   ══════════════════════════════════════════════════════════════════════
   Ez a blokk a projekt EGÉSZ betűtípus-rendszerét egy helyen tartja - ha
   valaha másik betűtípusra vagy másik méret-skálára szeretnénk váltani,
   elég ITT módosítani, nem kell végigvadászni a fájlt.

   FONTOS: a méretek szándékosan PIXELBEN vannak megadva, nem rem-ben. A
   projekt egy régi, admin-témás CSS-köteg miatt (lásd
   /assets/.../bootstrap/css/bootstrap.min.css, ami a publikus oldalakon is
   betöltődik - külön takarítási tétel, lásd DEV-LOG) a <html> gyökér
   font-size-a NEM a böngésző szabványos 16px-e, hanem 10px (62.5%) - ha a
   tokeneket rem-ben adnánk meg, az a gyökér-mérettől függően csúszna el.
   Pixelben megadva a méretek MINDIG pontosan annyik lesznek, amennyinek
   szánjuk, függetlenül ettől a háttérben meghúzódó problémától. */
:root {
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --fs-hero: 56px;         /* Hero/Carousel H1 (kiemelt főcím) */
    --fs-hero-mobile: 32px;  /* Hero H1 mobil nézetben */
    --fs-h1: 40px;           /* Oldalszintű főcím */
    --fs-h2: 32px;           /* Szekciócím */
    --fs-h3: 24px;           /* Kártya/modul cím */
    --fs-h4: 20px;           /* Alkategória / kisebb kiemelés (pl. kártya-cím) */
    --fs-lead: 18px;         /* Bevezető bekezdés / alcím */
    --fs-body: 16px;         /* Törzsszöveg */
    --fs-small: 14px;        /* Kiegészítő szöveg, lábléc elemek */
    --fs-badge: 12px;        /* Overline / apró, nagybetűs címke */
    --fs-button: 15px;       /* Gombszöveg */
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
    line-height: 1.6;
    padding-top: 0;
}

/* Alap címsor-hierarchia - eddig csak a szín volt beállítva, méret/vastagság
   nélkül, ezért minden cím ad-hoc, egymástól független méretet kapott
   szerte a fájlban (ez okozta a "zűrzavaros" hatást). Az itt megadott
   alapértékeket a lentebbi, elem-specifikus szabályok felülírhatják, de
   mostantól van egy koherens alapréteg. */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    color: #1a1a2e;
}
h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
h2 { font-size: var(--fs-h2); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
/* h5: a Bootstrap .card-title alapból h5-öt használ - ez adja a
   kártya-címeknek (pl. "Oktatói Zóna", "Titkárság") is az egységes
   méretet, a h4-gyel megegyező szinten. */
h4, h5 { font-size: var(--fs-h4); font-weight: 600; line-height: 1.4; }
h6 { font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }

/* 2026-08-06: a Bootstrap 5 CDN saját form-control/btn font-size-a rem-ben
   van megadva, ami a legacy 10px gyökér-méret miatt (lásd a fájl elején
   lévő megjegyzést) minden gombot, legördülő menüt és beviteli mezőt
   10px-esre zsugorított a teljes oldalon - ez eddig kimaradt a
   tipográfia-rendezésből, mert nem cím és nem is egy egyedi class, hanem
   a Bootstrap saját alap-szabálya. Explicit méret + betűtípus mindenre. */
.btn, .form-control, .form-select, select, input, textarea, button {
    font-family: var(--font-primary);
    font-size: var(--fs-body);
}
/* Input placeholder szövegek (pl. "mm/dd/yyyy" a dátum-mezőkben, "keresés"
   a fejléc kereső mezőjében) - kisebb, halványabb segédszöveg, mint a
   ténylegesen begépelt tartalom. */
input::placeholder,
textarea::placeholder,
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
input::-moz-placeholder,
textarea::-moz-placeholder,
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    font-size: 11px !important;
    font-family: var(--font-primary);
}
/* 2026-08-06: a "Szakmai anyagok" 3 kártyája (Főoldal) h6-ot használ
   kártya-címként (nem h5-öt, mint az Oktatói Zóna/Titkárság kártyák) -
   emiatt ugyanaz a "kártya-cím" szerep 14px-en jelent meg 20px helyett,
   ami eklektikusnak hatott a többi kártya mellett. Itt visszaigazítjuk a
   többi kártya-címmel megegyező szintre, tag-től függetlenül. */
.card h6.fw-semibold {
    font-size: var(--fs-h4);
}
/* Mobilon a "Szakmai anyagok" 3 kártyája egymás alá kerül (nem egymás
   mellett, mint desktopon) - ott a 20px/félkövér cím user-visszajelzés
   szerint túl nehéznek/nagynak hatott ebben a "listaszerű" elrendezésben.
   Mobilon ezért visszavesszük a törzsszöveg alapméretére, félkövér
   nélkül - a fw-semibold Bootstrap utility !important-tal ír felül,
   ezért itt is !important kell a felülíráshoz. */
@media (max-width: 991.98px) {
    .card h6.fw-semibold {
        font-size: var(--fs-body);
        font-weight: 400 !important;
    }
}
/* A "Szakmai anyagok" kártyák ikonjai (text-primary) valamiért nem az
   ikon-elem tényleges szélességén belül, hanem egy annál jóval szélesebb
   dobozon belül, balra igazítva jelentek meg - a szülő text-center-je
   emiatt nem tudta középre hozni a tényleges glyph-et. Explicit
   inline-block + text-align:center az ikon elemen magán megoldja. */
.card .text-primary.fa-2x {
    display: inline-block;
    text-align: center;
}

/* Bootstrap .lead osztály - eddig sehol nem volt tokenizálva, a natív
   Bootstrap alapérték (1.25rem, a 10px gyökérrel 12.5px) érvényesült,
   ami sokkal kisebb, mint egy "kiemelt bevezető szöveg"-hez illene. */
.lead {
    font-size: var(--fs-lead);
    font-weight: 400;
}

/* 2026-08-06: mobilon (lg alatt) a h1/h2 a 40px/32px-es asztali méret
   túl nagynak bizonyult - főleg a hosszabb, több sorra törő aloldal-
   címeknél (pl. egy hosszú kurzusnév a /course/... oldalon) szinte az
   egész képernyőt elfoglalta, és átfedésbe került a sticky nav-val.
   ~20%-os csökkentés mobilon, minden más (h3 és lejjebb) változatlan. */
@media (max-width: 991.98px) {
    h1 { font-size: 32px; }
    h2 { font-size: 26px; }
    /* .course-type-heading ("Milyen képzést keresel?") és az
       organization-accordion címei saját, osztály-alapú szabállyal
       rendelkeznek, ami KÉSŐBB szerepel a fájlban, mint ez a mobil
       felülírás - azonos specificitásnál a későbbi forrás-sorrend nyer,
       ezért enélkül a !important nélkül nem érvényesülne itt a mobil
       méret. */
    .course-type-heading,
    #organizationAccordion .accordion-button .fw-bold {
        font-size: 26px !important;
    }
}

/* Breadcrumb (Főoldal / Tanfolyamok / ...) mobilon mindenhol elhagyható -
   kevés hozzáadott érték egy kis képernyőn, viszont helyet foglal a
   cím felett. */
@media (max-width: 991.98px) {
    .breadcrumb {
        display: none !important;
    }
}

/* Láthatóság javítása: a legacy Bootstrap 3-as bootstrap.min.css-ben van
   egy sima ".fade{opacity:0}" szabály (nagyobb specificitással/később a
   cascade-ben, mint a BS5 saját ".fade.show" szabálya), ami miatt BÁRMELY
   BS5 ".fade" komponens (modal, tab-pane, stb.) "show"/"active" állapotban
   is opacity:0 (láthatatlan) maradt, amíg külön nem írtuk felül. Ez a
   hiba eddig 4x bukkant fel külön-külön (jelentkezési/támogatási modal,
   RENDSZERÜZENET admin popup, most a /professionalinformation tabok) -
   ezért egy általános ".fade.show" szabállyal fixáljuk egyszer, minden
   jelenlegi és jövőbeli komponensre. */
.fade.show {
    opacity: 1 !important;
}

/* A jelentkezési űrlap "Elolvasom" linkkel nyíló tájékoztató doboza -
   ez a szabály eredetileg a régi reanimatio.css-ben volt, de az a fájl
   az új (BS5) layout-tal már nem töltődik be, ezért a doboz alapból
   (helytelenül) látszott, "Elolvasom" nélkül is. */
div#mustReadWrapper {
    position: relative;
    max-height: auto;
    overflow-y: auto;
    display: none;
    margin-bottom: 30px;
    background: #265739;
    color: #ffffff;
}
div#mustReadWrapper p,
div#mustReadWrapper h1 {
    /* !important kell, mert a globális "h1,h2,h3...{color:#1a1a2e!important}"
       szabály különben felülírná */
    color: #ffffff !important;
}

/* Jelentkezési/támogatási modal header bezáró gombja: jobb felső sarokba
   rendezve, feltűnőbb (nagyobb, keretezett, "Bezár" felirattal a × mellett) -
   eddig csak egy alapértelmezett, stílus nélküli böngésző-gomb volt. */
#ApplyModal .form-header,
#SupportModal .support-form-header,
#MemberApplyFormModal .member-form-header {
    position: relative;
}
#ApplyModal .form-header .close,
#SupportModal .support-form-header .close,
#MemberApplyFormModal .member-form-header .close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 2px solid #1a1a2e;
    border-radius: 0.5rem;
    padding: 0.4rem 1rem;
    opacity: 1;
    cursor: pointer;
    z-index: 10;
    color: #1a1a2e;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
#ApplyModal .form-header .close .close-icon,
#SupportModal .support-form-header .close .close-icon,
#MemberApplyFormModal .member-form-header .close .close-icon {
    font-size: var(--fs-h4);
    font-weight: 700;
    line-height: 1;
    color: inherit;
}
#ApplyModal .form-header .close .close-text,
#SupportModal .support-form-header .close .close-text,
#MemberApplyFormModal .member-form-header .close .close-text {
    font-size: var(--fs-small);
    font-weight: 600;
    color: inherit;
}
#ApplyModal .form-header .close:hover,
#SupportModal .support-form-header .close:hover,
#MemberApplyFormModal .member-form-header .close:hover {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Hibajegyzék #22 kieg. (2026-08-25): a lábléc "Bezár" gombja (.btn.btn-close,
   "Bezár" szöveg a belsejében) a Bootstrap 5 .btn-close saját CSS-ét kapta
   (background-image-es × + em-alapú width/height, kifejezetten szöveg
   NÉLKÜLI gombhoz tervezve) - ez ütközött a bele írt "Bezár" szöveggel, az
   × és a szöveg egymásra csúszott/túl közel volt. A háttérkép-× kikapcsolva,
   helyette ugyanaz a bordered-box stílus, mint a fejléc bezáró gombjánál. */
#ApplyModal .modal-footer .btn-close,
#SupportModal .modal-footer .btn-close {
    background-image: none;
    width: auto;
    height: auto;
    display: inline-flex;
    align-items: center;
    background-color: #fff;
    border: 2px solid #1a1a2e;
    border-radius: 0.5rem;
    padding: 0.4rem 1rem;
    opacity: 1;
    color: #1a1a2e;
}
#ApplyModal .modal-footer .btn-close .close-text,
#SupportModal .modal-footer .btn-close .close-text {
    font-size: var(--fs-small);
    font-weight: 600;
    color: inherit;
}
#ApplyModal .modal-footer .btn-close:hover,
#SupportModal .modal-footer .btn-close:hover {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Mobilon (lg alatt) a fejléc márka-infó sora (Társaság neve/nyilvántartási
   szám/székhely) + a "Teszt kitöltés" gomb feleslegesen sok helyet
   foglalt (kb. 145px) - ezek mobilon eltűnnek (a footerben/lábán úgyis ott
   az info), csak a cím marad, max 40px magas sávban. Desktopon (lg+)
   változatlan. */
@media (max-width: 991.98px) {
    #ApplyModal .form-header,
    #SupportModal .support-form-header,
    #MemberApplyFormModal .member-form-header {
        min-height: 40px;
        max-height: 40px;
        display: flex;
        align-items: center;
        padding: 0 4.5rem 0 1rem;
        overflow: hidden;
    }
    #ApplyModal .form-header .container > .row,
    #ApplyModal .form-header .container > br,
    #ApplyModal .form-header #testFillSignupForm,
    #SupportModal .support-form-header .container > .row,
    #SupportModal .support-form-header .container > br,
    #MemberApplyFormModal .member-form-header .container > .row,
    #MemberApplyFormModal .member-form-header .container > br {
        display: none;
    }
    #ApplyModal .form-header .modal-title,
    #SupportModal .support-form-header .modal-title,
    #MemberApplyFormModal .member-form-header .modal-title {
        font-size: var(--fs-h4);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #ApplyModal .form-header .close,
    #SupportModal .support-form-header .close,
    #MemberApplyFormModal .member-form-header .close {
        top: 50%;
        right: 0.75rem;
        transform: translateY(-50%);
        padding: 0.3rem 0.6rem;
    }
    /* a Bezár szó mobilon elrejtve, csak a × marad - de KIZÁRÓLAG a fejléc
       bezáró gombján, aminek van .close-icon (×) tartalék span-je. A
       lábléc .btn-close gombjának (Hibajegyzék #22 kieg.) nincs
       .close-icon-je - ott a "Bezár" szöveg elrejtése egy teljesen üres,
       láthatatlan gombot eredményezne (a háttérkép-× is ki van kapcsolva
       nála), ezért a lábléc gombján a szöveg mobilon is látható marad. */
    #ApplyModal .form-header .close-text,
    #SupportModal .support-form-header .close-text,
    #MemberApplyFormModal .member-form-header .close-text {
        display: none;
    }
}

/* "Társaság" oldal (organization.php): a régi kézzel írt "+/-" accordion
   helyett natív Bootstrap 5 .accordion, a site színeire hangolva (alapból
   BS5-kék lenne a fókusz/nyitott állapot). */
.organization-accordion,
#organizationAccordion {
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
    border-radius: 0.75rem;
    overflow: hidden;
}
#organizationAccordion .accordion-button {
    padding: 1.25rem 1.5rem;
}
/* Hibajegyzék #38 (2026-08-25): a fül-címkék --fs-h2-vel (32px)
   feleslegesen nagyok voltak, feleslegesen sok helyet foglaltak -
   --fs-h4-re (20px) csökkentve, ez már jobban illik egy accordion-fül
   címkéjéhez (a --fs-h2 szekció-címeknek való, nem ennek). */
#organizationAccordion .accordion-button .fw-bold {
    font-size: var(--fs-h4);
}
#organizationAccordion .accordion-button .text-muted {
    font-size: var(--fs-body);
}
#organizationAccordion .accordion-button:not(.collapsed) {
    background-color: #9eb0cc;
    color: #1a1a2e;
    box-shadow: inset 0 -1px 0 #e5e7eb;
}
#organizationAccordion .accordion-button:focus {
    box-shadow: inset 0 -1px 0 #e5e7eb;
    border-color: transparent;
}
#organizationAccordion .accordion-button::after {
    filter: invert(24%) sepia(80%) saturate(3000%) hue-rotate(340deg) brightness(90%);
}
#organizationAccordion .member-row a {
    color: #dc3545;
}
.member-apply-trigger-btn {
    font-size: var(--fs-body);
}
/* Az accordion belsejének nem formázott (sima p/span) szövege + a fenti
   bevezető "lead" szöveg - egységesen 1.3rem. */
#organizationAccordion .accordion-body,
.organization-content .lead {
    font-size: var(--fs-body);
}

/* Jelentkezési/támogatási űrlap: a <legend>-ek választják el vizuálisan
   az egyes szekciókat (Tanfolyam / Személyes adatok / Munkahely / stb.) -
   félkövér, színes szekció-cím + felső elválasztó vonal, hogy jobban
   különüljenek el egymástól. */
#ApplyModal .form-horizontal legend,
#SupportModal .form-horizontal legend {
    font-size: var(--fs-body);
    font-weight: 700;
    color: #1a1a2e;
    border: none;
    border-top: 2px solid #e5e7eb;
    margin: 2.5rem 0 1.5rem;
    padding-top: 2rem;
    width: 100%;
}
#ApplyModal .form-horizontal legend:first-of-type,
#SupportModal .form-horizontal legend:first-of-type {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

/* "Jelentkezem" (jelentkezési modal footere) és "Elolvastam" (a
   tájékoztató doboz gombja) - egységes, középre rendezett, piros gomb
   (ugyanaz a piros, mint a "Jelentkezem" gomb máshol a site-on, pl. a
   "Hamarosan induló tanfolyamaink" táblázatban - .btn-danger). */
.btn-apply {
    display: block;
    width: fit-content;
    margin: 0 auto;
    font-size: var(--fs-body);
    font-weight: 600;
    text-align: center;
    color: #fff !important;
    background-color: #dc3545;
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
    padding: 0.5rem 2rem;
    text-decoration: none !important;
    transition: background-color 0.2s, border-color 0.2s;
}
/* 2026-08-06: user kérésére mobilon az összes űrlap (Jelentkezés,
   Támogatás-igénylés, Tagfelvétel) küldés-gombja fix 50px magasságot kap
   (a gomb SZÍNE marad piros - a halványszürke a modal LÁBLÉCÉNEK (.form-
   footer) háttere, nem a gombé, lásd lentebb). */
@media (max-width: 991.98px) {
    .btn-apply {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* Mind a három modal (Jelentkezés/Támogatás/Tagfelvétel) ugyanazt a
       .form-footer osztályt használja a lábléchez - egy szabály fedi le
       mindhármat. */
    .form-footer {
        background-color: #e9ecef;
    }
}
.btn-apply:hover {
    background-color: #bb2d3b;
    border-color: #b02a37;
    color: #fff !important;
}

/* Főnavigáció - a mockup szerinti fehér, letisztult megjelenés */
.main-navbar {
    background-color: #fff;
    box-shadow: 0 0.125rem 0.5rem rgba(0,0,0,0.06);
    /* legacy .navbar { margin-bottom: 20px; } felülírva */
    margin-bottom: 0 !important;
}
/* A legacy (Bootstrap 3-as) CSS-ből maradt -15px negatív margó a
   .navbar-collapse-en, amit a Bootstrap 5 nem ír felül (ott ez a szabály
   nem is létezik) - emiatt ugrott/tolódott el a menü megnyitáskor mobilon.
   A régi/új Bootstrap CSS keveredése miatt a flex-viselkedés megbízhatatlan
   volt, ezért itt mindent explicit, erős specificitással állítunk be. */
.main-navbar .container-fluid {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.main-navbar .navbar-brand {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    flex: 0 0 auto !important;
}
.main-navbar .navbar-toggler {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
/* Ugyanaz a legacy BS3-öröklött negatív margó, most a .navbar-nav-on
   (margin: 7.5px -15px az assets/.../bootstrap.min.css-ből). */
.main-navbar .navbar-nav {
    margin: 0 !important;
    padding: 0 !important;
}

/* Mobil/tablet: a collapse teljes szélességben, külön sorban nyílik meg
   a brand/toggler alatt (ezért kell a wrap + basis:100%). */
@media (max-width: 991.98px) {
    .main-navbar .container-fluid {
        flex-wrap: wrap !important;
    }
    .main-navbar .navbar-collapse {
        flex: 1 1 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Hiba (2026-08-25): a legacy admin/yiibooster bootstrap.min.css egy
       "@media (min-width:768px) { .navbar-collapse.collapse { display:block
       !important; } }" szabállyal (BS3/4-es "navbar-toggleable" örökség)
       768px-től mindig nyitva kényszerítette a hamburger-menüt, felülírva a
       BS5 saját .collapse:not(.show){display:none} logikáját - 768-991.98px
       között (tableten) a menü sosem csukódott be. Itt visszaadjuk a helyes
       BS5-viselkedést, nagyobb specificitással + !important-tal. */
    .main-navbar .navbar-collapse.collapse:not(.show) {
        display: none !important;
    }
}

/* Desktop: a collapse a brand mellett, egy sorban marad, a nav-linkek
   jobbra rendezve (nem szabad basis:100%-ot/wrap-et kényszeríteni rá,
   az korábban a brand-et a jobb szélre lökte, a nav-et pedig eltörte). */
@media (min-width: 992px) {
    .main-navbar .navbar-collapse {
        flex: 1 1 auto !important;
        display: flex !important;
        justify-content: flex-end !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Mobilon a nagyobb logó törte a menüt, ott marad a korábbi, kisebb méret
   (alap/mobil-first érték, a desktop felülírás lentebb, a .nav-link
   szabály UTÁN következik, hogy a cascade sorrend biztosan jó legyen). */
.navbar-brand img {
    height: 44px;
}

/* Egyedi, letisztult hamburger ikon (a user mockupja szerint): keret/háttér
   nélküli, sötétkék, lekerekített végű 3 vonal. */
.main-navbar .navbar-toggler {
    border: none;
    padding: 0.25rem;
    box-shadow: none !important;
}
.main-navbar .navbar-toggler-icon {
    width: 1.75em;
    height: 1.75em;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231a1a2e' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.main-navbar .nav-link {
    color: #1a1a2e !important;
    /* 2026-08-06: a var(--fs-body) (16px) itt túl nagynak bizonyult - a hosszabb
       menüpontok ("Újraélesztés mindenkinek", "Groupama Életmentő Program")
       2 sorra törtek deszktopon. Vissza var(--fs-badge)-re (12px, ugyanaz a
       "nagybetűs, ritkított" kategória, mint amit a nav egyébként is
       használ) + kisebb oldalsó padding, hogy biztosan egy sorban maradjon. */
    font-size: var(--fs-badge);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.5rem 0.5rem;
    transition: color 0.2s;
    position: relative;
    white-space: nowrap;
}
.main-navbar .nav-link:hover {
    color: #E8524A !important;
}
/* az aktuális oldalhoz tartozó menüpont hover nélkül is piros marad */
.main-navbar .nav-link.active {
    color: #E8524A !important;
}
@media (min-width: 992px) {
    .navbar-brand img {
        height: 64px;
    }
    /* Hibajegyzék #20 kieg. (2026-08-25) user-kérés: a menüpontok betűmérete
       desktopon vissza var(--fs-body)-ra (16px) - a korábbi, 2026-08-06-i
       12px-re csökkentés (lásd .main-navbar .nav-link fentebb) oka az volt,
       hogy a hosszabb menüpontok 2 sorra törtek; ez most a li-padding
       szűkítésével (0 10px) próbál helyet szorítani a nagyobb betűnek.
       User kérés (2026-08-27): 991-1270px között ez a 16px+10px kombináció
       megint túl szoros lett (a menü "szétesett") - ez a szabály most a
       ≥1271px-es, ténylegesen tágas nézetekre szűkült (lásd lentebb), itt
       (992px-től) egy köztes, kompaktabb méret (--fs-small, 14px) marad
       alapértelmezettként. */
    .main-navbar .nav-link {
        font-size: var(--fs-small);
    }
    .main-navbar .navbar-nav > li {
        padding: 0px 6px;
    }
}
/* User kérés (2026-08-27): a 991-1270px köztes tartományban a fenti
   16px/10px kombináció szétfeszítette a menüt (a hosszú "Újraélesztés
   mindenkinek" elem miatt) - csak a ténylegesen tágas (≥1271px) nézeteken
   térünk vissza a nagyobb betűméretre/paddingra. */
@media (min-width: 1271px) {
    .main-navbar .nav-link {
        font-size: var(--fs-body);
    }
    .main-navbar .navbar-nav > li {
        padding: 0px 10px;
    }
}
.main-navbar .social-icon {
    padding: 0.5rem 0.4rem;
    color: #6b7280 !important;
}
.main-navbar .social-icon:hover {
    color: #E8524A !important;
}
.brand-text {
    font-size: var(--fs-small);
    font-weight: 700;
    line-height: 1.3;
    color: #1a1a2e;
}
.brand-text small {
    font-weight: 400;
    color: #6b7280;
}
.brand-address {
    font-weight: 400 !important;
    font-size: var(--fs-badge) !important;
    color: #9ca3af !important;
    text-transform: none;
    letter-spacing: 0;
    display: block;
    margin-top: 0.15rem;
}

/* Almenü ("Groupama" az "Újraélesztés mindenkinek" alatt) - Hibajegyzék #1/#3.
   Ugyanaz a beágyazott-collapse minta, mint a #headerSearch: mobilon a
   hamburger-menü természetes része (lenyílik/betolja a többi elemet),
   desktopon CSS-sel lebegő panellé válik a szülő nav-item alatt. */
.nav-item-has-submenu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.nav-submenu-toggle {
    background: none;
    border: none;
    padding: 0.5rem 0.6rem;
    color: #1a1a2e;
    line-height: 1;
}
.nav-submenu-toggle .fa-chevron-down {
    transition: transform 0.2s ease;
    font-size: 0.75em;
}
.nav-submenu-toggle[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}
.nav-submenu-collapse {
    flex-basis: 100%;
}
.nav-submenu {
    margin: 0;
    padding: 0 0 0.5rem 1.25rem;
}
.nav-submenu .nav-link {
    font-size: var(--fs-badge);
}
@media (min-width: 992px) {
    .nav-item-has-submenu {
        position: relative;
    }
    #reanimationSubmenu {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 260px;
        background: #fff;
        box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.1);
        z-index: 1030;
    }
    .nav-submenu {
        padding: 0.5rem 1rem;
    }
}

/* Kereső panel a nagyító ikon collapse-ében (beágyazva a #mainNav-ba) */
.header-search-panel {
    border-top: 1px solid #eee;
    padding-left: 1rem;
    padding-right: 1rem;
}
.header-search-panel .gcse-search {
    max-width: 480px;
    margin: 0 auto;
}

/* Desktopon (lg+) a #mainNav már nem collapse-elt (mindig látszik) - a kereső
   panelt ki kell venni a flex sorból, hogy ne tolja el/ugrassza meg a menüt,
   helyette lebegő, jobbra igazított, alacsonyabb (fele magasságú) blokként
   nyíljon meg alatta. */
@media (min-width: 992px) {
    #headerSearch {
        position: absolute;
        top: 100%;
        left: auto;
        right: 0;
        width: 380px;
        background: #fff;
        box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.1);
        z-index: 1030;
    }
    .header-search-panel {
        border-top: none;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
}

/* Tartalom */
#page {
    min-height: 60vh;
}

/* Lábléc - 2026-08-05: látványosabb redesign (logó, nyilvántartási szám +
   telefonszám hozzáadva, "Menü" alcím, halvány transparens háttér-
   illusztráció, elválasztó vonal + középre igazított copyright sor). */
.main-footer {
    position: relative;
    overflow: hidden;
    background-color: #1a1a2e;
    color: #aaa;
}
.main-footer a {
    text-decoration: none;
}
/* halvány, transparens szív-pulzus illusztráció a lábléc hátterében -
   csak dekoráció, kattinthatatlan, a tartalom fölött nem jelenhet meg. */
.footer-illustration {
    position: absolute;
    top: 50%;
    right: -3rem;
    transform: translateY(-50%);
    font-size: 22rem;
    color: rgba(255,255,255,0.04);
    pointer-events: none;
    line-height: 1;
    z-index: 0;
}
.main-footer .container {
    z-index: 1;
}
/* "Cég" szekció fehér kártyán - egyik logó (MRT, ERC) sem transzparens
   hátterű, sötét háttéren látszó fehér dobozként jelentek meg körülöttük.
   A kártyán belül a szöveg/link színeket is sötétre kell váltani. */
.footer-company-card {
    background: #fff;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.15);
    color: #1a1a2e;
}
/* Hibajegyzék #6: a lábléc-menü mostantól csak 2 sor (nem kell multi-column
   tördelés), + a honlap-domainek külön sorban alatta. */
.footer-nav {
    margin-bottom: 1rem;
}
.footer-nav li {
    margin-bottom: 0.75rem;
}
.footer-nav a {
    font-size: var(--fs-body);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.footer-domains {
    font-size: var(--fs-body);
    letter-spacing: 0.02em;
}
/* a "Cég" fehér kártya és a Menü oszlop közötti oldaltávolság a
   négyszerese a Bootstrap g-4 alapértelmezett 1.5rem-jének. */
.footer-row {
    --bs-gutter-x: 6rem;
}
.footer-divider {
    border-color: rgba(255,255,255,0.12);
    margin: 2.5rem 0 1.5rem;
}
/* body előtag: a specificitást a lenti "a:not(.btn)" globális felülírás fölé kell emelni */
body .main-footer a { color: #aaa !important; }
body .main-footer a:hover { color: #fff !important; }
body .footer-social { color: #aaa !important; }
body .footer-social:hover { color: #fff !important; }
/* "Cég" fehér kártya - a fentebbi szürke/fehér lábléc-szín felülírása
   sötét/kék színekre, mert egyenlő specificitás mellett forrás-sorrendben
   ez van később, így ez nyer a fentiek fölött. */
body .footer-company-card a { color: #1d4ed8 !important; }
body .footer-company-card a:hover { color: #E8524A !important; }
body .footer-company-card .footer-social { color: #1a1a2e !important; }
body .footer-company-card .footer-social:hover { color: #E8524A !important; }

/* ══════════════════════════════════════════
   Yii asset manager sötét téma felülírása
   (booster/metis CSS override !important-tal)
══════════════════════════════════════════ */
body {
    background-color: #fff !important;
    color: #212529 !important;
    font-family: var(--font-primary) !important;
}
/* :not(.btn) - a Bootstrap gombok (<a class="btn ...">) saját variáns-színét
   ne írja felül ez a legacy-felülíró szabály (korábban pl. a "Belépés" gomb
   szövege szinte láthatatlan volt kék-a-kéken emiatt) */
a:not(.btn) { color: #1d4ed8 !important; }
a:not(.btn):hover { color: #1e40af !important; }

/* Metis wrapper felülírása */
#wrap, .wrapper, #wrapper, #page-wrapper,
#content, .outer, .inner {
    background: #fff !important;
    color: #212529 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Navbar */
.navbar, .navbar-inverse, .navbar-default {
    background: #fff !important;
    border: none !important;
}
.navbar-inverse .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a {
    color: #374151 !important;
}

/* Sidebar elrejtése */
#sidebar-wrapper, .sidebar, #left, #right {
    display: none !important;
}

/* Headingek színe/mérete: lásd a fájl tetején a design tokeneket és az
   alap h1-h6 szabályt - ez a duplikált szín-only szabály onnantól
   felesleges volt, törölve. */

/* Hero - maradjon sötét */
.hero-section { background: #1a1a2e !important; }
.hero-section h1,
.hero-section p,
.hero-title,
.hero-subtitle { color: #fff !important; }
.hero-section h1 {
  color: #fff !important;
  font-size: var(--fs-hero);
  font-weight: 800 !important;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
@media (max-width: 991.98px) {
  .hero-section h1 {
    color: #fff !important;
    font-size: var(--fs-hero-mobile);
    font-weight: 800 !important;
    line-height: 1.15;
    letter-spacing: -0.01em;
  }
}
.hero-section p, .hero-subtitle {
	color: #dceefb !important;
	font-size: var(--fs-lead);
	font-weight: 400;
	margin-top: 10px;
}

/* Hero CTA gombok - csak desktopon: egyenlő méret, a sor kitölti a
   teljes szélességet (a cím szövegének végéig ér), betűméret +30%. */
@media (min-width: 992px) {
  .hero-cta-row {
    width: 100%;
  }
  .hero-cta-btn {
    flex: 1 1 0;
    font-size: var(--fs-lead) !important;
    text-align: center;
  }
}

/* Asztali nézetben (lg és fölötte) a hero-nak fotó háttere van, bal oldalon
   sötét gradiens-átfedéssel, hogy a szöveg olvasható maradjon. Mobilon
   marad az egyszerű sötét szín (nincs fotó, hogy ne legyen zsúfolt/lassú). */
@media (min-width: 992px) {
    /* .hero-section .carousel-item: amikor a hero Bootstrap 5 carousel
       (aktív slider_1 elemek), minden dia saját --hero-bg-image-et kap
       PHP inline style-ból; .hero-section önmagában a statikus fallback
       eset (nincs egy aktív slider_1 elem sem). */
    .hero-section,
    .hero-section .carousel-item {
        background:
            linear-gradient(90deg, rgba(26,26,46,0.75) 0%, rgba(26,26,46,0.55) 45%, rgba(26,26,46,0.15) 100%),
            var(--hero-bg-image, url('/themes/reanimatio/img/index-img.jpg')) !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        /* Hibajegyzék #11 (2026-08-25): user kérésére 30%-kal csökkentve
           (580px -> 406px) - "a főoldal túl zsúfolt". Kifejezetten CSAK
           desktop+tablet, mobil (lásd lentebb, max-width:767.98px)
           változatlan marad. */
        min-height: 406px;
        display: flex;
        align-items: center;
    }
    /* a .hero-section flex-konténer, a benne lévő .carousel-nak (pl.
       #orgHeroCarousel) nincs explicit szélessége, ezért flex-elemként
       csak a tartalma (pl. egy hosszú, törés nélküli cím) szélességére
       zsugorodott össze, a kép/háttér emiatt nem ért ki a teljes
       szélességig - a statikus fallback ág (sima .container) ettől nem
       szenvedett, mert a Bootstrap .container-nek explicit width:100%-a
       van, a .carousel-nak nincs. */
    .hero-section > .carousel {
        width: 100%;
    }
}

/* Tablet (768-991.98px): a hero itt is 30%-kal csökkentve (400px -> 280px),
   ugyanúgy mint desktopon - user kifejezetten kérte, hogy csak tableten és
   desktopon csökkenjen, mobilon NE (lásd a max-width:767.98px szabályt
   lentebb, ott változatlan 400px maradt). Korábban ez a szabály még a
   teljes max-width:991.98px sávra (mobil+tablet együtt) vonatkozott -
   szét kellett bontani mobil/tablet külön sávra emiatt. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-section,
    .hero-section .carousel-item {
        background:
            linear-gradient(180deg, rgba(26,26,46,0.7) 0%, rgba(26,26,46,0.45) 100%),
            var(--hero-bg-image, url('/themes/reanimatio/img/index-mobile-img.jpg')) !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        height: 280px;
        display: flex;
        align-items: center;
    }
    .hero-section > .carousel {
        width: 100%;
    }
}

/* Mobil (max-width:767.98px): VÁLTOZATLAN magasság (user kifejezett kérése -
   csak tableten/desktopon csökkenjen a slider). */
@media (max-width: 767.98px) {
    .hero-section,
    .hero-section .carousel-item {
        background:
            linear-gradient(180deg, rgba(26,26,46,0.7) 0%, rgba(26,26,46,0.45) 100%),
            var(--hero-bg-image, url('/themes/reanimatio/img/index-mobile-img.jpg')) !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
        /* fix magasság, hogy diánként ne ugráljon a slider mérete a
           tartalom (cím hossza, van-e Oktatói Zóna kártya stb.) alapján. */
        height: 400px;
        display: flex;
        align-items: center;
    }
    /* 2026-08-06: ugyanaz a hiba mobilon is jelentkezett, mint asztali
       nézetben feljebb (lásd a .hero-section > .carousel megjegyzését) -
       a .carousel-nak itt sem volt explicit szélessége, ezért a tartalom
       (a cím) szélességére zsugorodott (~183px 375px helyett), és a
       kép/háttér csak félig látszott ("a kép csak félig látszik" hibajegy,
       pl. /organization oldalon). */
    .hero-section > .carousel {
        width: 100%;
    }
}

/* Bootstrap 5 carousel a hero-ban: keret/gomb-stílus finomítás */
.hero-section .carousel-control-prev,
.hero-section .carousel-control-next {
    width: 5%;
    opacity: 0.6;
}
.hero-section .carousel-control-prev:hover,
.hero-section .carousel-control-next:hover {
    opacity: 1;
}
.hero-section .carousel-indicators {
    margin-bottom: 0.5rem;
}

/* Oktatói Zóna kártya a hero-ban */
.oktatoi-zona-card {
    background: #16213e !important;
}
.oktatoi-zona-card .card-title,
.oktatoi-zona-card i { color: #fff !important; }
.oktatoi-zona-card p { color: rgba(255,255,255,0.65) !important; }

/* Milyen képzést keresel? - kurzus típus kártyák (pasztell, sötét szöveg) */
.course-type-card {
    border-radius: 1rem !important;
    padding: 0 !important;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.course-type-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.1);
}
/* ikon fixen a kártya bal 30%-át foglalja el */
.course-type-icon-col {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 0.25rem 1rem 30px;
}
.course-type-icon-col i {
    font-size: 2.75rem;
    text-shadow: 2px 2px 4px #000000;
}
/* Tableten (768-991.98px) az ikon-sáv 15%-ra szűkül, a szöveg/gomb-oszlop
   tölti ki a maradék helyet, balra rendezve (user mockup, 2026-08-25). */
@media (min-width: 768px) and (max-width: 991.98px) {
    .course-type-icon-col {
        flex: 0 0 15%;
        max-width: 15%;
    }
    .course-type-text-col {
        flex: 1 1 85%;
        max-width: 85%;
    }
}
.course-type-text-col {
    flex: 1 1 70%;
    padding: 1rem 1rem 1rem 30px;
    position: relative;
    height: 100%;
}
.kepzesnev {
    font-size: var(--fs-small);
    font-weight: normal;
    display: block;
    margin-bottom: 0.25rem;
    color: #424242;
}
/* A gomb-kinézet (fehér háttér, piros szöveg+nyíl) mostantól minden
   törésponton egyforma - korábban csak desktopon (lg+) volt fehér
   hátterű pill-gomb, mobilon/tableten sima, öröklött színű szöveg
   volt (user kérésére egységesítve, 2026-08-25). */
.erdekel {
    font-size: var(--fs-badge);
    display: inline-block;
    background-color: #fff;
    color: #e8524a;
    padding: 0.15rem 0.9rem;
    border-radius: 4px;
}
.erdekel .fa-solid.fa-chevron-right {
	color: #e8524a !important;
}
/* Hibajegyzék #28 (2026-08-26): a korábban itt lévő ".course-type-als
   .kepzesnev, .course-type-epals .kepzesnev { color:#fff }" szabály
   feleslegessé vált - a .kepzesnev fentebb már var(--card-text)-et használ,
   ami MINDEN (szabadon választott) kártyaszínhez automatikusan a megfelelő
   kontraszt-színt adja, nem csak a korábbi 2 fix sötét színhez. */

/* Milyen képzést keresel? cím mérete - a h2 alapszabály (lásd fent a
   design tokeneket) már amúgy is var(--fs-h2)-t adna, ez a szabály csak a
   text-center/fw-bold utility-kkel együtt a végleges méretet rögzíti. */
.course-type-heading {
    font-size: var(--fs-h2);
    font-weight: 700;
}

/* Desktopon (lg+) nagyobb, abszolút pozícionált csempe-elrendezés.
   Mobilon az eredeti (fenti), egyszerű document-flow méretek maradnak. */
@media (min-width: 992px) {
    /* User explicit megerősítette 200px-re, tudva, hogy a leghosszabb
       kurzuscímeknél overflow:hidden miatt levágás lehet. */
    .course-type-card {
        min-height: 200px;
    }
    .course-type-icon-col i {
        font-size: 6.75rem;
    }
    .kepzesnev {
        font-size: var(--fs-body);
        font-weight: normal;
        line-height: 20px;
        display: block;
        margin-bottom: 20px;
        color: #424242;
        position: absolute;
        top: 25px;
        padding-right: 25px;
    }
    .erdekel {
        font-size: var(--fs-body);
        position: absolute;
        bottom: 25px;
        right: 25px;
        padding: 0px 25px;
    }
    /* Hibajegyzék #28 (2026-08-26): a .kepzesnev itt is var(--card-text)-et
       kap fentebb, a korábbi fix duplikátum-szabály itt is felesleges. */
}

/* Kategória-színek (admin: Kurzusok -> Kártya színe, kurzusonként SZABADON
   választható háttérszín - HTML5 color picker, nem fix, névre szóló
   opciók). Hibajegyzék #28 (2026-08-26): a korábbi 4 fix CSS class
   (course-type-bls/als/epals/default, mindegyik saját hardcode-olt
   background-color/color/.small/i szabállyal + egy tág ".course-type-als *"
   biztonsági hálóval) helyett egyetlen, általános, CSS custom property-kre
   épülő szabálykészlet - a PHP (course::getCardStyleAttr(), lásd
   models/course.php) SZÁMOLJA KI kontraszt-arány alapján a --card-bg/
   --card-text/--card-muted/--card-icon-shadow értékeket BÁRMILYEN admin
   által választott színhez, és style="..." attribútumként írja ki a kártya
   gyökér elemére. A korábbi wildcard-kizárásokra (.erdekel/.course-list-
   card-cta) itt már nincs szükség, mert ez a szabálykészlet konkrét
   class-okat céloz, nem mindent (*) felülíró wildcard-ot. */
.course-type-card,
.course-list-card,
.course-level-strip {
    background-color: var(--card-bg, #DEF5E8) !important;
    color: var(--card-text, #1a1a2e) !important;
}
.course-type-card .small,
.course-list-card .small,
.course-list-card-lead {
    color: var(--card-muted, #4b5563) !important;
    opacity: 1 !important;
}
.kepzesnev,
.course-list-card-title {
    color: var(--card-text, #1a1a2e) !important;
}
.course-type-icon-col i {
    color: #fff !important;
    text-shadow: var(--card-icon-shadow, 2px 2px 4px #000000);
}

/* /courses lista oldal - a főoldali csempék (course-type-*) színvilágát
   követő csempe, de felül teljes csempeszélességű fotóval (a főoldalin
   nincs fotó, csak ikon egy 30%-os sávban - itt más az elrendezés,
   ezért új, önálló class-nevek: nem a .kepzesnev/.erdekel-t használjuk
   újra, mert azoknak van egy deszktopos abszolút-pozícionált szabálya,
   ami a homepage csempe konkrét méreteire van hangolva). */
.course-list-card {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.course-list-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.1);
}
.course-list-card-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #e5e7eb;
}
.course-list-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.course-list-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.25rem;
}
.course-list-card-title {
    font-size: var(--fs-body);
    font-weight: 700;
    color: #000;
    line-height: 1.2;
    padding: 10px 0;
}
.course-list-card-lead {
    font-size: var(--fs-small);
    opacity: 0.85;
    flex: 1 1 auto;
    color: #000;
}
.course-list-card-cta {
    align-self: flex-start;
    margin-top: 0.5rem;
    font-size: var(--fs-small);
    font-weight: 600;
    background-color: #fff;
    color: #e8524a;
    padding: 0.35rem 1rem;
    border-radius: 4px;
}

/* Naptár / szűrő / titkárság sor - az oszlopok közötti margó a duplájára
   nőtt (Bootstrap g-3 alapból 1rem -> 2rem). */
/* User kérés (2026-08-26): a felső sáv (naptár/kereső/PDF-kártya) legyen
   kb. 20%-kal "laposabb" (alacsonyabb) - a --bs-gutter-y itt már ezt a
   csökkentett értéket kapja. Az alábbi finomítások kizárólag a
   .courses-top-row-on BELÜLI elemekre szűkítve (a .calendar-month/
   .course-filter-bar-v2 osztályokat a főoldal és a /course2 is használja,
   azokat nem szabad érintenie). */
.courses-top-row {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 1.6rem;
}
.courses-top-row .calendar-month {
    padding: 0.8rem;
}
.courses-top-row .calendar-month .month ul {
    margin: 0 0 0.6rem;
}
.courses-top-row .calendar-month .weekdays {
    margin: 0 0 0.4rem;
}
.courses-top-row .calendar-month .days li {
    min-height: 1.8rem;
}
.courses-top-row .course-filter-bar-v2 .form-select,
.courses-top-row .course-filter-bar-v2 .form-control,
.courses-top-row .course-filter-bar-v2 .btn {
    height: 2.72rem;
}
@media (min-width: 992px) {
    .courses-top-row .course-filter-bar-v2 .cf-field {
        margin-bottom: 0.6rem;
    }
    .courses-top-row .course-filter-bar-v2 .cf-actions {
        margin-top: 24px;
    }
}
/* PDF-letöltő kártya a Titkárság kártya helyén (courses.php) - halványan
   animálva (az ikon lassú, finom "lebegése"), user kérésére. */
.signup-process-card {
    height: 100%;
    background: linear-gradient(135deg,#eff6ff 0%,#fff 100%);
    border: 1px solid #dbeafe;
    border-radius: 0.75rem;
    padding: 1.4rem 1.5rem;
    gap: 1rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.signup-process-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.25rem rgba(29,78,216,0.15);
}
.signup-process-card-icon {
    flex: 0 0 auto;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: #1d4ed8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    animation: signup-process-bounce 2.4s ease-in-out infinite;
}
@keyframes signup-process-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
.signup-process-card-title {
    display: block;
    font-weight: 700;
    color: #1a1a2e;
    font-size: var(--fs-body);
    margin-bottom: 0.35rem;
}
.signup-process-card-cta {
    display: inline-flex;
    align-items: center;
    color: #1d4ed8;
    font-weight: 600;
    font-size: var(--fs-small);
}
.signup-process-card:hover .signup-process-card-cta {
    text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
    .signup-process-card-icon {
        animation: none;
    }
}

/* /courses szűrő sáv (course-filter-bar-v2):
   - mobilon (lg alatt): "korábbi" elrendezés - CSS grid, 2 mező egy sorban,
     címke a mező FÖLÖTT, a gombsor (cf-actions) teljes szélességben alul.
   - desktopon (lg+): a 4 mező egymás alatt, címke a mező BAL oldalán,
     egyenlő szélességű helyen (hogy a mezők egy vonalban induljanak), a
     gombsor pedig legalul, a mezők alatt. */
.course-filter-bar-v2 {
    display: grid;
    /* 2026-08-06: a korábbi 2 oszlopos (1fr 1fr) rács a user szerint
       mobilon még mindig túl szűknek/széttoltnak hatott a mezőkhöz -
       egy oszlopba rendezve minden mező teljes szélességet kap, nincs
       tovább mit szűkíteni rajta. */
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
.course-filter-bar-v2 .cf-field {
    display: flex;
    flex-direction: column;
}
.course-filter-bar-v2 .cf-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: 0.5rem;
}
/* a spacer mobilon rejtve van (nincs cím-oszlop, amivel igazítani kéne) -
   lásd a lenti @media szabályt, ahol desktopon megjelenik. */
.course-filter-bar-v2 .cf-actions-spacer {
    display: none;
}
.course-filter-bar-v2 .cf-actions-buttons {
    display: flex;
    gap: 0.5rem;
    flex: 1;
}
.course-filter-bar-v2 .form-label {
    font-weight: 600;
    color: #1a1a2e;
}
/* a natív <select> alacsonyabbra renderelődött, mint a dátum input
   (böngésző-natív különbség) - egységes magasság kikényszerítve. */
.course-filter-bar-v2 .form-select,
.course-filter-bar-v2 .form-control {
    height: 3.4rem;
}
/* a Szűrés/Törlés gombok magassága is egyezzen meg a fenti inputokéval. */
.course-filter-bar-v2 .btn {
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}
/* 2026-08-06: a globális .btn/.form-control/.form-select 16px-es
   betűméret-javítás (lásd a fájl elején) itt, a szűk (175px-es, 2
   oszlopos) mobil rácsban túl nagynak bizonyult - a címke+mező együtt
   ~65px magasra nőtt soronként, ami "szétesettnek" hatott. Mobilon ezért
   itt kompaktabb méretet kap a szűrő-sáv minden eleme. */
@media (max-width: 991.98px) {
    .course-filter-bar-v2 .form-label,
    .course-filter-bar-v2 .form-select,
    .course-filter-bar-v2 .form-control,
    .course-filter-bar-v2 .btn {
        font-size: 13px;
    }
}
@media (min-width: 992px) {
    .course-filter-bar-v2 {
        display: block;
    }
    .course-filter-bar-v2 .cf-field {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
        margin-bottom: 0.75rem;
    }
    .course-filter-bar-v2 .cf-field .form-label {
        flex: 0 0 110px;
        margin-bottom: 0;
    }
    .course-filter-bar-v2 .cf-field .form-select,
    .course-filter-bar-v2 .cf-field .form-control {
        flex: 1;
    }
    /* a Szűrés/Törlés gombsor 30px-re kerüljön az utolsó (Helyszín) input
       mezőtől. */
    .course-filter-bar-v2 .cf-actions {
        margin-top: 30px;
    }
    /* a gombsor a spacerrel (címke-szélesség) igazodik az input mezők bal
       széléhez, a Szűrés gomb pedig az input mező szélességének 50%-a. */
    .course-filter-bar-v2 .cf-actions-spacer {
        display: block;
        flex: 0 0 110px;
    }
    .course-filter-bar-v2 .cf-actions-buttons .btn {
        flex: 0 0 auto;
    }
    .course-filter-bar-v2 .cf-actions-buttons .btn-danger {
        width: 50%;
    }
}

/* Naptárban kiválasztott nap kurzusai - linkelt lista a jelmagyarázat
   fölötti collapse-ban (lásd calendarHandler.js/highlighter.js). */
.calendar-day-courses {
    background: #f8f9fa;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    font-size: var(--fs-small);
}
.calendar-day-courses p {
    margin-bottom: 0.5rem;
    color: #1a1a2e;
}
.calendar-day-course-link {
    display: block;
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.calendar-day-course-link:last-child {
    margin-bottom: 0;
}
.calendar-day-course-link:hover {
    text-decoration: underline;
}

/* /courses "Kérdése van?" / "Akkreditáció" kártyák - sztenderd cím/szöveg
   méret (lásd a fenti megjegyzést a .course-type-heading-nél). */
.courses-info-cards h4 {
    font-size: var(--fs-h4);
}
.courses-info-cards p {
    font-size: var(--fs-body);
}

/* Kurzus részletező oldal (course.php) - "Tanfolyam összefoglaló" blokk,
   mind a fő tartalomban (lent), mind az oldalsávban: sztenderd cím/alcím/
   szöveg méret. A ".small" jegyzet (pl. "* Bruttó összeg.") szándékosan
   kimarad, az marad a kisebb, halványabb disclaimer-stílusú. */
.course-summary h4 {
    font-size: var(--fs-h4);
}
.course-summary h5 {
    font-size: var(--fs-lead);
}
.course-summary p:not(.small),
.course-summary b {
    font-size: var(--fs-body);
}
/* Mobilon (a kép alatt, teljes szélességben megjelenő verzió) a user
   kérésére kompaktabb, 13px-es méretet kap a teljes "Tanfolyam
   összefoglaló" kártya (a cím kivételével - az marad h4 méretű). */
@media (max-width: 991.98px) {
    .course-summary p:not(.small),
    .course-summary b,
    .course-summary h5 {
        font-size: 13px;
    }
}

/* /professionalinformation oldal */
.professional-info-tabs .nav-link {
    color: #6b7280;
    font-weight: 600;
    font-size: var(--fs-small);
}
.professional-info-tabs .nav-link.active {
    color: #dc3545;
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 700;
}
/* kompakt rács-csempék (11 db "Aktuális irányelvek" kártya, 8 db "Archív"
   kategória) - itt szándékosan NEM a 2rem "kártya cím" sztenderdet
   használjuk (az a nagy, kiemelt kártyáknak - pl. "Kérdése van?" - való,
   itt túl domináns lenne ennyi apró csempén), hanem 1.3rem-et, mint a
   sztenderd törzsszöveg méretet. */
.guideline-card h6,
.archive-link-list a,
.archive-link-list span {
    font-size: var(--fs-body);
}
.archive-link-list a {
    color: #1a1a2e;
    text-decoration: none;
}
.archive-link-list a:hover {
    color: #dc3545;
    text-decoration: underline;
}
.professional-info-text p {
    font-size: var(--fs-body);
}
.professional-info-collapse-btn {
    font-size: var(--fs-body);
}

/* /groupama oldal */
.groupama-body-text {
    font-size: var(--fs-body);
}
.groupama-link-list a {
    font-size: var(--fs-body);
    color: #1a1a2e;
    text-decoration: none;
}
.groupama-link-list a:hover {
    color: #dc3545;
    text-decoration: underline;
}

/* /news oldal - a képzéscsempéhez (.course-list-card) hasonló kártya-
   sablon, de fehér háttérrel (a content táblának nincs kép mezője, ezért
   itt nincs felső fotó-sáv, csak dátum/cím/kivonat/CTA). Mivel a kártyák
   fehérek, az oldal teljes háttere halványszürkére váltott, hogy a
   kártyák el tudjanak különülni tőle. */
.news-list-section {
    background-color: #f8f9fa;
}
.news-card {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.05);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    color: #1a1a2e;
}
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.1);
}
.news-card-img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}
.news-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.news-card-body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1 1 auto;
}
.news-card-date {
    font-size: var(--fs-badge);
    color: #6b7280;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.news-card-title {
    font-size: var(--fs-body);
    font-weight: 700;
}
.news-card-lead {
    font-size: var(--fs-small);
    color: #4b5563;
    flex: 1 1 auto;
}
.news-card-cta {
    align-self: flex-start;
    margin-top: 0.5rem;
    font-size: var(--fs-small);
    font-weight: 700;
    color: #dc3545;
}

/* /reanimation oldal */
.reanimation-body-text p:not(.small) {
    font-size: var(--fs-body);
}
.reanimation-sidebar h4 {
    font-size: var(--fs-h4);
}
.reanimation-sidebar .btn {
    font-size: var(--fs-body);
}

.course-level-strip {
    padding: 0.85rem 0;
    text-align: center;
    font-weight: 700;
    font-size: var(--fs-body);
    letter-spacing: 0.05em;
}
.course-body-text {
    font-size: var(--fs-body);
}
/* Hibajegyzék #29 (2026-08-26) user kérés: minden feltöltött leadkép
   (kurzus adatlap fő képe, "1%" tartalom képe) egységesen 100% szélességű
   legyen a konténerén belül - eddig a kép saját, feltöltéskori méretében
   jelent meg (.img-fluid önmagában csak max-width:100%-ot ad, nem tölti ki
   a rendelkezésre álló helyet). */
.img-fluid.rounded.mb-4 {
    width: 100%;
}
.course-dates-table th {
    font-size: var(--fs-badge);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #6b7280;
    border-top: none;
}
.course-dates-table td {
    font-size: var(--fs-small);
}
/* Jelentkezem gomb az oldalsávban - a sztenderd méret/szín, amit már a
   Hamarosan induló tanfolyamaink táblázatnál és a /courses csempéknél is
   használunk. */
.course-apply-btn {
    font-size: var(--fs-body);
    font-weight: 600;
    padding: 0.6rem 1rem;
}

/* Naptár + "Hamarosan induló tanfolyamaink" szekció: a cím (h3) kivételével
   a szöveges tartalom nagyobb betűmérettel jelenik meg. A hét napjai fejléc
   és a nyíl gombok szándékosan kisebb, finomhangolt méretűek maradtak. */
.upcoming-courses-section td {
    font-size: var(--fs-body);
}
/* 2026-08-06: a kurzusnév itt eddig fw-semibold (félkövér) volt - a user
   kérésére most pontosan a tanfolyam-kártyák (.kepzesnev) formázását
   követi: normál (nem félkövér) súly. */
.upcoming-course-name {
    font-weight: 400;
}

/* Mobilon jelzés, hogy a "Hamarosan induló tanfolyamaink" táblázat
   vízszintesen görgethető - jobbra mutató, lágyan lüktető nyíl. */
.swipe-hint {
    margin-top: 0.75rem;
    font-size: var(--fs-small);
    color: #6b7280;
}
.swipe-hint-arrow {
    display: inline-block;
    animation: swipeHintBounce 1.2s ease-in-out infinite;
}
@keyframes swipeHintBounce {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(6px); }
}

/* "Hamarosan induló tanfolyamaink" dátum-oszlopa: hónap és nap egymás
   alatt, középre igazítva. */
.upcoming-courses-section td.date {
    text-align: center;
}
.upcoming-courses-section td.date .month-actual,
.upcoming-courses-section td.date .day-actual {
    display: block;
}

/* Szint-csoportok (Alapszintű/Középszintű/Emelt szintű) elválasztása egymástól */
.course-level-group {
    margin-bottom: 20px;
}
.course-level-group:last-child {
    margin-bottom: 0;
}

/* Kategória-címke a kurzus típus kártyák mellett */
.course-category-badge {
    background: #f3f4f6;
    border-radius: 0.75rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0,0,0,0.08);
    padding: 1.25rem 1rem;
    font-weight: 700;
    font-size: var(--fs-h4);
    line-height: 1.3;
    letter-spacing: 0.03em;
    text-align: left;
    color: #1a1a2e;
    width: 100%;
}
body a.course-category-sublink {
    display: block;
    width: 100%;
    text-align: left;
    font-size: var(--fs-body);
    font-weight: 600;
    color: #1d4ed8 !important;
    text-decoration: none;
    padding-top: 0;
    padding-left: 10px;
}
body a.course-category-sublink:hover {
    text-decoration: underline;
}

/* Hibajegyzék #4, user pontosítás (2026-08-25): a szint-címke alatt MOST
   TÖBB tartalom-link is megjelenhet egymás alatt (nem csak 1) - kisebb
   betűméret és tömörebb sorköz, hogy egy hosszabb lista is elférjen a
   2-oszlopos sávban anélkül, hogy eltolná a kártyák rácsát. */
.course-category-sublink-list {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    width: 100%;
}
body a.course-category-sublink-list-item {
    display: block;
    font-size: var(--fs-small);
    font-weight: 600;
    line-height: 1.3;
    color: #1d4ed8 !important;
    text-decoration: none;
}
body a.course-category-sublink-list-item:hover {
    text-decoration: underline;
}

/* /course2 - kísérleti elrendezés: kategória-címke a kurzuskártyák FÖLÖTT
   (egy sorban, nem kell 2 sorra törnie, mint az oldalsávos verzióban), a
   szűrő/naptár/titkárság/link pedig egy jobb oldali sávban, egymás alatt,
   20px margóval a blokkok között. */
.course-category-badge-v2 {
    display: inline-block;
    width: auto;
}
.course2-sidebar-block {
    margin-bottom: 20px;
}
.course2-sidebar-block:last-child {
    margin-bottom: 0;
}
/* a sidebar-blokkok közötti 20px margót a fenti .course2-sidebar-block
   már biztosítja - a link saját, mindenhol máshol használt felső
   paddingja itt duplázná azt, ezért itt nullázva, és balra igazítva a
   sáv többi eleméhez igazodva (a globális szabály középre igazít). */
.course2-sidebar-block .course-category-sublink {
    padding-top: 0;
    text-align: left;
}

/* ══════ /course3 - kísérleti 3. elrendezés (user kérésére, 2026-08-26) ══════ */
.course3-sidebar-block {
    margin-bottom: 20px;
}
.course3-sidebar-block:last-child {
    margin-bottom: 0;
}
/* A .signup-process-card (lásd fentebb, /courses-on is használt) itt egy
   önálló, kisebb blokkban van, a naptár ALATT - a "height:100%" ott a
   Titkárság-kártya helyén volt hasznos (col magasságát kitölteni), itt
   viszont természetes magasságú legyen. */
.course3-sidebar-block .signup-process-card {
    height: auto;
}
/* Teljes szélességű szűrő sáv - 2 sorba törve (Szint+Helyszín /
   Dátum-tól+Dátum-ig mobilon is 2 oszlopban, hogy tényleg csak "2 input
   magasságú" maradjon, ne 4 soros legyen). */
/* User kérés (2026-08-26): "az 5-ös grid alá is tedd a halványszürke
   flekket" - ugyanaz a panel-minta, mint a lenti link hub-nál
   (.course3-link-hub) és a /content/{id} letöltés-blokknál
   (.content-downloads-block). */
.course3-filter-bar-wrap {
    background: #f4f5f7;
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.course3-filter-bar-full .form-label {
    font-weight: 600;
    color: #1a1a2e;
    font-size: var(--fs-small);
    margin-bottom: 0.25rem;
}
/* Talált bug (2026-08-27, user élő tesztje, Firefox): a fix "height: 3rem"
   Firefoxban a natív <input type="date"> mezőknél máshogy viselkedik, mint
   egy <select>-nél vagy sima szöveges input-nál - a böngésző saját,
   nem-CSS-elhető belső dátum-szegmens/naptár-ikon elrendezése nem simul a
   kényszerített, fix magassághoz, ezért "elcsúszott" a mező. "min-height"-ra
   váltva a doboz legalább 3rem magas marad (a select/szöveges mezőkkel egy
   vonalban), de a natív date-input belső tartalma szabadon elfér benne,
   nem szorítva egy pontos fix méretbe - ez Chrome-ban/Firefoxban egyaránt
   helyesen jelenik meg. */
.course3-filter-bar-full .form-select,
.course3-filter-bar-full .form-control {
    min-height: 3rem;
}
/* Szűrés/Törlés gombpáros az input-sor 5. oszlopában (user kérésére
   2026-08-26) - a "&nbsp;" label-spacer ugyanakkora helyet foglal, mint
   a többi mező felirata, így a gombok pontosan az input-mezőkkel egy
   vonalban indulnak. */
/* User kérés (2026-08-27): a fenti .form-select/.form-control height ->
   min-height váltás (Firefox natív date-input fix) után a gomb fix
   "height: 3rem"-je már nem passzolt pontosan a mezők (esetenként
   3rem-nél kicsit magasabbra nővő) tényleges magasságához - min-height-re
   váltva ugyanaz a rugalmas logika érvényesül mindkettőn. */
.course3-filter-bar-actions .btn {
    min-height: 3rem;
}
@media (max-width: 991.98px) {
    .course3-filter-bar-actions {
        margin-top: 0.5rem;
    }
}
/* Link hub - halványszürke háttér, szintenként csoportosított kártyák. */
.course3-link-hub {
    background: #f4f5f7;
    border-radius: 0.75rem;
    padding: 2rem;
}
.course3-link-hub-title {
    font-size: var(--fs-h4);
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 1.25rem;
}
.course3-link-hub-group-title {
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 0.6rem;
}
.course3-link-hub-link {
    display: block;
    color: #1d4ed8;
    text-decoration: none;
    font-size: var(--fs-small);
    padding: 0.15rem 0;
}
.course3-link-hub-link:hover {
    text-decoration: underline;
}
/* "Tanfolyamválasztó" cím a szűrő fölött - mérete a képzésszint-címekével
   (.course-category-badge) egyezik meg. */
.course2-filter-title {
    font-size: var(--fs-h4);
    line-height: 2rem;
    font-weight: 700;
    color: #1a1a2e;
    margin-top: 15px;
    margin-bottom: 1rem;
}
.course2-filter-form .form-label {
    font-weight: 600;
    color: #1a1a2e;
}
.course2-filter-form .form-select,
.course2-filter-form .form-control {
    height: 3.4rem;
}
.course2-filter-form .btn {
    height: 3.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Naptár widget - fehér kártyaként, alul lineárisan beleolvad a szekció
   szürke hátterébe (bg-light, #f8f9fa) - az alsó szegély emiatt átlátszó,
   különben egy éles vonal törné meg az átmenetet. */
.calendar-month {
    background: linear-gradient(180deg, #fff 0%, #fff 60%, #f8f9fa 100%);
    border: 1px solid #e5e7eb;
    border-bottom-color: transparent;
    border-radius: 0.5rem;
    padding: 1rem;
}

/* Fejléc sor: előző / hónap-év / következő (DOM sorrend: prev, next, hónap - flex order-rel forgatva) */
.calendar-month .month ul {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 0.75rem;
}
.calendar-month .month li.prev { order: 1; font-size: var(--fs-h4); padding: 0.25rem 0.6rem; color: #1a1a2e; }
.calendar-month .month li.next { order: 3; font-size: var(--fs-h4); padding: 0.25rem 0.6rem; color: #1a1a2e; }
.calendar-month .month li.prev:hover,
.calendar-month .month li.next:hover { color: #1d4ed8; }
.calendar-month .month li:not(.prev):not(.next) {
    order: 2;
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: #1a1a2e;
}

/* Hét napjai fejléc */
.calendar-month .weekdays {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    list-style: none;
    padding: 0;
    margin: 0 0 0.5rem;
    text-align: center;
    font-size: var(--fs-badge);
    font-weight: 700;
    letter-spacing: 0.03em;
    color: #9ca3af;
    text-transform: uppercase;
}

/* Napok rácsa */
.calendar-month .days {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 0.2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}
.calendar-month .days li {
    min-height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-small);
    color: #374151;
    border-radius: 0.375rem;
}
/* Hónap/év fejléc a naptár tetején ("Augusztus" / "2026") - kompaktabb,
   szorosabb sortávval, hogy ne foglaljon annyi függőleges helyet. */
#mainMonthHolder {
    font-size: var(--fs-small);
    margin: 0;
    line-height: 1.2;
    display: block;
}
#mainYearHolder {
    margin-top: -27px;
    display: block;
    line-height: 1.2;
}
.calendar-month .days li.showHighlights { cursor: pointer; }
.calendar-month .days li.showHighlights:hover { background: #f3f4f6; }
.calendar-month .days li.currentDay { background: #eff6ff; font-weight: 600; }

/* Badge (tanfolyam-indulás) és active (mai nap) jelölők - naptárban és jelmagyarázatban is */
.calendar-month .badge,
.calendar-month .active {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 600;
    vertical-align: middle;
}
.calendar-month .badge { background: #dc2626; color: #fff; }
.calendar-month .active { border: 2px solid #1d4ed8; color: #1d4ed8; }
/* Hibajegyzék #15: mai napnál régebbi (mar lezajlott) tanfolyam-indulasi
   nap a naptarban szurke telt korrel jelenik meg a piros helyett. */
.calendar-month .days li.pastHighlight .badge,
.calendar-month .badge-past { background: #9ca3af; color: #fff; }
/* amikor a mai nap egyben tanfolyam-indulás is: üres .active span a .badge mellett -> kis pötty */
.calendar-month .days li .active:empty {
    width: 0.45rem;
    height: 0.45rem;
    min-width: 0.45rem;
    border: none;
    background: #1d4ed8;
    margin-right: 0.2rem;
}

/* Jelmagyarázat - lenyíló collapse egy lefelé mutató nyíllal, hogy ne
   foglaljon állandóan helyet a naptár alatt. */
.calendar-month .legend {
    margin-top: 1rem;
    font-size: var(--fs-body);
    color: #6b7280;
}
.calendar-month .legend-toggle-btn {
    color: #1a1a2e;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.calendar-month .legend-toggle-btn:hover {
    color: #1d4ed8;
}
.calendar-month .legend-toggle-icon {
    font-size: 0.8em;
    transition: transform 0.2s;
}
.calendar-month .legend-toggle-btn[aria-expanded="true"] .legend-toggle-icon {
    transform: rotate(180deg);
}

/* Hibajegyzék #15: "Naptár alaphelyzetbe állítása" link a "Hamarosan induló
   tanfolyamaink" lista alatt - visszaállítja a lista alapállapotát és a
   naptárt a jelenlegi hónapra, ha a látogató elnavigált/napot választott. */
.calendar-reset-link {
    display: inline-flex;
    align-items: center;
    font-size: var(--fs-body);
    color: #6b7280;
    text-decoration: none;
}
.calendar-reset-link:hover { color: #1d4ed8; }

/* Statisztika sáv (Szakmai anyagok fölött) - teljes szélességű kék háttér,
   a tartalom sima .container-ben. Az ikonok az icons-forblueline.png 2x2
   sprite-jából vannak kivágva CSS background-position-nel (200% 200%
   background-size + 0%/100% pozíciók - a sprite pontosan 2x2, 1536x1024px,
   negyedei 768x512px). */
.stats-banner {
    background-color: #14213d;
    padding: 2.5rem 0;
}
.stats-banner-row {
    row-gap: 2rem;
}
.stats-banner-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 1.5rem;
    /* flex-elemek alapból min-width:auto - ez akadályozta meg, hogy a
       szöveg a rendelkezésre álló helyre zsugorodjon/törjön, emiatt
       lógott ki a sáv mobilon a szélén. */
    min-width: 0;
}
@media (min-width: 992px) {
    .stats-banner-item:not(:first-child) {
        border-left: 1px solid rgba(255,255,255,0.25);
    }
}
.stats-banner-icon {
    /* User kérés (2026-08-27, 2. javítás): a korábbi sprite-technika
       (1 közös kép, 2x2 rács, background-position-nel kivágva) azért
       nem volt igazán javítható - az EREDETI rajz nem volt egyenletesen
       középre helyezve a saját negyedén belül (mindegyik ikon máshol
       ült a cellájában), ezért bármilyen egységes konténer-arányt is
       választottunk, soronként máshogy néztek volna ki egymáshoz
       képest. Végleges megoldás: mind a 4 ikon külön, saját magára
       szorosan kivágott + egységesen középre pozicionált PNG-ként lett
       újramentve (lásd icon-people/certificate/doctor/map.png,
       400x400-as vászon, azonos belső margóval) - ez garantálja, hogy
       mind a 4 sor vizuálisan egy vonalban legyen, függetlenül az
       eredeti rajzok egyedi arányától. Egyszerű négyzet konténer,
       background-size:contain középre igazítva. */
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    /* 2. körös hibajegyzék #1 (2026-09-09): a user kérésére az ikon
       admin-ból is feltölthető (site_settings.statN_icon_id) - ilyenkor
       ez a class egy valódi <img>-re kerül (nem a régi 4 statikus PNG-t
       húzó div-re), az object-fit ennek a contain-viselkedését adja. */
    object-fit: contain;
}
.stats-banner-icon-people { background-image: url('/themes/reanimatio/img/icon-people.png'); }
.stats-banner-icon-certificate { background-image: url('/themes/reanimatio/img/icon-certificate.png'); }
.stats-banner-icon-doctor { background-image: url('/themes/reanimatio/img/icon-doctor.png'); }
.stats-banner-icon-map { background-image: url('/themes/reanimatio/img/icon-map.png'); }
.stats-banner-text {
    display: flex;
    flex-direction: column;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    font-size: var(--fs-small);
    line-height: 1.3;
    min-width: 0;
    overflow-wrap: break-word;
}
.stats-banner-number {
    font-size: var(--fs-lead);
    font-weight: 800;
}
/* 2026-08-06: mobilon eddig 2x2 rács volt (col-6) - ez szűk oszlopokat
   eredményezett, amikben a hosszabb feliratok ("Nemzetközi színvonalú
   tananyagok") szavak közepén törtek több sorra, csúnyán. A markupban
   col-12-re váltottunk (lásd index.php), így mobilon 1 oszlopban,
   egymás alatt, teljes szélességben jelennek meg az elemek - ez helyet ad
   nagyobb ikonnak és nagyobb szövegnek is, kevesebb belső paddinggal. */
@media (max-width: 991.98px) {
    .stats-banner-row {
        row-gap: 1rem;
    }
    .stats-banner-item {
        padding: 0 0.5rem;
        gap: 1rem;
    }
    .stats-banner-icon {
        flex: 0 0 56px;
        width: 56px;
        height: 56px;
    }
    .stats-banner-text {
        font-size: var(--fs-small);
    }
    .stats-banner-number {
        font-size: var(--fs-lead);
    }
}

/* Partnereink - statikus placeholder, azonos méretű kártyák */
.partners-section {
    background-color: #f8f9fa;
}
/* Hibajegyzék #10 (2026-08-25): egysávos, oldalra görgethető sor - a
   korábbi több-sorba-törő Bootstrap rács helyett. Fix szélességű elemek
   (különben a flex a tartalomhoz igazítaná, és nem lenne egyenletes a
   sor). FIGYELEM: NINCS scroll-snap-type - kipróbálva, hogy a böngésző
   natív snap-korrekciója versenyzett/felülírta a saját, pontos 0,5mp-es
   JS-animációt (a scrollLeft-et aszinkron módon a legközelebbi snap-
   ponthoz igazította, "elnyelve" a szándékos lépéseket) - a lapozás
   ehelyett teljesen a JS animateScrollTo()-ra van bízva. */
.partners-scroll-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    /* Natív scrollbar elrejtve (user kérése) - a lapozás a nyíl-gombokkal/
       swipe-csal történik, a csúszka csak vizuális zajt jelentett volna. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.partners-scroll-row::-webkit-scrollbar {
    display: none;
}
.partners-nav {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.partners-nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid #e2e4ec;
    background: #fff;
    color: #1a1a2e;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.partners-nav-btn:hover {
    background-color: #e8524a;
    border-color: #e8524a;
    color: #fff;
}
.partners-scroll-item {
    flex: 0 0 auto;
    /* 4 kártya látszódjon egyszerre (user kérése) - a sor 1rem gap-jét
       figyelembe véve: 4 elem, 3 rés = 3rem, ezért 25% - 0.75rem/elem. */
    width: calc(25% - 0.75rem);
}
@media (max-width: 767.98px) {
    .partners-scroll-item {
        width: 45%;
    }
}
/* User kérés (2026-08-26): a publikus tartalmi megjelenítő (/content/{id})
   csatolt-fájl letöltés blokkja - halványszürke doboz, a tartalom végén. */
.content-downloads-block {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    background: #f4f5f7;
    border-radius: 0.75rem;
}
.content-downloads-block h4 {
    font-size: var(--fs-h4, 1.5rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #1a1a2e;
}
/* 2. körös hibajegyzék #2 (2026-09-09) - user élő tesztje: a WYSIWYG
   szerkesztőbe (Tartalmak admin, lead/body mezők) beszúrt kép a
   böngésző natív húzásos átméretezésével kapja a saját width/height
   HTML attribútumát (pl. width="1038") - ez a SZÉLES admin-szerkesztő
   dobozához illeszkedik, de a publikus oldal keskenyebb szöveg-oszlopán
   ("kilóg a publikuson") túlnyúlik, mert semmi nem korlátozta a
   konténerhez. Minden olyan helyen, ahol a content.lead/body mező
   nyers HTML-je megjelenik, a benne lévő <img>-ek mostantól mindig a
   konténerhez igazodnak, torzítás nélkül (height:auto). Ez a mérete-
   zés MOSTANTÓL minden jövőbeli beszúrt képre is automatikusan
   vonatkozik - nem kell admin-ból külön beállítani, sosem fog kilógni.
   (A kép átméretezése és törlése magában a szerkesztőben egyébként MÁR
   ma is lehetséges: kattintva a képre a böngésző natív sarok-fogantyúi
   megjelennek húzásos átméretezéshez, Delete/Backspace pedig törli - ez
   nem az editor egyedi funkciója, hanem minden contenteditable mező
   böngésző-natív viselkedése.) */
.content-body img,
.egyszazalek-body-text img,
.reanimation-body-text img,
.professional-info-text img,
.organization-content-item img {
    max-width: 100%;
    height: auto;
}
.content-download-link {
    /* 2. körös hibajegyzék #2 (2026-09-09): eddig csak 1 csatolmány
       létezhetett, "inline-flex" volt elég. Mostantól TÖBB is lehet
       (content::getAttachments()) - blokk-szintűre váltva, hogy minden
       letöltés saját sorba kerüljön, ne egymás mellé/alá csússzanak
       megkülönböztethetetlenül. */
    display: flex;
    align-items: center;
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: none;
}
.content-download-link + .content-download-link {
    margin-top: 0.5rem;
}
.content-download-link:hover {
    color: #1e40af;
    text-decoration: underline;
}
.partner-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 0.75rem;
    padding: 1rem 4rem;
    min-height: 160px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.partner-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.1);
}
/* User jelzés (2026-08-26): a partner-kártyák halvány kék kerettel
   jelentek meg, ami hoverre eltűnt - ez a böngésző alap :focus
   outline-ja volt a kártyát átölelő <a>-n (kattintás után az <a> fókuszt
   kap, a UA alapértelmezett kék fókusz-keretet rajzolja, ami a legtöbb
   böngészőben csak mozgatásra/blur-re tűnik el). Kikapcsolva, helyette
   csak billentyűzetes navigációnál (:focus-visible) egy diszkrét,
   nem border-szerű glow jelzi a fókuszt. */
.partner-card-link { outline: none; }
.partner-card-link:focus-visible .partner-card {
    box-shadow: 0 0 0 3px rgba(29,78,216,0.25);
}
.partner-name {
    color: #1a1a2e;
}
.partner-name.small.fw-semibold.mb-2 {
    font-size: var(--fs-small);
    height: 45px;
}
.partner-logo-placeholder {
    width: 100%;
    height: 64px;
    background-color: #f1f3f5;
    border-radius: 0.5rem;
    color: #9ca3af;
    font-size: var(--fs-h4);
}
.partner-logo-img {
    max-width: 100%;
    max-height: 120px;
    object-fit: contain;
}
/* Mobilon (a 2 oszlopos, 50% szélességű kártyáknál - row-cols-2) a felirat
   már el van rejtve (lásd .partner-name fentebb) - a logó ilyenkor
   teljes szélességre nagyítva, csak 2px oldalsó belső paddinggal. */
@media (max-width: 767.98px) {
    .partner-card {
        padding: 1rem 2px;
    }
    .partner-logo-img {
        width: 100%;
    }
}

/* Főoldal "Magyar Resuscitatiós Társaság" + "Titkárság" blokk: a user
   kérésére a Titkárság-kártya minden keret/border/árnyék nélkül,
   teljesen "sima szövegként" jelenjen meg, ugyanúgy, mint a mellette/
   fölötte lévő "Magyar Resuscitatiós Társaság" blokk - minden nézetben,
   nem csak mobilon. */
.secretariat-card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.secretariat-card .card-body {
    padding: 0;
    background: transparent !important;
}
@media (max-width: 991.98px) {
    .secretariat-card {
        margin-top: 1.5rem !important;
    }
}
/* A Titkárság-kártya szöveges sorai (telefon/e-mail/cím, majd a
   számlaszám-jellegű apró jegyzet) - a user az inspectorban a globális
   .mb-1/.mb-0.small.text-muted/.card-body osztályokat módosította a
   kívánt hatás megmutatásához, de ezek Bootstrap utility-k, amiket a
   teljes oldalon több száz helyen újrahasznál - itt szűken, csak a
   Titkárság-kártyára szkópolva adjuk meg ugyanazt a hatást, a kért
   pontos pixel-méretekkel/sormagassággal. */
.secretariat-card p.mb-1,
.secretariat-card p.mb-0 {
    font-size: 13px;
    line-height: 17px;
}
.secretariat-card p.small.text-muted {
    font-size: 11px;
    line-height: 13px;
}

/* Hibajegyzék #18/25 (2026-08-25): a .redstar (kötelező mező jelölő csillag)
   a régi reanimatio.css-ben létezik, de a Bootstrap 5-ös redesign oldalak
   (reanimatio_layout_new.php) ezt nem töltik be - emiatt a régi <span
   class="redstar"> szín nélkül, feketén jelent meg. Itt is definiáljuk,
   piros színnel - user visszajelzés alapján az EREDETI, sima (nem felső
   indexes) megjelenés volt a jobb, arra visszaállítva. */
span.redstar {
    color: #dc3545;
}

/* User kérés (2026-09-11) - "minden űrlap hibajelzések egységesítése":
   ugyanaz a gyökérok, mint a .redstar-nál fent - a kitöltetlen kötelező
   mezők piros kerete a régi reanimatio.css-ben élt (.errored class),
   amit az új BS5 téma nem tölt be, a JS pedig azóta a hivatalos
   Bootstrap 5 "is-invalid" class-ot adja hozzá (support.js/Course.js),
   ami .form-control/.form-select/.form-check-input elemeken már
   magától is piros keretet ad. A régi, BS3-stílusú
   <input type="radio" class="signupInput/supportInput"> jelölőknek
   (Fizetési mód, "Tagja Ön az MRT-nek?" stb.) viszont NINCS
   .form-check-input class-uk, ezért rájuk a BS5 saját szabálya nem
   vonatkozna - ez a kiegészítő szabály biztosítja, hogy MINDEN
   .is-invalid elem (a fenti kettőtől függetlenül is) kapjon látható
   piros keretet, akármilyen mező-típusról legyen szó. */
.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 1px #dc3545;
}

/* User kérés (2026-09-11) - az adatkezelési nyilatkozat-pontok
   ("1. Adatkezelés a felnőttképzési szerződés..." stb.) rejtett,
   display:none checkbox-szal működnek, a látható elem az Igen/Nem
   "díszrádió" - a mezőre tett .is-invalid láthatatlan lenne. Ezeknél a
   Course.js a KÖRÜLVEVŐ .form-group-ra teszi a .is-invalid-ot (lásd
   setErrorUp() consent_declaration ága), ez a szabály adja hozzá a
   látható piros keretet. Csak #ApplyModal-on belül, és mivel a
   sima mező-hibák a <input>-ra (nem a .form-group-ra) rakják a
   class-t, ez a szabály KIZÁRÓLAG a nyilatkozat-pontokra hat. */
#ApplyModal .form-group.is-invalid {
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
    padding: 0.75rem;
}
/* 2026-09-25: a közös blokkban lévő 4 első nyilatkozat mindegyike külön
   (.consent-item) kapja a piros keretet - lásd Course.js setErrorUp(). */
#ApplyModal .consent-item.is-invalid {
    border: 1px solid #dc3545;
    border-radius: 0.375rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}