/* The home hero's search field — one drawing, whatever design is around it.
 *
 * Five of the eleven designs draw a search field. Until now the classic one was painted in
 * hero-classic.css and the other four in hero-frontend.css, and the two had already drifted: 450x60
 * against 400x50, a 48px button against a 34px one, three hover gestures on one side and none on
 * the other. They are the same field, so they are drawn here once.
 *
 * The field wears two class families. The `cilHero__*` names stay where each design places the
 * field in its own composition; the `cil-search` names below are what the field itself is. Classic
 * keeps its legacy markup — the theme's catalogue form, which its own analytics reads by id — and
 * gains the same names.
 *
 * Every rule is written for both `.cil-search` and `#homepageSearch .cil-search`. Not duplication:
 * the legacy stylesheet paints `#homepageSearchSubmit` and `.homepageHero .searchBar` directly, and
 * an id outweighs a class no matter how the class is written. One declaration block, two ways in.
 *
 * The colour is the page's own: the screen writes --cil-search-bg and --cil-search-ink onto the
 * field, and the ink is computed from the colour rather than chosen, so a yellow or white button
 * carries a black magnifier without anyone having to remember that it must.
 */

.cil-search,
#homepageSearch .cil-search {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 450px;
    height: 60px;
    /* Logical, so it flips with the language: 28 at the reading start where the text begins, and 4
       at the end — tighter than the 6 the disc leaves above and below it, so the button reads as
       tucked into the pill's rounded end. Below this the two arcs pinch at the cap's corners. */
    padding-inline: 28px 4px;
    padding-block: 0;
    border: 1.5px solid var(--cil-black);
    /* Half the height, so the ends stay true half-circles rather than rounded corners. */
    border-radius: 30px;
    background: var(--cil-white);
}
.cil-search:focus-within,
#homepageSearch .cil-search:focus-within { box-shadow: 0 0 0 3px var(--cil-blue-light-5); }

/* The legacy form is a flex row of its own inside the bar; the module's markup is the row. */
#homepageSearch .cil-search form {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    height: 100%;
    margin: 0;
}
/* The legacy fieldsets carry the browser's own margin and border, which push the row off centre
   once the bar stops being taller than its contents. */
#homepageSearch .cil-search fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
/* The theme's own form wraps the button in a plain div and a fieldset, and a block box does not
   centre anything: the button sat at the top of a 54-tall wrapper inside a 60-tall field, three
   pixels above the middle of the pill it is supposed to sit in. The wrappers take the field's
   height and pass the centring through. */
#homepageSearch .cil-search form > div:has(.cil-search__button),
#homepageSearch .cil-search form > div:has(.cil-search__button) > fieldset {
    display: flex;
    align-items: center;
    height: 100%;
}
#homepageSearch .cil-search .searchField { flex: 1; min-width: 0; }

.cil-search__input,
#homepageSearch .cil-search__input {
    flex: 1;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--cil-black);
    font-family: 'Assistant-Regular', 'Assistant', Arial, sans-serif;
    font-size: 18px;
    line-height: 22px;
    text-align: start;
    outline: none;
}
.cil-search__input::placeholder,
#homepageSearch .cil-search__input::placeholder {
    color: var(--cil-black-regular-3);
    opacity: 1;
}

/* ---- the button ---------------------------------------------------------------------------
   The background is pinned on every interactive state: the theme's own `button:hover` paints
   #77AD37 over anything it can reach, and it is reached here through an id. */
.cil-search__button,
#homepageSearch .cil-search__button {
    position: relative;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    /* Painted by the screen. Red is what the design shipped with, and what a page that has never
       been asked the question still gets. */
    background: var(--cil-search-bg, var(--cil-red));
    color: var(--cil-search-ink, var(--cil-white));
    cursor: pointer;
    /* The legacy rule hangs a magnifier on this as a background image; the icon is an element here
       so a gesture can move it. */
    background-image: none;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}
.cil-search__button svg,
#homepageSearch .cil-search__button svg {
    display: block;
    width: 48px;
    height: 48px;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Deepening under a pointer is not a gesture — it is the button saying it has been reached — so
   every variant does it, including the one that has no animation. Done with a filter rather than a
   second colour, because the colour is the editor's now and there is no darker token for each. */
.cil-search__button:hover,
.cil-search__button:focus-visible,
#homepageSearch .cil-search__button:hover,
#homepageSearch .cil-search__button:focus-visible {
    background: var(--cil-search-bg, var(--cil-red));
    filter: brightness(0.92);
}
.cil-search__button:active,
#homepageSearch .cil-search__button:active { transform: scale(0.97); }

/* ---- the ring -------------------------------------------------------------------------------
   The button swells and settles on the house easing, the magnifier tips as if being aimed, and a
   ring travels out from the edge and fades. The ring repeats while the pointer rests there, so the
   invitation does not end after one beat. */
.cil-search--ring .cil-search__button:hover,
.cil-search--ring .cil-search__button:focus-visible,
#homepageSearch .cil-search--ring .cil-search__button:hover,
#homepageSearch .cil-search--ring .cil-search__button:focus-visible { transform: scale(1.08); }

.cil-search--ring .cil-search__button:hover svg,
.cil-search--ring .cil-search__button:focus-visible svg,
#homepageSearch .cil-search--ring .cil-search__button:hover svg,
#homepageSearch .cil-search--ring .cil-search__button:focus-visible svg {
    transform: rotate(-10deg) scale(1.06);
}

