/**
 * ViewCounter Docs — Sidebar + Content layout
 */

/* ─── Layout: full-bleed grid under the fixed nav ─── */
.docs-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 0;
	min-height: calc(100vh - 68px);
	margin-top: 68px;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

/* ─── Sidebar ─── */
.docs-sidebar {
	background: #fff;
	border-right: 1px solid var(--slate-200, #e2e8f0);
	padding: 0;
	position: sticky;
	top: 68px;
	height: calc(100vh - 68px);
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--slate-300, #cbd5e1) transparent;
	z-index: 10;
}

.docs-sidebar-header {
	padding: 24px 24px 16px;
	border-bottom: 1px solid var(--slate-200, #e2e8f0);
}

.docs-sidebar-header h2 {
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var(--slate-900, #0f172a);
	margin: 0 0 2px;
	padding: 0;
	letter-spacing: -0.3px;
}

.docs-sidebar-header p {
	font-size: 12px;
	color: var(--slate-400, #94a3b8);
	margin: 0;
}

.docs-sidebar-search {
	padding: 16px 16px 8px;
}

.docs-sidebar-search input {
	width: 100%;
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 13px;
	padding: 9px 12px 9px 34px;
	border: 1px solid var(--slate-200, #e2e8f0);
	border-radius: 8px;
	color: var(--slate-700, #334155);
	background: var(--slate-50, #f8fafc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 11px center no-repeat;
	transition: border-color 0.15s;
	outline: none;
	box-sizing: border-box;
}

.docs-sidebar-search input:focus {
	border-color: var(--purple-400, #c084fc);
	box-shadow: 0 0 0 2px rgba(139, 47, 198, 0.1);
}

.docs-nav-group {
	margin-bottom: 4px;
}

.docs-nav-group-label {
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.8px;
	color: var(--purple-600, #8b2fc6);
	padding: 16px 24px 6px;
	display: block;
}

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

.docs-nav-group li {
	margin: 0;
}

.docs-nav-group li a {
	display: block;
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 13.5px;
	color: var(--slate-600, #475569);
	padding: 8px 24px;
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: all 0.12s;
	font-weight: 400;
	line-height: 1.4;
}

.docs-nav-group li a:hover {
	color: var(--purple-600, #8b2fc6);
	background: var(--purple-50, #faf5ff);
	border-left-color: var(--purple-200, #e9d5ff);
}

.docs-nav-group li.is-active a {
	color: var(--purple-600, #8b2fc6);
	font-weight: 600;
	border-left-color: var(--purple-600, #8b2fc6);
	background: var(--purple-50, #faf5ff);
}

/* ─── Content area ─── */
.docs-content {
	background: var(--slate-50, #f8fafc);
	padding: 40px 56px 80px;
	min-width: 0;
}

.docs-breadcrumb {
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 12px;
	color: var(--slate-400, #94a3b8);
	margin-bottom: 8px;
}
.docs-breadcrumb a { color: var(--purple-600, #8b2fc6); text-decoration: none; }
.docs-breadcrumb a:hover { text-decoration: underline; }

.docs-content h1 {
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 32px;
	font-weight: 700;
	color: var(--slate-900, #0f172a);
	letter-spacing: -0.5px;
	margin: 0 0 8px;
	padding: 0;
	line-height: 1.2;
}

.docs-content .docs-excerpt {
	font-family: 'DM Sans', -apple-system, sans-serif;
	font-size: 16px;
	color: var(--slate-500, #64748b);
	line-height: 1.7;
	margin: 0 0 32px;
	font-weight: 300;
	max-width: 680px;
}

/* TOC */
.docs-toc { background: #fff; border: 1px solid var(--slate-200, #e2e8f0); border-radius: 12px; padding: 20px 24px; margin-bottom: 32px; max-width: 680px; }
.docs-toc-title { font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--slate-400, #94a3b8); margin: 0 0 10px; }
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li { margin-bottom: 2px; }
.docs-toc a { font-size: 13px; color: var(--slate-600, #475569); text-decoration: none; padding: 4px 0; display: block; transition: color 0.12s; }
.docs-toc a:hover { color: var(--purple-600, #8b2fc6); }

/* Article */
.docs-article { line-height: 1.8; font-size: 15px; color: var(--slate-700, #334155); max-width: 680px; font-family: 'DM Sans', -apple-system, sans-serif; }
.docs-article h2 { font-size: 22px; font-weight: 700; color: var(--slate-900, #0f172a); margin: 40px 0 14px; padding-top: 28px; border-top: 1px solid var(--slate-200, #e2e8f0); letter-spacing: -0.3px; scroll-margin-top: 88px; }
.docs-article h2:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.docs-article h3 { font-size: 17px; font-weight: 700; color: var(--slate-800, #1e293b); margin: 28px 0 8px; }
.docs-article p { margin: 0 0 16px; }
.docs-article ul, .docs-article ol { margin: 0 0 16px; padding-left: 24px; }
.docs-article li { margin-bottom: 6px; }
.docs-article a { color: var(--purple-600, #8b2fc6); text-decoration: none; font-weight: 500; }
.docs-article a:hover { text-decoration: underline; }
.docs-article code { font-family: 'JetBrains Mono', monospace; font-size: 13px; background: var(--slate-100, #f1f5f9); padding: 2px 7px; border-radius: 5px; color: var(--purple-700, #7c3aed); }
.docs-article pre { background: var(--slate-900, #0f172a); color: #d8b4fe; padding: 20px 24px; border-radius: 12px; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7; overflow-x: auto; margin: 0 0 20px; }
.docs-article pre code { background: none; padding: 0; color: inherit; font-size: inherit; border-radius: 0; }

/* Callouts */
.docs-callout { border-radius: 10px; padding: 16px 20px; margin: 0 0 20px; font-size: 14px; line-height: 1.7; }
.docs-callout-title { font-weight: 700; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.docs-callout.is-info { background: var(--purple-50, #faf5ff); border-left: 3px solid var(--purple-500, #a855f7); }
.docs-callout.is-info .docs-callout-title { color: var(--purple-700, #7c3aed); }
.docs-callout.is-tip { background: #ecfdf5; border-left: 3px solid #34d399; }
.docs-callout.is-tip .docs-callout-title { color: #065f46; }
.docs-callout.is-warning { background: #fffbeb; border-left: 3px solid #fbbf24; }
.docs-callout.is-warning .docs-callout-title { color: #92400e; }

/* Tables */
.docs-article table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; background: #fff; border-radius: 10px; overflow: hidden; border: 1px solid var(--slate-200, #e2e8f0); }
.docs-article th { text-align: left; font-weight: 600; color: var(--slate-700, #334155); background: var(--slate-50, #f8fafc); padding: 10px 14px; border-bottom: 2px solid var(--slate-200, #e2e8f0); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.docs-article td { padding: 10px 14px; border-bottom: 1px solid var(--slate-200, #e2e8f0); color: var(--slate-700, #334155); }
.docs-article tr:last-child td { border-bottom: none; }

/* Prev/Next */
.docs-nav-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--slate-200, #e2e8f0); max-width: 680px; }
.docs-nav-link { display: block; padding: 16px 20px; background: #fff; border: 1px solid var(--slate-200, #e2e8f0); border-radius: 12px; text-decoration: none; transition: all 0.2s; }
.docs-nav-link:hover { border-color: var(--purple-300, #d8b4fe); box-shadow: 0 4px 16px rgba(139,47,198,0.06); }
.docs-nav-link-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--slate-400, #94a3b8); margin-bottom: 4px; }
.docs-nav-link-title { font-size: 14px; font-weight: 600; color: var(--purple-600, #8b2fc6); }
.docs-nav-link.is-next { text-align: right; }

/* ─── Archive ─── */
.docs-index { padding: 140px 0 80px; background: var(--slate-50, #f8fafc); min-height: 80vh; }
.docs-index-header { text-align: center; margin-bottom: 48px; }
.docs-index-header h1 { font-family: 'Fraunces', serif; font-size: 40px; font-weight: 600; color: var(--slate-900, #0f172a); letter-spacing: -1px; margin: 0 0 8px; }
.docs-index-header p { font-size: 17px; color: var(--slate-500, #64748b); font-weight: 300; }
.docs-index-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-bottom: 32px; }
.docs-index-card { background: #fff; border: 1px solid var(--slate-200, #e2e8f0); border-radius: 14px; padding: 24px; text-decoration: none; transition: all 0.2s; display: block; }
.docs-index-card:hover { border-color: var(--purple-200, #e9d5ff); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,47,198,0.06); }
.docs-index-card .card-icon { width: 40px; height: 40px; border-radius: 10px; background: var(--purple-100, #f3e8ff); color: var(--purple-600, #8b2fc6); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.docs-index-card h3 { font-size: 16px; font-weight: 700; color: var(--slate-900, #0f172a); margin: 0 0 6px; }
.docs-index-card p { font-size: 13px; color: var(--slate-500, #64748b); line-height: 1.6; margin: 0; }

/* ─── Mobile ─── */
.docs-sidebar-toggle { display: none; font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 600; padding: 10px 20px; background: #fff; border: 1px solid var(--slate-200, #e2e8f0); border-radius: 8px; color: var(--slate-700, #334155); cursor: pointer; margin-bottom: 20px; }

@media (max-width: 900px) {
	.docs-layout { grid-template-columns: 1fr; width: auto; left: auto; right: auto; margin-left: 0; margin-right: 0; }
	.docs-sidebar { position: fixed; top: 68px; left: -300px; width: 280px; height: calc(100vh - 68px); z-index: 50; transition: left 0.25s ease; box-shadow: none; }
	.docs-sidebar.is-open { left: 0; box-shadow: 4px 0 24px rgba(0,0,0,0.1); }
	.docs-sidebar-toggle { display: inline-flex; align-items: center; gap: 6px; }
	.docs-content { padding: 32px 24px 60px; }
}

/* WP Admin bar */
body.admin-bar .docs-layout { margin-top: 100px; }
body.admin-bar .docs-sidebar { top: 100px; height: calc(100vh - 100px); }
@media screen and (max-width: 782px) {
	body.admin-bar .docs-layout { margin-top: 114px; }
	body.admin-bar .docs-sidebar { top: 114px; height: calc(100vh - 114px); }
}