/*
 * sd-search — site search field (Session 2.3; Blueprint 5.34)
 * <form role="search"> with a visible or visually hidden label, input type="search", submit button with text or name.
 * States: default, hover, focus-visible (ring around the whole field), disabled.
 */

.sd-search {
  display: flex;
  align-items: stretch;
  max-width: 36rem;
  border: var(--sd-border-width) solid var(--sd-color-border-control);
  border-radius: var(--sd-radius-md);
  background: var(--sd-color-surface);
  transition: border-color var(--sd-transition-feedback);
}

.sd-search:hover,
.sd-search[data-state="hover"] { border-color: var(--sd-color-text-default); }

.sd-search:focus-within,
.sd-search[data-state="focus"] {
  border-color: var(--sd-color-border-strong);
  outline: var(--sd-focus-ring-width) solid var(--sd-focus-ring-color);
  outline-offset: var(--sd-focus-ring-offset);
}

.sd-search__icon {
  align-self: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--sd-space-3);
  flex: none;
  color: var(--sd-color-text-muted);
}

.sd-search__input {
  flex: 1;
  width: 100%;       /* percentage width: the input no longer forces its intrinsic width on narrow screens */
  min-width: 0;
  min-height: 3rem;
  padding: 0 var(--sd-space-3);
  border: 0;
  background: transparent;
  font-size: 1rem;
  color: var(--sd-color-text-default);
}

.sd-search__input::placeholder { color: var(--sd-color-text-muted); opacity: 1; }

/* The field ring replaces the input's own ring */
.sd-search__input:focus-visible { outline: none; }

.sd-search__input::-webkit-search-cancel-button { cursor: pointer; }

.sd-search__submit {
  margin: 0.25rem;
  min-height: var(--sd-target-min);
}

/* ---------- Large field (search results page) — Session 3.2 ---------- */

.sd-search--lg { max-width: 44rem; }
.sd-search--lg .sd-search__input { min-height: 3.5rem; font-size: var(--sd-font-size-body-lg); }
.sd-search--lg .sd-search__icon { width: 1.5rem; height: 1.5rem; }

/* ---------- Header search entry — Session 3.2 (Blueprint 5.34) ----------
 * ≥ 1280px: a search icon in the header actions opens a panel below the bar (disclosure; one layer at a time
 * with the Mega Menu; Esc, outside click, or the same button closes it; focus moves into the field).
 * Without JS the icon is a link to the search page (/?s=), which has its own field.
 * < 1280px: the field sits at the top of the drawer (sd-nav__search); no extra button in the bar.
 */

.sd-header__search-toggle { display: none; }

@media (min-width: 1280px) {
  .sd-header__search-toggle { display: inline-flex; }
}

.sd-header-search {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding-block: var(--sd-space-5);
  border-top: var(--sd-border-width) solid var(--sd-color-border-subtle);
  border-bottom: var(--sd-border-width) solid var(--sd-color-border-subtle);
  background: var(--sd-color-surface);
  box-shadow: var(--sd-shadow-overlay);
}

.sd-header-search:not([hidden]) { animation: sd-header-search-in var(--sd-duration-base) var(--sd-ease-out); }

@keyframes sd-header-search-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

.sd-header-search__inner {
  display: grid;
  gap: var(--sd-space-2);
  justify-items: center;
}

.sd-header-search .sd-search { width: 100%; }

.sd-header-search__hint { color: var(--sd-color-text-muted); font-size: var(--sd-font-size-small); }

@media (max-width: 1279.98px) {
  .sd-header-search { display: none; }
}

/* Drawer field (< 1280px) */
.sd-nav__search { display: none; }

@media (max-width: 1279.98px) {
  .sd-nav__search {
    display: flex;
    max-width: 40rem;
    margin: var(--sd-space-2) 0 var(--sd-space-3);
  }
}