/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 2.2.1
Text Domain: hello-elementor-child
*/

/* =========================================================
   CSS VÁLTOZÓ FALLBACKEK
   ========================================================= */
:root {
    --hc-header-bg: #ffffff;
    --hc-header-bg-sticky: #ffffff;
    --hc-menu-link: #000000;
    --hc-menu-link-hover: #222222;
    --hc-submenu-bg: #141414;
    --hc-submenu-link: #ffffff;
    --hc-submenu-hover-bg: #262626;
    --hc-cta-bg: #222222;
    --hc-cta-color: #ffffff;
    --hc-cta-hover-bg: #000000;
    --hc-cta-hover-color: #ffffff;
    --hc-cta-bg-sticky: #222222;
    --hc-cta-color-sticky: #ffffff;
    --hc-cta-radius: 4px;
    --hc-cta-padding-y: 10px;
    --hc-cta-padding-x: 24px;
    --hc-header-radius: 20px;
    --hc-header-max-width: 1300px;
    --hc-header-offset: 20px;
    --hc-content-offset: 0px;
    --hc-sidebar-bg: #131313;
    --hc-sidebar-color: #ffffff;
    --hc-sidebar-hover: #ffffff;

    /* FŐMENÜ MÉRET */
    --hc-menu-font-size: 15px;

    /* FŐ CTA MÉRET */
    --hc-cta-font-size: 15px;

    --hc-logo-height: 50px;
    --hc-logo-height-mobile: 40px;
}


/* =========================================================
   BASE HEADER STYLES
   ========================================================= */

.custom-header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--hc-header-bg) !important;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    pointer-events: none;
    box-sizing: border-box;
    overflow: visible !important;
    transition: all 0.3s ease;
}


/* =========================================================
   TOP BAR
   ========================================================= */

.custom-header-top-bar {
    width: 100%;
    background: transparent;
    padding: 10px 0;
    pointer-events: auto;
    position: relative;
    z-index: 1000;
}

.top-bar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1300px;
    margin: 0 auto;
    padding: 5px 0;
    box-sizing: border-box;
}

.top-bar-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px;
    align-items: center;
}

.top-bar-contact li a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    transition: color 0.3s;
}

.top-bar-contact li a:hover {
    color: #ffffff;
}

.top-bar-social .header-grid {
    display: flex;
    gap: 15px;
}

.top-bar-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: #fff !important;
    border-radius: 50%;
    transition: all 0.3s;
}

.top-bar-social a:hover {
    background: #fff;
}

.top-bar-social svg {
    width: 18px;
    height: 18px;
}

.top-bar-social path {
    transition: fill 0.3s;
}

.custom-header-wrapper.header-on-light .top-bar-contact li a {
    color: #1C191A;
}

.custom-header-wrapper.header-on-light .top-bar-social a {
    background: #fff;
}

.header-divider {
    width: 100%;
    max-width: 1300px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 auto;
    transition: background-color 0.3s;
}

.custom-header-wrapper.header-on-light .header-divider {
    background-color: #fff;
}


/* =========================================================
   HEADER INNER
   ========================================================= */

.custom-header-inner {
    pointer-events: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0 !important;
    height: var(--hc-header-height);
    border-radius: 0;
    padding: 0 40px;
    box-sizing: border-box;
    background: transparent;
    transition:
        background 0.3s ease,
        max-width 0.3s ease,
        border-radius 0.3s ease,
        height 0.3s ease;
}

.custom-header-wrapper.header-on-light .custom-header-inner {
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background-image: none;
}


/* =========================================================
   STICKY HEADER
   ========================================================= */

.custom-header-inner.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    background: var(--hc-header-bg-sticky) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border-bottom: none;
}


/* =========================================================
   HEADER CONTAINER
   ========================================================= */

.custom-header-container {
    width: 100%;
    max-width: 1300px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}


/* =========================================================
   LOGO
   ========================================================= */

.custom-header-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 0;
    z-index: 10;
}

.submenu-toggle-link::after {
    margin-left: 8px !important;
    margin-right: unset !important;
}

.custom-header-sidebar ::marker {
    font-size: 0 !important;
}

.custom-header-sidebar-logo img {
    display: none !important;
}

.custom-header-logo img {
    max-height: var(--hc-logo-height) !important;
    width: auto !important;
    height: auto !important;
    display: block;
    filter: none;
    transition: filter 0.3s ease;
    object-fit: contain;
}

.custom-header-logo a {
    display: flex;
}

.custom-header-wrapper.header-on-light .custom-header-logo img {
    filter: invert(1) brightness(0);
}

.custom-header-inner.is-sticky .custom-header-logo img {
    filter: none !important;
}


/* =========================================================
   DESKTOP NAVIGATION
   1300px-TŐL DESKTOP
   ========================================================= */

.custom-header-nav-desktop {
    display: block;
}

.custom-header-nav-right {
    margin-left: auto;
}


/* =========================================================
   DESKTOP LANG SWITCHER
   ========================================================= */

.custom-header-lang-wrapper {
    display: flex;
    align-items: center;
    margin-left: 25px;
    z-index: 1002;
    pointer-events: auto;
    transition: all 0.3s ease;
}

.custom-header-lang-wrapper .pll-switch {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 6px;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 999px;
    padding: 10px 14px;
    line-height: 1;
    transition: all 0.3s ease;
}

.custom-header-lang-wrapper .pll-switch img {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 999px;
}

.custom-header-lang-wrapper .pll-switch__code {
    line-height: 1;
    font-size: 22px;
    color: #ffffff;
    font-weight: 400;
    font-family: inherit;
    transition: color 0.3s ease;
}

.custom-header-wrapper.header-on-light
.custom-header-lang-wrapper
.pll-switch__code {
    color: #1C191A;
}

.custom-header-lang-wrapper.is-sticky .pll-switch__code {
    color: #ffffff !important;
}

.custom-header-lang-wrapper.is-sticky .pll-switch {
    background: rgba(19, 19, 19, 0.9);
}


/* =========================================================
   DESKTOP STYLES
   1300px-TŐL
   ========================================================= */

