/* =========================================================
   SolFi API Documentation — light theme, self-contained.
   Loaded only on /docs and /docs/{page}.
   ========================================================= */

.docs-body{ background:var(--bg-tint); color:var(--ink-900); }

/* ---------- Top bar ---------- */
.docs-topbar{
	position:sticky; top:0; z-index:50;
	background:linear-gradient(135deg, var(--navy-900), var(--navy-800) 60%, var(--navy-700));
	border-bottom:1px solid rgba(255,255,255,.08);
}
.docs-topbar-inner{
	max-width:1440px; margin:0 auto; padding:0 32px;
	height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.docs-brand{ display:flex; align-items:center; gap:12px; text-decoration:none; }
.docs-brand-logo{ font-family:var(--font-head); font-weight:800; font-size:22px; color:#fff; letter-spacing:-.02em; }
.docs-brand-logo .logo-dot{ color:var(--blue-400); }
.docs-brand-badge{
	font-size:13px; font-weight:600; color:rgba(255,255,255,.75);
	background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
	padding:4px 12px; border-radius:999px;
}
.docs-topbar-actions{ display:flex; align-items:center; gap:24px; }
.docs-topbar-actions .docs-home-link{ color:rgba(255,255,255,.8); font-weight:500; font-size:15px; text-decoration:none; transition:color .15s; }
.docs-topbar-actions .docs-home-link:hover{ color:#fff; }
.docs-topbar-actions .btn{ padding:10px 20px; font-size:14px; }
.docs-sidebar-toggle{
	display:none; background:none; border:none; color:#fff; cursor:pointer;
	width:36px; height:36px; align-items:center; justify-content:center;
}
.docs-sidebar-toggle span{ display:block; width:20px; height:2px; background:#fff; border-radius:2px; position:relative; }
.docs-sidebar-toggle span::before, .docs-sidebar-toggle span::after{
	content:''; position:absolute; left:0; width:20px; height:2px; background:#fff; border-radius:2px;
}
.docs-sidebar-toggle span::before{ top:-6px; }
.docs-sidebar-toggle span::after{ top:6px; }

/* ---------- Shell layout ---------- */
.docs-shell{ max-width:1440px; margin:0 auto; padding:0 32px; display:flex; align-items:flex-start; gap:48px; }

.docs-sidebar{
	flex:0 0 240px; position:sticky; top:72px;
	height:calc(100vh - 72px); overflow-y:auto;
	padding:32px 0 40px;
}
.docs-sidebar::-webkit-scrollbar{ width:6px; }
.docs-sidebar::-webkit-scrollbar-thumb{ background:var(--border); border-radius:99px; }

.docs-nav-group{ margin-bottom:28px; }
.docs-nav-group-title{
	font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
	color:var(--ink-400); margin:0 0 10px 12px;
}
.docs-nav-group ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.docs-nav-link{
	display:block; padding:9px 12px; border-radius:10px;
	font-size:14.5px; color:var(--ink-700); text-decoration:none; font-weight:500;
	transition:background .15s, color .15s;
}
.docs-nav-link:hover{ background:var(--bg-light); color:var(--ink-900); }
.docs-nav-link.is-active{ background:#e5f0ff; color:var(--blue-500); font-weight:700; }

/* ---------- Main content ---------- */
.docs-main{ flex:1 1 auto; min-width:0; padding:40px 0 80px; max-width:900px; }

.docs-eyebrow{ font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue-500); margin-bottom:10px; }
.docs-h1{ font-family:var(--font-head); font-size:38px; font-weight:800; letter-spacing:-.02em; color:var(--ink-900); margin:0 0 18px; line-height:1.15; }
.docs-lede{ font-size:17px; line-height:1.65; color:var(--ink-700); margin:0 0 28px; max-width:70ch; }

.docs-content h2{ font-family:var(--font-head); font-size:24px; font-weight:800; color:var(--ink-900); margin:44px 0 16px; letter-spacing:-.01em; }
.docs-content h2:first-child{ margin-top:0; }
.docs-content h3{ font-size:18px; font-weight:700; color:var(--ink-900); margin:28px 0 12px; }
.docs-content p{ font-size:15.5px; line-height:1.7; color:var(--ink-700); margin:0 0 16px; }
.docs-content ul, .docs-content ol{ margin:0 0 16px; padding-left:22px; }
.docs-content li{ font-size:15.5px; line-height:1.7; color:var(--ink-700); margin-bottom:6px; }
.docs-content li strong{ color:var(--ink-900); }
.docs-content a:not(.btn):not(.docs-card):not(.docs-card-link){ color:var(--blue-500); text-decoration:underline; text-underline-offset:2px; }
.docs-content .docs-card, .docs-content .docs-card h3, .docs-content .docs-card p, .docs-content .docs-card-link{ text-decoration:none; }
.docs-content hr{ border:none; border-top:1px solid var(--border); margin:36px 0; }

.docs-content code{
	font-family:var(--font-mono, 'JetBrains Mono', monospace);
	background:var(--bg-light); border:1px solid var(--border); color:var(--ink-900);
	padding:2px 6px; border-radius:6px; font-size:13.5px;
}

/* ---------- Cards (Explore the API) ---------- */
.docs-card-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:22px 0 36px; }
.docs-card{
	background:#fff; border:1px solid var(--border); border-radius:16px; padding:24px;
	text-decoration:none; display:block; transition:box-shadow .2s, transform .2s, border-color .2s;
}
.docs-card:hover{ box-shadow:0 12px 28px rgba(20,30,60,.08); transform:translateY(-2px); border-color:#c9d8f5; }
.docs-card-icon{ color:var(--blue-500); margin-bottom:14px; }
.docs-card h3{ font-size:17px; font-weight:700; color:var(--ink-900); margin:0 0 8px; }
.docs-card p{ font-size:14px; line-height:1.55; color:var(--ink-500); margin:0 0 12px; }
.docs-card-link{ font-size:14px; font-weight:700; color:var(--blue-500); display:inline-flex; align-items:center; gap:5px; }

/* ---------- Services cards (Presentation page) ---------- */
.docs-service-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:22px 0 36px; }
.docs-service-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:22px; }
.docs-service-card h3{ font-size:16px; font-weight:700; color:var(--ink-900); margin:0 0 8px; }
.docs-service-card p{ font-size:14px; line-height:1.6; color:var(--ink-500); margin:0; }

/* ---------- Tables ---------- */
.docs-table-wrap{ overflow-x:auto; margin:18px 0 28px; border:1px solid var(--border); border-radius:14px; }
.docs-table{ width:100%; border-collapse:collapse; background:#fff; }
.docs-table th{
	text-align:left; font-size:13px; font-weight:700; color:var(--ink-700);
	background:var(--bg-tint); padding:14px 20px; border-bottom:1px solid var(--border); white-space:nowrap;
}
.docs-table td{ padding:14px 20px; font-size:14.5px; color:var(--ink-700); border-bottom:1px solid var(--border); vertical-align:top; }
.docs-table tr:last-child td{ border-bottom:none; }
.docs-table code{ white-space:nowrap; }

/* ---------- Method / base badges ---------- */
.docs-badge-row{ display:flex; align-items:center; gap:0; background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 20px; margin:18px 0; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:14.5px; }
.docs-method{
	font-family:var(--font-head); font-size:12px; font-weight:800; letter-spacing:.03em;
	padding:4px 10px; border-radius:7px; margin-right:16px; flex-shrink:0;
}
.docs-method.get{ background:#eef1f8; color:var(--ink-700); }
.docs-method.post{ background:#e5f0ff; color:var(--blue-500); }
.docs-method.base{ background:#e5f0ff; color:var(--blue-500); }
.docs-badge-url{ color:var(--ink-900); word-break:break-all; }
.docs-env-block{ margin:14px 0; }
.docs-env-block h3{ margin-bottom:10px; }

/* ---------- Code blocks ---------- */
.docs-code{
	background:linear-gradient(160deg, var(--navy-900), #0c1830 70%);
	border-radius:16px; overflow:hidden; margin:18px 0 28px;
	box-shadow:0 20px 40px -20px rgba(10,20,50,.4);
}
.docs-code-head{
	display:flex; align-items:center; gap:8px; padding:14px 20px;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.docs-code-dot{ width:11px; height:11px; border-radius:50%; }
.docs-code-dot.red{ background:#ef5350; }
.docs-code-dot.yellow{ background:#f6c343; }
.docs-code-dot.green{ background:#34d399; }
.docs-code-label{ margin-left:8px; font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13px; color:rgba(255,255,255,.6); }
.docs-code pre{ margin:0; padding:22px 24px; overflow-x:auto; }
.docs-code code{
	font-family:var(--font-mono,'JetBrains Mono',monospace); font-size:13.5px; line-height:1.7;
	color:#d7e2f5; background:none; border:none; padding:0;
}

/* ---------- Callouts ---------- */
.docs-callout{ display:flex; gap:14px; border-radius:14px; padding:20px 22px; margin:22px 0; }
.docs-callout-icon{ flex-shrink:0; margin-top:2px; }
.docs-callout h4{ font-size:15.5px; font-weight:700; margin:0 0 8px; }
.docs-callout p{ font-size:14.5px; line-height:1.65; margin:0 0 8px; }
.docs-callout p:last-child{ margin-bottom:0; }

.docs-callout.warn{ background:#fdf3e2; border:1px solid #f5dfae; }
.docs-callout.warn h4{ color:#92660f; }
.docs-callout.warn p{ color:#7a5c1e; }
.docs-callout.warn code{ background:rgba(255,255,255,.6); border-color:#f0d189; }

.docs-callout.info{ background:#eaf2ff; border:1px solid #cfe1fb; }
.docs-callout.info h4{ color:#1a4fa0; }
.docs-callout.info p{ color:#2c548c; }
.docs-callout.info code{ background:rgba(255,255,255,.6); border-color:#c3daf7; }

.docs-callout.danger{ background:#fdeeec; border:1px solid #f6c9c2; }
.docs-callout.danger h4{ color:#a3341f; }
.docs-callout.danger p{ color:#8a3b2a; }
.docs-callout.danger code{ background:rgba(255,255,255,.6); border-color:#f2b6ac; }

/* ---------- Prev / next ---------- */
.docs-prevnext{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:44px; padding-top:32px; border-top:1px solid var(--border); }
.docs-prevnext-card{
	background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px 22px;
	text-decoration:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
	transition:border-color .15s, background .15s;
}
.docs-prevnext-card:hover{ border-color:#c9d8f5; background:#fafbff; }
.docs-prevnext-card.next{ grid-column:2; text-align:right; flex-direction:row-reverse; }
.docs-prevnext-label{ display:block; font-size:12.5px; color:var(--ink-400); margin-bottom:4px; }
.docs-prevnext-title{ display:block; font-size:16px; font-weight:700; color:var(--ink-900); }
.docs-prevnext-arrow{ color:var(--ink-400); flex-shrink:0; }

/* ---------- Responsive ---------- */
@media (max-width:1024px){
	.docs-service-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:900px){
	.docs-shell{ gap:0; position:relative; }
	.docs-sidebar-toggle{ display:inline-flex; }

	.docs-sidebar{
		position:fixed; top:72px; left:0; bottom:0; width:280px;
		background:#fff; z-index:60; padding:24px 20px 40px;
		box-shadow:20px 0 60px rgba(10,20,50,.15);
		transform:translateX(-100%); transition:transform .25s ease;
		height:calc(100vh - 72px);
	}
	.docs-sidebar.is-open{ transform:translateX(0); }
	.docs-sidebar-backdrop{
		display:none; position:fixed; inset:72px 0 0 0; background:rgba(10,16,32,.4); z-index:55;
	}
	.docs-sidebar-backdrop.is-open{ display:block; }

	.docs-main{ padding:32px 0 60px; max-width:100%; }
	.docs-card-grid{ grid-template-columns:1fr; }
	.docs-service-grid{ grid-template-columns:1fr; }
	.docs-h1{ font-size:29px; }
	.docs-topbar-actions .docs-home-link{ display:none; }
}

@media (max-width:600px){
	.docs-topbar-inner{ padding:0 18px; }
	.docs-shell{ padding:0 18px; }
	.docs-code pre{ padding:18px; }
	.docs-code code{ font-size:12.5px; }
	.docs-prevnext{ grid-template-columns:1fr; }
	.docs-prevnext-card.next{ grid-column:1; text-align:left; flex-direction:row; }
	.docs-table th, .docs-table td{ padding:12px 14px; font-size:13.5px; }
}
