/* public/css/custom.css */

/* ============================================================
   SZÍNPALETTA (fekete / szürke / zöld)
   Minden egyedi stílus ezekre a változókra épül — egy helyen
   át lehet színezni az egész oldalt.
   ============================================================ */
:root {
    --ink-black:  #000000;   /* fejléc háttér */
    --ink-900:    #0b0f17;   /* lábléc, hero alap */
    --ink-800:    #111827;   /* dropdown */
    --ink-700:    #1b2436;   /* sötét felület (kártya) */
    --ink-600:    #2a3852;   /* szegély sötét felületen */
    --hairline:   rgba(255, 255, 255, 0.08);
    --hairline-2: rgba(255, 255, 255, 0.15);

    --green:        #10b981;
    --green-hover:  #059669;
    --green-soft:   rgba(16, 185, 129, 0.15);
    --green-border: rgba(16, 185, 129, 0.40);

    --text-light: #f8fafc;
    --text-dim:   #cbd5e1;
    --text-muted: #94a3b8;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 50px;

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alapvető betűtípus beállítása */
/* 1. Képernyő magasságának biztosítása a gyökér elemeken */
html, body {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

/* 2. Body beállítása Flexbox konténernek (vertikális elrendezés) */
body {
    /* FONTOS: min-height (és nem height), különben a body maga lesz a görgetett
       doboz, és a sticky fejléc nem tapad meg a képernyő tetején. */
    min-height: 100%;
    display: flex;
    flex-direction: column;
	font-family: Arial, sans-serif;
    line-height: 1.6;
    overflow-x: clip; /* Megakadályozza a vízszintes görgetést (a sticky fejléc megtartásával) */
}

/* 3. A fő tartalom (main) növekedésének engedélyezése */
main {
    /* Ez biztosítja, hogy a main elem kitölt minden rendelkezésre álló helyet, 
       így tolja le a footert a képernyő aljára */
    flex-grow: 1;
}

/* 4. A lábléc fixálásának biztosítása */
footer {
    flex-shrink: 0; /* Megakadályozza, hogy a lábléc összenyomódjon */
}

main.container {
    flex-grow: 1;
    /* Ezt a paddingot adtuk hozzá, ami az mt-4-gyel megegyező eltolást okoz, de nem okoz görgetést Flexboxban */
    padding-top: 0; 
}

/* Felülírjuk a Bootstrap alap szürke navbárját egy egyedi színre */
/* Megjegyzés: A Bootstrap osztályát (bg-dark) kell felülírni */
.bg-dark {
    background-color: var(--ink-900) !important; /* Mély szürke-fekete */
}

/* Primary gomb színének felülírása */
.btn-primary {
    background-color: var(--green); /* Zöld kiemelés */
    border-color: var(--green);
    color: #ffffff;
}

/* Hover és Active állapot */
.btn-primary:hover,
.btn-primary:active {
    background-color: var(--green-hover);
    border-color: var(--green-hover);
    color: #ffffff;
    /* Hogy felülírjuk a :hover stílus miatti box-shadow-t is, ha van */
    box-shadow: none !important;
}

/* JAVÍTÁS: A fókusz (kattintás, tabulálás) állapot agresszív felülírása */
.btn-primary:focus {
    /* Teljesen eltávolítja a vastag default szegélyt/box-shadow-t */
    box-shadow: none !important;

    /* Visszaállítjuk a háttér és szegély színeket a sötétebb hover árnyalatra */
    background-color: var(--green-hover);
    border-color: var(--green-hover);
    color: #ffffff;
}



/* Login gomb színének felülírása adminhoz */
.btn-primarylogin {
    background-color: var(--green);
    border-color: var(--green);
    color: #ffffff;
}
/* Hover és Active állapot adminhoz*/
.btn-primarylogin:hover,
.btn-primarylogin:active {
    background-color: var(--green-hover);
    border-color: var(--green-hover);
    /* Hogy felülírjuk a :hover stílus miatti box-shadow-t is, ha van */
    box-shadow: none !important;
    color: #ffffff;
}
/* JAVÍTÁS: A fókusz (kattintás, tabulálás) állapot agresszív felülírása */
.btn-primarylogin:focus {
    /* Teljesen eltávolítja a vastag default szegélyt/box-shadow-t */
    box-shadow: none !important;
    /* Visszaállítjuk a háttér és szegély színeket a sötétebb hover árnyalatra */
    background-color: var(--green-hover);
    border-color: var(--green-hover);
    color: #ffffff;
}



/* Kiemelt gomb színének felülírása adminhoz */
.btn-primarysave {
    background-color: var(--green);
    border-color: var(--green);
    color: #ffffff;
}
/* Hover és Active állapot admin gombokhoz*/
.btn-primarysave:hover,
.btn-primarysave:active {
    background-color: var(--green-hover);
    border-color: var(--green-hover);
    color: #ffffff;
    /* Hogy felülírjuk a :hover stílus miatti box-shadow-t is, ha van */
    box-shadow: none !important;
}

/* JAVÍTÁS: A fókusz (kattintás, tabulálás) állapot agresszív felülírása */
.btn-primarysave:focus {
    box-shadow: none !important;
    /* Visszaállítjuk a háttér és szegély színeket a sötétebb hover árnyalatra */
    background-color: var(--green-hover);
    border-color: var(--green-hover);
    color: #ffffff;
}

/* Teljesen kikapcsoljuk az outline-t minden gombnál, ha a fenti nem segít */
.btn:focus {
    outline: none !important;
}


@media (max-width: 991.98px) {
    .container {
        /* Szélesség 95%-ra állítása (mobilon és tableten) */
        max-width: 100% !important;

        /* Fontos: A Bootstrap 5 a konténerekre alapértelmezetten alkalmaz horizontális paddingot.
           Ezt a paddingot nullázzuk le mobilon, hogy a tartalom közelebb kerüljön a szélekhez. */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* A fejléc viszont NEM tapadhat a képernyő széléhez.
       Mobilon a teljes szélesség kell (a 90%-os korlát mellett a logó +
       gombok + hamburger kifeszítené az oldalt). */
    header .navbar > .container,
    .site-navbar > .container,
    .top-contact-bar > .container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    /* A logó zsugorodhat, ha a gomboknak kell a hely */
    .site-brand {
        min-width: 0;
        overflow: hidden;
    }

    .brand-logo {
        max-width: 100%;
        object-fit: contain;
        object-position: left center;
    }
}


/* --- 1. CSOPORT: Fő konténerek (90% szélesség és középre igazítás) --- */
/* Ezek a közvetlenül a main-ben lévő, vagy fő elrendezést adó elemek */
.layout-builder-rendered .layout-row > .container,
.layout-row > .container-fluid,
.egyeb,
main > .container.mt-5,
main > .container.py-4 {
    width: 90% !important;
    max-width: 90% !important;
    margin-left: auto;
    margin-right: auto;
}

/* --- 2. CSOPORT: Beágyazott konténerek (100% szélesség) --- */
/* Mivel a szülőjük (fenti csoport) már 90%-os, ezeknek teljesen ki kell tölteniük a szülőt.
   Ez felülírja a Bootstrap alapértelmezett fix szélességeit a beágyazott elemeknél. */
main > .container.mt-5 > .container,
main > .container.py-4 > .container, /* <--- EZT ADTAM HOZZÁ A KÉP ALAPJÁN */
.category-wrapper,
article.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0; /* Opcionális: a duplázott padding elkerülése végett */
    padding-right: 0;
}

/* A főoldali tartalom konténerének további belső margója */
.container {
    margin-left: auto;
    margin-right: auto;
    padding-top: 20px;
    padding-bottom: 20px;
}

main.container, header .navbar > .container { 
	max-width: 90% !important; 
   
}
  
footer .container { 
	max-width: 90% !important;
    width: 90% !important;
}

.container.mt-5 {
margin-top: 0 !important;	
}

.table > :not(:first-child) {
  border-top: 0px;
}

/* reCAPTCHA jelvény elrejtése */
.grecaptcha-badge { 
    visibility: hidden; 
}

/* Szelektor mindkét táblázat burkolójára: #data-table_wrapper ÉS #menu-data-table_wrapper */
#data-table_wrapper .dt-length,
#menu-data-table_wrapper .dt-length {
    padding-left: 15px !important; /* 1. dt-length (bal padding 15px) */
}

#data-table_wrapper .dt-search,
#menu-data-table_wrapper .dt-search {
    padding-right: 15px !important; /* 2. dt-search (jobb padding 15px) */
}

