/* ==========================================================================
   nl-blog-aa0105-search.css
   Premium search box + category filter chips. Bigger touch target, a real
   elevated shadow instead of a flat border-only box, an icon that reacts
   on focus, and chips with a small category-colored dot so the active
   filter is identifiable even at a glance (not just by its label color).

   Responsive breakpoints in this file:
     ≤374px    extra-small phones → tighter chip/search padding
     375–640px phones             → 16px input font (iOS zoom fix, see
                                     below) + chips wrap onto multiple
                                     centered rows (never hidden off-screen)
     ≥641px    tablet/desktop     → default sizes, chips wrap normally
   Requires nl-blog-aa0105-tokens.css loaded first.
   ========================================================================== */

.nl-blog-aa0105-search-section { padding-bottom: var(--nl-space-12); }

.nl-blog-aa0105-search-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--nl-space-5);
}

.nl-blog-aa0105-search-box {
  position: relative;
  width: 100%;
  max-width: 560px;
  display: flex;
  align-items: center;
  background: var(--nl-surface);
  border: 1.5px solid var(--nl-border);
  border-radius: var(--nl-r-xl);
  padding: 0 var(--nl-space-5);
  box-shadow: var(--nl-shadow-md);
  transition: border-color var(--nl-dur-base) var(--nl-ease), box-shadow var(--nl-dur-base) var(--nl-ease), transform var(--nl-dur-base) var(--nl-ease);
}

.nl-blog-aa0105-search-box:hover { box-shadow: var(--nl-shadow-lg); }

.nl-blog-aa0105-search-box:focus-within {
  border-color: var(--nl-accent);
  box-shadow: var(--nl-shadow-lg);
  transform: translateY(-1px);
}

.nl-blog-aa0105-search-icon {
  flex-shrink: 0;
  color: var(--nl-ink-faint);
  transition: color var(--nl-dur-base) var(--nl-ease), transform var(--nl-dur-base) var(--nl-ease-spring);
}

.nl-blog-aa0105-search-box:focus-within .nl-blog-aa0105-search-icon {
  color: var(--nl-accent);
  transform: scale(1.1);
}

.nl-blog-aa0105-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--nl-font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 1rem var(--nl-space-3);
  color: var(--nl-ink);
}

/* The box itself already shows a clear focus state (border-color + shadow
   change on .search-box:focus-within above). The browser's own focus
   outline is rectangular and doesn't match the pill's border-radius, so
   it pokes out past the rounded corners as a stray "extra line" — turned
   off here since the box's own indication is sufficient. */
.nl-blog-aa0105-search-input:focus-visible { outline: none; }

.nl-blog-aa0105-search-input::placeholder { color: var(--nl-ink-faint); font-weight: 400; }

.nl-blog-aa0105-search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: var(--nl-surface-2);
  color: var(--nl-ink-muted);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--nl-dur-fast) var(--nl-ease), color var(--nl-dur-fast) var(--nl-ease), transform var(--nl-dur-fast) var(--nl-ease-spring);
}

.nl-blog-aa0105-search-clear.visible { display: flex; }
.nl-blog-aa0105-search-clear:hover { background: var(--nl-c-rose); color: #fff; transform: scale(1.08); }

/* Filter chips — category glow uses --nl-cat, matched from base tokens.
   Each chip carries a small color dot so category identity survives even
   when the chip itself isn't the active one. */
.nl-blog-aa0105-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nl-space-2); }

.nl-blog-aa0105-filter-chip[data-category="ai-prompts"]    { --nl-cat: var(--nl-c-ai-prompts); }
.nl-blog-aa0105-filter-chip[data-category="web-dev"]        { --nl-cat: var(--nl-c-web-dev); }
.nl-blog-aa0105-filter-chip[data-category="ai-automation"]  { --nl-cat: var(--nl-c-ai-automation); }
.nl-blog-aa0105-filter-chip[data-category="saas-tools"]     { --nl-cat: var(--nl-c-saas-tools); }
.nl-blog-aa0105-filter-chip[data-category="seo-growth"]     { --nl-cat: var(--nl-c-seo-growth); }
.nl-blog-aa0105-filter-chip[data-category="tips-tricks"]    { --nl-cat: var(--nl-c-tips-tricks); }

.nl-blog-aa0105-filter-chip {
  --nl-cat: var(--nl-accent);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--nl-font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 0.55rem 1.1rem;
  border-radius: var(--nl-r-full);
  border: 1.5px solid var(--nl-border);
  background: var(--nl-surface);
  color: var(--nl-ink-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--nl-dur-base) var(--nl-ease);
}

.nl-blog-aa0105-filter-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nl-cat);
  flex-shrink: 0;
  transition: transform var(--nl-dur-base) var(--nl-ease-spring);
}

.nl-blog-aa0105-filter-chip[data-category="all"]::before { background: var(--nl-grad-accent); }

