/* Search overlay (js/elbuz_search.js): the header search form moves into dialog.et-search-overlay — on "/" / Ctrl+K,
   and on focus / icon click with html[data-search="overlay"] (preset style.search) or on phones.
   Panel under the field (the default "dropdown") — base rules "=== search ===" in elbuz_theme.css. Loaded on every page. Tokens only. */
dialog.et-search-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none; /* the old div overlay rule in elbuz_theme.css blurs the box itself; ::backdrop does it now */
  color: var(--et-text);
  overflow: hidden;
}
dialog.et-search-overlay::backdrop {
  background: var(--et-overlay-bg);
  -webkit-backdrop-filter: var(--et-blur);
  backdrop-filter: var(--et-blur);
}
.et-search-overlay__bar {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  max-width: 960px;
  max-height: calc(100% - 8vh);
  margin: 8vh auto 0;
  padding: var(--et-card-pad);
  background: var(--et-surface);
  border-radius: var(--et-overlay-radius, var(--et-radius));
  box-shadow: var(--et-overlay-shadow, var(--et-shadow-xl));
  overflow: auto;
  overscroll-behavior: contain;
}
.et-search-overlay__slot { flex: 1; min-width: 0; }
.et-search-overlay__close {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--et-radius-full);
  background: var(--et-surface-2, var(--et-bg));
  color: var(--et-text);
  font-size: var(--et-text-lg);
  cursor: pointer;
}

/* The form inside: a large field, results below it in the flow (not a floating panel) */
.et-search-overlay .et-search { max-width: none; margin: 0; }
.et-search-overlay .et-search__input { font-size: var(--et-text-lg); }
.et-search-overlay .et-search__list {
  position: static;
  max-height: none;
  margin-top: var(--space-sm);
  padding: 0;
  border: 0;
  box-shadow: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-xs);
}
.et-search-overlay .et-search__list[hidden] { display: none; }
.et-search-overlay :is(.et-search__group, .et-search__option--all, .et-search__empty) { grid-column: 1 / -1; }
.et-search-overlay .et-search__option { border: var(--et-border-width) solid var(--et-border); border-radius: var(--et-radius-sm); }
.et-search-overlay .et-search__option--category { border-style: dashed; }
.et-search-overlay .et-search__option--all { border: 0; }
.et-search-overlay .et-search__thumb { width: 4rem; height: 4rem; border-radius: var(--et-media-radius, var(--et-radius-xs)); background: var(--et-media-box, transparent); }
.et-search-overlay .et-search__name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

@media (max-width: 767.98px) {
  .et-search-overlay__bar { max-height: 100%; height: 100%; margin: 0; border-radius: 0; }
  .et-search-overlay .et-search__list { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  dialog.et-search-overlay[open] .et-search-overlay__bar { animation: et-search-in var(--et-transition-slow, 0.3s) ease-out; }
}
@keyframes et-search-in { from { opacity: 0; transform: translateY(-0.75rem); } }