/* Move Up North – Tabs (frontend) */
.mun-tabs{
	--mun-tabs-max: 1412px;

	/* override per-instance by setting --mun-tabs-color on wrapper if needed */
	--mun-tabs-color: var(--ast-global-color-7);

	--mun-tabs-rail-bg: var(--mun-tabs-color);
	--mun-tabs-rail-radius: 100px;
	--mun-tabs-rail-h: 140px;
	--mun-tabs-rail-pad-x: 160px; /* like sketch */
	--mun-tabs-rail-pad-y: 14px; /* creates the green ring around active */

	--mun-tabs-active-top-radius: 20px;

	/* clickable width (smaller than full slot) */
	--mun-tabs-tab-max-w: 100%;

	--mun-tabs-sep: var(--ast-global-color-5);
	background: var(--ast-global-color-5);
	overflow: hidden;
	border-radius: var(--mun-tabs-rail-radius);
	filter: drop-shadow(0 0 74px rgba(0, 0, 0, 0.05));
	padding-bottom: 150px;
	background-repeat: no-repeat;
	background-position: 100% 50%;
	background-size: 660px auto;
	background-attachment: scroll;
	background-image: url(https://viri.se.vkube.cloud/wp-content/uploads/2026/02/polygon-right.svg);
	background-clip: padding-box;
}

.mun-tabs__heading,
.mun-tabs__panels{
	max-width: var(--mun-tabs-max);
	margin-inline: auto;
}

.mun-tabs__tabbar{
	position: relative;
	display: flex;
	align-items: stretch;
	height: var(--mun-tabs-rail-h);
	background: var(--mun-tabs-rail-bg);
	overflow: hidden;
	margin: 0 0 100px;
	padding: var(--mun-tabs-rail-pad-y) var(--mun-tabs-rail-pad-x) 0; /* IMPORTANT: no bottom padding so active reaches bottom */
	box-sizing: border-box;
	width: 100%;
	justify-content: center;
}

/* Each segment */
.mun-tabs__slot{
	flex: 1 1 0;
	min-width: 160px;
	max-width: 180px;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: stretch;
}

/* separators */
.mun-tabs__slot:not(:first-child)::before{
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	bottom: 22px;
	width: 1px;
	background: var(--mun-tabs-sep);
}
.mun-tabs__slot.is-active-slot::before,
.mun-tabs__slot.is-adjacent-active::before{
	opacity: 0;
}
/* clickable element: full height, but limited width */
.mun-tabs__tab {
	width: 100%;
	max-width: var(--mun-tabs-tab-max-w);
	height: 100%;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #fff;
	display: flex;
	align-items: stretch;
}
.mun-tabs__tab:hover {
	border-top-left-radius: var(--mun-tabs-active-top-radius);
	border-top-right-radius: var(--mun-tabs-active-top-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* inner layout */
.mun-tabs__tab-inner{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

/* active: white background, ONLY top corners rounded, bottom edge straight */
.mun-tabs__tab.is-active{
	color: #111;
}
.mun-tabs__tab.is-active .mun-tabs__tab-inner{
	background: #fff;
	border-top-left-radius: var(--mun-tabs-active-top-radius);
	border-top-right-radius: var(--mun-tabs-active-top-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

/* icon */
.mun-tabs__tab-iconwrap{
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
}
.mun-tabs__tab-icon{ width: 34px; height: 34px; display:block; object-fit:contain; }
.mun-tabs__tab-svg{ width: 34px; height: 34px; display:block; }
.mun-tabs__tab-svg *{ fill: currentColor; stroke: currentColor; }

/* label */
.mun-tabs__tab-title{
	font-size: 12px;
	letter-spacing: 0.06em;
	font-weight: 800;
	text-transform: uppercase;
}

/* focus */
.mun-tabs__tab:focus-visible{
	outline: 3px solid rgba(255,255,255,0.95);
	outline-offset: 4px;
}
.mun-tabs__tab.is-active:focus-visible{ outline-color: rgba(14,94,82,0.85); }

.mun-tab[hidden]{ display:none !important; }

@media (max-width: 782px){
	.mun-tabs__tabbar{
		justify-content: initial;
		overflow-x: scroll;
	}
	.mun-tabs{
		--mun-tabs-rail-radius: 40px;
		--mun-tabs-rail-h: 120px;
		--mun-tabs-rail-pad-x: 14px;
		--mun-tabs-rail-pad-y: 10px;
		--mun-tabs-active-top-radius: 20px;
		--mun-tabs-tab-max-w: 260px;
	}
	.mun-tabs__slot{ min-width: 140px; }
	.mun-tabs__slot:not(:first-child)::before{ top: 18px; bottom: 18px; }
}