/* assets/css/components/search-modal.css
 * @layer components — .search-modal floating AJAX search panel
 * ════════════════════════════════════════════════════════════════════
 *
 * Triggered by header search button.
 * JS (IIFE 16 in navigation.js) manages open/close/results.
 * Token sources: §1-§19 tokens.css — no hardcoded values.
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ════════════════════════════════════════════════════════════════════
     BACKDROP OVERLAY
     ════════════════════════════════════════════════════════════════════ */

  .search-modal-backdrop {
    position: fixed;
    inset: 0;
    background-color: var(--overlay-medium);
    z-index: calc(var(--z-header) + 1);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-normal) var(--ease-default);
  }

  .search-modal-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }


  /* ════════════════════════════════════════════════════════════════════
     MODAL PANEL
     ════════════════════════════════════════════════════════════════════ */

  .search-modal {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: calc(var(--z-header) + 2);
    background-color: var(--white);
    box-shadow: var(--shadow-xl);
    transform: translateY(-100%);
    transition:
      transform var(--duration-normal) var(--ease-default),
      visibility 0s var(--duration-normal);
    visibility: hidden;
    max-block-size: 85dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .search-modal:not([hidden]) {
    transform: translateY(0);
    visibility: visible;
    transition:
      transform var(--duration-normal) var(--ease-default),
      visibility 0s 0s;
  }

  .search-modal__inner {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-block: var(--space-m);
    padding-inline: var(--gutter);
    max-inline-size: var(--content-width);
    margin-inline: auto;
  }


  /* ════════════════════════════════════════════════════════════════════
     INPUT ROW
     ════════════════════════════════════════════════════════════════════ */

  .search-modal__field {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    padding-block-end: var(--space-m);
    border-block-end: 1px solid var(--border-subtle);
  }

  .search-modal__input-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
  }

  .search-modal__search-icon {
    position: absolute;
    inset-inline-start: var(--space-s);
    color: var(--text-muted);
    pointer-events: none;
    flex-shrink: 0;
  }

  .search-modal__input {
    inline-size: 100%;
    padding-block: var(--space-xs);
    padding-inline-start: calc(var(--space-s) + 20px + var(--space-xs));
    padding-inline-end: var(--space-m);
    font-family: var(--font-body);
    font-size: var(--text-l);
    font-weight: var(--weight-medium);
    color: var(--text-main);
    background: var(--surface-tinted);
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-m);
    outline: none;
    transition:
      border-color var(--duration-fast) var(--ease-default),
      background-color var(--duration-fast) var(--ease-default);
    appearance: none;
    -webkit-appearance: none;
  }

  .search-modal__input::placeholder {
    color: var(--text-muted);
    font-weight: var(--weight-regular);
  }

  .search-modal__input:focus {
    border-color: var(--primary);
    background-color: var(--white);
    box-shadow: 0 0 0 3px var(--primary-ultra-light);
  }

  /* Hide browser's native clear button */
  .search-modal__input::-webkit-search-cancel-button { display: none; }

  /* Spinner — shown during fetch via JS */
  .search-modal__spinner {
    position: absolute;
    inset-inline-end: var(--space-s);
    inline-size: 1.125rem;
    block-size: 1.125rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-default);
    border-block-start-color: var(--primary);
    animation: search-spin var(--duration-slow) linear infinite;
  }

  @keyframes search-spin {
    to { transform: rotate(360deg); }
  }

  .search-modal__close {
    flex-shrink: 0;
    padding: var(--space-xs);
    color: var(--text-muted);
    min-inline-size: unset;
  }

  .search-modal__close:hover {
    color: var(--text-main);
  }


  /* ════════════════════════════════════════════════════════════════════
     FILTER CHIPS
     ════════════════════════════════════════════════════════════════════ */

  .search-modal__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding-block: var(--space-s);
    border-block-end: 1px solid var(--border-subtle);
  }

  .search-modal__filter-chip {
    display: inline-flex;
    align-items: center;
    padding-block: var(--space-2xs);
    padding-inline: var(--space-s);
    border-radius: var(--radius-full);
    border: 1px solid var(--border-default);
    background-color: var(--white);
    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--text-body);
    cursor: pointer;
    transition:
      background-color var(--duration-fast) var(--ease-default),
      border-color     var(--duration-fast) var(--ease-default),
      color            var(--duration-fast) var(--ease-default);
  }

  .search-modal__filter-chip:hover {
    background-color: var(--surface-tinted);
    border-color: var(--primary-light);
    color: var(--text-accent);
  }

  .search-modal__filter-chip.is-active,
  .search-modal__filter-chip[aria-pressed="true"] {
    background-color: var(--surface-primary);
    border-color: var(--primary);
    color: var(--text-on-primary);
    font-weight: var(--weight-semibold);
  }

  .search-modal__filter-chip:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-full);
  }


  /* ════════════════════════════════════════════════════════════════════
     RESULTS LIST
     ════════════════════════════════════════════════════════════════════ */

  .search-modal__results {
    min-block-size: 0;
    padding-block: var(--space-xs);
  }

  /* Individual result item */
  .search-modal__result {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    padding-block: var(--space-s);
    padding-inline: var(--space-s);
    border-radius: var(--radius-m);
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-default);
    outline: none;
  }

  .search-modal__result:hover,
  .search-modal__result:focus {
    background-color: var(--surface-tinted);
  }

  .search-modal__result.is-focused,
  .search-modal__result[aria-selected="true"] {
    background-color: var(--surface-highlight);
    outline: 2px solid var(--primary);
    outline-offset: -2px;
  }

  .search-modal__result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2xs);
  }

  .search-modal__result-type {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-accent);
  }

  .search-modal__result-sector {
    font-size: var(--text-xs);
    color: var(--text-muted);
  }

  .search-modal__result-sector::before {
    content: '·';
    margin-inline-end: var(--space-2xs);
    color: var(--border-strong);
  }

  .search-modal__result-title {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-main);
    line-height: var(--leading-snug);
  }

  /* Highlight matched text */
  .search-modal__result-title mark,
  .search-modal__result-excerpt mark {
    background-color: var(--primary-ultra-light);
    color: var(--primary-dark);
    border-radius: var(--radius-xs);
    padding-inline: 0.1em;
  }

  .search-modal__result-excerpt {
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: var(--leading-relaxed);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .search-modal__result + .search-modal__result {
    border-block-start: 1px solid var(--border-subtle);
    border-radius: 0;
  }

  .search-modal__result:first-child { border-start-start-radius: var(--radius-m); border-start-end-radius: var(--radius-m); }
  .search-modal__result:last-child  { border-end-start-radius:   var(--radius-m); border-end-end-radius:   var(--radius-m); }


  /* ── States ── */

  /* Empty / no results state */
  .search-modal__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-s);
    padding-block: var(--space-xl);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-m);
  }

  .search-modal__empty-icon {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    color: var(--text-subtle);
  }

  /* Prompt state — shown before any input */
  .search-modal__prompt {
    padding-block: var(--space-m);
    font-size: var(--text-s);
    color: var(--text-muted);
    text-align: center;
  }


  /* ════════════════════════════════════════════════════════════════════
     FOOTER
     ════════════════════════════════════════════════════════════════════ */

  .search-modal__footer {
    display: flex;
    justify-content: center;
    padding-block: var(--space-s);
    border-block-start: 1px solid var(--border-subtle);
    margin-block-start: var(--space-xs);
  }

  .search-modal__all-results {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    color: var(--text-accent);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }

  .search-modal__all-results:hover {
    color: var(--primary-hover);
  }

  .search-modal__all-results svg {
    transition: transform var(--duration-fast) var(--ease-default);
  }

  .search-modal__all-results:hover svg {
    transform: translateX(3px);
  }


  /* ════════════════════════════════════════════════════════════════════
     REDUCED MOTION
     ════════════════════════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: reduce) {
    .search-modal,
    .search-modal-backdrop,
    .search-modal__spinner {
      transition: none;
      animation: none;
    }
  }

}