/**
 * Styles for the Documentation UXBuilder elements:
 * Doc Nav List, Doc Nav Group, Doc Nav Item, Doc Panels, Doc Panel Item.
 */

/* ----------------------------------------------------------------------- */
/* Doc Nav List / Doc Nav Group / Doc Nav Item                             */
/* ----------------------------------------------------------------------- */

.doc-nav-list {
	display: block;
}

.doc-nav-group {
	margin-bottom: 1.75em;
}

.doc-nav-group:last-child {
	margin-bottom: 0;
}

.doc-nav-group-title {
	margin-bottom: 0.5em;
	padding: 0 0.9em;
	font-size: 0.78em;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--doc-nav-group-title-color, #8a8a8a);
}

.doc-nav-items {
	display: flex;
	flex-direction: column;
}

.doc-nav-item {
	display: block;
	padding: 0.45em 0.9em;
	border-left: 2px solid transparent;
	font-size: 0.925em;
	line-height: 1.5;
	color: var(--doc-nav-item-color, #4a4a4a);
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.doc-nav-item:hover {
	color: var(--doc-nav-item-hover-color, #000);
	background-color: rgba(0, 0, 0, 0.035);
}

.doc-nav-item.active {
	border-left-color: currentColor;
	color: var(--doc-nav-item-active-color, #16181a);
	background-color: rgba(0, 0, 0, 0.05);
	font-weight: 600;
}

/* Nav item with no configured target: visually flagged, not clickable. */
.doc-nav-item--no-target {
	cursor: not-allowed;
	opacity: 0.6;
}

/* ----------------------------------------------------------------------- */
/* Doc Panels / Doc Panel Item                                             */
/* ----------------------------------------------------------------------- */

.doc-panels {
	display: block;
}

.doc-panel-item {
	/* Keeps the section clear of a sticky header when jumped to natively
	   (e.g. browser back/forward, or a hash link outside this component).
	   The actual value is kept in sync with the detected header height by
	   assets/js/doc-builder-frontend.js. */
	scroll-margin-top: var( --doc-scroll-offset, 20px );
	padding-bottom: 3em;
	margin-bottom: 2em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.doc-panel-item:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.doc-panel-item > h2 {
	margin-top: 0;
}

.doc-panel-content > *:last-child {
	margin-bottom: 0;
}

/* Admin-only notice rendered when two Doc Panel Item elements share the
   same Panel ID (see docbuilder_render_doc_panel_item()). */
.doc-panel-item-warning {
	margin-bottom: 1em;
	padding: 0.6em 0.9em;
	border: 1px solid #f1b0b7;
	border-radius: 3px;
	background: #fdecea;
	color: #a94442;
	font-size: 0.85em;
}

/* ----------------------------------------------------------------------- */
/* UXBuilder editor-only validation hints (see doc-builder-editor.js)       */
/* ----------------------------------------------------------------------- */

.doc-builder-warning {
	margin-bottom: 0.75em;
	padding: 0.5em 0.75em;
	border: 1px solid #f1b0b7;
	border-radius: 3px;
	background: #fdecea;
	color: #a94442;
	font-size: 0.8em;
	font-weight: 600;
}

.doc-nav-item--warning {
	outline: 2px dashed #d9534f;
	outline-offset: 2px;
}