/* Search UI that sits outside the webpack bundle -- the search box label, the AI hint,
 * and the result count on the search page (runbook F3).
 *
 * WHY THIS IS NOT IN THE SCSS. The site's stylesheet is a webpack bundle
 * (/bundles/papaa-<hash>.css) built by webpack 3 + node-sass 4 against node 14, and
 * rebuilding it renames the bundle and rewrites the generated Views/BaseLayout.cshtml.
 * These rules are not worth that, so they ship as a plain stylesheet the way
 * Css/website/ai-search.css already does. Css/website/scss/layout/_header.scss carries a
 * comment pointing here; if the bundle is ever rebuilt, these can move back into it.
 *
 * Loaded from Views/Master.cshtml, because the header is on every page.
 *
 * WATCH THE CASCADE. Master.cshtml puts this file BEFORE the bundle in the document, so a
 * rule of equal specificity here LOSES. Every rule below is deliberately heavier than the
 * bundle's counterpart -- `.search-block .form-elements label` against the bundle's
 * `.search-block label`, and so on. Match one exactly and it will silently do nothing.
 */

/* THE ROW: label, field and button in one flex container.
 *
 * The bundle builds this row out of a 50px/90px label, an input at calc(100% - 100px) and
 * a floated button. Every one of those numbers was measured against "Search term:", and
 * the longer wording breaks all three: the label overflows its slot, the calc() strands
 * the field, and the float pins the button's TOP to the row rather than to the field --
 * which comes apart the moment the label wraps above the field on a narrow screen.
 *
 * Flex replaces the lot. The label takes the width of its own text, the field takes what
 * is left, align-items: flex-end keeps the button's bottom edge on the field's wherever
 * the label ends up, and flex-wrap means a screen too narrow for the row stacks it rather
 * than crushing the field.
 *
 * The button is a CHILD of .form-elements in both views for this to work (see the note in
 * Master.cshtml). Making the form itself the row would have cost .holder the shrink-to-fit
 * width that its centring on the search page depends on. */
.search-block .form-elements {
    display: flex;
    /* Centres, not bottoms. The button is 33px against the field's 29px, so aligning their
       bottom edges leaves the button reading 2px high. Bottom alignment only ever mattered
       as insurance for the label wrapping above the field, and `flex-wrap: nowrap` below
       rules that out at every width where the two sit side by side. */
    align-items: center;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px;
}

.search-block .form-elements label {
    float: none;
    width: auto;
    margin: 0;
    white-space: nowrap;
    /* Sits on the field's baseline row rather than the bottom of the flex line, so it does
       not drop when the button (33px) makes the line taller than the field (29px). */
    align-self: center;
}

/* The span holding the second half of the label is hidden below 750px by the bundle, so a
 * narrow screen read just "Search". There is room for all of it at every width now, so the
 * box no longer says something different on a phone. */
.search-block .form-elements label span {
    display: inline;
}

/* flex-basis, not width: it is the width the field ASKS for, and what the whole row sizes
 * itself around -- there is no fixed container width anywhere in this file, so changing
 * the number below is the only thing needed to give the field more or less room. */
.search-block .form-elements .input {
    float: none;
    width: auto;
    flex: 1 1 190px;
    min-width: 0;
    margin: 0;
}

.search-block .form-elements .btn-submit {
    float: none;
    flex: 0 0 auto;
    margin-left: 0;
}

