/* ══════════════════════════════════════════════════════════════
 * Illusia Search — "Observatory Lens"
 *
 * Estilos para a página de busca (override do search.php) e para
 * o modal AJAX autocomplete (command-palette global).
 *
 * Seções 1–5: Search page (scoped com .illusia-search)
 * Seções 6–10: AJAX modal (classes .illusia-search-modal)
 * Seções 11–12: Light mode, responsive
 * Seção 13: Shortcode [illusia_search] (widget inline)
 * Seção 14: Reduced motion
 *
 * Usa bridge tokens (--bg-* / --fg-*) para dark+light mode.
 * Cores via triplets -free — reagem ao modal hue-rotate.
 *
 * @since 1.14.0
 * ══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════
 * 1. SEARCH COUNT BADGE
 *
 * Número de resultados no título — destaque amber monospace.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search__count {
  font-family: var(--ff-mono);
  color: var(--amber);
  font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════
 * 2. SEARCH FORM BAR — Observatory Input Panel
 *
 * Barra principal com input de busca, toggle de busca avançada
 * e botão submit. Glass background com borda amber no focus.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search .search-form {
  margin-bottom: var(--space-lg);
}

.illusia-search .search-form__bar {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  background: hsl(var(--bg-900-free) / .5);
  overflow: hidden;
  transition: border-color var(--t-mid) var(--ease-std);
}

.illusia-search .search-form__bar:focus-within {
  border-color: hsl(var(--amber-free) / .4);
}

.illusia-search .search-form__string {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--fg-100);
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  padding: var(--space-xs) var(--space-sm);
  outline: none;
}

.illusia-search .search-form__string::placeholder {
  color: var(--fg-600);
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  letter-spacing: .04em;
}

.illusia-search .search-form__bar-actions {
  display: flex;
  align-items: center;
  gap: 0;
  padding-right: var(--space-3xs);
}

/* Toggle + Submit buttons — reset parent padding/margin for correct hover hit area */
.illusia-search .search-form__advanced-toggle,
.illusia-search .search-form__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-400);
  cursor: pointer;
  box-sizing: border-box;
  transition:
    color var(--t-mid) var(--ease-std),
    background var(--t-mid) var(--ease-std);
}

.illusia-search .search-form__advanced-toggle:hover,
.illusia-search .search-form__submit:hover {
  color: var(--amber);
  background: hsl(var(--amber-free) / .08);
}


/* ═══════════════════════════════════════════════════════════════
 * 3. CURRENT FILTERS SUMMARY
 *
 * Strip compacta abaixo da barra mostrando filtros ativos.
 * Mono text, amber bold labels, reset button integrado.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search .search-form__current {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs) var(--space-xs);
  padding: var(--space-xs) 0;
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-400);
  letter-spacing: .02em;
}

.illusia-search .search-form__current b {
  color: var(--amber-dim);
  font-weight: 600;
}

.illusia-search .search-form__current .reset {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--fg-500);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  padding: var(--space-4xs) var(--space-2xs);
  background: hsl(var(--bg-900-free) / .3);
  cursor: pointer;
  transition:
    border-color var(--t-mid) var(--ease-std),
    color var(--t-mid) var(--ease-std);
}

.illusia-search .search-form__current .reset:hover {
  border-color: hsl(var(--amber-free) / .3);
  color: var(--amber);
}


/* ═══════════════════════════════════════════════════════════════
 * 4. ADVANCED PANEL — Observatory Instrument Panel
 *
 * Painel expandível com selects, keyword inputs e ações.
 * Substitui o estilo .infobox do Fictioneer por glass panel.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search .search-form__advanced.infobox {
  background: hsl(var(--bg-900-free) / .5);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
  box-shadow: none;
  color: var(--fg-300);
}

/* Select group — grid 4-col distribui 8 selects em 2 rows uniformes */
.illusia-search .search-form__select-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xs) var(--space-sm);
}

