/* YakWP — front-end search box ([yakwp_search] shortcode).
   Colour strategy: adopt the site's OWN palette when the theme exposes one (block themes
   publish --wp--preset--color-*), otherwise fall back to plain light defaults plus the
   visitor's OS dark setting. Never assume the visitor's OS preference matches the site:
   a dark site browsed from a light OS must still render a dark, readable box. */

.yakwp-search {
  position: relative;
  --yakwp-accent: #6C5CE7;
  /* Fallbacks (classic themes with no palette exposure) */
  --yakwp-panel: #ffffff;
  --yakwp-ink: #1a1a1a;
  --yakwp-border: #d9d9d9;
  --yakwp-muted: #5a5a5a;
  --yakwp-accent-ink: var(--yakwp-accent);
  /* Theme palette (block themes: TT5 etc.) — beats the OS guess below */
  --yakwp-panel: var(--wp--preset--color--surface, var(--wp--preset--color--base, #ffffff));
  --yakwp-ink: var(--wp--preset--color--contrast, #1a1a1a);
  --yakwp-accent-ink: color-mix(in srgb, var(--yakwp-accent) 55%, var(--yakwp-ink));
  --yakwp-tint: var(--yakwp-panel);
  --yakwp-tint: color-mix(in srgb, var(--yakwp-accent) 18%, var(--yakwp-panel));
  max-width: 640px;
  font-family: inherit;
  color: var(--yakwp-ink);
}

@media (prefers-color-scheme: dark) {
  .yakwp-search {
    --yakwp-panel: var(--wp--preset--color--surface, var(--wp--preset--color--base, #1f2030));
    --yakwp-ink: var(--wp--preset--color--contrast, #f2f2f5);
    --yakwp-border: #4a4b63;
    --yakwp-muted: #b9b9c8;
  }
}

/* Derived from the final ink colour so borders/labels always pair with the real text colour.
   Declarations after the media query win; browsers without color-mix keep the static fallbacks. */
.yakwp-search {
  --yakwp-border: color-mix(in srgb, var(--yakwp-ink) 24%, transparent);
  --yakwp-muted: color-mix(in srgb, var(--yakwp-ink) 68%, transparent);
}

.yakwp-search *,
.yakwp-search *::before,
.yakwp-search *::after { box-sizing: border-box; }

.yakwp-search-form { margin: 0; }

.yakwp-search-bar {
  display: flex;
  border: 1px solid var(--yakwp-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--yakwp-panel);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.yakwp-search-bar:focus-within {
  border-color: var(--yakwp-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--yakwp-accent) 22%, transparent);
}

/* Themes style inputs aggressively — reset so the pill always reads correctly. */
.yakwp-search .yakwp-search-input {
  flex: 1;
  min-width: 0;
  border: 0 !important;
  outline: 0;
  padding: 12px 14px;
  font: inherit;
  color: var(--yakwp-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
}
.yakwp-search .yakwp-search-input::placeholder { color: var(--yakwp-muted); opacity: 1; }
.yakwp-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }

.yakwp-search-btn {
  border: 0;
  background: var(--yakwp-accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  padding: 0 18px;
  cursor: pointer;
  transition: filter 0.15s ease;
}
.yakwp-search-btn:hover { filter: brightness(1.06); }

.yakwp-search-results {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 8px;
  background: var(--yakwp-panel);
  color: var(--yakwp-ink);
  border: 1px solid var(--yakwp-border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  z-index: 9999;
}
.yakwp-search[data-state="loading"] .yakwp-search-results::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: var(--yakwp-panel);
  opacity: 0.6;
  z-index: 2;
}

.yakwp-search-suggestion {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: var(--yakwp-tint);
  color: var(--yakwp-accent-ink);
  font: inherit;
  padding: 10px 14px;
  cursor: pointer;
}
.yakwp-search-suggestion:hover { filter: brightness(1.12); }

.yakwp-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 420px;
  overflow: auto;
}
.yakwp-search-item { margin: 0; }
.yakwp-search-item.is-active { background: var(--yakwp-tint); }

/* Theme nav/menu link styles would otherwise tint result titles grey. */
.yakwp-search .yakwp-search-link,
.yakwp-search .yakwp-search-link:visited,
.yakwp-search .yakwp-search-link:hover,
.yakwp-search .yakwp-search-link:focus {
  display: block;
  padding: 10px 14px;
  text-decoration: none !important;
  color: var(--yakwp-ink) !important;
}
.yakwp-search-title { display: block; font-weight: 600; margin-bottom: 2px; color: var(--yakwp-ink); }
.yakwp-search-meta { display: block; font-size: 0.85em; color: var(--yakwp-accent-ink); margin-bottom: 2px; }
.yakwp-search-snippet { display: block; font-size: 0.88em; color: var(--yakwp-muted); line-height: 1.4; }
.yakwp-search-type {
  display: block;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--yakwp-muted);
  opacity: 0.85;
  margin-top: 4px;
}

.yakwp-search-empty { padding: 14px; color: var(--yakwp-muted); }

.yakwp-search-credit {
  position: absolute;
  right: 0;
  margin-top: 4px;
  font-size: 0.72em;
  color: var(--yakwp-muted);
}
.yakwp-search-credit a { color: inherit !important; text-decoration: none !important; }

.yakwp-search mark {
  background: #ffe680;
  color: #16161a;
  padding: 0 1px;
  border-radius: 2px;
}

/* Compact variant used in the navigation menu ([yakwp_search] with class "yakwp-compact"). */
.yakwp-search.yakwp-compact { max-width: 220px; }
.yakwp-search.yakwp-compact .yakwp-search-btn { display: none; }
.yakwp-search.yakwp-compact .yakwp-search-bar { border-radius: 999px; }
.yakwp-search.yakwp-compact .yakwp-search-input { padding: 8px 14px; width: 180px; }
.yakwp-menu-search { list-style: none; margin-left: 12px; align-self: center; }
.yakwp-menu-search .yakwp-search { max-width: 220px; }
.yakwp-menu-search .yakwp-search-results { margin-top: 6px; min-width: 260px; }
.yakwp-menu-search .yakwp-search-credit { display: none; }

@media (min-width: 768px) {
  .yakwp-search { max-width: 720px; }
}