#data-table_wrapper .dt-info,
#menu-data-table_wrapper .dt-info {
    padding-left: 15px !important; /* 3. dt-info (bal padding 15px) */
}

#data-table_wrapper .dt-paging,
#menu-data-table_wrapper .dt-paging {
    padding-right: 15px !important; /* 4. dt-paging (jobb padding 15px) */
}


.toggle-status-btn {
    cursor: pointer; 
    /* Ez biztosítja, hogy az egérmutató kéz (pointer) legyen, 
       jelezve a kattinthatóságot. */
}

 /* Beállítjuk a tartalom maximális szélességét, hogy ne nyúljon túl hosszúra az olvashatóság érdekében */
    .article-container {
        max-width: 90%;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 50px;
    }
    
    /* Cikk borítókép stílusa */
    .article-image {
        /*width: 100%;*/
		display: block;
		margin-left: auto;
		margin-right: auto;
        max-height: 450px; /* Magasság korlátozása nagy képeknél */
		max-width: 100%;
        object-fit: cover; /* Kitölti a rendelkezésre álló helyet, de nem torzít */
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        margin-bottom: 30px;
    }

    /* A szövegtörzs olvashatóságának javítása */
    .article-content {
        font-size: 1.1rem;
        line-height: 1.8;
        color: #333;
    }
    .article-content p {
        margin-bottom: 1.5rem;
    }
    
    /* A TinyMCE által generált képek is korlátozott szélességűek legyenek */
    .article-content img {
        max-width: 100%;
        height: auto;
        border-radius: 6px;
    }

    /* Float right/left képek javítása - ne lógjanak ki a konténerből */
    .article-content img[style*="float: right"],
    .article-content img[style*="float:right"] {
        max-width: 50% !important;
        margin-left: 20px;
        margin-bottom: 15px;
        margin-top: 5px;
    }

    .article-content img[style*="float: left"],
    .article-content img[style*="float:left"] {
        max-width: 50% !important;
        margin-right: 20px;
        margin-bottom: 15px;
        margin-top: 5px;
    }

    /* Clearfix az article-content-hez, hogy a float-olt elemeket tartalmazza */
    .article-content::after {
        content: "";
        display: table;
        clear: both;
    }

    /* Reszponzív: mobilon a float képek teljes szélességűek legyenek */
    @media (max-width: 768px) {
        .article-content img[style*="float: right"],
        .article-content img[style*="float:right"],
        .article-content img[style*="float: left"],
        .article-content img[style*="float:left"] {
            float: none !important;
            max-width: 100% !important;
            margin-left: 0 !important;
            margin-right: 0 !important;
            display: block;
            margin-bottom: 15px;
        }
    }

    /* Kiemelt bevezető (excerpt) stílusa */
    .article-excerpt {
        font-size: 1.3rem;
        color: #555;
        border-left: 5px solid #007bff;
        padding-left: 15px;
        margin-bottom: 30px;
    }