.illusia-search .search-form__select-wrapper {
  min-width: 0; /* prevent grid overflow from long labels */
}

.illusia-search .search-form__select-title {
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  font-weight: 400;
  color: var(--fg-500);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--space-4xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.illusia-search .search-form__select {
  width: 100%;
  background: hsl(var(--bg-800-free) / .5);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  color: var(--fg-300);
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  cursor: pointer;
  transition:
    border-color var(--t-mid) var(--ease-std),
    color var(--t-mid) var(--ease-std);
}

.illusia-search .search-form__select:focus {
  border-color: hsl(var(--amber-free) / .4);
  color: var(--fg-100);
  outline: none;
}

/* HR separators */
.illusia-search .search-form__advanced.infobox hr {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-free) / .12),
    transparent
  );
  margin: var(--space-sm) 0;
}

/* Taxonomy section headlines */
.illusia-search .search-form__option-headline {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--amber-dim);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: var(--space-xs) 0 var(--space-3xs);
}

/* Keyword input containers */
.illusia-search .keyword-input {
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  background: hsl(var(--bg-800-free) / .4);
  z-index: 0; /* stacking context: operator sits behind this background */
  padding-bottom: var(--space-4xs);
}

.illusia-search .keyword-input:focus-within {
  border-color: hsl(var(--amber-free) / .3);
}

/* Track (where tags + input live) — add internal padding */
.illusia-search .keyword-input__track {
  padding: var(--space-3xs) var(--space-xs);
}

/* Operator toggle (AND/OR) — tab sits behind the container */
.illusia-search .keyword-input__operator {
  z-index: -1;
  background: hsl(var(--bg-800-free) / .4);
  border: 1px solid var(--border-1);
  border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  letter-spacing: .06em;
  color: var(--fg-500);
}

/* Keyword input text */
.illusia-search .keyword-input__input {
  color: var(--fg-200);
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
}

/* Taxonomy tag nodes */
.illusia-search .keyword-input .node {
  background: hsl(var(--amber-free) / .1);
  border: 1px solid hsl(var(--amber-free) / .2);
  border-radius: var(--r-sm);
  color: var(--amber);
  font-family: var(--ff-ui);
  font-size: var(--text-2xs);
}

/* Suggestion hints + buttons */
.illusia-search .keyword-button {
  font-family: var(--ff-ui);
  font-size: var(--text-2xs);
  color: var(--fg-400);
  border: 1px solid var(--border-0);
  border-radius: var(--r-sm);
  padding: 0 var(--space-4xs);
  background: hsl(var(--bg-800-free) / .3);
  cursor: pointer;
  transition:
    border-color var(--t-mid) var(--ease-std),
    color var(--t-mid) var(--ease-std);
}

.illusia-search .keyword-button:hover {
  border-color: hsl(var(--amber-free) / .3);
  color: var(--amber);
}

/* Text input for author search */
.illusia-search .search-form__text-input {
  width: 100%;
  background: hsl(var(--bg-800-free) / .4);
  border: 1px solid var(--border-1);
  border-radius: var(--r-sm);
  color: var(--fg-300);
  font-family: var(--ff-ui);
  font-size: var(--text-xs);
  padding: var(--space-3xs) var(--space-xs);
}

.illusia-search .search-form__text-input:focus {
  border-color: hsl(var(--amber-free) / .4);
  outline: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 5. ADVANCED ACTIONS — Reset + Submit
 *
 * Botões no pé do painel avançado. Estilo Illusia buttons.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search .search-form__advanced-actions {
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--border-0);
}

/* Reset: o parent já emite `.button._secondary` — vocabulário canônico
 * cobre o look outline âmbar. Sem override aqui. */

/* Submit: o parent emite só `.button` (que viraria CTA âmbar sólido).
 * Em painel de filtro avançado, queremos "utility colorida", não CTA.
 * Remapeamos pro look `._secondary` mais saturado (filled glass amber)
 * sem precisar trocar markup do parent. */
