/* ============================================================
   Graz Lebt — Saisonale Themes
   ============================================================
   Wird aktiviert via <html data-theme="X">, gesetzt durch themes.js.
   Overridet die Neon-Akzent-Farben + ergänzt dekorative Elemente
   in den Ecken (SVG-Backgrounds via ::before/::after auf <body>).
   ============================================================ */

/* ===== Hero-Badge (allen Themes gemeinsam) ===== */
.theme-badge {
  display: inline-block;
  padding: .5rem 1.1rem;
  margin-bottom: 1.5rem;
  background: var(--theme-badge-bg, rgba(255,255,255,0.08));
  border: 1px solid var(--theme-badge-border, rgba(255,255,255,0.15));
  border-radius: 100px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .5px;
  color: var(--theme-badge-text, #fff);
  animation: themeBadgePulse 3s ease-in-out infinite;
  box-shadow: 0 0 20px var(--theme-badge-glow, transparent);
}
/* Wenn Badge ein Link ist: Cursor-Pointer, kein Underline, blaue Schrift als
   klassischer Hyperlink-Indikator, intensiverer Hover */
.theme-badge.theme-badge-link {
  cursor: pointer;
  text-decoration: none !important;
  color: #60a5fa !important;
  text-shadow: 0 0 3px rgba(0,0,0,0.5);
  transition: transform .15s ease, box-shadow .15s ease, color .15s ease;
}
.theme-badge.theme-badge-link:hover {
  color: #93c5fd !important;
  transform: scale(1.05);
  box-shadow: 0 0 30px var(--theme-badge-glow, rgba(255,255,255,0.3));
  animation-play-state: paused;
}
@keyframes themeBadgePulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ===== Deko-Overlay (SVG oder Emoji in Ecken) ===== */
html[data-theme] body::before,
html[data-theme] body::after {
  content: var(--theme-corner, "");
  position: fixed;
  font-size: 4rem;
  opacity: .15;
  pointer-events: none;
  z-index: 1;
  filter: drop-shadow(0 0 10px var(--theme-corner-glow, rgba(255,255,255,0.2)));
}
html[data-theme] body::before {
  top: calc(var(--mobile-top-bar-height, 60px) + 1rem);
  left: 1rem;
  transform: rotate(-15deg);
}
html[data-theme] body::after {
  bottom: 5rem;
  right: 1rem;
  transform: rotate(15deg);
}
@media (max-width: 600px) {
  html[data-theme] body::before,
  html[data-theme] body::after {
    font-size: 2.5rem;
    opacity: .1;
  }
}

/* ============================================================
   HALLOWEEN (25.-31.10.) — orange + lila, spooky vibe
   ============================================================ */
html[data-theme="halloween"] {
  --neon-pink: #ff6b1a;
  --neon-green: #8b00ff;
  --neon-cyan: #ff6b1a;
  --neon-yellow: #ff9800;
  --theme-badge-bg: linear-gradient(90deg, #ff6b1a, #8b00ff);
  --theme-badge-border: rgba(255,107,26,0.4);
  --theme-badge-text: #fff;
  --theme-badge-glow: rgba(255,107,26,0.5);
  --theme-corner: "🎃";
  --theme-corner-glow: rgba(255,107,26,0.4);
}
html[data-theme="halloween"] body::after {
  content: "🦇";
}

/* ============================================================
   NO NUT NOVEMBER (1.11.) — braun-warm, Augenzwinkern 🥜
   ============================================================ */
html[data-theme="nonutnovember"] {
  --neon-pink: #d2691e;
  --neon-green: #a0522d;
  --neon-cyan: #cd853f;
  --neon-yellow: #daa520;
  --theme-badge-bg: linear-gradient(90deg, #8b4513, #d2691e, #8b4513);
  --theme-badge-border: rgba(210,105,30,0.5);
  --theme-badge-text: #fff;
  --theme-badge-glow: rgba(210,105,30,0.4);
  --theme-corner: "🥜";
  --theme-corner-glow: rgba(210,105,30,0.4);
}
html[data-theme="nonutnovember"] body::after {
  content: "💪";
}

/* ============================================================
   WEIHNACHTEN (1. Advent — 26.12.) — rot + grün + Lichter
   ============================================================ */
html[data-theme="weihnachten"] {
  --neon-pink: #d32f2f;
  --neon-green: #2e7d32;
  --neon-cyan: #4caf50;
  --neon-yellow: #ffd54f;
  --theme-badge-bg: linear-gradient(90deg, #d32f2f, #2e7d32);
  --theme-badge-border: rgba(255,215,0,0.5);
  --theme-badge-text: #fff;
  --theme-badge-glow: rgba(255,215,0,0.4);
  --theme-corner: "🎄";
  --theme-corner-glow: rgba(76,175,80,0.5);
}
html[data-theme="weihnachten"] body::after {
  content: "⭐";
}

/* ============================================================
   SILVESTER (29.12.-2.1.) — gold + schwarz, Feuerwerk
   ============================================================ */
html[data-theme="silvester"] {
  --neon-pink: #ffd700;
  --neon-green: #ffb300;
  --neon-cyan: #ff6b1a;
  --neon-yellow: #ffeb3b;
  --theme-badge-bg: linear-gradient(90deg, #ffd700, #ff6b1a, #ffd700);
  --theme-badge-border: rgba(255,215,0,0.6);
  --theme-badge-text: #0a0612;
  --theme-badge-glow: rgba(255,215,0,0.7);
  --theme-corner: "🎆";
  --theme-corner-glow: rgba(255,215,0,0.6);
}
html[data-theme="silvester"] body::after {
  content: "🥂";
}

/* ============================================================
   OSTERN (Karfreitag-Ostermontag) — Pastell
   ============================================================ */
html[data-theme="ostern"] {
  --neon-pink: #f8bbd0;
  --neon-green: #b4e7ce;
  --neon-cyan: #d4b4ff;
  --neon-yellow: #fff5b4;
  --theme-badge-bg: linear-gradient(90deg, #f8bbd0, #b4e7ce, #fff5b4);
  --theme-badge-border: rgba(248,187,208,0.4);
  --theme-badge-text: #0a0612;
  --theme-badge-glow: rgba(248,187,208,0.3);
  --theme-corner: "🥚";
  --theme-corner-glow: rgba(248,187,208,0.4);
}
html[data-theme="ostern"] body::after {
  content: "🐰";
}

/* ============================================================
   FASCHING (Rosenmontag + Faschingsdienstag) — bunt-chaotisch
   ============================================================ */
html[data-theme="fasching"] {
  --neon-pink: #ff00ff;
  --neon-green: #00ff87;
  --neon-cyan: #00e5ff;
  --neon-yellow: #ffff00;
  --theme-badge-bg: linear-gradient(90deg, #ff00ff, #ffff00, #00e5ff);
  --theme-badge-border: rgba(255,0,255,0.4);
  --theme-badge-text: #0a0612;
  --theme-badge-glow: rgba(255,0,255,0.5);
  --theme-corner: "🎭";
  --theme-corner-glow: rgba(255,0,255,0.4);
}
html[data-theme="fasching"] body::after {
  content: "🎉";
}

/* ============================================================
   PRIDE MONTH (Juni) — Rainbow
   ============================================================ */
html[data-theme="pride"] {
  --neon-pink: #e40303;
  --neon-green: #008026;
  --neon-cyan: #004dff;
  --neon-yellow: #ffed00;
  --theme-badge-bg: linear-gradient(90deg,
    #e40303 0%, #ff8c00 20%, #ffed00 40%,
    #008026 60%, #004dff 80%, #750787 100%);
  --theme-badge-border: rgba(255,255,255,0.3);
  --theme-badge-text: #fff;
  --theme-badge-glow: rgba(255,255,255,0.3);
  --theme-corner: "🏳️‍🌈";
  --theme-corner-glow: rgba(255,255,255,0.3);
}
html[data-theme="pride"] body::after {
  content: "❤️";
}

/* ============================================================
   HALLOWEEN EVENTS FILTER — Button neben Trending (Filter-Row)
   ============================================================ */

/* Button nur im Halloween-Theme stylen (ohne Theme bleibt der generische
   .trending-toggle Look). Default-Attribut `hidden` wird in themes.js entfernt. */
html[data-theme="halloween"] .halloween-toggle {
  border-color: rgba(255, 107, 26, 0.4);
  color: #ff6b1a;
}
html[data-theme="halloween"] .halloween-toggle:hover {
  border-color: #ff6b1a;
  background: rgba(255, 107, 26, 0.1);
  color: #ff6b1a;
}
html[data-theme="halloween"] .halloween-toggle[aria-pressed="true"] {
  background: linear-gradient(90deg, #ff6b1a, #8b00ff);
  color: #fff;
  border-color: #ff6b1a;
  box-shadow: 0 0 18px rgba(255, 107, 26, 0.5);
}
html[data-theme="halloween"] .halloween-toggle[aria-pressed="true"] .trending-toggle-icon {
  animation: halloweenWiggle .5s ease;
}
@keyframes halloweenWiggle {
  0%,100% { transform: rotate(0deg) scale(1); }
  25%     { transform: rotate(-12deg) scale(1.2); }
  50%     { transform: rotate(10deg)  scale(1.15); }
  75%     { transform: rotate(-6deg)  scale(1.1); }
}

/* ============================================================
   HALLOWEEN JUMPSCARE — Button in Nav + Fullscreen-Overlay
   ============================================================ */

/* Button-Styling nur im Halloween-Theme */
html[data-theme="halloween"] .jumpscare-nav-btn {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  background: linear-gradient(90deg, #ff6b1a, #8b00ff);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: jumpscarePulse 2.5s ease-in-out infinite;
}
html[data-theme="halloween"] .jumpscare-nav-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 0 25px rgba(255, 107, 26, 0.7);
  animation-play-state: paused;
}
@keyframes jumpscarePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 107, 26, 0.4); }
  50%      { box-shadow: 0 0 16px rgba(255, 107, 26, 0.8); }
}

/* Mobile-Nav (Burger-Menü): mehr Luft rundherum + größerer Touch-Bereich */
@media (max-width: 720px) {
  #jumpscare-nav-li {
    margin: 0.9rem 0;
    text-align: center;
    border-bottom: none !important;   /* Nav-Default-Divider weg (Button hat eigenen Rand) */
  }
  html[data-theme="halloween"] #jumpscare-nav-li .jumpscare-nav-btn {
    display: inline-block;
    padding: 0.8rem 1.6rem !important;
    font-size: 1rem !important;
    letter-spacing: 1.5px !important;
    margin: 0 !important;
  }
}

/* Fullscreen-Overlay beim Klick — maximaler Scare-Faktor */
.jumpscare-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.08s ease-out;
  pointer-events: none;
}
.jumpscare-overlay.visible {
  opacity: 1;
}
.jumpscare-overlay img {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  animation: jumpscareShake 0.08s infinite;
}
@keyframes jumpscareShake {
  0%   { transform: translate(-4px, 2px) scale(1.02); }
  25%  { transform: translate(5px, -3px) scale(1.00); }
  50%  { transform: translate(-3px, -4px) scale(1.04); }
  75%  { transform: translate(4px, 5px) scale(1.01); }
  100% { transform: translate(0, 0) scale(1.03); }
}

/* ===== Reduced-Motion: Partikel + Badge-Pulse + Jumpscare-Shake abschalten ===== */
@media (prefers-reduced-motion: reduce) {
  .theme-badge { animation: none; }
  #theme-particles { display: none; }
  html[data-theme="halloween"] .jumpscare-nav-btn { animation: none; }
  .jumpscare-overlay img { animation: none; }
}