/* =========================================================
   SearchPosse – Clean Light Minimal Theme v3
   Corrected selectors for SearXNG 2026.3.27
   Text logo, no-scroll, grid-gap fix
   ========================================================= */

/* Override SearXNG default dark CSS variables */
:root,
:root.theme-light,
:root.theme-auto {
  --color-base-font: #1a1d23 !important;
  --color-base-font-rgb: 26, 29, 35 !important;
  --color-base-background: #f8f9fb !important;
  --color-base-background-mobile: #f8f9fb !important;
  --color-url-font: #2563eb !important;
  --color-url-visited-font: #7c3aed !important;
  --color-header-background: #ffffff !important;
  --color-header-border: #e2e5eb !important;
  --color-footer-background: #f8f9fb !important;
  --color-footer-border: #e2e5eb !important;
  --color-sidebar-border: #e2e5eb !important;
  --color-sidebar-font: #1a1d23 !important;
  --color-sidebar-background: #ffffff !important;
  --color-backtotop-font: #5f6574 !important;
  --color-backtotop-border: #e2e5eb !important;
  --color-backtotop-background: #ffffff !important;
  --color-btn-background: #2563eb !important;
  --color-btn-font: #ffffff !important;
  --color-show-btn-background: #e2e5eb !important;
  --color-show-btn-font: #1a1d23 !important;
  --color-search-border: #e2e5eb !important;
  --color-search-shadow: 0 4px 16px rgba(0,0,0,0.06) !important;
  --color-search-background: #ffffff !important;
  --color-search-font: #1a1d23 !important;
  --color-search-background-hover: #2563eb !important;
  --color-error: #dc2626 !important;
  --color-error-background: #fef2f2 !important;
  --color-categories-item-border: #e2e5eb !important;
  --color-categories-item-selected: rgba(37,99,235,0.08) !important;
  --color-result-background: #ffffff !important;
  --color-result-border: #eef0f4 !important;
  --color-result-url-font: #5f6574 !important;
  --color-result-vim-selected: rgba(37,99,235,0.06) !important;
  --color-result-search-url-border: #e2e5eb !important;
  --color-settings-tr-hover: rgba(37,99,235,0.04) !important;
  --color-image-resolution-font: #5f6574 !important;
  --color-image-resolution-background: rgba(255,255,255,0.85) !important;

  /* SearchPosse custom tokens */
  --sp-bg: #f8f9fb;
  --sp-surface: #ffffff;
  --sp-text: #1a1d23;
  --sp-text-secondary: #5f6574;
  --sp-text-muted: #8b90a0;
  --sp-border: #e2e5eb;
  --sp-border-light: #eef0f4;
  --sp-accent: #2563eb;
  --sp-accent-hover: #1d4ed8;
  --sp-accent-soft: rgba(37, 99, 235, 0.08);
  --sp-accent-ring: rgba(37, 99, 235, 0.25);
  --sp-shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --sp-shadow-md: 0 4px 16px rgba(0,0,0,0.06);
  --sp-shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
  --sp-shadow-focus: 0 0 0 3px var(--sp-accent-ring);
  --sp-maxw: 680px;
  --sp-radius: 12px;
  --sp-radius-sm: 8px;
  --sp-pad: 20px;
  --sp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; overflow-x: hidden; }

/* Force light background on body — nuke the dark gradient */
html body,
html body.index_endpoint,
html body.search_endpoint,
html body.preferences_endpoint,
html body.stats_endpoint,
body {
  font-family: var(--sp-font) !important;
  background: var(--sp-bg) !important;
  background-image: none !important;
  color: var(--sp-text) !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

/* Lock homepage viewport — no scroll when empty */
html body.index_endpoint {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
}

body.index_endpoint main,
body.index_endpoint #main_index,
body.index_endpoint main#main_index {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Top nav --- */
#links_on_top, #links, .links_on_top, .links {
  position: fixed !important;
  top: 16px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 100 !important;
  margin: 0 !important;
  display: flex !important;
  gap: 6px !important;
}

#links_on_top a, #links a, .links_on_top a, .links a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid var(--sp-border) !important;
  background: var(--sp-surface) !important;
  color: var(--sp-text-secondary) !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  transition: all 0.15s ease !important;
  box-shadow: var(--sp-shadow-sm) !important;
}

