/* NavForge Core CSS — frontend base
 * All sizes/colors are CSS variable driven. The per-menu CSS file
 * supplies the variable values; this file is universal layout & a11y.
 */

.navforge-container {
	display: block;
	background: var(--nf-container-bg, transparent);
	font-family: var(--nf-item-font-family, inherit);
}

.navforge-menu,
.navforge-menu * {
	box-sizing: border-box;
}

.navforge-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0;
	position: relative;
}

.navforge-item {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.navforge-link {
	display: inline-flex;
	align-items: center;
	color: var(--nf-item-color, #111);
	background: var(--nf-item-bg, transparent);
	padding: var(--nf-item-padding, 12px 16px);
	/* Authoritative typography — !important defeats theme cascades that target
	 * .menu a / generic anchors. Ensures the variable's value is what renders.
	 */
	font-family: var(--nf-item-font-family, inherit) !important;
	font-size: var(--nf-item-font-size, 15px) !important;
	font-weight: var(--nf-item-font-weight, 500) !important;
	letter-spacing: var(--nf-item-letter-spacing, 0);
	text-transform: var(--nf-item-text-transform, none);
	text-decoration: none;
	transition: var(--nf-transition, all 200ms ease);
	white-space: nowrap;
	line-height: 1.2;
}

.navforge-item:hover > .navforge-link,
.navforge-item.is-open > .navforge-link {
	color: var(--nf-item-color-hover, #2563eb);
	background: var(--nf-item-bg-hover, transparent);
	outline: none;
	border-color: transparent;
	box-shadow: none;
	text-decoration: none;
}

/* Current-page state for top-level menu items — fires when the user is on
 * the menu item's page or any of its descendant pages. WordPress adds the
 * `current-menu-item`, `current-menu-parent`, and `current-menu-ancestor`
 * classes automatically. Falls back through:
 *   --nf-item-color-current → --nf-primary-color → --nf-item-color-hover
 */
.navforge-item.current-menu-item > .navforge-link,
.navforge-item.current-menu-parent > .navforge-link,
.navforge-item.current-menu-ancestor > .navforge-link,
.navforge-item.current_page_item > .navforge-link,
.navforge-item.current_page_parent > .navforge-link,
.navforge-item.current_page_ancestor > .navforge-link {
	color: var(--nf-item-color-current, var(--nf-primary-color, var(--nf-item-color-hover, #2563eb)));
}

.navforge-link:focus {
	outline: none;
}

/* Keyboard focus — accessible ring, never on hover/click. */
.navforge-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Chevron icon — shared SVG mask used by top-level menu and sidebar tabs.
 * `background-color: currentColor` paints through the mask, so the chevron
 * always matches the surrounding text color.
 */
:root {
	--nf-caret-icon: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m4 6 4 4 4-4'/></svg>");
}

/* Top-level chevron — points down by default, rotates to up on open/hover.
 * Uses longhand mask properties with !important to defeat theme cascades
 * that may hide pseudo-elements or reset backgrounds on :hover.
 */
.navforge-menu > .menu-item-has-children > .navforge-link::after,
.navforge-menu > .navforge-mega > .navforge-link::after {
	content: '' !important;
	display: inline-block !important;
	width: var(--nf-caret-size, 14px) !important;
	height: var(--nf-caret-size, 14px) !important;
	margin-left: var(--nf-caret-gap, 4px) !important;
	padding: 0 !important;
	border: 0 !important;
	background-color: currentColor !important;
	background-image: none !important;
	-webkit-mask-image: var(--nf-caret-icon) !important;
	        mask-image: var(--nf-caret-icon) !important;
	-webkit-mask-repeat: no-repeat !important;
	        mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	        mask-position: center !important;
	-webkit-mask-size: contain !important;
	        mask-size: contain !important;
	flex-shrink: 0 !important;
	visibility: visible !important;
	opacity: 1 !important;
	transition: transform 200ms ease;
	transform: rotate(0deg);
}

.navforge-menu > .menu-item-has-children:hover > .navforge-link::after,
.navforge-menu > .menu-item-has-children.is-open > .navforge-link::after,
.navforge-menu > .navforge-mega:hover > .navforge-link::after,
.navforge-menu > .navforge-mega.is-open > .navforge-link::after {
	transform: rotate(180deg) !important;
	visibility: visible !important;
	opacity: 1 !important;
	background-color: currentColor !important;
}


.navforge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	line-height: 1;
}

.navforge-icon img {
	max-width: 100%;
	height: auto;
}

/* Sub menu (flyout) */
.navforge-sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	background: var(--nf-panel-bg, #fff);
	color: var(--nf-panel-color, #111);
	border: var(--nf-panel-border, 1px solid #e5e7eb);
	border-radius: var(--nf-panel-radius, 8px);
	box-shadow: var(--nf-panel-shadow, 0 10px 30px rgba(0,0,0,.08));
	/* Zero padding so the hover background on a link can touch the panel
	 * edges (top, bottom, sides). Internal spacing comes from the link's
	 * own padding only.
	 */
	padding: var(--nf-subitem-list-padding, 0);
	overflow: hidden; /* clip the row hover to the rounded corners */
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--nf-transition, all 200ms ease);
	z-index: 9999;
}

/* Reset LI margins/padding so the link can truly span edge-to-edge. */
.navforge-sub-menu > .navforge-item,
.navforge-sub-menu .navforge-item {
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

.navforge-sub-menu .navforge-link {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: var(--nf-subitem-padding, 10px 16px);
	font-size: var(--nf-subitem-font-size, 14px);
	color: var(--nf-subitem-color, #374151);
	background: transparent;
	white-space: normal;
}

.navforge-sub-menu .navforge-link:hover,
.navforge-sub-menu .navforge-link:focus-visible {
	color: var(--nf-subitem-color-hover, #000) !important;
	background: var(--nf-subitem-bg-hover, #ececec) !important;
}

.navforge-item:hover > .navforge-sub-menu,
.navforge-item.is-open > .navforge-sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Nested sub menu */
.navforge-sub-menu .navforge-sub-menu {
	top: 0;
	left: 100%;
}

/* Mega panel */
.navforge-mega .navforge-panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	width: var(--nf-panel-max-width, 1200px);
	max-width: 100vw;
	background: var(--nf-panel-bg, #fff);
	color: var(--nf-panel-color, #111);
	border: var(--nf-panel-border, 1px solid #e5e7eb);
	border-radius: var(--nf-panel-radius, 8px);
	box-shadow: var(--nf-panel-shadow, 0 10px 30px rgba(0,0,0,.08));
	padding: var(--nf-panel-padding, 24px);
	/* Typography — uses the same variables as the link so the panel always
	 * matches the top-level menu's typography. !important defeats theme styles
	 * that target generic descendants (e.g. `.menu div { font-size: ... }`).
	 */
	font-family: var(--nf-item-font-family, inherit) !important;
	font-size: var(--nf-item-font-size, 15px) !important;
	font-weight: var(--nf-item-font-weight, 500) !important;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: var(--nf-transition, all 200ms ease);
	z-index: 9999;
}

.navforge-mega[data-panel-align="center"] .navforge-panel {
	left: 50%;
	transform: translate(-50%, 8px);
}

.navforge-mega[data-panel-align="right"] .navforge-panel {
	left: auto;
	right: 0;
}

.navforge-mega:hover > .navforge-panel,
.navforge-mega.is-open > .navforge-panel {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.navforge-mega[data-panel-align="center"]:hover > .navforge-panel,
.navforge-mega[data-panel-align="center"].is-open > .navforge-panel {
	transform: translate(-50%, 0);
}

.navforge-panel__inner {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.navforge-row {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: 24px;
}

.navforge-col {
	grid-column: span var(--col-span, 12);
}

/* Cart */
.navforge-cart {
	display: inline-flex;
	gap: 4px;
	align-items: center;
}

/* Effects */
.navforge-menu[data-effect="slide"] .navforge-sub-menu,
.navforge-menu[data-effect="slide"] .navforge-panel {
	transform: translateY(-8px);
}

.navforge-menu[data-effect="none"] .navforge-sub-menu,
.navforge-menu[data-effect="none"] .navforge-panel {
	transition: none;
	transform: none;
}

/* Visibility */
.navforge-hidden {
	display: none !important;
}

/* Mobile */
.navforge-toggle {
	display: none;
	background: var(--nf-mobile-toggle-bg, #111);
	color: var(--nf-mobile-toggle-color, #fff);
	border: 0;
	padding: 12px 16px;
	cursor: pointer;
	align-items: center;
	gap: 8px;
	border-radius: 4px;
	font: inherit;
}

.navforge-toggle__bar {
	display: inline-block;
	width: 22px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.navforge-toggle__bar::before,
.navforge-toggle__bar::after {
	content: '';
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	position: absolute;
	left: 0;
}

.navforge-toggle__bar::before { top: -7px; }
.navforge-toggle__bar::after  { top: 7px; }

@media (max-width: 768px) {
	.navforge-toggle { display: inline-flex; }

	/* ---------- Mobile menu — vertical accordion ---------- */

	.navforge-menu {
		display: none;
		flex-direction: column;
		width: 100%;
		background: var(--nf-mobile-bg, #fff);
		color: var(--nf-mobile-color, #111);
		gap: 0;
	}

	.navforge-menu.is-open,
	.navforge-menu[data-navforge-toggle="false"] {
		display: flex;
	}

	/* Theme-managed drawer mode — NavForge renders inline inside the theme's
	 * existing drawer. Strip ALL drawer-mimicking styles so the theme's own
	 * drawer (logo, close button, action buttons) is fully preserved.
	 * NavForge only contributes accordion behaviour and chevron icons.
	 */
	.navforge-menu[data-navforge-toggle="false"] {
		background: transparent !important;
		color: inherit !important;
		width: auto !important;
		max-width: none !important;
		padding: 0 !important;
		margin: 0 !important;
		position: static !important;
		transform: none !important;
		overflow: visible !important;
		z-index: auto !important;
	}

	/* Stack every item full-width — wipe absolute positioning.
	 * Divider lives on the <li> so it spans the whole row (link + toggle
	 * button), not on each child element individually.
	 */
	.navforge-menu .navforge-item {
		position: static;
		width: 100%;
		border-bottom: var(--nf-mobile-divider-width, 1px) solid var(--nf-mobile-divider, #ececec);
	}

	/* No border on the last item of each level — divider sits only between
	 * items, never closing off the bottom of a section.
	 */
	.navforge-menu > .navforge-item:last-child,
	.navforge-sub-menu > .navforge-item:last-child {
		border-bottom: 0 !important;
	}

	/* Nested items inside a sub-menu — keep the divider so each row has a
	 * separator, but the OUTER (parent) item's border is sufficient at the
	 * boundary. Override only if you want to remove inner dividers.
	 */

	.navforge-menu .navforge-link {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		padding: var(--nf-mobile-link-padding, 14px 0);
		color: var(--nf-mobile-color, #111) !important;
		background: transparent !important;
		border: 0 !important;
		white-space: normal;
	}

	/* In theme-managed mode let links inherit text color from the drawer. */
	.navforge-menu[data-navforge-toggle="false"] .navforge-link {
		color: inherit !important;
	}

	/* Parent items on mobile become flex rows so the link sits beside the
	 * dedicated toggle button (link navigates; button expands).
	 */
	.navforge-item--has-children {
		display: flex !important;
		flex-wrap: wrap;
		align-items: stretch;
	}

	.navforge-item--has-children > .navforge-link {
		flex: 1 1 0;
		min-width: 0;
	}

	.navforge-item--has-children > .navforge-sub-menu,
	.navforge-item--has-children > .navforge-panel {
		flex: 1 1 100%;
		width: 100%;
	}

	/* Hide the link's ::after chevron on mobile — the toggle button has its own. */
	.navforge-menu > .menu-item-has-children > .navforge-link::after,
	.navforge-menu > .navforge-mega > .navforge-link::after,
	.navforge-sub-menu .navforge-item--has-children > .navforge-link::after {
		display: none !important;
	}

	/* Toggle button — full-height, sits at right of the link with a chevron. */
	.navforge-accordion-toggle {
		all: unset;
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		min-width: 44px;
		min-height: 44px;
		padding: 0 12px;
		cursor: pointer;
		color: inherit;
		background: transparent;
		border: 0 !important;
		outline: none !important;
		box-shadow: none !important;
		text-decoration: none !important;
	}

	.navforge-accordion-toggle::after {
		content: '';
		display: inline-block;
		width: var(--nf-caret-size, 14px);
		height: var(--nf-caret-size, 14px);
		background-color: currentColor;
		-webkit-mask-image: var(--nf-caret-icon);
		        mask-image: var(--nf-caret-icon);
		-webkit-mask-repeat: no-repeat;
		        mask-repeat: no-repeat;
		-webkit-mask-position: center;
		        mask-position: center;
		-webkit-mask-size: contain;
		        mask-size: contain;
		transition: transform 200ms ease;
	}

	.navforge-item.is-open > .navforge-accordion-toggle::after {
		transform: rotate(180deg);
	}

	.navforge-accordion-toggle:focus,
	.navforge-accordion-toggle:focus-visible,
	.navforge-accordion-toggle:active,
	.navforge-accordion-toggle:hover {
		outline: none !important;
		box-shadow: none !important;
		border: 0 !important;
		text-decoration: none !important;
	}

	/* Mega panel + sidebar-tabs panel — hidden on mobile. We use the plain
	 * sub-menu (rendered by start_lvl) as the accordion source.
	 */
	.navforge-menu .navforge-panel { display: none !important; }

	/* Force the WP sub-menu to be the visible structure even when the parent
	 * is sidebar-tabs (which hides it on desktop).
	 */
	.navforge-mega[data-panel-layout="sidebar-tabs"] > .navforge-sub-menu {
		display: block !important;
	}

	/* Sub-menu — flatten, no absolute positioning, no shadow/border. */
	.navforge-sub-menu {
		position: static !important;
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
		box-shadow: none !important;
		border: 0 !important;
		border-radius: 0 !important;
		background: transparent !important;
		padding: 0 0 0 var(--nf-mobile-indent, 16px);
		margin: 0;
		min-width: 0;
		max-height: 0;
		overflow: hidden;
		transition: max-height 250ms ease;
	}

	.navforge-item.is-open > .navforge-sub-menu {
		max-height: 2000px; /* arbitrary upper bound for animation */
	}

	/* Indent visual rule — left-border on each nested level. */
	.navforge-sub-menu .navforge-sub-menu {
		border-left: 1px solid var(--nf-mobile-divider, #ececec);
		padding-left: var(--nf-mobile-indent, 16px);
		margin-left: 4px;
	}

	/* Mega-panel grid layouts collapse to single column on mobile. */
	.navforge-row { grid-template-columns: 1fr; }
	.navforge-col { grid-column: span 12; }

	/* ---------- Off-canvas mode (opt-in) ----------
	 * Only applies when explicitly enabled via data-mobile="off-canvas" AND
	 * NavForge is managing the toggle. If the theme manages the drawer,
	 * NavForge stays inline.
	 */
	.navforge-menu[data-mobile="off-canvas"]:not([data-navforge-toggle="false"]) {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: auto;
		width: 100%;
		max-width: var(--nf-mobile-drawer-width, 420px);
		background: var(--nf-mobile-bg, #fff);
		overflow-y: auto;
		z-index: 99999;
		padding: var(--nf-mobile-drawer-padding, 80px 24px 24px);
		transform: translateX(100%);
		transition: transform 280ms ease;
		display: flex;
	}

	.navforge-menu[data-mobile="off-canvas"]:not([data-navforge-toggle="false"]).is-open {
		transform: translateX(0);
	}
}

/* Hide the mobile accordion toggle button on desktop — desktop uses
 * hover-driven dropdowns and the link's ::after chevron.
 */
@media (min-width: 769px) {
	.navforge-accordion-toggle { display: none !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.navforge-link,
	.navforge-sub-menu,
	.navforge-panel {
		transition: none !important;
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px,1px,1px,1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

/* ============================================================
 * Sidebar tabbed mega panel — production styling
 * ------------------------------------------------------------
 * Scoped under .navforge-panel--sidebar-tabs to avoid bleeding into theme
 * styles. All values use CSS variables (with fallbacks) so they integrate
 * with the per-menu variable file. Per-item settings supported on every
 * tab / link / group title via the walker:
 *   • Icon (Dashicons / FA / image URL)
 *   • Custom CSS class (added as a real class on each li)
 *   • Target / rel / xfn / attr_title (rendered into anchor attributes)
 *   • Description (rendered as a subtitle line under the label)
 * ============================================================
 */

.navforge-mega[data-panel-layout="sidebar-tabs"] > .navforge-sub-menu {
	display: none;
}

.navforge-mega[data-panel-layout="sidebar-tabs"] > .navforge-panel {
	/* Full-viewport-width panel — escapes the menu item's containing block by
	 * using position:fixed. JS sets `top` inline to the bottom of the menu's
	 * header. The CSS fallback uses --nf-mega-fallback-top (default 64px) so
	 * the panel is visible if JS is slow to initialise.
	 */
	position: fixed;
	top: var(--nf-mega-fallback-top, 85px);
	left: 0;
	right: 0;
	width: 100vw;
	max-width: 100vw;
	margin: 0;
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	padding: 0;
	overflow: hidden;
}

/* Center alignment override doesn't apply to the fullwidth fixed panel — kill
 * the translate so it sits flush at left:0.
 */
.navforge-mega[data-panel-layout="sidebar-tabs"][data-panel-align="center"] > .navforge-panel,
.navforge-mega[data-panel-layout="sidebar-tabs"][data-panel-align="right"] > .navforge-panel {
	left: 0;
	right: 0;
	transform: none;
}

.navforge-mega[data-panel-layout="sidebar-tabs"][data-panel-align="center"]:hover > .navforge-panel,
.navforge-mega[data-panel-layout="sidebar-tabs"][data-panel-align="center"].is-open > .navforge-panel {
	transform: none;
}

/* Inner sidebar-tabs grid spans the full viewport — backgrounds (sidebar grey,
 * pane white) extend edge-to-edge for that "full-bleed" feel like Cityskin.
 * Content alignment with the page container is handled via padding on the
 * sidebar tab list and the panes (using --nf-panel-content-left/right vars
 * written by JS).
 */
.navforge-mega[data-panel-layout="sidebar-tabs"] > .navforge-panel > .navforge-panel--sidebar-tabs {
	width: 100%;
	max-width: 100%;
	margin: 0;
}

.navforge-panel--sidebar-tabs {
	display: grid;
	/* Sidebar column width = configured tab width + container left offset.
	 * The offset becomes left-padding on the tab list, so tab text starts at
	 * the logo's left edge while the grey background still extends to the
	 * viewport edge.
	 */
	grid-template-columns:
		calc(var(--nf-tabs-sidebar-width, 280px) + var(--nf-panel-content-left, 0px))
		minmax(0, 1fr);
	min-height: var(--nf-tabs-min-height, 480px);
	font-family: inherit;
}

/* Flat variant — no children on any tab, so no panes column rendered. */
.navforge-panel--sidebar-tabs.navforge-panel--sidebar-tabs--flat {
	grid-template-columns: 1fr;
	min-height: 0;
}

/* Tab list (ul) — explicit reset so theme ul styles can't leak in.
 * `padding-left` reserves the container's left offset so tab text starts at
 * the logo's left edge while the grey background still spans to the viewport.
 */
.navforge-panel--sidebar-tabs > .navforge-panel__tabs {
	list-style: none;
	margin: 0;
	padding: var(--nf-tabs-list-padding, 0);
	padding-left: var(--nf-panel-content-left, 0);
	background: var(--nf-tabs-bg, #f9f9f9);
	border-right: 1px solid var(--nf-tabs-divider, #ececec);
}

.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li::before,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li::marker {
	content: none;
}

/* Tab button — full reset of UA/theme button styles.
 * SINGLE SOURCE OF TRUTH for panel typography — every tier (L2 / L3 / L4)
 * reads from the same three vars, so changing one updates everything.
 *   --nf-tabs-content-weight  (default 500)
 *   --nf-tabs-content-size    (default 15px)
 *   --nf-tabs-content-family  (default inherits the menu font)
 */
.navforge-panel--sidebar-tabs .navforge-panel__tab {
	all: unset;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: var(--nf-tab-padding, 12px 16px);
	color: var(--nf-tab-color, #1a1a1a);
	background: transparent;
	font-family: var(--nf-tabs-content-family, var(--nf-item-font-family, inherit)) !important;
	font-size:   var(--nf-tabs-content-size,   15px) !important;
	font-weight: var(--nf-tabs-content-weight, 700) !important;
	line-height: 1.3 !important;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}

/* Tab inner row — wraps icon + label so the chevron stays at the far right. */
.navforge-panel--sidebar-tabs .navforge-panel__tab-text {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.navforge-panel--sidebar-tabs .navforge-panel__tab-label {
	display: inline-block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Active accent bar — left border that lights up when the tab is active.
 * Colour falls back through: explicit override → brand primary → currentColor.
 * Set --nf-primary-color (or --nf-tab-accent-color) on the menu to brand it.
 */
.navforge-panel--sidebar-tabs .navforge-panel__tab::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: var(--nf-tab-accent-width, 3px);
	background: var(--nf-tab-accent-color, var(--nf-primary-color, currentColor));
	opacity: 0;
	transition: opacity 150ms ease;
}

.navforge-panel--sidebar-tabs .navforge-panel__tab.is-active::before {
	opacity: 1;
}

/* Tab chevron — color always matches the text (currentColor) so when the
 * tab text turns green/blue/whatever on hover or active, the chevron
 * matches automatically.
 */
.navforge-panel--sidebar-tabs .navforge-panel__tab::after {
	content: '' !important;
	display: inline-block !important;
	width: var(--nf-tab-caret-size, 12px) !important;
	height: var(--nf-tab-caret-size, 12px) !important;
	margin-left: 4px !important;
	padding: 0 !important;
	border: 0 !important;
	background-color: currentColor !important;
	background-image: none !important;
	-webkit-mask-image: var(--nf-caret-icon) !important;
	        mask-image: var(--nf-caret-icon) !important;
	-webkit-mask-repeat: no-repeat !important;
	        mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	        mask-position: center !important;
	-webkit-mask-size: contain !important;
	        mask-size: contain !important;
	transform: rotate(-90deg);
	flex-shrink: 0 !important;
	visibility: visible !important;
	opacity: var(--nf-tab-chevron-opacity, 1) !important;
	transition: opacity 150ms ease;
}

/* Direct-link variant (no children) — no chevron since there's no pane to
 * switch. Covers both legacy `--link` class and new `--no-children` class.
 */
.navforge-panel--sidebar-tabs .navforge-panel__tab--link::after,
.navforge-panel--sidebar-tabs .navforge-panel__tab--no-children::after {
	content: none;
}

.navforge-panel--sidebar-tabs .navforge-panel__tab:hover {
	background: var(--nf-tab-bg-hover, #f3f4f6);
	color: var(--nf-tab-color-hover, #000);
}

.navforge-panel--sidebar-tabs .navforge-panel__tab.is-active {
	background: var(--nf-tab-bg-active, #ececec);
	color: var(--nf-tab-color-active, var(--nf-tab-color-hover, #000));
}

/* Current-page state for L2 sidebar tabs — fires when the user is on the
 * tab's linked page or one of its descendant pages. Visual matches the
 * hovered/active state so users instantly know where they are. */
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current-menu-item > .navforge-panel__tab,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current-menu-parent > .navforge-panel__tab,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current-menu-ancestor > .navforge-panel__tab,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current_page_item > .navforge-panel__tab,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current_page_parent > .navforge-panel__tab,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current_page_ancestor > .navforge-panel__tab {
	background: var(--nf-tab-bg-active, #ececec);
	color: var(--nf-tab-color-active, var(--nf-tab-color-hover, #000));
}

.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current-menu-item > .navforge-panel__tab::before,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current-menu-parent > .navforge-panel__tab::before,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current-menu-ancestor > .navforge-panel__tab::before,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current_page_item > .navforge-panel__tab::before,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current_page_parent > .navforge-panel__tab::before,
.navforge-panel--sidebar-tabs > .navforge-panel__tabs > li.current_page_ancestor > .navforge-panel__tab::before {
	opacity: 1;
}

.navforge-panel--sidebar-tabs .navforge-panel__tab:hover::after,
.navforge-panel--sidebar-tabs .navforge-panel__tab.is-active::after {
	/* Same currentColor as default — text color shift handles the visual. */
	background-color: currentColor !important;
	opacity: 1 !important;
}

.navforge-panel--sidebar-tabs .navforge-panel__tab:focus-visible {
	outline: 2px solid var(--nf-tab-focus, #000);
	outline-offset: -2px;
}

/* Tab item icon — sized to match the label. */
.navforge-panel--sidebar-tabs .navforge-panel__tab .navforge-icon {
	width: var(--nf-tab-icon-size, 18px);
	height: var(--nf-tab-icon-size, 18px);
	font-size: var(--nf-tab-icon-size, 18px);
	color: currentColor;
	flex-shrink: 0;
}

/* Panes wrapper. Right-padding combines the configured pane padding with the
 * container's right offset, so pane content ends in line with the rightmost
 * header element while the white background still spans to the viewport edge.
 */
.navforge-panel--sidebar-tabs > .navforge-panel__panes {
	padding: var(--nf-tabs-pane-padding, 16px 24px);
	padding-right: calc(var(--nf-tabs-pane-padding-right, 24px) + var(--nf-panel-content-right, 0px));
	min-width: 0; /* allow grid child to shrink instead of overflow */
}

.navforge-panel--sidebar-tabs .navforge-panel__pane {
	display: none;
}

.navforge-panel--sidebar-tabs .navforge-panel__pane.is-active {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nf-tabs-pane-row-gap, 16px) var(--nf-tabs-pane-gap, 32px);
	align-content: start;
	justify-content: flex-start;
	animation: navforge-pane-in var(--nf-tabs-pane-anim, 220ms) ease both;
}

/* Nested pane — L3 sub-tabs (left col) + L4 sub-panes (right col, revealed
 * on hover/focus). Used automatically when any L3 has L4 children.
 */
.navforge-panel--sidebar-tabs .navforge-panel__pane--nested.is-active {
	display: grid;
	grid-template-columns: var(--nf-tabs-sub-col-width, 200px) minmax(0, 1fr);
	/* Breathing space between the L3 sub-tabs column and the L4 sub-pane. */
	gap: 0 var(--nf-tabs-sub-pane-gap, 20px);
	align-items: start;
}

.navforge-panel__sub-tabs {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: var(--nf-tabs-sub-tabs-gap, 4px);
}

.navforge-panel__sub-tabs > li {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
}

.navforge-panel__sub-tabs > li::before,
.navforge-panel__sub-tabs > li::marker {
	content: none;
}

.navforge-panel__sub-tab {
	all: unset;
	box-sizing: border-box !important;
	position: relative;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-width: var(--nf-tabs-sub-tab-min-width, 140px);
	margin: 0 !important;
	padding: var(--nf-tabs-sub-tab-padding, 8px 14px) !important;
	color: var(--nf-tabs-sub-tab-color, #1a1a1a);
	background: transparent;
	/* Same three vars as L2 / L4 — uniform typography, no per-level overrides. */
	font-family: var(--nf-tabs-content-family, var(--nf-item-font-family, inherit)) !important;
	font-size:   var(--nf-tabs-content-size,   15px) !important;
	font-weight: var(--nf-tabs-content-weight, 700) !important;
	line-height: 1.3 !important;
	/* Shared height token so L3 sub-tab, L3 plain link and L4 link all
	 * compute to identical pixel height regardless of theme interference. */
	min-height: var(--nf-tabs-link-height, 36px) !important;
	height: var(--nf-tabs-link-height, 36px) !important;
	text-align: left;
	text-decoration: none !important;
	border: 0 !important;
	cursor: pointer;
	border-radius: var(--nf-tabs-sub-tab-radius, 0);
	transition: background 150ms ease, color 150ms ease;
}

.navforge-panel__sub-tab-text {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

.navforge-panel__sub-tab-label {
	display: inline-block;
	min-width: 0;
	white-space: normal;
	word-break: break-word;
}

/* Right-pointing chevron only on sub-tabs that have an L4 sub-pane.
 * Color is hard-pinned to the element's currentColor — the chevron mask is
 * painted through whatever color the surrounding text is using right now.
 * Default state slightly muted via opacity; hover/active goes full opacity.
 */
.navforge-panel__sub-tab--has-children::after {
	content: '' !important;
	display: inline-block !important;
	width: 12px !important;
	height: 12px !important;
	margin-left: 6px !important;
	flex-shrink: 0 !important;
	background-color: currentColor !important;
	-webkit-mask-image: var(--nf-caret-icon) !important;
	        mask-image: var(--nf-caret-icon) !important;
	-webkit-mask-repeat: no-repeat !important;
	        mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	        mask-position: center !important;
	-webkit-mask-size: contain !important;
	        mask-size: contain !important;
	transform: rotate(-90deg);
	opacity: var(--nf-tabs-sub-tab-chevron-opacity, 0.6);
	visibility: visible !important;
	transition: opacity 150ms ease;
}

.navforge-panel__sub-tab:hover {
	background: var(--nf-tabs-sub-tab-bg-hover, #f3f4f6);
	color: var(--nf-tabs-sub-tab-color-hover, #000);
}

.navforge-panel__sub-tab.is-active {
	background: var(--nf-tabs-sub-tab-bg-active, #e5e7eb);
	color: var(--nf-tabs-sub-tab-color-hover, #000);
}

/* Current-page state for L3 sub-tabs. */
.navforge-panel__sub-tabs > li.current-menu-item > .navforge-panel__sub-tab,
.navforge-panel__sub-tabs > li.current-menu-parent > .navforge-panel__sub-tab,
.navforge-panel__sub-tabs > li.current-menu-ancestor > .navforge-panel__sub-tab,
.navforge-panel__sub-tabs > li.current_page_item > .navforge-panel__sub-tab,
.navforge-panel__sub-tabs > li.current_page_parent > .navforge-panel__sub-tab,
.navforge-panel__sub-tabs > li.current_page_ancestor > .navforge-panel__sub-tab {
	background: var(--nf-tabs-sub-tab-bg-active, #e5e7eb);
	color: var(--nf-tabs-sub-tab-color-hover, #000);
}

.navforge-panel__sub-tab:hover::after,
.navforge-panel__sub-tab.is-active::after {
	/* Same currentColor as default; just lift the opacity so the chevron
	 * pops at full strength when the sub-tab is hovered or active. */
	background-color: currentColor !important;
	opacity: 1 !important;
}

.navforge-panel__sub-tab:focus-visible {
	outline: 2px solid var(--nf-tab-focus, #000);
	outline-offset: -2px;
}

/* Sub-panes container — only one is visible at a time. */
.navforge-panel__sub-panes {
	position: relative;
	min-width: 0;
}

.navforge-panel__sub-pane {
	display: none;
}

.navforge-panel__sub-pane.is-active {
	display: block;
	animation: navforge-pane-in var(--nf-tabs-pane-anim, 220ms) ease both;
}

.navforge-panel__sub-pane-desc {
	margin: 0 0 16px;
	color: var(--nf-tabs-link-desc-color, #6b7280);
	font-size: var(--nf-tabs-link-desc-size, 13px);
	line-height: 1.5;
}

/* Single-column vertical stack — matches the L3 sub-tabs rhythm so all
 * levels share the same visual cadence. inline-flex + align-items: stretch
 * makes the list shrink to the widest sibling, then stretches every link
 * to that same width — so all hover backgrounds are equal width. */
.navforge-panel__sub-pane-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--nf-tabs-sub-pane-row-gap, var(--nf-tabs-sub-tabs-gap, 4px));
}

.navforge-panel--sidebar-tabs .navforge-panel__sub-pane-list > li {
	display: flex;
}

.navforge-panel__sub-pane-list > li {
	list-style: none;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.navforge-panel__sub-pane-list > li::before,
.navforge-panel__sub-pane-list > li::marker {
	content: none;
}

/* Higher specificity scope (.navforge-panel--sidebar-tabs) so theme styles
 * targeting `nav a` or `.menu li a` cannot override these declarations.
 */
.navforge-panel--sidebar-tabs .navforge-panel__sub-pane-list,
.navforge-panel--sidebar-tabs .navforge-panel__sub-pane-list > li {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.navforge-panel--sidebar-tabs .navforge-panel__sub-pane-list > li > a {
	all: unset;
	box-sizing: border-box !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px;
	flex: 1 1 auto;
	width: auto;
	min-width: var(--nf-tabs-sub-pane-link-min-width, var(--nf-tabs-sub-tab-min-width, 140px));
	max-width: 100%;
	min-height: var(--nf-tabs-link-height, 36px) !important;
	height: var(--nf-tabs-link-height, 36px) !important;
	margin: 0 !important;
	padding: var(--nf-tabs-sub-pane-link-padding, var(--nf-tabs-sub-tab-padding, 8px 14px)) !important;
	/* No !important on color — mirrors L3 sub-tabs so theme styles
	 * (e.g. `nav a:hover`) can take over on hover for the brand colour. */
	color: var(--nf-tabs-link-color, var(--nf-tabs-sub-tab-color, #1a1a1a));
	background: transparent !important;
	border: 0 !important;
	border-radius: var(--nf-tabs-sub-pane-link-radius, var(--nf-tabs-sub-tab-radius, 0)) !important;
	/* Same three vars as L2 / L3 — uniform typography across every tier. */
	font-family: var(--nf-tabs-content-family, var(--nf-item-font-family, inherit)) !important;
	font-size:   var(--nf-tabs-content-size,   15px) !important;
	font-weight: var(--nf-tabs-content-weight, 700) !important;
	line-height: 1.3 !important;
	min-height: 0 !important;
	height: auto !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background 150ms ease, color 150ms ease;
}

.navforge-panel--sidebar-tabs .navforge-panel__sub-pane-list > li > a:hover,
.navforge-panel--sidebar-tabs .navforge-panel__sub-pane-list > li > a:focus-visible {
	background: var(--nf-tabs-sub-pane-link-bg-hover, var(--nf-tabs-sub-tab-bg-hover, #f3f4f6)) !important;
	/* Brand-coloured text on hover — falls through to --nf-primary-color so the
	 * Theme Editor "Primary color" drives it. !important needed to beat theme
	 * styles that target `nav a:hover`. */
	color: var(--nf-tabs-sub-pane-link-color-hover, var(--nf-primary-color, var(--nf-tabs-sub-tab-color-hover, #2563eb))) !important;
	outline: none;
}

/* Current-page state for L4 sub-pane links — coloured + bolder when the
 * link points to the current page. */
.navforge-panel--sidebar-tabs .navforge-panel__sub-pane-list > li.current-menu-item > a,
.navforge-panel--sidebar-tabs .navforge-panel__sub-pane-list > li.current_page_item > a {
	background: var(--nf-tabs-sub-pane-link-bg-current, var(--nf-tabs-sub-tab-bg-active, #e5e7eb)) !important;
	color: var(--nf-tabs-link-color-current, var(--nf-primary-color, var(--nf-tabs-link-color-hover, #000))) !important;
	font-weight: var(--nf-tabs-content-weight-current, 700) !important;
}

@keyframes navforge-pane-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Pane columns — fixed-basis flex items so they pack from the left and never
 * spread to fill empty space. Override --nf-tabs-pane-col-width per menu.
 * NOTE: only .navforge-panel__group uses the column basis. Plain links
 * (.navforge-panel__link) size to content so their hover background matches
 * the L3 sub-tab visual exactly. */
.navforge-panel--sidebar-tabs .navforge-panel__group {
	flex: 0 1 var(--nf-tabs-pane-col-width, 240px);
	min-width: 0;
}

.navforge-panel--sidebar-tabs .navforge-panel__pane > .navforge-panel__link {
	flex: 0 0 auto;
	min-width: 0;
}

/* When the pane is non-nested AND contains only plain links (no L3 groups),
 * stack the plain links vertically and stretch them all to the widest sibling
 * so every hover bg is equal width. The :not(--nested) is critical — without
 * it, this rule clobbers the nested grid layout (sub-tabs | sub-panes). */
.navforge-panel--sidebar-tabs .navforge-panel__pane.is-active:not(.navforge-panel__pane--nested):not(:has(.navforge-panel__group)) {
	display: inline-flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: var(--nf-tabs-sub-tabs-gap, 4px);
}

/* ---- Plain L3 link (no children) — visually distinct from group headings */

/* Mirrors .navforge-panel__sub-tab exactly so the visual matches an L3
 * sub-tab when an L2 has only direct children (non-nested pane mode).
 * Sized to content (no width: 100%) because in non-nested mode the link
 * sits directly inside the pane — there's no narrow sidebar column. */
.navforge-panel--sidebar-tabs .navforge-panel__link {
	all: unset;
	box-sizing: border-box !important;
	position: relative;
	display: flex !important;
	align-items: center !important;
	gap: 12px;
	width: auto;
	min-width: var(--nf-tabs-sub-tab-min-width, 140px);
	max-width: 100%;
	min-height: var(--nf-tabs-link-height, 36px) !important;
	height: var(--nf-tabs-link-height, 36px) !important;
	margin: 0 !important;
	padding: var(--nf-tabs-sub-tab-padding, 8px 14px) !important;
	color: var(--nf-tabs-sub-tab-color, #1a1a1a);
	background: transparent;
	font-family: var(--nf-tabs-content-family, var(--nf-item-font-family, inherit)) !important;
	font-size:   var(--nf-tabs-content-size,   15px) !important;
	font-weight: var(--nf-tabs-content-weight, 700) !important;
	line-height: 1.3 !important;
	text-align: left;
	text-decoration: none !important;
	border: 0 !important;
	cursor: pointer;
	border-radius: var(--nf-tabs-sub-tab-radius, 0);
	transition: background 150ms ease, color 150ms ease;
}

/* Inner label/desc — keep stacked when description present. */
.navforge-panel--sidebar-tabs .navforge-panel__link-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.navforge-panel--sidebar-tabs .navforge-panel__link-desc {
	display: block;
	color: var(--nf-tabs-link-desc-color, #6b7280);
	font-size: var(--nf-tabs-link-desc-size, 13px);
	font-weight: 400;
	line-height: 1.4;
}

/* Hover/focus state mirrors L3 sub-tabs — same background + brand-coloured
 * text. !important needed to beat theme styles like `nav a:hover`. */
.navforge-panel--sidebar-tabs .navforge-panel__link:hover,
.navforge-panel--sidebar-tabs .navforge-panel__link:focus-visible {
	background: var(--nf-tabs-plain-link-bg-hover, var(--nf-tabs-sub-tab-bg-hover, #f3f4f6)) !important;
	color: var(--nf-tabs-link-color-hover, var(--nf-primary-color, var(--nf-tabs-sub-tab-color-hover, #2563eb))) !important;
	outline: none;
}

/* Current-page state — matches L3 sub-tab active state. */
.navforge-panel--sidebar-tabs .navforge-panel__link.current-menu-item,
.navforge-panel--sidebar-tabs .navforge-panel__link.current_page_item,
.navforge-panel--sidebar-tabs .navforge-panel__link.current-menu-parent,
.navforge-panel--sidebar-tabs .navforge-panel__link.current-menu-ancestor {
	background: var(--nf-tabs-plain-link-bg-current, var(--nf-tabs-sub-tab-bg-active, #e5e7eb)) !important;
	color: var(--nf-tabs-link-color-current, var(--nf-primary-color, var(--nf-tabs-sub-tab-color-hover, #000))) !important;
}

/* ---- 3rd-level groups — heading + list of links */

.navforge-panel--sidebar-tabs .navforge-panel__group {
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.navforge-panel--sidebar-tabs .navforge-panel__group-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--nf-tabs-group-title-gap, 14px);
	padding: 0 0 var(--nf-tabs-group-title-pad, 10px);
	color: var(--nf-tabs-group-title-color, #111);
	font-family: var(--nf-item-font-family, inherit) !important;
	font-size: var(--nf-tabs-group-title-size, 15px) !important;
	font-weight: var(--nf-tabs-group-title-weight, 700) !important;
	letter-spacing: var(--nf-tabs-group-title-tracking, 0);
	line-height: 1.3 !important;
	border-bottom: 1px solid var(--nf-tabs-link-divider, #e5e7eb);
	text-decoration: none;
}

.navforge-panel--sidebar-tabs .navforge-panel__group-title-label {
	display: inline-block;
}

a.navforge-panel__group-title:hover,
a.navforge-panel__group-title:focus-visible {
	color: var(--nf-tabs-link-color-hover, #555);
	text-decoration: none;
	outline: none;
}

.navforge-panel--sidebar-tabs .navforge-panel__group-desc {
	margin: -4px 0 12px;
	color: var(--nf-tabs-link-desc-color, #6b7280);
	font-size: var(--nf-tabs-link-desc-size, 13px);
	line-height: 1.4;
}

.navforge-panel--sidebar-tabs .navforge-panel__group-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--nf-tabs-group-list-gap, 2px);
}

.navforge-panel--sidebar-tabs .navforge-panel__group-list > li {
	list-style: none;
	margin: 0;
	padding: 0;
}

.navforge-panel--sidebar-tabs .navforge-panel__group-list > li::before,
.navforge-panel--sidebar-tabs .navforge-panel__group-list > li::marker {
	content: none;
}

.navforge-panel--sidebar-tabs .navforge-panel__group-list > li > a {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: var(--nf-tabs-group-link-padding, 6px 0);
	color: var(--nf-tabs-link-color, #1a1a1a);
	font-family: var(--nf-item-font-family, inherit) !important;
	font-size: var(--nf-tabs-group-link-size, 14px) !important;
	font-weight: var(--nf-tabs-group-link-weight, 400) !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: color 150ms ease, transform 150ms ease;
}

.navforge-panel--sidebar-tabs .navforge-panel__group-list > li > a:hover,
.navforge-panel--sidebar-tabs .navforge-panel__group-list > li > a:focus-visible {
	color: var(--nf-tabs-link-color-hover, #555);
	outline: none;
}

/* Icon styling — consistent sizing across tab / group / link contexts. */
.navforge-panel--sidebar-tabs .navforge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nf-tabs-icon-size, 16px);
	height: var(--nf-tabs-icon-size, 16px);
	font-size: var(--nf-tabs-icon-size, 16px);
	color: currentColor;
	line-height: 1;
	flex-shrink: 0;
}

.navforge-panel--sidebar-tabs .navforge-icon img {
	max-width: 100%;
	max-height: 100%;
	display: block;
}

.navforge-panel--sidebar-tabs .navforge-icon--right {
	order: 2;
}

/* Tablet — tighten the sidebar tab column so panes have more room. The panel
 * itself is already full-viewport-width via position:fixed.
 */
@media (max-width: 1200px) {
	.navforge-panel--sidebar-tabs {
		grid-template-columns:
			calc(var(--nf-tabs-sidebar-width-tablet, 240px) + var(--nf-panel-content-left, 0px))
			minmax(0, 1fr);
		min-height: var(--nf-tabs-min-height-tablet, 360px);
	}
}

@media (max-width: 768px) {
	.navforge-panel--sidebar-tabs {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.navforge-panel--sidebar-tabs > .navforge-panel__tabs {
		border-right: 0;
		border-bottom: 1px solid var(--nf-tabs-divider, #e5e7eb);
		padding-left: 0;
	}
	.navforge-panel--sidebar-tabs > .navforge-panel__panes {
		padding: var(--nf-tabs-pane-padding-mobile, 20px 20px 28px);
	}
	.navforge-panel--sidebar-tabs .navforge-panel__pane.is-active {
		flex-direction: column;
		gap: var(--nf-tabs-pane-row-gap-mobile, 20px) 0;
	}
	.navforge-panel--sidebar-tabs .navforge-panel__group,
	.navforge-panel--sidebar-tabs .navforge-panel__pane > .navforge-panel__link {
		flex: 0 0 100%;
	}
	.navforge-panel--sidebar-tabs .navforge-panel__group-title {
		margin-bottom: 10px;
		padding-bottom: 8px;
	}

	/* Nested pane on mobile — stack sub-tabs vertically, show all sub-panes
	 * inline beneath their corresponding sub-tab (accordion-feel). */
	.navforge-panel--sidebar-tabs .navforge-panel__pane--nested.is-active {
		grid-template-columns: 1fr;
		gap: 16px 0;
	}
	.navforge-panel__sub-pane,
	.navforge-panel__sub-pane.is-active {
		display: block;
		animation: none;
	}
	.navforge-panel__sub-pane-list {
		grid-template-columns: 1fr;
	}
}