@media (min-width: 1300px) {

    .custom-header-menu-list {
        display: flex;
        gap: 25px;
        list-style: none;
        margin: 0;
        padding: 0;
        align-items: center;
        justify-content: flex-end;
    }

    .custom-header-menu-list > li {
        position: relative;
    }

    .custom-header-menu-list > li::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 20px;
        background: transparent;
        pointer-events: auto;
    }

    .custom-header-menu-list li a {
        text-decoration: none;
        color: var(--hc-menu-link);

        font-weight: var(--hc-menu-font-weight) !important;
        font-style: var(--hc-menu-font-style) !important;

        /* FŐMENÜ: 15PX */
        font-size: var(--hc-menu-font-size) !important;

        transition:
            color 0.3s,
            background-color 0.3s,
            transform 0.2s;

        font-family: inherit !important;
        white-space: nowrap;
        text-transform: uppercase;
        letter-spacing: 3px;
    }

    .custom-header-wrapper.header-on-light
    .custom-header-menu-list li a {
        color: var(--hc-menu-link);
    }


    /* Sticky – normál menüpontok */

    .custom-header-inner.is-sticky
    .custom-header-menu-list li:not(.CTA) a {
        color: var(--hc-menu-link) !important;
    }


    /* Sticky – CTA */

    .custom-header-inner.is-sticky
    .custom-header-menu-list li.CTA a {
        background-color: var(--hc-cta-bg-sticky) !important;
        color: var(--hc-cta-color-sticky) !important;
    }

    .custom-header-inner.is-sticky
    .custom-header-menu-list li.CTA a:hover,
    .custom-header-inner.is-sticky
    .custom-header-menu-list li.CTA:hover > a,
    .custom-header-inner.is-sticky
    .custom-header-menu-list li.CTA:focus-within > a {
        background-color: var(--hc-cta-hover-bg) !important;
        color: var(--hc-cta-hover-color) !important;
    }

    .custom-header-inner.is-sticky
    .custom-header-menu-list
    .sub-menu a {
        color: var(--hc-submenu-link) !important;
    }

    .custom-header-inner.is-sticky
    .custom-header-menu-list
    .sub-menu a:hover,
    .custom-header-inner.is-sticky
    .custom-header-menu-list
    .sub-menu a:focus {
        color: var(--hc-submenu-link) !important;
    }

    .custom-header-menu-list li a:hover,
    .custom-header-menu-list li:hover > a,
    .custom-header-menu-list li:focus-within > a {
        color: var(--hc-menu-link-hover) !important;
    }


    /* =====================================================
       CTA GOMB
       ===================================================== */

    .custom-header-menu-list li.CTA a {
        background-color: var(--hc-cta-bg) !important;
        color: var(--hc-cta-color) !important;

        padding:
            var(--hc-cta-padding-y)
            var(--hc-cta-padding-x) !important;

        border-radius: var(--hc-cta-radius);

        display: inline-flex !important;
        align-items: center;
        gap: 8px;

        font-weight: var(--hc-cta-font-weight) !important;
        font-style: var(--hc-cta-font-style) !important;

        /* AJÁNLATOT KÉREK: 15PX */
        font-size: var(--hc-cta-font-size) !important;

        line-height: 1;
        text-transform: uppercase;
        font-family: inherit !important;

        transition:
            transform 0.2s ease,
            background-color 0.2s ease,
            color 0.2s ease;
    }

    .custom-header-menu-list li.CTA a:hover,
    .custom-header-menu-list li.CTA:hover > a,
    .custom-header-menu-list li.CTA:focus-within > a {
        transform: translateY(-3px);
        background-color: var(--hc-cta-hover-bg) !important;
        color: var(--hc-cta-hover-color) !important;
    }


    /* =====================================================
       ALMENÜ
       ===================================================== */

    .custom-header-menu-list li .sub-menu {
        position: absolute;
        top: calc(100% + 10px);
        left: 0;

        min-width: 220px;

        padding: 8px;
        margin: 0;

        list-style: none;

        background: var(--hc-submenu-bg);

        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);

        border: none;
        border-radius: 12px;

        box-shadow:
            0 20px 25px -5px
            rgba(19, 19, 19, 0.2);

        opacity: 0;
        visibility: hidden;

        transform: translateY(10px) scale(0.98);
        transform-origin: top left;

        pointer-events: none;

        transition:
            all 0.2s
            cubic-bezier(0.4, 0, 0.2, 1);

        z-index: 2000;
    }

    .custom-header-menu-list li:hover > .sub-menu,
    .custom-header-menu-list li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;

        transform: translateY(0) scale(1);

        pointer-events: auto;
    }

    .custom-header-menu-list li .sub-menu li {
        margin: 0;
        padding: 0;
        position: relative;
    }

    .custom-header-menu-list li .sub-menu li::after {
        display: none;
    }

    .custom-header-menu-list li .sub-menu li + li {
        margin-top: 2px;
    }

    .custom-header-menu-list li .sub-menu a {
        display: block;

        padding: 8px 12px;

        border-radius: 8px;

        text-transform: none;

        font-size: var(--hc-submenu-font-size) !important;
        font-weight: 400;

        color: var(--hc-submenu-link) !important;

        transition: all 0.2s ease;

        white-space: nowrap;

        background: transparent !important;
    }

    .custom-header-menu-list li .sub-menu a:hover,
    .custom-header-menu-list li .sub-menu a:focus {
        background: var(--hc-submenu-hover-bg) !important;
        color: var(--hc-submenu-link) !important;

        transform: translateX(4px);

        outline: none;
    }


    /* =====================================================
       MÁSODIK SZINT
       ===================================================== */

    .custom-header-menu-list
    li
    .sub-menu
    li
    .sub-menu {
        top: 0;
        left: 100%;

        transform: translateX(10px) scale(0.98);
        transform-origin: top left;
    }

    .custom-header-menu-list
    li
    .sub-menu
    li:hover > .sub-menu,

    .custom-header-menu-list
    li
    .sub-menu
    li:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;

        transform: translateX(0) scale(1);

        pointer-events: auto;
    }


    /* =====================================================
       DESKTOP HAMBURGER REJTÉS
       ===================================================== */

    .custom-header-mobile-toggle {
        display: none !important;
    }


    /* =====================================================
       DESKTOP KOSÁR
       ===================================================== */

    .custom-header-cart {
        display: flex;
        align-items: center;

        margin-left: 20px;

        pointer-events: auto;
    }


    /* =====================================================
       DESKTOP EXTRA
       ===================================================== */

    .custom-header-extra {
        display: flex;
        align-items: center;

        margin-left: 20px;

        pointer-events: auto;
    }
}


