/* ============================================================
   Component Library Documentation — Shared Styles
   Author: Nikba Creative Studio
   ============================================================ */

:root {
  --doc-primary:    #312E81;
  --doc-primary-d:  #1E1B6E;
  --doc-accent:     #0D9488;
  --doc-accent-d:   #0A7A71;
  --doc-text:       #11181C;
  --doc-text-muted: #475569;
  --doc-border:     #E2E8F0;
  --doc-bg:         #F8FAFC;
  --doc-surface:    #FFFFFF;
  --doc-sidebar-w:  260px;
  --font: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--doc-bg);
  color: var(--doc-text);
  line-height: 1.6;
  min-height: 100vh;
}

/* ─── Layout ───────────────────────────────────────────────── */
.doc-layout {
  display: flex;
  min-height: 100vh;
}

/* ─── Sidebar ───────────────────────────────────────────────── */
.doc-sidebar {
  width: var(--doc-sidebar-w);
  min-width: var(--doc-sidebar-w);
  background: var(--doc-surface);
  border-right: 1px solid var(--doc-border);
  padding: 24px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.doc-sidebar .doc-logo {
  display: block;
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--doc-border);
  margin-bottom: 24px;
  text-decoration: none;
}

.doc-sidebar .doc-logo:hover { background: transparent; }

.doc-sidebar .doc-logo img {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 40px;
  width: auto;
}

.doc-sidebar nav a {
  display: block;
  padding: 10px 24px;
  color: var(--doc-text-muted);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.15s, background 0.15s;
}

.doc-sidebar nav a:hover {
  color: var(--doc-primary);
  background: rgba(var(--color-primary-rgb), 0.06);
}

.doc-sidebar nav a.active {
  color: var(--doc-primary);
  font-weight: 600;
  background: rgba(var(--color-primary-rgb), 0.08);
  border-left: 3px solid var(--doc-primary);
  padding-left: 21px;
}

.doc-sidebar .nav-group {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--doc-text-muted);
  padding: 16px 24px 8px;
}

.doc-sidebar .nav-group:first-of-type { padding-top: 0; }

.doc-sidebar .doc-author {
  font-size: 12px;
  color: var(--doc-text-muted);
  padding: 24px 24px 0;
  margin-top: 24px;
  border-top: 1px solid var(--doc-border);
}

/* ─── Main Content ───────────────────────────────────────────── */
.doc-main {
  flex: 1;
  padding: 48px 40px 80px;
  min-width: 0; /* allow flex shrink */
}

.doc-main > h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--doc-primary);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
}

.doc-main .doc-subtitle {
  font-size: 16px;
  color: var(--doc-text-muted);
  margin-bottom: 32px;
}

.doc-main > h2 {
  font-size: 20px;
  font-weight: 700;
  color: var(--doc-text);
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--doc-border);
}

.doc-main h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--doc-text);
  margin: 24px 0 12px;
}

.doc-main > p {
  margin-bottom: 16px;
  color: var(--doc-text);
}

.doc-main ul, .doc-main ol {
  margin: 0 0 16px 24px;
}

.doc-main li { margin-bottom: 6px; }

/* ─── Preview Frame ─────────────────────────────────────────── */
.doc-preview {
  border: 1px solid var(--doc-border);
  border-radius: 12px;
  overflow: hidden;
  margin: 24px 0;
  background: var(--doc-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.doc-preview.preview-mega { overflow: visible; }
/* Keep mobile simulation actually narrow: mega uses overflow:visible, which can let min-content expand the layout */
.doc-preview.doc-preview-mobile.preview-mega {
  overflow-x: clip;
  overflow-y: visible;
}

.doc-preview-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--doc-text-muted);
  padding: 12px 20px;
  background: var(--doc-bg);
  border-bottom: 1px solid var(--doc-border);
}

.doc-preview .preview-content {
  padding: 32px 40px;
  min-height: 200px;
  background: var(--doc-bg);
}
/* Same canvas as sources/*.html (e.g. advantages-section body) — not flat doc gray */
.doc-preview .preview-content.preview-source-page {
  background: #eef2f7;
}

.doc-preview .preview-content.preview-tall { min-height: 500px; }
.doc-preview .preview-content.preview-hero {
  min-height: 700px;
  min-width: 0;
  overflow-x: clip;
}

/* Typography (and other) demos: same blue canvas as .section.v-dark, not flat doc gray */
.doc-preview .preview-content.v-dark {
  background: linear-gradient(
    140deg,
    var(--color-primary-dark) 0%,
    var(--color-primary) 60%,
    var(--color-primary-light) 100%
  );
}

/* Mobile preview frame — constrains width to simulate phone viewport */
.doc-preview-mobile .preview-content {
  max-width: 400px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  min-width: 0;
  overflow-x: clip;
}

/* ─── Links ─────────────────────────────────────────────────── */
.doc-main a {
  color: var(--doc-primary);
  text-decoration: none;
}

.doc-main a:hover { text-decoration: underline; }

.doc-source-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #E8EEF7;
  color: var(--doc-primary);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  margin-top: 16px;
}

.doc-source-link:hover {
  background: #D6E0F0;
  text-decoration: none;
}

/* ─── Tables ────────────────────────────────────────────────── */
.doc-main table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 24px;
  font-size: 14px;
}

.doc-main th,
.doc-main td {
  padding: 12px 16px;
  text-align: left;
  border: 1px solid var(--doc-border);
}

.doc-main th {
  background: var(--doc-bg);
  font-weight: 600;
  color: var(--doc-text);
}

.doc-main td { color: var(--doc-text-muted); }

.doc-main tr:nth-child(even) td { background: rgba(248, 250, 252, 0.8); }

/* ─── Code Blocks ────────────────────────────────────────────── */
.doc-main pre {
  background: #1E293B;
  color: #E2E8F0;
  padding: 20px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 13px;
  line-height: 1.5;
  margin: 16px 0;
}

.doc-main code {
  font-family: 'SF Mono', Monaco, 'Consolas', monospace;
}

.doc-main p code,
.doc-main li code {
  background: #E2E8F0;
  color: #334155;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 13px;
}

/* ─── Responsive ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .doc-layout { flex-direction: column; }

  .doc-sidebar {
    width: 100%;
    min-width: 100%;
    height: auto;
    position: relative;
    border-right: none;
    border-bottom: 1px solid var(--doc-border);
  }

  .doc-main { padding: 32px 24px 60px; }
}