/* ============================================================
 * BuscAqui — institutional palette + wordmark overrides
 * Loads AFTER sxng-ltr.min.css / sxng-rtl.min.css to override colors.
 * Câmara Municipal de Lagoa da Prata / MG
 * ============================================================ */

:root,
.buscaqui {
  /* Paleta institucional (do brasão da Câmara) */
  --ba-green:       #0F5C3F;   /* mata atlântica / cerrado mineiro */
  --ba-green-deep:  #0a4630;
  --ba-navy:        #1A2456;   /* lago do brasão */
  --ba-navy-deep:   #0F1840;
  --ba-gold:        #F5B82E;   /* sol */
  --ba-mint:        #2BA46F;
  --ba-silver:      #A8AEB8;   /* ponte */
  --ba-silver-2:    #C9CDD4;
  --ba-paper:       #FBF8F1;
  --ba-paper-2:     #F2EEE3;
  --ba-ink:         #14171F;

  /* Tokens semânticos */
  --ba-bg:          var(--ba-paper);
  --ba-fg:          var(--ba-ink);
  --ba-fg-muted:    rgba(20, 23, 31, 0.62);
  --ba-accent:      var(--ba-green);
  --ba-accent-fg:   var(--ba-paper);
  --ba-border:      rgba(15, 92, 63, 0.18);
  --ba-card-bg:     #ffffff;
  --ba-card-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 4px 14px rgba(15,92,63,0.06);

  /* Glyph variant colors (light theme defaults) */
  --ba-glyph-tri:    var(--ba-green);
  --ba-glyph-river:  var(--ba-navy);
  --ba-glyph-bridge: var(--ba-silver);
  --ba-glyph-sun:    var(--ba-gold);

  /* ---- Design tokens ------------------------------------------ */
  /* Spacing — strict 8px grid (4px half-step for icon gaps only) */
  --ba-s0: 4px;
  --ba-s1: 8px;
  --ba-s2: 16px;
  --ba-s3: 24px;
  --ba-s4: 32px;
  --ba-s5: 40px;
  --ba-s6: 48px;
  --ba-s7: 64px;

  /* Radius */
  --ba-r-sm:  8px;
  --ba-r-md:  12px;
  --ba-r-pill: 999px;

  /* Motion — subtle, consistent easing */
  --ba-ease:     cubic-bezier(.4, 0, .2, 1);
  --ba-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ba-dur-fast: 120ms;
  --ba-dur:      170ms;

  /* Hit target (WCAG / mobile) */
  --ba-tap: 44px;

  /* Layout */
  --ba-bar-max: 44rem;
}

/* ------------------------------------------------------------ */
/* DARK theme overrides                                          */
/* SearXNG's "Theme style" has 4 values: auto, light, dark,      */
/* black. Both dark AND black must get the dark palette, else    */
/* the page is dark but the glyph keeps its light (green) color. */
/* ------------------------------------------------------------ */
.theme-dark.buscaqui,
.theme-dark .buscaqui,
.theme-black.buscaqui,
.theme-black .buscaqui {
  --ba-bg:           #0E1330;   /* navy sólido, mais escuro (sem gradiente) */
  --ba-fg:           var(--ba-paper);
  --ba-fg-muted:     rgba(251, 248, 241, 0.62);
  --ba-accent:       var(--ba-gold);
  --ba-accent-fg:    #0E1330;
  --ba-border:       rgba(251, 248, 241, 0.16);
  --ba-card-bg:      #161C40;
  --ba-card-shadow:  0 4px 18px rgba(0,0,0,0.35);

  --ba-glyph-tri:    var(--ba-paper);
  --ba-glyph-river:  #7BA7D9;
  --ba-glyph-bridge: #E5E8ED;
  --ba-glyph-sun:    var(--ba-gold);
}
@media (prefers-color-scheme: dark) {
  .theme-auto.buscaqui {
    --ba-bg:           #0E1330;
    --ba-fg:           var(--ba-paper);
    --ba-fg-muted:     rgba(251, 248, 241, 0.62);
    --ba-accent:       var(--ba-gold);
    --ba-accent-fg:    #0E1330;
    --ba-border:       rgba(251, 248, 241, 0.16);
    --ba-card-bg:      #161C40;
    --ba-card-shadow:  0 4px 18px rgba(0,0,0,0.35);
    --ba-glyph-tri:    var(--ba-paper);
    --ba-glyph-river:  #7BA7D9;
    --ba-glyph-bridge: #E5E8ED;
    --ba-glyph-sun:    var(--ba-gold);
  }
}

