/* ============================================================================
   docs.css — Documentation page styles for OSUPhoenix Streamworks
   ============================================================================
   Extends /styles.css. Uses the same design tokens — never redefine them.

   WHAT CHANGED IN THIS VERSION (layout fix):
     - Hero gets much more vertical padding and space between elements
     - Layout grid gap increased from var(--space-10) to var(--space-16)
     - Content column gets explicit left padding so text doesn't butt up to sidebar
     - Sidebar items have more vertical padding between them
     - Heading top margins increased significantly for better section separation
     - Paragraph max-width widened slightly for readability
     - Callout boxes are larger and more visually distinct
     - Overall vertical rhythm loosened throughout

   TABLE OF CONTENTS
     1.  Layout
     2.  Hero
     3.  Sidebar
     4.  Content typography
     5.  Callout boxes
     6.  Steps
     7.  Requirements
     8.  Tables
     9.  Code blocks
     10. Images
     11. Anchors
     12. Checklist
     13. Help block
     14. Responsive
============================================================================ */


/* ============================================================================
   1. LAYOUT
   ============================================================================ */

.docs-layout {
  padding-top: var(--nav-height);
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "hero    hero"
    "sidebar content";
  max-width: var(--container-max);
  margin: 0 auto;
  padding-left: var(--space-8);
  padding-right: var(--space-8);
  /* Increased gap — was --space-10, now --space-16 so sidebar and
     content breathe separately */
  gap: 0 var(--space-16);
}


/* ============================================================================
   2. HERO
   ============================================================================ */

.docs-hero {
  grid-area: hero;
  /* More vertical padding — was space-12/space-10, now space-16/space-14 */
  padding: var(--space-16) 0 var(--space-14);
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
  /* More space below hero before sidebar/content start */
  margin-bottom: var(--space-12);
}

.docs-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(200,200,200,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(200,200,200,0.04) 1px, transparent 1px),
    radial-gradient(ellipse at 70% 40%, var(--red-tint), transparent 60%);
  background-size: 60px 60px, 60px 60px, 100% 100%;
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}

.docs-hero-inner {
  position: relative;
  z-index: 1;
}

/* Breadcrumb — more space below it before the section label */
.docs-hero .breadcrumb {
  margin-bottom: var(--space-6);
}

/* Section label — more space below before the title */
.docs-hero .section-label {
  margin-bottom: var(--space-6);
}

.docs-hero-title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-4xl), 6vw, var(--text-6xl));
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  /* More space below title before description */
  margin: 0 0 var(--space-6);
}

.docs-hero-desc {
  font-size: var(--text-lg);
  line-height: 1.7;
  color: var(--text-body);
  max-width: 62ch;
  /* More space below description before badges */
  margin: 0 0 var(--space-8);
}

/* Meta badges row */
.docs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  /* More space below badges before CTA buttons */
  margin-bottom: var(--space-8);
}

.docs-badge {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Bigger padding than before so badges don't look squeezed */
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border-default);
  color: var(--silver-dim);
  background: var(--bg-surface);
}

.docs-badge--free {
  color: var(--red);
  border-color: var(--border-red);
  background: var(--red-tint);
}

.docs-badge--paid {
  color: var(--silver);
  border-color: var(--border-strong);
}

.docs-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}


/* ============================================================================
   3. SIDEBAR
   ============================================================================ */

.docs-sidebar {
  grid-area: sidebar;
  position: sticky;
  top: calc(var(--nav-height) + var(--space-6));
  max-height: calc(100vh - var(--nav-height) - var(--space-12));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
  padding-bottom: var(--space-12);
  align-self: start;
}

.docs-sidebar::-webkit-scrollbar { width: 4px; }
.docs-sidebar::-webkit-scrollbar-track { background: transparent; }
.docs-sidebar::-webkit-scrollbar-thumb { background: var(--border-default); }

.sidebar-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dim);
  /* More space below heading before nav links start */
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}

.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-nav li {
  margin: 0;
}

.sidebar-nav a {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--text-muted);
  /* More vertical padding — was space-1, now space-2 so items are easier to tap */
  padding: var(--space-2) 0 var(--space-2) var(--space-4);
  border-left: 2px solid transparent;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.sidebar-nav a:hover {
  color: var(--text-body);
  border-left-color: var(--border-strong);
}

.sidebar-nav a.active {
  color: var(--red);
  border-left-color: var(--red);
  font-weight: 500;
}

.sidebar-nav .sidebar-sub a {
  padding-left: var(--space-6);
  font-size: calc(var(--text-sm) * 0.92);
}

.sidebar-divider {
  height: 1px;
  background: var(--border-subtle);
  margin: var(--space-8) 0;
}

.sidebar-back {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-dim);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

.sidebar-back:hover { color: var(--red); }


/* ============================================================================
   4. CONTENT AREA TYPOGRAPHY
   ============================================================================ */

.docs-content {
  grid-area: content;
  min-width: 0;
  /* Left padding separates content from sidebar visually */
  padding-left: var(--space-2);
  padding-bottom: var(--space-20);
}

