/**
 * search-form.css — pole wyszukiwania: lupa, pole, przycisk „Szukaj".
 *
 * KOMPONENT: znacznik daje searchform.php (szablon rdzenia WordPressa,
 * get_search_form()), a wołają go od pierwszego dnia dwa widoki — wyniki
 * wyszukiwania i 404 — których arkusze (views/) wczytują się tylko u siebie.
 * Pole nie należy do żadnego z nich.
 *
 * Wymaga tokens.css i base.css. Przepis to RAMKA POLA Z C.7 (field.css)
 * z przyciskiem rangi 1 w środku — ta sama konstrukcja co .dc-footer__form
 * / .dc-footer__submit (design-audit.md C.9: „ranga 1 wewnątrz ramki
 * pola" → r12), drugie wystąpienie po stopce.
 *
 * Makieta: padding 6/6/6/20, r18, szkło .72 + blur(30) saturate(180),
 * obwódka biała .95, cień 0 12px 36px .12 + inset; pole 16 px 500; przycisk
 * 13/26, r14, tint złota. Scalenia (reguła 15): r18 → --dc-radius-16
 * (ramka pola ma w projekcie JEDEN promień, C.7); tło szkła → --dc-surface
 * (C.7: ramka pola jest kryjąca, żeby tekst nie prześwitywał); cień →
 * --dc-shadow-xs (C.7); przycisk r14 → r12 (C.9), padding 13/26 → 12/24;
 * 16 px pola → --dc-text-xl.
 */

/* ==========================================================================
   1. RAMKA
   Fokus i błąd DOKŁADNIE jak .dc-field (C.7) — pierścień na ramce, nie na polu.
   ========================================================================== */

.dc-search-form {
  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  padding: var(--dc-space-4) var(--dc-space-4) var(--dc-space-4) var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface);
  box-shadow: var(--dc-shadow-xs);
  transition:
    border-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease);
}

.dc-search-form:focus-within {
  border-color: var(--dc-accent);
  box-shadow: 0 0 0 var(--dc-border) var(--dc-accent);
}

/* Lupa: złota kreska (reguła J — dekoracja i tekst biorą dziś ten sam
   --dc-accent-strong). flex: none, żeby nie ścisnęła się przy długiej frazie. */
.dc-search-form__icon {
  flex: none;
  display: flex;
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   2. POLE
   Wysokość z paddingu pola (14 + 14 + wiersz) — pasmo rangi 1, jak w field.css.
   ========================================================================== */

.dc-search-form__input {
  flex: 1;
  min-width: 0;
  width: 100%;
  padding-block: var(--dc-space-14);
  border: 0;
  background: none;
  color: var(--dc-text);
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-none);
  outline: none;
}

.dc-search-form__input::placeholder {
  color: var(--dc-text-subtle);
  font-weight: 400;
}

/* Krzyżyk czyszczenia WebKitu w polu type="search" — zdjęty, żeby pole
   wyglądało jednakowo w każdej przeglądarce (rysunek natywny nie ma
   koloru z tokenów). */
.dc-search-form__input::-webkit-search-cancel-button,
.dc-search-form__input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* ==========================================================================
   3. PRZYCISK — RANGA 1 W RAMCE POLA (C.1 + C.9)
   Ten sam przepis co .dc-footer__submit: tint CTA, obwódka a50, poświata,
   r12; najazd ciemniejszym tintem, nacisk scale + inset-press.
   ========================================================================== */

.dc-search-form__submit {
  flex: none;
  padding: var(--dc-space-12) var(--dc-space-24);
  border: var(--dc-border) solid var(--dc-accent-a50);
  border-radius: var(--dc-radius-12);
  background-image: var(--dc-gradient-cta);
  box-shadow: var(--dc-shadow-accent);
  color: var(--dc-on-accent);
  font-family: var(--dc-font-body);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-search-form__submit:hover {
  background-color: var(--dc-accent-a50);
}

.dc-search-form__submit:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}