/* ------------------------------------------------------------ */
/* SearXNG design-token remap. Instead of fighting every          */
/* component selector, point SearXNG's own --color-* tokens at     */
/* our palette. These --ba-* values already switch per theme, so   */
/* buttons, selects, input fields, the preferences group bands and  */
/* engine descriptions all become brand-correct + high-contrast in  */
/* light AND dark/black at once. html.buscaqui out-specifies        */
/* SearXNG's :root / .theme-dark token definitions.                 */
/* ------------------------------------------------------------ */
html.buscaqui {
  --color-btn-background:                 var(--ba-accent);
  --color-btn-font:                       var(--ba-accent-fg);
  --color-toolkit-select-background:      var(--ba-card-bg);
  --color-toolkit-select-background-hover:var(--ba-card-bg);
  --color-toolkit-select-border:          var(--ba-border);
  --color-toolkit-input-text-font:        var(--ba-fg);
  --color-search-font:                    var(--ba-fg);
  --color-settings-table-group-background:var(--ba-card-bg);
  --color-settings-engine-description-font:var(--ba-fg-muted);
}
/* Preferences: readable group band + properly-bordered controls */
html.buscaqui #main_preferences div.pref-group {
  color: var(--ba-fg);
  border-radius: 8px;
  border: 1px solid var(--ba-border);
}
html.buscaqui #main_preferences select,
html.buscaqui #main_preferences input[type=text] {
  color: var(--ba-fg) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: 8px !important;
}
html.buscaqui #main_preferences input[type=submit],
html.buscaqui #main_preferences .button {
  background: var(--ba-accent) !important;
  color: var(--ba-accent-fg) !important;
  border-radius: 10px !important;
}
html.buscaqui #main_preferences input[type=submit]:hover,
html.buscaqui #main_preferences .button:hover { filter: brightness(1.06); }

/* ------------------------------------------------------------ */
/* Overflow root cause: SearXNG ships NO global border-box and     */
/* uses width:100% widely (main, filters, etc.), so borders/padding */
/* spill past the viewport → a stray horizontal scrollbar (which    */
/* with body{height:100vh} also forces a vertical one). Fix it at   */
/* the source: border-box for the whole theme + clip the x axis     */
/* (clip, not hidden — no scroll-container side effects), and kill   */
/* the 10.6rem left margin upstream puts on the results filters.    */
/* ------------------------------------------------------------ */
html.buscaqui *,
html.buscaqui *::before,
html.buscaqui *::after { box-sizing: border-box; }

html.buscaqui,
html.buscaqui body {
  max-width: 100%;
  overflow-x: clip;
}
html.buscaqui #main_results .search_filters {
  margin-left: 0 !important;
  margin-right: 0 !important;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--ba-s1);
}

/* ------------------------------------------------------------ */
/* Base body + typography                                        */
/* ------------------------------------------------------------ */
html.buscaqui,
html.buscaqui body {
  background: var(--ba-bg);
  color: var(--ba-fg);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}
/* Fundo sólido — sem gradientes (dark fica navy escuro e limpo) */
html.buscaqui body {
  background: var(--ba-bg) !important;
  background-image: none !important;
}

/* ------------------------------------------------------------ */
/* BuscAqui wordmark — replaces searxng-wordmark.min.svg.         */
/* The SVG is included INLINE (homepage h1 + #search_logo on      */
/* result pages), so these classes style it directly and it       */
/* adapts to light/dark automatically.                            */
/* ------------------------------------------------------------ */
.buscaqui .buscaqui-wm-svg .bawm-text   { fill: var(--ba-fg); }
.buscaqui .buscaqui-wm-svg .bawm-tri    { stroke: var(--ba-glyph-tri); }
.buscaqui .buscaqui-wm-svg .bawm-river  { fill: var(--ba-glyph-river); }
.buscaqui .buscaqui-wm-svg .bawm-bridge { fill: var(--ba-glyph-bridge); }
.buscaqui .buscaqui-wm-svg .bawm-sun    { fill: var(--ba-glyph-sun); }

