/* ═══════════════════════════════════════════════════════════════════
   SpotlyBD — Homepage-specific styles (extracted from index.php)
   ─────────────────────────────────────────────────────────────────
   P1 · Extracted so the browser can cache them (was ~30KB inline on
   every page load). Loaded via <link rel="stylesheet"> with the
   assetUrl() cache-busting version query so admins can edit + deploy
   without hard-refresh worries.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Language toggle in the nav ── */
.sbd-lang-toggle a {
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: .02em;
  transition: all .15s;
}
.sbd-lang-toggle .sbd-lang-short { display: none; }
@media (max-width: 500px) {
  .sbd-lang-toggle a           { padding: 4px 9px; font-size: .72rem; }
  .sbd-lang-toggle .sbd-lang-full  { display: none; }
  .sbd-lang-toggle .sbd-lang-short { display: inline; }
}

/* ── Live-data widget pulsing dot (was 1-line inline on line 628) ── */
@keyframes sbd-live-pulse {
  0%, 100% { opacity: 1;   transform: scale(1);   }
  50%      { opacity: .4;  transform: scale(1.3); }
}

/* ── Trending Now card hover ── */
.sbd-trending-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -12px rgba(28, 25, 23, .15);
  border-color: var(--paprika, #c2410c) !important;
}

/* ── First-visit vs returning-visitor "How it works" summary ── */
.sbd-how-summary summary {
  outline: none;
  user-select: none;
}
.sbd-how-summary summary::-webkit-details-marker { display: none; }
.sbd-how-summary[open] summary { color: var(--paprika-dark, #9a3412); }