/*
 * BD Responsive Menu
 * Kompletní responzivní TOP menu pro Joomla.
 */

.bd-rm,
.bd-rm * {
    box-sizing: border-box;
}

.bd-rm {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    background: var(--bd-rm-bg, #000);
    color: var(--bd-rm-text, #fff);
    position: relative;
    z-index: 9999;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    line-height: 1;
}

/* TOP menu can be placed inside an existing template .container or directly into a module position.
   In full-viewport mode the whole menu becomes the black TOP bar: logo + phone left,
   large flexible gap, menu + icons right. */
.bd-rm--viewport {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    isolation: isolate;
    overflow: visible;
}

.bd-rm--viewport::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bd-rm-bg, #000);
    z-index: -1;
}

.bd-rm--sticky {
    position: sticky;
    top: 0;
}

.bd-rm__inner {
    width: 100% !important;
    height: var(--bd-rm-desktop-height, 50px);
    min-height: var(--bd-rm-desktop-height, 50px);
    display: grid !important;
    grid-template-columns: auto auto minmax(var(--bd-rm-phone-menu-gap, 30px), 1fr) auto auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 0 !important;
    margin: 0 auto !important;
    padding: 0 var(--bd-rm-padding-x, 45px) !important;
    background: var(--bd-rm-bg, #000);
}

.bd-rm--boxed .bd-rm__inner {
    max-width: var(--bd-rm-max-width, 1200px);
}

/* Desktop layout: logo + phone stay on the left, menu and icons are pushed to the right.
   Column 3 is the large visual gap between phone and menu. */
.bd-rm:not(.bd-rm--mobile) .bd-rm__logo {
    grid-column: 1 !important;
}

.bd-rm:not(.bd-rm--mobile) .bd-rm__phone {
    grid-column: 2 !important;
    justify-self: start !important;
}

.bd-rm:not(.bd-rm--mobile) .bd-rm__nav {
    grid-column: 4 !important;
    justify-self: end !important;
}

.bd-rm:not(.bd-rm--mobile) .bd-rm__social {
    grid-column: 5 !important;
    justify-self: end !important;
}


/* --------------------------------------------------------------------------
   Legacy template containment
   --------------------------------------------------------------------------
   The original Krav Maga template has fixed floats and a .logo height of 150px.
   When this module is inserted into one of the old positions inside #top
   (Logo / menu / FB / rychlý kontakt), those parent wrappers must be neutralized.
   Otherwise the 50px menu is visually pushed into a 150px black block.
*/
#top:has(.bd-rm) {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--bd-rm-desktop-height, 50px) !important;
    min-height: var(--bd-rm-desktop-height, 50px) !important;
    max-height: var(--bd-rm-desktop-height, 50px) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--bd-rm-bg, #000) !important;
    overflow: visible !important;
}

#top:has(.bd-rm) > .container {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--bd-rm-desktop-height, 50px) !important;
    min-height: var(--bd-rm-desktop-height, 50px) !important;
    max-height: var(--bd-rm-desktop-height, 50px) !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

#top:has(.bd-rm) .logo,
#top:has(.bd-rm) .rychly_kontakt,
#top:has(.bd-rm) .mainmenu,
#top:has(.bd-rm) .menu,
#top:has(.bd-rm) .fb {
    float: none !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-sizing: border-box !important;
}

#top:has(.bd-rm) .logo:has(.bd-rm),
#top:has(.bd-rm) .rychly_kontakt:has(.bd-rm),
#top:has(.bd-rm) .mainmenu:has(.bd-rm),
#top:has(.bd-rm) .menu:has(.bd-rm),
#top:has(.bd-rm) .fb:has(.bd-rm) {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    left: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--bd-rm-desktop-height, 50px) !important;
    min-height: var(--bd-rm-desktop-height, 50px) !important;
    max-height: var(--bd-rm-desktop-height, 50px) !important;
    overflow: visible !important;
}

#top:has(.bd-rm) .logo:not(:has(.bd-rm)),
#top:has(.bd-rm) .rychly_kontakt:not(:has(.bd-rm)),
#top:has(.bd-rm) .mainmenu:not(:has(.bd-rm)),
#top:has(.bd-rm) .menu:not(:has(.bd-rm)),
#top:has(.bd-rm) .fb:not(:has(.bd-rm)) {
    display: none !important;
}

