/**
 * The documentation layout of every site (white-label-docs structure WL-5d).
 *
 * Minimal styling that extends Bootstrap 5.3, with the colors of each site's own Bootstrap variables.
 * It names no edition, so that every site can serve it (WL-R10).
 */

/* ==========================================================================
   Layout: Two-Column Documentation (8-4 ratio)
   ========================================================================== */

.doc-layout {
	--bs-gutter-x: 2rem;
}

@media (max-width: 991.98px) {
	.doc-sidebar {
		order: -1;
	}
}

/* The sidebar column stays in view as a group beside the page */
@media (min-width: 992px) {
	.doc-sidebar {
		position: sticky;
		top: 5rem;
		align-self: flex-start;
		max-height: calc(100vh - 6rem);
		overflow-y: auto;
	}

	.doc-sidebar > .card.sticky-top {
		position: relative;
		top: auto !important;
	}
}

/* ==========================================================================
   Sidebar card headers - primary background
   ========================================================================== */

.doc-sidebar .card-header {
	background: var(--bs-primary);
	color: var(--bs-white);
}

/* Card body and list items inherit card background (no white override) */
.doc-sidebar .card-body,
.doc-sidebar .list-group-item {
	background: inherit;
	border-color: var(--bs-border-color-translucent);
}

/* Topic badges - normal text size */
.doc-sidebar .badge {
	font-size: 1rem;
	font-weight: normal;
}

/* ==========================================================================
   Subpages list in sidebar - hierarchical navigation
   ========================================================================== */

.doc-subpages-list,
.doc-subpages-list ul,
.doc-subpages-children {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.doc-subpages-item {
	border-bottom: 1px solid var(--bs-border-color-translucent);
}

.doc-subpages-item:last-child {
	border-bottom: none;
}

.doc-subpages-link {
	display: block;
	padding: 0.5rem 1rem;
	color: var(--bs-body-color);
	text-decoration: none;
}

.doc-subpages-link:hover {
	background: var(--bs-tertiary-bg);
	color: var(--bs-primary);
}

/* Chevron icon for expandable items */
.doc-subpages-icon {
	transition: transform 0.2s ease-in-out;
	font-size: 0.75em;
}

.doc-subpages-toggle[aria-expanded="true"] .doc-subpages-icon {
	transform: rotate(90deg);
}

/* ==========================================================================
   Tables - dark header
   ========================================================================== */

.doc-main table.table thead {
	background-color: var(--bs-dark) !important;
	color: var(--bs-light) !important;
}

.doc-main table.table thead th {
	background-color: var(--bs-dark) !important;
	color: var(--bs-light) !important;
	border-color: var(--bs-dark) !important;
}

/* ==========================================================================
   Blockquotes
   ========================================================================== */

.doc-main blockquote {
	padding: 1rem 1.25rem;
	background: var(--bs-secondary-bg);
	border-left: 4px solid var(--bs-primary);
	border-radius: 0 var(--bs-border-radius) var(--bs-border-radius) 0;
}

.doc-main blockquote p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   Links - API reference badges and external link icons
   ========================================================================== */

.doc-main a[href*="/api/"],
.doc-main a[href*="/reference/api/"] {
	display: inline-block !important;
	padding: 0.2em 0.5em !important;
	font-weight: 500 !important;
	background: var(--bs-primary-bg-subtle) !important;
	color: var(--bs-primary-text-emphasis) !important;
	border-radius: var(--bs-border-radius-sm) !important;
	text-decoration: none !important;
}

.doc-main a[href*="/api/"]:hover,
.doc-main a[href*="/reference/api/"]:hover {
	background: var(--bs-primary) !important;
	color: var(--bs-white) !important;
}

.doc-main a[target="_blank"]::after,
.doc-main a[rel*="external"]::after {
	content: "\00a0\f35d" !important;
	font-family: "Font Awesome 6 Free" !important;
	font-weight: 900 !important;
	font-size: 0.7em !important;
	opacity: 0.6 !important;
}

/* ==========================================================================
   Code blocks - darker background for documentation
   ========================================================================== */

.doc-main pre:has(code.hljs),
.doc-main pre.hljs {
	background: rgba(0, 0, 0, 0.2);
}

/* Inline code in documentation */
.doc-main code:not(pre code) {
	padding: 0.2em 0.4em;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 0.25rem;
	font-size: 0.9em;
}

/* ==========================================================================
   Images
   ========================================================================== */

.doc-main img {
	max-width: 100%;
	height: auto;
}

.doc-main figcaption {
	color: var(--bs-secondary-color);
	font-style: italic;
}

/* A figure takes its own line; a click opens it in the lightbox */
.doc-figure {
	display: block;
}

.doc-lightbox-body img {
	max-height: 85vh;
}

/* The icon of an app on the front page and in its portal */
.doc-app-icon {
	object-fit: contain;
	flex-shrink: 0;
}

/* The icon of a tool is one color: a mask of its SVG, filled with the color of the text beside it, in light and dark mode alike (owner, 2026-10-22) */
.doc-tool-icon {
	display: inline-block;
	background-color: currentColor;
	-webkit-mask: var(--doc-icon) center / contain no-repeat;
	mask: var(--doc-icon) center / contain no-repeat;
}

/* The box of the icon on an app card: one size on every card, also on a card without an icon */
.doc-app-icon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 48px;
	width: 48px;
	height: 48px;
}

.doc-app-icon-box .doc-app-icon {
	max-width: 100%;
	max-height: 100%;
}

/* ==========================================================================
   Landing pages (app-landing-pages LP-6 to LP-10)
   ========================================================================== */

/* The accent of an app is its seed, per color mode where it reaches 3:1 against the page, else the primary color of the site (LP-2b) */
.doc-landing {
	--doc-accent: var(--doc-accent-light, var(--bs-primary));
}

[data-bs-theme="dark"] .doc-landing {
	--doc-accent: var(--doc-accent-dark, var(--bs-primary));
}

.doc-landing-hero .doc-landing-icon {
	flex-shrink: 0;
}

/* The standalone hero: a band of the accent on the start side, and a light tint of it */
.doc-landing-hero-standalone {
	border-inline-start: 4px solid var(--doc-accent);
	background-color: color-mix(in srgb, var(--doc-accent) 8%, transparent);
	border-radius: var(--bs-border-radius);
	padding: 1rem 1.25rem;
}

/* The node hero: the icon over the text, as the cards of the About page show it */
.doc-landing-hero-node {
	flex-direction: column;
	align-items: center !important;
	text-align: center;
}

/* The current node of the node row */
.doc-node-card.doc-node-current {
	border: 2px solid var(--doc-accent);
}

.doc-node-card .doc-app-icon {
	max-width: 48px;
	max-height: 48px;
}

.doc-highlight {
	border-top: 3px solid var(--doc-accent);
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.doc-sidebar {
		display: none;
	}
}