.illusia-search .search-form__advanced-submit.button {
  --btn-bg:     hsl(var(--amber-free) / .15);
  --btn-fg:     var(--amber);
  --btn-border: hsl(var(--amber-free) / .3);
  --btn-bg-hover:     hsl(var(--amber-free) / .25);
  --btn-fg-hover:     var(--amber);
  --btn-border-hover: hsl(var(--amber-free) / .5);
  --btn-weight: 500;
}


/* CTA discreto nas seções no-params / no-results — mantém usuário
   no fluxo de discovery em vez de beco sem saída. */
.illusia-search__cta {
  margin-top: var(--space-sm);
}

.illusia-search__cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--amber);
  text-decoration: none;
  transition:
    color 150ms var(--ease-std),
    gap 150ms var(--ease-std);
}

.illusia-search__cta-link:hover {
  gap: var(--space-xs);
}

.illusia-search__cta-link i {
  font-size: .65em;
}

:root[data-mode=light] .illusia-search__cta-link {
  color: var(--amber-dim);
}


/* ═══════════════════════════════════════════════════════════════
 * 6. AJAX SEARCH MODAL — Backdrop + Container
 *
 * Modal command-palette que aparece ao clicar no ícone de busca
 * na navegação. Overlay escuro com glass blur.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search-modal {
  position: fixed;
  inset: 0;
  /* Acima do .mobile-menu do pai (z-index 100001) e do #wpadminbar
     (99999): a busca agora também é acionável de DENTRO do hamburger no
     mobile, então o modal precisa cobrir o menu aberto (e a barra admin).
     Tudo reaparece ao fechar. */
  z-index: 100002;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(5vh, 12vh, 15vh);
  opacity: 0;
  visibility: hidden;
  /* visibility NÃO pode transicionar na abertura: o input.focus()
     síncrono do JS falha se o modal ainda computar `hidden` (elemento
     invisível não é focável) — foco/Esc/digitação quebravam até o
     usuário clicar no campo. Abrir: troca imediata (0s no ._open);
     fechar: delay de 150ms pra segurar o fade-out do opacity. */
  transition:
    opacity 150ms var(--ease-std),
    visibility 0s linear 150ms;
}

.illusia-search-modal._open {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 150ms var(--ease-std),
    visibility 0s;
}

.illusia-search-modal__backdrop {
  position: absolute;
  inset: 0;
  background: hsl(0 0% 0% / .7);
}


/* ═══════════════════════════════════════════════════════════════
 * 7. AJAX SEARCH MODAL — Dialog
 *
 * Painel central: barra de busca, resultados, footer com hints.
 * Estilo de instrument panel do observatório.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search-modal__dialog {
  position: relative;
  width: min(92vw, 560px);
  max-height: 70vh;
  background: hsl(var(--bg-900-free) / .98);
  border: 1px solid var(--border-1);
  border-radius: var(--r-lg);
  box-shadow:
    0 0 0 1px hsl(var(--amber-free) / .05),
    0 8px 40px hsl(0 0% 0% / .5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transform: translateY(-8px);
  transition: transform 150ms var(--ease-expo);
  will-change: transform;
}

.illusia-search-modal._open .illusia-search-modal__dialog {
  transform: none;
}


/* ═══════════════════════════════════════════════════════════════
 * 8. AJAX SEARCH MODAL — Search Bar
 *
 * Input principal com ícone de lupa e tecla Esc.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search-modal__bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-0);
}

.illusia-search-modal__icon {
  color: var(--fg-500);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.illusia-search-modal__input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--fg-100);
  font-family: var(--ff-ui);
  font-size: var(--text-md);
  outline: none;
  min-width: 0;
}

.illusia-search-modal__input::placeholder {
  color: var(--fg-600);
  font-family: var(--ff-mono);
  font-size: var(--text-sm);
  letter-spacing: .04em;
}

.illusia-search-modal__kbd {
  flex-shrink: 0;
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-600);
  border: 1px solid var(--border-1);
  border-radius: var(--r-xs);
  padding: var(--space-4xs) var(--space-2xs);
  background: hsl(var(--bg-800-free) / .5);
  line-height: 1;
}

/* Botão de fechar (×) — saída universal (essencial no mobile, onde o
   dialog é fullscreen e não há backdrop tocável nem tecla Esc). */
