/*
 * AtlasLaunch Kit, docs module. The docs layout from the design (site/docs.html, .dc-*), as atl-docs-*.
 *
 * Colours, fonts and radii come from the AtlasLaunch theme tokens (--ink, --muted, --brand ...),
 * then the block theme's own presets, then neutral values, so the page fits any block theme and
 * follows its dark mode. Nothing here sets a brand colour.
 */

.atl-docs,
.atl-docs-home,
.atl-docs-index {
	--atl-docs-ink: var(--ink, var(--wp--preset--color--contrast, currentColor));
	--atl-docs-text: var(--text, currentColor);
	--atl-docs-muted: var(--muted, var(--wp--preset--color--muted, currentColor));
	--atl-docs-line: var(--line, color-mix(in srgb, currentColor 18%, transparent));
	--atl-docs-surface: var(--surface, var(--wp--preset--color--base, Canvas));
	--atl-docs-brand: var(--brand, var(--wp--preset--color--brand, var(--wp--preset--color--primary, var(--wp--preset--color--accent-1, LinkText))));
	--atl-docs-brand-ink: var(--brand-ink, var(--wp--preset--color--brand-ink, var(--atl-docs-ink)));
	--atl-docs-brand-soft: var(--brand-soft, color-mix(in srgb, var(--atl-docs-brand) 12%, transparent));
	--atl-docs-radius: var(--radius-lg, 14px);
	--atl-docs-font-display: var(--font-display, inherit);
	--atl-docs-font-body: var(--font-body, inherit);
}

.atl-docs,
.atl-docs-home {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	padding-inline: var(--wp--style--root--padding-left, 20px) var(--wp--style--root--padding-right, 20px);
}

/* Three columns: navigation, the page, "On this page". They wrap on narrow screens. */
.atl-docs {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	padding-block: 40px 96px;
}

.atl-docs > * {
	margin-block: 0;
}

/* Inside a theme's content column (the_content fallback) the page already has its padding. */
.atl-docs.alignwide {
	padding-inline: 0;
	padding-block: 8px 24px;
}

.atl-docs-nav {
	flex: 1 1 240px;
	max-width: 260px;
}

.atl-docs-nav__groups {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* "Docs menu": only a button on phones (view.js closes the box there); on wide screens the list is always shown. */
.atl-docs-nav__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--atl-docs-line);
	border-radius: var(--atl-docs-radius);
	background: var(--atl-docs-surface);
	color: var(--atl-docs-ink);
	font: 600 15px/1.2 var(--atl-docs-font-body);
	cursor: pointer;
	list-style: none;
}

.atl-docs-nav__toggle::-webkit-details-marker {
	display: none;
}

.atl-docs-nav__toggle::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}

.atl-docs-nav__box[open] > .atl-docs-nav__toggle {
	margin-bottom: 16px;
}

.atl-docs-nav__box[open] > .atl-docs-nav__toggle::after {
	transform: rotate(-135deg) translateY(-2px);
}

.atl-docs-nav__toggle:focus-visible {
	outline: 2px solid var(--focus, var(--atl-docs-brand));
	outline-offset: 2px;
}

@media (min-width: 861px) {
	.atl-docs-nav__toggle {
		display: none;
	}
}

.atl-docs-main {
	flex: 999 1 560px;
	min-width: 0;
	max-width: 760px;
}

.atl-docs-toc {
	flex: 1 1 200px;
	max-width: 220px;
}

/* Left: grouped navigation. */
.atl-docs-group__title {
	font: 700 12px/1.3 var(--atl-docs-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--atl-docs-muted);
	margin: 0 0 8px;
}

.atl-docs-group__title a,
.atl-docs-group__title span {
	color: inherit;
	text-decoration: none;
	padding: 0;
}

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

.atl-docs-nav ul ul {
	padding-inline-start: 12px;
}

.atl-docs-nav li a,
.atl-docs-nav li > span {
	display: block;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--atl-docs-text);
	text-decoration: none;
	font-size: 15px;
	line-height: 1.4;
}

.atl-docs-nav li a:hover {
	background: var(--atl-docs-brand-soft);
	text-decoration: underline;
}

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

.atl-docs-group__title a[aria-current="page"] {
	color: var(--atl-docs-brand-ink);
	text-decoration: underline;
}

/* Middle: breadcrumb, title, details line, content, pager. */
.atl-docs-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: var(--atl-docs-muted);
}

.atl-docs-crumbs a {
	color: var(--atl-docs-muted);
}

.atl-docs-crumbs [aria-current="page"] {
	color: var(--atl-docs-ink);
	font-weight: 600;
}

