/*
 * WP Ember - docs bundle: 3-column docs layout, sidebar nav, TOC rail,
 * callouts, FAQ. Loaded on wpe_doc pages.
 */

/* Layout */
.wpe-doc-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr) 200px;
	gap: var(--wpe-sp-10);
	align-items: start;
	padding: var(--wpe-sp-12) var(--wpe-sp-6) var(--wpe-sp-20);
}
@media (max-width: 1000px) {
	.wpe-doc-layout { grid-template-columns: 1fr; gap: var(--wpe-sp-8); }
	.wpe-doc-sidebar,
	.wpe-doc-toc { position: static; }
	.wpe-doc-toc { display: none; }
}

/* Sidebar nav */
.wpe-doc-sidebar { position: sticky; top: 84px; }
.wpe-doc-nav__root {
	display: block;
	font-family: var(--wpe-font-display);
	font-weight: 600;
	font-size: var(--wpe-fs-16);
	color: var(--wpe-ink);
	text-decoration: none;
	margin-bottom: var(--wpe-sp-3);
}
.wpe-doc-nav ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--wpe-border-cool); }
.wpe-doc-nav li a {
	display: block;
	padding: var(--wpe-sp-2) var(--wpe-sp-4);
	margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--wpe-text-muted);
	font-size: var(--wpe-fs-14);
	text-decoration: none;
}
.wpe-doc-nav li a:hover { color: var(--wpe-ink); }
.wpe-doc-nav li a.is-active {
	color: var(--wpe-ember);
	border-left-color: var(--wpe-ember);
	font-weight: 600;
}

/* Main article */
.wpe-doc-main { min-width: 0; }
.wpe-doc-crumb { font-size: var(--wpe-fs-13); margin: 0 0 var(--wpe-sp-3); }
.wpe-doc-crumb a { color: var(--wpe-text-soft); }
.wpe-doc-main h1 { font-size: var(--wpe-fs-38); margin: 0 0 var(--wpe-sp-6); }
.wpe-doc-body { font-size: var(--wpe-fs-16); }
.wpe-doc-body h2 { font-size: var(--wpe-fs-24); margin: var(--wpe-sp-10) 0 var(--wpe-sp-3); scroll-margin-top: 90px; }
.wpe-doc-body h3 { font-size: var(--wpe-fs-18); margin: var(--wpe-sp-6) 0 var(--wpe-sp-2); scroll-margin-top: 90px; }
.wpe-doc-body ul, .wpe-doc-body ol { padding-left: var(--wpe-sp-6); }
.wpe-doc-body li { margin-bottom: var(--wpe-sp-2); }
.wpe-doc-body code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	background: var(--wpe-surface-2);
	padding: 2px 6px;
	border-radius: var(--wpe-r-6);
}

/* TOC rail */
.wpe-doc-toc { position: sticky; top: 84px; font-size: var(--wpe-fs-13); }
.wpe-toc-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--wpe-fs-12); color: var(--wpe-text-soft); font-weight: 700; margin: 0 0 var(--wpe-sp-3); }
.wpe-doc-toc ul { list-style: none; margin: 0; padding: 0; }
.wpe-doc-toc li { margin: 0; }
.wpe-doc-toc li.wpe-toc-h3 a { padding-left: var(--wpe-sp-4); }
.wpe-doc-toc a {
	display: block;
	padding: var(--wpe-sp-1) 0;
	color: var(--wpe-text-soft);
	text-decoration: none;
	line-height: 1.4;
}
.wpe-doc-toc a:hover { color: var(--wpe-ink); }
.wpe-doc-toc a.is-active { color: var(--wpe-ember); font-weight: 600; }

/* Callouts */
.wpe-callout {
	border: 1px solid var(--wpe-border-cool);
	border-left-width: 4px;
	border-radius: var(--wpe-r-8);
	padding: var(--wpe-sp-4) var(--wpe-sp-5);
	margin: var(--wpe-sp-6) 0;
}
.wpe-callout__title { font-weight: 700; margin: 0 0 var(--wpe-sp-2); }
.wpe-callout__body > :last-child { margin-bottom: 0; }
.wpe-callout--info { border-left-color: var(--wpe-callout-info); background: var(--wpe-callout-info-bg); }
.wpe-callout--tip { border-left-color: var(--wpe-callout-tip); background: var(--wpe-callout-tip-bg); }
.wpe-callout--warning { border-left-color: var(--wpe-callout-warn); background: var(--wpe-callout-warn-bg); }

/* FAQ */
.wpe-faq { margin: var(--wpe-sp-8) 0; }
.wpe-faq__item { padding: var(--wpe-sp-5) 0; border-bottom: 1px solid var(--wpe-border-cool); }
.wpe-faq__item:first-child { border-top: 1px solid var(--wpe-border-cool); }
.wpe-faq__q { font-size: var(--wpe-fs-18); margin: 0 0 var(--wpe-sp-2); }
.wpe-faq__a > :last-child { margin-bottom: 0; }
.wpe-faq__a { color: var(--wpe-text-muted); }

/* Docs index cards */
.wpe-doc-card { display: flex; flex-direction: column; text-decoration: none; }
.wpe-doc-card:hover { text-decoration: none; }
.wpe-doc-card h3 { font-size: var(--wpe-fs-20); margin: 0 0 var(--wpe-sp-2); }
.wpe-doc-card p { color: var(--wpe-text-muted); font-size: var(--wpe-fs-15); margin: 0 0 var(--wpe-sp-4); }
.wpe-doc-card__cta { color: var(--wpe-ember); font-weight: 600; font-size: var(--wpe-fs-14); margin-top: auto; }
.wpe-doc-card__cta::after { content: " \2192"; }