#links_on_top a:hover, #links a:hover,
.links_on_top a:hover, .links a:hover {
  background: var(--sp-accent-soft) !important;
  color: var(--sp-accent) !important;
  border-color: var(--sp-accent) !important;
}

#links_on_top a svg, #links a svg,
.links_on_top a svg, .links a svg {
  width: 16px !important;
  height: 16px !important;
  opacity: 0.7;
}

/* === HOMEPAGE === */
.search-home {
  height: 100vh !important;
  max-height: 100vh !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 var(--sp-pad) 40px !important;
  gap: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(ellipse 900px 500px at 50% 40%, rgba(37, 99, 235, 0.03), transparent),
    var(--sp-bg) !important;
}

/* Text logo replaces image logo */
.logo-wrapper { display: none !important; }

.text-logo {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--sp-font) !important;
  font-size: 42px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-align: center !important;
}

.text-logo a {
  color: var(--sp-text) !important;
  text-decoration: none !important;
}

.text-logo a:visited {
  color: var(--sp-text) !important;
}

.text-logo-accent {
  color: var(--sp-accent) !important;
}

/* --- Search form (homepage) --- */
/* Target actual SearXNG selectors */
.search-home form#search,
.search-home #search_view {
  width: min(var(--sp-maxw), calc(100vw - 2 * var(--sp-pad))) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Fix grid gap ghost line */
.search-home #search_header {
  width: min(var(--sp-maxw), calc(100vw - 2 * var(--sp-pad))) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  display: block !important;
  gap: 0 !important;
}

/* search_box is the actual SearXNG class (not search_bar) */
.search-home .search_box,
.search-home .search_bar {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  background: #ffffff !important;
  border: 1.5px solid var(--sp-border) !important;
  border-radius: var(--sp-radius) !important;
  box-shadow: var(--sp-shadow-md) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  overflow: visible !important;
  position: relative !important;
}

.search-home .search_box:focus-within,
.search-home .search_bar:focus-within {
  border-color: var(--sp-accent) !important;
  box-shadow: var(--sp-shadow-focus), var(--sp-shadow-md) !important;
}

.search-home #q,
.search-home input[name="q"] {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 52px !important;
  padding: 0 20px !important;
  border: none !important;
  background: transparent !important;
  color: var(--sp-text) !important;
  font-size: 16px !important;
  font-family: var(--sp-font) !important;
  outline: none !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.search-home #q::placeholder,
.search-home input[name="q"]::placeholder {
  color: var(--sp-text-muted) !important;
  font-weight: 400 !important;
}

/* Search buttons inside search box */
.search-home #send_search,
.search-home #clear_search,
.search-home .search_box button {
  flex: 0 0 40px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  border-radius: var(--sp-radius-sm) !important;
  border: none !important;
  background: transparent !important;
  color: var(--sp-text-muted) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 4px !important;
}

.search-home #send_search:hover {
  background: var(--sp-accent) !important;
  color: white !important;
}

.search-home #clear_search:hover {
  background: var(--sp-border-light) !important;
  color: var(--sp-text) !important;
}

.search-home .search_box button svg,
.search-home #send_search svg,
.search-home #clear_search svg {
  width: 18px !important;
  height: 18px !important;
  flex: 0 0 auto !important;
}

/* Hide ghost pseudo-elements */
.search-home .search_box::before,
.search-home .search_box::after,
.search-home #send_search::before,
.search-home #send_search::after,
.search-home #clear_search::before,
.search-home #clear_search::after {
  content: none !important;
  display: none !important;
}

/* Autocomplete dropdown — invisible when empty, styled when populated */
.search_box .autocomplete,
.search_box .autocomplete.hide_if_nojs {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius) !important;
  box-shadow: var(--sp-shadow-lg) !important;
  padding: 6px !important;
  margin-top: 4px !important;
  z-index: 500 !important;
}

/* When autocomplete is empty (no list items), hide it visually */
.search_box .autocomplete:empty,
.search_box .autocomplete:not(:has(li)) {
  display: none !important;
}

/* Autocomplete general */
.search-home .autocomplete,
.autocomplete {
  width: min(var(--sp-maxw), calc(100vw - 2 * var(--sp-pad))) !important;
  margin: 4px auto 0 !important;
  padding: 6px !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius) !important;
  background: var(--sp-surface) !important;
  box-shadow: var(--sp-shadow-lg) !important;
  z-index: 200 !important;
}

.autocomplete ul { margin: 0 !important; padding: 0 !important; }

