/*
 * Documentation styles.
 *
 * Loaded in addition to the site's style.css, so the docs sit inside the exact
 * same header/footer shell as the landing page. This file only styles the docs
 * body: the three-column layout (sidebar, content, on-page TOC), the readable
 * prose, code blocks with syntax highlighting, search, and pagination.
 *
 * NOTE: this stylesheet uses native CSS nesting (like the rest of the site), which
 * does NOT support Sass-style `&__x` concatenation. Full BEM class names are
 * written out in every rule.
 */

:root {
	--docs-bg: #252626;
	--docs-panel: #2e2f30;
	--docs-panel-2: #1f2020;
	--docs-border: #3a3b3c;
	--docs-text: #d9d9d9;
	--docs-muted: #9a9a9a;
	--docs-heading: #f2f2f2;
	--docs-accent: #12AEF5;
	--docs-accent-2: #2253B6;
	--docs-warm: #F37335;
	--docs-sidebar-width: 15rem;
}

/* ------------------------------------------------------------------ layout */

.docs {
	background-color: var(--docs-bg);
	color: var(--docs-text);
}

.docs__container {
	display: grid;
	grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
	gap: 2.5rem;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 2.5rem 1.5rem 4rem;
	align-items: start;
}

/* ----------------------------------------------------------------- sidebar */

.docs__sidebar {
	position: sticky;
	top: 1.5rem;
	max-height: calc(100vh - 3rem);
	overflow-y: auto;
	padding-right: 0.5rem;
}

.docs__nav-section {
	margin-bottom: 1.5rem;
}

.docs__nav-heading {
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--docs-muted);
}

.docs__nav-list {
	list-style: none;
}

.docs__nav-list li {
	margin: 0.15rem 0;
}

.docs__nav-list a {
	display: block;
	padding: 0.35rem 0.6rem;
	border-radius: 0.35rem;
	font-size: 0.95rem;
	text-decoration: none;
	color: var(--docs-text);
	transition: background-color 0.12s ease, color 0.12s ease;
}

.docs__nav-list a:hover {
	background-color: var(--docs-panel);
	color: var(--docs-heading);
}

.docs__nav-list a.is-active {
	background-image: linear-gradient(to bottom right, var(--docs-accent), var(--docs-accent-2));
	color: #fff;
	font-weight: 600;
}

/* ------------------------------------------------------------------ search */

/* ---------------------------------------------------------- version switcher */

.docs__version {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1.25rem;
}

.docs__version-label {
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--docs-muted);
}

.docs__version-select {
	flex: 1;
	padding: 0.4rem 0.6rem;
	border: 1px solid var(--docs-border);
	border-radius: 0.4rem;
	background-color: var(--docs-panel-2);
	color: var(--docs-text);
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.docs__version-select:focus {
	outline: none;
	border-color: var(--docs-accent);
	box-shadow: 0 0 0 2px rgba(18, 174, 245, 0.25);
}

.docs__search {
	position: relative;
	margin-bottom: 1.5rem;
}

.docs__search-input {
	width: 100%;
	padding: 0.55rem 0.75rem;
	border: 1px solid var(--docs-border);
	border-radius: 0.4rem;
	background-color: var(--docs-panel-2);
	color: var(--docs-text);
	font-size: 0.95rem;
}

.docs__search-input:focus {
	outline: none;
	border-color: var(--docs-accent);
	box-shadow: 0 0 0 2px rgba(18, 174, 245, 0.25);
}

.docs__search-results {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	margin-top: 0.35rem;
	max-height: 20rem;
	overflow-y: auto;
	list-style: none;
	border: 1px solid var(--docs-border);
	border-radius: 0.4rem;
	background-color: var(--docs-panel);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.docs__search-results li {
	border-bottom: 1px solid var(--docs-border);
}

.docs__search-results li:last-child {
	border-bottom: none;
}

.docs__search-results a {
	display: block;
	padding: 0.5rem 0.75rem;
	text-decoration: none;
	color: var(--docs-text);
}

.docs__search-results a:hover,
.docs__search-results a.is-highlighted {
	background-color: var(--docs-panel-2);
}

.docs__search-crumb {
	display: block;
	font-size: 0.75rem;
	color: var(--docs-muted);
}

.docs__search-title {
	display: block;
	font-size: 0.95rem;
	color: var(--docs-heading);
}

.docs__search-empty {
	padding: 0.6rem 0.75rem;
	color: var(--docs-muted);
	font-size: 0.9rem;
}

/* ------------------------------------------------------------------- pager */

.docs__pager {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--docs-border);
}

.docs__pager-link {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	padding: 0.85rem 1.1rem;
	border: 1px solid var(--docs-border);
	border-radius: 0.5rem;
	text-decoration: none;
	color: var(--docs-heading);
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.docs__pager-link:hover {
	border-color: var(--docs-accent);
	background-color: var(--docs-panel);
}

.docs__pager-next {
	margin-left: auto;
	text-align: right;
}

.docs__pager-dir {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--docs-muted);
}

.docs__pager-title {
	font-weight: 600;
}

/* --------------------------------------------------------------------- toc */

/*
 * The on-page table of contents is a static block injected into the article flow,
 * just under the H1. It is not a card; it is a lightweight list separated from the
 * prose below it by a thin, subtle bottom border.
 */
.docs__toc {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0 0 2rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--docs-border);
	font-size: 0.9rem;
}

.docs__toc-title {
	margin-bottom: 0.4rem;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--docs-muted);
}

