/**
 * Veyra Docs neutral front-end components.
 *
 * Themes are encouraged to override the custom properties instead of
 * increasing selector specificity.
 */

.veyra-docs-document,
.veyra-docs-navigation,
.veyra-docs-toc,
.veyra-docs-index,
.veyra-docs-search {
	--veyra-docs-text: #1d2939;
	--veyra-docs-muted: #667085;
	--veyra-docs-border: #e4e7ec;
	--veyra-docs-surface: #ffffff;
	--veyra-docs-surface-subtle: #f8fafc;
	--veyra-docs-accent: #2563eb;
	--veyra-docs-accent-contrast: #ffffff;
	--veyra-docs-radius: 0.625rem;
	--veyra-docs-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	--veyra-docs-space-1: 0.25rem;
	--veyra-docs-space-2: 0.5rem;
	--veyra-docs-space-3: 0.75rem;
	--veyra-docs-space-4: 1rem;
	--veyra-docs-space-5: 1.5rem;
	--veyra-docs-space-6: 2rem;
	color: var(--veyra-docs-text);
}

.veyra-docs-document *,
.veyra-docs-navigation *,
.veyra-docs-toc *,
.veyra-docs-index *,
.veyra-docs-search * {
	box-sizing: border-box;
}

.veyra-docs-document__content [data-veyra-docs-heading] {
	scroll-margin-top: 6rem;
}

.veyra-docs-breadcrumbs {
	margin-block: 0 var(--veyra-docs-space-5);
	font-size: 0.875rem;
	color: var(--veyra-docs-muted);
}

.veyra-docs-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--veyra-docs-space-2);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.veyra-docs-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: var(--veyra-docs-space-2);
	min-width: 0;
}

.veyra-docs-breadcrumbs__item:not(:last-child)::after {
	content: "/";
	color: var(--veyra-docs-border);
}

.veyra-docs-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

.veyra-docs-breadcrumbs__link:hover,
.veyra-docs-breadcrumbs__link:focus-visible {
	color: var(--veyra-docs-accent);
	text-decoration: underline;
}

.veyra-docs-breadcrumbs__current {
	display: inline-block;
	overflow: hidden;
	max-width: 28rem;
	font-weight: 600;
	color: var(--veyra-docs-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.veyra-docs-navigation,
.veyra-docs-toc {
	border: 1px solid var(--veyra-docs-border);
	border-radius: var(--veyra-docs-radius);
	background: var(--veyra-docs-surface);
	box-shadow: var(--veyra-docs-shadow);
}

.veyra-docs-navigation {
	padding: var(--veyra-docs-space-3);
}

.veyra-docs-navigation__header {
	margin-bottom: var(--veyra-docs-space-2);
	padding: var(--veyra-docs-space-2);
	border-bottom: 1px solid var(--veyra-docs-border);
}

.veyra-docs-navigation__title {
	display: block;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.35;
	color: var(--veyra-docs-text);
	text-decoration: none;
}

.veyra-docs-navigation__title:hover,
.veyra-docs-navigation__title:focus-visible {
	color: var(--veyra-docs-accent);
}

.veyra-docs-navigation__list,
.veyra-docs-tree,
.veyra-docs-toc__list,
.veyra-docs-children__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.veyra-docs-navigation__list .veyra-docs-navigation__list {
	margin-left: var(--veyra-docs-space-3);
	padding-left: var(--veyra-docs-space-2);
	border-left: 1px solid var(--veyra-docs-border);
}

.veyra-docs-navigation__item + .veyra-docs-navigation__item {
	margin-top: 0.125rem;
}

.veyra-docs-navigation__row {
	display: flex;
	gap: var(--veyra-docs-space-1);
	align-items: center;
}

.veyra-docs-navigation__link {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.5rem 0.625rem;
	border-radius: calc(var(--veyra-docs-radius) - 0.2rem);
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--veyra-docs-muted);
	text-decoration: none;
}

.veyra-docs-navigation__link:hover,
.veyra-docs-navigation__link:focus-visible,
.veyra-docs-navigation__item.is-ancestor > .veyra-docs-navigation__row > .veyra-docs-navigation__link {
	color: var(--veyra-docs-text);
	background: var(--veyra-docs-surface-subtle);
}

.veyra-docs-navigation__link[aria-current="page"] {
	font-weight: 700;
	color: var(--veyra-docs-accent);
	background: color-mix(in srgb, var(--veyra-docs-accent) 9%, transparent);
}

.veyra-docs-navigation__toggle {
	position: relative;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: calc(var(--veyra-docs-radius) - 0.2rem);
	background: transparent;
	color: var(--veyra-docs-muted);
	cursor: pointer;
}

.veyra-docs-navigation__toggle:hover,
.veyra-docs-navigation__toggle:focus-visible {
	background: var(--veyra-docs-surface-subtle);
	color: var(--veyra-docs-text);
}

.veyra-docs-navigation__toggle-icon::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translate(-60%, -65%) rotate(45deg);
	transition: transform 160ms ease;
}

.veyra-docs-navigation__toggle[aria-expanded="true"] .veyra-docs-navigation__toggle-icon::before {
	transform: translate(-50%, -35%) rotate(225deg);
}

.veyra-docs-toc {
	padding: var(--veyra-docs-space-4);
}

.veyra-docs-toc__title {
	margin: 0 0 var(--veyra-docs-space-3);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.4;
	color: var(--veyra-docs-text);
}

.veyra-docs-toc__item + .veyra-docs-toc__item {
	margin-top: 0.125rem;
}

.veyra-docs-toc__link {
	display: block;
	padding: 0.35rem 0.5rem;
	border-left: 2px solid transparent;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--veyra-docs-muted);
	text-decoration: none;
}

