/**
 * Responsive layout for small screens.
 *
 * The old Contao site solved this with two entirely separate themes
 * (Desktop_*.css + a hand-built Mobile_*.css with its own markup), switched
 * either by device detection or a manual "mobile version" link. We use one
 * template and one set of markup instead - style.css (untouched, ported from
 * the old Desktop theme) still defines the >1020px layout; everything below
 * overrides it for narrower screens. 1020px matches the breakpoint Contao
 * itself used between its two themes.
 */

.mobile-menu-toggle {
    display: none;
}

@media screen and (min-width: 1021px) {
    #wrapper {
        width: 1024px;
        margin: 0 auto;
    }
}

@media screen and (max-width: 1020px) {
    #wrapper {
        width: 100%;
        box-shadow: none;
        border-radius: 0;
    }

    body {
        background-attachment: scroll;
    }

    #header {
        height: auto;
        background-size: cover;
    }

    #header .inside {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 15px;
    }

    #logo {
        position: static;
        order: 1;
        margin: 0;
    }

    .mobile-menu-toggle {
        display: block;
        order: 2;
        margin-left: auto;
        width: 42px;
        height: 34px;
        padding: 0;
        background-color: rgba(255, 255, 255, .75);
        border: 1px solid rgba(0, 0, 0, .5);
        border-radius: 6px;
        font-size: 20px;
        line-height: 30px;
        cursor: pointer;
    }

    #header .mod_changelanguage {
        position: static;
        order: 3;
        width: 100%;
        margin-top: 15px;
        text-align: right;
    }

    #nav_level_1 {
        order: 4;
        position: static;
        width: 100%;
        display: none;
        margin-top: 15px;
        padding: 10px 15px;
    }

    #nav_level_1.is-open {
        display: block;
    }

    #nav_level_1 li {
        float: none;
        display: block;
        margin: 0 0 8px;
    }

    #nav_level_1 li.active,
    #nav_level_1 li.trail {
        border-radius: 0 15px 15px 0;
    }

    #container {
        border-width: 0;
    }

    #main {
        padding: 15px;
    }

    #main .inside {
        min-height: 0;
    }

    #main .inside .mod_article {
        padding: 0;
    }

    figure.image_container.float_left,
    figure.image_container.float_right {
        float: none;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }

    .ce_gallery li {
        float: none !important;
        width: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 15px !important;
    }

    table {
        width: 100% !important;
    }

    input:not([type="button"]):not([type="submit"]):not([type="checkbox"]),
    textarea {
        width: 100%;
        box-sizing: border-box;
    }

    #footer {
        padding: 0 15px;
    }
}