/**
 * United User Menu
 *
 * Front-end styles for the unified sidebar menu.
 * CSS prefix: .ut-nav-
 *
 * Breakpoints:
 * - Desktop (≥1024px): Sidebar permanent, toggle inline as first item.
 * - Tablet  (768–1023px): Sidebar collapsed, external trigger + inline close.
 * - Mobile  (<768px): Sidebar as full-screen overlay, external trigger + inline close.
 *
 * DOM order:
 *   <button.ut-nav-trigger>          (external, mobile/tablet only)
 *   <div.ut-nav-overlay>
 *   <aside.ut-nav-sidebar>
 *     <button.ut-nav-toggle>          (inline, first item in sidebar)
 *     <div.ut-nav-context-header>
 *     <nav.ut-nav-nav>
 *     <div.ut-nav-footer>
 *
 * @package UnitedTech\Navigation
 * @since   0.1.0
 * @since   0.8.0 Unified context classes replace user/org-specific classes.
 * @since   0.9.0 Icons, badges, tooltips, collapsed icon-only mode, role dot.
 * @since   0.18.0 Toggle moved inside sidebar; external trigger for mobile/tablet.
 */

/* ==========================================================================
   Sidebar container — base (mobile-first, <768px full-screen overlay)
   ========================================================================== */

.ut-nav-sidebar {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	height: 100vh;
	background: #ffffff;
	/*
	 * Dual-layer shadow (B064 — @since 0.33.0):
	 * - Soft spread (4px 0 16px rgba alpha 0.08) for visual depth
	 * - 1px hairline (1px 0 0 rgba alpha 0.06) for clean edge definition
	 * Replaces previous single-layer `2px 0 8px rgba(0,0,0,0.1)` which was
	 * too subtle against the white Kadence background.
	 */
	box-shadow:
		4px 0 16px rgba(0, 0, 0, 0.08),
		1px 0 0 rgba(15, 23, 42, 0.06);
	transform: translateX(-100%);
	transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
}

.ut-nav-sidebar.is-open {
	transform: translateX(0);
}

/* ==========================================================================
   Sidebar trigger — mobile/tablet only (<1024px)
   Hamburger pill-knapp som åpner sidebar-drawer. Fra v0.32.0 rendret inne i
   `.ut-nav-header-bar` (plugin-rendret container rett under Kadence-header)
   istedenfor fixed-position. Bar-parent gir posisjonering; trigger beholder
   kun pill-visuals og state-overrides (se B048 / B052).
   Skjult på desktop via bar-parent (media-query i bunnen av filen).
   @since 0.18.0
   @since 0.32.0 Fixed-position fjernet; rendret inne i .ut-nav-header-bar.
   ========================================================================== */