/* Reszponzív finomítások a home.php mintájára */
@media (max-width: 576px) {
    .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        --bs-gutter-x: 0;
    }
    .col-12, .px-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Mobilron a lekerekítést érdemes levenni, ha a modulok is faltól-falig érnek, 
       de mivel kérted a lekerekítést, a 'rounded' osztályt fent hagytuk az article-en. */
}


.last-child-no-border:last-child {
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}


/* Opcionális: Szebb keret a keresőnek, ha fókuszban van */
.dt-search input:focus {
    box-shadow: 0 0 5px rgba(0,123,255,0.5);
    outline: none;
}

.btn-outline-category {
    color: #fd7e14;
    border-color: #fd7e14;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-outline-category:hover {
    background-color: #fd7e14; /* A keret színe lesz a háttér */
    color: #ffffff;           /* A szöveg pedig fehér, hogy látszódjon */
    border-color: #fd7e14;
}

.btn-outline-seo {
    color: #20c997;
    border-color: #20c997;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-outline-seo:hover {
    background-color: #20c997; /* A keret színe lesz a háttér */
    color: #ffffff;           /* A szöveg pedig fehér, hogy látszódjon */
    border-color: #20c997;
}


.btn-outline-indigo {
    color: #6610f2;
    border-color: #6610f2;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-outline-indigo:hover {
    background-color: #6610f2; /* A keret színe lesz a háttér */
    color: #ffffff;           /* A szöveg pedig fehér, hogy látszódjon */
    border-color: #6610f2;
}

.btn-slider_button {
	display: inline-block;
    margin-top: 15px;
    padding: 10px 25px;
    background: linear-gradient(135deg, var(--green), var(--green-hover));
    color: #ffffff;
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-weight: 700;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}
.btn-slider_button:hover {
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}


#main-nav-links .nav-item.dropdown1 {
    margin-left: 0 !important;
	position:relative;
}




/* Egységesített menü nyíl animáció (Oldalsáv + Lábléc) */
[data-bs-toggle="collapse"] .transition-icon {
    transition: transform 0.3s ease;
    font-size: 0.8rem;
    display: inline-block;
}

/* Amikor a vezérlő NEM collapsed (tehát nyitva van), forgassa a nyilat */
[data-bs-toggle="collapse"]:not(.collapsed) .transition-icon {
    transform: rotate(180deg);
}

/* Behúzás és elválasztó vonal javítása a lábléchez is */
.module .border-start, 
.footer-widget .border-start {
    border-left: 2px solid #dee2e6 !important;
    margin-left: 10px !important;
}

/* Hover effekt javítása a lábléchez is */
.footer-widget a.hover-primary:hover {
    color: #007bff !important;
    padding-left: 5px;
    transition: all 0.2s ease;
}

/* Footer widget képek korlátozása - megakadályozza a kilógást */
.footer-widget {
    overflow: hidden;
}

.footer-widget img {
    max-width: 100%;
    height: auto;
}

.footer-widget-content {
    overflow: hidden;
}

.footer-widget-content img {
    max-width: 100%;
    height: auto;
}


.nav-item-wrapper {
    display: flex;
    align-items: center;
}

.dropdown-item-wrapper {
    display: flex;
    align-items: center;
}

.dropdown-caret {
    padding: 0 8px;
 
}
.dropdown-split-hover .nav-item-wrapper .dropdown-caret{
   color: aliceblue;
}
.dropdown-split-hover.show .nav-item-wrapper .dropdown-caret{
   transform: rotate(180deg);
}
.dropdown-submenu.show .dropdown-caret  {
   transform: rotate(180deg);
}


/* =======================================
   GALÉRIA STÍLUSOK (Fancybox lightbox)
   ======================================= */

/* Galéria konténer */
.gallery-container {
    margin-bottom: 2rem;
}

.gallery-container .gallery-title {
    font-weight: 600;
    color: #333;
    padding-bottom: 0.5rem;
    display: inline-block;
}