/* Homepage logo. SearXNG's compiled CSS does THREE things we must
   defeat (exact upstream rules):
     .index .title { background:url(./img/searxng.png); min-height:4rem }
     .index h1     { visibility:hidden; font-size:4em }
   So the "SearXNG" PNG is the .title DIV's background and the <h1>
   (which holds our inline SVG) is visibility:hidden. We kill the
   background on .title and force the h1/SVG visible. html.buscaqui +
   id/class anchors keep our specificity above theirs. */
html.buscaqui .index .title {
  background:       none !important;
  background-image: none !important;
  min-height:       0 !important;
  margin:           0 auto 24px !important;
}
html.buscaqui .index h1.buscaqui-home-title,
html.buscaqui .index .title h1.buscaqui-home-title {
  visibility:      visible !important;
  background:      none !important;
  text-indent:     0 !important;
  width:           auto !important;
  height:          auto !important;
  overflow:        visible !important;
  margin:          0 !important;
  padding:         0 !important;
  line-height:     1 !important;
  font-size:       0 !important;
  display:         block !important;
}
html.buscaqui .index .buscaqui-home-title svg.buscaqui-wm-svg {
  visibility: visible !important;
  display: block !important;
  width: clamp(200px, 32vw, 380px) !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* Header logo on result + page_with_header pages (#search_logo holds
   the same inline SVG). Upstream: #search_logo svg{width:30px;height:30px}
   — too small; and on header pages with no constraint it balloons.
   Pin it with !important above the id rule. */
html.buscaqui #search_logo {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
html.buscaqui #search_logo svg.buscaqui-wm-svg {
  flex: 0 0 auto !important;
  display: block !important;
  width: 128px !important;
  max-width: 128px !important;
  height: auto !important;
  margin: 0 !important;
}

.buscaqui-tagline {
  margin: var(--ba-s2) 0 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ba-fg-muted);
  text-align: center;
}

/* ------------------------------------------------------------ */
/* Homepage layout. body{height:100vh} is FIXED (not min-height)   */
/* and upstream sets #main_index{margin-top:26vh}. Our taller       */
/* wordmark + extra padding pushed total past 100vh → a vertical    */
/* scrollbar, which then shrank the viewport and triggered a        */
/* horizontal one too. Trim the top margin + padding so the home    */
/* fits one screen again.                                           */
/* ------------------------------------------------------------ */
html.buscaqui #main_index {
  margin-top: 12vh !important;
}
.buscaqui .index {
  text-align: center;
  padding: 0 16px;
  max-width: 100%;
}
html.buscaqui .index .title {
  margin: 0 auto 20px !important;
}

/* ------------------------------------------------------------ */
/* Search box (.search_box / #q / #send_search / #clear_search)  */
/* ------------------------------------------------------------ */
/* Upstream centres the bar via .search_box{max-width:44rem;
   display:inline-flex} inside .index{text-align:center}. We force
   display:flex, so we must re-add the width clamp + auto margins,
   otherwise the bar stretches full-width and looks left-aligned. */
/* SearXNG ships no global border-box, so width:100% + our borders/
   padding overflow the viewport. Force border-box on every box we
   stretch to 100%. */
html.buscaqui .index #search,
html.buscaqui #search {
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 auto !important;
  text-align: center !important;
}
.buscaqui .search_box {
  background: var(--ba-card-bg) !important;
  border: 1.5px solid var(--ba-border) !important;
  border-radius: 999px !important;
  box-shadow: var(--ba-card-shadow);
  /* position:relative makes the box the containing block for the
     absolute .autocomplete so it anchors below it (no eclipse).
     overflow MUST stay visible or the dropdown gets clipped. */
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 44rem !important;
  margin: 0 auto !important;
}
.buscaqui .search_box #q { flex: 1 1 auto !important; }
.buscaqui .search_box:focus-within {
  border-color: var(--ba-accent) !important;
  box-shadow: 0 0 0 4px rgba(15,92,63,0.08), var(--ba-card-shadow);
}
.theme-dark.buscaqui .search_box:focus-within,
.theme-black.buscaqui .search_box:focus-within,
.theme-auto.buscaqui .search_box:focus-within {
  box-shadow: 0 0 0 4px rgba(245,184,46,0.18), var(--ba-card-shadow);
}
.buscaqui #q {
  background: transparent !important;
  color: var(--ba-fg) !important;
  font: 500 16px/1.4 "Plus Jakarta Sans", system-ui, sans-serif !important;
  padding: var(--ba-s2) calc(var(--ba-s2) + var(--ba-s0)) !important;
}
.buscaqui #q::placeholder { color: var(--ba-fg-muted); }

