/* RaveWebSearch theme override — part of the Rave Search family
 * (see Rave Book Search / Rave Game Search). Same dark surface system and
 * text hierarchy as the rest of the family; only --primary and the logo
 * differ between products. This file intentionally does not touch layout,
 * markup, or component structure — SearXNG's own UI stays as-is.
 *
 * Loaded after sxng-ltr.min.css / sxng-rtl.min.css, targeting the same
 * selectors SearXNG itself uses (:root, :root.theme-dark, :root.theme-black)
 * so every theme preference resolves to the same Rave-dark palette — the
 * family design system treats light mode as out of scope, not a variant.
 */

:root,
:root.theme-dark,
:root.theme-black {
  /* Base */
  --color-base-font: #eeeef2;
  --color-base-font-rgb: 238, 238, 242;
  --color-base-background: #111114;
  --color-base-background-mobile: #111114;
  --color-url-font: #77778a;
  --color-url-visited-font: #44444f;

  /* Header / Footer — flattened to match the page background (no two-tone band),
     matching Rave Book Search's single-surface dark background. */
  --color-header-background: #111114;
  --color-header-border: transparent;
  --color-footer-background: #111114;
  --color-footer-border: transparent;

  /* Sidebar */
  --color-sidebar-border: rgba(255, 255, 255, 0.12);
  --color-sidebar-font: #eeeef2;
  --color-sidebar-background: #1a1a20;

  /* Back to top */
  --color-backtotop-font: #77778a;
  --color-backtotop-border: rgba(255, 255, 255, 0.07);
  --color-backtotop-background: #1a1a20;

  /* Buttons */
  --color-btn-background: #f5c83f;
  --color-btn-font: #111114;
  --color-show-btn-background: #222229;
  --color-show-btn-font: #eeeef2;

  /* Search input */
  --color-search-border: #f5c83f;
  --color-search-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  --color-search-background: #1a1a20;
  --color-search-font: #eeeef2;
  --color-search-background-hover: #ffd766;

  /* Categories */
  --color-categories-item-selected-font: #f5c83f;
  --color-categories-item-border-selected: #f5c83f;

  /* Autocomplete */
  --color-autocomplete-font: #eeeef2;
  --color-autocomplete-border: rgba(255, 255, 255, 0.12);
  --color-autocomplete-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
  --color-autocomplete-background: #1a1a20;
  --color-autocomplete-background-hover: #222229;

  /* Answer */
  --color-answer-font: #eeeef2;
  --color-answer-background: #1a1a20;
  --color-result-keyvalue-col-table: #1a1a20;
  --color-result-keyvalue-odd: #1a1a20;
  --color-result-keyvalue-even: #222229;

  /* Results */
  --color-result-background: #1a1a20;
  --color-result-border: rgba(255, 255, 255, 0.07);
  --color-result-url-font: #77778a;
  --color-result-vim-selected: #222229;
  --color-result-vim-arrow: #f5c83f;
  --color-result-description-highlight-font: #eeeef2;
  --color-result-link-font: #eeeef2;
  --color-result-link-font-highlight: #f5c83f;
  --color-result-link-visited-font: #44444f;
  --color-result-publishdate-font: #44444f;
  --color-result-engines-font: #77778a;
  --color-result-search-url-border: rgba(255, 255, 255, 0.07);
  --color-result-search-url-font: #77778a;

  /* Images */
  --color-result-image-span-font: #eeeef2;
  --color-result-image-span-font-selected: #111114;
  --color-result-image-background: #222229;

  /* Settings */
  --color-settings-tr-hover: #222229;
  --color-settings-engine-description-font: #77778a;
  --color-settings-table-group-background: #1a1a20;

  /* Detail modal */
  --color-result-detail-font: #eeeef2;
  --color-result-detail-label-font: #77778a;
  --color-result-detail-background: #1a1a20;
  --color-result-detail-hr: rgba(255, 255, 255, 0.12);
  --color-result-detail-link: #f5c83f;

  /* Toolkit */
  --color-toolkit-badge-font: #111114;
  --color-toolkit-badge-background: #f5c83f;
  --color-toolkit-kbd-font: #111114;
  --color-toolkit-kbd-background: #f5c83f;
  --color-toolkit-dialog-border: rgba(255, 255, 255, 0.12);
  --color-toolkit-dialog-background: #1a1a20;
  --color-toolkit-tabs-label-border: #1a1a20;
  --color-toolkit-tabs-section-border: rgba(255, 255, 255, 0.07);
  --color-toolkit-select-background: #222229;
  --color-toolkit-select-border: rgba(255, 255, 255, 0.12);
  --color-toolkit-select-background-hover: #2a2a32;
  --color-toolkit-input-text-font: #eeeef2;
  --color-toolkit-checkbox-onoff-off-background: #222229;
  --color-toolkit-checkbox-onoff-on-background: #222229;
  --color-toolkit-checkbox-onoff-on-mark-background: #f5c83f;
  --color-toolkit-checkbox-onoff-on-mark-color: #111114;
  --color-toolkit-checkbox-onoff-off-mark-background: #44444f;
  --color-toolkit-checkbox-onoff-off-mark-color: #111114;
  --color-toolkit-checkbox-label-background: #222229;
  --color-toolkit-checkbox-label-border: rgba(255, 255, 255, 0.07);
  --color-toolkit-checkbox-input-border: #f5c83f;
  --color-toolkit-engine-tooltip-border: rgba(255, 255, 255, 0.12);
  --color-toolkit-engine-tooltip-background: #1a1a20;
  --color-doc-code: #77778a;
  --color-doc-code-background: #222229;

  /* Misc */
  --color-bar-chart-primary: #f5c83f;
  --color-bar-chart-secondary: #4caf7d;
  --color-image-resolution-background: rgba(0, 0, 0, 0.5);
  --color-image-resolution-font: #eeeef2;
  --color-loading-indicator-gap: #f5c83f;
  --color-line-number: #44444f;
  --color-favicon-background-color: #222229;
  --color-favicon-border-color: rgba(255, 255, 255, 0.12);
}