/* Galéria képek grid */
.gallery-grid .gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-grid .gallery-thumb {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-grid .gallery-item:hover .gallery-thumb {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Overlay effekt hover-kor */
.gallery-grid .gallery-item::after {
    content: '\f00e'; /* FontAwesome nagyító ikon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: white;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    pointer-events: none;
}

.gallery-grid .gallery-item:hover::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Galéria kép felirat */
.gallery-grid small {
    font-size: 0.75rem;
    line-height: 1.2;
}


.gallery-page .gallery-thumb {
    width: 100%;
    height: 150px;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.3s ease;
}
.gallery-page .gallery-item:hover .gallery-thumb {
    transform: scale(1.02);
}



/* =======================================
   MODULOK EGYFORMA MAGASSÁG
   ======================================= */
/* 1. Oszlopok beállítása:
   A 'display: flex' miatt az oszlopban lévő tartalom (a modul)
   automatikusan megnyúlhat az oszlop aljáig. */
.layout-builder-rendered .row > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/* 2. Modul beállítása:
   A 'flex-grow: 1' biztosítja, hogy a modul kitöltse a magasságot.
   Így ha a szomszéd oszlop magasabb, ez a modul is megnő hozzá. */
.layout-builder-rendered .module {
    display: flex;
    flex-direction: column;
    flex-grow: 1;       /* Ez a kulcs a nyújtáshoz */
    width: 100%;        /* Biztosítjuk a szélességet */
    margin-bottom: 20px;
}

/* 3. Kártya (Card) beállítása:
   A 'height: 100%' miatt a kártya kerete végigér a modulon. */
.layout-builder-rendered .module .card {
    height: 100%; 
    display: flex;
    flex-direction: column;
}

/* 4. Kártya tartalom (Body):
   A 'flex-grow: 1' miatt a szöveges rész tölti ki az üres helyet,
   így a gomb lecsúszik az aljára. */
.layout-builder-rendered .module .card-body {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* 5. Gomb igazítása az aljára */
.layout-builder-rendered .module .module-button,
.layout-builder-rendered .module .mt-3.text-center { 
    margin-top: auto; 
    padding-top: 15px;
}

/* ============================================================
   FEJLÉC — fekete sáv, bal oldalt a teljes magasságú logó,
   középen a menü, jobb oldalt a Belépés / Regisztráció gomb.
   ============================================================ */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--ink-black);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    /* A böngésző ne ehhez az elemhez horgonyozza a görgetést: a fejléc
       görgetéskor változtatja a magasságát, a horgonyzás pedig ilyenkor
       oda-vissza korrigálná a scroll pozíciót (rángó képernyő). */
    overflow-anchor: none;
}

/* Kapcsolati sáv a navbar fölött */
.top-contact-bar {
    background-color: #0a0a0a;
    border-bottom: 1px solid var(--hairline);
    font-size: 0.95rem;
}

/* A Bootstrap .small osztályt is felülírjuk, hogy tényleg érvényesüljön */
.top-contact-bar .small {
    font-size: 0.95rem;
}

/* A globális .container 20px-es függőleges paddingja itt nem kell */
.top-contact-bar > .container {
    padding-top: 0;
    padding-bottom: 0;
}

.top-contact-bar .contact-item {
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.top-contact-bar .contact-item i {
    color: var(--green);
    font-size: 0.9rem;
}

.top-contact-bar a {
    color: var(--text-dim);
    transition: color 0.2s ease;
}

.top-contact-bar a:hover {
    color: var(--green);
}

/* FONTOS: a kapcsolati sáv görgetéskor SEM tűnik el (korábban itt egy
   `display: none` állt). Az elrejtés egy lépésben ~35 px-szel csökkentette a
   fejléc magasságát, épp a küszöb átlépésének pillanatában — ettől rándult
   meg a képernyő. A tömörítést most csak a logó (80→58 px) és a navbar
   paddingja adja, a sáv magassága végig változatlan. */
.site-header.is-scrolled .top-contact-bar {
    display: block;
}

/* --- A navbar rácsa: logó | menü | gombok --- */
.site-navbar {
    background-color: var(--ink-black);
    border-bottom: 1px solid var(--hairline);
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    transition: padding 0.3s var(--ease);
}

.site-header.is-scrolled .site-navbar {
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
}

.navbar > .container {
    display: grid !important;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding-top: 0;
    padding-bottom: 0;
}

/* --- Logó: teljes fejlécmagasságban --- */
.site-brand {
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 0;
}

.brand-logo {
    height: 80px;             /* A fejléc magasságát a logó adja */
    width: auto;
    display: block;
    transition: height 0.3s var(--ease), filter 0.3s ease;
}

.site-brand:hover .brand-logo {
    filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.35));
}

.site-header.is-scrolled .brand-logo {
    height: 58px;
}

/* --- Középre zárt főmenü, pill alakú kerettel --- */
.site-nav-collapse {
    justify-self: center;
}

.site-nav-links {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(255, 255, 255, 0.03);
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--hairline);
    margin: 0;
}

.site-nav-links .nav-link,
.site-nav-links .nav-item-wrapper > .nav-link {
    color: var(--text-dim);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border-radius: 20px;
    background: transparent;
    transition: color 0.28s var(--ease);
}

/* --- MENÜ EFFEKT ---
   Hoverre (és az aktív menüponton) egy zöld gradiens pill nagyítódik a
   menüpont mögé, maga a menüpont megemelkedik és zöld fényt kap. */
.site-nav-links > .nav-item > .nav-link,
.site-nav-links .nav-item-wrapper {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    transition: transform 0.28s var(--ease);
}

.site-nav-links > .nav-item > .nav-link::before,
.site-nav-links .nav-item-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--green), var(--green-hover));
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
    opacity: 0;
    transform: scale(0.75);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}

.site-nav-links > .nav-item > .nav-link:hover::before,
.site-nav-links > .nav-item > .nav-link:focus-visible::before,
.site-nav-links > .nav-item > .nav-link.active::before,
.site-nav-links .nav-item-wrapper:hover::before,
.site-nav-links .nav-item-wrapper:has(.nav-link.active)::before,
.site-nav-links .dropdown-split-hover.show .nav-item-wrapper::before {
    opacity: 1;
    transform: scale(1);
}

.site-nav-links > .nav-item > .nav-link:hover,
.site-nav-links > .nav-item > .nav-link.active,
.site-nav-links .nav-item-wrapper:hover,
.site-nav-links .dropdown-split-hover.show .nav-item-wrapper {
    transform: translateY(-2px);
}

.site-nav-links > .nav-item > .nav-link:hover,
.site-nav-links > .nav-item > .nav-link:focus,
.site-nav-links > .nav-item > .nav-link.active,
.site-nav-links .nav-item-wrapper:hover > .nav-link,
.site-nav-links .nav-item-wrapper:hover > .dropdown-caret,
.site-nav-links .dropdown-split-hover.show .nav-link,
.site-nav-links .dropdown-split-hover.show .dropdown-caret {
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.site-nav-links .dropdown-caret {
    color: var(--text-dim);
    cursor: pointer;
    padding: 0 10px 0 2px;
    font-size: 0.75rem;
    transition: transform 0.3s var(--ease), color 0.28s var(--ease);
}

/* --- Sötét lenyíló menük --- */
.dropdown-split-hover,
.dropdown-submenu {
    position: relative;
}

.site-navbar .dropdown-menu {
    background-color: var(--ink-800);
    border: 1px solid var(--hairline-2);
    border-radius: var(--radius-md);
    padding: 0.4rem;
    margin-top: 0.6rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.site-navbar .dropdown-item {
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.9rem;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.site-navbar .dropdown-item:hover,
.site-navbar .dropdown-item:focus,
.site-navbar .dropdown-item.active {
    background-color: var(--green-soft);
    color: #ffffff;
    padding-left: 1.1rem;
}

.site-navbar .dropdown-divider {
    border-top-color: var(--hairline);
    margin: 0.3rem 0;
}

.site-navbar .dropdown-item-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-navbar .dropdown-item-wrapper > .dropdown-item {
    flex: 1;
}

/* Többszintű almenü asztali nézetben oldalra nyílik */
@media (min-width: 992px) {
    .site-navbar .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -0.4rem;
        margin-left: 0.2rem;
    }
}

/* --- Jobb oldali gombok --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    white-space: nowrap;
    justify-self: end;
}

/* Belépés: visszafogott, keret nélküli */
.header-actions .btn-login,
.header-actions .btn-register {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.header-actions .btn-login {
    color: #e2e8f0;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.header-actions .btn-login:hover {
    color: #ffffff;
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--hairline-2);
}

/* Regisztráció: zöld keretes, világító hover */
.header-actions .btn-register {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.6rem 1.1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--green-border);
    background: rgba(16, 185, 129, 0.05);
    transition: all 0.3s ease;
}

.header-actions .btn-register:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: var(--green);
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.25);
    transform: translateY(-1px);
}