/* =========================================================
   LOGO-CENTER ELRENDEZÉS
   1300px-TŐL
   ========================================================= */

@media (min-width: 1300px) {

    body.hc-layout-logo-center
    .custom-header-container {
        display: grid;

        grid-template-columns: 1fr auto 1fr;

        align-items: center;

        gap: 20px;
    }

    body.hc-layout-logo-center
    .custom-header-nav-left {
        grid-column: 1;

        justify-self: start;

        margin-left: 0;
    }

    body.hc-layout-logo-center
    .custom-header-logo {
        grid-column: 2;

        justify-self: center;
    }

    body.hc-layout-logo-center
    .custom-header-nav-right {
        grid-column: 3;

        justify-self: end;

        margin-left: 0;
    }

    body.hc-layout-logo-center
    .custom-header-nav-left
    .custom-header-menu-list {
        justify-content: flex-start;
    }

    body.hc-layout-logo-center
    .custom-header-nav-right
    .custom-header-menu-list {
        justify-content: flex-end;
    }

    body.hc-layout-logo-center
    .custom-header-cart,

    body.hc-layout-logo-center
    .custom-header-extra {
        display: none;
    }
}


/* =========================================================
   BOXED MENÜSÁV
   1300px-TŐL
   ========================================================= */

@media (min-width: 1300px) {

    body.hc-width-boxed
    .custom-header-wrapper {
        background: transparent !important;
    }

    body.hc-width-boxed
    .custom-header-inner {
        max-width: var(--hc-header-max-width);

        margin:
            var(--hc-header-offset)
            auto
            0 !important;

        border-radius: var(--hc-header-radius);

        background: var(--hc-header-bg);

        box-shadow:
            0 4px 20px
            rgba(0, 0, 0, 0.08);
    }

    body.hc-width-boxed
    .custom-header-inner.is-sticky {
        position: fixed;

        top: var(--hc-header-offset);
        left: 50%;
        right: auto;

        transform: translateX(-50%);

        width: calc(100% - 40px);
        max-width: var(--hc-header-max-width);

        border-radius: var(--hc-header-radius);

        background:
            var(--hc-header-bg-sticky) !important;
    }
}


/* =========================================================
   MOBILE / TABLET
   1299px ALATT
   ========================================================= */

@media (max-width: 1299px) {

    .custom-header-wrapper {
        width: 100% !important;
        max-width: 100% !important;

        left: 0 !important;
        right: 0 !important;

        position: fixed;

        background: var(--hc-header-bg) !important;
    }


    /* Mobilon teljes szélesség */

    body.hc-width-boxed
    .custom-header-wrapper {
        background: var(--hc-header-bg) !important;
    }

    body.hc-width-boxed
    .custom-header-inner {
        max-width: 100%;

        margin: 0 !important;

        border-radius: 0;

        box-shadow: none;
    }

    .custom-header-inner {
        padding: 0 25px;

        border-radius: 0;
    }

    .custom-header-container {
        width: 100%;

        justify-content: space-between;

        display: flex !important;

        grid-template-columns: none !important;
    }


    /* =====================================================
       LOGO
       ===================================================== */

    .custom-header-logo {
        flex-grow: 0;

        order: 1;

        justify-self: start !important;
    }

    .custom-header-logo img {
        max-height:
            var(--hc-logo-height-mobile) !important;

        width: auto !important;
        height: auto !important;
    }


    /* =====================================================
       DESKTOP MENÜ ELREJTÉSE
       ===================================================== */

    .custom-header-nav-desktop,
    .custom-header-nav-left,
    .custom-header-nav-right {
        display: none !important;
    }


    /* =====================================================
       TOP BAR ELREJTÉSE
       ===================================================== */

    .custom-header-top-bar {
        display: none;
    }

    .header-divider {
        display: none;
    }

    .custom-header-lang-wrapper {
        display: none;
    }


    /* =====================================================
       KOSÁR
       ===================================================== */

    body.hc-layout-logo-center
    .custom-header-cart {
        display: flex;
    }

    .custom-header-cart {
        order: 2;

        margin-left: auto;
        margin-right: 8px;

        display: flex;
        align-items: center;

        pointer-events: auto;
    }


    /* =====================================================
       EXTRA SHORTCODE
       ===================================================== */

    .custom-header-extra {
        order: 2;

        margin-left: auto;
        margin-right: 8px;

        display: flex;
        align-items: center;

        pointer-events: auto;
    }

    .custom-header-extra
    + .custom-header-cart {
        margin-left: 0;
    }


    /* =====================================================
       HAMBURGER
       ===================================================== */

    .custom-header-mobile-toggle {
        order: 3;

        display: flex !important;

        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;

        gap: 5px !important;

        width: 44px !important;
        height: 44px !important;

        background-color: transparent !important;

        border-radius: 50% !important;

        cursor: pointer !important;

        padding: 0 !important;
        margin: 0 !important;

        z-index: 1001;

        box-shadow: none !important;

        outline: none !important;

        border: none !important;
    }

    .custom-header-mobile-toggle span {
        display: block !important;

        width: 20px !important;
        height: 2px !important;

        background-color:
            var(--hc-menu-link) !important;

        border-radius: 2px !important;

        transition: all 0.3s ease;

        margin: 0 !important;
    }

    .custom-header-wrapper.header-on-light
    .custom-header-mobile-toggle span {
        background-color:
            var(--hc-menu-link) !important;
    }

    .custom-header-inner.is-sticky
    .custom-header-mobile-toggle span {
        background-color:
            var(--hc-menu-link) !important;
    }
}


/* =========================================================
   MOBILE SIDEBAR / OFF-CANVAS
   ========================================================= */

.custom-header-sidebar {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    width: 80vw;
    max-width: 350px;
    height: 100vh;

    background: var(--hc-sidebar-bg);

    backdrop-filter: blur(15px);

    z-index: 9999;

    transform: translateX(100%);

    transition:
        transform 0.4s
        cubic-bezier(0.77, 0, 0.175, 1);

    display: flex;
    flex-direction: column;

    padding: 20px 25px;

    overflow-y: auto;
}

.custom-header-sidebar.is-open {
    transform: translateX(0);
}

.custom-header-sidebar-top {
    display: flex;

    justify-content: space-between;
    align-items: center;

    margin-bottom: 30px;

    padding-bottom: 15px;

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.1);
}