.ut-nav-trigger {
	min-height: 44px;
	padding: 8px 14px 8px 12px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	color: #1f2937;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

/*
 * State overrides — ALL interactive states must explicitly reset background
 * and color. Kadence theme ships `button:hover, button:focus, button:active`
 * rules that set `background: var(--global-palette-btn-bg-hover)` (orange in
 * most iSandnes.net palettes). Those rules have specificity (0,1,1); our
 * `.ut-nav-trigger:<state>` rules at (0,2,1) always win, but only when the
 * state is explicitly listed below. Leaving `:focus` / `:active` unhandled
 * caused an orange flash on mobile tap in v0.31.0 (see Fase 5b-8 Chrome
 * test report, Oppgave A5).
 */
.ut-nav-trigger:hover,
.ut-nav-trigger:focus,
.ut-nav-trigger:focus-visible,
.ut-nav-trigger:active {
	background: #f8fafc;
	color: #1f2937;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.ut-nav-trigger:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.ut-nav-trigger-icon {
	width: 18px;
	height: 18px;
	color: currentColor;
	flex-shrink: 0;
}

.ut-nav-trigger-label {
	color: currentColor;
	white-space: nowrap;
}

/*
 * B054 (1) + B055 — flat trigger override inside `.ut-nav-header-bar`.
 * Pill-visuals (background, border, box-shadow, border-radius) from B048
 * are removed when trigger lives in the bar — the bar itself provides
 * visual grounding, so a container pill on top of a container bar
 * produced a "boks inni boks"-effect after v0.32.0 deploy. Placement
 * stays left-aligned (B055 — consistency with `.ut-nav-toggle` inside
 * drawer; B054 (2) right-alignment was rejected after visual mockup
 * testing).
 *
 * Scope-limited: standalone `.ut-nav-trigger` (hypothetical future
 * contexts outside the bar) retains B048 pill-styling.
 *
 * State-override pattern (B049): `:hover, :focus, :focus-visible,
 * :active` are all listed in a single block to defeat Kadence
 * `button:<state>` rules that would otherwise bleed through. The
 * pill's shadow/border resets inside the override block because the
 * flat design must not re-acquire B048 visuals on any state.
 *
 * Hover-padding (`8px 10px`) is intentionally wider than rest
 * (`8px 0`) so the subtle highlight wraps the icon + label with a
 * small amount of breathing room — this produces a tiny horizontal
 * "pop" at the left edge on hover, which visually signals the
 * affordance without reintroducing a permanent pill.
 *
 * @since 0.32.1
 */
.ut-nav-header-bar .ut-nav-trigger {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 8px 0;
	border-radius: 0;
	min-height: 36px;
	/* gap: 8px inherited from .ut-nav-trigger base (B048) — do not override */
}

.ut-nav-header-bar .ut-nav-trigger:hover,
.ut-nav-header-bar .ut-nav-trigger:focus,
.ut-nav-header-bar .ut-nav-trigger:focus-visible,
.ut-nav-header-bar .ut-nav-trigger:active {
	background: rgba(15, 23, 42, 0.04);
	border-radius: 6px;
	padding: 8px 10px;
	box-shadow: none;
	color: #1f2937;
}

.ut-nav-header-bar .ut-nav-trigger:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

/* ==========================================================================
   Header-bar (v0.32.0) — plugin-rendret container rett under Kadence-header
   Gjør trigger-knappen til en naturlig del av sidetoppen istedenfor et
   flytende element oppå Kadence-logoen. Kun synlig på entity-sider (gatet
   av PHP-conditional render i `Header_Bar::maybe_render_bar()`) og kun på
   mobil/tablet. Desktop viser sidebar permanent og skjuler hele baren.
   Erstatter B050-disclosure med bar-nivå display: none når drawer er åpen
   — trigger-knappen skjules automatisk som barn av bar-elementet.
   @since 0.32.0
   ========================================================================== */

.ut-nav-header-bar {
	display: flex;
	align-items: center;
	min-height: 40px;            /* B055 — bar-høyde styrt av trigger (36px) + align */
	padding: 0 16px;             /* B055 — vertikal padding fjernet; min-height gir rom */
	background: #ffffff;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	position: relative;
	z-index: 100;
	/* No justify-content override — default `flex-start` gjelder (B055 — venstre) */
}

/*
 * Disclosure (erstatter B050 fra v0.31.2) — når drawer er åpen, skjul
 * hele baren. Trigger lever inne i baren og skjules automatisk sammen
 * med parent. Den inline `.ut-nav-toggle` inne i drawer er da eneste
 * close-kontrollen, slik at pill-overlappet fra B050 ikke kan oppstå.
 * Desktop (≥1024px) skjuler baren via egen media-query nedenfor.
 */
body.ut-nav-sidebar-open .ut-nav-header-bar {
	display: none;
}

/* ==========================================================================
   Inline toggle — inside sidebar, first element in content flow
   Styled like a menu item: icon + label in expanded, icon-only in collapsed.
   @since 0.18.0
   ========================================================================== */

/*
 * B048 § 3 — white pill matching `.ut-nav-trigger` for visual consistency.
 * Same state-override pattern as trigger: all interactive states explicitly
 * listed to defeat Kadence `button:hover, button:focus, button:active`
 * (see `.ut-nav-trigger` comment above). `align-self: flex-end` right-aligns
 * the pill in the sidebar column (B060 — close-button convention for
 * drawers/sheets) while preserving intrinsic pill width; desktop-collapsed
 * mode overrides to centered icon-only square (see ≥1024px media block below).
 */
.ut-nav-toggle {
	display: inline-flex;
	align-items: center;
	align-self: flex-end; /* v0.32.3 — B060 (endret fra flex-start for hoyreplassering) */
	gap: 8px;
	min-height: 44px;
	padding: 8px 14px 8px 12px;
	margin: 0 0 12px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	background: #ffffff;
	color: #1f2937;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	font-size: 0.875rem;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
	position: relative;
}

.ut-nav-toggle:hover,
.ut-nav-toggle:focus,
.ut-nav-toggle:focus-visible,
.ut-nav-toggle:active {
	background-color: #f8fafc;
	color: #1f2937;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16);
	outline: none;
}

.ut-nav-toggle:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.ut-nav-toggle-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: currentColor;
}