/* Bejelentkezett felhasználó / admin gombja */
.header-actions .btn-header-account {
    background: linear-gradient(135deg, var(--green), var(--green-hover));
    color: #ffffff;
    font-size: 0.88rem;
    font-weight: 700;
    padding: 0.6rem 1.1rem;
    border: none;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
    transition: all 0.3s ease;
}

.header-actions .btn-header-account:hover,
.header-actions .btn-header-account:focus {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

/* --- Mobilmenü gomb --- */
.navbar-toggler {
    flex-shrink: 0;
    border: 1px solid var(--hairline-2);
    border-radius: var(--radius-sm);
    padding: 0.35rem 0.6rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}

/* ============================================================
   FEJLÉC — MOBIL / TABLET (Bootstrap LG töréspont alatt)
   Sorrend: logó | gombok | hamburger, alatta a lenyíló menü.
   ============================================================ */
@media (max-width: 991.98px) {
    .navbar > .container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: space-between;
        gap: 0.5rem;
    }

    /* A kitöltő margó a LOGÓRA kerül, nem a gombokra — különben a gombok
       jobbra tolódnak és a hamburger kiszorul a képernyő széle mögé. */
    .site-brand      { order: 1; margin-right: auto; }
    .header-actions  { order: 2; margin-left: 0; }
    .navbar-toggler  { order: 3; }
    .site-nav-collapse {
        order: 4;
        flex-basis: 100%;
        flex-grow: 1;
        margin-top: 10px;
    }

    /* A pill keret mobilon kártyává alakul */
    .site-nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: 0.15rem;
        border-radius: var(--radius-md);
        padding: 0.5rem;
        margin-bottom: 0.75rem;
    }

    .site-nav-links .nav-link {
        padding: 0.7rem 1rem;
        border-radius: var(--radius-sm);
    }

    /* Mobilon a kiemelés is szögletesebb, és nem emelkedik meg */
    .site-nav-links > .nav-item > .nav-link,
    .site-nav-links .nav-item-wrapper,
    .site-nav-links > .nav-item > .nav-link::before,
    .site-nav-links .nav-item-wrapper::before {
        border-radius: var(--radius-sm);
    }

    .site-nav-links > .nav-item > .nav-link:hover,
    .site-nav-links > .nav-item > .nav-link.active,
    .site-nav-links .nav-item-wrapper:hover,
    .site-nav-links .dropdown-split-hover.show .nav-item-wrapper {
        transform: none;
    }

    /* Mobilon a FŐMENÜ almenüi beágyazott listaként jelennek meg.
       FONTOS: csak a .site-nav-links alattiak — a jobb oldali admin/felhasználói
       dropdown a lenyíló menün kívül, lebegve jelenik meg, annak marad a
       sötét, dobozos stílusa (különben átlátszó és olvashatatlan). */
    .site-nav-links .dropdown-menu {
        background-color: rgba(255, 255, 255, 0.03);
        border: none;
        box-shadow: none;
        margin: 0 0 0 0.75rem;
        border-left: 2px solid var(--hairline-2);
        border-radius: 0;
    }

    /* A fiók-menü mobilon is önálló, jól olvasható panel */
    .header-actions .dropdown-menu {
        background-color: var(--ink-800);
        border: 1px solid var(--hairline-2);
        border-radius: var(--radius-md);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
        max-height: 75vh;
        overflow-y: auto;
    }

    .header-actions {
        gap: 0.5rem;
    }

    .header-actions .btn-login,
    .header-actions .btn-register,
    .header-actions .btn-header-account {
        font-size: 0.8rem;
        padding: 0.5rem 0.8rem;
    }
}

/* Mobilon a kapcsolati adatok egymás alatt, külön sorban állnak (e-mail,
   telefon, esetleg nyitvatartás) — egy sorba nem férnének ki, a Bootstrap
   sortörése pedig középen vágná el a hosszabb e-mail címet. Tableten
   (768 px fölött) marad az egysoros, jobbra zárt változat. */
@media (max-width: 767.98px) {
    .top-contact-bar .contact-bar-items {
        flex-direction: column;
        align-items: center;
        gap: 0.15rem !important;
    }

    .top-contact-bar,
    .top-contact-bar .small {
        font-size: 0.82rem;
    }

    .top-contact-bar .contact-item i {
        font-size: 0.78rem;
    }
}

/* Kis mobilon a gombokból csak az ikon marad, így a logó + gombok +
   hamburger egy sorba fér — de mindegyik marad kényelmesen megnyomható
   méretű (min. 46px), és a fejléc sem lesz aránytalanul alacsony. */