.illusia-search-modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25em;
  height: 2.25em;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-400);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    color var(--t-mid) var(--ease-std),
    background var(--t-mid) var(--ease-std);
}

.illusia-search-modal__close:hover {
  color: var(--amber);
  background: hsl(var(--amber-free) / .08);
}


/* ═══════════════════════════════════════════════════════════════
 * 9. AJAX SEARCH MODAL — Results
 *
 * Lista de resultados AJAX. Cada item é um link com thumbnail,
 * título, status e contagem de palavras.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search-modal__results {
  list-style: none;
  margin: 0;
  padding: var(--space-3xs) 0;
  overflow-y: auto;
  flex: 1;
}

.illusia-search-modal__result {
  margin: 0;
  padding: 0;
}

.illusia-search-modal__result-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-md);
  text-decoration: none;
  color: var(--fg-300);
  transition:
    background var(--t-fast) var(--ease-std),
    color var(--t-fast) var(--ease-std);
}

.illusia-search-modal__result-link:hover,
.illusia-search-modal__result._active .illusia-search-modal__result-link {
  background: hsl(var(--amber-free) / .06);
  color: var(--fg-100);
}

/* Thumbnail */
.illusia-search-modal__result-thumb {
  width: 40px;
  height: 56px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-0);
  background: hsl(var(--bg-800-free) / .5);
}

/* No-thumb placeholder */
.illusia-search-modal__result-nothumb {
  width: 40px;
  height: 56px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  border: 1px solid var(--border-0);
  background: hsl(var(--bg-800-free) / .5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-700);
  font-size: var(--text-xs);
}

/* Info column */
.illusia-search-modal__result-info {
  flex: 1;
  min-width: 0;
}

