/* ═══════════════════════════════════════════════════════════════════
   echo6 // searxng custom theme
   ═══════════════════════════════════════════════════════════════════
   colors:  cyan #28C0E8 / yellow #F0D848  (extracted from logo)
   font:    JetBrains Mono
   aesthetic: cyberpunk — dark, sharp, clean, minimal glow
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap');

/* ─── css variables ─── */
:root {
  /* echo6 brand */
  --e6-cyan: #28C0E8;
  --e6-cyan-light: #5DD4F5;
  --e6-cyan-dim: rgba(40, 192, 232, 0.12);
  --e6-yellow: #F0D848;
  --e6-yellow-light: #F5E470;
  --e6-yellow-dim: rgba(240, 216, 72, 0.1);

  /* backgrounds */
  --e6-bg: #0a0e17;
  --e6-bg-card: #111827;
  --e6-bg-hover: #1a2332;
  --e6-bg-footer: #060a10;

  /* borders */
  --e6-border: #1e3a5f;

  /* text */
  --e6-text: #e0e6ed;
  --e6-text-muted: #7a8ca0;

  /* buttons */
  --e6-btn-bg: #1a2332;
  --e6-btn-hover: #243447;
}


/* ═══════════════════════════════════════════
   1. global — font, background, text
   ═══════════════════════════════════════════ */

* {
  font-family: 'JetBrains Mono', monospace !important;
}

html, body {
  background-color: var(--e6-bg) !important;
  color: var(--e6-text) !important;
  margin: 0;
  padding: 0;
}


/* ═══════════════════════════════════════════
   2. homepage — viewport lock, centering
   ═══════════════════════════════════════════
   homepage only — no scroll, logo centered
   at ~35-40% from top like google.com.
   CC: replace selectors if actual DOM differs.
   ═══════════════════════════════════════════ */

/* lock homepage to viewport — no scrollbar */
html:has(body.index),
body.index {
  height: 100vh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* center the main content area */
body.index main,
body.index #main_index,
body.index .search-margin {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  height: calc(100vh - 80px) !important;
  min-height: unset !important;
  padding-bottom: 10vh !important;
  margin: 0 !important;
  overflow: hidden !important;
}


/* ═══════════════════════════════════════════
   3. hide default searxng branding
   ═══════════════════════════════════════════
   kill the giant "SearXNG" text behind the
   logo. only the echo6 logo should show.
   CC: inspect DOM and add the real selector
   if these don't catch it.
   ═══════════════════════════════════════════ */

.searxng-wordmark,
#main-logo span,
.index h1,
h1.title,
.search-margin h1,
#main_index h1,
.index .title,
.title_h1 {
  display: none !important;
  visibility: hidden !important;
  font-size: 0 !important;
  color: transparent !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}


/* ═══════════════════════════════════════════
   4. logo
   ═══════════════════════════════════════════ */

.logo img,
.search-margin img,
#main-logo img,
img[src*="searxng"] {
  max-width: 270px;
  height: auto;
  display: block;
  margin: 0 auto;
}


/* ═══════════════════════════════════════════
   5. search bar — pill shape, subtle focus
   ═══════════════════════════════════════════ */

#search_form .search_box,
.search_box,
#q {
  background-color: var(--e6-bg-card) !important;
  border: 1px solid var(--e6-border) !important;
  border-radius: 24px !important;
  color: var(--e6-text) !important;
  font-size: 16px !important;
}

/* focused state — subtle cyan border, barely-there shadow */
#search_form .search_box:focus-within,
.search_box:focus-within {
  border-color: var(--e6-cyan) !important;
  box-shadow: 0 0 6px var(--e6-cyan-dim) !important;
}

#search_form input[type="text"],
#search_form input[type="search"],
#q {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 16px !important;
  color: var(--e6-text) !important;
  background: transparent !important;
}

/* placeholder text */
#q::placeholder,
input[type="search"]::placeholder {
  color: var(--e6-text-muted) !important;
  opacity: 0.7;
}

/* search bar container width */
#search_form,
.search_box {
  max-width: 584px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ═══════════════════════════════════════════
   6. search buttons
   ═══════════════════════════════════════════ */

#search_form button,
#search_form input[type="submit"],
.search_filters button,
.search_submit,
.search_box button {
  background-color: var(--e6-btn-bg) !important;
  border: 1px solid var(--e6-border) !important;
  border-radius: 4px !important;
  color: var(--e6-text) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  cursor: pointer;
  text-transform: lowercase;
}

#search_form button:hover,
#search_form input[type="submit"]:hover,
.search_submit:hover,
.search_box button:hover {
  background-color: var(--e6-btn-hover) !important;
  border-color: var(--e6-cyan) !important;
  color: var(--e6-text) !important;
}


/* ═══════════════════════════════════════════
   7. top navigation bar
   ═══════════════════════════════════════════
   injected via template override.
   styles the .//photos .//mail links, waffle
   menu button, and login avatar.
   ═══════════════════════════════════════════ */

.echo6-nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 10px 18px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: transparent;
  gap: 20px;
}