@media (max-width: 575.98px) {
    /* A logó 3,75:1 arányú, ezért a magassága sok vízszintes helyet visz.
       A clamp() a kijelző szélességéhez igazítja: kis telefonon is kifér a
       logó + 2 gomb + hamburger egy sorba, nagyobbon viszont magasabb lehet. */
    .brand-logo,
    .site-header.is-scrolled .brand-logo {
        height: clamp(42px, 12.5vw, 58px);
    }

    .site-navbar {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .site-header.is-scrolled .site-navbar {
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .header-actions {
        gap: 0.4rem;
    }

    .header-actions .btn-label,
    .header-actions .account-label {
        display: none;
    }

    .header-actions .btn-login,
    .header-actions .btn-register,
    .header-actions .btn-header-account {
        width: 46px;
        height: 46px;
        padding: 0;
        justify-content: center;
        display: inline-flex;
        align-items: center;
        font-size: 1.15rem;
    }

    .header-actions .btn-login i,
    .header-actions .btn-register i,
    .header-actions .btn-header-account i {
        margin-right: 0 !important;
    }

    /* A fiók-gomb lenyíló nyila csak helyet venne el az ikon mellől */
    .header-actions .btn-header-account.dropdown-toggle::after {
        display: none;
    }

    .navbar-toggler {
        width: 46px;
        height: 46px;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .navbar-toggler-icon {
        width: 1.5em;
        height: 1.5em;
    }
}

/* Nagyon keskeny kijelzőn (360px alatt) picit szűkebb minden, hogy a
   logó + gombok + hamburger még mindig egy sorban maradjon */
@media (max-width: 359.98px) {
    .site-navbar > .container {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .header-actions .btn-login,
    .header-actions .btn-register,
    .header-actions .btn-header-account,
    .navbar-toggler {
        width: 42px;
        height: 42px;
    }

    .brand-logo,
    .site-header.is-scrolled .brand-logo {
        height: 38px;
    }
}

/* ============================================================
   HERO VIDEÓ (főoldal, a slider helyén)
   Amíg a videó nem indul el — mobilon amíg a látogató nem kezd
   görgetni —, a régi oldal háttérképe látszik.
   ============================================================ */
.hero-video {
    position: relative;
    width: 100%;
    height: min(78vh, 720px);
    min-height: 340px;
    overflow: hidden;
    background-color: var(--ink-900);
    background-image: url('../images/bgvideo/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--ink-600);
}

.hero-video__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;                       /* A háttérkép látszik, amíg a videó el nem indul */
    /* Rövid átúszás: hosszabb fade alatt a háttérkép és a videó egymáson át
       látszik, ami elmosódott, szellemképes hatást kelt. */
    transition: opacity 0.3s ease-out;
    pointer-events: none;
}

.hero-video.is-playing .hero-video__media {
    opacity: 1;
}

/* Finom sötétítés: a fejléc és a tartalom felé lágyan olvad a kép */
.hero-video__overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.10) 35%, rgba(11, 15, 23, 0.75) 100%);
    pointer-events: none;
}

@media (max-width: 767.98px) {
    .hero-video {
        height: 58vh;
        min-height: 300px;
        background-image: url('../images/bgvideo/background-m-poster.jpg');
    }
}

/* ============================================================
   LÁBLÉC — sötét, a fejléccel egy stílusban
   ============================================================ */
.site-footer {
    background-color: var(--ink-900);
    color: var(--text-dim);
    border-top: 1px solid var(--ink-600);
}

.site-footer a {
    color: var(--text-dim);
    transition: color 0.2s ease;
}

.site-footer a:hover {
    color: var(--green);
}

.site-footer .text-muted,
.site-footer .text-muted a {
    color: var(--text-muted) !important;
}

.site-footer hr {
    border-top-color: var(--hairline);
    opacity: 1;
}

.site-footer .footer-widget,
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
    color: var(--text-light);
}

.site-footer .border-start {
    border-left-color: var(--hairline-2) !important;
}

.site-footer .footer-widget a.hover-primary:hover {
    color: var(--green) !important;
}

/* ============================================================
   KEDVEZMÉNYEZETTI INFOBLOKK (Széchenyi Terv Plusz / EU)
   Pályázati arculati elem: minden oldalon folyamatosan látszania kell,
   ezért lebegve, a bal alsó sarokban ül. A logócsomagot NEM szabad
   átszínezni vagy körbevágni, ezért kap fehér alátétet a sötét oldalon.
   ============================================================ */
.mff-infoblokk {
    position: fixed;
    left: 18px;
    bottom: 18px;
    /* A chat widget (9998) és a süti sáv (9999) alatt marad, de a normál
       tartalom fölött — így egy nyitott chat / süti sáv nem takarja ki. */
    z-index: 1020;
    background-color: #ffffff;
    padding: 8px 10px;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    line-height: 0;
    transition: box-shadow 0.3s ease, transform 0.3s var(--ease);
}

/* A blokk a projektet bemutató cikkre visz (a slug a footer.php-ban) */
.mff-infoblokk a {
    display: block;
    line-height: 0;
    border-radius: 4px;
}

.mff-infoblokk:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.mff-infoblokk a:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 3px;
}

.mff-infoblokk img {
    display: block;
    width: clamp(190px, 19vw, 280px);
    height: auto;
}

/* Az admin felület világos és sűrű — ott az arculati elem csak zavarna */
body.admin-view .mff-infoblokk {
    display: none;
}

/* A lap aljára érve a lebegő blokk ne üljön rá a lábléc tartalmára */
body.site-view .site-footer {
    padding-bottom: 110px !important;
}

@media (max-width: 991.98px) {
    .mff-infoblokk {
        left: 12px;
        bottom: 12px;
        padding: 6px 8px;
        border-radius: 8px;
    }

    .mff-infoblokk img {
        width: 165px;
    }

    body.site-view .site-footer {
        padding-bottom: 80px !important;
    }
}

@media (max-width: 575.98px) {
    .mff-infoblokk img {
        width: 135px;
    }
}