.illusia-search-modal__result-title {
  font-family: var(--ff-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.illusia-search-modal__result-meta {
  display: flex;
  gap: var(--space-xs);
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-500);
  letter-spacing: .04em;
  margin-top: var(--space-4xs);
}

.illusia-search-modal__result-meta span {
  white-space: nowrap;
}

/* Arrow indicator for active item */
.illusia-search-modal__result._active .illusia-search-modal__result-link::after {
  content: '\2192';
  margin-left: auto;
  color: var(--amber);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

/* Loading state */
.illusia-search-modal__loading {
  text-align: center;
  padding: var(--space-md);
  color: var(--fg-500);
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  letter-spacing: .06em;
}

/* Empty state */
.illusia-search-modal__empty {
  text-align: center;
  padding: var(--space-md);
  color: var(--fg-600);
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* aria-live status do modal (anuncia "N resultados"): sr-only via
   utility global `.illusia-sr-only` (v2.5.0/S14 — bloco consolidado). */


/* ═══════════════════════════════════════════════════════════════
 * 10. AJAX SEARCH MODAL — Footer
 *
 * Hints de teclado na base do modal.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-search-modal__footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--border-0);
}

.illusia-search-modal__hint {
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-600);
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.illusia-search-modal__hint kbd {
  font-family: var(--ff-mono);
  font-size: var(--text-3xs);
  color: var(--fg-500);
  border: 1px solid var(--border-1);
  border-radius: 3px;
  padding: 1px var(--space-3xs);
  background: hsl(var(--bg-800-free) / .5);
  line-height: 1.2;
}


/* ═══════════════════════════════════════════════════════════════
 * 11. LIGHT MODE
 *
 * Acentos amber usam variantes -dim (WCAG 4.5:1).
 * Glass backgrounds ficam mais claros. Borders mais sutis.
 * ═══════════════════════════════════════════════════════════════ */

/* Search page */
:root[data-mode=light] .illusia-search__count {
  color: var(--amber-dim);
}

:root[data-mode=light] .illusia-search .search-form__bar {
  background: hsl(var(--bg-200-free) / .3);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode=light] .illusia-search .search-form__bar:focus-within {
  border-color: hsl(var(--amber-free) / .3);
}

:root[data-mode=light] .illusia-search .search-form__string::placeholder {
  color: var(--fg-500);
}

:root[data-mode=light] .illusia-search .search-form__advanced-toggle:hover,
:root[data-mode=light] .illusia-search .search-form__submit:hover {
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .06);
}

:root[data-mode=light] .illusia-search .search-form__current b {
  color: var(--amber-dim);
}

:root[data-mode=light] .illusia-search .search-form__current .reset:hover {
  color: var(--amber-dim);
}

:root[data-mode=light] .illusia-search .search-form__advanced.infobox {
  background: hsl(var(--bg-200-free) / .3);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode=light] .illusia-search .search-form__advanced.infobox hr {
  background: linear-gradient(
    90deg,
    transparent,
    hsl(var(--amber-dim-free) / .1),
    transparent
  );
}

:root[data-mode=light] .illusia-search .search-form__select {
  background: hsl(var(--bg-300-free) / .3);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode=light] .illusia-search .search-form__select:focus {
  border-color: hsl(var(--amber-free) / .3);
}

:root[data-mode=light] .illusia-search .search-form__option-headline {
  color: var(--amber-dim);
}

:root[data-mode=light] .illusia-search .keyword-input {
  border-color: hsl(var(--illusia-border-base) / .1);
  background: hsl(var(--bg-300-free) / .2);
}

:root[data-mode=light] .illusia-search .keyword-input__operator {
  background: hsl(var(--bg-300-free) / .2);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode=light] .illusia-search .keyword-input:focus-within {
  border-color: hsl(var(--amber-free) / .25);
}

:root[data-mode=light] .illusia-search .keyword-input .node {
  background: hsl(var(--amber-free) / .08);
  border-color: hsl(var(--amber-free) / .15);
  color: var(--amber-dim);
}

:root[data-mode=light] .illusia-search .keyword-button:hover {
  color: var(--amber-dim);
}

:root[data-mode=light] .illusia-search .search-form__text-input {
  background: hsl(var(--bg-300-free) / .2);
  border-color: hsl(var(--illusia-border-base) / .1);
}

:root[data-mode=light] .illusia-search .search-form__advanced-submit.button {
  --btn-bg:     hsl(var(--amber-free) / .1);
  --btn-fg:     var(--amber-dim);
  --btn-border: hsl(var(--amber-free) / .2);
  --btn-bg-hover:     hsl(var(--amber-free) / .18);
  --btn-border-hover: hsl(var(--amber-free) / .35);
}

/* AJAX modal */
:root[data-mode=light] .illusia-search-modal__backdrop {
  background: hsl(0 0% 100% / .7);
}

:root[data-mode=light] .illusia-search-modal__dialog {
  background: hsl(var(--bg-200-free) / .99);
  border-color: hsl(var(--illusia-border-base) / .1);
  box-shadow:
    0 0 0 1px hsl(var(--amber-free) / .04),
    0 8px 40px hsl(0 0% 0% / .12);
}

:root[data-mode=light] .illusia-search-modal__input::placeholder {
  color: var(--fg-500);
}

:root[data-mode=light] .illusia-search-modal__close:hover {
  color: var(--amber-dim);
  background: hsl(var(--amber-free) / .06);
}

:root[data-mode=light] .illusia-search-modal__result-link:hover,
:root[data-mode=light] .illusia-search-modal__result._active .illusia-search-modal__result-link {
  background: hsl(var(--amber-free) / .04);
}

:root[data-mode=light] .illusia-search-modal__result._active .illusia-search-modal__result-link::after {
  color: var(--amber-dim);
}


/* ═══════════════════════════════════════════════════════════════
 * 12. RESPONSIVE
 * ═══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
  .illusia-search .search-form__select-group {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xs);
  }
}

/* Mobile */
@media (max-width: 640px) {
  .illusia-search .search-form__bar {
    border-radius: var(--r-sm);
  }

  .illusia-search .search-form__string {
    font-size: 1rem; /* Prevent iOS zoom on focus */
    padding: var(--space-xs);
  }

  .illusia-search .search-form__select-group {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xs);
  }

  /* AJAX modal: full width on mobile */
  .illusia-search-modal {
    padding-top: 0;
    align-items: stretch;
  }

  .illusia-search-modal__dialog {
    width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
  }

  /* Esc não existe em teclado mobile — esconde o hint; o botão × cobre.
     Botão de fechar cresce pra alvo de toque confortável (≥44px). */
  .illusia-search-modal__kbd {
    display: none;
  }

  .illusia-search-modal__close {
    width: 2.75em;
    height: 2.75em;
    font-size: var(--text-md);
  }

  /* Hints de atalho ↑↓ e / não existem em touch — só o do Enter fica
     (a tecla Enter/Buscar existe no teclado virtual). */
  .illusia-search-modal__footer .illusia-search-modal__hint:nth-child(n+2) {
    display: none;
  }

  /* Shortcode [illusia_search]: mesmo fix de zoom iOS do
     .search-form__string acima. */
  .illusia-quick-search__input {
    font-size: 1rem; /* Prevent iOS zoom on focus */
  }
}


/* ═══════════════════════════════════════════════════════════════
 * 13. SHORTCODE [illusia_search] — Widget Inline
 *
 * Barra de busca com dropdown de resultados AJAX.
 * Mesmo endpoint do modal, layout inline para uso em páginas.
 * ═══════════════════════════════════════════════════════════════ */

.illusia-quick-search {
  position: relative;
  max-width: 480px;
  margin-inline: auto;
}

/* Barra de busca */
.illusia-quick-search__bar {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  border: none;
  border-radius: var(--r-md);
  background: hsl(var(--bg-900-free) / .5);
  padding: var(--space-xs) var(--space-sm);
  transition: box-shadow 150ms var(--ease-std);
}

.illusia-quick-search__bar:focus-within {
  box-shadow: 0 0 0 1px hsl(var(--amber-free) / .3),
              0 0 12px hsl(var(--amber-free) / .06);
}

.illusia-quick-search__icon {
  color: var(--fg-500);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

.illusia-quick-search__input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--fg-100);
  font-family: var(--ff-ui);
  font-size: var(--text-sm);
  outline: none;
  min-width: 0;
}

