/**
 * Context nav — persistent rail (desktop) + bottom bar (mobil).
 * P1 desktop — strip utan «Hub»-label, artikelkanal, hub-lås (se CHANGELOG).
 */

.aka-ctx-nav {
	--aka-ctx-rail-w: 104px;
	--aka-context-rail-width: var(--aka-ctx-rail-w);
	--aka-ctx-bar-h: 52px;
	--aka-ctx-z: 10000260;
	--aka-ctx-brand: #1abc9c;
	--aka-ctx-brand-deep: #159a82;
	pointer-events: none;
}

.aka-ctx-nav:not([hidden]) {
	pointer-events: auto;
}

/* —— Desktop rail —— */
.aka-ctx-rail {
	display: none;
}

@media (min-width: 1181px) {
	html:has(body.aka-context-nav-enabled) {
		overflow-x: clip;
	}

	body.aka-context-nav-enabled {
		padding-left: 0 !important;
		box-sizing: border-box;
		width: 100%;
		max-width: 100vw;
		overflow-x: clip;
		/* Global so Mira/hub overlays (outside .aka-ctx-nav) resolve 104px, not CSS fallbacks. */
		--aka-ctx-rail-w: 104px;
		--aka-ctx-channel-w: calc(100vw - var(--aka-ctx-rail-w, 104px));
	}

	.aka-ctx-rail__handle {
		display: none !important;
	}

	.aka-ctx-rail {
		display: flex;
		flex-direction: column;
		position: fixed;
		z-index: var(--aka-ctx-z);
		top: var(--header-height, 72px);
		left: 0;
		height: calc(100dvh - var(--header-height, 72px));
		bottom: auto;
		width: var(--aka-ctx-rail-w);
		pointer-events: auto;
		background: linear-gradient(180deg, var(--aka-ctx-brand) 0%, var(--aka-ctx-brand-deep) 100%);
		border-right: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow:
			inset -1px 0 0 rgba(255, 255, 255, 0.12),
			4px 0 28px rgba(26, 188, 156, 0.18);
		transition: transform 0.22s ease, opacity 0.22s ease;
	}

	.aka-ctx-rail__brand {
		display: none;
	}

	.aka-ctx-rail__nav--main {
		flex: 1 1 auto;
		padding-top: 52px;
		min-height: 0;
		display: flex;
		flex-direction: column;
	}

	.aka-ctx-rail__nav--main .aka-ctx-rail__list {
		flex: 1 1 auto;
		min-height: 0;
	}

	.aka-ctx-nav__item--mira {
		margin-top: 0;
		padding-bottom: 10px;
	}

	.aka-ctx-rail__divider--mira {
		margin-top: 10px;
		flex-shrink: 0;
	}

	.aka-ctx-rail__spacer {
		display: none;
	}

	.aka-ctx-rail__nav--mira {
		display: none;
	}

	.aka-ctx-rail__footer {
		flex-shrink: 0;
		margin-top: auto;
		padding: 8px 8px max(12px, env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(255, 255, 255, 0.22);
	}

	.aka-ctx-rail__feedback {
		min-height: 46px;
		padding: 6px 4px;
		color: rgba(255, 255, 255, 0.92);
		background: rgba(0, 0, 0, 0.08);
	}

	.aka-ctx-rail__feedback:hover,
	.aka-ctx-rail__feedback:focus-visible {
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
	}

	.aka-ctx-rail__feedback-icon {
		font-size: 1rem;
		line-height: 1;
	}

	.aka-ctx-rail__feedback .aka-ctx-nav__label {
		font-size: 0.52rem;
		line-height: 1.1;
	}

	.aka-ctx-rail__nav {
		overflow-y: auto;
		overflow-x: hidden;
		padding: 0 8px;
		scrollbar-width: thin;
		scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
	}

	.aka-ctx-rail__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
	}

	.aka-ctx-nav__item {
		width: 100%;
		display: flex;
	}

	.aka-ctx-nav__btn--rail {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		width: 100%;
		min-height: 52px;
		padding: 8px 6px;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: rgba(255, 255, 255, 0.9);
		cursor: pointer;
		text-decoration: none;
		transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	}

	.aka-ctx-nav__btn--rail:hover,
	.aka-ctx-nav__btn--rail:focus-visible {
		background: rgba(255, 255, 255, 0.14);
		color: #fff;
		outline: none;
	}

	.aka-ctx-nav__btn--rail:focus-visible {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
	}

	.aka-ctx-nav__btn--rail.is-active {
		background: rgba(255, 255, 255, 0.24);
		color: #fff;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.35),
			0 2px 8px rgba(0, 0, 0, 0.12);
	}

	.aka-ctx-rail__divider {
		list-style: none;
		height: 1px;
		margin: 10px 10px 6px;
		background: rgba(255, 255, 255, 0.28);
	}

	.aka-ctx-nav__btn--mira {
		min-height: 58px;
		background: rgba(255, 255, 255, 0.14);
		box-shadow:
			0 0 0 1px rgba(255, 255, 255, 0.22),
			0 0 18px rgba(255, 255, 255, 0.12);
		animation: aka-mira-rail-pulse 3.2s ease-in-out infinite;
	}

	.aka-ctx-nav__btn--mira.is-active {
		background: rgba(255, 255, 255, 0.3);
	}

	@keyframes aka-mira-rail-pulse {
		0%,
		100% {
			box-shadow:
				0 0 0 1px rgba(255, 255, 255, 0.22),
				0 0 12px rgba(255, 255, 255, 0.1);
		}
		50% {
			box-shadow:
				0 0 0 1px rgba(255, 255, 255, 0.35),
				0 0 22px rgba(255, 255, 255, 0.22);
		}
	}

	.aka-ctx-nav__btn--rail .aka-nav-icon {
		width: 24px;
		height: 24px;
		flex: 0 0 auto;
	}

	.aka-ctx-nav__btn--rail .aka-ctx-nav__label {
		font-size: 0.56rem;
		font-weight: 700;
		line-height: 1.12;
		text-align: center;
		max-width: 100%;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		letter-spacing: 0.01em;
		hyphens: auto;
		word-break: break-word;
		overflow-wrap: anywhere;
	}

	.aka-ctx-nav__btn--rail[data-aka-ctx-item='care'] .aka-ctx-nav__label,
	.aka-ctx-nav__btn--rail[data-aka-ctx-item='resources'] .aka-ctx-nav__label,
	.aka-ctx-nav__btn--rail[data-aka-ctx-item='diseases'] .aka-ctx-nav__label {
		font-size: 0.52rem;
		line-height: 1.08;
	}

	/*
	 * A: innehållskanal — yta mellan fixed rail och höger viewportkant.
	 * Använd var(--aka-ctx-channel-w), inte 100vw, i inner-max (undviker scroll + fel centrering).
	 */
	body.aka-context-nav-enabled {
		--aka-context-rail-width: var(--aka-ctx-rail-w);
		--aka-ctx-channel-w: calc(100vw - var(--aka-ctx-rail-w, 104px));
		--aka-ctx-content-max: 1500px;
		--aka-ctx-content-gap: clamp(16px, 2vw, 24px);
		--aka-ctx-article-gutter: clamp(24px, 3vw, 40px);
		--aka-ctx-article-max: var(--aka-ctx-content-max);
		/* Prosa/kolumner — inte sidoskal (#main-content fyller kanalen + gutter). */
		--aka-ctx-article-inner-max: min(
			var(--aka-ctx-article-max),
			calc(var(--aka-ctx-channel-w) - (2 * var(--aka-ctx-article-gutter)))
		);
		--aka-hub-drawer-gutter: var(--aka-ctx-article-gutter);
		--aka-hub-drawer-gutter-right: calc(var(--aka-ctx-article-gutter) + 50px);
		--aka-shell-drawer-pad-x: var(--aka-ctx-article-gutter);
		--aka-shell-drawer-pad-right: var(--aka-hub-drawer-gutter-right);
	}

	/* Startsida: bredare hero i samma kanal. */
	body.aka-page-front.aka-context-nav-enabled {
		--aka-ctx-content-max: 1500px;
		--aka-ctx-article-max: 1500px;
		--aka-ctx-article-gutter: clamp(24px, 3vw, 48px);
	}

	/* Auth: centrera i kanalen, håll smalt kort. */
	body.aka-context-nav-enabled:is(.aka-page-login, .aka-page-register, .aka-page-account-guest) {
		--aka-ctx-article-max: 980px;
		--aka-ctx-article-gutter: clamp(24px, 4vw, 48px);
	}

	/* Utility-sidor (ordlista m.fl.): bredare kanal, mindre sidogutter. */
	body.aka-context-nav-enabled.aka-page-ordlista {
		--aka-ctx-article-gutter: clamp(20px, 2.5vw, 48px);
		--aka-ctx-article-max: 1520px;
	}

	/* Enkelpost: smalare läskolumn — oförändrat mål, kanalcentrerat. */
	body.single-post.aka-context-nav-enabled {
		--aka-ctx-article-gutter: clamp(40px, 5vw, 96px);
		--aka-ctx-article-max: 1140px;
	}

	/*
	 * Header: endast 100vw-breakout-reset (aka-03). Ej artikelkanal / ej 1280px-cap.
	 * header-aka-global-full.html: #aka-global-header max-width 100%; .aka-inner 1520px.
	 */
	body.aka-context-nav-enabled #aka-global-header,
	body.aka-context-nav-enabled #page-container #aka-global-header,
	body.aka-context-nav-enabled #et-boc #aka-global-header {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		box-sizing: border-box !important;
		overflow: visible !important;
	}

	body.aka-context-nav-enabled #aka-global-header .aka-breadcrumbs-bar,
	body.aka-context-nav-enabled #aka-global-header .aka-upper-bar,
	body.aka-context-nav-enabled #aka-global-header .aka-lower-bar,
	body.aka-context-nav-enabled #aka-global-header .aka-top-utility {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	body.aka-context-nav-enabled #aka-global-header .aka-breadcrumbs-bar .aka-inner,
	body.aka-context-nav-enabled #aka-global-header .aka-upper-bar .aka-inner,
	body.aka-context-nav-enabled #aka-global-header .aka-lower-bar .aka-inner,
	body.aka-context-nav-enabled #aka-global-header .aka-top-utility .aka-inner {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: calc(var(--aka-ctx-rail-w, 104px) + var(--aka-ctx-article-gutter)) !important;
		padding-right: var(--aka-ctx-article-gutter) !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		box-sizing: border-box !important;
	}

	body.aka-context-nav-enabled #aka-global-header .aka-breadcrumbs-bar .aka-inner {
		justify-content: flex-start !important;
	}

	/*
	 * Artikelremsa — wp_body_open; samma gutter-kanal som #main-content (stängd rail).
	 */
	body.aka-context-nav-enabled > .aka-ctx-strip[data-aka-ctx-strip],
	body.aka-context-nav-enabled .aka-ctx-strip[data-aka-ctx-strip] {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		margin-top: 14px !important;
		margin-bottom: 20px !important;
		padding-top: 14px !important;
		padding-bottom: 14px !important;
		padding-left: var(--aka-ctx-article-gutter) !important;
		padding-right: var(--aka-ctx-article-gutter) !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
		z-index: 1 !important;
		border-top: 1px solid var(--aka-line-soft, #f3f3f0) !important;
		border-bottom: 1px solid var(--aka-line, #ececec) !important;
		background: rgba(252, 252, 251, 0.98) !important;
	}

	/*
	 * Innehållskanal: #page-container börjar vid railens högerkant (inte body-padding — Divi 100vw-breakout
	 * ignorerar body-padding och hamnar under fixed rail). Klipp overflow så inget kan ligga vänster om rail.
	 */
	body.aka-context-nav-enabled #page-container {
		box-sizing: border-box !important;
		width: var(--aka-ctx-channel-w, calc(100vw - var(--aka-ctx-rail-w, 104px))) !important;
		max-width: var(--aka-ctx-channel-w, calc(100vw - var(--aka-ctx-rail-w, 104px))) !important;
		min-width: 0 !important;
		margin-left: var(--aka-ctx-rail-w, 104px) !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
		overflow-x: clip !important;
	}

	body.aka-context-nav-enabled #et-main-area {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
	}

	body.aka-context-nav-enabled #et-boc {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
	}

	/* Divi/shortcode-breakout — håll allt i kanalen (startsida, entry-content, RC-wrap m.fl.). */
	body.aka-context-nav-enabled #page-container #left-area,
	body.aka-context-nav-enabled #page-container .entry-content,
	body.aka-context-nav-enabled #page-container .aka-home-wrap,
	body.aka-context-nav-enabled #page-container .aka-page-container,
	body.aka-context-nav-enabled #page-container .aka-guide-page,
	body.aka-context-nav-enabled #page-container #aka-guide-page {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	/*
	 * Artiklar-hubb: återställ intern gutter efter rail.
	 * #aka-blog-app har aka-page-container (nollas ovan); #main-content saknas i DOM-kedjan.
	 * Scoped till aka-page-artiklar — gäller endast när kontextrail/kanal är aktiv (denna media-query).
	 */
	body.aka-page-artiklar.aka-context-nav-enabled
		#page-container
		#aka-blog-app.aka-page-container {
		padding-left: var(--aka-ctx-article-gutter) !important;
		padding-right: var(--aka-ctx-article-gutter) !important;
		box-sizing: border-box;
	}

	body.aka-context-nav-enabled #main-content,
	body.aka-context-nav-enabled #left-area,
	body.aka-context-nav-enabled .wpforo-wrap {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: var(--aka-ctx-article-gutter) !important;
		padding-right: var(--aka-ctx-article-gutter) !important;
		padding-top: var(--aka-ctx-content-gap) !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
	}

	/* Divi .container inuti kanal — annars hamnar hero/rubrik under fixed rail */
	body.aka-context-nav-enabled #page-container > .container,
	body.aka-context-nav-enabled #et-main-area > .container,
	body.aka-context-nav-enabled #main-content > .container,
	body.aka-context-nav-enabled #main-content .container:first-child,
	body.aka-context-nav-enabled .et_builder_inner_content {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	body.aka-context-nav-enabled #main-content .et_pb_section,
	body.aka-context-nav-enabled #main-content .et_pb_row,
	body.aka-context-nav-enabled #main-content .et_pb_column {
		max-width: 100% !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	body.aka-context-nav-enabled #main-content .et_pb_section,
	body.aka-context-nav-enabled #main-content .et_pb_row {
		width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Divi hero / post title — håll i kanalen (ingen viewport-breakout) */
	body.single-post.aka-context-nav-enabled #main-content .et_pb_section:first-of-type:has(.et_pb_post_title):not(:has(.et_pb_post_content)),
	body.single-post.aka-context-nav-enabled #main-content .aka-single-dynamic-hero {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		box-sizing: border-box;
	}

	body.single-post.aka-context-nav-enabled #main-content .et_pb_section:first-of-type:has(.et_pb_post_title):not(:has(.et_pb_post_content)) .et_pb_row,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_section:first-of-type:has(.et_pb_post_title):not(:has(.et_pb_post_content)) .et_pb_column {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	body.single-post.aka-context-nav-enabled #main-content .et_pb_post_title,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_post_featured_image,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_featured_image {
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	/* Artikel wide-bleed: basera på kanalbredd, inte 100vw */
	body.single-post.aka-context-nav-enabled .aka-art {
		--aka-art-wide-bleed: clamp(0px, calc((100% - 880px) / 2), 110px);
	}

	body.aka-context-nav-enabled #main-content .et_pb_section,
	body.aka-context-nav-enabled #main-content .et_pb_column,
	body.aka-context-nav-enabled #main-content .et_pb_module,
	body.aka-context-nav-enabled #main-content .et_pb_module_inner {
		max-width: 100% !important;
		min-width: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
	}

	/* Centrera rader i kanalen (inte viewport) — behåll 1.6.6 breakout-nollställning */
	body.aka-context-nav-enabled #main-content .et_pb_section {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.aka-context-nav-enabled #main-content .et_pb_row,
	body.aka-context-nav-enabled #main-content > .container,
	body.aka-context-nav-enabled #main-content .container:first-child {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	body.single-post.aka-context-nav-enabled #main-content .et_pb_section:first-of-type:has(.et_pb_post_title):not(:has(.et_pb_post_content)),
	body.single-post.aka-context-nav-enabled #main-content .aka-single-dynamic-hero,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_section:has(.et_pb_post_featured_image),
	body.single-post.aka-context-nav-enabled #main-content .et_pb_section:has(.et_pb_featured_image) {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		box-sizing: border-box !important;
	}

	body.single-post.aka-context-nav-enabled #main-content .et_pb_section:first-of-type:has(.et_pb_post_title) .et_pb_row,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_section:first-of-type:has(.et_pb_post_title) .et_pb_column,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_post_title,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_post_title .et_pb_module_inner,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_post_title h1,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_post_title .entry-title,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_post_featured_image,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_featured_image,
	body.single-post.aka-context-nav-enabled #main-content .et_pb_post_featured_image .et_pb_image_wrap {
		width: 100% !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	body.single-post.aka-context-nav-enabled .aka-art {
		--aka-art-wide-bleed: clamp(0px, calc((100% - 880px) / 2), 110px);
	}

	/*
	 * B: fast header — syns vid scroll OCH när hub-drawer öppnas (overflow:hidden på body
	 * bryter annars sticky + lämnar header ovanför viewport vid sparad scrollposition).
	 */
	body.aka-context-nav-enabled #aka-global-header,
	body.aka-context-nav-enabled #page-container #aka-global-header,
	body.aka-context-nav-enabled #et-boc #aka-global-header,
	body.aka-context-nav-enabled.aka-sticky-header-enabled #aka-global-header,
	body.aka-context-nav-enabled.aka-hub-drawer-open #aka-global-header,
	body.aka-context-nav-enabled.aka-hub-drawer-open #page-container #aka-global-header,
	body.aka-context-nav-enabled.aka-hub-drawer-open #et-boc #aka-global-header {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin: 0 !important;
		z-index: 10000280 !important;
		filter: none !important;
		opacity: 1 !important;
		visibility: visible !important;
		pointer-events: auto !important;
		transform: none !important;
	}

	/* Endast main-area — dubbel padding på #page-container + #et-main-area gav vit lucka under header. */
	body.aka-context-nav-enabled #page-container,
	body.aka-context-nav-enabled #et-boc {
		padding-top: 0 !important;
	}

	body.aka-context-nav-enabled #et-main-area {
		padding-top: var(--header-height, 72px) !important;
	}

	/*
	 * Bakgrundshero: kant-i-kant header + rail + högerkant (kanal = #page-container).
	 * Alla gradient-/bakgrundsheroes ska ha .aka-ctx-bg-hero eller matchas här.
	 */
	body.aka-context-nav-enabled #main-content:has(
		:is(
			.aka-ctx-bg-hero,
			.aka-home-hero-panel,
			.aka-hero-wide,
			.res-hero,
			.family-hero,
			.aka-rc-collect__hero,
			.aka-policy-hero,
			.aka-terms-hero,
			.aka-guide-hero
		)
	) {
		padding-top: 0 !important;
	}

	body.aka-context-nav-enabled #main-content .entry-content:has(
		> :is(
			.aka-ctx-bg-hero,
			.aka-home-hero-panel,
			.aka-hero-wide,
			.res-hero,
			.family-hero,
			.aka-rc-collect__hero,
			.aka-policy-hero,
			.aka-terms-hero,
			.aka-guide-hero
		):first-child
	) {
		margin-top: 0 !important;
		padding-top: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	body.aka-context-nav-enabled :is(
		.aka-ctx-bg-hero,
		.aka-home-hero-panel,
		.aka-hero-wide,
		.aka-hero-standard.res-hero,
		.aka-hero-standard.family-hero,
		.aka-hero-standard.aka-rc-collect__hero,
		.res-hero,
		.aka-rc-collect__hero,
		.family-hero,
		.aka-policy-hero,
		.aka-terms-hero,
		.aka-guide-hero,
		#main-content > .et_pb_section.aka-single-dynamic-hero:first-child,
		#main-content .et_pb_section.aka-single-dynamic-hero:first-of-type
	) {
		box-sizing: border-box !important;
		width: calc(100% + (2 * var(--aka-ctx-article-gutter))) !important;
		max-width: none !important;
		margin-left: calc(-1 * var(--aka-ctx-article-gutter)) !important;
		margin-right: calc(-1 * var(--aka-ctx-article-gutter)) !important;
		margin-top: calc(-1 * var(--aka-ctx-content-gap)) !important;
		padding-left: var(--aka-ctx-article-gutter) !important;
		padding-right: var(--aka-ctx-article-gutter) !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
		border-radius: 0 !important;
		box-shadow: none !important;
	}

	/* Första hero direkt under header — ingen vit remsa ovanför. */
	body.aka-context-nav-enabled #main-content
		> :is(.entry-content, #left-area)
		> :is(
			.aka-ctx-bg-hero,
			.aka-home-hero-panel,
			.aka-hero-wide,
			.res-hero,
			.family-hero,
			.aka-rc-collect__hero,
			.aka-policy-hero,
			.aka-terms-hero,
			.aka-guide-hero,
			.aka-guide-page > .aka-guide-hero,
			#aka-guide-page > .aka-guide-hero
		):first-child,
	body.aka-context-nav-enabled #main-content .entry-content > :is(
		.aka-ctx-bg-hero,
		.aka-home-hero-panel,
		.aka-hero-wide,
		.res-hero,
		.family-hero,
		.aka-rc-collect__hero,
		.aka-policy-hero,
		.aka-terms-hero,
		.aka-guide-hero
	):first-child {
		margin-top: 0 !important;
	}

	body.aka-context-nav-enabled .aka-home-hero-panel::before {
		display: none;
	}

	body.aka-context-nav-enabled :is(.aka-ctx-bg-hero, .aka-hero-wide, .res-hero, .aka-rc-collect__hero, .family-hero)
		.aka-hero-content,
	body.aka-context-nav-enabled :is(.aka-policy-hero, .aka-terms-hero, .aka-guide-hero) {
		max-width: var(--aka-ctx-article-inner-max);
		margin-left: auto;
		margin-right: auto;
	}

	/*
	 * Footer: fyll #page-container-kanalen (rail → högerkant). Ingen 100vw-breakout — klipptes annars.
	 */
	body.aka-context-nav-enabled #page-container :is(#main-footer, #footer-bottom, .custom-footer, .et-l--footer),
	body.aka-context-nav-enabled #page-container > .et-l--footer,
	body.aka-context-nav-enabled #page-container .et_pb_section:has(.custom-footer),
	body.aka-context-nav-enabled #page-container .et_pb_section:has(#main-footer),
	body.aka-context-nav-enabled #page-container .et_pb_row:has(.custom-footer),
	body.aka-context-nav-enabled #page-container .et_pb_column:has(.custom-footer) {
		--aka-ctx-footer-bleed-w: var(--aka-ctx-channel-w, calc(100vw - var(--aka-ctx-rail-w, 104px)));
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
		z-index: 1 !important;
	}

	/* Divi footer utanför #page-container (sällsynt): placera i kanalen explicit. */
	body.aka-context-nav-enabled > :is(#main-footer, #footer-bottom, .custom-footer, .et-l--footer),
	body.aka-context-nav-enabled #page-container ~ :is(#main-footer, #footer-bottom, .custom-footer, .et-l--footer) {
		--aka-ctx-footer-bleed-w: var(--aka-ctx-channel-w, calc(100vw - var(--aka-ctx-rail-w, 104px)));
		box-sizing: border-box !important;
		width: var(--aka-ctx-footer-bleed-w) !important;
		max-width: var(--aka-ctx-footer-bleed-w) !important;
		margin-left: var(--aka-ctx-rail-w, 104px) !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
	}

	body.aka-context-nav-enabled #main-footer .container,
	body.aka-context-nav-enabled #main-footer .et_pb_row,
	body.aka-context-nav-enabled #footer-bottom .container,
	body.aka-context-nav-enabled #footer-bottom .et_pb_row,
	body.aka-context-nav-enabled .custom-footer .footer-inner,
	body.aka-context-nav-enabled .custom-footer .f-bottom,
	body.aka-context-nav-enabled .custom-footer .f-bottom-inner {
		width: 100% !important;
		max-width: min(1520px, calc(var(--aka-ctx-footer-bleed-w, var(--aka-ctx-channel-w, calc(100vw - var(--aka-ctx-rail-w, 104px)))) - (2 * var(--aka-ctx-article-gutter, 24px)))) !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: var(--aka-ctx-article-gutter, clamp(16px, 2vw, 24px)) !important;
		padding-right: var(--aka-ctx-article-gutter, clamp(16px, 2vw, 24px)) !important;
		box-sizing: border-box !important;
	}

	body.aka-context-nav-enabled.aka-hub-drawer-open #aka-global-header .aka-breadcrumbs-bar,
	body.aka-context-nav-enabled.aka-hub-drawer-open #aka-global-header .aka-upper-bar,
	body.aka-context-nav-enabled.aka-hub-drawer-open #aka-global-header .aka-lower-bar,
	body.aka-context-nav-enabled.aka-hub-drawer-open #aka-global-header .aka-top-utility {
		overflow: visible !important;
		clip-path: none !important;
	}

	/* C + D: endast rail-Mira; inga höger-flytande verktyg på desktop */
	body.aka-context-nav-enabled .aka-floating-tools,
	body.aka-context-nav-enabled .aka-floating-dock,
	body.aka-context-nav-enabled .aka-back-to-top,
	body.aka-context-nav-enabled .aka-reading-fab,
	body.aka-context-nav-enabled #aka-ai-assistant-root,
	body.aka-context-nav-enabled .aka-ai-assistant-root {
		display: none !important;
		visibility: hidden !important;
		pointer-events: none !important;
	}

	/*
	 * wpForo (/community/): fyll hela ytan mellan rail + header (sist = vinner över artikelkanal).
	 */
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) {
		--aka-ctx-article-gutter: clamp(12px, 1.5vw, 24px);
		--aka-ctx-article-max: var(--aka-ctx-channel-w);
		--aka-ctx-article-inner-max: calc(var(--aka-ctx-channel-w) - (2 * var(--aka-ctx-article-gutter)));
	}

	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #page-container {
		box-sizing: border-box !important;
		width: var(--aka-ctx-channel-w, calc(100vw - var(--aka-ctx-rail-w, 104px))) !important;
		max-width: var(--aka-ctx-channel-w, calc(100vw - var(--aka-ctx-rail-w, 104px))) !important;
		margin-left: var(--aka-ctx-rail-w, 104px) !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
		overflow-x: clip !important;
	}

	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #et-boc,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #et-main-area {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
	}

	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #left-area,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) .wpforo-wrap,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #wpforo {
		box-sizing: border-box !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: var(--aka-ctx-article-gutter) !important;
		padding-right: var(--aka-ctx-article-gutter) !important;
		left: auto !important;
		right: auto !important;
		transform: none !important;
		position: relative !important;
	}

	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #et-main-area {
		padding-top: var(--header-height, 72px) !important;
		margin-top: 0 !important;
	}

	/* Brödsmulor finns i headern — hub-remsa ger annars vit lucka under header. */
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) > .aka-ctx-strip[data-aka-ctx-strip],
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) .aka-ctx-strip[data-aka-ctx-strip] {
		display: none !important;
	}

	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et_pb_section:first-of-type,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et_pb_row:first-of-type,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et_pb_section,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et_pb_row {
		padding-top: 0 !important;
		margin-top: 0 !important;
	}

	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #wpforo,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #wpforo #wpforo-wrap {
		margin-top: 0 !important;
		padding-top: 0 !important;
	}

	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #page-container > .container,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #et-main-area > .container,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content > .container,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .container,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et_pb_row,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et_pb_section,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et_pb_column,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et-l--body,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #wpforo,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #wpforo #wpforo-wrap {
		width: 100% !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		box-sizing: border-box !important;
	}

	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et_pb_section,
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #main-content .et_pb_row {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* K-7-V3-DESKTOP-WIDTH-VERTICAL-RHYTHM-CORRECTION-1 — content-end breathing room (desktop only) */
	body.aka-context-nav-enabled:is(.aka-page-wpforo, .wpforo) #wpforo #wpforo-wrap {
		padding-bottom: var(--aka-content-end-pad, clamp(3rem, 5.5vh, var(--aka-section-rhythm-loose, 88px))) !important;
	}

	body.aka-context-nav-enabled.aka-page-resurscenter #aka-resurscenter-hub,
	body.aka-context-nav-enabled.aka-page-resurscenter .aka-resurscenter-hub-wrap {
		padding-bottom: var(--aka-content-end-pad, clamp(3rem, 5.5vh, var(--aka-section-rhythm-loose, 88px))) !important;
	}

	body.aka-context-nav-enabled.aka-page-account .aka-account-wrap .woocommerce-MyAccount-content,
	body.aka-context-nav-enabled.aka-page-account .aka-account-wrap .aka-account-forum-profile {
		padding-bottom: var(--aka-content-end-pad, clamp(3rem, 5.5vh, var(--aka-section-rhythm-loose, 88px)));
		box-sizing: border-box;
	}
}

