/* ==========================================================================
   NEXT GEO — site search (overlay + results page)

   Two surfaces, one sheet:
     .ng-sx-*   the as-you-type overlay, present on EVERY page
     .ng-sr-*   the full results page at /?s=

   Every token is read as `var(--ng-token, fallback)`. The overlay opens on
   pages that have not been converted to the v2 design and therefore never load
   ng-foundation.css, so it cannot assume a single custom property exists. On a
   converted page the real tokens win and the overlay matches the site exactly;
   everywhere else the fallbacks reproduce them.

   Not scoped under .ng-v2 for the same reason — that class is only on
   converted pages, and search has to work on all of them.
   ========================================================================== */

.ng-sx,
.ng-sr,
.ng-sx-trigger {          /* the trigger lives in the theme header, outside both */
  --sx-ink:      var(--ng-ink, #1B1F5E);
  --sx-muted:    var(--ng-muted, #5A5E86);
  --sx-surface:  var(--ng-surface, #FFFFFF);
  --sx-ground:   var(--ng-ground, #FAFBFF);
  --sx-hairline: var(--ng-hairline, #DDE1F0);
  --sx-accent:   var(--ng-accent, #C61073);
  --sx-wash:     var(--ng-accent-wash, #FDE9F3);
  --sx-radius:   var(--ng-radius, 18px);
  --sx-radius-sm:var(--ng-radius-sm, 12px);
  --sx-display:  var(--ng-font-display, 'Manrope', system-ui, sans-serif);
  --sx-body:     var(--ng-font-body, 'Inter', system-ui, sans-serif);
}

/* --- 1. Header trigger ---------------------------------------------------
   Injected into the theme's existing .header-icons-container by ng-search.js
   rather than by editing header.php, which lives in the Neuros theme and would
   be overwritten on the next theme update. */
/* Rendered as an <a>, not a <button> — see ng-search.js. The theme's
   `.body-container button:not(.customize-partial-edit-shortcut-button)` rule
   sits at specificity (0,3,1) and draws its border through an ::after gradient,
   which turned this control into a bare word with no pill. A link is outside
   that rule entirely. The class is still doubled to outrank the theme's
   header-link styling. */
.ng-sx-trigger.ng-sx-trigger {
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; height: 44px; padding: 0 18px; margin: 0 14px 0 0;
  background: transparent; border: 1px solid var(--sx-hairline);
  border-radius: var(--ng-radius-pill, 999px);
  color: var(--sx-ink); cursor: pointer; text-transform: none;
  letter-spacing: 0; box-shadow: none; white-space: nowrap;
  font: 500 15px/1 var(--sx-body);
  transition: border-color .18s ease, background-color .18s ease;
}
.ng-sx-trigger:hover { border-color: var(--sx-accent); background: var(--sx-wash); }
.ng-sx-trigger:focus-visible { outline: 2px solid var(--ng-focus-outer, #1B1F5E); outline-offset: 2px; }
.ng-sx-trigger svg { width: 18px; height: 18px; flex: none; }
.ng-sx-trigger__kbd {
  font: 500 11px/1 var(--sx-body); color: var(--sx-muted);
  border: 1px solid var(--sx-hairline); border-radius: 5px; padding: 3px 5px;
}
/* The label and the shortcut hint are the first things to go when the header
   runs out of room; the icon alone still reads as search. */
@media (max-width: 1100px) { .ng-sx-trigger__kbd { display: none; } }
@media (max-width: 782px)  { .ng-sx-trigger__label { display: none; }
                             .ng-sx-trigger.ng-sx-trigger { padding: 0; width: 44px; margin-right: 10px; } }

/* --- 2. Overlay ---------------------------------------------------------- */
.ng-sx {
  position: fixed; inset: 0; z-index: 100000;
  display: none; padding: 10vh 20px 20px;
  background: rgba(27, 31, 94, .38);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  font-family: var(--sx-body);
}
.ng-sx[data-open="1"] { display: block; }
body.ng-sx-locked { overflow: hidden; }

.ng-sx__panel {
  max-width: 680px; margin: 0 auto;
  background: var(--sx-surface); border-radius: var(--sx-radius);
  box-shadow: 0 24px 70px -20px rgba(27, 31, 94, .45);
  overflow: hidden;
  animation: ng-sx-in .16s ease-out;
}
@keyframes ng-sx-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ng-sx__panel { animation: none; } }

.ng-sx__bar { display: flex; align-items: center; gap: 12px;
              padding: 16px 18px; border-bottom: 1px solid var(--sx-hairline); }
.ng-sx__bar svg { width: 20px; height: 20px; flex: none; color: var(--sx-muted); }
/* Same specificity problem: the theme styles `input[type="search"]` with a
   bottom border and a fixed height, which showed as a stray rule under the
   overlay's field. Doubling the class outranks it.

   border-radius and padding are explicit, not omitted. The theme's rule also
   set `border-radius:12px` with `overflow:clip`; combined with the padding:0
   this file used to set, the rounded corner cropped the caret and the first
   character of whatever was typed. The field sits inside a bordered bar and
   needs no radius of its own. */
.ng-sx .ng-sx__input.ng-sx__input {
  flex: 1; min-width: 0; height: auto; margin: 0;
  padding: 4px 2px;
  border: 0; border-radius: 0; outline: 0; box-shadow: none;
  background: transparent; overflow: visible;
  color: var(--sx-ink); font: 500 17px/1.4 var(--sx-body);
  -webkit-appearance: none; appearance: none;
}
.ng-sx .ng-sx__input::-webkit-search-decoration,
.ng-sx .ng-sx__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.ng-sx__input::placeholder { color: var(--sx-muted); opacity: .85; }
.ng-sx__close.ng-sx__close {
  border: 0; background: transparent; box-shadow: none; text-transform: none; color: var(--sx-muted); cursor: pointer;
  font: 500 12px/1 var(--sx-body); padding: 6px 8px; border-radius: 6px;
}
.ng-sx__close:hover { color: var(--sx-ink); background: var(--sx-ground); }

.ng-sx__results { max-height: min(60vh, 520px); overflow-y: auto; padding: 6px; }
.ng-sx__hit {
  display: block; padding: 12px 14px; border-radius: var(--sx-radius-sm);
  text-decoration: none; color: inherit;
}
.ng-sx__hit:hover,
.ng-sx__hit[aria-selected="true"] { background: var(--sx-ground); }
.ng-sx__hit[aria-selected="true"] { box-shadow: inset 2px 0 0 var(--sx-accent); }
.ng-sx__crumb {
  display: block; font: 500 11px/1.2 var(--sx-display); letter-spacing: .08em;
  text-transform: uppercase; color: var(--sx-accent); margin-bottom: 4px;
}
.ng-sx__title { display: block; font: 600 15px/1.35 var(--sx-display); color: var(--sx-ink); }
.ng-sx__snip  { display: block; margin-top: 3px; font: 400 13px/1.5 var(--sx-body); color: var(--sx-muted);
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ng-sx__snip mark, .ng-sr__snip mark { background: var(--sx-wash); color: var(--sx-ink); padding: 0 2px; border-radius: 3px; }

.ng-sx__msg { padding: 28px 18px; text-align: center; color: var(--sx-muted);
              font: 400 14px/1.6 var(--sx-body); }
.ng-sx__foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 16px; border-top: 1px solid var(--sx-hairline);
  background: var(--sx-ground); font: 400 12px/1 var(--sx-body); color: var(--sx-muted);
}
.ng-sx__foot kbd {
  font: 500 11px/1 var(--sx-body); border: 1px solid var(--sx-hairline);
  background: var(--sx-surface); border-radius: 4px; padding: 3px 5px; margin: 0 2px;
}
.ng-sx__all { color: var(--sx-accent); text-decoration: none; font-weight: 600; white-space: nowrap; }
.ng-sx__all:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .ng-sx { padding: 0; }
  /* Flex column so the result list grows into the free space and the footer
     pins to the bottom edge. With the default block layout the panel is full
     height but the list is only as tall as its content, which left the footer
     floating mid-screen above a band of empty white. */
  .ng-sx__panel {
    max-width: none; height: 100%; border-radius: 0;
    display: flex; flex-direction: column;
  }
  .ng-sx__bar, .ng-sx__foot { flex: 0 0 auto; }
  .ng-sx__results { flex: 1 1 auto; max-height: none; }
  .ng-sx__foot .ng-sx__hint { display: none; }
}

/* --- 3. Results page ----------------------------------------------------- */
.ng-sr { font-family: var(--sx-body); color: var(--sx-ink); }
.ng-sr__head { padding: 48px 0 24px; border-bottom: 1px solid var(--sx-hairline); }
.ng-sr__eyebrow { font: 600 12px/1 var(--sx-display); letter-spacing: .1em;
                  text-transform: uppercase; color: var(--sx-accent); margin: 0 0 10px; }
.ng-sr__title { font: 700 clamp(28px, 4vw, 40px)/1.15 var(--sx-display); margin: 0 0 10px; color: var(--sx-ink); }
.ng-sr__count { font: 400 15px/1.5 var(--sx-body); color: var(--sx-muted); margin: 0; }

.ng-sr__form { display: flex; gap: 10px; margin: 22px 0 6px; max-width: 560px; }
.ng-sr .ng-sr__field.ng-sr__field {
  flex: 1; min-width: 0; height: 48px; padding: 0 16px; margin: 0; box-shadow: none;
  border: 1px solid var(--sx-hairline); border-radius: var(--ng-radius-pill, 999px);
  background: var(--sx-surface); color: var(--sx-ink); font: 400 15px/1 var(--sx-body);
}
.ng-sr__field:focus { outline: 2px solid var(--ng-focus-outer, #1B1F5E); outline-offset: 1px; border-color: transparent; }
.ng-sr__submit.ng-sr__submit {
  height: 48px; padding: 0 22px; border: 0; cursor: pointer; text-transform: none;
  border-radius: var(--ng-radius-pill, 999px);
  background: var(--ng-cta-fill, #C61073); color: #fff;
  font: 600 15px/1 var(--sx-display);
}
.ng-sr__submit:hover { background: var(--ng-cta-fill-hover, #A50D60); }

.ng-sr__filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0 4px; }
.ng-sr__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: var(--ng-radius-pill, 999px);
  border: 1px solid var(--sx-hairline); background: var(--sx-surface);
  color: var(--sx-ink); text-decoration: none; font: 500 13px/1 var(--sx-body);
}
.ng-sr__chip:hover { border-color: var(--sx-accent); }
.ng-sr__chip[aria-current="true"] { background: var(--sx-ink); border-color: var(--sx-ink); color: #fff; }
.ng-sr__chip b { font-weight: 600; opacity: .6; }

.ng-sr__list { list-style: none; margin: 0; padding: 26px 0 0; }
.ng-sr__item { padding: 22px 0; border-bottom: 1px solid var(--sx-hairline); }
.ng-sr__item:last-child { border-bottom: 0; }
.ng-sr__crumb { font: 500 11px/1.2 var(--sx-display); letter-spacing: .08em;
                text-transform: uppercase; color: var(--sx-accent); margin: 0 0 6px; }
.ng-sr__link { font: 700 20px/1.3 var(--sx-display); color: var(--sx-ink); text-decoration: none; }
.ng-sr__link:hover { color: var(--sx-accent); }
.ng-sr__snip { margin: 8px 0 0; font: 400 15px/1.65 var(--sx-body); color: var(--sx-muted); }
.ng-sr__url  { margin: 8px 0 0; font: 400 13px/1.4 var(--sx-body); color: var(--sx-muted); opacity: .8; }

.ng-sr__empty { padding: 40px 0 60px; }
.ng-sr__empty h2 { font: 700 22px/1.3 var(--sx-display); margin: 0 0 10px; }
.ng-sr__empty p  { font: 400 15px/1.7 var(--sx-body); color: var(--sx-muted); margin: 0 0 18px; max-width: 55ch; }
.ng-sr__sugg { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }

.ng-sr__pager { display: flex; gap: 8px; align-items: center; padding: 30px 0 60px; }
.ng-sr__pager a, .ng-sr__pager span {
  min-width: 40px; height: 40px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sx-hairline); border-radius: var(--sx-radius-sm);
  text-decoration: none; color: var(--sx-ink); font: 500 14px/1 var(--sx-body);
}
.ng-sr__pager a:hover { border-color: var(--sx-accent); color: var(--sx-accent); }
.ng-sr__pager [aria-current="page"] { background: var(--sx-ink); border-color: var(--sx-ink); color: #fff; }

.ng-sr__meta { padding: 0 0 40px; font: 400 12px/1.5 var(--sx-body); color: var(--sx-muted); opacity: .75; }

/* --- 4. Theme cascade overrides -----------------------------------------
   Measured in a real browser against the rendered results page, not guessed.
   Only three elements lost; everything else in this sheet already resolves to
   its intended value and is deliberately left alone.

     .ng-sr__title   rendered 64px/800 with a 50px top margin — the v2 display
                     heading rule. Right for a hero, too loud for a results
                     header, and its margin collapsed the gap to the count line.
     .ng-sr__link    rendered #772380, the theme's link colour, not --sx-ink.
     .ng-sr__submit  rendered transparent on #333 — the Neuros rule
                     `.body-container button:not(.customize-partial-edit-shortcut-button)`
                     sits at (0,3,1) and paints a red gradient border through
                     ::after. The trigger dodged this by being an <a>; a form
                     submit cannot, so it is outranked at (0,4,1) instead.

   Specificity is raised rather than !important used, so the :hover and :focus
   rules above still apply. */

.ng-sr .ng-sr__head h1.ng-sr__title {
  font: 700 clamp(32px, 3.4vw, 44px)/1.14 var(--sx-display);
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: var(--sx-ink);
}

.ng-sr .ng-sr__list a.ng-sr__link,
.ng-sr .ng-sr__list a.ng-sr__link:visited { color: var(--sx-ink); }
.ng-sr .ng-sr__list a.ng-sr__link:hover   { color: var(--sx-accent); }

.ng-sr .ng-sr__form button.ng-sr__submit.ng-sr__submit {
  background: var(--ng-cta-fill, #C61073);
  color: #fff;
  border: 0;
  line-height: 1;
}
.ng-sr .ng-sr__form button.ng-sr__submit.ng-sr__submit:hover {
  background: var(--ng-cta-fill-hover, #A50D60);
}
/* The theme draws its button border as a gradient on ::after; ours is a solid
   fill, so the pseudo-element has to go or it paints a red ring over it. */
.ng-sr .ng-sr__form button.ng-sr__submit::after { content: none; display: none; }