/* ========================================
   Search Component Styles
   ======================================== */

/* Scoped token aliases.
   The theme's real tokens are --theme/--entry/--content/--secondary/--tertiary/--border
   (all dark-mode aware). The rules below were originally written against a token set
   that never existed on this site, so every surface resolved to transparent and text
   colours fell back to inherit. Map the component vocabulary onto the real tokens
   once, scoped to the search UI only. Literal fallbacks cover the unlikely case of a
   missing token. */
.search-modal,
#searchbox {
  --bg-primary: var(--theme, #fff);
  --bg-secondary: var(--entry, #f2f3f5);
  --bg-tertiary: var(--border, #e2e5e9);
  --text-primary: var(--content, #212529);
  --text-secondary: var(--secondary, #52606d);
  --text-muted: var(--tertiary, #82909c);
  --font-body: inherit;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-xl: 16px;
  --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.22);
  --transition-fast: 0.18s ease;
}

/* ========================================
   Theme /search/ page (searchbox)
   The theme layout renders a bare <input id="searchInput"> and
   <ul id="searchResults"> with no styling of their own anywhere in
   the built CSS; without these rules the input ships browser-default
   and flush left. Uses the aliases declared on #searchbox above.
   ======================================== */

#searchbox {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
}

#searchInput {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 2px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#searchInput::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

#searchInput:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.15);
}

#searchResults {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

/* fastsearch injects a bare <a> per result without the theme's .entry-link
   class, so the absolute stretch that makes the whole card clickable never
   applies. Restore it inside the results list only. */
#searchResults .post-entry a {
  position: absolute;
  inset: 0;
}

/* Search Trigger Button */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--bg-secondary);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-trigger:hover {
  background: var(--bg-tertiary);
  border-color: var(--accent);
  color: var(--text-primary);
}

.search-trigger svg {
  flex-shrink: 0;
}

.search-trigger kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  background: var(--bg-primary);
  border: 1px solid var(--bg-tertiary);
  border-radius: var(--radius-sm);
  margin-left: auto;
}

/* Search Modal */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  padding: 2rem 1rem;
}

.search-modal[aria-hidden="false"] {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
}

.search-container {
  position: relative;
  width: 100%;
  max-width: 640px;
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  max-height: calc(100vh - 4rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Search Header */
.search-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--bg-tertiary);
}

.search-header h2 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-primary);
}

.search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  background: transparent;
  border: none;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-close:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* Search Input */
.search-input-wrapper {
  position: relative;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.search-icon {
  flex-shrink: 0;
  color: var(--text-muted);
}

.search-input {
  flex: 1;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--bg-secondary);
  border: 2px solid var(--bg-tertiary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  outline: none;
  transition: all var(--transition-fast);
}

.search-input:focus {
  border-color: var(--accent);
  background: var(--bg-primary);
}

.search-shortcut {
  position: absolute;
  right: 2rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  color: var(--text-muted);
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  pointer-events: none;
}

/* Search Status */
.search-status {
  padding: 0 1.5rem 0.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* Search Results */
.search-results {
  overflow-y: auto;
  padding: 0.5rem 0;
  flex: 1;
}

.search-result-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1.5rem;
  cursor: pointer;
  transition: background var(--transition-fast);
  border-left: 3px solid transparent;
}

.search-result-item:hover,
.search-result-item[aria-selected="true"] {
  background: var(--bg-secondary);
  border-left-color: var(--accent);
}

.search-result-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.search-result-excerpt {
  font-size: 0.875rem;
  color: var(--text-secondary);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.search-result-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.search-result-meta span {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.search-result-category {
  padding: 0.125rem 0.5rem;
  background: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  font-weight: 500;
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}

/* Empty State */
.search-empty {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--text-muted);
}

.search-empty svg {
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1rem;
  opacity: 0.5;
}

/* Loading State */
.search-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--text-muted);
}

.search-loading::after {
  content: "";
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--bg-tertiary);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

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

/* Highlight Matches.
   --earth-cream (#fefcbf) has no dark-mode override, so the highlight is
   always pale; inherited text on it goes near-invisible in dark mode.
   Fixed dark ink reads on cream in both modes. */
mark {
  background: var(--earth-cream);
  color: #1a202c;
  padding: 0 0.125rem;
  border-radius: 2px;
}

/* Responsive */
@media (max-width: 640px) {
  .search-modal {
    padding: 0;
  }

  .search-container {
    max-height: 100vh;
    border-radius: 0;
  }

  .search-shortcut {
    display: none;
  }

  .search-trigger kbd {
    display: none;
  }
}

/* Focus Styles for Accessibility */
.search-trigger:focus-visible,
.search-close:focus-visible,
.search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .search-loading::after {
    animation: none;
  }
}