/* —— Mobil bottom bar —— */
.aka-ctx-bar {
	display: none;
}

@media (max-width: 1180px) {
	.aka-ctx-rail {
		display: none !important;
	}

	.aka-ctx-bar {
		display: block;
		position: fixed;
		z-index: var(--aka-mob-z-bar, 1000);
		left: 0;
		right: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom, 0);
		background: linear-gradient(180deg, var(--aka-ctx-brand, #1abc9c) 0%, var(--aka-ctx-brand-deep, #159a82) 100%);
		border-top: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.18),
			0 -6px 24px rgba(26, 188, 156, 0.22);
		transition: transform 0.22s ease, opacity 0.22s ease;
	}

	.aka-ctx-bar__list {
		list-style: none;
		margin: 0;
		padding: 6px 6px max(6px, env(safe-area-inset-bottom, 0));
		display: flex;
		align-items: stretch;
		justify-content: space-around;
		gap: 4px;
		max-width: 100%;
	}

	/* K-7-V3-NON-MIRA-LAUNCH-UX-SWEEP-1 / P2 — li was flex:0 1 auto → ~28–48px tap widths */
	.aka-ctx-bar .aka-ctx-nav__item {
		flex: 1 1 0;
		min-width: 0;
		display: flex;
		align-items: stretch;
	}

	.aka-ctx-nav__btn--bar {
		flex: 1 1 auto;
		width: 100%;
		min-width: 44px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: var(--aka-ctx-bar-h);
		padding: 5px 3px;
		border: 0;
		border-radius: 12px;
		background: transparent;
		color: rgba(255, 255, 255, 0.88);
		cursor: pointer;
		transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	}

	.aka-ctx-nav__btn--bar:hover,
	.aka-ctx-nav__btn--bar:focus-visible {
		background: rgba(255, 255, 255, 0.14);
		color: #fff;
		outline: none;
	}

	.aka-ctx-nav__btn--bar:focus-visible {
		box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.45);
	}

	.aka-ctx-nav__btn--bar.is-active {
		background: rgba(255, 255, 255, 0.24);
		color: #fff;
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.35),
			0 2px 8px rgba(0, 0, 0, 0.12);
	}

	.aka-ctx-nav__btn--bar.is-accent-forum.is-active {
		background: rgba(255, 255, 255, 0.26);
		color: #fff;
	}

	.aka-ctx-nav__btn--bar .aka-nav-icon {
		width: 22px;
		height: 22px;
		flex-shrink: 0;
	}

	.aka-ctx-nav__btn--bar .aka-ctx-nav__label {
		font-size: 0.6rem;
		font-weight: 800;
		line-height: 1.1;
		letter-spacing: 0.02em;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 100%;
	}

	.aka-ctx-nav__btn--bar.aka-ctx-nav__btn--mira {
		background: rgba(255, 255, 255, 0.12);
		box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
	}

	body.aka-floating-dock-enabled .aka-floating-dock {
		bottom: calc(var(--aka-ctx-bar-h) + 12px + env(safe-area-inset-bottom, 0px));
	}

	/* Footer: full viewport (ingen vänster-rail på mobil) */
	body.aka-context-nav-enabled #main-footer,
	body.aka-context-nav-enabled #footer-bottom,
	body.aka-context-nav-enabled .custom-footer,
	body.aka-context-nav-enabled .et-l--footer,
	body.aka-context-nav-enabled #page-container > .et-l--footer,
	body.aka-context-nav-enabled #page-container .et_pb_section:has(.custom-footer),
	body.aka-context-nav-enabled #page-container .et_pb_section:has(#main-footer) {
		--aka-ctx-footer-bleed-w: 100vw;
		width: 100vw !important;
		margin-left: calc((100% - 100vw) / 2) !important;
		margin-right: calc((100% - 100vw) / 2) !important;
	}
}

