/* ============================================================================
   Site Search plugin — public UI
   Colors, spacing, radii, shadows, fonts and z-index come EXCLUSIVELY from
   the --ap-* design tokens defined in core.css and overridden by themes.
   No hardcoded palette → works with every theme, custom themes, dark/light.
   Logical properties (inline-start/end) keep RTL languages correct.
   ============================================================================ */

/* ── Header button ── */
.ap-ssearch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: var(--ap-radius-md);
  color: var(--ap-header-link);
  cursor: pointer;
  transition: color var(--ap-transition-fast),
              background-color var(--ap-transition-fast);
}
.ap-ssearch-btn:hover,
.ap-ssearch-btn:focus-visible {
  color: var(--ap-header-link-hover);
  background: color-mix(in srgb, currentColor 12%, transparent);
}
.ap-ssearch-btn:focus-visible {
  outline: 2px solid var(--ap-color-primary);
  outline-offset: 2px;
}
/* Fallback placement when the theme has no .ap-header__right */
.ap-ssearch-btn--floating {
  position: fixed;
  top: var(--ap-space-3);
  inset-inline-end: var(--ap-space-3);
  z-index: var(--ap-z-sticky);
  background: var(--ap-color-surface);
  border: var(--ap-border-width) solid var(--ap-color-border);
  color: var(--ap-color-text);
  box-shadow: var(--ap-shadow-md);
}

/* ── Overlay ── */
.ap-ssearch-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--ap-z-modal);
  display: none;
  background: rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.ap-ssearch-overlay.is-open { display: block; }

/* ── Panel ── */
.ap-ssearch-panel {
  position: relative;
  margin: 12vh auto 0;
  width: min(640px, calc(100% - var(--ap-space-6)));
  max-height: 72vh;
  display: flex;
  flex-direction: column;
  background: var(--ap-color-bg);
  color: var(--ap-color-text);
  font-family: var(--ap-font-body);
  border: var(--ap-border-width) solid var(--ap-color-border);
  border-radius: var(--ap-radius-lg);
  box-shadow: var(--ap-shadow-xl);
  overflow: hidden;
  animation: ap-ssearch-in var(--ap-transition-fast);
}
@keyframes ap-ssearch-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@media (max-width: 600px) {
  .ap-ssearch-panel { margin-top: 6vh; max-height: 84vh; }
}

/* ── Input row ── */
.ap-ssearch-inputwrap {
  display: flex;
  align-items: center;
  gap: var(--ap-space-3);
  padding: var(--ap-space-4) var(--ap-space-5);
  border-bottom: var(--ap-border-width) solid var(--ap-color-border);
}
.ap-ssearch-inputwrap svg {
  flex: 0 0 auto;
  color: var(--ap-color-text-muted);
}
.ap-ssearch-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--ap-color-text);
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-lg);
  line-height: var(--ap-leading-tight);
}
.ap-ssearch-input::placeholder { color: var(--ap-color-text-muted); }
.ap-ssearch-close {
  flex: 0 0 auto;
  border: var(--ap-border-width) solid var(--ap-color-border);
  background: var(--ap-color-surface);
  color: var(--ap-color-text-secondary);
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-xs);
  padding: var(--ap-space-1) var(--ap-space-2);
  border-radius: var(--ap-radius-sm);
  cursor: pointer;
  transition: color var(--ap-transition-fast);
}
.ap-ssearch-close:hover { color: var(--ap-color-text); }

/* ── Body / states ── */
.ap-ssearch-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--ap-space-2);
}
.ap-ssearch-msg {
  padding: var(--ap-space-8) var(--ap-space-5);
  text-align: center;
  color: var(--ap-color-text-muted);
  font-size: var(--ap-text-sm);
}
.ap-ssearch-msg--error { color: var(--ap-color-error); }