.custom-header-sidebar-logo img {
    max-height: 65px;

    width: auto !important;

    filter: none !important;
}

.custom-header-sidebar-close {
    background: transparent !important;

    border: none;

    color:
        var(--hc-sidebar-color) !important;

    font-size: 28px;

    cursor: pointer;

    line-height: 1;

    width: auto;
    height: auto;

    padding: 5px !important;

    display: flex;

    align-items: center;
    justify-content: center;
}


/* =========================================================
   MOBILE MENU
   ========================================================= */

.custom-header-mobile-list {
    list-style: none;

    padding: 0;
    margin: 0;
}

.custom-header-mobile-list > li {
    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.05);
}

.custom-header-mobile-list li a {
    color: var(--hc-sidebar-color);

    text-decoration: none;

    font-size:
        var(--hc-menu-font-size) !important;

    font-weight:
        var(--hc-menu-font-weight) !important;

    font-style:
        var(--hc-menu-font-style) !important;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding: 15px 0;

    font-family: inherit !important;

    transition: color 0.2s;
}

.custom-header-mobile-list li a:hover,
.custom-header-mobile-list li a:focus {
    color: var(--hc-sidebar-hover);
}


/* =========================================================
   MOBILE SUBMENU ARROW
   ========================================================= */

.custom-header-mobile-list
li.menu-item-has-children
> a::after {
    content: '' !important;

    display: block !important;

    width: 8px !important;
    height: 8px !important;

    border: 0 !important;

    border-right:
        2px solid
        currentColor !important;

    border-bottom:
        2px solid
        currentColor !important;

    transform: rotate(45deg);

    transition: transform 0.3s;

    margin-right: 5px;
}

.custom-header-mobile-list
li.menu-item-has-children
> a.is-active::after {
    transform: rotate(-135deg);

    margin-top: 5px;
}


/* =========================================================
   MOBILE SUBMENUS
   ========================================================= */

.custom-header-mobile-list .sub-menu {
    display: none;

    padding-left: 15px;

    background:
        rgba(255, 255, 255, 0.03);

    margin-bottom: 10px;

    border-radius: 8px;
}

.custom-header-mobile-list
.sub-menu.is-open {
    display: block;

    animation:
        fadeIn 0.3s ease;
}

.custom-header-mobile-list
.sub-menu li {
    border: none;

    margin: 0;
}

.custom-header-mobile-list
.sub-menu a {
    font-size:
        var(--hc-submenu-font-size) !important;

    padding: 10px 0;

    color: var(--hc-sidebar-color);

    opacity: 0.75;

    justify-content: flex-start;
}

.custom-header-mobile-list
.sub-menu a:hover {
    opacity: 1;

    color: var(--hc-sidebar-hover);
}

.custom-header-mobile-list
.sub-menu a::after {
    display: none !important;
}

.custom-header-mobile-list
.sub-menu
.sub-menu {
    padding-left: 12px;

    background:
        rgba(255, 255, 255, 0.05);

    border-left:
        2px solid
        rgba(255, 255, 255, 0.18);

    border-radius:
        0 6px 6px 0;

    margin:
        2px 0 6px 4px;
}

.custom-header-mobile-list
.sub-menu
.sub-menu a {
    font-size: 14px;

    opacity: 0.55;

    padding: 12px 0;
}

.custom-header-mobile-list
.sub-menu
.sub-menu li + li {
    border-top:
        1px solid
        rgba(255, 255, 255, 0.06);
}


/* =========================================================
   ANIMATION
   ========================================================= */

@keyframes fadeIn {

    from {
        opacity: 0;

        transform: translateY(-5px);
    }

    to {
        opacity: 1;

        transform: translateY(0);
    }
}


/* =========================================================
   OVERLAY
   ========================================================= */

.custom-header-overlay {
    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background:
        rgba(19, 19, 19, 0.6);

    z-index: 9998;

    opacity: 0;
    visibility: hidden;

    transition: all 0.3s ease;

    backdrop-filter: blur(3px);
}