:where(.atl-docs-main) h1 {
	font: 800 clamp(30px, 4vw, 40px)/1.15 var(--atl-docs-font-display);
	letter-spacing: -.02em;
	margin: 12px 0 10px;
	color: var(--atl-docs-ink);
}

.atl-docs-meta {
	font-size: 14px;
	color: var(--atl-docs-muted);
	margin: 0 0 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

:where(.atl-docs-main) h2 {
	font: 700 24px/30px var(--atl-docs-font-display);
	margin: 36px 0 12px;
	color: var(--atl-docs-ink);
}

:where(.atl-docs-main) :is(p, li) {
	font-size: 17px;
	line-height: 28px;
}

:where(.atl-docs-main) ol {
	padding-left: 22px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Anchored headings stop below a sticky header. */
.atl-docs-main :is(h2, h3, h4)[id] {
	scroll-margin-top: 96px;
}

.atl-docs-pager {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 40px;
	flex-wrap: wrap;
}

.atl-docs-pager a {
	flex: 1 1 220px;
	padding: 16px 18px;
	border-radius: var(--atl-docs-radius);
	border: 1px solid var(--atl-docs-line);
	background: var(--atl-docs-surface);
	text-decoration: none;
	color: var(--atl-docs-ink);
	font-weight: 600;
}

.atl-docs-pager a:hover {
	border-color: var(--atl-docs-brand);
	text-decoration: underline;
}

.atl-docs-pager__next {
	text-align: right;
}

.atl-docs-pager small {
	display: block;
	color: var(--atl-docs-muted);
	font-weight: 500;
	font-size: 13px;
	margin-bottom: 4px;
}

/* Right: "On this page". */
.atl-docs-toc nav {
	position: sticky;
	/* Clear of a sticky site header (the AtlasLaunch theme's is about 70px). */
	top: calc(var(--atl-docs-sticky-top, 96px) + var(--wp-admin--admin-bar--height, 0px));
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 14px;
}

.atl-docs-toc__title {
	font: 700 12px/1 var(--atl-docs-font-body);
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--atl-docs-muted);
	margin: 0 0 6px;
}

.atl-docs-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.atl-docs-toc ul ul {
	margin-top: 6px;
	padding-inline-start: 12px;
}

.atl-docs-toc a {
	display: block;
	color: var(--atl-docs-muted);
	text-decoration: none;
	padding: 4px 0 4px 12px;
	border-left: 2px solid var(--atl-docs-line);
}

.atl-docs-toc a:hover {
	color: var(--atl-docs-ink);
	text-decoration: underline;
}

/* The heading being read: colour, a thicker bar and bold, so colour is never the only sign. */
.atl-docs-toc a[aria-current="true"] {
	color: var(--atl-docs-brand-ink);
	border-left: 4px solid var(--atl-docs-brand);
	padding-left: 10px;
	font-weight: 600;
}

/* Docs home. */
.atl-docs-home {
	padding-block: 40px 96px;
}

.atl-docs-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: 24px;
	margin-top: 24px;
}

.atl-docs-index__product {
	padding: 20px 22px;
	border-radius: var(--atl-docs-radius);
	border: 1px solid var(--atl-docs-line);
	background: var(--atl-docs-surface);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.atl-docs-index__product h2 {
	font: 700 20px/1.3 var(--atl-docs-font-display);
	margin: 0;
	color: var(--atl-docs-ink);
}

.atl-docs-index__product ul {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
}

.atl-docs-index__product a {
	color: var(--atl-docs-brand-ink);
	font-weight: 600;
}

.atl-docs-index__count {
	color: var(--atl-docs-muted);
	font-size: 14px;
}

.atl-docs-index__empty {
	color: var(--atl-docs-muted);
}

/* Focus: always visible, also where the theme sets none. */
:is(.atl-docs, .atl-docs-home) a:focus-visible {
	outline: 2px solid var(--focus, var(--atl-docs-brand));
	outline-offset: 2px;
}

@media (max-width: 1099.98px) {
	.atl-docs-toc {
		display: none;
	}
}

@media (max-width: 860px) {
	.atl-docs-nav {
		max-width: none;
		flex-basis: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.atl-docs * {
		scroll-behavior: auto;
		transition: none;
	}
}

@media (forced-colors: active) {
	.atl-docs-nav a[aria-current="page"] {
		outline: 2px solid CanvasText;
		outline-offset: -2px;
	}

	.atl-docs-toc a[aria-current="true"] {
		border-left-color: Highlight;
	}

	.atl-docs-pager a,
	.atl-docs-index__product {
		border-color: CanvasText;
	}
}

@media print {
	.atl-docs-nav,
	.atl-docs-toc,
	.atl-docs-pager {
		display: none;
	}
}