/* ==========================================================================
   Navbar fit
   --------------------------------------------------------------------------
   Fixes the site-wide horizontal scroll ("page swipes right to left").

   The desktop nav (.main-nav) is shown from 1200px up, but its four flex
   children have a combined minimum width of ~1546px:

       logo 217 + search 218 + menu 797 + MEMBERSHIP/OUR VLE 300

   The menu links are nowrap and .navbar-search is `flex: 0 0 auto`, so the
   row cannot shrink below that floor. Between 1200px and ~1570px the floor
   is wider than the viewport, so the nav pushes the whole document out and
   every page gains 120-190px of horizontal scroll. (Below 1200px the mobile
   nav takes over, above ~1570px there is room, which is why it only shows
   on laptop screens.)

   These rules recover the difference inside that band only.
   ========================================================================== */

@media only screen and (min-width: 1200px) and (max-width: 1599px) {

    .main-nav nav.navbar {
        flex-wrap: nowrap;
    }

    /* Logo: let it scale down instead of holding its natural width. */
    .main-nav .navbar-brand {
        flex: 0 1 auto;
        min-width: 0;
        padding-right: 10px;
        margin-right: 10px;
    }
    .main-nav .navbar-brand img {
        max-width: 100%;
        height: auto;
    }
    .main-nav .navbar-brand .logo {
        width: 165px;
    }

    /* Search is pinned with `flex: 0 0 auto` in style.css, so it never gives
       up a pixel. Allow it to shrink and trim its generous side padding. */
    .main-nav .navbar-search {
        flex: 0 1 auto;
        min-width: 0;
    }
    .main-nav .navbar-search .input-group {
        padding: 15px 6px;
        flex-wrap: nowrap;   /* Bootstrap wraps the input under the icon when narrow. */
    }
    .main-nav .navbar-search .input-group .form-control {
        min-width: 0;
        width: 130px;
    }

    /* A flex item will not shrink past its content unless min-width is reset. */
    .main-nav .navbar-collapse {
        min-width: 0;
    }
    /* Keep the links at their natural size; the space comes from the margins
       below, not from squeezing the labels. */
    .main-nav nav .navbar-nav {
        flex-shrink: 0;
    }

    /* 8 menu items x 20px of side margin is 160px spent on gaps alone. */
    .main-nav nav .navbar-nav .nav-item a {
        margin-left: 4px;
        margin-right: 4px;
    }
    .main-nav nav .navbar-nav .nav-item a.dropdown-toggle:after {
        margin-left: 5px;
    }

    .main-nav .navbar-option-item {
        margin-left: 8px;
    }
    .main-nav .membership-link {
        padding: 8px 16px !important;
    }
}

/* Tightest part of the band needs a little more than the above. */
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
    .main-nav .navbar-search .input-group .form-control {
        width: 105px;
    }
    .main-nav nav .navbar-nav .nav-item a {
        margin-left: 2px;
        margin-right: 2px;
        font-size: 13px;
    }
    .main-nav .navbar-brand .logo {
        width: 150px;
    }
}