.illusia-quick-search__input::placeholder {
  color: var(--fg-600);
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  letter-spacing: .04em;
}

/* Dropdown de resultados */
.illusia-quick-search__results {
  position: absolute;
  top: calc(100% + var(--space-3xs));
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: var(--space-3xs) 0;
  background: hsl(var(--bg-900-free) / .98);
  border: 1px solid var(--border-1);
  border-radius: var(--r-md);
  box-shadow:
    0 0 0 1px hsl(var(--amber-free) / .05),
    0 4px 20px hsl(0 0% 0% / .4);
  max-height: 320px;
  overflow-y: auto;
}

/* Item de resultado */
.illusia-quick-search__item {
  margin: 0;
  padding: 0;
}

.illusia-quick-search__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  text-decoration: none;
  color: var(--fg-300);
  transition: background 100ms var(--ease-std);
}

.illusia-quick-search__link:hover,
.illusia-quick-search__item._active .illusia-quick-search__link {
  background: hsl(var(--amber-free) / .06);
  color: var(--fg-100);
}

/* Thumbnail */
.illusia-quick-search__thumb {
  width: 36px;
  height: 50px;
  border-radius: var(--r-sm);
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-0);
}

/* Placeholder sem thumb */
.illusia-quick-search__nothumb {
  width: 36px;
  height: 50px;
  border-radius: var(--r-sm);
  flex-shrink: 0;
  border: 1px solid var(--border-0);
  background: hsl(var(--bg-800-free) / .5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fg-700);
  font-size: var(--text-xs);
}