/* .//photos and .//mail links */
.echo6-nav a.echo6-nav-link {
  color: var(--e6-cyan) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  transition: color 0.15s ease;
}

.echo6-nav a.echo6-nav-link:hover {
  color: var(--e6-cyan-light) !important;
}

/* waffle menu (⠿) button */
.echo6-waffle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--e6-text-muted);
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.echo6-waffle-btn:hover {
  background-color: var(--e6-bg-hover);
}

/* login avatar button */
.echo6-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--e6-border);
  background: transparent;
  color: var(--e6-text-muted);
  cursor: pointer;
  transition: border-color 0.15s ease;
  text-decoration: none;
}

.echo6-login-btn:hover {
  border-color: var(--e6-cyan);
}

.echo6-login-btn svg {
  width: 18px;
  height: 18px;
  fill: var(--e6-text-muted);
}


/* ═══════════════════════════════════════════
   8. waffle menu dropdown
   ═══════════════════════════════════════════ */

.echo6-waffle-menu {
  display: none;
  position: fixed;
  top: 52px;
  right: 70px;
  z-index: 2000;
  background-color: var(--e6-bg-card);
  border: 1px solid var(--e6-border);
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  padding: 16px;
  min-width: 280px;
  animation: echo6FadeIn 0.15s ease;
}

.echo6-waffle-menu.active {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.echo6-waffle-menu a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--e6-text);
  font-size: 11px;
  font-weight: 400;
  text-transform: lowercase;
  transition: background-color 0.15s ease;
  gap: 6px;
}

.echo6-waffle-menu a:hover {
  background-color: var(--e6-bg-hover);
}

.echo6-waffle-menu a img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  object-fit: contain;
}

/* emoji fallback icons in waffle menu */
.echo6-waffle-menu a .echo6-icon {
  font-size: 28px;
  line-height: 1;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes echo6FadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* waffle menu overlay — click to close */
.echo6-waffle-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1999;
}

.echo6-waffle-overlay.active {
  display: block;
}


/* ═══════════════════════════════════════════
   9. footer
   ═══════════════════════════════════════════ */

footer,
.footer,
#footer,
.searxng-footer {
  background-color: var(--e6-bg-footer) !important;
  border-top: 1px solid var(--e6-border) !important;
  text-align: center;
  padding: 12px 0 !important;
}

footer *,
.footer *,
#footer *,
.searxng-footer * {
  font-size: 12px !important;
  text-transform: lowercase;
  color: var(--e6-text-muted) !important;
}

footer a,
.footer a,
#footer a,
.searxng-footer a {
  color: var(--e6-text-muted) !important;
  text-decoration: none;
  transition: color 0.15s ease;
}

footer a:hover,
.footer a:hover,
#footer a:hover,
.searxng-footer a:hover {
  color: var(--e6-cyan) !important;
}


/* ═══════════════════════════════════════════
   10. search results page
   ═══════════════════════════════════════════
   results pages must scroll normally.
   dark theme applied to result elements.
   ═══════════════════════════════════════════ */

/* allow scrolling on non-homepage */
html:not(:has(body.index)),
body:not(.index) {
  height: auto !important;
  overflow: auto !important;
}

/* result links */
.result a,
.result-default a h3,
.result-title a {
  color: var(--e6-cyan) !important;
}

.result a:hover,
.result-default a:hover h3,
.result-title a:hover {
  color: var(--e6-cyan-light) !important;
}

.result a:visited,
.result-default a:visited h3 {
  color: #8BA8C4 !important;
}

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

/* result descriptions */
.result .content,
.result-content,
.result p {
  color: var(--e6-text) !important;
}

/* result cards/containers */
.result,
.result-default {
  background-color: transparent !important;
  border-bottom: 1px solid var(--e6-border) !important;
  padding: 14px 0 !important;
}

/* search categories/tabs bar */
.search_categories,
#categories,
.category {
  background-color: var(--e6-bg) !important;
  border-bottom: 1px solid var(--e6-border) !important;
}