.autocomplete li {
  list-style: none !important;
  padding: 10px 14px !important;
  border-radius: var(--sp-radius-sm) !important;
  cursor: pointer !important;
  color: var(--sp-text) !important;
  font-size: 14px !important;
  transition: background 0.1s ease !important;
}

.autocomplete li:hover,
.autocomplete li.active,
.autocomplete li[aria-selected="true"] {
  background: var(--sp-accent-soft) !important;
  color: var(--sp-accent) !important;
}

/* CTA row */
.cta-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 8px;
}

.tagline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px;
  border-radius: 8px;
  border: 1px solid var(--sp-border);
  background: var(--sp-surface);
  color: var(--sp-text-secondary);
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--sp-font);
  box-shadow: var(--sp-shadow-sm);
  transition: all 0.15s ease;
  cursor: pointer;
}

.tagline-btn:hover {
  background: var(--sp-accent-soft);
  color: var(--sp-accent);
  border-color: var(--sp-accent);
}

.tagline-btn.secondary {
  opacity: 0.45;
  cursor: not-allowed;
}

/* === RESULTS PAGE === */
#main_results {
  background: var(--sp-bg) !important;
}

#categories {
  background: var(--sp-surface) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  box-shadow: var(--sp-shadow-sm) !important;
}

#categories button, #categories a {
  color: var(--sp-text-secondary) !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  border-radius: var(--sp-radius-sm) !important;
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  padding: 6px 14px !important;
  transition: all 0.15s ease !important;
}

#categories button:hover, #categories a:hover {
  background: var(--sp-accent-soft) !important;
  color: var(--sp-accent) !important;
  border-color: var(--sp-accent) !important;
}

#categories button.active, #categories a.active,
#categories button[aria-selected="true"] {
  color: var(--sp-accent) !important;
  background: var(--sp-accent-soft) !important;
  border-color: var(--sp-accent) !important;
}

.result {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border-light) !important;
  border-radius: var(--sp-radius) !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
  box-shadow: var(--sp-shadow-sm) !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

.result:hover {
  border-color: var(--sp-border) !important;
  box-shadow: var(--sp-shadow-md) !important;
}

.result h3, .result .result_header, .result .result-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin: 0 0 4px 0 !important;
}

.result h3 a, .result .result_header a, .result .result-title a {
  color: var(--sp-accent) !important;
  text-decoration: none !important;
}

.result h3 a:hover, .result .result_header a:hover {
  text-decoration: underline !important;
}

.result .url_wrapper, .result .result-url, .result .url {
  color: var(--sp-text-muted) !important;
  font-size: 13px !important;
}

.result .content, .result .result-content, .result p {
  color: var(--sp-text-secondary) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-top: 6px !important;
}

.result .engines, .result .result-engines {
  font-size: 11px !important;
  color: var(--sp-text-muted) !important;
  margin-top: 8px !important;
}

/* Results page search header */
#search_header, .search_header {
  background: var(--sp-surface) !important;
  border-bottom: 1px solid var(--sp-border) !important;
  box-shadow: var(--sp-shadow-sm) !important;
}

#search_header .search_box,
#search_header .search_bar,
.search_header .search_box,
.search_header .search_bar {
  background: var(--sp-bg) !important;
  border: 1.5px solid var(--sp-border) !important;
  border-radius: var(--sp-radius) !important;
}

#search_header .search_box:focus-within,
#search_header .search_bar:focus-within {
  border-color: var(--sp-accent) !important;
  box-shadow: var(--sp-shadow-focus) !important;
}

#search_header #q, .search_header input[name="q"] {
  background: transparent !important;
  color: var(--sp-text) !important;
  border: none !important;
  font-size: 15px !important;
}

/* Results page search buttons — keep them subtle */
#search_header #send_search,
#search_header #clear_search,
#search_header .search_box button {
  background: transparent !important;
  border: none !important;
  color: var(--sp-text-muted) !important;
  padding: 8px !important;
  width: 40px !important;
  min-width: 40px !important;
  max-width: 40px !important;
  height: 40px !important;
  box-shadow: none !important;
}

#search_header #send_search:hover {
  background: var(--sp-accent) !important;
  color: white !important;
  border-radius: var(--sp-radius-sm) !important;
}

/* Fix results page autocomplete */
#search_header .search_box {
  overflow: visible !important;
  position: relative !important;
}

