/* ==========================================================================
   NetrAI — Site search

   Two pieces: the trigger that sits beside "Get Started" in the nav, and the
   command-palette overlay it opens.

   Both are built entirely from the existing glass recipe in style.css
   (--glass-bg-strong, --glass-blur, --glass-border-top, --glass-shadow) so
   the palette reads as the same material as the nav capsule and the pricing
   cards rather than a component borrowed from somewhere else.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Nav layout — the CTA now shares a cell with the search button.

   style.css puts `.nav-cta` directly in grid column 3. Wrapping it means the
   grid properties on `.nav-cta` are simply ignored (it's no longer a grid
   item) and `.nav-actions` takes the cell instead.
   --------------------------------------------------------------------- */
.nav-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.2vw, 14px);
}

/* ---------------------------------------------------------------------
   The trigger — a glass capsule that mirrors the nav pill exactly
   --------------------------------------------------------------------- */
.nav-search-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 9px 13px;
  border-radius: 999px;
  cursor: pointer;

  color: var(--mist);
  font-family: var(--font-body);

  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-left-color: var(--glass-border-left);
  box-shadow: none;

  transition: color 0.3s ease, border-color 0.4s ease,
              box-shadow 0.4s ease, transform 0.25s var(--ease-out, ease);
}

.nav-search-btn:hover,
.nav-search-btn:focus-visible {
  color: var(--ink);
  border-top-color: var(--glass-border-top-hover);
  border-left-color: var(--glass-border-left-hover);
  box-shadow: none;
}

.nav-search-btn:active { transform: scale(0.96); }

.nav-search-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* The shortcut hint. Present but quiet — it teaches without demanding. */
.nav-search-kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--mist-dim);
  padding: 3px 6px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: var(--surface-canvas);
  white-space: nowrap;
}

@media (max-width: 1040px) {
  .nav-search-kbd { display: none; }
  .nav-search-btn { padding: 9px; }
}

/* On mobile the CTA leaves the bar entirely (it folds into the fullscreen
   menu), so the search button sits beside the hamburger on its own. */
@media (max-width: 860px) {
  .nav-actions { gap: 8px; }
}

/* style.css reveals the mobile CTA with `.nav-links-wrapper:has(.nav-links.open) ~ .nav-cta`.
   The CTA is now one level deeper, so that sibling selector no longer reaches
   it — this restores the behaviour through the new wrapper. */
@media (max-width: 860px) {
  .nav-links-wrapper:has(.nav-links.open) ~ .nav-actions .nav-cta {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
  }
}

/* ---------------------------------------------------------------------
   Overlay
   --------------------------------------------------------------------- */
.site-search {
  position: fixed;
  inset: 0;
  z-index: 9500;                 /* above everything else on the page */
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(60px, 12vh, 140px) 20px 40px;
}

.site-search[hidden] { display: none; }

body.site-search-open { overflow: hidden; }

.site-search-scrim {
  position: absolute;
  inset: 0;
  background: var(--scrim);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0.28, 0.11, 0.32, 1);
}

.site-search.is-open .site-search-scrim { opacity: 1; }

/* ---------------------------------------------------------------------
   Panel — the same glass as the nav capsule, one size up
   --------------------------------------------------------------------- */
.site-search-panel {
  position: relative;
  width: min(640px, 100%);
  max-height: min(560px, 76vh);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  border-radius: var(--radius-lg, 28px);
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid var(--glass-border);
  border-top-color: var(--glass-border-top);
  border-left-color: var(--glass-border-left);
  box-shadow: none;

  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  /* §7 — anchor the panel to the thing that opened it. With no origin set
     this grew from its own centre, so the relationship between the search
     button pressed and the panel that appeared had to be inferred rather
     than seen. js/components/search.js measures the trigger on open and writes
     --search-origin-x; the value below is the fallback for a centred
     dialog and for the moment before the first measurement lands.

     Vertically the origin is the top edge in every case: the panel hangs
     from the header, so it should grow downward out of it. */
  transform-origin: var(--search-origin-x, 50%) 0;
  transition: opacity 0.26s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-search.is-open .site-search-panel {
  opacity: 1;
  transform: none;
}

/* A single diagonal sheen across the top edge — the detail that makes glass
   read as a surface catching light rather than a translucent rectangle. */
.site-search-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--glass-sheen);
  opacity: 0.35;
  pointer-events: none;
}

/* ---------------------------------------------------------------------
   Field
   --------------------------------------------------------------------- */
.site-search-field {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.site-search-icon {
  width: 19px;
  height: 19px;
  color: var(--accent);
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px var(--accent-glow));
}

.site-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.02rem;
  padding: 2px 0;
}

.site-search-input::placeholder { color: var(--mist-dim); }

.site-search-esc {
  flex-shrink: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist-dim);
  padding: 5px 9px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-canvas);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.site-search-esc:hover { color: var(--ink); border-color: var(--line-strong); }

/* ---------------------------------------------------------------------
   Results
   --------------------------------------------------------------------- */
.site-search-list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.site-search-list::-webkit-scrollbar { width: 8px; }
.site-search-list::-webkit-scrollbar-thumb {
  background: var(--surface-pebble);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}

.site-search-group {
  padding: 12px 12px 6px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-dim);
}

.site-search-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-sm, 12px);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}

.site-search-item.is-active {
  background: var(--gradient-icon);
  border-color: var(--line);
}

.site-search-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.site-search-item-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--ink);
  line-height: 1.25;
}

.site-search-item-sub {
  font-size: 0.79rem;
  color: var(--mist-dim);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-search-item mark {
  background: transparent;
  color: var(--accent);
  font-weight: 600;
}

.site-search-item-go {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.site-search-item.is-active .site-search-item-go {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------------
   Empty state + footer
   --------------------------------------------------------------------- */
.site-search-empty {
  position: relative;
  z-index: 1;
  padding: 36px 24px 40px;
  text-align: center;
}

.site-search-empty-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}

.site-search-empty-sub {
  margin: 0;
  font-size: 0.85rem;
  color: var(--mist-dim);
}

.site-search-empty-sub a { color: var(--accent); }

.site-search-foot {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  background: var(--surface-canvas);
  font-size: 0.72rem;
  color: var(--mist-dim);
  flex-shrink: 0;
}

.site-search-foot span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.site-search-foot kbd {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: var(--surface-canvas);
  color: var(--mist);
}

@media (max-width: 560px) {
  .site-search { padding-top: 70px; }
  .site-search-panel { max-height: 82vh; }
  .site-search-foot { display: none; }
  .site-search-item-sub { white-space: normal; }
}

/* ---------------------------------------------------------------------
   Landing target

   The header is sticky, so an anchor jump would otherwise park the target
   underneath it. The flash is what tells you which of forty-nine pricing
   rows you actually asked for.
   --------------------------------------------------------------------- */
section[id],
.price-item[id],
.faq-item[id],
h3[id] {
  scroll-margin-top: 104px;
}

.search-target-flash {
  animation: search-target-flash 2s cubic-bezier(0.22, 1, 0.36, 1);
  border-radius: var(--radius-sm, 12px);
}

@keyframes search-target-flash {
  0%   { box-shadow: none; }
  12%  { box-shadow: none; }
  100% { box-shadow: none; }
}

/* ---------------------------------------------------------------------
   Reduced motion
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .site-search-scrim,
  .site-search-panel,
  .site-search-item,
  .site-search-item-go,
  .nav-search-btn {
    transition: none;
  }
  .site-search-panel { transform: none; }
  .search-target-flash { animation: none; outline: 2px solid var(--accent); }
}