/* BlueTheme documentation. Logical properties only: one stylesheet for
   Persian (right to left) and English (left to right). */

@font-face {
	font-family: Vazirmatn;
	src: url(fonts/Vazirmatn-Variable.woff2) format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: Inter;
	src: url(fonts/Inter-latin.woff2) format("woff2");
	font-weight: 100 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg: #fff;
	--bg-soft: #f5f7fb;
	--text: #1f2937;
	--muted: #5b6270;
	--heading: #0f172a;
	--border: #e5e7eb;
	--primary: #1e5eff;
	--primary-soft: #e8efff;
	--code-bg: #f1f3f7;
	--note: #1e5eff;
	--tip: #0f7b46;
	--warning: #a15c00;
	--top: 3.5rem;
	--font: "Inter", "Vazirmatn", system-ui, -apple-system, "Segoe UI", "Roboto", sans-serif;

	color-scheme: light dark;
}

:lang(fa) {
	--font: "Vazirmatn", "Inter", system-ui, "Tahoma", sans-serif;
}

@media (prefers-color-scheme: dark) {

	:root {
		--bg: #0f141c;
		--bg-soft: #161d28;
		--text: #d9dee7;
		--muted: #9aa3b2;
		--heading: #f3f5f9;
		--border: #283142;
		--primary: #7aa2ff;
		--primary-soft: #1b2741;
		--code-bg: #1b2330;
		--note: #7aa2ff;
		--tip: #4cc38a;
		--warning: #f0a54a;
	}
}

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

html {
	scroll-padding-block-start: calc(var(--top) + 1rem);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.75;
	-webkit-text-size-adjust: 100%;
}

