/*
 * Layout for the embedded search widget, shared by every brand.
 *
 * <pyfoi-search> is a custom element. Until embed.js loads and upgrades it, the
 * browser treats it as an unknown inline element with no size — so without this
 * the hero silently renders an empty gap where the search box should be.
 *
 * Loaded BEFORE the brand stylesheet so a brand can override any of it.
 */

pyfoi-search {
    display: block;
    width: 100%;
}

/*
 * :defined matches only once the element has been registered. So this styles the
 * pre-upgrade state ONLY, reserving the right space and reading as an input box,
 * which keeps the hero composed and stops the layout jumping when embed.js
 * arrives. It is also what you see locally when embed.js is not being served —
 * see EMBED_ORIGIN in the README.
 */
pyfoi-search:not(:defined) {
    min-height: 52px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}