/* ── Results ── */
.ap-ssearch-list { list-style: none; margin: 0; padding: 0; }
.ap-ssearch-item { margin: 0; }
.ap-ssearch-link {
  display: block;
  padding: var(--ap-space-3) var(--ap-space-4);
  border-radius: var(--ap-radius-md);
  text-decoration: none;
  color: inherit;
}
.ap-ssearch-item.is-active .ap-ssearch-link,
.ap-ssearch-link:hover {
  background: var(--ap-color-surface);
}
.ap-ssearch-item.is-active .ap-ssearch-link {
  outline: 2px solid var(--ap-color-primary);
  outline-offset: -2px;
}
.ap-ssearch-title-row {
  display: flex;
  align-items: baseline;
  gap: var(--ap-space-2);
}
.ap-ssearch-title {
  font-weight: var(--ap-font-weight-semibold);
  font-size: var(--ap-text-base);
  color: var(--ap-color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ap-ssearch-badge {
  flex: 0 0 auto;
  font-size: var(--ap-text-xs);
  color: var(--ap-color-text-secondary);
  background: var(--ap-color-surface-alt);
  border: var(--ap-border-width) solid var(--ap-color-border);
  border-radius: var(--ap-radius-full);
  padding: 0 var(--ap-space-2);
  line-height: 1.6;
}
.ap-ssearch-snippet {
  margin-top: var(--ap-space-1);
  font-size: var(--ap-text-sm);
  color: var(--ap-color-text-secondary);
  line-height: var(--ap-leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ap-ssearch-snippet mark {
  /* --ap-color-primary-light is ~15% alpha in the dark modes of several
     themes — nearly invisible on dark backgrounds. Mixing solid primary
     into the page background instead keeps the text color (and therefore
     the theme's own guaranteed text/background contrast: worst measured
     pair across all 15 themes x 2 modes is 5.2:1, above WCAG AA 4.5:1)
     while staying clearly visible. First line is the fallback for
     browsers without color-mix(). */
  background: var(--ap-color-primary-light);
  background: color-mix(in srgb, var(--ap-color-primary) 35%, var(--ap-color-bg));
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ── Topics (matching categories / tags) ── */
.ap-ssearch-topics {
  padding: var(--ap-space-3) var(--ap-space-4);
  border-top: var(--ap-border-width) solid var(--ap-color-border);
}
.ap-ssearch-topics-label {
  font-size: var(--ap-text-xs);
  color: var(--ap-color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--ap-space-2);
}
.ap-ssearch-topic {
  display: inline-block;
  margin-inline-end: var(--ap-space-2);
  margin-bottom: var(--ap-space-2);
  padding: var(--ap-space-1) var(--ap-space-3);
  font-size: var(--ap-text-sm);
  color: var(--ap-color-link);
  background: var(--ap-color-primary-subtle);
  border-radius: var(--ap-radius-full);
  text-decoration: none;
  transition: background-color var(--ap-transition-fast);
}
.ap-ssearch-topic:hover { background: var(--ap-color-primary-light); }

/* ── Footer hint ── */
.ap-ssearch-footer {
  display: flex;
  align-items: center;
  gap: var(--ap-space-2);
  padding: var(--ap-space-2) var(--ap-space-5);
  border-top: var(--ap-border-width) solid var(--ap-color-border);
  background: var(--ap-color-surface);
  color: var(--ap-color-text-muted);
  font-size: var(--ap-text-xs);
}
.ap-ssearch-kbd {
  font-family: var(--ap-font-mono);
  font-size: var(--ap-text-xs);
  background: var(--ap-color-bg);
  border: var(--ap-border-width) solid var(--ap-color-border-strong);
  border-bottom-width: 2px;
  border-radius: var(--ap-radius-sm);
  padding: 0 var(--ap-space-1);
}

/* Body scroll lock while the overlay is open */
.ap-ssearch-noscroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ap-ssearch-panel { animation: none; }
  .ap-ssearch-btn, .ap-ssearch-close, .ap-ssearch-topic { transition: none; }
}

/* ── v1.0.3 additions ─────────────────────────────────────────────── */

/* In-page highlight after clicking a search result (same look as the
   snippet highlight in the overlay, driven by theme tokens). */
mark.ap-ssearch-jump {
  /* Same accessible mix as .ap-ssearch-snippet mark (see comment there),
     plus a solid-primary underline: a shape cue that does not depend on
     color perception at all. */
  background: var(--ap-color-primary-light);
  background: color-mix(in srgb, var(--ap-color-primary) 35%, var(--ap-color-bg));
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  box-shadow: inset 0 -2px 0 var(--ap-color-primary);
  animation: ap-ssearch-pulse 1.2s ease-out 1;
}
@keyframes ap-ssearch-pulse {
  0%   { outline: 3px solid var(--ap-color-primary); outline-offset: 2px; }
  100% { outline: 3px solid transparent; outline-offset: 2px; }
}

/* "Show more results" */
.ap-ssearch-more {
  display: block;
  width: 100%;
  margin-top: var(--ap-space-2);
  padding: var(--ap-space-3) var(--ap-space-4);
  border: var(--ap-border-width) solid var(--ap-color-border);
  border-radius: var(--ap-radius-md);
  background: var(--ap-color-surface);
  color: var(--ap-color-text-secondary);
  font-family: var(--ap-font-body);
  font-size: var(--ap-text-sm);
  cursor: pointer;
  transition: color var(--ap-transition-fast),
              border-color var(--ap-transition-fast);
}
.ap-ssearch-more:hover,
.ap-ssearch-more:focus-visible {
  color: var(--ap-color-text);
  border-color: var(--ap-color-border-strong);
}

/* Touch devices: keyboard hints are noise; give fingers room instead. */
@media (hover: none), (pointer: coarse) {
  .ap-ssearch-footer { display: none; }
  .ap-ssearch-close {
    min-width: 44px;
    min-height: 44px;
    font-size: var(--ap-text-base);
  }
  .ap-ssearch-link { padding: var(--ap-space-4); }
  .ap-ssearch-topic { padding: var(--ap-space-2) var(--ap-space-3); }
}

/* Small screens: keep the panel high and roomy; 16px input stops the
   automatic zoom-in on iOS when the field gets focus. */
@media (max-width: 600px) {
  .ap-ssearch-input { font-size: max(16px, var(--ap-text-lg)); }
}

@media (prefers-reduced-motion: reduce) {
  mark.ap-ssearch-jump { animation: none; }
}