/* =================================
   Creation Discovery - Custom Styles
   Deep Space Cosmic Theme
   ================================= */

:root {
  --primary: #6B46C1;
  --secondary: #1E3A8A;
  --accent: #A78BFA;
  --starlight: #F0E68C;
  --nebula: #8B5CF6;
  --dark: #0F172A;
  --text-light: #E2E8F0;
  --text-dark: #1E293B;
  --card-bg: rgba(30, 41, 59, 0.8);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--dark);
  color: var(--text-light);
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3rem;
  background: linear-gradient(135deg, var(--accent), var(--starlight));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

h2 {
  font-size: 2.25rem;
  color: var(--accent);
}

h3 {
  font-size: 1.75rem;
  color: var(--text-light);
}

/* Animated Starfield Background */
.starfield {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.starfield::before,
.starfield::after {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  box-shadow:
    100px 200px white, 300px 400px white, 500px 100px white,
    700px 300px white, 900px 500px white, 200px 600px white,
    400px 800px white, 600px 200px white, 800px 700px white,
    150px 350px white, 350px 550px white, 550px 150px white,
    750px 450px white, 950px 650px white, 250px 750px white,
    1100px 300px white, 1300px 600px white, 1500px 200px white,
    1700px 500px white, 1900px 400px white, 1200px 800px white,
    50px 450px white, 450px 650px white, 650px 250px white,
    850px 550px white, 1050px 350px white, 1250px 150px white,
    1450px 700px white, 1650px 400px white, 1850px 600px white;
  animation: starMove 100s linear infinite;
}

.starfield::after {
  animation-duration: 150s;
  box-shadow:
    200px 300px rgba(255,255,255,0.5), 400px 500px rgba(255,255,255,0.5),
    600px 200px rgba(255,255,255,0.5), 800px 400px rgba(255,255,255,0.5),
    1000px 600px rgba(255,255,255,0.5), 300px 700px rgba(255,255,255,0.5),
    500px 900px rgba(255,255,255,0.5), 700px 300px rgba(255,255,255,0.5),
    900px 800px rgba(255,255,255,0.5), 250px 450px rgba(255,255,255,0.5),
    450px 650px rgba(255,255,255,0.5), 650px 250px rgba(255,255,255,0.5),
    850px 550px rgba(255,255,255,0.5), 1050px 750px rgba(255,255,255,0.5),
    1250px 350px rgba(255,255,255,0.5), 1450px 650px rgba(255,255,255,0.5);
}

@keyframes starMove {
  from { transform: translateY(0); }
  to { transform: translateY(-1000px); }
}

/* Navigation */
.navbar {
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 20px rgba(107, 70, 193, 0.3);
  font-family: 'Space Grotesk', sans-serif;
}

.navbar-brand .navbar-item {
  font-family: 'Orbitron', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--accent) !important;
}

.navbar-item {
  color: var(--text-light) !important;
  transition: all 0.3s ease;
}

.navbar-item:hover {
  background-color: rgba(107, 70, 193, 0.2) !important;
  color: var(--starlight) !important;
}

/* Hero Section */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--secondary), var(--dark));
  overflow: hidden;
}

.hero-body {
  position: relative;
  z-index: 1;
  padding: 6rem 1.5rem;
}

.hero .title {
  text-shadow: 0 0 20px rgba(167, 139, 250, 0.5);
}

.hero .subtitle {
  color: var(--text-light);
  font-size: 1.25rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Buttons */
.button.is-primary {
  background: linear-gradient(135deg, var(--nebula), var(--primary));
  border: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
}

.button.is-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(139, 92, 246, 0.6);
}

.button.is-light {
  background: rgba(226, 232, 240, 0.1);
  color: var(--text-light);
  border: 2px solid var(--accent);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  transition: all 0.3s ease;
}

.button.is-light:hover {
  background: var(--accent);
  color: var(--dark);
  border-color: var(--accent);
}