.buscaqui #send_search {
  background: var(--ba-accent) !important;
  color: var(--ba-accent-fg) !important;
  border: none !important;
  border-radius: 50% !important;
  width: var(--ba-tap) !important;
  height: var(--ba-tap) !important;
  min-width: var(--ba-tap) !important;
  padding: 0 !important;
  margin: var(--ba-s0) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.buscaqui #send_search:hover { filter: brightness(1.05); transform: scale(1.04); }
.buscaqui #send_search:active { transform: scale(.97); }
/* Upstream slides the button LEFT over the text when the field is
   empty (#q:placeholder-shown~#send_search{margin-right:2.6rem}) and
   on focus. Pin the button so the "s"/placeholder never tucks behind
   the lupa, and reserve room inside the pill for it. */
html.buscaqui #q:placeholder-shown ~ #send_search,
html.buscaqui #main_results #q:placeholder-shown ~ #send_search,
html.buscaqui #search_view:focus-within .search_box #send_search {
  margin: var(--ba-s0) !important;
}
.buscaqui #q {
  padding-right: var(--ba-s3) !important;
}

/* #clear_search: transparent (kills the stray yellow/accent bar
   that appeared between the input and the round search button) */
.buscaqui #clear_search {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--ba-fg-muted) !important;
  width: auto !important;
  padding: 0 var(--ba-s1) !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
}
.buscaqui #clear_search:hover { color: var(--ba-fg) !important; }

/* Autocomplete dropdown. Upstream styles the OPEN state via
   .autocomplete.open{background:var(--color-autocomplete-background)}.
   Our old rule forced background:transparent → suggestions rendered as
   bare text floating over the bar. Style it as a real popover instead. */
.buscaqui .search_box .autocomplete:not(.open) {
  border: none !important;
  background: transparent !important;
}
html.buscaqui .autocomplete.open {
  /* Anchor to the BOTTOM of the (now position:relative) .search_box so
     it never eclipses the input. Upstream margin-top:3.5rem placed it
     over the field — zero it and use top:100% instead. */
  position: absolute !important;
  top: calc(100% + var(--ba-s1)) !important;
  left: 0 !important;
  right: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  background-color: var(--ba-card-bg) !important;
  color: var(--ba-fg) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-r-md) !important;
  box-shadow: var(--ba-card-shadow) !important;
  z-index: 5000 !important;
  overflow: hidden !important;
}
html.buscaqui .autocomplete > ul > li {
  padding: var(--ba-s1) var(--ba-s2) !important;
  color: var(--ba-fg);
  transition: background var(--ba-dur-fast) var(--ba-ease),
              color var(--ba-dur-fast) var(--ba-ease);
}
html.buscaqui .autocomplete > ul > li.active,
html.buscaqui .autocomplete > ul > li:hover,
html.buscaqui .autocomplete > ul > li:focus {
  background-color: var(--ba-accent) !important;
  color: var(--ba-accent-fg) !important;
}