@media print {
    .mff-infoblokk {
        position: static;
        box-shadow: none;
    }
}


/* ============================================================
   AI CHATBOT - DASHBOARD KÁRTYA ÉS GOMB STÍLUSOK
   ============================================================ */

.btn-outline-purple {
    color: #6f42c1;
    border-color: #6f42c1;
    background-color: transparent;
    transition: all 0.3s ease;
}

.btn-outline-purple:hover {
    background-color: #6f42c1;
    color: #ffffff;
    border-color: #6f42c1;
}

.border-purple {
    border-color: #6f42c1 !important;
}

/* ============================================================
   REGISZTRÁCIÓS OLDAL STÍLUSOK
   ============================================================ */

/* Regisztrációs kártya */
.register-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    padding: 40px;
    width: 100%;
    max-width: 450px;
}

.register-card h2 {
    color: #333;
}

/* Login kártya (nincs layout builder wrapper, ezért külön margó kell) */
.login-card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    padding: 40px;
    width: 100%;
    max-width: 450px;
    margin: 0 25px;
}

@media (min-width: 576px) {
    .login-card {
        margin: 0;
    }
}

.login-card h2 {
    color: #333;
}

/* ============================================================
   JELSZÓ KÖVETELMÉNYEK STÍLUSOK (Regisztráció + Admin)
   ============================================================ */

.password-requirements {
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

.password-requirements ul {
    margin: 5px 0 0 0;
    padding-left: 20px;
}

.password-requirements .requirement {
    color: #dc3545;
    transition: color 0.2s ease;
}

.password-requirements .requirement.valid {
    color: #28a745;
}

.password-requirements .requirement.valid::before {
    content: '\2713 ';
}

.password-requirements .requirement:not(.valid)::before {
    content: '\2717 ';
}

/* ============================================================
   DESIGN FINOMÍTÁSOK (2026-08-18)
   Minden felülírás ITT történik — a komponensek saját (inline)
   stílusait és a Bootstrap segédosztályait írjuk felül, a
   forrásfájlok érintése nélkül.
   ============================================================ */

/* Sötétebb zöld: világos (fehér) háttéren OLVASHATÓ szöveghez.
   A --green (#10b981) fehéren csak ~2,5:1 kontrasztot ad, ami kevés. */
:root {
    --green-ink: #047857;
}

/* ------------------------------------------------------------
   1) TÓ TÉRKÉP — állás kiemelés (hover / kattintás / fókusz)
   A térkép nézet inline stílusa vastag (3 px), teli zöld keretet
   és fehér fátylat húz az állás fölé. Itt lefinomítjuk: halk
   zöld tónus + hajszálvékony, mindig egyenletes vastagságú keret
   és egy finom zöld derengés.
   FONTOS: a `body.site-view` előtag adja azt a specificitást,
   ami az oldalon később szereplő inline <style> fölé emel.
   ------------------------------------------------------------ */
body.site-view .nadudvar-terkep .nadudvar-allas .nadudvar-allas__terulet {
    fill: var(--green);
    fill-opacity: 0;
    stroke: var(--green);
    /* A keret vastagsága ne skálázódjon az SVG-vel: az asztali és a
       mobil térkép viewBox-a más nagyítású, egyébként az egyiken
       kövér, a másikon hajszálvékony lenne a vonal. */
    vector-effect: non-scaling-stroke;
    stroke-width: 1.5;
    stroke-opacity: 0;
    transition: fill-opacity 0.3s var(--ease),
                stroke-opacity 0.3s var(--ease);
}

body.site-view .nadudvar-terkep .nadudvar-allas:hover .nadudvar-allas__terulet,
body.site-view .nadudvar-terkep .nadudvar-allas:focus .nadudvar-allas__terulet,
body.site-view .nadudvar-terkep .nadudvar-allas:focus-visible .nadudvar-allas__terulet,
body.site-view .nadudvar-terkep .nadudvar-allas:active .nadudvar-allas__terulet {
    fill-opacity: 0.14;
    stroke-opacity: 0.8;
}

/* Finom derengés a teljes állás körül a kemény kontúr helyett */
body.site-view .nadudvar-terkep .nadudvar-allas {
    filter: none;
    transition: filter 0.3s var(--ease);
}

body.site-view .nadudvar-terkep .nadudvar-allas:hover,
body.site-view .nadudvar-terkep .nadudvar-allas:focus,
body.site-view .nadudvar-terkep .nadudvar-allas:focus-visible,
body.site-view .nadudvar-terkep .nadudvar-allas:active {
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.45));
}

/* Billentyűzetes navigációnál legyen egy kicsit határozottabb a jelzés */
body.site-view .nadudvar-terkep .nadudvar-allas:focus-visible .nadudvar-allas__terulet {
    stroke-width: 2.5;
    stroke-opacity: 1;
}

/* ------------------------------------------------------------
   2) FŐMENÜ — hover / aktív állapot a fiók-gomb arculatával
   A .btn-header-account (navbarAdminDropdown) stílusa:
   zöld gradiens, 8 px sarok, lágy zöld vetett árnyék, -1 px emelés.
   A menüpont mögötti pill innentől ugyanezt kapja: nincs több
   "kipattanó" nagyítás és nincs 20 px-es pill sem.
   ------------------------------------------------------------ */
.site-nav-links > .nav-item > .nav-link,
.site-nav-links .nav-item-wrapper,
.site-nav-links > .nav-item > .nav-link::before,
.site-nav-links .nav-item-wrapper::before {
    border-radius: var(--radius-sm);
}

.site-nav-links > .nav-item > .nav-link::before,
.site-nav-links .nav-item-wrapper::before {
    background: linear-gradient(135deg, var(--green), var(--green-hover));
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
    transform: none;                 /* a nagyításos pop helyett sima átúszás */
    transition: opacity 0.3s ease, box-shadow 0.3s ease;
}

