/* =====================================================================
   Tee Jay's Search - custom theme
   -------------------------------------------------------------------
   How SearXNG's 'simple' theme actually works:
     - colours are CSS custom properties named --color-*, scoped to
       :root.theme-auto / :root.theme-dark / :root.theme-black
     - the masthead is a BACKGROUND IMAGE on .index .title, and the
       <h1> text is hidden with visibility:hidden
   So to retheme it: override the --color-* variables, and for the
   masthead supply our own background image rather than trying to
   show the hidden <h1>.
   House palette matches the block page: red accent, dark/light cards.
   ===================================================================== */

/* ---------- LIGHT ---------- */

:root.theme-auto,
:root.theme-light {
  --color-base-background: #f3f4f8;
  --color-base-background-mobile: #f3f4f8;
  --color-base-font: #26263a;
  --color-base-font-rgb: 38, 38, 58;

  --color-header-background: #ffffff;
  --color-header-border: rgba(220, 38, 38, 0.14);
  --color-footer-background: #ffffff;
  --color-footer-border: rgba(220, 38, 38, 0.14);

  --color-search-background: #ffffff;
  --color-search-background-hover: #fff5f5;
  --color-search-border: rgba(220, 38, 38, 0.18);
  --color-search-font: #26263a;
  --color-search-shadow: 0 0 0 1px rgba(220, 38, 38, 0.05),
                         0 24px 64px rgba(0, 0, 0, 0.12);

  --color-result-background: #ffffff;
  --color-result-border: rgba(220, 38, 38, 0.12);
  --color-result-link-font: #4040c0;
  --color-result-link-font-highlight: #b91c1c;
  --color-result-link-visited-font: #7c3aed;
  --color-result-url-font: #6b6b8a;
  --color-result-search-url-font: #6b6b8a;
  --color-result-search-url-border: rgba(220, 38, 38, 0.10);
  --color-result-description-highlight-font: #111128;
  --color-result-engines-font: #9a9ab5;
  --color-result-publishdate-font: #8a8aa5;

  --color-btn-background: #b91c1c;
  --color-btn-font: #ffffff;
  --color-categories-item-border-selected: #b91c1c;
  --color-categories-item-selected-font: #b91c1c;

  --color-url-font: #4040c0;
  --color-url-visited-font: #7c3aed;

  --color-autocomplete-background: #ffffff;
  --color-autocomplete-background-hover: #fff5f5;
  --color-autocomplete-border: rgba(220, 38, 38, 0.18);
  --color-autocomplete-font: #26263a;
  --color-autocomplete-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);

  --color-backtotop-background: #ffffff;
  --color-backtotop-border: rgba(220, 38, 38, 0.18);
  --color-backtotop-font: #b91c1c;

  --color-error-background: #fdeaea;
  --color-error: #b91c1c;

  --tj-accent: #b91c1c;
  --tj-radius: 14px;
}

/* ---------- DARK ---------- */