.custom-header-overlay.is-active {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   MOBILE HEADER HEIGHT
   ========================================================= */

@media (max-width: 768px) {

    .custom-header-inner {
        height: var(--hc-header-height);

        border-radius: 0;
    }
}


/* =========================================================
   TECHNOLOGIAK - EGYEDI MEGA MENU
   ========================================================= */

@media (min-width: 1025px) {

    /*
     * Fontos:
     * a dropdown ne legyen levágva a header konténerei által.
     */

    .custom-header-wrapper,
    .custom-header-inner,
    .custom-header-container,
    .custom-header-nav-desktop,
    .custom-header-menu-list {
        overflow: visible !important;
    }

    .custom-header-wrapper {
        position: relative;

        z-index: 9999;
    }


    /* ---------------------------------------------------------
       Technológiák fő menüpont
       --------------------------------------------------------- */

    .custom-header-menu-list > .mega-menu-technologiak {
        position: relative;
    }

    .custom-header-menu-list > .mega-menu-technologiak > a {
        display: flex;

        align-items: center;

        gap: 7px;
    }


    /* Saját lefelé mutató nyíl */

    .custom-header-menu-list
    > .mega-menu-technologiak
    > a::after {
        content: "";

        display: block;

        width: 6px;
        height: 6px;

        border-right: 1.5px solid currentColor;
        border-bottom: 1.5px solid currentColor;

        transform: rotate(45deg) translateY(-2px);

        transition: transform 0.25s ease;
    }


    /* ---------------------------------------------------------
       Mega dropdown
       --------------------------------------------------------- */

    .custom-header-menu-list
    > .mega-menu-technologiak
    > .sub-menu {

        position: absolute !important;

        top: calc(100% + 24px) !important;
        left: -18px !important;

        width: 400px !important;
        max-width: calc(100vw - 40px);

        margin: 0 !important;
        padding: 10px !important;

        display: grid !important;

        /* A két technológia egymás alatt */
        grid-template-columns: 1fr;
        row-gap: 2px;

        background: #ffffff !important;

        border: 1px solid rgba(0, 0, 0, 0.08);

        border-radius: 13px;

        box-shadow:
            0 12px 35px rgba(0, 0, 0, 0.13),
            0 2px 6px rgba(0, 0, 0, 0.06);

        list-style: none;

        opacity: 0;
        visibility: hidden;

        pointer-events: none;

        transform: translateY(-8px);

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease,
            transform 0.2s ease;

        z-index: 99999;
    }


    /* ---------------------------------------------------------
       Hover közötti "láthatatlan híd"
       Így a 24px résen áthúzva sem csukódik össze.
       --------------------------------------------------------- */

    .custom-header-menu-list
    > .mega-menu-technologiak::before {

        content: "";

        position: absolute;

        top: 100%;
        left: -10px;

        width: calc(100% + 20px);
        height: 26px;

        background: transparent;
    }


    /* Dropdown megjelenítése */

    .custom-header-menu-list
    > .mega-menu-technologiak:hover
    > .sub-menu,

    .custom-header-menu-list
    > .mega-menu-technologiak:focus-within
    > .sub-menu {

        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform: translateY(0);
    }


    /* Nyíl fordítása */

    .custom-header-menu-list
    > .mega-menu-technologiak:hover
    > a::after {

        transform: rotate(225deg) translate(-1px, -1px);
    }


    /* ---------------------------------------------------------
       Kártyák
       --------------------------------------------------------- */

    .mega-menu-technologiak .mega-card {
        position: relative;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        list-style: none;
    }

    .mega-menu-technologiak .mega-card > a {
        position: relative;

        display: flex !important;

        flex-direction: column;

        align-items: flex-start;

        width: 100%;

        /* Egymás alatti kártyáknál nem kell azonos magasságra húzni */
        min-height: 0;

        padding: 15px 18px !important;

        text-align: left;

        text-decoration: none !important;

        background: transparent !important;

        border-radius: 0 !important;

        transition: background-color 0.2s ease;
    }


    /*
     * Függőleges színes vonal
     */

    .mega-menu-technologiak .mega-card > a::before {
        content: "";

        position: absolute;

        top: 0;
        bottom: 0;
        left: 0;

        width: 2px;

        border-radius: 3px;
    }


    /* CLT arany/barna */

    .mega-menu-technologiak
    .mega-card-clt
    > a::before {
        background: #B58B48;
    }


    /* Beton kékesszürke */

    .mega-menu-technologiak
    .mega-card-beton
    > a::before {
        background: #587783;
    }


    /* ---------------------------------------------------------
       Kártya cím
       --------------------------------------------------------- */

    .mega-menu-technologiak .mega-card > a {
        font-family: "Roboto", sans-serif !important;

        /* ALMENÜ CÍM: 14PX */
        font-size: 14px !important;

        font-weight: 700 !important;

        line-height: 1.3 !important;

        color: #202522 !important;
    }


    /* ---------------------------------------------------------
       Leírás
       --------------------------------------------------------- */

    .mega-menu-technologiak
    .hc-menu-description {
        display: block;

        margin-top: 10px;

        font-family: "Roboto", sans-serif;

        /* ALMENÜ LEÍRÁS: 13PX */
        font-size: 13px;

        font-weight: 400;

        line-height: 1.45;

        color: #747977;

        white-space: normal;
    }


    /* Kártya hover */

    .mega-menu-technologiak
    .mega-card
    > a:hover {
        background: #f8f8f6 !important;
    }


    /* ---------------------------------------------------------
       ALSÓ CTA
       --------------------------------------------------------- */

    .mega-menu-technologiak
    .mega-menu-cta {

        grid-column: 1 / -1;

        margin: 10px 0 0 !important;

        padding: 0 !important;

        border-top: 1px solid #deded8;

        list-style: none;
    }

    .mega-menu-technologiak
    .mega-menu-cta
    > a {

        display: flex !important;

        align-items: center;

        width: 100%;

        padding: 18px 18px 17px !important;

        background: transparent !important;

        font-family: "Roboto", sans-serif !important;

        /* ALSÓ CTA: 13PX */
        font-size: 13px !important;

        font-weight: 700 !important;

        line-height: 1.3 !important;

        color: #173a2e !important;

        text-decoration: none !important;

        transition:
            opacity 0.2s ease,
            transform 0.2s ease;
    }

    .mega-menu-technologiak
    .mega-menu-cta
    > a:hover {
        opacity: 0.72;
    }

}

/* =========================================================
   GYIK — ROVATCÍMKÉK AZ ACCORDION CÍMSORÁBAN
   A címsor kettébontását a functions.php
   mgh_accordion_title_labels() szűrője végzi.
   ========================================================= */

.e-n-accordion-item-title-text .mgh-acc-k {
    display: block;
    font-family: "Roboto Condensed", "Roboto", system-ui, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #8a8f8c;
    margin-bottom: 7px;
    transition: color 0.25s;
}

.e-n-accordion-item-title-text .mgh-acc-q {
    display: block;
}

.e-n-accordion-item[open] .e-n-accordion-item-title-text .mgh-acc-k {
    color: #3e8e6a;
}


/* =========================================================================
   MGH RESZPONZIV RENDSZER - tokenek + utility osztalyok
   -------------------------------------------------------------------------
   Egyetlen forras a szekciok terkozeire. Az Elementorban a top-level
   szekciok padding mezoi URESEK, az erteket az itt definialt osztalyok
   adjak (_css_classes: "mgh-sec ...").

   Breakpointok (Elementor kit 10):
       mobil   <= 767px
       tablet  768-1024px
       laptop / asztali >= 1025px

   A fejlec <=1024px-en position:fixed (nem foglal helyet), >=1025px-en
   relative (helyet foglal) - ezert az elso szekcio felso paddingjahoz
   csak 1024px alatt kell hozzaadni a fejlec magassagat.
   ========================================================================= */

:root {
    /* szekcio fuggoleges terkoz */
    --mgh-sec-py:        100px;
    --mgh-sec-py-half:    50px;   /* azonos hatteru szomszedos szekciok */

    /* oldalso terkoz (container gutter) - minden szekcioban azonos */
    --mgh-sec-px:         50px;

    /* szekcion beluli ritmus (csoportositott szekciok kozott) */
    --mgh-sp-block:       32px;
    --mgh-sp-group:       64px;

    /* fix fejlec */
    --mgh-header-h:       var(--hc-header-height, 70px);
    --mgh-header-offset:  0px;    /* >=1025px: a fejlec helyet foglal */

    /* olvashato szovegsav */
    --mgh-prose-max:     820px;
}

/* tablet - a fejlec itt mar fixed, helyet kell hagyni neki */
@media (max-width: 1024px) {
    :root {
        --mgh-sec-py:        70px;
        --mgh-sec-py-half:   35px;
        --mgh-sec-px:        40px;
        --mgh-sp-block:      32px;
        --mgh-sp-group:      48px;
        --mgh-header-offset: var(--mgh-header-h);
    }
}

/* mobil */
@media (max-width: 767px) {
    :root {
        --mgh-sec-py:        40px;
        --mgh-sec-py-half:   20px;
        --mgh-sec-px:        24px;
        --mgh-sp-block:      24px;
        --mgh-sp-group:      32px;
    }
}


/* -------------------------------------------------------------------------
   1. SZEKCIO-UTILITYK
   Ketfele Elementor-szekcio van az oldalon:
     .e-con              - flex konteneer (Elementor 3/4): custom property-vel
     .elementor-section  - regi section/column: kozvetlen paddinggel
   ------------------------------------------------------------------------- */

.e-con.mgh-sec {
    --padding-top:    var(--mgh-sec-py);
    --padding-bottom: var(--mgh-sec-py);
    --padding-left:   var(--mgh-sec-px);
    --padding-right:  var(--mgh-sec-px);
}

.elementor-section.mgh-sec {
    padding: var(--mgh-sec-py) var(--mgh-sec-px);
}

/* dekoracios abszolut elemek ne logjanak ki a szekciobol.
   clip (nem hidden): nem hoz letre gorgetesi kontextust, az overflow-y
   marad visible, igy a sticky elemek es a legordulok mukodnek. */
.mgh-sec {
    overflow-x: clip;
}

.mgh-sec--no-clip {
    overflow-x: visible;
}

/* --- felso terkoz modositok --- */
.e-con.mgh-sec--flush-top { --padding-top: 0px; }
.e-con.mgh-sec--half-top  { --padding-top: var(--mgh-sec-py-half); }
.e-con.mgh-sec--first     { --padding-top: calc(var(--mgh-sec-py) + var(--mgh-header-offset)); }

.e-con.mgh-sec--first.mgh-sec--half-top {
    --padding-top: calc(var(--mgh-sec-py-half) + var(--mgh-header-offset));
}

.elementor-section.mgh-sec--flush-top { padding-top: 0; }
.elementor-section.mgh-sec--half-top  { padding-top: var(--mgh-sec-py-half); }
.elementor-section.mgh-sec--first     { padding-top: calc(var(--mgh-sec-py) + var(--mgh-header-offset)); }

.elementor-section.mgh-sec--first.mgh-sec--half-top {
    padding-top: calc(var(--mgh-sec-py-half) + var(--mgh-header-offset));
}

/* --- hero: a kep a fejlec moge fusson ---
   >=1025px a fejlec relative, tehat helyet foglal: a heronak fel kell csusznia
   ala a fejlec magassagaval. <=1024px a fejlec fixed, nem foglal helyet -
   ott nem kell (es nem is szabad) negativ margo, kulonben az mgh-sec--first
   fejlec-kompenzaciojat pontosan kioltana, es a focim a fejlec ala kerulne. */
.e-con.mgh-sec--hero {
    --margin-top: calc(-1 * var(--mgh-header-h));
}

@media (max-width: 1024px) {
    .e-con.mgh-sec--hero {
        --margin-top: 0px;
    }
}

/* --- also terkoz modositok --- */
.e-con.mgh-sec--flush-bottom { --padding-bottom: 0px; }
.e-con.mgh-sec--half-bottom  { --padding-bottom: var(--mgh-sec-py-half); }
.e-con.mgh-sec--gap-bottom   { --padding-bottom: var(--mgh-sp-block); }
.e-con.mgh-sec--gap2-bottom  { --padding-bottom: var(--mgh-sp-group); }

.elementor-section.mgh-sec--flush-bottom { padding-bottom: 0; }
.elementor-section.mgh-sec--half-bottom  { padding-bottom: var(--mgh-sec-py-half); }
.elementor-section.mgh-sec--gap-bottom   { padding-bottom: var(--mgh-sp-block); }
.elementor-section.mgh-sec--gap2-bottom  { padding-bottom: var(--mgh-sp-group); }

/* --- fuggoleges terkoz nelkul (a belso oszlop adja a ritmust) --- */
.e-con.mgh-sec--flush-y             { --padding-top: 0px; --padding-bottom: 0px; }
.elementor-section.mgh-sec--flush-y { padding-top: 0; padding-bottom: 0; }

/* olvashato szovegsav jogi / szoveges oldalakon */
.mgh-prose .elementor-widget-theme-post-content,
.mgh-prose .elementor-widget-text-editor {
    max-width: var(--mgh-prose-max);
    margin-inline: auto;
}


/* -------------------------------------------------------------------------
   2. VIZSZINTES TULCSORDULAS ELLENI VEDELEM
   ------------------------------------------------------------------------- */

/* vegso vedohalo: a clip nem tesz gorgetesi kontextust, tehat nem hoz
   plusz fuggoleges scrollbart (lasd PROJECT.md 2026-04-22) */
html {
    overflow-x: clip;
}

/* media soha ne feszitse szet a layoutot */
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* Hosszu szavak es URL-ek ne torjek szet a racsot.

   !! 'break-word' es NEM 'anywhere' !!

   A ketto ugyanugy megtori a tul hosszu szot, DE az 'anywhere' a min-content
   szelesseget is lecsokkenti (kb. egy karakterre), az 'break-word' nem.
   Emiatt az 'anywhere'-rel a flex- es grid-elemek a tartalmuk ala zsugorodnak:
   - a fooldali harom adat-kartya (.mgh-stat-card) 768px-en 218px helyett
     91px-re esett ossze, a felirat szo kozepen tordelve, 4-5 sorban;
   - a tablazatok a gorgetheto burkoloba preselodtek ossze ahelyett,
     hogy gorgethetok lettek volna.
   A tulcsordulas elleni vedelmet a 'break-word' ugyanugy megadja. */
p,
li,
dd,
dt,
td,
th,
figcaption,
blockquote,
address,
h1, h2, h3, h4, h5, h6,
.elementor-widget-text-editor,
.elementor-widget-heading,
.elementor-widget-theme-post-content,
.elementor-widget-theme-post-title {
    overflow-wrap: break-word;
}

/* Az arazas-szekcio harom kerdes-gombja (#arazas / .pinfo).
   Ket ok miatt logott ki 320-375px kozott a "+" ikon:
   1. a hello-elementor reset [type="button"], button { white-space: nowrap }
      szabalya miatt a felirat nem tordelt,
   2. a flex-elem alapertelmezett min-width:auto erteke miatt nem zsugorodott
      a min-content ala. */
.pinfo button {
    white-space: normal;
}

.pinfo button > span {
    min-width: 0;
}

.pinfo b,
.pinfo b + span {
    overflow-wrap: anywhere;
}


/* -------------------------------------------------------------------------
   3. TABLAZATOK - mobilon gorgetheto konteneerben
   A <table> kore a functions.php mgh_wrap_tables_and_embeds() szuroje
   teszi a .mgh-table-scroll burkolot.
   ------------------------------------------------------------------------- */

.mgh-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

/* a tablazat a tartalma szerinti szelessegre nojon (es a burkolo gorogjon),
   de sose legyen keskenyebb a rendelkezesre allo helynel */
.mgh-table-scroll > table {
    margin: 0;
    width: max-content;
    min-width: 100%;
    max-width: none;
}

/* a gorgethetoseg legyen lathato jelzes is */
@media (max-width: 767px) {
    .mgh-table-scroll {
        background:
            linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
            linear-gradient(to left,  #fff 30%, rgba(255, 255, 255, 0)) right center,
            radial-gradient(farthest-side at 0%   50%, rgba(14, 42, 33, .14), transparent) left center,
            radial-gradient(farthest-side at 100% 50%, rgba(14, 42, 33, .14), transparent) right center;
        background-repeat: no-repeat;
        background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}


/* -------------------------------------------------------------------------
   4. BEAGYAZOTT TARTALMAK (iframe, terkep, video)
   A .mgh-embed burkolot szinten a functions.php szuroje teszi ra.
   ------------------------------------------------------------------------- */

.mgh-embed {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
}

.mgh-embed > iframe,
.mgh-embed > embed,
.mgh-embed > object,
.mgh-embed > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* a WordPress sajat beagyazas-burkoloi */
.wp-block-embed__wrapper iframe,
.elementor-widget-video iframe,
.elementor-custom-embed iframe {
    max-width: 100%;
}


/* -------------------------------------------------------------------------
   5. VILAGOS HATTERU OLDALAK FEJLECE
   A fejlec alapbol vilagos szovegu (minden oldal sotet heroval indul).
   Feher hatteru oldalakon ez olvashatatlan - mobilon a hamburger-ikon is
   eltunik. A body.mgh-header-dark osztalyt a functions.php teszi ra.
   ------------------------------------------------------------------------- */

body.mgh-header-dark .custom-header-inner:not(.is-sticky) {
    background: transparent !important;
    border-bottom: 1px solid #E2DFD8 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.mgh-header-dark .custom-header-inner:not(.is-sticky) .custom-header-logo a,
body.mgh-header-dark .custom-header-inner:not(.is-sticky) .custom-header-menu-list > li:not(.CTA) > a,
body.mgh-header-dark .custom-header-inner:not(.is-sticky) .custom-header-mobile-toggle {
    color: #1A1F1D !important;
}

body.mgh-header-dark .custom-header-inner:not(.is-sticky) .custom-header-mobile-toggle span {
    background: #1A1F1D !important;
}

body.mgh-header-dark .custom-header-inner:not(.is-sticky) .custom-header-logo a,
body.mgh-header-dark .custom-header-inner:not(.is-sticky) .custom-header-menu-list > li > a,
body.mgh-header-dark .custom-header-inner:not(.is-sticky) .custom-header-menu-list > li > a * {
    text-shadow: none !important;
}

body.mgh-header-dark .custom-header-inner:not(.is-sticky) .custom-header-menu-list > li.CTA > a {
    background: #0F2B22 !important;
    color: #FFFFFF !important;
    border-color: #0F2B22 !important;
}


/* -------------------------------------------------------------------------
   6. MOBIL (OFF-CANVAS) MENU
   A sidebar hattere Customizerbol feher (hc_sidebar_bg), a style.css fenti
   blokkjai viszont sotet sidebarra keszultek. Az itt kovetkezo szabalyok
   ezt igazitjak helyre + noveltek a tapintasi celpontokat.

   FONTOS: a hello-elementor reset !important-tal allitja a <button> meretet
   es betumeretet, ezert itt is !important kell - kulonben a bezaro gomb
   18x30px marad (lasd a leirat "VEDELEM A TEMA STILUSAI ELLEN" jegyzetet).
   ------------------------------------------------------------------------- */

:root {
    --mgh-mobile-menu-size:    17px;   /* volt: 15px (--hc-menu-font-size) */
    --mgh-mobile-submenu-size: 15px;   /* volt: 14px (--hc-submenu-font-size) */
    --mgh-mobile-close-size:   48px;   /* volt: 18x30px */
}

/* --- bezaro gomb: nagyobb es BAL oldalon --- */

.custom-header-sidebar-top {
    justify-content: flex-start;
    gap: 16px;
}

.custom-header-sidebar-close {
    order: -1;                                  /* a logo ele, balra */

    width:  var(--mgh-mobile-close-size) !important;
    height: var(--mgh-mobile-close-size) !important;
    flex: 0 0 auto !important;

    padding: 0 !important;

    font-size: 30px !important;
    line-height: 1 !important;

    border: 1px solid rgba(15, 43, 34, .16) !important;
    border-radius: 50% !important;

    transition: background .2s, border-color .2s;
}

.custom-header-sidebar-close:hover,
.custom-header-sidebar-close:focus-visible {
    background: #F3F1EC !important;
    border-color: rgba(15, 43, 34, .32) !important;
}

/* ha van logo a sidebar tetejen, az a gomb utan, jobbra tolva */
.custom-header-sidebar-logo {
    margin-left: auto;
}

/* --- menupontok betumerete --- */

.custom-header-mobile-list li a {
    font-size: var(--mgh-mobile-menu-size) !important;
}

.custom-header-mobile-list .sub-menu a {
    font-size: var(--mgh-mobile-submenu-size) !important;
}


/* -------------------------------------------------------------------------
   7. MOBIL SIDEBAR — UJRATERVEZES (2026-09-01)

   A sidebar hattere feher (hc_sidebar_bg), a szoveg #0f2b22, a hover #3E8E6A.
   A fenti 1005-1330 sorok kozotti alapblokk sotet sidebarra keszult, ezert az
   itteni szabalyok tobb helyen felul is irjak. A menupontok kartya-sorokka
   alakulnak, a lista vegen allo "Ajanlatot kerek" (li.CTA) pedig teljes
   szelessegu gombba.

   FONTOS: a regi szabalyok !important-tal allitjak a menupontok betumeretet es
   betutipusat, ezert itt is !important kell, kulonben nem ervenyesul.
   ------------------------------------------------------------------------- */

:root {
    --mgh-side-ink:     #0F2B22;   /* alap szovegszin */
    --mgh-side-muted:   #6B736F;   /* masodlagos szoveg */
    --mgh-side-line:    #E4E0D5;   /* valaszto vonal */
    --mgh-side-hover:   #F3F1EC;   /* sor hover hatter */
    --mgh-side-active:  #EAF2ED;   /* aktualis oldal hattere */
    --mgh-side-green:   #3E8E6A;
    --mgh-side-dark:    #0E2A21;   /* CTA gomb */
}

.custom-header-sidebar {
    padding: 16px 14px 26px !important;
    background: #FFFFFF;
    box-shadow: -18px 0 46px rgba(14, 42, 33, .12);
}

/* --- fejlec: bezaro gomb balra, marka jobbra --- */

.custom-header-sidebar-top {
    margin-bottom: 20px !important;
    padding: 0 4px 16px !important;
    border-bottom: 1px solid var(--mgh-side-line) !important;
}

.custom-header-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    color: var(--mgh-side-ink);
}

.custom-header-sidebar-mark {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #14382C 0%, #0E2A21 100%);
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(14, 42, 33, .22);
}

.custom-header-sidebar-mark svg {
    width: 21px;
    height: 21px;
    display: block;
}

.custom-header-sidebar-brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    text-align: left;
}

.custom-header-sidebar-brand-text b {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--mgh-side-ink);
}

.custom-header-sidebar-brand-text em {
    font-style: normal;
    font-size: 11.5px;
    color: var(--mgh-side-muted);
    margin-top: 3px;
}

/* ha kesobb feltoltenek logot, az se logjon ki */
.custom-header-sidebar-logo img {
    max-height: 44px !important;
}

/* --- szekciocimke --- */

.custom-header-sidebar-label {
    margin: 0 0 8px;
    padding: 0 12px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #9A9A93;
}

/* --- menupontok: kartya-sorok --- */

.custom-header-mobile-list > li {
    border-bottom: 0 !important;
}

.custom-header-mobile-list > li > a {
    padding: 14px 12px !important;
    border-radius: 12px;
    color: var(--mgh-side-ink) !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    transition: background-color .2s, color .2s;
}

.custom-header-mobile-list > li > a:hover,
.custom-header-mobile-list > li > a:focus-visible {
    background: var(--mgh-side-hover);
    color: var(--mgh-side-dark) !important;
}

/* levelelem: halvany jobbra mutato nyil */
.custom-header-mobile-list > li:not(.menu-item-has-children):not(.CTA) > a::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-right: 2px solid #C3C6C1;
    border-bottom: 2px solid #C3C6C1;
    transform: rotate(-45deg);
    margin-right: 6px;
    transition: border-color .2s, transform .2s;
}

