/* Extend the existing hamburger/mobile nav (.mobile_navbar) up to tablet widths,
   replacing the desktop .navbar-default menu which was overflowing/squeezing
   between 768px and 1200px. Mirrors the same rules custom.css already applies
   below 767px, just widened to this breakpoint. */

@media only screen and (min-width: 768px) and (max-width: 1250px) {
    header .navbar .navbar-nav {
        width: 100%;
    }

    header .navbar-default .navbar-nav > li {
        border-right: 0;
    }

    header .navbar-fixed-bottom .navbar-collapse,
    header .navbar-fixed-top .navbar-collapse {
        max-height: none;
        padding: 0;
    }

    header .navbar-header {
        text-align: center;
    }

    header .navbar-toggle {
        float: none;
        border: 0;
    }

    header .navbar-default .navbar-toggle:focus,
    header .navbar-default .navbar-toggle:hover {
        background: transparent;
    }

    nav.mobile_navbar.navbar-expand-lg.navbar-dark.bg-primary.p-0.mb-3.nav-links-mobile-view {
        display: block !important;
        float: none !important;
        width: 100%;
        background: none;
        border-bottom: 2px solid #1755a2;
        padding-bottom: 8px;
    }

    nav.navbar.navbar-default.navbar-fixed-top {
        display: none !important;
    }

    a.navbar-brand.d-block.d-sm-none {
        margin-bottom: 14px;
    }

    /* The desktop logo block in header.php renders alongside .mobile_navbar's own
       logo in this range (it's only hidden below 767px in custom.css), causing a
       visible duplicate. .mobile_navbar already shows the logo, so hide this one. */
    header #logo {
        display: none !important;
    }

    a.confmeets_journal_mobileheader-logo {
        margin-left: 0;
        display: inline-block;
    }

    a.confmeets_journal_mobileheader-logo img {
        width: 200px;
        max-width: 100%;
    }

    .mobile_navbar .container {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        float: none !important;
        width: 100% !important;
        position: relative;
    }

    .mobile_navbar .container > .confmeets_journal_mobileheader-logo {
        order: 1;
        float: none !important;
        margin-right: auto;
    }

    .mobile_navbar .container > button.navbar-toggler {
        order: 2;
        float: none !important;
        margin-left: 10px;
    }

    .mobile_navbar .container > .navbar-collapse {
        order: 3;
        position: absolute !important;
        top: 100%;
        left: 0;
        z-index: 1000;
        flex: 0 0 100%;
        width: 100% !important;
        float: none !important;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .mobile_navbar .container > .navbar-collapse ul.navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        float: none !important;
        width: 100%;
    }

    .mobile_navbar .container > .navbar-collapse ul.navbar-nav > li {
        float: none !important;
        width: 100%;
    }

    /* Bootstrap 3's own CSS forces ".navbar-collapse.collapse { display: block !important }"
       at min-width:768px so the desktop nav always shows. We're reusing this collapse
       for the hamburger menu up to 1200px, so it must default to closed here instead. */
    .mobile_navbar .navbar-collapse.collapse {
        display: none !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    .mobile_navbar .navbar-collapse.collapsing {
        display: block !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        padding: 0 10px;
        margin-top: 8px;
        transition: height 0.05s ease !important;
    }

    .mobile_navbar .navbar-collapse.collapse.in,
    .mobile_navbar .navbar-collapse.collapse.show {
        display: block !important;
        height: auto !important;
        max-height: 60vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px;
        margin-top: 8px;
        background: aliceblue;
        border: 1px solid #1c5eb3;
        transition: none !important;
    }

    .mobile_navbar .nav-item.dropdown .nav-link.dropdown-toggle {
        display: block !important;
        left: 0px;
    }

    .mobile_navbar button.navbar-toggler.collapsed {
        background: #428bca;
    }

    .navbar-toggler.collapsed[data-toggle="collapse"]::before {
        content: "\002B";
    }

    [data-toggle="collapse"]::before {
        content: '\2212';
        color: aquamarine;
        font-weight: bold;
        margin-left: 5px;
        margin-right: 5px;
    }

    .mobile_navbar button.navbar-toggler {
        position: relative;
        top: 0;
        background: #428bca;
    }

    .navbar-nav {
        margin: 0px !important;
    }

    .jnls-home-banner {
        margin-top: 83px !important;
    }
}