/* Mobile/tablet: show close (X) icon, hide collapse chevron */
.ut-nav-icon-collapse {
	display: none;
}

.ut-nav-icon-close {
	display: block;
}

/* Toggle tooltip — hidden by default, shown in collapsed desktop mode */
.ut-nav-toggle .ut-nav-tooltip {
	position: absolute;
	left: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
}

/* ==========================================================================
   Overlay backdrop — mobile + tablet only
   ========================================================================== */

.ut-nav-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 998;
	background: rgba(0, 0, 0, 0.4);
}

.ut-nav-overlay.is-active {
	display: block;
}

/* ==========================================================================
   Sidebar content
   ========================================================================== */

.ut-nav-sidebar-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: auto;
	padding: 16px 16px 24px;
}

/* ==========================================================================
   Context header — unified for all contexts (user, org, project, property)
   @since 0.8.0
   @since 0.9.0 Added back-link in header, role dot, updated sizing.
   @since 0.18.0 Back-link restyled as inline menu item with icon + label.
   ========================================================================== */

.ut-nav-context-header {
	padding: 8px 0 16px;
	border-bottom: 1px solid #f1f5f9;
}

/* Header back link — styled like a menu item (icon + label) */
.ut-nav-header-back {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	margin-bottom: 8px;
	font-size: 0.875rem;
	font-weight: 500;
	color: #64748b;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.15s ease;
	position: relative;
}

.ut-nav-header-back:hover,
.ut-nav-header-back:focus-visible {
	background-color: #f8fafc;
	color: #0369a1;
}

/* C1 context-switching links — "All [type]" and "My [type]" above header */
.ut-nav-c1-links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 8px;
}

.ut-nav-c1-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 12px;
	font-size: 0.8125rem;
	font-weight: 500;
	color: #64748b;
	text-decoration: none;
	border-radius: 8px;
	transition: all 0.15s ease;
	position: relative;
}

.ut-nav-c1-link:hover,
.ut-nav-c1-link:focus-visible {
	background-color: #f8fafc;
	color: #0369a1;
}

.ut-nav-context-identity {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 12px;
}

