/* ui_v2.css — round 2. Based on ui.css (round 1); additive only, never
 * edits vendor/original-shell.css. New in v2: native search-cancel-button
 * hidden + a custom, accessible, ink-coloured clear button (item 4).
 */

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
 * Demo page chrome.
 * ---------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", Helvetica, sans-serif;
}

.bg-demo-topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 18px;
  background: rgba(248, 246, 241, .97);
  border-bottom: 1px solid var(--bg-shell-line);
  backdrop-filter: blur(8px);
}

.bg-demo-topbar__label {
  font: 400 12px/1.4 Roboto, "Helvetica Neue", sans-serif;
  color: var(--bg-shell-muted);
}

/* -------------------------------------------------------------------------
 * Clear ("x") button — item 4. The native ::-webkit-search-cancel-button
 * renders in the browser's own accent colour (not the drawer's ink) and
 * can't carry an aria-label, so it's hidden globally and replaced with a
 * real <button> ui_v2.js inserts next to the input.
 * ---------------------------------------------------------------------- */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.bg-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* Original flex-basis lived on the <input> itself (original-shell.css for
   the drawer, this file for results_v2.html) — flex-basis only applies to
   a DIRECT flex child, and wrapping the input moved that role to the wrap,
   so it's reasserted here at the same specificity as the source rules,
   loaded after them, so it wins the cascade tie. */
.bg-shell-search .bg-search-input-wrap {
  flex: 0 1 234px;
}

.bg-results-form .bg-search-input-wrap {
  flex: 1 1 auto;
}

.bg-search-input-wrap input[type="search"] {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  padding-right: 22px;
}

/* original-shell.css's `.bg-original-elementor .bg-shell-search button`
   rule is necessarily generic (it styles the real "Search" submit button)
   — it also matches THIS button, since it's just another <button> inside
   .bg-shell-search, and sets color/padding/border/background/box-shadow
   with !important plus a gold-on-hover pattern that's backwards from what
   this control needs (confirmed: without this fix the clear button
   rendered gold and 38px tall instead of ink and 20px). Every property the
   original rule touches is re-set here, also !important — but !important
   alone wasn't enough: both are then in the same origin+importance tier,
   where the browser breaks the tie by SPECIFICITY, and original's 2-class-
   plus-tag selector (0,2,1) still beats a plain single-class selector
   (0,1,0) regardless of load order (confirmed: min-height, which original
   leaves non-important, took the fix immediately; color, which original
   marks !important, did not, until specificity was raised here too).
   Repeating the class 3x is a standard, deliberate specificity bump
   ((0,3,0), which beats (0,2,1) on the class/attribute count alone,
   independent of load order) — not a typo. */
.bg-search-clear-btn.bg-search-clear-btn.bg-search-clear-btn {
  position: absolute !important;
  right: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bg-shell-ink) !important;
  font: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  cursor: pointer !important;
}

.bg-search-clear-btn[hidden] {
  display: none !important;
}

.bg-search-clear-btn svg {
  width: 12px;
  height: 12px;
  display: block;
}

/* original also has a :hover/:focus-visible variant at (0,3,1) — same
   specificity-bump reasoning as above, needed again here. */
.bg-search-clear-btn.bg-search-clear-btn.bg-search-clear-btn:hover,
.bg-search-clear-btn.bg-search-clear-btn.bg-search-clear-btn:focus-visible {
  background: transparent !important;
  color: var(--bg-shell-gold) !important;
  outline: none;
}

@media (max-width: 640px) {
  /* 44x44 touch target (WCAG 2.5.5 / Apple HIG minimum) without moving the
     visual glyph off the input's edge. */
  .bg-search-clear-btn.bg-search-clear-btn.bg-search-clear-btn {
    width: 44px !important;
    height: 44px !important;
    right: -12px !important;
  }

  .bg-search-input-wrap input[type="search"] {
    padding-right: 34px;
  }
}

/* -------------------------------------------------------------------------
 * Drawer search results (index_v2.html).
 * ---------------------------------------------------------------------- */

.bg-search-panel {
  margin: 4px 20px 0;
}

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

.bg-shell-nav[hidden] {
  display: none;
}

.bg-search-loading {
  margin: 2px 0 16px;
  font: 400 12px/1.5 Roboto, "Helvetica Neue", sans-serif;
  font-style: italic;
  color: var(--bg-shell-muted);
}

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

.bg-search-notice {
  margin: 0 0 16px;
  font: 400 12px/1.55 Roboto, "Helvetica Neue", sans-serif;
  color: var(--bg-shell-muted);
}

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

