/* Ruckaroo dusk theme: one dark canvas, shared nav + footer, for static pages.
   Link this AFTER blog.css / page styles so it wins the cascade. */

:root {
  --dusk-bg: #08352D;
  --dusk-card: rgba(255, 255, 255, 0.05);
  --dusk-border: rgba(255, 255, 255, 0.12);
}

body {
  background: var(--dusk-bg);
  color: #fff;
}

/* ── Nav: transparent fade at top, solid after scroll ── */
.site-nav {
  background: linear-gradient(180deg, rgba(5, 15, 12, 0.7), transparent);
  border-bottom: none;
  transition: background 0.4s;
  box-shadow: none;
}
.site-nav.nav-solid {
  background: rgba(11, 21, 18, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-nav-links a { color: rgba(255, 255, 255, 0.85); }
.site-nav-links a:hover, .site-nav-links a.nav-active { color: #FF5722; }
.site-nav-toggle { color: #fff; }
.site-nav-mobile { background: rgba(11, 21, 18, 0.97); }
.site-nav-mobile a { color: rgba(255, 255, 255, 0.9); }

/* ── Footer: canonical, transparent on the canvas ── */
.blog-footer {
  background:
    linear-gradient(180deg, var(--dusk-bg) 0%, rgba(11, 21, 18, 0.78) 45%, rgba(8, 21, 18, 0.94) 100%),
    url('/images/ember-dusk.webp') center 72% / cover no-repeat;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
}
.blog-footer-copyright {
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.75rem;
  max-width: 72rem;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* ── Blog / pillar article surfaces ── */
.post-header { background: transparent; }
.post-header::after { display: none; }
.post-body h2 { color: #fff; }
.post-body h3, .post-body h4 { color: #fff; }
.post-body p, .post-body li { color: rgba(255, 255, 255, 0.82); }
.post-body strong { color: #fff; }
.post-body a { color: #FF8A65; }
.post-body a:hover { color: #FF5722; }
.post-body blockquote {
  background: var(--dusk-card);
  border-left: 4px solid #FF5722;
  }
.post-body blockquote p { color: #fff; }
.post-body .data-table, .data-table {
  background: var(--dusk-card);
  border: 1px solid var(--dusk-border);
}
.post-body .data-table thead th, .data-table thead th {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.post-body .data-table tbody td, .data-table tbody td {
  color: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: transparent;
}
.post-meta, .post-meta span { color: rgba(255, 255, 255, 0.6); }
.post-tag { background: rgba(255, 87, 34, 0.15); color: #FF8A65; }

/* FAQ */
.faq-section { background: var(--dusk-card); border: 1px solid var(--dusk-border); }
.faq-item { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.faq-question { color: #fff; }
.faq-answer { color: rgba(255, 255, 255, 0.78); }

/* Cards (blog index, related posts) */
.blog-card {
  background: var(--dusk-card);
  border: 1px solid var(--dusk-border);
  box-shadow: none;
}
.blog-card-title { color: #fff; }
.blog-card-excerpt { color: rgba(255, 255, 255, 0.72); }
.blog-card-meta { color: rgba(255, 255, 255, 0.5); }
.blog-card-read { color: #FF8A65; }
.blog-card-tag { background: rgba(255, 255, 255, 0.1); color: #A7E3D0; }
.related-section { background: transparent; }
.related-section h2 { color: #fff; }

/* Blog index hero + generic headers that were light */
.blog-hero h1, .blog-hero p { color: #fff; }

/* Legal pages: keep the white document card readable, dark surround */
main.bg-white { box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }

/* Blog index fixes on the canvas */
.blog-hero {
  background:
    linear-gradient(180deg, rgba(11, 21, 18, 0.85) 0%, rgba(11, 21, 18, 0.55) 60%, var(--dusk-bg) 100%),
    url('/images/ember-dusk.webp') center 30% / cover no-repeat;
  padding: 9rem 1.5rem 4.5rem;
}
.blog-hero h1 { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5); }
.blog-hero p { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55); }
.blog-hero::after { display: none; }
.blog-hero p a { color: #FF8A65; }
.blog-grid-section { background: transparent; }
.blog-grid-section h2 { color: #fff; }