.ut-nav-context-image {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	flex-shrink: 0;
	object-fit: cover;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Entity contexts (org, project, property) use rounded-square logo */
.ut-nav-sidebar-org .ut-nav-context-image,
.ut-nav-sidebar-project .ut-nav-context-image,
.ut-nav-sidebar-property .ut-nav-context-image {
	border-radius: 12px;
}

.ut-nav-context-initials {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--global-palette1, #0073aa);
	color: #ffffff;
	font-weight: 700;
	font-size: 0.875rem;
	flex-shrink: 0;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Entity contexts use rounded-square initials */
.ut-nav-sidebar-org .ut-nav-context-initials,
.ut-nav-sidebar-project .ut-nav-context-initials,
.ut-nav-sidebar-property .ut-nav-context-initials {
	border-radius: 12px;
}

.ut-nav-context-details {
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: opacity 0.15s ease;
}

.ut-nav-context-name {
	font-weight: 600;
	font-size: 0.875rem;
	line-height: 1.3;
	color: #0f172a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ut-nav-context-role {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.75rem;
	font-weight: 500;
	line-height: 1.3;
}

/* Role dot — pulsating indicator per context */
.ut-nav-role-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	animation: ut-nav-pulse-dot 2s ease-in-out infinite;
}

@keyframes ut-nav-pulse-dot {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
	.ut-nav-role-dot {
		animation: none;
	}
}

/* Role colors per context */
.ut-nav-sidebar-user .ut-nav-context-role {
	color: #0284c7;
}

.ut-nav-sidebar-user .ut-nav-role-dot {
	background-color: #0ea5e9;
}

.ut-nav-sidebar-org .ut-nav-context-role {
	color: #15803d;
}

.ut-nav-sidebar-org .ut-nav-role-dot {
	background-color: #22c55e;
}

.ut-nav-sidebar-project .ut-nav-context-role {
	color: #7c3aed;
}

.ut-nav-sidebar-project .ut-nav-role-dot {
	background-color: #8b5cf6;
}

.ut-nav-sidebar-property .ut-nav-context-role {
	color: #b45309;
}

.ut-nav-sidebar-property .ut-nav-role-dot {
	background-color: #f59e0b;
}

/* ==========================================================================
   Icon base styles
   @since 0.9.0
   ========================================================================== */

.ut-nav-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.ut-nav-icon-sm {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* ==========================================================================
   Navigation
   @since 0.9.0 Updated with icon support, badge, tooltip.
   ========================================================================== */

.ut-nav-nav {
	flex: 1;
	padding: 12px 0;
	overflow-y: auto;
}

/* Scrollbar styling */
.ut-nav-nav::-webkit-scrollbar {
	width: 4px;
}

.ut-nav-nav::-webkit-scrollbar-track {
	background: transparent;
}

.ut-nav-nav::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 100px;
}

.ut-nav-nav::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}

.ut-nav-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ut-nav-menu li {
	margin: 0;
	position: relative;
}

.ut-nav-menu a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	color: #475569;
	text-decoration: none;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 0.875rem;
	transition: all 0.15s ease;
	margin-bottom: 2px;
}

.ut-nav-menu a:hover,
.ut-nav-menu a:focus-visible {
	background-color: #f8fafc;
	color: #0f172a;
}

/* Label wrapper — hides in collapsed via CSS */
.ut-nav-label {
	transition: opacity 0.15s ease;
}

/* Active menu item — unified for all contexts */
.ut-nav-menu-item.ut-nav-active > a {
	background-color: #f0f9ff;
	color: #0369a1;
	font-weight: 500;
	border-color: #bae6fd;
}

/* ==========================================================================
   Badge — count indicator
   @since 0.9.0
   ========================================================================== */

.ut-nav-badge {
	margin-left: auto;
	font-size: 0.75rem;
	font-weight: 500;
	background: #f1f5f9;
	color: #64748b;
	padding: 2px 8px;
	border-radius: 9999px;
	transition: opacity 0.15s ease;
}

/* ==========================================================================
   Tooltip — visible only in collapsed mode
   @since 0.9.0
   ========================================================================== */

.ut-nav-tooltip {
	position: absolute;
	left: calc(100% + 8px);
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
	background: #1e293b;
	color: #ffffff;
	font-size: 0.75rem;
	padding: 4px 10px;
	border-radius: 6px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s ease;
	z-index: 100;
	display: none; /* Hidden by default, shown in collapsed mode via ancestor class. */
}

.ut-nav-tooltip::before {
	content: '';
	position: absolute;
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	border: 4px solid transparent;
	border-right-color: #1e293b;
}

/* Show tooltips in collapsed mode (display: block needed, opacity handled per-item on hover). */
.ut-nav-sidebar-collapsed .ut-nav-tooltip {
	display: block;
}

/* ==========================================================================
   Menu group labels
   @since 0.8.0
   @since 0.9.0 Updated font size and color.
   ========================================================================== */