.bg-search-listbox {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

.bg-search-group-label {
  margin: 18px 0 6px;
  font: 600 9px/1.2 "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bg-shell-muted);
}

.bg-search-group-label:first-child {
  margin-top: 2px;
}

.bg-search-option {
  margin: 0;
}

.bg-search-option__link {
  display: block;
  padding: 7px 0;
  border-bottom: 1px solid transparent;
  text-decoration: none;
  color: var(--bg-shell-ink);
}

.bg-search-option__name {
  display: block;
  font: 600 16px/1.25 Cormorant, Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
}

.bg-search-option__meta {
  display: block;
  margin-top: 2px;
  font: 400 11px/1.4 "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bg-shell-muted);
}

.bg-search-option[aria-selected="true"] .bg-search-option__link,
.bg-search-option__link:hover,
.bg-search-option__link:focus-visible {
  border-bottom-color: var(--bg-shell-gold);
  outline: none;
}

.bg-search-option[aria-selected="true"] .bg-search-option__name,
.bg-search-option__link:hover .bg-search-option__name,
.bg-search-option__link:focus-visible .bg-search-option__name {
  color: var(--bg-shell-gold);
}

.bg-search-seeall {
  display: inline-block;
  margin: 16px 0 4px;
  color: var(--bg-shell-gold);
  font: 500 11px/1.2 "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

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

.bg-search-seeall:hover,
.bg-search-seeall:focus-visible {
  color: var(--bg-shell-ink);
  border-bottom-color: currentColor;
  outline: none;
}

/* -------------------------------------------------------------------------
 * results_v2.html — full results page.
 * ---------------------------------------------------------------------- */

.bg-results-page {
  min-height: 100vh;
  padding: 40px 24px 80px;
  background: var(--bg-shell-paper);
  color: var(--bg-shell-ink);
}

.bg-results-page__inner {
  max-width: 1040px;
  margin: 0 auto;
}

.bg-results-back {
  display: inline-block;
  margin-bottom: 28px;
  font: 500 11px/1.2 "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bg-shell-muted);
  text-decoration: none;
}

.bg-results-back:hover,
.bg-results-back:focus-visible {
  color: var(--bg-shell-gold);
  outline: none;
}

.bg-results-heading {
  margin: 0 0 28px;
  font: 600 30px/1.2 Cormorant, Georgia, "Times New Roman", serif;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--bg-shell-ink);
}

.bg-results-header {
  margin-bottom: 36px;
}

.bg-results-form {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 480px;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--bg-shell-line);
}

.bg-results-form input[type="search"] {
  height: 39px;
  padding: 0 2px;
  border: 0;
  border-bottom: 1px solid #79756e;
  border-radius: 0;
  background: transparent;
  color: var(--bg-shell-ink);
  box-shadow: none;
  font: 300 15px/39px Roboto, "Helvetica Neue", sans-serif;
}

.bg-results-form input[type="search"]:focus {
  border-bottom-color: var(--bg-shell-gold);
  outline: none;
}

.bg-results-form button {
  min-height: 38px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--bg-shell-gold);
  box-shadow: none;
  font: 500 11px/1.2 "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}

.bg-results-form button:hover,
.bg-results-form button:focus-visible {
  color: var(--bg-shell-ink);
  outline: none;
}

.bg-results-notice,
.bg-results-empty {
  margin: 0 0 28px;
  font: 400 13px/1.6 Roboto, "Helvetica Neue", sans-serif;
  color: var(--bg-shell-muted);
}

.bg-results-notice[hidden],
.bg-results-empty[hidden] {
  display: none;
}

.bg-results-section[hidden] {
  display: none;
}

.bg-results-section {
  margin: 0 0 44px;
}

.bg-results-section__title {
  margin: 0 0 18px;
  font: 600 11px/1.2 "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--bg-shell-muted);
  border-bottom: 1px solid var(--bg-shell-line);
  padding-bottom: 12px;
}

.bg-results-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.bg-results-card {
  margin: 0;
}

.bg-results-card__link {
  display: block;
  padding: 16px 0;
  border-top: 1px solid var(--bg-shell-line);
  text-decoration: none;
  color: var(--bg-shell-ink);
}

.bg-results-card__name {
  display: block;
  font: 600 18px/1.25 Cormorant, Georgia, "Times New Roman", serif;
}

.bg-results-card__meta {
  display: block;
  margin-top: 4px;
  font: 400 11px/1.4 "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bg-shell-muted);
}

.bg-results-card__link:hover .bg-results-card__name,
.bg-results-card__link:focus-visible .bg-results-card__name {
  color: var(--bg-shell-gold);
}

.bg-results-card__link:focus-visible {
  outline: none;
}

.bg-results-articles {
  list-style: none;
  margin: 0;
  padding: 0;
}

.bg-results-article {
  margin: 0;
}

.bg-results-article__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--bg-shell-line);
  text-decoration: none;
  color: var(--bg-shell-ink);
  font: 400 15px/1.4 Roboto, "Helvetica Neue", sans-serif;
}

.bg-results-article__type {
  flex: 0 0 auto;
  font: 400 10px/1.6 "Helvetica Neue", Helvetica, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bg-shell-muted);
}

.bg-results-article__link:hover,
.bg-results-article__link:focus-visible {
  color: var(--bg-shell-gold);
  outline: none;
}

@media (max-width: 640px) {
  .bg-results-page {
    padding: 24px 18px 56px;
  }

  .bg-results-grid {
    grid-template-columns: 1fr;
  }
}
/* Live search.php keeps its heading and shell. Only the result area is enhanced. */
html.bg-site-search-js .bg-card-grid > :not(.bg-site-search-results),
html.bg-site-search-js .bg-pagination { display:none !important; }
.bg-site-search-results { grid-column:1 / -1; min-width:0; width:100%; }
.bg-site-search-results [hidden], .bg-search-panel[hidden], .bg-search-clear-btn[hidden] { display:none !important; }
/* The base clear-button rule uses !important at specificity 0,3,0. */
.bg-search-clear-btn.bg-search-clear-btn.bg-search-clear-btn[hidden] { display:none !important; }