/* search — @tokens: --search-radius, --search-height, --search-icon-size

   A self-contained search-bar WIDGET: leading icon + text input + submit button
   in one bordered pill control. Rendered by [hzo_search] (components/search/
   search.php via includes/widget-loader.php) or dropped as the static
   blocks/search.html pattern — the two produce identical markup. Standalone
   `.hzo-search` root (does not touch the `.hzo-form` system). */
.hzo-search {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-left: var(--space-md);
    background: var(--surface);
    border: var(--border-1) solid var(--border);
    border-radius: var(--search-radius, var(--radius-full));
    overflow: hidden;   /* clips the submit button to the pill end */
    transition: border-color var(--transition-base) ease, box-shadow var(--transition-base) ease;
}
/* Ring on the whole control when the input is focused (mirrors form.css). */
.hzo-search:focus-within {
    border-color: var(--color-focus);
    box-shadow: 0 0 0 2px var(--brand-pale);
}

.hzo-search__icon {
    flex: 0 0 auto;
    display: inline-flex;
    color: var(--text-muted);
}
.hzo-search__icon > svg {
    width: var(--search-icon-size, 20px);
    height: var(--search-icon-size, 20px);
    display: block;
}

.hzo-search__input {
    flex: 1 1 auto;
    min-width: 0;
    height: var(--search-height, 44px);
    border: 0;
    background: transparent;
    color: var(--text-body);
    font-family: var(--font-body);
    font-size: var(--fs-200);
    line-height: var(--lh-normal);
}
.hzo-search__input:focus { outline: none; }   /* ring lives on the container */
.hzo-search__input::placeholder { color: var(--text-muted); }

.hzo-search__submit {
    flex: 0 0 auto;
    height: var(--search-height, 44px);
    padding: 0 var(--space-lg);
    border: 0;
    background: var(--brand);
    color: var(--text-on-brand);
    font-family: var(--font-body);
    font-size: var(--fs-100);
    font-weight: var(--fw-600);
    cursor: pointer;
    transition: background var(--transition-base) ease;
}
.hzo-search__submit:hover { background: var(--brand-hover-on-light); }
.hzo-search__submit:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: -3px;   /* inset — the button sits flush at the pill edge */
}

.hzo-search[aria-disabled="true"],
.hzo-search.is-disabled {
    opacity: var(--opacity-disabled);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .hzo-search,
    .hzo-search__submit { transition: none; }
}