/* ============================================================
   gacha_doc.css — Overrides & extras for gacha_doc.html
   Load AFTER main.css
   ============================================================ */

/* Sticky nav (scrolls with content, not fixed) */
nav {
  position: sticky;
}

/* Tighter section padding for the doc layout */
section {
  padding: 3rem;
}

.section-title {
  margin-bottom: 1.6rem;
}

/* Wider sidebar for the longer doc nav */
.docs-layout {
  grid-template-columns: 260px 1fr;
}

.docs-sidebar {
  padding: 1rem 0;
}

.docs-sidebar-title {
  padding: 0 1rem;
  margin: 0.5rem 0 0.6rem;
}

.docs-nav-item {
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
}

.docs-content {
  padding: 1.5rem 1.8rem;
}

.docs-content h2 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 0.8rem;
}

.docs-content p {
  font-size: 0.95rem;
  margin: 0.75rem 0;
}

.docs-content h3 {
  margin: 1.2rem 0 0.4rem;
}

.docs-content ul,
.docs-content ol {
  margin: 0.4rem 0 0.8rem 1.2rem;
  color: var(--muted);
}

.docs-content li {
  margin: 0.25rem 0;
}

/* Breathing room for dividers */
.section-divider {
  margin: 2rem 0;
}

/* Doc page uses <header class="hero"> not <section class="hero"> */
header.hero {
  min-height: 52vh;
  display: grid;
  align-items: center;
  padding: 6rem 3rem 3rem;
  position: relative;
  z-index: 1;
}

/* Wider hero inner for doc header */
header.hero .hero-inner {
  max-width: 980px;
  margin: 0 auto;
}

header.hero .hero-tag {
  margin-bottom: 1.2rem;
}

header.hero .hero h1 {
  font-size: clamp(2rem, 6vw, 3.6rem);
}

/* ---- CALLOUT BOXES ---- */
.note {
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.25);
  color: #c4b5fd;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.tip {
  background: rgba(0,212,255,0.08);
  border: 1px solid rgba(0,212,255,0.25);
  color: #8be9fd;
  padding: 0.8rem 1rem;
  border-radius: 4px;
  font-size: 0.9rem;
}

.banner {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1rem 1.2rem;
  background: linear-gradient(180deg, rgba(0,212,255,0.05), rgba(124,58,237,0.05));
}

/* ---- RESPONSIVE (doc breakpoint is wider) ---- */
@media (max-width: 900px) {
  nav { padding: 1rem 1.2rem; flex-wrap: wrap; }
  header.hero { padding: 5rem 1.5rem 2rem; }
  section { padding: 1.5rem; }
  .docs-layout { grid-template-columns: 1fr; }
  .docs-sidebar { border-right: none; border-bottom: 1px solid var(--border); }
  .hero-orb { display: none; }
}