/**
 * 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;
}

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

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