/* ==========================================================================
   Rocket Game Booster - Shared Styles
   Dark gaming theme. Used across all HTML pages.
   ========================================================================== */

:root {
  --background: oklch(0.08 0.01 260);
  --foreground: oklch(0.98 0 0);
  --card: oklch(0.12 0.01 260);
  --card-foreground: oklch(0.98 0 0);
  --primary: oklch(0.65 0.25 145);
  --primary-foreground: oklch(0.08 0.01 260);
  --secondary: oklch(0.18 0.01 260);
  --secondary-foreground: oklch(0.98 0 0);
  --muted: oklch(0.18 0.01 260);
  --muted-foreground: oklch(0.65 0 0);
  --accent: oklch(0.55 0.22 30);
  --accent-foreground: oklch(0.98 0 0);
  --destructive: oklch(0.55 0.22 25);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.25 0.01 260);
  --input: oklch(0.18 0.01 260);
  --ring: oklch(0.65 0.25 145);
  --radius: 0.75rem;
}

/* Base body styling */
body {
  background-color: var(--background);
  color: var(--foreground);
}

/* Glow animation used on primary CTA buttons */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px oklch(0.65 0.25 145 / 0.3);
  }
  50% {
    box-shadow: 0 0 40px oklch(0.65 0.25 145 / 0.5);
  }
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* Smooth scrolling for in-page anchor links */
html {
  scroll-behavior: smooth;
}

/* Hidden-until-ready helper */
[x-cloak] {
  display: none;
}

/* Custom scrollbar to match the dark theme */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--background);
}

::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--muted-foreground);
}

/* FAQ accordion open/close transition */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.faq-answer.open {
  grid-template-rows: 1fr;
}

.faq-answer > div {
  overflow: hidden;
}

/* Hide scrollbar (used by blog category filter row) */
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Clamp text to 2 lines (blog excerpts) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}