/* Cards */
.card {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: all 0.3s ease;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 40px rgba(139, 92, 246, 0.4);
  border-color: var(--accent);
}

.card-image img {
  border-radius: 12px 12px 0 0;
}

.card-content {
  color: var(--text-light);
}

.card-content .title {
  color: var(--accent);
  font-size: 1.5rem;
}

/* Sections */
.section {
  position: relative;
  padding: 4rem 1.5rem;
}

.section.dark-section {
  background: var(--dark);
}

.section.space-section {
  background: linear-gradient(180deg, var(--dark), var(--secondary));
}

/* Content Boxes */
.content-box {
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(167, 139, 250, 0.2);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
}

/* Article Content */
.article-content {
  background: rgba(255, 255, 255, 0.95);
  color: var(--text-dark);
  padding: 3rem;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  margin: 2rem 0;
}

.article-content h2 {
  color: var(--primary);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.article-content h3 {
  color: var(--secondary);
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

.article-content p {
  margin-bottom: 1.25rem;
  line-height: 1.8;
}

.article-content ul, .article-content ol {
  margin-left: 2rem;
  margin-bottom: 1.25rem;
}

.article-content li {
  margin-bottom: 0.5rem;
}

.article-content strong {
  color: var(--primary);
  font-weight: 600;
}

/* Article Hero Image */
.article-hero {
  position: relative;
  height: 500px;
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-hero-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
  padding: 2rem;
  color: white;
}

/* Figure Captions */
.figure-container {
  margin: 2rem 0;
}

.figure-container img {
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.figure-caption {
  font-size: 0.9rem;
  color: #64748B;
  font-style: italic;
  margin-top: 0.75rem;
  text-align: center;
}

/* Breadcrumbs */
.breadcrumb {
  background: transparent;
  font-family: 'Space Grotesk', sans-serif;
}

.breadcrumb a {
  color: var(--accent);
  transition: color 0.3s ease;
}

.breadcrumb a:hover {
  color: var(--starlight);
}

.breadcrumb li.is-active a {
  color: var(--text-light);
}

/* Footer */
.footer {
  background: linear-gradient(135deg, var(--dark), var(--secondary));
  color: var(--text-light);
  padding: 3rem 1.5rem;
  border-top: 2px solid var(--accent);
}

.footer h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  color: var(--starlight);
}

.footer a {
  color: var(--accent);
  transition: color 0.3s ease;
}

.footer a:hover {
  color: var(--starlight);
  text-decoration: underline;
}

/* External Links */
.external-links {
  background: rgba(167, 139, 250, 0.1);
  border-left: 4px solid var(--accent);
  padding: 1.5rem;
  margin: 2rem 0;
  border-radius: 8px;
}

.external-links h3 {
  color: var(--accent);
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.external-links ul {
  list-style: none;
  margin-left: 0;
}

.external-links li {
  margin-bottom: 0.75rem;
}

.external-links a {
  color: var(--nebula);
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.external-links a:hover {
  color: var(--accent);
  transform: translateX(5px);
}

/* Scripture Quote */
.scripture-quote {
  background: linear-gradient(135deg, rgba(107, 70, 193, 0.2), rgba(139, 92, 246, 0.2));
  border: 2px solid var(--accent);
  border-radius: 12px;
  padding: 2rem;
  margin: 2rem 0;
  text-align: center;
  font-style: italic;
  font-size: 1.25rem;
  color: var(--starlight);
  box-shadow: 0 4px 20px rgba(107, 70, 193, 0.3);
}

/* Responsive */
@media screen and (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }

  .hero-body { padding: 3rem 1.5rem; }

  .article-content { padding: 1.5rem; }

  .article-hero { height: 300px; }
}

/* Utility Classes */
.glow {
  text-shadow: 0 0 10px rgba(167, 139, 250, 0.8);
}

.cosmic-gradient {
  background: linear-gradient(135deg, var(--primary), var(--nebula), var(--accent));
}

.fade-in {
  animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}