/* True-black variant keeps upstream's darker base for OLED-friendly use */
:root.theme-black {
  --color-base-background: #000;
  --color-base-background-mobile: #000;
  --color-header-background: #000;
  --color-footer-background: #000;
  --color-sidebar-background: #000;
}

/* ---------------------------------------------------------------------
 * Typography — Rave family uses Roboto, weights 400/500 only. Self-hosted
 * (not @import'd from Google) so the page makes no third-party request,
 * matching SearXNG's own no-external-tracker posture.
 * --------------------------------------------------------------------- */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/roboto/roboto-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("./fonts/roboto/roboto-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body,
input,
button,
select,
textarea {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
}

/* ---------------------------------------------------------------------
 * Search bar — pill shape with a coloured border, matching Rave Book
 * Search's `.search-bar-wrap` treatment. SearXNG's own markup/JS is
 * untouched; this only restyles the existing #q / #send_search / #clear_search.
 * --------------------------------------------------------------------- */
/* Values below are pulled from Rave Book Search's live computed styles
 * (.search-bar-wrap / .search-input / .search-btn), not eyeballed. */
.search_box {
  height: 50px;
  max-width: 48rem;
  width: 100%;
  border: none;
  border-radius: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  align-items: center;
  gap: 8px;
  position: relative;
}

/* The autocomplete dropdown is a child of .search_box and positions
 * itself absolutely — now that .search_box is the positioned ancestor
 * (needed since it's no longer a single clipped pill), anchor it to
 * just the input rather than the input+button width. Upstream's own
 * `.autocomplete.open { margin-top: 3.5rem }` was tuned for the old
 * positioning ancestor and needs an explicit top/margin here instead. */
.search_box .autocomplete {
  left: 0;
  right: 58px;
  width: auto;
  max-width: none;
  top: 100% !important;
}

.search_box .autocomplete.open {
  margin-top: 8px !important;
}

/* The clear (x) button is hidden — Rave Book Search doesn't show one
 * either; the input can still be cleared by selecting/deleting text. */
#clear_search {
  display: none !important;
}

#q {
  height: 100%;
  box-sizing: border-box;
  padding: 0 22px !important;
  flex: 1;
  min-width: 0;
  font-size: 17px;
  border-radius: 25px !important;
  border: 2.4px solid var(--color-search-border);
  background: var(--color-base-background) !important;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s, box-shadow 0.2s;
}

#q:focus {
  /* Same border colour as idle — the paler hover shade read as
   * inconsistent/off-brand once focused. */
  border-color: var(--color-search-border);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.5);
  outline: none;
}

/* Search button sits outside the input as its own separate circular
 * accent, matching Rave Book Search's round search button. */
#send_search {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  min-width: 50px;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  border: none;
  background: var(--color-btn-background) !important;
  color: #fff !important;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
  flex-shrink: 0;
}

