/* =========================
   FusselCNC – Custom Theme
   ========================= */

/* ---------- Tuning-Variablen ---------- */
:root{
  --color-accent: #00e676;   /* Primärfarbe (Grün) */
  --radius: 50px;            /* Rundung Header/Filter */
  --content-max: 1180px;     /* Breite Header + Ergebnisse */

  /* Glow-Intensität (je höher, desto mehr Neon) */
  --glow-blur: 48px;
  --glow-spread: 10px;
  --glow-alpha: 0.42;        /* 0.18 dezent … 0.55 sehr stark */
  --glow-alpha-hover: 0.55;
}

/* ---------- Hintergrund ---------- */
html, body{
  background: #0e0e12 url("/static/themes/simple/img/background.png") no-repeat center center fixed;
  background-size: cover;
}
@media (prefers-color-scheme: light){
  html, body{ background-attachment: fixed; }
}

/* ---------- Suchleiste: breiter + Glas ---------- */
#search, form#search{ max-width: 900px; margin: 22px auto; }
#q, input[type="search"]{
  background: rgba(24,24,24,0.65);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(2px);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
#q:focus, input[type="search"]:focus{
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(0,230,118,.25), inset 0 0 0 1px rgba(0,0,0,.25);
}
button[type="submit"], .search__button{ border-color: rgba(255,255,255,0.12); }
button[type="submit"]:hover, .search__button:hover{ border-color: var(--color-accent); }

/* ---------- Startseite: Dein Logo ---------- */
/* Standard-"SearXNG"-Titel sicher verstecken */
.index_endpoint h1,
.index_endpoint header h1,
.index_endpoint .header h1,
#main_index h1,
#main_index .title,
.index_endpoint .title,
.index_endpoint .header__title{
  display: none !important;
}
/* Logo oberhalb der Suchbox */
#main_index::before{
  content: "";
  display: block;
  width: 420px;                   /* <- Größe hier anpassen */
  height: 120px;                  /* <- Größe hier anpassen */
  margin: 40px auto 10px;
  background: url("/static/themes/simple/img/fcnc_logo.png") no-repeat center/contain;
  opacity: .98;
}
@media (max-width: 600px){
  #main_index::before{ width: 70vw; height: 20vw; }
}

/* (Optional) kleines Logo links neben der Leiste auf Ergebnisseiten */
.results_endpoint #search_header{ position: relative; padding-left: 56px; }
.results_endpoint #search_header::before{
  content:""; position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:36px; height:36px; background:url("/static/themes/simple/img/fcnc_logo.png") no-repeat center/contain;
  opacity:.95;
}

/* ---------- Karten/Infoboxen „glassy“ ---------- */
.results, .result, .infobox{
  background: rgba(18,18,18,0.6);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
}
.result__url, .result .url, .result .engines{ opacity:.9; }
a:hover{ color: var(--color-accent); }
.categories .category.active,
.categories .category:hover{
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* ---------- Header + Filter: mittig, rund, mit grünem Glow ---------- */
/* gleiche Zentrierung */
.results_endpoint #search_header,
#filters,
#main_results{
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  padding-inline: 12px;
}

/* Header-Card */
.results_endpoint #search_header{
  border-radius: var(--radius);
  overflow: hidden;
  background: rgba(24,24,24,0.85);
  border: 1px solid rgba(0,230,118,.22);   /* leicht grünliche Kante */
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),            /* dunkler Schlagschatten */
    0 0 var(--glow-blur) var(--glow-spread) rgba(0,230,118,var(--glow-alpha)); /* NEON-GLOW */
  margin-bottom: 0;                         /* an #filters andocken */
}

/* Glow beim Hover / Fokus stärker */
.results_endpoint #search_header:hover,
.results_endpoint #search_header:focus-within{
  box-shadow:
    0 10px 28px rgba(0,0,0,.38),
    0 0 calc(var(--glow-blur) + 12px) calc(var(--glow-spread) + 4px) rgba(0,230,118,var(--glow-alpha-hover));
  border-color: rgba(0,230,118,.30);
}

/* Filterleiste als Fortsetzung darunter */
.results_endpoint #filters{
  margin: 0 auto 18px;
  padding: 8px 12px;
  background: rgba(24,24,24,0.85);
  border: 1px solid rgba(0,230,118,.18);
  border-top: 0;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  box-shadow:
    0 8px 24px rgba(0,0,0,.35),
    0 0 calc(var(--glow-blur) - 12px) calc(var(--glow-spread) - 4px) rgba(0,230,118,.28);
}

/* ---------- Top-Gradient für bessere Lesbarkeit ---------- */
.results_endpoint body::before{
  content:"";
  position: fixed;
  left:0; right:0; top:0; height: 140px;
  background: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0));
  pointer-events:none;
  z-index:0;
}
.results_endpoint #search_header{ position: relative; z-index:1; }

/* ---------- Header/Footer Basis ---------- */
header, .header{
  background: rgba(0,0,0,0.35);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
footer{
  background: rgba(0,0,0,0.4);
  border-top: 1px solid rgba(255,255,255,0.08);
}
hr{ border-color: rgba(255,255,255,0.08); }

.results_endpoint #search_header{
  position: sticky;
  top: 16px;               /* Abstand zum oberen Rand */
  z-index: 9;
  backdrop-filter: blur(4px);
}