.nl-blog-aa0105-filter-chip:hover {
  border-color: color-mix(in srgb, var(--nl-cat) 45%, var(--nl-border));
  color: var(--nl-cat);
  background: color-mix(in srgb, var(--nl-cat) 8%, var(--nl-surface));
  transform: translateY(-1px);
}

.nl-blog-aa0105-filter-chip:hover::before { transform: scale(1.25); }

.nl-blog-aa0105-filter-chip.is-active {
  background: var(--nl-cat);
  border-color: var(--nl-cat);
  color: #fff;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--nl-cat) 40%, transparent);
  cursor: default;
  transform: none;
}

.nl-blog-aa0105-filter-chip.is-active::before { background: #fff; }
.nl-blog-aa0105-filter-chip.is-active:hover { color: #fff; }

/* Sort control — Latest / Oldest / Popular. Smaller and quieter than the
   category chips (sort is secondary to category), grouped together with
   a small divider from the "Sort" label. */
.nl-blog-aa0105-sort {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--nl-space-2);
  margin-top: var(--nl-space-3);
}

.nl-blog-aa0105-sort-label {
  font-family: var(--nl-font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--nl-ink-faint);
  margin-right: var(--nl-space-1);
}

.nl-blog-aa0105-sort-btn {
  font-family: var(--nl-font-body);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 0.85rem;
  border-radius: var(--nl-r-full);
  border: 1.5px solid transparent;
  background: transparent;
  color: var(--nl-ink-muted);
  cursor: pointer;
  transition: all var(--nl-dur-fast) var(--nl-ease);
}

.nl-blog-aa0105-sort-btn:hover { color: var(--nl-accent); background: var(--nl-accent-light); }

.nl-blog-aa0105-sort-btn.is-active {
  color: var(--nl-accent-dark);
  background: var(--nl-accent-light);
  border-color: rgba(61, 90, 241, 0.25);
  cursor: default;
}

.nl-blog-aa0105-result-count {
  text-align: center;
  font-family: var(--nl-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--nl-ink-faint);
  margin-top: var(--nl-space-3);
  min-height: 18px;
}

/* Search results dropdown */
.nl-blog-aa0105-search-results {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 0; right: 0;
  max-height: 380px;
  overflow-y: auto;
  background: var(--nl-surface);
  border: 1px solid var(--nl-border);
  border-radius: var(--nl-r-lg);
  box-shadow: var(--nl-shadow-lg);
  z-index: 20;
}

.nl-blog-aa0105-search-results.active { display: block; }

.nl-blog-aa0105-search-result-item {
  display: flex;
  align-items: flex-start;
  gap: var(--nl-space-3);
  padding: var(--nl-space-3) var(--nl-space-4);
  cursor: pointer;
  border-bottom: 1px solid var(--nl-surface-2);
  transition: background var(--nl-dur-fast) var(--nl-ease);
}

.nl-blog-aa0105-search-result-item:last-child { border-bottom: none; }
.nl-blog-aa0105-search-result-item:hover { background: var(--nl-surface-2); }

.nl-blog-aa0105-search-result-category {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nl-accent);
}

.nl-blog-aa0105-search-result-title {
  font-family: var(--nl-font-display);
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--nl-ink);
  margin: 2px 0;
}

.nl-blog-aa0105-search-result-desc { font-size: 0.75rem; color: var(--nl-ink-muted); }

.nl-blog-aa0105-search-match {
  background: var(--nl-accent-light);
  color: var(--nl-accent-dark);
  border-radius: 3px;
  padding: 0 2px;
  font-weight: 700;
}

.nl-blog-aa0105-no-results { text-align: center; padding: var(--nl-space-8); color: var(--nl-ink-faint); font-size: 0.8125rem; }

@media (max-width: 640px) {
  /* 16px minimum — below this, iOS Safari auto-zooms the whole page in
     when this input gets focus (its own accessibility behavior, not
     something CSS can disable), then doesn't always zoom back out
     cleanly. That's the "zoom in/out, cards look unprofessional" bug. */
  .nl-blog-aa0105-search-input { padding: 0.875rem var(--nl-space-3); font-size: 16px; }

  /* A single scrollable row hid most categories off-screen — a user
     glancing at the page saw only 2–3 chips and had no visual cue
     (no arrow, no fade edge) that there was more to scroll to, so it
     read as "there are only 2–3 categories." Wrapping instead means
     every category is visible at once, at the cost of the row taking
     two or three lines instead of one — worth it so nothing is hidden. */
  .nl-blog-aa0105-filters {
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--nl-space-2);
  }
}

/* Extra-small phones (≤374px): the search box's side padding and chip
   padding are trimmed a bit further so the wrapped chip rows sit
   comfortably on a 320–374px viewport without crowding the edges. */
@media (max-width: 374px) {
  .nl-blog-aa0105-search-box { padding: 0 var(--nl-space-3); border-radius: var(--nl-r-lg); }
  .nl-blog-aa0105-filter-chip { padding: 0.5rem 0.85rem; font-size: 0.75rem; }
  .nl-blog-aa0105-search-results { max-height: 320px; }
}