/* Strong reset against the original .menu li / .menu a rules in template.css. */
#top .bd-rm ul,
#top .bd-rm li,
#top .bd-rm a,
#top .bd-rm span,
#top .bd-rm button {
    float: none !important;
    box-sizing: border-box !important;
}

#top .bd-rm ul,
#top .bd-rm li {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

#top .bd-rm .bd-rm__inner {
    height: var(--bd-rm-desktop-height, 50px) !important;
    min-height: var(--bd-rm-desktop-height, 50px) !important;
    max-height: var(--bd-rm-desktop-height, 50px) !important;
}

@media (max-width: 799px) {
    #top:has(.bd-rm),
    #top:has(.bd-rm) > .container,
    #top:has(.bd-rm) .logo:has(.bd-rm),
    #top:has(.bd-rm) .rychly_kontakt:has(.bd-rm),
    #top:has(.bd-rm) .mainmenu:has(.bd-rm),
    #top:has(.bd-rm) .menu:has(.bd-rm),
    #top:has(.bd-rm) .fb:has(.bd-rm) {
        height: auto !important;
        min-height: var(--bd-rm-mobile-min-height, 168px) !important;
        max-height: none !important;
    }

    #top .bd-rm .bd-rm__inner {
        height: auto !important;
        min-height: var(--bd-rm-mobile-min-height, 168px) !important;
        max-height: none !important;
    }
}

.bd-rm a {
    color: inherit;
}

.bd-rm__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

.bd-rm__logo img {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: var(--bd-rm-logo-desktop, 42px);
}