.site-nav-links > .nav-item > .nav-link:hover::before,
.site-nav-links > .nav-item > .nav-link:focus-visible::before,
.site-nav-links > .nav-item > .nav-link.active::before,
.site-nav-links .nav-item-wrapper:hover::before,
.site-nav-links .nav-item-wrapper:has(.nav-link.active)::before,
.site-nav-links .dropdown-split-hover.show .nav-item-wrapper::before {
    opacity: 1;
    transform: none;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.45);
}

/* A gombhoz hasonló, visszafogott 1 px-es emelés (a korábbi 2 px helyett) */
.site-nav-links > .nav-item > .nav-link:hover,
.site-nav-links > .nav-item > .nav-link.active,
.site-nav-links .nav-item-wrapper:hover,
.site-nav-links .dropdown-split-hover.show .nav-item-wrapper {
    transform: translateY(-1px);
}

/* A gomb feliratához illő tömör fehér szöveg, árnyék nélkül */
.site-nav-links > .nav-item > .nav-link:hover,
.site-nav-links > .nav-item > .nav-link:focus,
.site-nav-links > .nav-item > .nav-link.active,
.site-nav-links .nav-item-wrapper:hover > .nav-link,
.site-nav-links .nav-item-wrapper:hover > .dropdown-caret,
.site-nav-links .dropdown-split-hover.show .nav-link,
.site-nav-links .dropdown-split-hover.show .dropdown-caret {
    color: #ffffff;
    text-shadow: none;
}

/* Mobilon nincs emelés (a lenyíló listában zavaró lenne) */
@media (max-width: 991.98px) {
    .site-nav-links > .nav-item > .nav-link:hover,
    .site-nav-links > .nav-item > .nav-link.active,
    .site-nav-links .nav-item-wrapper:hover,
    .site-nav-links .dropdown-split-hover.show .nav-item-wrapper {
        transform: none;
    }
}

/* ------------------------------------------------------------
   3) KÁRTYA FEJLÉC + ÁR (állás részletek és a többi frontend kártya)
   A Bootstrap `bg-primary` / `text-primary` !important-tal állítja
   a kék színt, ezért itt is !important kell. Csak a látogatói
   felületre (body.site-view) szűkítve — az admin marad kék.
   ------------------------------------------------------------ */
/* A fejléc NEM zöld és nem kék: az arculat sötét felületeit (fejléc,
   lábléc) viszi tovább antracit átmenettel. A zöld gradiens itt túlságosan
   más horgászoldalak megjelenésére hajazott. */
body.site-view .card > .card-header.bg-primary {
    background: linear-gradient(135deg, var(--ink-700) 0%, var(--ink-900) 100%) !important;
    border-bottom: 1px solid var(--ink-600);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    color: var(--text-light);
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

body.site-view .card > .card-header.bg-primary h1,
body.site-view .card > .card-header.bg-primary h2,
body.site-view .card > .card-header.bg-primary h3,
body.site-view .card > .card-header.bg-primary h4,
body.site-view .card > .card-header.bg-primary h5,
body.site-view .card > .card-header.bg-primary h6 {
    color: var(--text-light);
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* Az ikon az egyetlen zöld elem: kis akcentus a sötét sávon */
body.site-view .card > .card-header.bg-primary i {
    color: var(--green);
}

/* Kiemelt ár (fs-3 fw-bold text-primary): márkazöld, de fehér
   háttéren is olvasható árnyalatban */
body.site-view .fs-3.fw-bold.text-primary {
    color: var(--green-ink) !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

/* ------------------------------------------------------------
   4) LÁBLÉC — a 4 fix modulpozíció rugalmas elosztása
   A footer.php négy `col-md-3`-at ír ki (25%–25%–25%–25%) attól
   függetlenül, hogy van-e bennük modul. Emiatt az üres pozíció
   üresen tátong, a térkép iframe-je pedig nem fér el a 25%-ban,
   és a `.footer-widget { overflow: hidden }` levágja a jobb szélét.
   Megoldás CSS-ből: az üres oszlopok kiesnek, a maradék pedig
   elosztja a teljes szélességet — a térképes oszlop kap egy kicsit
   nagyobb súlyt, mert annak a hely tényleg tartalom.
   ------------------------------------------------------------ */

/* Üres modulpozíció ne foglaljon helyet (nincs benne .footer-widget) */
.site-footer > .container > .row > [class*="col-"]:not(:has(.footer-widget)) {
    display: none;
}

@media (min-width: 768px) {
    .site-footer > .container > .row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    /* A Bootstrap fix 25%-a helyett arányos osztozkodás.
       Ha csak 2 pozíció van kitöltve, azok felezik a szélességet stb. */
    .site-footer > .container > .row > [class*="col-"] {
        flex: 1 1 0;
        width: auto;
        max-width: none;
        min-width: 0;      /* különben a beágyazott iframe kifeszítené */
    }

    /* A térképes (iframe-es) oszlop kicsit nagyobb súllyal */
    .site-footer > .container > .row > [class*="col-"]:has(iframe) {
        flex: 1.35 1 0;
    }

    /* Asztali nézetben a pozíció utolsó widgetje alól elhagyjuk a Bootstrap
       mb-4-et, hogy az alsó elválasztó vonal ne lógjon el a tartalomtól.
       Mobilon ez KELL, mert ott a modulok egymás alá kerülnek. */
    .site-footer .footer-widget:last-child {
        margin-bottom: 0 !important;
    }
}

/* A beágyazott térkép / videó töltse ki a pozíciót.
   A modul tartalmában fix width/height attribútum (vagy inline style)
   van, ezért kell az !important. */
.site-footer .footer-widget iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: clamp(240px, 24vw, 360px) !important;
    border: 0;
    border-radius: var(--radius-md);
}