.result, .answer, .infobox{
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.result:hover, .answer:hover, .infobox:hover{
  transform: translateY(-2px);
  border-color: rgba(0,230,118,.35);
  box-shadow:
    0 10px 20px rgba(0,0,0,.35),
    0 0 24px 2px rgba(0,230,118,.12);
}

.categories .category{
  border-radius: 999px;
  padding: 6px 10px;
  background: rgba(255,255,255,.02);
  transition: background .15s, color .15s, border-color .15s;
}
.categories .category:hover{
  background: rgba(0,230,118,.12);
  border-color: rgba(0,230,118,.35);
  color: var(--color-accent);
}
.categories .category.active{
  background: rgba(0,230,118,.18);
  border-color: rgba(0,230,118,.50);
  color: var(--color-accent);
}
.result h3 a{
  transition: color .15s ease, text-shadow .15s ease;
}
.result h3 a:hover{
  color: var(--color-accent);
  text-shadow: 0 0 12px rgba(0,230,118,.35);
}

/* WebKit-Browser (Chromium, Safari, Edge) */
*::-webkit-scrollbar{ width: 10px; height: 10px; }
*::-webkit-scrollbar-track{ background: rgba(255,255,255,.06); }
*::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.22); border-radius: 10px; }
*::-webkit-scrollbar-thumb:hover{ background: rgba(0,230,118,.6); }
/* Firefox */
:root{ scrollbar-color: rgba(0,230,118,.6) rgba(255,255,255,.06); scrollbar-width: thin; }

::selection{ background: rgba(0,230,118,.35); color: #000; }

/* =========================
   Kräftiger Neon-Glow für Ergebnisse
   ========================= */

/* Tuning-Variablen nur für Karten */
:root{
  --card-glow-blur: 40px;          /* Breite des Scheins */
  --card-glow-spread: 8px;         /* Dicke des Scheins */
  --card-glow-alpha: .22;          /* Grund-Helligkeit */
  --card-glow-alpha-hover: .45;    /* Hover-Helligkeit */
}

/* Grundzustand: dezenter Glow schon ohne Hover */
.result, .answer, .infobox{
  position: relative;
  z-index: 0;                      /* hebt den Schein über den BG */
  border-color: rgba(0,230,118,.20);
  box-shadow:
    0 8px 18px rgba(0,0,0,.30),
    0 0 var(--card-glow-blur) var(--card-glow-spread) rgba(0,230,118,var(--card-glow-alpha));
}

/* Hover/Focus: deutlich stärkerer Neon-Effekt */
.result:hover, .answer:hover, .infobox:hover,
.result:focus-within, .answer:focus-within, .infobox:focus-within{
  transform: translateY(-2px);
  border-color: rgba(0,230,118,.55);
  box-shadow:
    0 12px 26px rgba(0,0,0,.45),
    0 0 calc(var(--card-glow-blur) + 12px) calc(var(--card-glow-spread) + 4px) rgba(0,230,118,var(--card-glow-alpha-hover));
}

/* =========================
   Karten: Base-Glow blau, Hover-Glow grün
   ========================= */

/* RGB-Komponenten als Variablen (nur Zahlen, ohne rgba()) */
:root{
  --card-blue:  94, 200, 255;   /* #5EC8FF – Basis-Glow */
  --card-green: 0, 230, 118;    /* #00E676 – Hover-Glow (wie vorher) */
  /* Stärke kannst du weiter oben schon mit --card-glow-… steuern */
}

/* Grundzustand: blauer Glow */
.result, .answer, .infobox{
  border-color: rgba(var(--card-blue), .28);  /* bläuliche Kante */
  box-shadow:
    0 8px 18px rgba(0,0,0,.30),
    0 0 var(--card-glow-blur) var(--card-glow-spread) rgba(var(--card-blue), var(--card-glow-alpha));
}

/* Hover/Focus: kräftiger grüner Neon-Glow */
.result:hover, .answer:hover, .infobox:hover,
.result:focus-within, .answer:focus-within, .infobox:focus-within{
  border-color: rgba(var(--card-green), .55);
  box-shadow:
    0 12px 26px rgba(0,0,0,.45),
    0 0 calc(var(--card-glow-blur) + 12px) calc(var(--card-glow-spread) + 4px)
      rgba(var(--card-green), var(--card-glow-alpha-hover));
}

/* Top-Links ausblenden */
#links_on_top .link_on_top_about { display: none; }        /* Über */
#links_on_top .link_on_top_preferences { display: none; }  /* Einstellungen */

/* =========================
   Bessere Lesbarkeit: dunklere Karten
   ========================= */
:root{
  --card-bg-rgb: 16,18,24;     /* Grundfarbe der Karte (fast schwarz-blau) */
  --card-bg-alpha: .90;        /* Deckkraft normal (0.60 → 0.82) */
  --card-bg-alpha-hover: .95;  /* Deckkraft bei Hover */
}

/* Karten-Hintergrund kräftiger + leichter Glass-Blur */
.result, .answer, .infobox{
  background: rgba(var(--card-bg-rgb), var(--card-bg-alpha)) !important;
  backdrop-filter: blur(2px);
}

/* beim Hover noch etwas weniger transparent */
.result:hover, .answer:hover, .infobox:hover,
.result:focus-within, .answer:focus-within, .infobox:focus-within{
  background: rgba(var(--card-bg-rgb), var(--card-bg-alpha-hover)) !important;
}

/* optional: Text minimal heller für mehr Kontrast */
.result, .answer, .infobox{
  color: #e7ecf3;
}