/* ------------------------------------------------------------ */
/* Results-page header — true 3-column grid.                       */
/* Upstream uses an asymmetric grid (3rem 1fr + padding-left:7rem)  */
/* so the bar never page-centers. Replace with                     */
/*   [ 1fr  |  minmax(0,44rem)  |  1fr ]                            */
/* → logo centred in the LEFT column, search + categories dead-     */
/* centre of the PAGE (equal 1fr gutters), right column free for    */
/* the absolute #links_on_top (Sobre/Preferências).                 */
/* ------------------------------------------------------------ */
html.buscaqui #main_results #search_header {
  display: grid !important;
  grid-template-columns: 1fr minmax(0, var(--ba-bar-max)) 1fr !important;
  grid-template-areas:
    "logo search rightcol"
    "logo categories rightcol" !important;
  align-items: center !important;
  column-gap: var(--ba-s3) !important;
  row-gap: var(--ba-s1) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: var(--ba-s2) var(--ba-s3) var(--ba-s1) !important;
}
html.buscaqui #main_results #search_logo {
  grid-area: logo !important;
  justify-self: center !important;
  align-self: center !important;
  padding: 0 !important;
}
html.buscaqui #main_results #search_view {
  grid-area: search !important;
  justify-self: center !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--ba-bar-max) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
html.buscaqui #main_results #categories,
html.buscaqui #main_results #categories_container {
  grid-area: categories !important;
  justify-self: center !important;
  width: max-content !important;
  max-width: 100% !important;
  margin: var(--ba-s1) auto 0 !important;
  text-align: center !important;
}

/* Search-box focus: upstream turns #search_view into a full-screen
   grey overlay (background:var(--color-search-background); position:
   absolute; 100%x100%) and strips the pill's radius. Neutralise it —
   keep the pill exactly as-is, no grey box. */
html.buscaqui #search_view:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  background-color: transparent !important;
  z-index: auto !important;
  top: auto !important;
  display: block !important;
}
html.buscaqui #search_view:focus-within .search_box {
  width: 100% !important;
  border: 1.5px solid var(--ba-accent) !important;
  border-radius: var(--ba-r-pill) !important;
  box-shadow: 0 0 0 4px rgba(15, 92, 63, .08), var(--ba-card-shadow) !important;
}
.theme-dark.buscaqui #search_view:focus-within .search_box,
.theme-black.buscaqui #search_view:focus-within .search_box,
.theme-auto.buscaqui #search_view:focus-within .search_box {
  box-shadow: 0 0 0 4px rgba(245, 184, 46, .18), var(--ba-card-shadow) !important;
}

/* Filter selects (Detectar.../De qualquer dia/Pesquisa segura):
   upstream forces .search_filters select{background-color:inherit}
   and :hover/:focus{color:var(--color-base-font)} → dark text on the
   navy bg in Dark/Black. Force our readable fg there (light only is
   left untouched — its dark-on-light is already fine). */
.theme-dark.buscaqui .search_filters select,
.theme-black.buscaqui .search_filters select,
.theme-dark.buscaqui #main_results select,
.theme-black.buscaqui #main_results select,
.theme-dark.buscaqui .search_filters select:hover,
.theme-dark.buscaqui .search_filters select:focus,
.theme-black.buscaqui .search_filters select:hover,
.theme-black.buscaqui .search_filters select:focus {
  color: var(--ba-fg) !important;
}
.theme-dark.buscaqui select option,
.theme-black.buscaqui select option {
  color: var(--ba-fg) !important;
  background-color: var(--ba-card-bg) !important;
}

/* ------------------------------------------------------------ */
/* Category tabs (categories.html)                               */
/* ------------------------------------------------------------ */
.buscaqui #categories,
.buscaqui .category {
  --tab-bg: transparent;
  --tab-fg: var(--ba-fg-muted);
  --tab-border: var(--ba-border);
}
.buscaqui .category label,
.buscaqui label.category_button {
  background: transparent !important;
  color: var(--ba-fg-muted) !important;
  border: 1px solid var(--ba-border) !important;
  border-radius: var(--ba-r-pill) !important;
  padding: var(--ba-s1) var(--ba-s2) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: background var(--ba-dur) var(--ba-ease),
              color var(--ba-dur) var(--ba-ease),
              border-color var(--ba-dur) var(--ba-ease) !important;
}
.buscaqui .category label:hover,
.buscaqui label.category_button:hover {
  border-color: var(--ba-accent) !important;
  color: var(--ba-fg) !important;
}
.buscaqui .category input[type=checkbox]:checked + label,
.buscaqui .category label.checked {
  background: var(--ba-accent) !important;
  color: var(--ba-accent-fg) !important;
  border-color: var(--ba-accent) !important;
  font-weight: 700 !important;
}