/* Info */
.illusia-quick-search__info {
  flex: 1;
  min-width: 0;
}

.illusia-quick-search__title {
  font-family: var(--ff-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.illusia-quick-search__meta {
  display: flex;
  gap: var(--space-xs);
  font-family: var(--ff-mono);
  font-size: var(--text-2xs);
  color: var(--fg-500);
  letter-spacing: .04em;
  margin-top: var(--space-4xs);
}

.illusia-quick-search__meta span {
  white-space: nowrap;
}

/* Indicador de seta no item ativo */
.illusia-quick-search__item._active .illusia-quick-search__link::after {
  content: '\2192';
  margin-left: auto;
  color: var(--amber);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

/* Estados: loading + vazio */
.illusia-quick-search__loading,
.illusia-quick-search__empty {
  text-align: center;
  padding: var(--space-sm);
  color: var(--fg-500);
  font-family: var(--ff-mono);
  font-size: var(--text-xs);
  letter-spacing: .06em;
}

.illusia-quick-search__empty {
  color: var(--fg-600);
  text-transform: uppercase;
}

/* aria-live status do widget: sr-only via utility global
   `.illusia-sr-only` (v2.5.0/S14 — bloco consolidado). */

/* Light mode */
:root[data-mode=light] .illusia-quick-search__bar {
  background: hsl(var(--bg-900-free) / .3);
}

:root[data-mode=light] .illusia-quick-search__bar:focus-within {
  box-shadow: 0 0 0 1px hsl(var(--amber-free) / .2),
              0 0 12px hsl(var(--amber-free) / .04);
}

:root[data-mode=light] .illusia-quick-search__input::placeholder {
  color: var(--fg-500);
}

:root[data-mode=light] .illusia-quick-search__results {
  background: hsl(var(--bg-900-free) / .99);
  border-color: hsl(var(--illusia-border-base) / .1);
  box-shadow:
    0 0 0 1px hsl(var(--amber-free) / .04),
    0 4px 20px hsl(0 0% 0% / .08);
}

:root[data-mode=light] .illusia-quick-search__link:hover,
:root[data-mode=light] .illusia-quick-search__item._active .illusia-quick-search__link {
  background: hsl(var(--amber-free) / .04);
}

:root[data-mode=light] .illusia-quick-search__item._active .illusia-quick-search__link::after {
  color: var(--amber-dim);
}


/* ═══════════════════════════════════════════════════════════════
 * 14. REDUCED MOTION
 * ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .illusia-search-modal {
    transition-duration: 0.01ms !important;
    /* Sem o fade, o delay de visibility só deixaria um overlay
       invisível bloqueando cliques por 150ms após fechar. */
    transition-delay: 0ms !important;
  }

  .illusia-search-modal__dialog {
    transition-duration: 0.01ms !important;
    transform: none !important;
  }

  .illusia-search .search-form__bar,
  .illusia-search .search-form__advanced-toggle,
  .illusia-search .search-form__submit,
  .illusia-search .search-form__select,
  .illusia-search .keyword-button,
  .illusia-search .search-form__current .reset,
  .illusia-search__cta-link,
  .illusia-search-modal__close,
  .illusia-search-modal__result-link,
  .illusia-quick-search__bar,
  .illusia-quick-search__link {
    transition-duration: 0.01ms !important;
  }
}