.custom-header-mobile-list > li:not(.menu-item-has-children):not(.CTA) > a:hover::after {
    border-color: var(--mgh-side-green);
    transform: rotate(-45deg) translate(2px, 2px);
}

/* aktualis oldal */
.custom-header-mobile-list > li.current-menu-item > a,
.custom-header-mobile-list > li.current_page_item > a,
.custom-header-mobile-list > li.current-menu-ancestor > a {
    background: var(--mgh-side-active);
    color: var(--mgh-side-dark) !important;
    font-weight: 600 !important;
    box-shadow: inset 3px 0 0 var(--mgh-side-green);
}

/* --- almenu: behuzott, halvany kartya --- */

.custom-header-mobile-list .sub-menu {
    background: #F7F6F2 !important;
    border-radius: 12px;
    padding: 6px 6px 6px 10px !important;
    margin: 4px 0 8px !important;
}

.custom-header-mobile-list .sub-menu a {
    padding: 11px 10px !important;
    border-radius: 9px;
    color: var(--mgh-side-muted) !important;
    opacity: 1 !important;
    font-weight: 400 !important;
    gap: 10px;
}

.custom-header-mobile-list .sub-menu a::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #C9D6CE;
    transition: background-color .2s;
}

.custom-header-mobile-list .sub-menu a:hover,
.custom-header-mobile-list .sub-menu a:focus-visible {
    background: #EFEDE6;
    color: var(--mgh-side-dark) !important;
}