.ut-nav-group-label {
	font-size: 0.625rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #64748b;
	padding: 8px 12px;
	margin: 0;
}

/* First group label needs no top padding */
.ut-nav-nav > .ut-nav-group-label:first-child {
	padding-top: 0;
}

/* Visual separator between consecutive menu groups without labels.
   Adjacent <ul> elements get a subtle border to distinguish groups. */
.ut-nav-nav > .ut-nav-menu + .ut-nav-menu {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid #e2e8f0;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.ut-nav-footer {
	margin-top: auto;
	padding: 16px 0 0;
	border-top: 1px solid #f1f5f9;
}

.ut-nav-logout {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	color: #64748b;
	text-decoration: none;
	border-radius: 8px;
	font-size: 0.875rem;
	transition: all 0.15s ease;
}

.ut-nav-logout:hover,
.ut-nav-logout:focus-visible {
	background-color: #fef2f2;
	color: #dc2626;
}

/* Login link — mirrors logout but with neutral colour (not red) */
.ut-nav-login-link {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	color: #64748b;
	text-decoration: none;
	border-radius: 8px;
	font-size: 0.875rem;
	transition: all 0.15s ease;
}

.ut-nav-login-link:hover,
.ut-nav-login-link:focus-visible {
	background-color: #f0f9ff;
	color: #0369a1;
}

/* ==========================================================================
   Back link — entity contexts (org, project, property) — footer version
   ========================================================================== */

.ut-nav-back-link {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 12px;
	color: #64748b;
	text-decoration: none;
	border-radius: 8px;
	font-size: 0.875rem;
	transition: all 0.15s ease;
}

.ut-nav-back-link:hover,
.ut-nav-back-link:focus-visible {
	background-color: #f8fafc;
	color: #374151;
}

.ut-nav-back-icon {
	flex-shrink: 0;
}

/* ==========================================================================
   Sub-menu
   ========================================================================== */

.ut-nav-menu .ut-nav-submenu {
	list-style: none;
	margin: 0;
	padding: 0 0 0 16px;
}

/* ==========================================================================
   Tablet breakpoint (768px – 1023px)
   Sidebar 288px wide, collapsed behind toggle.
   ========================================================================== */

@media (min-width: 768px) {
	.ut-nav-sidebar {
		width: 288px;
	}
}

/* ==========================================================================
   Desktop breakpoint (≥1024px)
   Sidebar always visible, toggle is inline collapse button.
   Uses body padding-left to avoid targeting theme-specific wrappers.
   ========================================================================== */