.veyra-docs-toc__item--level-3 .veyra-docs-toc__link {
	padding-left: 1.25rem;
}

.veyra-docs-toc__item--level-4 .veyra-docs-toc__link {
	padding-left: 2rem;
}

.veyra-docs-toc__link:hover,
.veyra-docs-toc__link:focus-visible,
.veyra-docs-toc__link.is-active,
.veyra-docs-toc__link[aria-current="location"] {
	border-left-color: var(--veyra-docs-accent);
	color: var(--veyra-docs-accent);
}

.veyra-docs-children {
	margin-top: var(--veyra-docs-space-6);
	padding-top: var(--veyra-docs-space-5);
	border-top: 1px solid var(--veyra-docs-border);
}

.veyra-docs-children__title {
	margin: 0 0 var(--veyra-docs-space-4);
	font-size: 1.125rem;
}

.veyra-docs-children__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--veyra-docs-space-3);
}

.veyra-docs-children__link {
	display: block;
	height: 100%;
	padding: var(--veyra-docs-space-4);
	border: 1px solid var(--veyra-docs-border);
	border-radius: var(--veyra-docs-radius);
	background: var(--veyra-docs-surface);
	box-shadow: var(--veyra-docs-shadow);
	font-weight: 600;
	color: var(--veyra-docs-text);
	text-decoration: none;
}

.veyra-docs-children__link:hover,
.veyra-docs-children__link:focus-visible {
	border-color: var(--veyra-docs-accent);
	color: var(--veyra-docs-accent);
}

.veyra-docs-pagination {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--veyra-docs-space-4);
	margin-top: var(--veyra-docs-space-6);
	padding-top: var(--veyra-docs-space-5);
	border-top: 1px solid var(--veyra-docs-border);
}

.veyra-docs-pagination__link {
	display: flex;
	flex-direction: column;
	gap: var(--veyra-docs-space-1);
	min-width: 0;
	padding: var(--veyra-docs-space-4);
	border: 1px solid var(--veyra-docs-border);
	border-radius: var(--veyra-docs-radius);
	background: var(--veyra-docs-surface);
	box-shadow: var(--veyra-docs-shadow);
	color: var(--veyra-docs-text);
	text-decoration: none;
}

.veyra-docs-pagination__link--next {
	text-align: right;
}

.veyra-docs-pagination__link:hover,
.veyra-docs-pagination__link:focus-visible {
	border-color: var(--veyra-docs-accent);
}

.veyra-docs-pagination__label {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--veyra-docs-muted);
}

.veyra-docs-pagination__title {
	overflow: hidden;
	font-weight: 700;
	color: var(--veyra-docs-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.veyra-docs-search {
	width: 100%;
}

.veyra-docs-search__label {
	display: block;
	margin-bottom: var(--veyra-docs-space-2);
	font-size: 0.875rem;
	font-weight: 600;
}

.veyra-docs-search__controls {
	display: flex;
	gap: var(--veyra-docs-space-2);
}

.veyra-docs-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.75rem 0.875rem;
	border: 1px solid var(--veyra-docs-border);
	border-radius: var(--veyra-docs-radius);
	background: var(--veyra-docs-surface);
	color: var(--veyra-docs-text);
}

.veyra-docs-search__input:focus {
	border-color: var(--veyra-docs-accent);
	outline: 2px solid color-mix(in srgb, var(--veyra-docs-accent) 20%, transparent);
	outline-offset: 1px;
}

.veyra-docs-search__button {
	padding: 0.75rem 1rem;
	border: 1px solid var(--veyra-docs-accent);
	border-radius: var(--veyra-docs-radius);
	background: var(--veyra-docs-accent);
	font-weight: 600;
	color: var(--veyra-docs-accent-contrast);
	cursor: pointer;
}

.veyra-docs-tree .veyra-docs-tree {
	margin-top: var(--veyra-docs-space-2);
	margin-left: var(--veyra-docs-space-4);
	padding-left: var(--veyra-docs-space-4);
	border-left: 1px solid var(--veyra-docs-border);
}

.veyra-docs-tree__item + .veyra-docs-tree__item {
	margin-top: var(--veyra-docs-space-3);
}

.veyra-docs-tree__link {
	font-weight: 600;
	color: var(--veyra-docs-text);
	text-decoration: none;
}

.veyra-docs-tree__link:hover,
.veyra-docs-tree__link:focus-visible,
.veyra-docs-tree__item.is-current > .veyra-docs-tree__link {
	color: var(--veyra-docs-accent);
	text-decoration: underline;
}

.veyra-docs-tree__excerpt {
	margin-top: var(--veyra-docs-space-1);
	font-size: 0.875rem;
	color: var(--veyra-docs-muted);
}

.veyra-docs-tree__excerpt > :last-child {
	margin-bottom: 0;
}

.veyra-docs-empty {
	padding: var(--veyra-docs-space-4);
	border: 1px dashed var(--veyra-docs-border);
	border-radius: var(--veyra-docs-radius);
	color: var(--veyra-docs-muted);
}

.veyra-docs-navigation .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 720px) {
	.veyra-docs-children__list,
	.veyra-docs-pagination {
		grid-template-columns: 1fr;
	}

	.veyra-docs-pagination__spacer {
		display: none;
	}

	.veyra-docs-pagination__link--next {
		text-align: left;
	}

	.veyra-docs-search__controls {
		align-items: stretch;
		flex-direction: column;
	}
}

@media (prefers-reduced-motion: reduce) {
	.veyra-docs-navigation__toggle-icon::before {
		transition: none;
	}
}