.bd-rm__phone {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    margin-left: var(--bd-rm-logo-phone-gap, 24px);
    margin-right: 0;
    color: var(--bd-rm-text, #fff);
    font-size: var(--bd-rm-phone-font, 14px);
    font-weight: 700;
    white-space: nowrap;
}

.bd-rm--has-logo:not(.bd-rm--has-phone) .bd-rm__logo {
    margin-right: auto;
}

.bd-rm__phone a,
.bd-rm__phone span {
    color: var(--bd-rm-text, #fff);
    text-decoration: none;
}

.bd-rm__phone a:hover,
.bd-rm__phone a:focus-visible {
    color: var(--bd-rm-hover, #e31b23);
}

.bd-rm__nav {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 auto;
    margin-left: 0;
}

.bd-rm:not(.bd-rm--has-phone):not(.bd-rm--has-logo) .bd-rm__nav {
    justify-self: end;
}

.bd-rm--align-right .bd-rm__nav {
    justify-content: flex-end;
}

.bd-rm--align-center .bd-rm__nav {
    justify-content: center;
}

.bd-rm--align-left .bd-rm__nav {
    justify-content: flex-start;
}

.bd-rm__list {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bd-rm__item {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bd-rm__link {
    display: flex;
    align-items: center;
    height: var(--bd-rm-desktop-height, 50px);
    padding: 0 var(--bd-rm-item-padding-x, 5px);
    color: var(--bd-rm-text, #fff);
    font-size: var(--bd-rm-menu-font, 14px);
    font-weight: 700;
    line-height: var(--bd-rm-desktop-height, 50px);
    text-decoration: none;
    white-space: nowrap;
    border: 0;
    background: transparent;
    outline-offset: -2px;
}

.bd-rm__link:hover,
.bd-rm__link:focus-visible,
.bd-rm__item--active > .bd-rm__link {
    color: var(--bd-rm-hover, #e31b23);
}

.bd-rm__list--level-1 > .bd-rm__item:first-child > .bd-rm__link {
    color: var(--bd-rm-accent, #e31b23);
}

.bd-rm__submenu-toggle {
    display: none;
}

.bd-rm__list--level-2,
.bd-rm__list--level-3,
.bd-rm__list--level-4,
.bd-rm__list--level-5,
.bd-rm__list--level-6 {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    background: var(--bd-rm-sub-bg, #050505);
    border-top: 2px solid var(--bd-rm-accent, #e31b23);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
    z-index: 10001;
}

.bd-rm__list--level-3,
.bd-rm__list--level-4,
.bd-rm__list--level-5,
.bd-rm__list--level-6 {
    top: 0;
    left: 100%;
}

.bd-rm__item:hover > .bd-rm__list,
.bd-rm__item:focus-within > .bd-rm__list {
    display: block;
}

.bd-rm__list--level-2 .bd-rm__item,
.bd-rm__list--level-3 .bd-rm__item,
.bd-rm__list--level-4 .bd-rm__item,
.bd-rm__list--level-5 .bd-rm__item,
.bd-rm__list--level-6 .bd-rm__item {
    width: 100%;
}

.bd-rm__list--level-2 .bd-rm__link,
.bd-rm__list--level-3 .bd-rm__link,
.bd-rm__list--level-4 .bd-rm__link,
.bd-rm__list--level-5 .bd-rm__link,
.bd-rm__list--level-6 .bd-rm__link {
    height: auto;
    min-height: 42px;
    padding: 0 18px;
    line-height: 42px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
}

.bd-rm__list--level-2 .bd-rm__link:hover,
.bd-rm__list--level-3 .bd-rm__link:hover,
.bd-rm__list--level-4 .bd-rm__link:hover,
.bd-rm__list--level-5 .bd-rm__link:hover,
.bd-rm__list--level-6 .bd-rm__link:hover {
    background: rgba(255, 255, 255, .05);
}

.bd-rm__social {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-left: 20px;
}

.bd-rm__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.bd-rm__social img {
    display: block;
    width: auto;
    max-height: var(--bd-rm-social-size, 25px);
}

.bd-rm__toggle {
    display: none;
}


/* Desktop tightening for narrower screens before hamburger mode. */
@media (max-width: 1180px) and (min-width: 800px) {
    .bd-rm:not(.bd-rm--mobile) .bd-rm__inner {
        padding-left: min(var(--bd-rm-padding-x, 30px), 22px);
        padding-right: min(var(--bd-rm-padding-x, 30px), 22px);
        grid-template-columns: auto auto minmax(var(--bd-rm-phone-menu-gap, 30px), 1fr) auto auto !important;
    }

    .bd-rm:not(.bd-rm--mobile) .bd-rm__phone {
        margin-left: min(var(--bd-rm-logo-phone-gap, 24px), 28px);
    }

    .bd-rm:not(.bd-rm--mobile) .bd-rm__nav {
        margin-left: 0;
    }

    .bd-rm:not(.bd-rm--mobile) .bd-rm__link {
        padding-left: min(var(--bd-rm-item-padding-x, 5px), 4px);
        padding-right: min(var(--bd-rm-item-padding-x, 5px), 4px);
    }
}

/* ===========================
   MOBILE MODE - activated by JS
   =========================== */

.bd-rm--mobile {
    background: var(--bd-rm-bg, #000);
}

.bd-rm--mobile .bd-rm__inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    height: auto;
    min-height: var(--bd-rm-mobile-min-height, 168px);
    padding: 0 var(--bd-rm-mobile-padding-x, 15px) 20px var(--bd-rm-mobile-padding-x, 15px);
}

.bd-rm--mobile .bd-rm__logo {
    order: 1;
    width: 100%;
    justify-content: center;
    padding-top: 38px;
    margin: 0;
}

.bd-rm--mobile .bd-rm__logo img {
    max-height: var(--bd-rm-logo-mobile, 70px);
}

.bd-rm--mobile .bd-rm__toggle {
    order: 0;
    display: flex;
    position: absolute;
    top: 7px;
    right: 7px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--bd-rm-text, #fff);
    cursor: pointer;
    z-index: 10030;
}

.bd-rm__toggle-line {
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
}

.bd-rm--mobile.bd-rm--open .bd-rm__toggle-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.bd-rm--mobile.bd-rm--open .bd-rm__toggle-line:nth-child(2) {
    opacity: 0;
}

.bd-rm--mobile.bd-rm--open .bd-rm__toggle-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.bd-rm--mobile .bd-rm__nav {
    display: none;
    margin-left: 0;
}

.bd-rm--mobile.bd-rm--open .bd-rm__nav {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
    padding: 92px 0 85px 0;
    background: var(--bd-rm-bg-open, #000);
    z-index: 10020;
}

.bd-rm--mobile .bd-rm__list,
.bd-rm--mobile .bd-rm__list--level-2,
.bd-rm--mobile .bd-rm__list--level-3,
.bd-rm--mobile .bd-rm__list--level-4,
.bd-rm--mobile .bd-rm__list--level-5,
.bd-rm--mobile .bd-rm__list--level-6 {
    position: static;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.bd-rm--mobile .bd-rm__item {
    display: block;
    width: 100%;
}

.bd-rm--mobile .bd-rm__link {
    display: block;
    width: 100%;
    height: auto;
    min-height: 54px;
    padding: 0 46px;
    color: var(--bd-rm-text, #fff);
    font-size: var(--bd-rm-menu-mobile-font, 20px);
    line-height: 54px;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    border-bottom: 1px dotted var(--bd-rm-mobile-border, rgba(255,255,255,.7));
}

.bd-rm--mobile .bd-rm__list--level-2,
.bd-rm--mobile .bd-rm__list--level-3,
.bd-rm--mobile .bd-rm__list--level-4,
.bd-rm--mobile .bd-rm__list--level-5,
.bd-rm--mobile .bd-rm__list--level-6 {
    display: none;
    background: rgba(255, 255, 255, .035);
}

.bd-rm--mobile .bd-rm__item--expanded > .bd-rm__list {
    display: block;
}

.bd-rm--mobile .bd-rm__list--level-2 .bd-rm__link {
    min-height: 46px;
    padding-left: 65px;
    font-size: calc(var(--bd-rm-menu-mobile-font, 20px) - 3px);
    line-height: 46px;
    border-bottom-color: rgba(255, 255, 255, .35);
}

.bd-rm--mobile .bd-rm__list--level-3 .bd-rm__link,
.bd-rm--mobile .bd-rm__list--level-4 .bd-rm__link,
.bd-rm--mobile .bd-rm__list--level-5 .bd-rm__link,
.bd-rm--mobile .bd-rm__list--level-6 .bd-rm__link {
    min-height: 42px;
    padding-left: 82px;
    font-size: calc(var(--bd-rm-menu-mobile-font, 20px) - 5px);
    line-height: 42px;
    border-bottom-color: rgba(255, 255, 255, .25);
}

.bd-rm--mobile .bd-rm__submenu-toggle {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 46px;
    height: 54px;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--bd-rm-text, #fff);
    cursor: pointer;
}

.bd-rm--mobile .bd-rm__submenu-toggle::before {
    content: "+";
    display: block;
    font-size: 24px;
    line-height: 54px;
    text-align: center;
}

.bd-rm--mobile .bd-rm__item--expanded > .bd-rm__submenu-toggle::before {
    content: "−";
}

.bd-rm--mobile .bd-rm__social {
    order: 2;
    width: 42%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0 0;
    padding: 0 10px 0 0;
}

.bd-rm--mobile .bd-rm__social img {
    max-height: var(--bd-rm-social-mobile-size, 38px);
}

.bd-rm--mobile .bd-rm__phone {
    order: 3;
    width: 58%;
    justify-content: flex-start;
    margin: 10px 0 0 0;
    padding: 0 0 0 8px;
    font-size: var(--bd-rm-phone-font, 14px);
    line-height: var(--bd-rm-social-mobile-size, 38px);
}

/* No-JS fallback with default mobile breakpoint. */
@media (max-width: 799px) {
    .bd-rm:not(.bd-rm--ready) .bd-rm__inner {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        height: auto;
        min-height: var(--bd-rm-mobile-min-height, 168px);
        padding: 0 var(--bd-rm-mobile-padding-x, 15px) 20px var(--bd-rm-mobile-padding-x, 15px);
    }

    .bd-rm:not(.bd-rm--ready) .bd-rm__logo {
        order: 1;
        width: 100%;
        justify-content: center;
        padding-top: 38px;
    }

    .bd-rm:not(.bd-rm--ready) .bd-rm__logo img {
        max-height: var(--bd-rm-logo-mobile, 70px);
    }

    .bd-rm:not(.bd-rm--ready) .bd-rm__toggle {
        display: flex;
        position: absolute;
        top: 7px;
        right: 7px;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 5px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--bd-rm-text, #fff);
    }

    .bd-rm:not(.bd-rm--ready) .bd-rm__nav {
        display: none;
    }

    .bd-rm:not(.bd-rm--ready) .bd-rm__social {
        order: 2;
        width: 42%;
        justify-content: flex-end;
        margin: 10px 0 0 0;
        padding-right: 10px;
    }

    .bd-rm:not(.bd-rm--ready) .bd-rm__phone {
        order: 3;
        width: 58%;
        margin: 10px 0 0 0;
        padding-left: 8px;
        line-height: var(--bd-rm-social-mobile-size, 38px);
    }
}