/* ---- Headings ---- */

.docs-content h2 {
  font-family: var(--font-display);
  font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.01em;
  line-height: 1.15;
  /* Generous top margin so sections feel clearly separated */
  margin: var(--space-16) 0 var(--space-6);
  padding-top: var(--space-10);
  border-top: 1px solid var(--border-subtle);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.docs-content h2:first-child {
  margin-top: 0;
  border-top: none;
  padding-top: 0;
}

.docs-content h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  line-height: 1.2;
  /* More space above h3 than before */
  margin: var(--space-10) 0 var(--space-4);
  scroll-margin-top: calc(var(--nav-height) + var(--space-6));
}

.docs-content h4 {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin: var(--space-8) 0 var(--space-3);
}

/* ---- Body text ---- */

.docs-content p {
  font-size: var(--text-base);
  line-height: 1.8;
  color: var(--text-body);
  /* More space between paragraphs */
  margin-bottom: var(--space-5);
  max-width: 72ch;
}

/* ---- Lists ---- */

.docs-content ul,
.docs-content ol {
  margin: 0 0 var(--space-6) var(--space-4);
  padding: 0;
}

.docs-content ul { list-style: none; }
.docs-content ol { list-style: decimal; }

.docs-content ul li {
  position: relative;
  padding-left: var(--space-5);
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-body);
  /* More space between list items */
  margin-bottom: var(--space-3);
}

.docs-content ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--red);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  top: 0.4em;
  line-height: 1;
}

.docs-content ol li {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}

.docs-content ol li::marker {
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
}

.docs-content ul ul,
.docs-content ol ul,
.docs-content ul ol,
.docs-content ol ol {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ---- Inline elements ---- */

.docs-content strong {
  color: var(--text-primary);
  font-weight: 700;
}

.docs-content em {
  color: var(--silver);
  font-style: italic;
}

.docs-content code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  font-weight: 500;
  color: var(--red);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  padding: 0.15em 0.45em;
  border-radius: 2px;
  white-space: nowrap;
}

/* ---- Horizontal rule ---- */

.docs-content hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-12) 0;
}

/* ---- Links ---- */

.docs-content a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-thickness var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.docs-content a:hover {
  color: var(--red-bright);
  text-decoration-thickness: 2px;
}


/* ============================================================================
   5. CALLOUT / WARNING / TIP BOXES
   ============================================================================ */

.docs-content blockquote,
.callout {
  position: relative;
  /* More padding so the box feels substantial, not cramped */
  padding: var(--space-5) var(--space-6) var(--space-5) var(--space-7);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--red);
  /* More vertical margin so callouts stand apart from surrounding text */
  margin: var(--space-8) 0;
}

.docs-content blockquote p,
.callout p {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--text-body);
  max-width: none;
}

.docs-content blockquote strong,
.callout strong {
  color: var(--red);
}

/* Warning variant */
.callout-warning {
  border-left-color: #e9b949;
  background: rgba(233, 185, 73, 0.05);
}
.callout-warning strong { color: #e9b949; }

/* Tip variant */
.callout-tip {
  border-left-color: var(--cyan);
  background: rgba(57, 212, 197, 0.05);
}
.callout-tip strong { color: var(--cyan); }

/* Info variant */
.callout-info {
  border-left-color: var(--silver-dim);
}
.callout-info strong { color: var(--silver); }


/* ============================================================================
   6. STEPS
   ============================================================================ */

.docs-steps {
  list-style: none;
  padding: 0;
  margin: var(--space-8) 0 var(--space-10);
  position: relative;
  counter-reset: step-counter;
}

.docs-steps::before {
  content: '';
  position: absolute;
  left: 19px;
  top: 38px;
  bottom: 20px;
  width: 1px;
  background: var(--border-default);
}

.docs-steps li {
  display: flex;
  gap: var(--space-6);
  /* More space between steps */
  margin-bottom: var(--space-8);
  position: relative;
}

.docs-steps li::before {
  content: counter(step-counter);
  counter-increment: step-counter;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--red);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.step-body {
  padding-top: var(--space-2);
  flex: 1;
  min-width: 0;
}

.step-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: var(--space-3);
  line-height: 1.2;
}

.step-body p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--text-body);
  margin-bottom: var(--space-4);
}

.step-body p:last-child { margin-bottom: 0; }


/* ============================================================================
   7. REQUIREMENTS LIST
   ============================================================================ */

.docs-requirements {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  padding: var(--space-7);
  margin: var(--space-8) 0;
  position: relative;
}

.docs-requirements::before {
  content: 'REQUIREMENTS';
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--silver-dim);
  margin-bottom: var(--space-5);
}

.docs-requirements ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.docs-requirements li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--text-body);
  /* More space between requirement items */
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.docs-requirements li:last-child { border-bottom: none; }

.docs-requirements li::before {
  content: '✓';
  color: var(--red);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
  margin-top: 0.1em;
}