.docs__toc-link {
	display: inline-block;
	padding: 0.1rem 0;
	text-decoration: none;
	color: var(--docs-accent);
}

.docs__toc-link:hover {
	text-decoration: underline;
}

/* -------------------------------------------------------- sidebar toggle */

.docs__sidebar-toggle {
	display: none;
	margin-bottom: 1rem;
	padding: 0.5rem 1rem;
	border: 1px solid var(--docs-border);
	border-radius: 0.4rem;
	background-color: var(--docs-panel);
	color: var(--docs-heading);
	font-size: 0.95rem;
	cursor: pointer;
}

/* ------------------------------------------------------------------- prose */

.prose {
	max-width: 46rem;
	line-height: 1.7;
	/* Long inline code tokens and bare URLs have no spaces to wrap on. Without this
	   they push the content column past the viewport and force whole-page horizontal
	   scroll on a phone, so let them break mid-token instead. */
	overflow-wrap: break-word;
	word-break: break-word;
}

.prose h1 {
	margin-bottom: 1rem;
	font-family: 'Vodka Sans', system-ui, sans-serif;
	font-size: 2.5rem;
	font-style: italic;
	color: var(--docs-heading);
}

.prose h2 {
	margin: 2.5rem 0 1rem;
	padding-top: 0.5rem;
	font-size: 1.7rem;
	color: var(--docs-heading);
}

.prose h3 {
	margin: 2rem 0 0.75rem;
	font-size: 1.3rem;
	color: var(--docs-heading);
}

.prose p {
	margin: 1rem 0;
}

.prose a {
	color: var(--docs-accent);
	text-decoration: none;
}

.prose a:hover {
	text-decoration: underline;
}

.prose ul,
.prose ol {
	margin: 1rem 0;
	padding-left: 1.5rem;
}

.prose li {
	margin: 0.35rem 0;
}

.prose blockquote {
	margin: 1.5rem 0;
	padding: 0.5rem 1.25rem;
	border-left: 4px solid var(--docs-warm);
	background-color: var(--docs-panel);
	border-radius: 0 0.4rem 0.4rem 0;
	color: var(--docs-text);
}

.prose hr {
	margin: 2.5rem 0;
	border: none;
	border-top: 1px solid var(--docs-border);
}

/* Inline code. */
.prose code {
	padding: 0.15em 0.4em;
	border-radius: 0.3rem;
	background-color: var(--docs-panel);
	font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
	font-size: 0.9em;
	color: #f2c9a0;
}

/* Tables. */
.prose table {
	width: 100%;
	margin: 1.5rem 0;
	border-collapse: collapse;
	font-size: 0.95rem;
}

.prose th,
.prose td {
	padding: 0.55rem 0.85rem;
	border: 1px solid var(--docs-border);
	text-align: left;
}

.prose th {
	background-color: var(--docs-panel);
	color: var(--docs-heading);
}

/* ------------------------------------------------------------- code blocks */

.code {
	position: relative;
	margin: 1.5rem 0;
	padding: 1rem 1.1rem;
	overflow-x: auto;
	border: 1px solid var(--docs-border);
	border-radius: 0.5rem;
	background-color: var(--docs-panel-2);
	font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
	font-size: 0.88rem;
	line-height: 1.6;
	tab-size: 4;
	-moz-tab-size: 4;
}

/* A code block's inline-code styling should not apply to the block itself. */
.code code {
	padding: 0;
	background: none;
	color: var(--docs-text);
	font-size: inherit;
}

.code__copy {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	padding: 0.25rem 0.6rem;
	border: 1px solid var(--docs-border);
	border-radius: 0.3rem;
	background-color: var(--docs-panel);
	color: var(--docs-muted);
	font-size: 0.75rem;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.12s ease, color 0.12s ease;
}

.code:hover .code__copy {
	opacity: 1;
}

.code__copy:hover {
	color: var(--docs-heading);
	border-color: var(--docs-accent);
}

.code__copy.is-copied {
	color: #7fd17f;
	border-color: #7fd17f;
}

/* Syntax highlight token colors (emitted by PhpHighlighter). */
.tok-keyword { color: #ff9d5c; }
.tok-string { color: #9ece6a; }
.tok-comment { color: #6b7280; font-style: italic; }
.tok-var { color: #12AEF5; }
.tok-number { color: #d19a66; }
.tok-name { color: #e6e6e6; }
.tok-punct { color: #9aa0a6; }
.tok-tag { color: #ff6b6b; }
.tok-html { color: #c0c0c0; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 768px) {
	/* Tablet: sidebar folds into the Menu toggle (handled below). Also trim the
	   container padding, bring the big italic headings down, and make wide tables
	   scroll horizontally instead of blowing out the viewport. */
	.docs__container {
		grid-template-columns: minmax(0, 1fr);
		padding: 2rem 1.25rem 3rem;
	}

	.docs__sidebar-toggle {
		display: block;
	}

	.docs__sidebar {
		position: static;
		max-height: none;
		display: none;
		margin-bottom: 1.5rem;
	}

	.docs__sidebar.is-open {
		display: block;
	}

	.prose h1 {
		font-size: 2rem;
	}

	.prose h2 {
		font-size: 1.45rem;
	}

	.prose table {
		display: block;
		overflow-x: auto;
	}
}

@media (max-width: 480px) {
	/* Phone: pull the container padding in a little further. */
	.docs__container {
		padding: 1.25rem 1rem 3rem;
	}

	.prose h1 {
		font-size: 1.75rem;
	}
}