/* —— Dölj vid sök-modal / läsläge (hub behåller bottenmenyn) —— */
body.aka-shell-open.aka-shell--search .aka-ctx-bar {
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
}

body.aka-reading-mode .aka-ctx-rail,
body.aka-reading-mode .aka-ctx-bar,
body.aka-reading-mode .aka-ctx-strip {
	transform: translateX(-120%);
	opacity: 0;
	pointer-events: none;
}

body.aka-reading-mode .aka-ctx-bar {
	transform: translateY(110%);
}

body.aka-reading-mode.aka-context-nav-enabled {
	padding-left: 0 !important;
}

/* —— Mira: dölj legacy FAB/edge-tab på mobil (desktop hanteras i @media ≥1181 ovan) —— */
@media (max-width: 1180px) {
	body.aka-context-nav-enabled #aka-ai-assistant-root[data-aka-ai-entry="edge-tab"]:not(.is-open) .aka-ai-assistant-fab {
		opacity: 0 !important;
		pointer-events: none !important;
		position: fixed !important;
		left: -9999px !important;
	}

	body.aka-context-nav-enabled #aka-ai-assistant-root.is-open {
		pointer-events: auto;
	}
}

/* —— Artikelremsa —— */
.aka-ctx-strip {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 auto;
	max-width: var(--aka-content-max, 720px);
	padding: 8px 16px;
	font-size: 0.8rem;
	border-bottom: 1px solid var(--aka-line-soft, #f3f3f0);
	background: linear-gradient(180deg, rgba(247, 248, 249, 0.95), transparent);
}

.aka-ctx-strip.is-accent-brand {
	border-bottom-color: rgba(26, 188, 156, 0.2);
}

.aka-ctx-strip.is-accent-forum {
	border-bottom-color: rgba(241, 196, 15, 0.25);
}

.aka-ctx-strip.is-accent-care {
	border-bottom-color: rgba(40, 116, 166, 0.2);
}

.aka-ctx-strip.is-accent-anat {
	border-bottom-color: rgba(142, 68, 173, 0.2);
}

.aka-ctx-strip.is-accent-disease {
	border-bottom-color: rgba(231, 76, 60, 0.2);
}

.aka-ctx-strip__hub {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
	border: 1px solid var(--aka-line, #ececec);
	border-radius: 999px;
	background: #fff;
	cursor: pointer;
	font: inherit;
	color: var(--color-care, #2874a6);
	text-decoration: none;
}

.aka-ctx-strip__hub:hover,
.aka-ctx-strip__hub:focus-visible {
	border-color: var(--color-brand, #1abc9c);
	color: var(--color-brand, #1abc9c);
}

.aka-ctx-strip__icon {
	font-size: 0.95rem;
	line-height: 1;
	font-weight: 700;
	flex-shrink: 0;
}

.aka-ctx-strip--article-back .aka-ctx-strip__hub {
	min-height: 44px;
	padding: 8px 14px;
}

/* Desktop: brödsmulor räcker — undvik dubbel tillbaka på enkelpost */
@media (min-width: 1181px) {
	body.single-post.aka-context-nav-enabled .aka-ctx-strip--article-back[data-aka-ctx-strip] {
		display: none !important;
	}
}

.aka-ctx-strip__kicker {
	font-size: 0.62rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--aka-shell-muted, #7f8c8d);
}

.aka-ctx-strip__label {
	font-weight: 700;
}

.aka-ctx-strip__context {
	font-size: 0.72rem;
	font-weight: 600;
	color: var(--aka-shell-muted, #7f8c8d);
}

@media (min-width: 1181px) {
	body.aka-context-nav-enabled .aka-ctx-strip[data-aka-ctx-strip] {
		max-width: 100% !important;
	}
}