.custom-header-mobile-list .sub-menu a:hover::before {
    background: var(--mgh-side-green);
}

/* a lenyito nyil a szulo soron */
.custom-header-mobile-list li.menu-item-has-children > a::after {
    border-color: #9FA6A2 !important;
    margin-right: 6px !important;
}

.custom-header-mobile-list li.menu-item-has-children > a.is-active {
    background: var(--mgh-side-hover);
    color: var(--mgh-side-dark) !important;
}

.custom-header-mobile-list li.menu-item-has-children > a.is-active::after {
    border-color: var(--mgh-side-green) !important;
}

/* --- CTA: teljes szelessegu gomb a lista vegen --- */

.custom-header-mobile-list > li.CTA {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--mgh-side-line);
}

.custom-header-mobile-list > li.CTA > a {
    justify-content: center !important;
    gap: 10px;
    padding: 17px 20px !important;
    border-radius: 12px;
    background: var(--mgh-side-dark);
    color: #FFFFFF !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: 0 8px 20px rgba(14, 42, 33, .20);
    transition: background-color .2s, transform .2s, box-shadow .2s;
}

.custom-header-mobile-list > li.CTA > a::after {
    content: "";
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    margin: 0;
    transition: transform .2s;
}

.custom-header-mobile-list > li.CTA > a:hover,
.custom-header-mobile-list > li.CTA > a:focus-visible {
    background: #14382C;
    color: #FFFFFF !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(14, 42, 33, .26);
}

.custom-header-mobile-list > li.CTA > a:hover::after {
    transform: rotate(-45deg) translate(2px, 2px);
}

/* --- CTA alatti megjegyzes --- */

.custom-header-sidebar-note {
    margin: 12px 4px 0;
    font-size: 12.5px;
    line-height: 1.5;
    text-align: center;
    color: var(--mgh-side-muted);
}