/* GG Lookup Focus — every rule here is gated on `.is-focused`, which the JS
 * adds to the lookup row on the visitor's first search. Before that this
 * stylesheet changes nothing at all, so the landing layout (form on the left,
 * slab photo on the right) is byte-for-byte what it was. */

/* The photo column leaves the flow.
 *
 * This `!important` is REQUIRED, and it is the only one in this file that is.
 * The fight is over `display`, not width: js_composer ships
 * `.vc_row.vc_row-flex > .vc_column_container { display: flex }` — three
 * classes, exactly the specificity of the selector below — and
 * `js_composer_front-css` prints AFTER this stylesheet (measured on the live
 * page: this sheet at cascade position 8, js_composer at 21), so it wins the
 * tie on source order. Removing the `!important` was tried on the live page:
 * the column stays `display: flex` at its full 402px. Not a defensive habit.
 *
 * Do not "fix" the ordering by adding `js_composer_front` to this stylesheet's
 * dependency array — WP_Dependencies silently drops an item whose dependency
 * is not registered, so this file would stop loading altogether if js_composer
 * were ever deactivated. */
.gg-lf-row.is-focused > .gg-lf-aside {
    display: none !important;
}

/* …and the lookup column takes the whole row. Deliberately no `!important`:
 * this selector is three classes and the rules it has to beat
 * (`.vc_col-sm-8`, `.vc_column_container`) are one, so specificity already
 * settles it — confirmed by dropping the `!important` on the live page and
 * re-measuring. `flex-basis` matters as well as width because the row is
 * `vc_row-flex`. */
.gg-lf-row.is-focused > .gg-lf-main {
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* The certificate moves to the middle of the page — and nothing else does.
 *
 * The heading, the search field and the hint keep the alignment they have on
 * the landing page, which is also the alignment of the instruction paragraphs
 * above them. Those paragraphs sit in an OUTER WPBakery column this plugin
 * never touches, and two of the three carry an inline `text-align: left` that
 * only an `!important` could override — so centring the whole stack instead
 * would leave that copy hard-left above a centred form, a visibly half-left,
 * half-centred page.
 *
 * The theme caps `div#card_output` at 45rem, so these auto margins are what
 * actually centre the block once the column is full-width. */
.gg-lf-row.is-focused #card_output {
    margin-left: auto;
    margin-right: auto;
}

/* A miss renders a one-line notice in a bare `<div>` instead of a table.
 * Centre that line inside the centred block. The `:not()` keeps this off
 * gg-card-photos' block, which lays its own figures out and needs no help. */
.gg-lf-row.is-focused #card_output > div:not(.gg-card-photos) {
    text-align: center;
}