/* Pagination */
#pagination, .pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 24px 0 !important;
}

#pagination a, .pagination a,
#pagination button, .pagination button {
  padding: 8px 16px !important;
  border-radius: var(--sp-radius-sm) !important;
  border: 1px solid var(--sp-border) !important;
  background: var(--sp-surface) !important;
  color: var(--sp-text-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

#pagination a:hover, .pagination a:hover {
  background: var(--sp-accent-soft) !important;
  color: var(--sp-accent) !important;
  border-color: var(--sp-accent) !important;
}

/* === PREFERENCES === */
select, input[type="text"] {
  background: var(--sp-surface) !important;
  border: 1px solid var(--sp-border) !important;
  border-radius: var(--sp-radius-sm) !important;
  color: var(--sp-text) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-family: var(--sp-font) !important;
}

select:focus, input[type="text"]:focus {
  border-color: var(--sp-accent) !important;
  outline: none !important;
  box-shadow: var(--sp-shadow-focus) !important;
}

button[type="submit"], input[type="submit"] {
  background: var(--sp-accent) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--sp-radius-sm) !important;
  padding: 10px 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

button[type="submit"]:hover, input[type="submit"]:hover {
  background: var(--sp-accent-hover) !important;
}

/* === FOOTER === */
footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  padding: 10px var(--sp-pad) !important;
  z-index: 40 !important;
  border-top: 1px solid var(--sp-border) !important;
  background: rgba(248, 249, 251, 0.92) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  text-align: center !important;
}

footer p {
  margin: 0 !important;
  font-size: 12px !important;
  color: var(--sp-text-muted) !important;
  line-height: 1.6 !important;
}

footer a {
  color: var(--sp-text-secondary) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

footer a:hover { color: var(--sp-accent) !important; }

/* === INFOPAGE === */
.infopage {
  max-width: 720px !important;
  margin: 80px auto 120px !important;
  padding: 0 var(--sp-pad) !important;
}

.infopage h1 { font-size: 28px !important; font-weight: 700 !important; color: var(--sp-text) !important; margin-bottom: 8px !important; }
.infopage h2 { font-size: 20px !important; font-weight: 600 !important; color: var(--sp-text) !important; margin-top: 32px !important; margin-bottom: 8px !important; }
.infopage p, .infopage li { color: var(--sp-text-secondary) !important; font-size: 15px !important; line-height: 1.7 !important; }
.infopage a { color: var(--sp-accent) !important; text-decoration: none !important; }
.infopage a:hover { text-decoration: underline !important; }

/* === ERROR === */
.dialog-error {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-radius: var(--sp-radius) !important;
  color: #991b1b !important;
  padding: 14px 20px !important;
  margin-bottom: 16px !important;
}

/* === STATS === */
.stats_endpoint table { width: 100% !important; border-collapse: collapse !important; }
.stats_endpoint th, .stats_endpoint td {
  padding: 10px 14px !important; text-align: left !important;
  border-bottom: 1px solid var(--sp-border-light) !important; font-size: 14px !important;
}
.stats_endpoint th { font-weight: 600 !important; color: var(--sp-text) !important; background: var(--sp-bg) !important; }
.stats_endpoint tr:hover td { background: var(--sp-accent-soft) !important; }

/* === RESPONSIVE === */
@media (max-width: 640px) {
  :root { --sp-pad: 16px; --sp-maxw: 100%; }
  .search-home { padding: 0 var(--sp-pad) 40px !important; gap: 20px !important; }
  .text-logo { font-size: 32px !important; }
  .search-home #q, .search-home input[name="q"] { height: 48px !important; font-size: 15px !important; }
  .cta-row { flex-direction: column; align-items: center; }
  #links_on_top, #links, .links_on_top, .links { top: 10px !important; right: 12px !important; }
  #links_on_top a, #links a { padding: 6px 10px !important; font-size: 12px !important; }
  .result { padding: 12px 16px !important; margin-bottom: 8px !important; }
}

/* Hide SearXNG default navbar on homepage */
.search-home .searxng-navbar,
.search-home #main_index > .searxng-navbar { display: none !important; }

/* Misc polish */
html { scroll-behavior: smooth; }
::selection { background: var(--sp-accent-soft); color: var(--sp-accent); }

/* Force all links to use proper colors */
a { color: var(--sp-accent) !important; }
a:visited { color: #7c3aed !important; }