/* ------------------------------------------------------------ */
/* Quick links (home) — pill buttons under the search box,        */
/* populated by buscaqui-quicklinks.js from buscaqui-links.json.   */
/* ------------------------------------------------------------ */
.buscaqui .ba-quicklinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ba-s1);
  width: 100%;
  max-width: 44rem;
  margin: var(--ba-s3) auto 0;
  padding: 0 var(--ba-s2);
  box-sizing: border-box;
}
.buscaqui .ba-quicklinks[hidden] { display: none !important; }
.buscaqui .ba-quicklinks a {
  display: inline-flex;
  align-items: center;
  gap: var(--ba-s0);
  padding: var(--ba-s1) var(--ba-s2);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--ba-fg-muted) !important;
  background: transparent;
  border: 1px solid var(--ba-border);
  border-radius: var(--ba-r-pill);
  text-decoration: none;
  transition: background var(--ba-dur) var(--ba-ease),
              color var(--ba-dur) var(--ba-ease),
              border-color var(--ba-dur) var(--ba-ease),
              transform var(--ba-dur-fast) var(--ba-ease);
}
.buscaqui .ba-quicklinks a:hover,
.buscaqui .ba-quicklinks a:focus-visible {
  color: var(--ba-accent-fg) !important;
  background: var(--ba-accent);
  border-color: var(--ba-accent);
  transform: translateY(-1px);
}
.buscaqui .ba-quicklinks a.ba-primary {
  color: var(--ba-accent-fg) !important;
  background: var(--ba-accent);
  border-color: var(--ba-accent);
  font-weight: 700;
}
@media (max-width: 640px) {
  .buscaqui .ba-quicklinks { margin-top: var(--ba-s2); gap: var(--ba-s0); }
  .buscaqui .ba-quicklinks a { font-size: 12px; padding: var(--ba-s0) var(--ba-s1); }
}

/* ------------------------------------------------------------ */
/* Top nav links                                                  */
/* ------------------------------------------------------------ */
.buscaqui #links_on_top {
  padding: var(--ba-s2) var(--ba-s3);
}
.buscaqui #links_on_top a {
  color: var(--ba-fg-muted) !important;
  font-size: 12.5px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--ba-s0);
  text-decoration: none;
  border-radius: var(--ba-r-sm);
  padding: var(--ba-s1) var(--ba-s2);
  transition: background var(--ba-dur) var(--ba-ease),
              color var(--ba-dur) var(--ba-ease);
}
.buscaqui #links_on_top a:hover {
  color: var(--ba-fg) !important;
  background: rgba(15,92,63,0.06);
}
.theme-dark.buscaqui #links_on_top a:hover,
.theme-black.buscaqui #links_on_top a:hover,
.theme-auto.buscaqui #links_on_top a:hover {
  background: rgba(251,248,241,0.08);
}

/* ------------------------------------------------------------ */
/* Result links (results.html, result_templates/*.html)          */
/* ------------------------------------------------------------ */
.buscaqui article.result h3 a,
.buscaqui article.result a.title,
.buscaqui .result h3 a { color: var(--ba-accent) !important; }
.theme-dark.buscaqui article.result h3 a,
.theme-black.buscaqui article.result h3 a,
.theme-auto.buscaqui article.result h3 a { color: var(--ba-gold) !important; }

.buscaqui article.result .url_wrapper,
.buscaqui article.result cite { color: var(--ba-fg-muted) !important; }

/* Comfortable result density on the 8px grid */
.buscaqui article.result {
  margin-bottom: var(--ba-s4) !important;
  padding: var(--ba-s1) 0 !important;
  line-height: 1.5;
}
.buscaqui article.result h3 { margin: 0 0 var(--ba-s0) !important; }
.buscaqui article.result h3 a { text-decoration: none; }
.buscaqui article.result h3 a:hover { text-decoration: underline; }
.buscaqui article.result p,
.buscaqui article.result .content { margin: var(--ba-s0) 0 0 !important; }