#send_search:hover {
  background: var(--color-search-background-hover) !important;
  color: #fff !important;
}

/* Icon reads thin at 32px stroke on a 512 viewBox; Rave Book Search's
 * icon is proportionally thicker (2.5 on a 24 viewBox). */
#send_search svg path,
#send_search svg circle {
  stroke-width: 54px;
}

/* Results-page header logo — the 3rem grid column shrank along with the
 * global root font-size reduction, but the icon's own padding didn't,
 * squeezing/misaligning it. Give it a fixed, properly centred size.
 * This is the base 2-column layout ("logo search" / "spacer categories")
 * that search.less defines below tablet width, or at any width when
 * center-alignment is off — equal specificity to upstream, later in
 * source order, so no !important needed here. */
#search_header {
  grid-template-columns: 3.6rem 1fr;
  align-items: center;
}

/* When center-alignment is on (our default — see settings.yml) at tablet
 * width+ (79.75em, i.e. @tablet — must match that breakpoint exactly, or
 * this leaks into mobile, which is how the first attempt at this fix
 * broke the mobile header): logo+search bar centre as one unit, and the
 * category tabs centre independently on their own line below — neither
 * is sized to match #results (which has its own sidebar pulling it
 * asymmetric) or to each other. flex-wrap does this without calc(): the
 * two fixed-size items (logo, search bar) pack onto line 1 and that line
 * gets centred by justify-content; #categories is forced onto its own
 * line via flex-basis: 100% (classic flex-wrap line-break trick) and
 * centres its own content independently on that full-width line. */
@media screen and (min-width: 79.75em) {
  .center-alignment-yes #main_results #search_header {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    row-gap: 1rem;
    column-gap: 1.2rem; /* matches the base rule's grid column-gap between logo and search bar */
    padding-left: 0;
    padding-right: 0;
  }

  .center-alignment-yes #main_results #search_logo {
    flex: 0 0 auto;
  }

  .center-alignment-yes #main_results #search_view {
    /* Matches #results' width scaled to 70% — full cpw read too wide
     * once the pill actually filled it (see .search_box override right
     * below, which lets the pill's `width: 100%` fill whatever width is
     * set here instead of capping out at 48rem). */
    flex: 0 0 calc(var(--center-page-width) * 0.7);
  }

  .center-alignment-yes #main_results .search_box {
    /* Let the pill's own `width: 100%` (search.less) actually fill
     * #search_view instead of capping out at 48rem — a full-width pill
     * here reads better next to the equally-wide #categories/#results
     * rows than a narrow pill floating alone in the middle of the page. */
    max-width: none;
  }

  .center-alignment-yes #main_results #categories {
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
  }

  /* Same drift, center-alignment OFF: #results sits at margin-left:
   * @results-offset (10rem, style.less) / margin-right: 2rem. The base
   * grid rule above (#search_header { grid-template-columns: 3.6rem 1fr })
   * pairs with search.less's padding-left of `@results-offset - 3rem`
   * (7rem) — sized for upstream's 3rem logo column, not our 3.6rem one.
   * That extra 0.6rem, plus the 1.2rem column-gap between the logo and
   * search columns (search.less: gap: 1rem 1.2rem), lands the search
   * column 1.8rem right of where #results actually starts. Pull the
   * padding in by that same 1.8rem (7rem - 1.8rem = 5.2rem) so the search
   * column's left edge lines back up with #results, without moving the
   * logo out of the grid's normal flow. */
  .center-alignment-no #main_results #search_header {
    padding-left: 5.2rem;
  }
}

#search_logo {
  padding: 0 !important;
  height: 50px;
  width: 50px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

#search_logo svg {
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  flex: none !important;
}

/* #search_view had top padding that #search_logo doesn't, so even with
 * align-items:center on the grid, the search bar sat lower than the
 * logo within their shared row. Match them so both start flush. */
#search_view {
  padding-top: 0 !important;
}

/* Extra clearance above the whole header row so it doesn't touch the
 * viewport edge (accounts for notches/status bars via safe-area-inset). */
#search_header {
  padding-top: calc(1.5em + env(safe-area-inset-top, 0px)) !important;
}

/* ---------------------------------------------------------------------
 * Result items — give them the same card treatment as the rest of the
 * Rave family (bg2 surface, subtle border, radius, hover state) instead
 * of SearXNG's flat borderless list rows.
 * --------------------------------------------------------------------- */