.cil-search--ring .cil-search__button::after,
#homepageSearch .cil-search--ring .cil-search__button::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--cil-search-bg, var(--cil-red));
    opacity: 0;
    pointer-events: none;
}
.cil-search--ring .cil-search__button:hover::after,
.cil-search--ring .cil-search__button:focus-visible::after,
#homepageSearch .cil-search--ring .cil-search__button:hover::after,
#homepageSearch .cil-search--ring .cil-search__button:focus-visible::after {
    animation: cil-search-ping 1.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes cil-search-ping {
    0%   { transform: scale(1);    opacity: 0.55; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* ---- the pill -------------------------------------------------------------------------------
   The circle opens and the word arrives beside the magnifier, which holds still. It only opens over
   an empty field: once someone has typed, the pill would grow across the tail of their own query.

   The word is folded into a grid track of no width and opened to exactly its own — 0fr to 1fr ends
   at the word's width in whatever language it is in, so no cap has to be guessed at and the easing
   lands rather than stopping short. */
.cil-search--pill .cil-search__button,
#homepageSearch .cil-search--pill .cil-search__button {
    width: auto;
    min-width: 48px;
    gap: 0;
    border-radius: 999px;
    overflow: hidden;
    transition: gap 0.48s cubic-bezier(0.4, 0, 0.2, 1),
                padding-inline-start 0.48s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.12s ease,
                filter 0.35s ease;
}
.cil-search__word,
#homepageSearch .cil-search__word {
    display: grid;
    grid-template-columns: 0fr;
    transition: grid-template-columns 0.48s cubic-bezier(0.4, 0, 0.2, 1);
}
.cil-search__word > span,
#homepageSearch .cil-search__word > span {
    overflow: hidden;
    opacity: 0;
    white-space: nowrap;
    font-family: Assistant, Arial, sans-serif;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    /* Felt rather than watched: the word lifts the last few pixels into place and its letters draw
       together as it lands, both held back so it arrives into a room already made. */
    transform: translateY(4px);
    letter-spacing: 0.05em;
    transition: opacity 0.26s ease 0.16s,
                transform 0.34s cubic-bezier(0.4, 0, 0.2, 1) 0.14s,
                letter-spacing 0.34s cubic-bezier(0.4, 0, 0.2, 1) 0.14s;
}
.cil-search--pill:has(input:placeholder-shown) .cil-search__button:hover,
.cil-search--pill:has(input:placeholder-shown) .cil-search__button:focus-visible,
#homepageSearch .cil-search--pill:has(input:placeholder-shown) .cil-search__button:hover,
#homepageSearch .cil-search--pill:has(input:placeholder-shown) .cil-search__button:focus-visible {
    padding-inline-start: 18px;
    gap: 10px;
}
.cil-search--pill:has(input:placeholder-shown) .cil-search__button:hover .cil-search__word,
.cil-search--pill:has(input:placeholder-shown) .cil-search__button:focus-visible .cil-search__word,
#homepageSearch .cil-search--pill:has(input:placeholder-shown) .cil-search__button:hover .cil-search__word,
#homepageSearch .cil-search--pill:has(input:placeholder-shown) .cil-search__button:focus-visible .cil-search__word {
    grid-template-columns: 1fr;
}
.cil-search--pill:has(input:placeholder-shown) .cil-search__button:hover .cil-search__word > span,
.cil-search--pill:has(input:placeholder-shown) .cil-search__button:focus-visible .cil-search__word > span,
#homepageSearch .cil-search--pill:has(input:placeholder-shown) .cil-search__button:hover .cil-search__word > span,
#homepageSearch .cil-search--pill:has(input:placeholder-shown) .cil-search__button:focus-visible .cil-search__word > span {
    opacity: 1;
    transform: translateY(0);
    letter-spacing: 0;
}

/* ---- no gesture -----------------------------------------------------------------------------
   Nothing moves. The word is not drawn at all, so the button keeps the circle it starts as. */
.cil-search--none .cil-search__word,
#homepageSearch .cil-search--none .cil-search__word { display: none; }

/* ---- someone who would rather not be moved ---------------------------------------------------
   The invitation survives without the travel: the button still answers a pointer, and the colour
   still deepens, but nothing repeats, nothing swells and nothing opens. */
@media (prefers-reduced-motion: reduce) {
    .cil-search__button,
    .cil-search__button svg,
    .cil-search__word,
    .cil-search__word > span,
    #homepageSearch .cil-search__button,
    #homepageSearch .cil-search__button svg { transition: none; }

    .cil-search--ring .cil-search__button:hover,
    .cil-search--ring .cil-search__button:focus-visible,
    #homepageSearch .cil-search--ring .cil-search__button:hover,
    #homepageSearch .cil-search--ring .cil-search__button:focus-visible { transform: none; }

    .cil-search--ring .cil-search__button:hover svg,
    .cil-search--ring .cil-search__button:focus-visible svg,
    #homepageSearch .cil-search--ring .cil-search__button:hover svg,
    #homepageSearch .cil-search--ring .cil-search__button:focus-visible svg { transform: none; }

    .cil-search--ring .cil-search__button:hover::after,
    .cil-search--ring .cil-search__button:focus-visible::after,
    #homepageSearch .cil-search--ring .cil-search__button:hover::after,
    #homepageSearch .cil-search--ring .cil-search__button:focus-visible::after { animation: none; }
}

/* ---- narrow ---------------------------------------------------------------------------------
   The field keeps its shape and gives up width; the button keeps its size, since a target does not
   get easier to hit by shrinking. */
@media (max-width: 767px) {
    .cil-search,
    #homepageSearch .cil-search {
        max-width: 100%;
        height: 54px;
        padding-inline: 20px 4px;
        gap: 10px;
        border-radius: 27px;
    }
    .cil-search__input,
    #homepageSearch .cil-search__input { font-size: 16px; }

    .cil-search__button,
    #homepageSearch .cil-search__button { width: 46px; height: 46px; }
    .cil-search__button svg,
    #homepageSearch .cil-search__button svg { width: 46px; height: 46px; }
}