/* ------------------------------------------------------------ */
/* Footer                                                         */
/* ------------------------------------------------------------ */
.buscaqui footer {
  color: var(--ba-fg-muted);
  font-size: 11.5px;
  padding: var(--ba-s3);
  text-align: center;
  border-top: 1px solid var(--ba-border);
}
.buscaqui footer a {
  color: var(--ba-fg-muted) !important;
  text-decoration: none;
  border-bottom: 1px dotted var(--ba-border);
  transition: color var(--ba-dur) var(--ba-ease);
}
.buscaqui footer a:hover { color: var(--ba-fg) !important; }

/* ------------------------------------------------------------ */
/* Selection                                                     */
/* ------------------------------------------------------------ */
.buscaqui ::selection {
  background: var(--ba-accent);
  color: var(--ba-accent-fg);
}

/* ------------------------------------------------------------ */
/* Interactions — one subtle, consistent easing everywhere        */
/* ------------------------------------------------------------ */
html.buscaqui a,
html.buscaqui button,
html.buscaqui .button,
html.buscaqui select,
html.buscaqui input[type=submit],
html.buscaqui summary,
html.buscaqui .search_box {
  transition: background var(--ba-dur) var(--ba-ease),
              color var(--ba-dur) var(--ba-ease),
              border-color var(--ba-dur) var(--ba-ease),
              box-shadow var(--ba-dur) var(--ba-ease),
              filter var(--ba-dur) var(--ba-ease),
              transform var(--ba-dur-fast) var(--ba-ease);
}
html.buscaqui select:focus,
html.buscaqui input:focus-visible,
html.buscaqui a:focus-visible,
html.buscaqui button:focus-visible {
  outline: 2px solid var(--ba-accent);
  outline-offset: 2px;
}
/* Dropdowns / collapsibles open with a soft ease */
html.buscaqui details > summary { cursor: pointer; }
html.buscaqui .autocomplete.open,
html.buscaqui details[open] > *:not(summary) {
  animation: ba-fade var(--ba-dur) var(--ba-ease-out);
}
@keyframes ba-fade {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  html.buscaqui *,
  html.buscaqui *::before,
  html.buscaqui *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------ */
/* Responsive — mobile-first refinements                          */
/* ------------------------------------------------------------ */
/* Below ~1024px the desktop 3-col header (1fr | 44rem | 1fr) can no
   longer fit the centred bar PLUS the absolute #links_on_top gutters,
   so the gear/info icons land on the bar at every INTERMEDIATE width —
   not just phones. Collapse to a safe single column and pin the links
   above the bar for the whole range. */
@media (max-width: 1024px) {
  html.buscaqui #links_on_top {
    padding: var(--ba-s0) var(--ba-s1);
    top: var(--ba-s1) !important;
    right: var(--ba-s1) !important;
    z-index: 6000 !important;
    gap: var(--ba-s0);
  }
  html.buscaqui #main_results #search_header {
    grid-template-columns: 1fr !important;
    grid-template-areas: "logo" "search" "categories" !important;
    column-gap: 0 !important;
    padding: 2.75rem var(--ba-s3) 0 !important;
  }
  html.buscaqui #main_results #search_logo { margin-top: var(--ba-s0) !important; }
  html.buscaqui #main_results #categories,
  html.buscaqui #main_results #categories_container {
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    text-align: left !important;
  }
}

/* Phone-specific tightening */
@media (max-width: 640px) {
  html.buscaqui #main_index { margin-top: var(--ba-s7) !important; }
  html.buscaqui .index { padding: 0 var(--ba-s2); }
  html.buscaqui .index .buscaqui-home-title svg.buscaqui-wm-svg {
    width: clamp(180px, 64vw, 300px) !important;
  }
  .buscaqui-tagline { font-size: 11px; letter-spacing: .12em; }
  html.buscaqui #main_results #search_header { padding: 2.75rem var(--ba-s1) 0 !important; }
  html.buscaqui #main_results #search_logo svg.buscaqui-wm-svg { width: 104px !important; }
  html.buscaqui article.result { margin-bottom: var(--ba-s3) !important; }
  html.buscaqui #send_search { width: var(--ba-tap) !important; height: var(--ba-tap) !important; }
}
@media (max-width: 400px) {
  html.buscaqui .index .buscaqui-home-title svg.buscaqui-wm-svg {
    width: clamp(160px, 70vw, 240px) !important;
  }
}