.result {
  background: var(--color-result-background);
  border: 1px solid var(--color-result-border);
  border-radius: 8px;
  padding: 10px !important;
  margin: 0.5rem 0 !important;
  transition: background 0.15s, border-color 0.15s;
}

.result:hover {
  background: #222229;
  border-color: rgba(255, 255, 255, 0.18);
}

.result h3 {
  font-size: 14px;
  font-weight: 500;
}

.result h3 a {
  font-size: 1em;
  transition: color 0.15s;
}

.result h3 a:hover,
.result h3 a:focus {
  color: var(--color-result-link-font-highlight);
  text-decoration: underline;
}

.result .content,
.result .stat {
  font-size: 12px;
  color: #77778a;
  line-height: 1.5;
}

.result .url_wrapper {
  font-size: 12px;
}

/* Source tags — matches Rave Book Search's source badge: bg3 pill, 1px
 * border, radius 4px, an 11px label, and a small colour-coded dot per
 * provider (BookSearch hardcodes one colour per book source; here the
 * "source" is a SearXNG engine, so the dot is looked up by the
 * data-engine attribute added in macros.html — plain <span>{{engine}}
 * </span> had no hook CSS could target by name). The upstream ellipsis
 * icon that used to separate the tags from the cache link is dropped —
 * BookSearch's badges don't use a separator, they just sit in a row. */
.engines {
  gap: 4px;
}

.engines svg {
  display: none;
}

.engines span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #222229;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.4;
  color: #77778a;
  /* Upstream's margin-right: 0.5rem (from the old horizontal row layout,
   * spacing the pill from the ellipsis icon that followed it) — now that
   * .engines is a right-aligned vertical column, that margin sits inside
   * the align-items: flex-end box, pushing the pill 7px left of the
   * true right edge while .cache_link (no such margin) sits flush,
   * which is the misalignment being fixed here. */
  margin: 0;
}

/* "cached" isn't a provider tag — plain muted text, not a pill, to set
 * it apart from the engine badges above it. */
.engines .cache_link {
  font-size: 11px;
  color: #44444f;
  text-decoration: none !important;
  margin: 0;
}

.engines .cache_link:hover {
  color: #77778a;
}

.engines span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  background: #77778a; /* default dot for engines not in the map below */
}

/* Common engines get their own dot colour, matching BookSearch's
 * per-source colour-coding. Not exhaustive (SearXNG ships ~85 engines) —
 * covers the general-search defaults (duckduckgo/google cse/startpage/
 * brave) plus a few common cross-category ones; anything else falls
 * back to the neutral dot above. */