@media (min-width: 1024px) {
	.ut-nav-sidebar {
		transform: none;
	}

	/*
	 * Hide header-bar on desktop — sidebar er permanent synlig, så trigger
	 * er ikke nødvendig. Trigger arver display: none automatisk via parent.
	 * Erstatter tidligere `.ut-nav-trigger { display: none }` (v0.32.0, B052).
	 */
	.ut-nav-header-bar {
		display: none;
	}

	/* Hide overlay — not needed on desktop */
	.ut-nav-overlay {
		display: none !important;
	}

	/* Desktop: show collapse chevron, hide close X */
	.ut-nav-toggle .ut-nav-icon-close {
		display: none;
	}

	.ut-nav-toggle .ut-nav-icon-collapse {
		display: block;
	}

	/*
	 * Push page content right using body padding.
	 * This avoids targeting Kadence or any theme-specific wrapper classes.
	 * Only applied on pages with sidebar via PHP body_class filter.
	 */
	body.ut-nav-has-sidebar {
		padding-left: 288px;
		transition: padding-left 0.3s ease;
	}

	/*
	 * B063 / B066 — Constrain Gutenberg/Kadence .alignfull rows on WP-pages
	 * with sidebar (NOT on CPT-singles).
	 *
	 * Gutenberg's full-width pattern uses negative margins (margin-left/right:
	 * calc(-50vw + 50%)) to break out of .entry-content to full viewport width.
	 * On sidebar pages (body.ut-nav-has-sidebar), this breakout ignores body
	 * padding-left and extends under the fixed sidebar.
	 *
	 * Scope rationale:
	 *   - body.page.ut-nav-has-sidebar: WordPress pages like /min-side/ and
	 *     its sub-pages, where .alignfull is used for content containers and
	 *     under-sidebar-clipping must be prevented.
	 *   - body.single.ut-nav-has-sidebar (CPT singles — organization, event,
	 *     project, property, contact, place): .alignfull hero-rows have
	 *     full-bleed backgrounds as intentional design. Those pages must keep
	 *     Kadence/Gutenberg default breakout behaviour.
	 *
	 * Kadence Row Layout inlines negative margins + max-width via block
	 * attributes, so `!important` is required to override.
	 *
	 * Applies to both expanded (288px) and collapsed (68px) sidebar states.
	 *
	 * @since 0.33.0 (B063 — original rule, scoped to all sidebar pages)
	 * @since 0.33.1 (B066 — scope narrowed to body.page to prevent regression
	 *                on CPT-singles with hero-row full-bleed backgrounds)
	 */
	body.page.ut-nav-has-sidebar .alignfull,
	body.page.ut-nav-has-sidebar.ut-nav-sidebar-collapsed .alignfull {
		margin-left: 0 !important;
		margin-right: 0 !important;
		max-width: 100% !important;
	}

	/*
	 * B067 — Sidebar-width CSS custom property + .alignfull expand on CPT-singles.
	 *
	 * Kadence's `.alignfull` breakout uses `margin-left: calc(50% - 50vw)`,
	 * which assumes parent is centered in the viewport. On sidebar pages,
	 * body has `padding-left: 288px` (or 68px collapsed), so the parent is
	 * offset right of viewport-center. Kadence's math doesn't compensate, so
	 * hero-rows clip under the sidebar AND overflow past viewport-right.
	 *
	 * Fix: pull an additional `sidebar-width/2` off margin-left so the row
	 * snaps back to `x=0` (viewport-left). The fixed sidebar covers `x=0–288`
	 * visually, so the user sees the hero bleed from the sidebar's right edge
	 * to viewport-right — the intended full-bleed look.
	 *
	 * Scope: body.single.ut-nav-has-sidebar (CPT-singles where hero-full-bleed
	 * is intentional). body.page is handled by the B066 constrain-rule above.
	 *
	 * Collapsed state (68px): the custom property is overridden via the
	 * .ut-nav-sidebar-collapsed body class, and calc() re-evaluates
	 * automatically on class toggle.
	 *
	 * @since 0.33.2 (B067)
	 */
	body.ut-nav-has-sidebar {
		--ut-nav-sidebar-width: 288px;
	}
	body.ut-nav-has-sidebar.ut-nav-sidebar-collapsed {
		--ut-nav-sidebar-width: 68px;
	}

	body.single.ut-nav-has-sidebar .alignfull,
	body.single.ut-nav-has-sidebar.ut-nav-sidebar-collapsed .alignfull {
		margin-left: calc(50% - 50vw - var(--ut-nav-sidebar-width) / 2) !important;
		margin-right: calc(50% - 50vw - var(--ut-nav-sidebar-width) / 2) !important;
		width: 100vw !important;
		max-width: 100vw !important;
	}

	/*
	 * B068 — padding-left på .alignfull for body.single (utvider B067).
	 *
	 * B067 løste .alignfull-bakgrunnens full-bleed matematisk (margin/width
	 * kompensasjon for body padding-left). Men Kadence-inner-wrapperen
	 * `.kt-row-column-wrap` sentreres i foreldre-raden via formelen
	 * `(row-width − content-max-width) / 2 = margin-left`. Denne formelen
	 * ignorerer body `padding-left: 288px` fordi raden har brutt ut av body-
	 * padding via B067. Resultat: hero-innhold sentreres i HELE viewport
	 * (inkl. sidebar-sonen), ikke i safe-zone (viewport minus sidebar) —
	 * innholdet starter typisk ~105px skjult under sidebaren på 1424px
	 * viewport.
	 *
	 * Fiks: padding-left (ikke margin) holder inner-wrapper sentrert
	 * innenfor sidebar-offset uten å bryte .alignfull-bakgrunnens margin-
	 * breakout. Padding er INSIDE box-modellen; den påvirker ikke de negative
	 * margin-ene fra B067, så bakgrunnen forblir full-bleed, mens
	 * .kt-row-column-wrap dyttes til høyre for sidebaren.
	 *
	 * Asymmetrisk resultat er akseptert: mer tomrom til venstre av innholdet
	 * enn til høyre, men funksjonelt korrekt — ingenting skjult bak sidebar.
	 *
	 * Collapsed-state følger automatisk via `--ut-nav-sidebar-width`-
	 * custom-property (68px collapsed / 288px expanded).
	 *
	 * @since 0.33.3 (B068)
	 */
	body.single.ut-nav-has-sidebar .alignfull,
	body.single.ut-nav-has-sidebar.ut-nav-sidebar-collapsed .alignfull {
		padding-left: var(--ut-nav-sidebar-width) !important;
	}

	/* ==========================================================================
	   Collapsed state — desktop only, icon-only with tooltips.
	   Driven by body class (set in <head> before sidebar renders) to prevent
	   FOUC when navigating between pages in collapsed mode.
	   @since 0.8.0
	   @since 0.9.0 68px width, icon-only mode, tooltip on hover.
	   @since 0.18.3 Selectors changed from .ut-nav-sidebar.is-collapsed to
	                 .ut-nav-sidebar-collapsed .ut-nav-sidebar for FOUC prevention.
	   ========================================================================== */

	.ut-nav-sidebar-collapsed .ut-nav-sidebar {
		width: 68px;
	}

	.ut-nav-sidebar-collapsed .ut-nav-sidebar-content {
		padding: 12px 6px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.ut-nav-sidebar-collapsed .ut-nav-sidebar-content::-webkit-scrollbar {
		display: none;
	}

	/* Hide text elements with transition — works for ALL contexts */
	.ut-nav-sidebar-collapsed .ut-nav-context-details,
	.ut-nav-sidebar-collapsed .ut-nav-label,
	.ut-nav-sidebar-collapsed .ut-nav-badge,
	.ut-nav-sidebar-collapsed .ut-nav-group-label {
		opacity: 0;
		width: 0;
		overflow: hidden;
		white-space: nowrap;
	}

	/* Collapsed toggle: icon-only circle, align with collapsed-sidebar width */
	.ut-nav-sidebar-collapsed .ut-nav-toggle {
		align-self: center;
		justify-content: center;
		width: 44px;
		min-width: 44px;
		padding: 0;
		gap: 0;
		border-radius: 50%;
	}

	/* Flip chevron when collapsed (point right = expand) */
	.ut-nav-sidebar-collapsed .ut-nav-toggle .ut-nav-icon-collapse {
		transform: rotate(180deg);
	}

	/* Show toggle tooltip on hover (mouse) or keyboard focus in collapsed state.
	   :focus-visible (rather than :focus) ensures the tooltip only appears for
	   keyboard users, so it does not linger after a mouse click. (5d-4 / B041 kontekst) */
	.ut-nav-sidebar-collapsed .ut-nav-toggle:hover .ut-nav-tooltip,
	.ut-nav-sidebar-collapsed .ut-nav-toggle:focus-visible .ut-nav-tooltip {
		opacity: 1;
	}

	/* Collapsed header-back: show as icon-only, centered */
	.ut-nav-sidebar-collapsed .ut-nav-header-back {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
		gap: 0;
	}

	/* Show header-back tooltip on hover or keyboard focus in collapsed state. */
	.ut-nav-sidebar-collapsed .ut-nav-header-back:hover .ut-nav-tooltip,
	.ut-nav-sidebar-collapsed .ut-nav-header-back:focus-visible .ut-nav-tooltip {
		opacity: 1;
	}

	/* Center menu items in collapsed */
	.ut-nav-sidebar-collapsed .ut-nav-menu a {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
		gap: 0;
	}

	/* Show tooltip on hover in collapsed state */
	.ut-nav-sidebar-collapsed .ut-nav-menu-item:hover .ut-nav-tooltip {
		opacity: 1;
	}

	/* Also show tooltip via keyboard focus */
	.ut-nav-sidebar-collapsed .ut-nav-menu-item:focus-within .ut-nav-tooltip {
		opacity: 1;
	}

	/* Header: center identity, shrink avatar */
	.ut-nav-sidebar-collapsed .ut-nav-context-header {
		padding: 8px 0;
		border-bottom: 1px solid #f1f5f9;
	}

	.ut-nav-sidebar-collapsed .ut-nav-context-identity {
		justify-content: center;
		padding: 0;
		gap: 0;
	}

	.ut-nav-sidebar-collapsed .ut-nav-context-image {
		width: 36px;
		height: 36px;
	}

	.ut-nav-sidebar-collapsed .ut-nav-context-initials {
		width: 36px;
		height: 36px;
		font-size: 0.75rem;
	}

	/* Nav: tighter padding in collapsed, hide scrollbar */
	.ut-nav-sidebar-collapsed .ut-nav-nav {
		padding: 8px 0;
		scrollbar-width: none; /* Firefox */
		-ms-overflow-style: none; /* IE/Edge */
	}

	.ut-nav-sidebar-collapsed .ut-nav-nav::-webkit-scrollbar {
		display: none; /* Chrome/Safari */
	}

	/* Footer: center content, hide text */
	.ut-nav-sidebar-collapsed .ut-nav-footer {
		padding: 8px 0 0;
		overflow: hidden;
	}

	.ut-nav-sidebar-collapsed .ut-nav-logout,
	.ut-nav-sidebar-collapsed .ut-nav-login-link {
		justify-content: center;
		gap: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* Collapsed C1 links: icon-only, centered */
	.ut-nav-sidebar-collapsed .ut-nav-c1-link {
		justify-content: center;
		padding-left: 0;
		padding-right: 0;
		gap: 0;
	}

	/* Show C1-link tooltip on hover or keyboard focus in collapsed state. */
	.ut-nav-sidebar-collapsed .ut-nav-c1-link:hover .ut-nav-tooltip,
	.ut-nav-sidebar-collapsed .ut-nav-c1-link:focus-visible .ut-nav-tooltip {
		opacity: 1;
	}

	/* Show login-link tooltip on hover or keyboard focus in collapsed state. */
	.ut-nav-sidebar-collapsed .ut-nav-login-link:hover .ut-nav-tooltip,
	.ut-nav-sidebar-collapsed .ut-nav-login-link:focus-visible .ut-nav-tooltip {
		opacity: 1;
	}

	.ut-nav-sidebar-collapsed .ut-nav-back-link {
		justify-content: center;
		gap: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.ut-nav-sidebar-collapsed .ut-nav-back-link span {
		opacity: 0;
		width: 0;
		overflow: hidden;
	}

	/* Adjust body padding when collapsed.
	   First rule: JS has set class on body (normal toggle flow).
	   Second rule: head script set class on <html> (initial page load). */
	body.ut-nav-has-sidebar.ut-nav-sidebar-collapsed,
	.ut-nav-sidebar-collapsed body.ut-nav-has-sidebar {
		padding-left: 68px;
	}
}

/* ==========================================================================
   Scroll lock — prevent body scrolling when sidebar is open (mobile/tablet)
   ========================================================================== */

body.ut-nav-sidebar-open {
	overflow: hidden;
}

@media (min-width: 1024px) {
	body.ut-nav-sidebar-open {
		overflow: visible;
	}
}

/* ==========================================================================
   WordPress admin bar adjustment
   ========================================================================== */

.admin-bar .ut-nav-sidebar {
	top: 32px;
	height: calc(100vh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .ut-nav-sidebar {
		top: 46px;
		height: calc(100vh - 46px);
	}
}