/*
    The header search panel, on small screens.

    The markup is a Bootstrap dropdown whose menu carries .dropdown-menu-right, so the panel's
    RIGHT edge is pinned to the magnifier icon and it grows leftwards - at least 280px, from the
    theme's min-width. Correct on a desktop, where .service-nav is absolutely positioned against
    the right edge of the navbar and there is room to the left of the icon.

    Below the sm breakpoint .service-nav is no longer positioned right, so the icon sits much
    further left and those 280px reached past the left edge of the viewport: the box was clipped
    and the placeholder read "earch".

    A FIRST ATTEMPT MADE IT WORSE, and the reason is worth keeping. Setting the dropdown itself
    to position:static did fix the horizontal overflow - the menu then resolved against the
    navbar - but Bootstrap's menu is positioned with "top: 100%", and 100% of a tall ancestor is
    a long way down. The panel opened far below the fold: visible only after scrolling, and on a
    phone effectively gone.

    So: position the panel against the VIEWPORT instead. position:fixed ignores ancestor
    positioning entirely, which is the point - no dependence on which ancestor happens to be
    positioned, and no 100%-of-something-tall to get wrong. top is the navbar's height (95px,
    @navbar-height), and the left/right insets give a panel that always fits with a margin.
*/

@media (max-width: 767px) {

    .navbar-search-form .dropdown-menu {
        position: fixed;
        top: 95px;          /* @navbar-height - the fixed-top header's height */
        left: 12px;
        right: 12px;
        width: auto;
        /* Beats the theme's min-width:280px, which is what forced the overflow. */
        min-width: 0;
        max-width: none;
        box-sizing: border-box;
        /* .navbar-fixed-top is 1030; the panel belongs above it and above page content. */
        z-index: 1050;
    }

    /* The theme puts a 20px margin on the form; inside a panel that now spans the width that
       reads as padding, and the input should use the room it has. */
    .navbar-search-form .dropdown-menu form {
        margin: 14px;
    }

    .navbar-search-form .dropdown-menu .form-group {
        margin-bottom: 0;
    }

    .navbar-search-form .dropdown-menu .form-control {
        width: 100%;
        box-sizing: border-box;
    }
}