/* =====================================================================
   Biron Family Search — landing-system theme (durable, bind-mounted)
   Maps the SearXNG "simple" theme onto the bironfamily.net landing
   design system. Dual accent:
     orange  = interactive / action  (buttons, focus, link hovers, titles)
     green   = informational / live  (selected category, engines, stats,
               answer borders)
   Sharp corners, serif body, mono for URLs/meta. Dark + light + auto.
   ===================================================================== */

:root {
  --biron-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --biron-mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* ---------- DARK: default + explicit .theme-dark ---------- */
:root,
:root.theme-dark {
  --l-bg: #14120f;
  --l-card: #1d1a15;
  --l-ink: #ece5d8;
  --l-muted: #9a917f;
  --l-accent: #e08a4f;
  --l-accent-ink: #f0b184;
  --l-line: #35302a;
  --l-accent2: #8fae6e;
  --l-accent2-ink: #a9c489;
}
/* ---------- DARK: auto theme following an OS dark preference ---------- */
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --l-bg: #14120f;
    --l-card: #1d1a15;
    --l-ink: #ece5d8;
    --l-muted: #9a917f;
    --l-accent: #e08a4f;
    --l-accent-ink: #f0b184;
    --l-line: #35302a;
    --l-accent2: #8fae6e;
    --l-accent2-ink: #a9c489;
  }
}

/* ---------- LIGHT: explicit .theme-light ---------- */
:root.theme-light {
  --l-bg: #f5efe5;
  --l-card: #fffdf8;
  --l-ink: #2b2622;
  --l-muted: #837a6d;
  --l-accent: #b85c28;
  --l-accent-ink: #94481d;
  --l-line: #d9cfbe;
  --l-accent2: #4d7a3a;
  --l-accent2-ink: #3d6230;
}
/* ---------- LIGHT: auto theme following an OS light preference ---------- */
@media (prefers-color-scheme: light) {
  :root.theme-auto {
    --l-bg: #f5efe5;
    --l-card: #fffdf8;
    --l-ink: #2b2622;
    --l-muted: #837a6d;
    --l-accent: #b85c28;
    --l-accent-ink: #94481d;
    --l-line: #d9cfbe;
    --l-accent2: #4d7a3a;
    --l-accent2-ink: #3d6230;
  }
}

/* =====================================================================
   Map landing palette onto SearXNG simple-theme variables
   (theme-independent; consumes the --l-* vars set above)

   NOTE: SearXNG's shipped stylesheet redefines ~22 of these --color-*
   vars directly under :root.theme-dark, :root.theme-black, and
   @media (prefers-color-scheme: dark){ :root.theme-auto {…} } at
   specificity (0,2,0)/(0,1,1)+media. A bare :root selector here
   (0,1,0) loses to those on the dark path, so we mirror the --l-*
   selector structure above: raise specificity for the explicit dark
   classes, and duplicate the block inside the auto-dark media query.
   This selector list does NOT match .theme-light, so the light
   mapping below is unaffected.
   ===================================================================== */
:root,
:root.theme-dark,
:root.theme-black {
  /* base surface + text */
  --color-base-font: var(--l-ink);
  --color-base-background: var(--l-bg);
  --color-base-background-mobile: var(--l-bg);
  --color-toolbar-background: var(--l-card);

  /* header / footer / sidebar */
  --color-header-background: var(--l-card);
  --color-header-border: var(--l-line);
  --color-footer-background: var(--l-card);
  --color-footer-border: var(--l-line);
  --color-sidebar-background: var(--l-card);
  --color-sidebar-border: var(--l-line);
  --color-sidebar-font: var(--l-ink);

  /* search box */
  --color-search-background: var(--l-card);
  --color-search-border: var(--l-line);
  --color-search-font: var(--l-ink);
  --color-search-background-hover: var(--l-card);
  --color-search-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

  /* buttons -> ORANGE action on hover */
  --color-btn-background: var(--l-card);
  --color-btn-font: var(--l-ink);
  --color-btn-background-hover: var(--l-accent);
  --color-btn-font-hover: var(--l-bg);

  /* generic urls / meta -> muted */
  --color-url-font: var(--l-muted);
  --color-url-visited-font: var(--l-muted);

  /* result titles + links -> ORANGE */
  --color-result-title-font: var(--l-accent-ink);
  --color-result-title-font-hover: var(--l-accent);
  --color-result-link-font: var(--l-accent-ink);
  --color-result-link-font-highlight: var(--l-accent);
  --color-result-link-visited-font: var(--l-accent-ink);
  --color-result-url-font: var(--l-muted);
  --color-result-content-font: var(--l-ink);
  --color-result-published-date-font: var(--l-muted);
  --color-result-search-url-icon: var(--l-muted);

  /* selected category -> GREEN */
  --color-categories-item-selected-font: var(--l-accent2-ink);
  --color-categories-item-border-selected: var(--l-accent2);
  --color-categories-item-font: var(--l-ink);

  /* answers / infobox */
  --color-answers-border: var(--l-accent2);

  /* sharp corners */
  --border-radius: 0;
  --border-radius-select: 0;
}
/* ---------- DARK: auto theme following an OS dark preference ----------
   Duplicated so it beats SearXNG's own
   @media (prefers-color-scheme: dark){ :root.theme-auto {…} } block,
   which has equal-or-greater specificity than a bare :root rule. */