a {
	color: var(--primary);
	text-underline-offset: 0.2em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.visually-hidden {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip {
	position: absolute;
	inset-block-start: -10rem;
	inset-inline-start: 1rem;
	z-index: 30;
	padding: 0.5rem 1rem;
	background: var(--primary);
	color: #fff;
}

.skip:focus {
	inset-block-start: 0.5rem;
}

/* Top bar */
.top {
	position: sticky;
	inset-block-start: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	gap: 1rem;
	block-size: var(--top);
	padding-inline: 1rem;
	border-block-end: 1px solid var(--border);
	background: var(--bg);
}

.top__brand {
	color: var(--heading);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.top__brand span {
	color: var(--primary);
	font-weight: 500;
}

.top__menu {
	display: none;
	padding: 0.25rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.375rem;
	background: none;
	color: var(--text);
	font: inherit;
	cursor: pointer;
}

.top__lang {
	margin-inline-start: auto;
	white-space: nowrap;
}

/* Search */
.search {
	position: relative;
	flex: 0 1 22rem;
	margin-inline-start: auto;
}

.search input {
	inline-size: 100%;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--border);
	border-radius: 0.375rem;
	background: var(--bg-soft);
	color: var(--text);
	font: inherit;
}

.search__results {
	position: absolute;
	inset-block-start: calc(100% + 0.25rem);
	inset-inline: 0;
	max-block-size: 70vh;
	overflow: auto;
	min-inline-size: min(28rem, 90vw);
	margin: 0;
	padding: 0.25rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	background: var(--bg);
	box-shadow: 0 10px 30px rgb(0 0 0 / 15%);
	list-style: none;
}

.search__results a {
	display: block;
	padding: 0.5rem 0.75rem;
	border-radius: 0.375rem;
	color: var(--text);
	text-decoration: none;
}

.search__results a:hover,
.search__results a:focus {
	background: var(--primary-soft);
}

.search__results strong {
	display: block;
	color: var(--heading);
	font-size: 0.9375rem;
}

.search__results small {
	display: block;
	color: var(--muted);
	font-size: 0.8125rem;
	line-height: 1.5;
}

.search__empty {
	padding: 0.5rem 0.75rem;
	color: var(--muted);
}

/* Columns: navigation, page, "on this page" */
.layout {
	display: grid;
	grid-template-columns: 16rem minmax(0, 1fr) 14rem;
	max-inline-size: 90rem;
	margin-inline: auto;
}

.nav,
.toc {
	position: sticky;
	inset-block-start: var(--top);
	align-self: start;
	max-block-size: calc(100vh - var(--top));
	overflow: auto;
	padding: 1.5rem 1rem;
	font-size: 0.9375rem;
}

.nav {
	border-inline-end: 1px solid var(--border);
}

.nav ul,
.toc ul {
	margin: 0 0 1rem;
	padding: 0;
	list-style: none;
}

.nav__title {
	margin-block-end: 0.25rem;
	color: var(--heading);
	font-size: 0.8125rem;
	font-weight: 700;
	cursor: pointer;
}

.nav a,
.toc a {
	display: block;
	padding: 0.25rem 0.5rem;
	border-radius: 0.375rem;
	color: var(--muted);
	line-height: 1.5;
	text-decoration: none;
}

.nav a:hover,
.toc a:hover {
	color: var(--primary);
}

.nav a[aria-current="page"] {
	background: var(--primary-soft);
	color: var(--primary);
	font-weight: 600;
}

.toc__title {
	margin: 0 0 0.5rem;
	color: var(--heading);
	font-size: 0.8125rem;
}

.content {
	min-inline-size: 0;
	padding: 2rem clamp(1rem, 4vw, 3rem) 3rem;
}

.content:focus {
	outline: none;
}

/* Page text */
.doc {
	max-inline-size: 52rem;
}

.doc h1,
.doc h2,
.doc h3,
.doc h4 {
	color: var(--heading);
	line-height: 1.35;
}

.doc h1 {
	margin-block: 0 1rem;
	font-size: 2rem;
}

.doc h2 {
	margin-block: 2.5rem 0.75rem;
	padding-block-start: 1rem;
	border-block-start: 1px solid var(--border);
	font-size: 1.5rem;
}

.doc h3 {
	margin-block: 1.75rem 0.5rem;
	font-size: 1.1875rem;
}

.doc h4 {
	margin-block: 1.25rem 0.5rem;
	font-size: 1rem;
}

.doc img {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	margin-block: 1rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
}

.doc code {
	padding: 0.1em 0.35em;
	border-radius: 0.25rem;
	background: var(--code-bg);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.875em;
	direction: ltr;
	unicode-bidi: isolate;
}

.doc pre {
	tab-size: 4;
	overflow: auto;
	padding: 1rem;
	border-radius: 0.5rem;
	background: var(--code-bg);
	line-height: 1.6;
	direction: ltr;
	text-align: start;
}

.doc pre code {
	padding: 0;
	background: none;
	font-size: 0.875rem;
}

.doc blockquote {
	margin: 1.25rem 0;
	padding: 0.75rem 1rem;
	border-inline-start: 4px solid var(--border);
	background: var(--bg-soft);
	border-radius: 0.25rem;
}

.doc blockquote > :first-child {
	margin-block-start: 0;
}

.doc blockquote > :last-child {
	margin-block-end: 0;
}

.note--note {
	border-inline-start-color: var(--note) !important;
}

.note--tip {
	border-inline-start-color: var(--tip) !important;
}

.note--warning {
	border-inline-start-color: var(--warning) !important;
}

.note__label {
	margin-inline-end: 0.25rem;
}

.note--note .note__label {
	color: var(--note);
}

.note--tip .note__label {
	color: var(--tip);
}

.note--warning .note__label {
	color: var(--warning);
}

.doc kbd {
	padding: 0.1em 0.4em;
	border: 1px solid var(--border);
	border-block-end-width: 2px;
	border-radius: 0.25rem;
	font-family: inherit;
	font-size: 0.875em;
}

.table-wrap {
	overflow-x: auto;
	margin-block: 1rem;
}

.doc table {
	inline-size: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.doc th,
.doc td {
	padding: 0.5rem 0.75rem;
	border-block-end: 1px solid var(--border);
	text-align: start;
	vertical-align: top;
}

.doc th {
	color: var(--heading);
	white-space: nowrap;
}

.doc td:first-child {
	font-weight: 600;
	min-inline-size: 9rem;
}

/* Previous / next */
.pager {
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	max-inline-size: 52rem;
	margin-block-start: 3rem;
}

.pager a {
	flex: 1;
	padding: 0.75rem 1rem;
	border: 1px solid var(--border);
	border-radius: 0.5rem;
	text-decoration: none;
}

.pager span {
	display: block;
	color: var(--muted);
	font-size: 0.8125rem;
}

.pager__next {
	text-align: end;
}

.foot {
	max-inline-size: 52rem;
	margin-block-start: 2rem;
	color: var(--muted);
	font-size: 0.875rem;
}

/* Language choice (docs root) */
.choose {
	display: grid;
	min-block-size: 100vh;
	place-items: center;
}

.choose__box {
	text-align: center;
	font-size: 1.25rem;
}

@media (max-width: 1199.98px) {

	.layout {
		grid-template-columns: 15rem minmax(0, 1fr);
	}

	.toc {
		display: none;
	}
}

@media (max-width: 767.98px) {

	.top {
		gap: 0.5rem;
	}

	.top__menu {
		display: block;
	}

	.top__brand span {
		display: none;
	}

	.top__lang {
		margin-inline-start: 0;
		font-size: 0.875rem;
	}

	/* Reference tables scroll inside their box instead of squeezing the text. */
	.doc table:has(th:nth-child(4)) {
		min-inline-size: 40rem;
	}

	/* The search box takes the room that is left. */
	.search {
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	.search__results {
		position: fixed;
		inset-block-start: calc(var(--top) + 0.25rem);
		inset-inline: 0.5rem;
		min-inline-size: 0;
	}

	.layout {
		grid-template-columns: minmax(0, 1fr);
	}

	.nav {
		position: fixed;
		inset-block: var(--top) 0;
		inset-inline-start: 0;
		z-index: 15;
		display: none;
		inline-size: min(20rem, 85vw);
		max-block-size: none;
		background: var(--bg);
		box-shadow: 0 0 30px rgb(0 0 0 / 20%);
	}

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

	.doc h1 {
		font-size: 1.625rem;
	}
}

@media print {

	.top,
	.nav,
	.toc,
	.pager {
		display: none;
	}

	.layout {
		display: block;
	}
}

.search__list {
	margin: 0;
	padding: 0;
	list-style: none;
}