/* ============================================================================
   8. TABLES
   ============================================================================ */

.docs-content table {
  width: 100%;
  border-collapse: collapse;
  /* More vertical margin around tables */
  margin: var(--space-8) 0;
  font-size: var(--text-sm);
  display: block;
  overflow-x: auto;
}

.docs-content thead th {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver-dim);
  background: var(--bg-elevated);
  /* More padding in table headers */
  padding: var(--space-4) var(--space-5);
  text-align: left;
  border-bottom: 1px solid var(--border-default);
  white-space: nowrap;
}

.docs-content tbody tr {
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-out);
}

.docs-content tbody tr:hover {
  background: var(--bg-surface);
}

.docs-content tbody td {
  /* More padding in table cells */
  padding: var(--space-4) var(--space-5);
  color: var(--text-body);
  line-height: 1.65;
  vertical-align: top;
}

.docs-content tbody td:first-child {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
}


/* ============================================================================
   9. CODE BLOCKS
   ============================================================================ */

.docs-content pre {
  position: relative;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--border-red);
  padding: var(--space-6) var(--space-6) var(--space-6) var(--space-7);
  margin: var(--space-8) 0;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.docs-content pre::-webkit-scrollbar { height: 4px; }
.docs-content pre::-webkit-scrollbar-thumb { background: var(--border-default); }

.docs-content pre code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--text-body);
  background: none;
  border: none;
  padding: 0;
  white-space: pre;
}


/* ============================================================================
   10. IMAGES
   ============================================================================ */

.docs-content img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border-default);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  margin: var(--space-8) 0;
}

.docs-image { margin: var(--space-8) 0; }
.docs-image img { margin: 0 0 var(--space-2); }
.docs-image-caption {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: 0.05em;
}


/* ============================================================================
   11. SECTION ANCHORS
   ============================================================================ */

.docs-content h2,
.docs-content h3 {
  position: relative;
}

.anchor-link {
  position: absolute;
  left: -1.5em;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  color: var(--silver-dim);
  font-family: var(--font-mono);
  font-size: 0.75em;
  text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.docs-content h2:hover .anchor-link,
.docs-content h3:hover .anchor-link { opacity: 1; }
.anchor-link:hover { color: var(--red); }


/* ============================================================================
   12. CHECKLIST
   ============================================================================ */

.docs-checklist {
  list-style: none;
  padding: var(--space-6);
  margin: var(--space-6) 0 var(--space-8);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
}

.docs-checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  /* More vertical padding between checklist items */
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--text-base);
  color: var(--text-body);
  line-height: 1.6;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-out);
}

.docs-checklist li:last-child { border-bottom: none; }

.docs-checklist li.checked {
  color: var(--text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--border-strong);
}

.docs-checklist li::before {
  content: '[ ]';
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--silver-dim);
  flex-shrink: 0;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-out);
}

.docs-checklist li.checked::before {
  content: '[✓]';
  color: var(--red);
}


/* ============================================================================
   13. HELP / CONTACT BLOCK
   ============================================================================ */

.docs-help {
  margin-top: var(--space-16);
  padding-top: var(--space-12);
  border-top: 1px solid var(--border-subtle);
}

.docs-help-heading {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: var(--space-8);
}

.docs-help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}

.docs-help-card {
  position: relative;
  padding: var(--space-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duration-normal) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.docs-help-card:hover {
  border-color: var(--border-red);
  transform: translateY(-2px);
}

.docs-help-card .corner {
  position: absolute;
  width: 6px;
  height: 6px;
  background: var(--border-strong);
  transition: background var(--duration-fast) var(--ease-out);
}
.docs-help-card:hover .corner { background: var(--red); }
.docs-help-card .corner--tl { top: 0; left: 0; }
.docs-help-card .corner--tr { top: 0; right: 0; }
.docs-help-card .corner--bl { bottom: 0; left: 0; }
.docs-help-card .corner--br { bottom: 0; right: 0; }

.help-card-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--silver-dim);
  margin-bottom: var(--space-3);
}

.help-card-value {
  font-size: var(--text-sm);
  color: var(--text-body);
  line-height: 1.5;
}


/* ============================================================================
   14. RESPONSIVE
   ============================================================================ */

@media (max-width: 900px) {
  .docs-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "sidebar"
      "content";
    padding-left: var(--space-5);
    padding-right: var(--space-5);
    gap: 0;
  }

  .docs-content {
    padding-left: 0;
  }

  .docs-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-8);
  }

  .sidebar-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    scrollbar-width: thin;
  }

  .sidebar-nav li { flex-shrink: 0; }

  .sidebar-nav a {
    border-left: none;
    border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
  }

  .sidebar-nav a.active {
    border-bottom-color: var(--red);
    border-left: none;
  }

  .sidebar-nav .sidebar-sub { display: none; }

  .docs-help-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .docs-layout {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }

  .docs-hero { padding: var(--space-10) 0 var(--space-8); }
  .docs-content table { font-size: var(--text-xs); }
  .docs-steps::before { display: none; }
}