/*
 * Header search bar (ribbon-bs-childcareed-v03.php).
 *
 * Desktop keeps the single row: [index ▾][query][language ▾][search].
 *
 * On phones that row cannot fit, and Bootstrap's default wrap produced three
 * cramped rows with the query input squeezed to a sliver. Below 768px the bar
 * restructures instead:
 *
 *   row 1:  [ query input                          ][search]
 *   row 2:  [ index ▾            ][ language ▾           ]
 *
 * The logo cell and the search cell of the ribbon table also stack, so the
 * bar gets the full viewport width instead of whatever is left next to the
 * logo. Flex `order` does the re-arranging; the markup order (index, query,
 * language, button) is unchanged, so the desktop layout and the no-CSS
 * fallback are untouched.
 */

/*
 * The two scope selects (index + language) read as chrome set apart from the
 * white query input — Amazon's search-scope styling: a light-gray fill
 * (#f3f3f3) with near-black text and a thin gray divider (#cdcdcd) against the
 * input. A monospace face, a notch smaller, keeps the two labels compact and
 * evenly aligned.
 */
#searchindex,
#searchlang {
    background-color: #e8e8e8;
    color: #111;
    border-color: #cdcdcd;
    font-size: 0.85rem;
    font-weight: bold;
}

@media (max-width: 767.98px) {
    /*
     * The bar is `fixed-top`, and the ribbon offsets the page for it with a
     * fixed `mt-5` (3rem) — a number that only matches a one-row bar. Stacked
     * on a phone the bar is roughly three rows tall, so the page title slid
     * underneath it. Rather than guess a taller margin that would break again
     * the moment the bar's contents change, let the bar sit in normal flow on
     * phones: it pushes the page down by exactly its own height, whatever that
     * turns out to be, and stops stealing a third of a small screen while
     * scrolling.
     */
    .navbar.cce-search-navbar.fixed-top {
        position: static;
    }

    .cce-ribbon-header {
        margin-top: 0 !important;
    }

    .navbar .ribbon-search-table,
    .navbar .ribbon-search-table tbody,
    .navbar .ribbon-search-table tr,
    .navbar .ribbon-logo-cell,
    .navbar .ribbon-search-cell {
        display: block;
        width: 100%;
    }

    .navbar .ribbon-logo-cell {
        text-align: center;
        padding-bottom: 0.25rem;
    }

    .search-bar-group {
        flex-wrap: wrap;
        row-gap: 0.25rem;
    }

    /* Row 1: the query input owns the row, the submit button rides along. */
    .search-bar-group #search {
        order: 1;
        flex: 1 1 calc(100% - 60px);
        min-width: 0;
        border-top-left-radius: 0.25rem;
        border-bottom-left-radius: 0.25rem;
    }

    .search-bar-group .search-bar-submit {
        order: 2;
        flex: 0 0 auto;
        border-top-right-radius: 0.25rem;
        border-bottom-right-radius: 0.25rem;
    }

    /* Row 2: the two selects split the width between them. */
    .search-bar-group #searchindex {
        order: 3;
        flex: 1 1 52%;
        width: auto;
        max-width: none !important;
        border-radius: 0.25rem 0 0 0.25rem;
    }

    .search-bar-group #searchlang {
        order: 4;
        flex: 1 1 44%;
        width: auto;
        max-width: none !important;
        border-radius: 0 0.25rem 0.25rem 0;
    }
}