.search_categories label,
.category a,
.category button {
  color: var(--e6-text-muted) !important;
  font-size: 13px !important;
  text-transform: lowercase;
}

.search_categories label:hover,
.category a:hover,
.category button:hover {
  color: var(--e6-text) !important;
}

/* active category tab */
.search_categories label.active,
.category.active a,
.category.active button,
.search_categories input:checked + label {
  color: var(--e6-cyan) !important;
  border-bottom: 2px solid var(--e6-cyan) !important;
}

/* sidebar / infobox */
.infobox,
#sidebar {
  background-color: var(--e6-bg-card) !important;
  border: 1px solid var(--e6-border) !important;
  border-radius: 8px !important;
}

/* pagination */
.pagination button,
.pagination a,
#pagination button {
  background-color: var(--e6-btn-bg) !important;
  border: 1px solid var(--e6-border) !important;
  color: var(--e6-text) !important;
  border-radius: 4px !important;
}

.pagination button:hover,
.pagination a:hover,
#pagination button:hover {
  border-color: var(--e6-cyan) !important;
  color: var(--e6-cyan) !important;
}

/* engine stats / result info */
.result_header,
.result-engines,
.engines {
  color: var(--e6-text-muted) !important;
  font-size: 11px !important;
}


/* ═══════════════════════════════════════════
   11. preferences page
   ═══════════════════════════════════════════ */

/* preferences containers */
.preferences,
.preferences fieldset,
.preferences form {
  background-color: var(--e6-bg) !important;
  color: var(--e6-text) !important;
}

.preferences fieldset {
  border: 1px solid var(--e6-border) !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
}

.preferences legend {
  color: var(--e6-cyan) !important;
  font-weight: 600;
}

/* select dropdowns and inputs in preferences */
.preferences select,
.preferences input[type="text"],
.preferences input[type="number"],
.preferences textarea {
  background-color: var(--e6-bg-card) !important;
  border: 1px solid var(--e6-border) !important;
  color: var(--e6-text) !important;
  border-radius: 4px !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.preferences select:focus,
.preferences input:focus,
.preferences textarea:focus {
  border-color: var(--e6-cyan) !important;
  box-shadow: 0 0 6px var(--e6-cyan-dim) !important;
}

/* preferences save button */
.preferences input[type="submit"],
.preferences button[type="submit"] {
  background-color: var(--e6-cyan) !important;
  border: none !important;
  color: var(--e6-bg) !important;
  font-weight: 600;
  border-radius: 4px !important;
  cursor: pointer;
  padding: 8px 24px !important;
}

.preferences input[type="submit"]:hover,
.preferences button[type="submit"]:hover {
  background-color: var(--e6-cyan-light) !important;
}

/* engine toggle checkboxes */
.preferences input[type="checkbox"]:checked {
  accent-color: var(--e6-cyan) !important;
}

/* preferences tab navigation */
.preferences .tabs a,
.preferences .nav a {
  color: var(--e6-text-muted) !important;
}

.preferences .tabs a:hover,
.preferences .nav a:hover {
  color: var(--e6-text) !important;
}

.preferences .tabs a.active,
.preferences .nav a.active {
  color: var(--e6-cyan) !important;
  border-bottom: 2px solid var(--e6-cyan) !important;
}


/* ═══════════════════════════════════════════
   12. scrollbar styling
   ═══════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--e6-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--e6-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #2a4a6f;
}


/* ═══════════════════════════════════════════
   13. selection highlight
   ═══════════════════════════════════════════ */

::selection {
  background-color: rgba(40, 192, 232, 0.25);
  color: var(--e6-text);
}


/* ═══════════════════════════════════════════
   14. responsive
   ═══════════════════════════════════════════ */

@media (max-width: 768px) {
  .echo6-nav {
    padding: 8px 12px;
    gap: 12px;
  }

  .echo6-nav a.echo6-nav-link {
    font-size: 12px;
  }

  .echo6-waffle-menu {
    right: 12px;
    left: 12px;
    min-width: unset;
  }

  .echo6-waffle-menu.active {
    grid-template-columns: repeat(3, 1fr);
  }

  #search_form,
  .search_box {
    max-width: 100% !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .logo img,
  img[src*="searxng"] {
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .echo6-waffle-menu.active {
    grid-template-columns: repeat(2, 1fr);
  }

  .echo6-nav a.echo6-nav-link {
    font-size: 11px;
  }
}


/* ═══════════════════════════════════════════
   end // echo6-custom.css
   ═══════════════════════════════════════════ */