/*=============================================
=  Apexa – Mobil menü: drill-down (panel)     =
=  Build-mentes, kézzel írt stílus.            =
=  A régi lenyíló (slideToggle) megjelenést    =
=  váltja ki a .tgmobile menüben.              =
=============================================*/

/* --- A drawer (off-canvas) megnyitásának sima becsúsztatása ---
   A téma alap easing-je (cubic-bezier(.785,.135,.15,.86)) keresztezett
   kontrollpontú, ezért a mozgás középen "megdöccen" (áttűnés-érzet). Tiszta,
   lassuló (ease-out) görbére cseréljük, csak a transform-ot animáljuk, és a
   backdrop fade időzítését is hozzáigazítjuk. */
.tgmobile__menu {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
}

.tgmobile__menu-backdrop {
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

@media (prefers-reduced-motion: reduce) {
    .tgmobile__menu,
    .tgmobile__menu-backdrop {
        transition: none !important;
    }
}

/* A menü-konténer a "viewport": kilóg részt elrejtjük az animációhoz */
.tgmobile__menu .tgmobile__menu-outer.tg-drilldown {
    position: relative;
    overflow: hidden;
    padding: 0;
}

/* Minden szint (gyökér + almenük) egy-egy panel. Egyszerre csak az aktív
   látszik (display:block), a többi rejtett – így nincs egymásra csúszás,
   és felülírjuk a Bootstrap .dropdown-menu pozícionálását is. */
.tg-drilldown .tg-dd-panel {
    display: none;
    position: static !important;
    inset: auto !important;
    float: none !important;
    list-style: none;
    width: 100%;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: var(--tg-color-white-default, #fff);
}

/* Csak az aktív panel látszik */
.tg-drilldown .tg-dd-panel.is-active {
    display: block;
}

/* Be-/kicsúszó animáció (előre = jobbról, vissza = balról) */
@keyframes tg-dd-slide-in-right {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes tg-dd-slide-in-left {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

.tg-drilldown .tg-dd-panel.is-active.tg-anim-fwd {
    animation: tg-dd-slide-in-right 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

.tg-drilldown .tg-dd-panel.is-active.tg-anim-back {
    animation: tg-dd-slide-in-left 0.28s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

/* Sorok */
.tg-drilldown .tg-dd-panel li {
    position: relative;
    display: block;
    border-top: 1px solid rgb(0 0 0 / 8%);
}

.tg-drilldown .tg-dd-panel li:first-child {
    border-top: none;
}

.tg-drilldown .tg-dd-panel li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 14px 22px;
    min-height: 54px;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--tg-heading-color);
    /*text-transform: capitalize;*/
    transition: color 0.25s ease, background-color 0.25s ease;
}

.tg-drilldown .tg-dd-panel li.active > a,
.tg-drilldown .tg-dd-panel li > a:hover,
.tg-drilldown .tg-dd-panel li > a:focus {
    color: var(--tg-theme-primary);
}

/* "Tovább" nyíl a gyerek-panellal rendelkező soroknál */
.tg-drilldown .tg-dd-panel li.menu-item-has-children > a::after {
    content: '';
    flex: 0 0 auto;
    margin-inline-start: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    opacity: 0.55;
}

/* Vissza-sáv a gyerek-panel tetején (ráragad a panel tetejére) */
.tg-drilldown .tg-dd-back {
    position: sticky;
    top: 0;
    z-index: 2;
    border-top: none !important;
    border-bottom: 1px solid rgb(0 0 0 / 8%);
    background: var(--tg-color-gray-3, #f5f6f8);
}

.tg-drilldown .tg-dd-back-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 22px;
    min-height: 54px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    text-align: start;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--tg-theme-primary);
}

.tg-drilldown .tg-dd-back-ico {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* A szülő saját oldalára mutató "áttekintés" link */
.tg-drilldown .tg-dd-overview > a {
    font-weight: 600;
    color: var(--tg-theme-primary);
}

/* A régi +/- gomb biztos elrejtése, ha mégis megmaradna */
.tg-drilldown .dropdown-btn {
    display: none !important;
}

/* Látható fókuszjelzés (WCAG 2.4.7) */
.tg-drilldown .tg-dd-panel li > a:focus-visible,
.tg-drilldown .tg-dd-overview > a:focus-visible,
.tg-drilldown .tg-dd-back-btn:focus-visible {
    outline: 2px solid var(--tg-theme-primary, #1a73e8);
    outline-offset: -2px;
}

/* Mozgáscsökkentés kérése esetén nincs csúszó animáció (WCAG 2.3.3) */
@media (prefers-reduced-motion: reduce) {
    .tg-drilldown .tg-dd-panel.is-active.tg-anim-fwd,
    .tg-drilldown .tg-dd-panel.is-active.tg-anim-back {
        animation: none;
    }
}

/* RTL: a nyilak irányának tükrözése */
[dir='rtl'] .tg-drilldown .tg-dd-panel li.menu-item-has-children > a::after {
    transform: rotate(135deg);
}

[dir='rtl'] .tg-drilldown .tg-dd-back-ico {
    transform: rotate(-135deg);
}