@media (prefers-color-scheme: dark) {
  :root.theme-auto {
    --color-base-font: var(--l-ink);
    --color-base-background: var(--l-bg);
    --color-base-background-mobile: var(--l-bg);
    --color-toolbar-background: var(--l-card);

    --color-header-background: var(--l-card);
    --color-header-border: var(--l-line);
    --color-footer-background: var(--l-card);
    --color-footer-border: var(--l-line);
    --color-sidebar-background: var(--l-card);
    --color-sidebar-border: var(--l-line);
    --color-sidebar-font: var(--l-ink);

    --color-search-background: var(--l-card);
    --color-search-border: var(--l-line);
    --color-search-font: var(--l-ink);
    --color-search-background-hover: var(--l-card);
    --color-search-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);

    --color-btn-background: var(--l-card);
    --color-btn-font: var(--l-ink);
    --color-btn-background-hover: var(--l-accent);
    --color-btn-font-hover: var(--l-bg);

    --color-url-font: var(--l-muted);
    --color-url-visited-font: var(--l-muted);

    --color-result-title-font: var(--l-accent-ink);
    --color-result-title-font-hover: var(--l-accent);
    --color-result-link-font: var(--l-accent-ink);
    --color-result-link-font-highlight: var(--l-accent);
    --color-result-link-visited-font: var(--l-accent-ink);
    --color-result-url-font: var(--l-muted);
    --color-result-content-font: var(--l-ink);
    --color-result-published-date-font: var(--l-muted);
    --color-result-search-url-icon: var(--l-muted);

    --color-categories-item-selected-font: var(--l-accent2-ink);
    --color-categories-item-border-selected: var(--l-accent2);
    --color-categories-item-font: var(--l-ink);

    --color-answers-border: var(--l-accent2);

    --border-radius: 0;
    --border-radius-select: 0;
  }
}

/* =====================================================================
   Structure: sharp corners + typography
   ===================================================================== */
input, select, button, textarea,
.result, article.result, .infobox, .answer,
.dialog-modal, .searchbox, #q, #search_url, #apis,
.category_button, .search_filters * {
  border-radius: 0 !important;
}

/* Serif for body + results; mono for URLs and machine meta. */
body,
input, select, button, textarea,
.result h3, .result h3 a,
.result .content, .result-content,
p, li {
  font-family: var(--biron-serif);
}
.result .content, .result-content { line-height: 1.55; }

.result .url_wrapper,
.result .url_header,
.result .engines,
.result .engines span,
.result .published_date,
.result cite,
.result .altlink,
#pagination,
.result .metadata {
  font-family: var(--biron-mono);
}

/* =====================================================================
   ORANGE = interactive / action (form focus, hovers)
   ===================================================================== */
#q:focus,
.search_box:focus-within,
input:focus, select:focus, textarea:focus {
  border-color: var(--l-accent) !important;
  outline-color: var(--l-accent);
}
.result h3 a:hover,
.result a.url_header:hover {
  color: var(--l-accent) !important;
}
#send_search:hover, #clear_search:hover,
button[type="submit"]:hover {
  background: var(--l-accent) !important;
  color: var(--l-bg) !important;
}

/* =====================================================================
   GREEN = informational / live (engines, stats, answers)
   ===================================================================== */
.result .engines,
.result .engines span,
.engine-name,
#engines_msg .engine-name {
  color: var(--l-accent2-ink) !important;
}
#results .result-count,
#results > .answer + *,
.result_count,
#summary .result-count,
.search_stats,
.number_of_results {
  color: var(--l-accent2-ink);
}
.answer,
.searx_answers,
.answers {
  border-left: 4px solid var(--l-accent2) !important;
  border-radius: 0 !important;
}

/* =====================================================================
   Wordmark hero (index.html .biron-wordmark) — serif ink + accent rule
   ===================================================================== */
.index .biron-wordmark {
  text-align: center;
  margin: 0 0 2rem;
}
.index .biron-wordmark h1 {
  display: inline-block;
  margin: 0;
  padding: 0 0 0.5rem;
  font-family: var(--biron-serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  color: var(--l-ink);
  position: relative;
  background: none;
  visibility: visible;
  text-indent: 0;
}
.index .biron-wordmark h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 0.6rem auto 0;
  background: var(--l-accent);
}
/* Neutralise any legacy logo hacks if an old index/title is ever served. */
.index .title,
.index .title h1,
#search_logo {
  background: none !important;
  background-image: none !important;
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}