/* --- 750px and up: one row, button bottom-aligned with the field ---------------------- */
@media (min-width: 750px) {
    /* The bundle pins this box to 331px and floats it -- a width chosen when it held only
       the label and field, and which now forces the button onto a third line. Releasing it
       lets the row size to its contents, which is what the flex-basis below controls.
       NOTE THE EXTRA .holder: without it this rule ties with the bundle's and loses on
       source order, and the symptom is a row that silently stays 331px wide. */
    .search-block .holder .form-elements {
        /* An explicit width rather than `auto`: the search page nests this in an
           inline-block .holder, whose shrink-to-fit width settles narrower than the row's
           natural width. 630 is what fits at 750 once the container and .holder padding
           are taken off; the field gets whatever is left after the label and button.

           MIND THE BUTTON'S REAL WIDTH. `width: 205px` on it is CONTENT-box -- the site
           does not set border-box globally -- so it occupies 241px once its 34px padding
           and border are counted. Sizing this row against 205 is what wrapped the button
           onto its own line twice while getting this right. */
        width: 630px;
        float: none;

        /* And the belt to that braces: above 750 the row is one line by decree, so an
           arithmetic slip shrinks the field instead of dropping the button below it. */
        flex-wrap: nowrap;

        /* The bundle's 12px, plus the hint's own margin, left the hint floating well clear
           of the box it describes. Dropped here so the two read as one control; the phone
           layout keeps it, where the hint follows the button rather than the field. */
        padding-bottom: 0;
    }

    /* Close enough to the field to be read as part of it. */
    .search-block .search-hint {
        margin-top: 5px;
    }

    /* ...and the same space beneath the hint as there is above the label, so the box is
       evenly padded rather than tight at the bottom.
       ON THE FORM, NOT ON THE HINT. The space belongs to the box: as a margin on the <p>
       it would leave with the hint the day anyone removes it, and it would collapse or
       not depending on what follows. The form already owns the padding at the top, and
       this is the other half of the same pair.
       Two numbers because the two forms start from different padding -- 19px/8px on the
       search page against 12px/0 in the header dropdown -- and both are measured against
       the 26px above the label, not guessed. */
    /* `form.holder`, not `.holder`. The bundle sets this one's padding with a selector of
       exactly the same weight (`.search-results-block .search-block .holder`, from
       _search.scss) and loads after this file -- so the plain class form of this rule ties
       and loses. The element selector breaks the tie. The header's equivalent needs no such
       help: the bundle styles that one with only `.search-block .holder`. */
    .search-results-block .search-block form.holder {
        padding-bottom: 26px;
    }

    .info-nav .search-block .holder {
        padding-bottom: 27px;
    }

    /* 19 + the flex column-gap of 8 reproduces the 27px the bundle put between the field
       and the button when the button was floated. */
    .search-block .form-elements .btn-submit {
        margin-left: 19px;
    }

    .search-block .form-elements .input {
        /* Row = 154 label + 8 + 230 + 27 + 205 button = 624, inside the ~640 available at
           750px once the container and .holder padding are taken off. */
        flex-basis: 230px;
    }
}

/* Desktop has room to spare, and the field is where the room should go: this is a box for
 * typing a phrase into, not a keyword. Row = 154 + 8 + 340 + 27 + 205 = 734, well inside
 * the 890 available at 992. */
@media (min-width: 992px) {
    .search-block .holder .form-elements {
        /* 154 + 8 + 340 field + 19 + 241 button = 762, inside the ~890 available at 992. */
        width: 770px;
    }

    /* The header dropdown's own top padding drops from 22px to 12px at this width, so its
       bottom follows it down. The search page's is unchanged from 750 up. */
    .info-nav .search-block .holder {
        padding-bottom: 21px;
    }

    .search-block .form-elements .input {
        flex-basis: 340px;
    }
}

/* --- below 750px: field full width, button under it on the left -----------------------
 *
 * A phone has no room for label, field and button on one row, and the bundle's answer was
 * to float the button RIGHT, leaving it marooned across the screen from the field it
 * belongs to. A 100% basis puts the field on its own line at full width and pushes the
 * button to the next one, where flex-start lands it hard left under the field: the two
 * read as one control from the same edge. */
@media (max-width: 749px) {
    .search-block .form-elements .input {
        flex: 1 1 100%;
    }

    /* Its own margin rather than a bigger row-gap: the gap would open up between the label
       and the field as well, and that pair should stay tight -- they are one control. This
       separates the button from the field it acts on. */
    .search-block .form-elements .btn-submit {
        margin-top: 8px;
    }

    /* The bundle's 12px under the row, on top of the hint's own margin, left the hint
       further from the button than the button was from the field -- so the hint read as
       belonging to whatever came next rather than to this box. */
    .search-block .holder .form-elements {
        padding-bottom: 0;
    }

    .search-block .search-hint {
        margin-top: 5px;
    }
}

/* Sits under the whole row: the hint is a sibling of .form-elements, so it needs no flex
 * treatment -- but it does need to clear the float the bundle still puts on .form-elements
 * from 750px up. */
.search-block .search-hint {
    clear: both;
    font-size: 13px;
    line-height: 18px;
    color: #4a4a4a;
    text-align: left;
    margin-bottom: 0;
}

/* The count moved out of .search-block to sit directly above the keyword results, which
 * is what it counts. It was inheriting its centring from .search-block's text-align and
 * its spacing from that block's bottom margin, so both have to be restated here or the
 * yellow bar goes left-aligned and butts straight up against the first result. */
.search-results-block .result-count {
    text-align: center;
    margin: 0 0 16px;
}