:root.theme-dark,
:root.theme-black {
  --color-base-background: #07070f;
  --color-base-background-mobile: #07070f;
  --color-base-font: #e8eaf0;
  --color-base-font-rgb: 232, 234, 240;

  --color-header-background: #0e0e18;
  --color-header-border: rgba(220, 38, 38, 0.18);
  --color-footer-background: #0e0e18;
  --color-footer-border: rgba(220, 38, 38, 0.18);

  --color-search-background: #0e0e18;
  --color-search-background-hover: #161622;
  --color-search-border: rgba(220, 38, 38, 0.20);
  --color-search-font: #e8eaf0;
  --color-search-shadow: 0 0 0 1px rgba(220, 38, 38, 0.06),
                         0 24px 64px rgba(0, 0, 0, 0.70);

  --color-result-background: #0e0e18;
  --color-result-border: rgba(220, 38, 38, 0.16);
  --color-result-link-font: #a5b4fc;
  --color-result-link-font-highlight: #f87171;
  --color-result-link-visited-font: #c4b5fd;
  --color-result-url-font: #6e6e98;
  --color-result-search-url-font: #6e6e98;
  --color-result-search-url-border: rgba(255, 255, 255, 0.07);
  --color-result-description-highlight-font: #f0f0f6;
  --color-result-engines-font: #6e6e98;
  --color-result-publishdate-font: #606080;

  --color-btn-background: #f87171;
  --color-btn-font: #1a1a24;
  --color-categories-item-border-selected: #f87171;
  --color-categories-item-selected-font: #f87171;

  --color-url-font: #a5b4fc;
  --color-url-visited-font: #c4b5fd;

  --color-autocomplete-background: #0e0e18;
  --color-autocomplete-background-hover: #161622;
  --color-autocomplete-border: rgba(220, 38, 38, 0.20);
  --color-autocomplete-font: #e8eaf0;
  --color-autocomplete-shadow: 0 12px 40px rgba(0, 0, 0, 0.70);

  --color-backtotop-background: #0e0e18;
  --color-backtotop-border: rgba(220, 38, 38, 0.20);
  --color-backtotop-font: #f87171;

  --color-error-background: #2a0f12;
  --color-error: #f87171;

  --tj-accent: #f87171;
  --tj-radius: 14px;
}

/* =====================================================================
   Structural tweaks on top of the variable overrides
   ===================================================================== */

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
}

/* ---------- masthead ----------
   The stock theme hides the <h1> (visibility:hidden) and paints a
   background image on .index .title. We do the same but with our own
   mark, and we make the real <h1> visible so the instance name shows. */

.index .title {
  background-image: url('./img/tj-search-mark.svg') !important;
  background-repeat: no-repeat !important;
  background-position: 50% 0 !important;
  background-size: 64px 64px !important;
  min-height: 0 !important;
  margin: 3rem auto 1.5rem !important;
  padding-top: 78px !important;
}

.index h1,
.index .title h1 {
  visibility: visible !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--color-base-font);
}

/* ---------- search box ---------- */

.search_box {
  border-radius: var(--tj-radius) !important;
  padding: 6px 8px !important;
}

.search_box input {
  font-family: inherit !important;
  font-size: 16px !important;
  border-radius: 10px !important;
}

#send_search {
  border-radius: 10px !important;
  transition: opacity 0.15s ease !important;
}

#send_search:hover {
  opacity: 0.82 !important;
}

/* ---------- result cards ---------- */

.result {
  border-radius: var(--tj-radius) !important;
  border-left: 3px solid rgba(220, 38, 38, 0.22) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

.result:hover {
  transform: translateY(-1px);
  border-left-color: var(--tj-accent) !important;
}

.result .title,
.result h3 {
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* ---------- engine badge: red dot so you can see who found what ---------- */

.result .engine_name,
.result .engine {
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 10.5px !important;
}

.result .engine_name::before,
.result .engine::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 7px #ef4444;
  vertical-align: middle;
}

/* ---------- categories / tabs ---------- */

.categories,
#categories {
  border-radius: 12px !important;
}

.categories label,
#categories label {
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

.categories input:checked + label {
  background: rgba(220, 38, 38, 0.07) !important;
  color: var(--tj-accent) !important;
  font-weight: 600 !important;
}

/* ---------- nav + footer ---------- */

#links_on_top a,
#links_on_top a:hover {
  border-radius: 8px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

#links_on_top a:hover {
  background: rgba(220, 38, 38, 0.07) !important;
  color: var(--tj-accent) !important;
}

footer p {
  font-size: 12px !important;
}

/* ---------- preferences page ---------- */

#main_preferences,
#main_info {
  border-radius: var(--tj-radius) !important;
}

#main_preportsage,
#main_preferences input[type="checkbox"],
#main_preferences input[type="radio"] {
  accent-color: var(--tj-accent) !important;
}

/* ---------- mobile ---------- */

@media (max-width: 480px) {
  .index .title {
    background-size: 52px 52px !important;
    padding-top: 66px !important;
  }

  .index h1,
  .index .title h1 {
    font-size: 22px !important;
  }
}