/* Custom fix: hamburger menu for small screens. Not part of the original IONOS export. */

.mnf-toggle {
    display: none;
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 1000;
    width: 34px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}
.mnf-toggle span {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: #111;
    border-radius: 2px;
    transition: transform .2s ease, opacity .2s ease;
}
.mnf-toggle span:nth-child(1) { top: 0; }
.mnf-toggle span:nth-child(2) { top: 12px; }
.mnf-toggle span:nth-child(3) { top: 24px; }
body.mnf-open .mnf-toggle span:nth-child(1) { transform: translateY(12px) rotate(45deg); }
body.mnf-open .mnf-toggle span:nth-child(2) { opacity: 0; }
body.mnf-open .mnf-toggle span:nth-child(3) { transform: translateY(-12px) rotate(-45deg); }

@media (max-width: 1024px) {
    #dm .dmInner,
    .dmInner {
        min-width: 0 !important;
    }

    .dmHeaderContent.freeHeaderRow1 {
        position: relative;
    }

    .mnf-toggle {
        display: block;
    }

    /* Leave room on the left for the hamburger button and center the logo */
    #dm .dmHeaderContent.freeHeaderRow1 {
        padding-left: 44px;
    }

    #dm .main-navigation.unifiednav.mnf-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 75vh;
        overflow-y: auto;
        background: #fff;
        box-shadow: 0 8px 16px rgba(0, 0, 0, .15);
        z-index: 999;
    }
    body.mnf-open #dm .main-navigation.unifiednav.mnf-nav {
        display: block;
    }

    /* The original CSS lays out <li> and <ul> as flex rows (for the desktop
       hover flyouts). On mobile everything must stack in normal block flow,
       so force block display top to bottom regardless of the base rules. */
    #dm .main-navigation.unifiednav.mnf-nav .unifiednav__container,
    #dm .main-navigation.unifiednav.mnf-nav .unifiednav__item-wrap {
        display: block !important;
        width: 100%;
        flex: none;
    }
    #dm .main-navigation.unifiednav.mnf-nav .unifiednav__item {
        width: 100%;
        padding: 14px 20px;
        border-bottom: 1px solid #ececec;
        box-sizing: border-box;
    }
    #dm .main-navigation.unifiednav.mnf-nav .unifiednav__item_has-sub-nav .icon {
        display: inline-flex;
        margin-left: auto;
        padding: 4px 8px;
        transition: transform .2s ease;
    }
    #dm .main-navigation.unifiednav.mnf-nav .unifiednav__item-wrap.mnf-submenu-open > .unifiednav__item .icon {
        transform: rotate(180deg);
    }

    /* Sub-menus: collapsed accordion panels instead of hover flyouts */
    #dm .main-navigation.unifiednav.mnf-nav .unifiednav__container[data-depth] {
        display: none !important;
        position: static !important;
        opacity: 1;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        background: #faf9f9;
    }
    #dm .main-navigation.unifiednav.mnf-nav .unifiednav__item-wrap.mnf-submenu-open > .unifiednav__container[data-depth] {
        display: block !important;
    }
    #dm .main-navigation.unifiednav.mnf-nav .unifiednav__container[data-depth] .unifiednav__item {
        padding-left: 36px;
    }
    #dm .main-navigation.unifiednav.mnf-nav .unifiednav__container[data-depth='1'] .unifiednav__item {
        padding-left: 52px;
    }

    /* The site's own floating "ENTRADAS" button (a Duda global widget) carries a
       per-instance CSS override (position:relative, fixed 0/0 offsets) that only
       becomes visible now that the page is allowed to be narrower than 768px.
       Restore proper fixed bottom-right placement so it doesn't sit on top of
       the page text. chat-bubble.js reads this button to stack itself above it. */
    #dm#dm .sticky-widgets-container-global a[class*="sticky-mobile-position"],
    #dm#dm .sticky-widgets-container a[class*="sticky-mobile-position"] {
        position: fixed !important;
        top: auto !important;
        bottom: 16px !important;
        left: auto !important;
        right: 16px !important;
        margin: 0 !important;
        max-width: calc(100% - 32px);
        z-index: 9998;
    }

    /* The home hero carousel (FlexSlider, a jQuery plugin bundled in
       runtime.min.js) computes each slide's width/position in JS from the
       container's pixel width. On a real phone over a real network, that
       calculation can race image loading and the narrower layout our fixes
       enable, leaving two slides visible at once or a tall blank gap while
       nothing has rendered yet. Force only the first slide to ever be
       visible on mobile so it degrades to one static poster instead of a
       broken/duplicated one. This does disable the slide auto-rotation on
       mobile only — desktop keeps the working carousel untouched. */
    #dm .flexslider .slides > li {
        display: none !important;
    }
    #dm .flexslider .slides > li:first-child {
        display: block !important;
    }

    /* The slider's containers (.dmImageSlider, .flexslider, .slides, li) all
       carry a fixed desktop pixel height (e.g. 350/698px) and the <img>
       inside is absolutely positioned with object-fit:contain to fill that
       box. That box's aspect ratio only makes sense at desktop widths — on a
       narrow phone it's much "squarer" than the wide poster images, so
       contain letterboxes with big blank bars above/below. Let the image
       flow naturally at its own intrinsic aspect ratio instead of being
       forced into a fixed-height box.
       On top of that, the widget itself carries a PER-INSTANCE rule (Duda
       editor auto-generates one per widget id, e.g. "div.u_1015447537")
       fixing its height in px with !important and higher specificity than a
       plain class selector — same pattern as the ENTRADAS button fix above.
       #dm#dm (two IDs) beats any single-ID vendor rule outright. */
    #dm#dm .dmImageSlider,
    #dm#dm .flexslider,
    #dm#dm .flexslider .slides,
    #dm#dm .flexslider .slides > li {
        height: auto !important;
        min-height: 0 !important;
    }
    #dm .flexslider .slides > li:first-child > img {
        position: static !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        object-fit: unset !important;
    }
}