.engines span[data-engine="duckduckgo"]::before { background: #de5833; }
.engines span[data-engine="google cse"]::before,
.engines span[data-engine="google cse images"]::before,
.engines span[data-engine="google news"]::before,
.engines span[data-engine="google scholar"]::before { background: #4285f4; }
.engines span[data-engine="startpage"]::before,
.engines span[data-engine="startpage news"]::before,
.engines span[data-engine="startpage images"]::before { background: #8b5cf6; }
.engines span[data-engine="brave"]::before,
.engines span[data-engine="brave.images"]::before,
.engines span[data-engine="brave.videos"]::before,
.engines span[data-engine="brave.news"]::before { background: #fb923c; }
.engines span[data-engine="wikipedia"]::before,
.engines span[data-engine="wikidata"]::before,
.engines span[data-engine="wiktionary"]::before,
.engines span[data-engine="wikinews"]::before { background: #4caf7d; }
.engines span[data-engine="github"]::before { background: #e5e7eb; }
.engines span[data-engine="stackoverflow"]::before,
.engines span[data-engine="askubuntu"]::before,
.engines span[data-engine="superuser"]::before { background: #f48024; }
.engines span[data-engine="youtube"]::before,
.engines span[data-engine="dailymotion"]::before,
.engines span[data-engine="vimeo"]::before { background: #ff4d4d; }
.engines span[data-engine="bing images"]::before,
.engines span[data-engine="bing news"]::before,
.engines span[data-engine="bing videos"]::before { background: #00a99d; }
.engines span[data-engine="soundcloud"]::before,
.engines span[data-engine="bandcamp"]::before,
.engines span[data-engine="mixcloud"]::before { background: #ff7a1a; }
.engines span[data-engine="pypi"]::before { background: #3775a9; }
.engines span[data-engine="reddit"]::before,
.engines span[data-engine="lemmy communities"]::before,
.engines span[data-engine="lemmy users"]::before,
.engines span[data-engine="lemmy posts"]::before,
.engines span[data-engine="lemmy comments"]::before { background: #14b8a6; }

/* ---------------------------------------------------------------------
 * Default (general web) result cards — reshaped to match Rave Book
 * Search's `.worker-item`: a fixed-size cover on the left, title →
 * description → URL/metadata stacked in the middle, source badge
 * top-aligned on the right. Scoped to .result-default only (not the
 * shared .result rules above, which still apply to every other result
 * type — images/videos/code/etc. — untouched) because those templates
 * have very different children and this reflow assumes the specific
 * default.html/macros.html markup: url_header, optional
 * a.thumbnail_link, h3, .content, .engines.
 *
 * This is pure CSS repositioning via named grid-template-areas — every
 * element below is a real direct child of .result in SearXNG's own
 * markup (see macros.html's result_header/result_sub_footer), just
 * assigned into a different visual slot than upstream's float/flow
 * order. No template changes.
 *
 * Not every result has a thumbnail (most plain web results don't) — the
 * :has() variant below only reserves the 64px cover column when one
 * actually exists, so results without one don't show a dead gap. */
.result-default {
  display: grid;
  /* minmax(0, 1fr) for the middle column — the badge column is a fixed
   * width now (see below), but the middle column still needs the 0
   * floor so long unbreakable title/description text can't force the
   * grid wider than the card.
   *
   * The badge column is a FIXED 92px, not auto. Auto sizes each grid
   * independently to that row's own badge content, so — since every
   * .result-default is its own separate grid — the column ended up a
   * different width per card (whichever badge text happened to be
   * longest on that row), making the badges look randomly sized and
   * never lining up between cards. A fixed width is shared by
   * construction; badges that don't fit wrap onto their own line
   * (row-gap below) rather than resizing the column. */
  grid-template-columns: minmax(0, 1fr) 92px;
  grid-template-areas:
    "title badge"
    "desc  badge"
    "url   badge";
  column-gap: 10px;
  row-gap: 3px;
  align-items: start;
}

.result-default:has(> a.thumbnail_link) {
  grid-template-columns: 64px minmax(0, 1fr) 92px;
  grid-template-areas:
    "cover title badge"
    "cover desc  badge"
    "cover url   badge";
}

.result-default > .url_header {
  grid-area: url;
  margin: 0;
  min-width: 0;
}

.result-default > a.thumbnail_link {
  grid-area: cover;
  margin: 0;
  float: none;
}

.result-default > a.thumbnail_link img.thumbnail {
  width: 64px;
  height: 90px;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

.result-default > h3 {
  grid-area: title;
  margin: 0;
  min-width: 0;
}

.result-default > h3 a {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.result-default > .content {
  grid-area: desc;
  margin: 0 !important;
  max-width: none !important;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* align-items: flex-end — badges keep their natural content width
 * ("cached" narrower than "google cse" is fine) and right-align flush
 * against the card's right edge, matching the result card's own border. */
.result-default > .engines {
  grid-area: badge;
  float: none !important;
  flex-direction: column;
  align-items: flex-end;
  row-gap: 4px;
  align-self: start;
}

.result-default > .engines span,
.result-default > .engines .cache_link {
  max-width: 100%;
}

.result-default > .break {
  display: none;
}

/* ---------------------------------------------------------------------
 * Overall density — Rave Book Search runs a tighter, more compact layout
 * than SearXNG's spacious rem-based defaults. Scaling the root font-size
 * down shrinks every rem-based margin/padding/gap in the theme
 * proportionally, in one pass, without touching individual components.
 * --------------------------------------------------------------------- */
html {
  font-size: 87.5%; /* 14px base instead of 16px */
}

/* ---------------------------------------------------------------------
 * Homepage logo — background-size:contain means height is the real lever
 * (width follows the image's own aspect ratio once height-bound), so this
 * is sized via min-height, matching Rave Book Search's prominence.
 * --------------------------------------------------------------------- */
.index .title {
  width: auto;
  max-width: 26rem;
  min-height: 7rem;
  margin: 0 auto 4px auto;
}

@media screen and (max-width: 50em) {
  .index .title {
    max-width: 65%;
    min-height: 4.25rem;
    margin: 0 auto 8px auto;
  }

  /* Scoped to the homepage only — the results-page header search bar
   * should keep filling its grid column, not shrink and leave a gap. */
  .index .search_box {
    width: 88%;
    margin: 0 auto;
  }

  .rave-tagline {
    margin: 0 0 8px 0;
  }

  #search_header {
    padding-top: calc(1em + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Upstream hides #links_on_top's <span> text below tablet width, and
 * hides About/Donate entirely on the results page below 52rem — both
 * rules assumed an icon would stay visible. We removed the icons, so on
 * mobile these rules made the links fully blank. Force them back. */
#links_on_top span {
  display: inline !important;
}

body.results_endpoint #links_on_top .link_on_top_about {
  display: flex !important;
}

.rave-tagline {
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #77778a;
  margin: 0 0 6px 0;
}

/* Vertical position of the search section — a touch higher on desktop,
 * pushed further down on mobile. */
#main_index {
  margin-top: 20vh;
}

@media screen and (max-width: 50em) {
  #main_index {
    margin-top: 12em;
  }
}

/* ---------------------------------------------------------------------
 * About / Preferences / Donate — a normal-flow footer at the true end
 * of the page (moved after </main> in base.html), so it only comes
 * into view once you scroll all the way down, rather than floating
 * fixed over content or the pagination buttons.
 * --------------------------------------------------------------------- */
#links_on_top {
  position: static !important;
  width: 100%;
  box-sizing: border-box;
  padding: 16px;
  margin-top: 32px;
  background: var(--color-base-background);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}

#links_on_top a {
  margin-left: 0 !important;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 400;
  color: #44444f;
  transition: color 0.2s;
}

#links_on_top a:hover {
  color: #77778a;
}

#links_on_top a svg {
  display: none;
}

/* ---------------------------------------------------------------------
 * Search bar full width on the results page — SearXNG reserved 2.8rem
 * of right padding here to leave room for the top-right nav, which no
 * longer lives up there now that it's moved to the bottom-right.
 * --------------------------------------------------------------------- */
body.results_endpoint #search_view {
  padding-right: 0.5rem;
}

/* Upstream's `.result { width: 100% }` was resolving against something
 * narrower than its actual container on mobile, leaving an unwanted gap
 * on the right only. `width: auto` is the natural block-level behaviour
 * (fill available width minus margin) and sidesteps whatever the % was
 * computing against. */
.result {
  width: auto !important;
}

@media screen and (max-width: 50em) {
  .result {
    margin-left: 0.5em !important;
    margin-right: 0.5em !important;
  }
}

/* ---------------------------------------------------------------------
 * Pagination — card-style buttons matching the rest of the theme,
 * instead of SearXNG's plain floated/underlined defaults.
 * --------------------------------------------------------------------- */
#pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--color-result-border);
  padding-top: 16px;
}

#pagination .left,
#pagination .right {
  float: none;
}

.previous_page button,
.next_page button {
  background: var(--color-result-background) !important;
  color: var(--color-base-font) !important;
  border: 1px solid var(--color-result-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.previous_page button:hover,
.next_page button:hover {
  background: #222229 !important;
  border-color: rgba(255, 255, 255, 0.18);
}

.numbered_pagination {
  gap: 4px;
}

.numbered_pagination form {
  display: contents;
}

.page_number {
  min-width: 34px;
  height: 34px;
  box-sizing: border-box;
  background: var(--color-result-background) !important;
  color: var(--color-base-font) !important;
  border: 1px solid var(--color-result-border) !important;
  border-radius: 8px !important;
  font-size: 13px;
  text-decoration: none !important;
  cursor: pointer;
}

.page_number:hover {
  background: #222229 !important;
}

.page_number_current {
  min-width: 34px;
  height: 34px;
  box-sizing: border-box;
  background: var(--color-btn-background) !important;
  color: var(--color-btn-font) !important;
  border: 1px solid var(--color-btn-background) !important;
  border-radius: 8px !important;
  font-size: 13px;
  font-weight: 500;
}

/* ---------------------------------------------------------------------
 * Sidebar accordions (Response time, Search URL, Info, etc.) — card
 * treatment instead of a plain top border, matching result cards.
 * --------------------------------------------------------------------- */
.sidebar-collapsible {
  background: var(--color-result-background);
  border: 1px solid var(--color-result-border);
  border-top: 1px solid var(--color-result-border) !important;
  border-radius: 8px;
  padding: 4px 12px !important;
  margin-bottom: 8px;
}

#sidebar-end-collapsible {
  display: none;
}

summary.title {
  font-size: 13px;
  color: var(--color-base-font);
}