/* ==========================================================================
   MENU MEGA ITEMS - Mega menu panels and specific mega menus
   ========================================================================== */

/* Variables */
:root {
	--mega-menu-width-insight: 704px;
	--mega-menu-width-branscher: 1020px;
	--mega-menu-width-erbjudande: 1200px;
	--stagger-base: 80ms;
	--stagger-step: 25ms;
}
@media screen and (min-width: 1100px) and (max-width: 1200px) {
	:root {
		--mega-menu-width-erbjudande: 1100px;
		--mega-menu-width-branscher: 900px;
	}
}

@media screen and (min-width: 1026px) and (max-width: 1099px) {
	:root {
		--mega-menu-width-erbjudande: 995px;
		--mega-menu-width-branscher: 840px;
	}
}
/* ==========================================================================
   Link hover underline effect
   ========================================================================== */

.link-hover span,
.link-hover a {
	position: relative;
}

@media screen and (min-width: 1026px) {
	.link-hover span::before,
	.link-hover a::before {
		content: "";
		position: absolute;
		bottom: -2px;
		width: 0;
		height: 1px;
		background: currentColor;
		transition: 0.2s ease-out;
	}

	.link-hover:is(:hover, :focus-visible) span::before,
	.link-hover a:is(:hover, :focus-visible)::before {
		width: 100%;
	}
	.text--l.link-hover span::before,
	.text--l.link-hover a::before {
		height: 2px;
	}
}

/* ==========================================================================
   Mega menu panel (base)
   ========================================================================== */

.menu-item.has-mega-menu {
	position: relative;
}

.mega-menu-panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 100;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition:
		opacity 150ms ease-out,
		visibility 0s linear 150ms;
}

.mega-menu-panel.is-open {
	visibility: visible;
	pointer-events: auto;
	opacity: 1;
	transition:
		opacity 150ms ease-out,
		visibility 0s linear 0s;
}

/* Mega menu content box */
.mega-menu-content {
	background: #fff;
	border-radius: var(--radius-l);
	box-shadow: var(--box-shadow-m);
	padding: var(--gap-xs4);
	transform: translateY(10px);
}

/* ==========================================================================
   Insight mega menu
   ========================================================================== */

.mega-menu-insight {
	width: var(--mega-menu-width-insight);
}

.mega-menu-insight__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mega-menu-insight__list > li {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out;
}

.mega-menu-panel.is-open .mega-menu-insight__list > li {
	opacity: 1;
	transform: translateY(0);
}

.mega-menu-panel.is-open .mega-menu-insight__list > li:nth-child(1) {
	transition-delay: var(--stagger-base);
}
.mega-menu-panel.is-open .mega-menu-insight__list > li:nth-child(2) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step));
}
.mega-menu-panel.is-open .mega-menu-insight__list > li:nth-child(3) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 2);
}
.mega-menu-panel.is-open .mega-menu-insight__list > li:nth-child(4) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 3);
}

.mega-menu-insight__latest {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out;
}

@media screen and (max-width: 1025px) {
	.mega-menu-insight__latest {
		margin-top: var(--gap-s);
	}
}

.mega-menu-panel.is-open .mega-menu-insight__latest {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 3);
}

@media screen and (min-width: 1026px) {
	.mega-menu-insight__latest .post-item__img-wrapper {
		aspect-ratio: 308 / 193;
	}
}

/* ==========================================================================
   Branscher mega menu
   ========================================================================== */

.mega-menu-branscher {
	width: var(--mega-menu-width-branscher);
}

.mega-menu-item__bransch {
	opacity: 0;
	transform: translateY(12px);
	border-radius: var(--radius-s);
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out,
		box-shadow 0.15s ease-out;
}

@media screen and (min-width: 1026px) {
	.mega-menu-item__bransch:has(a:is(:hover, :focus-visible)) {
		box-shadow: var(--box-shadow-m);
	}
}

.mega-menu-item__bransch-icon svg {
	width: 30px;
	min-width: 30px;
	max-width: 30px;
}

.mega-menu-panel.is-open .mega-menu-item__bransch {
	opacity: 1;
	transform: translateY(0);
}

.mega-menu-panel.is-open .mega-menu-item__bransch:nth-child(1) {
	transition-delay: var(--stagger-base);
}
.mega-menu-panel.is-open .mega-menu-item__bransch:nth-child(2) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step));
}
.mega-menu-panel.is-open .mega-menu-item__bransch:nth-child(3) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 2);
}
.mega-menu-panel.is-open .mega-menu-item__bransch:nth-child(4) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 3);
}
.mega-menu-panel.is-open .mega-menu-item__bransch:nth-child(5) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 4);
}
.mega-menu-panel.is-open .mega-menu-item__bransch:nth-child(6) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 5);
}
.mega-menu-panel.is-open .mega-menu-item__bransch:nth-child(7) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 6);
}
.mega-menu-panel.is-open .mega-menu-item__bransch:nth-child(8) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 7);
}
.mega-menu-panel.is-open .mega-menu-item__bransch:nth-child(9) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 8);
}

@media screen and (min-width: 1026px) {
	.mega-menu-content.mega-menu-branscher {
		padding: var(--gap-xs5);
	}

	.mega-menu-content.mega-menu-branscher .mega-menu-item__bransch {
		padding: var(--gap-xs6);
	}
}

.mega-menu-item__bransch-content p {
	display: none;
}

@media screen and (min-width: 1026px) {
	.mega-menu-item__bransch-content p {
		display: block;
	}
}

/* ==========================================================================
   Erbjudande mega menu
   ========================================================================== */

.mega-menu-erbjudande {
	width: var(--mega-menu-width-erbjudande);
	padding: 0;
	overflow: hidden;
}
@media screen and (min-width: 1026px) {
	.mega-menu-erbjudande__services {
		padding: var(--gap-xs4);
	}
}

@media screen and (max-width: 1025px) {
	header .mega-menu-panel--erbjudande.mega-menu-panel--erbjudande.mega-menu-panel--erbjudande {
		padding-left: 0;
		padding-right: 0;
	}

	header .mega-menu-content.mega-menu-erbjudande {
		padding-bottom: 0;
	}

	header .mega-menu-panel--erbjudande.mega-menu-panel--erbjudande.mega-menu-panel--erbjudande nav.service-feed {
		padding-left: var(--gutter);
		padding-right: var(--gutter);
	}

	.mega-menu-erbjudande {
		padding-bottom: 0;
	}

	.mega-menu-erbjudande__bottom {
		margin-top: var(--gap-xs4);
		padding-bottom: 3rem;
	}
}

.mega-menu-erbjudande__bottom {
	padding: 2rem var(--gap-xs4);
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out;
}

@media screen and (max-width: 1025px) {
	.mega-menu-erbjudande__bottom {
		padding: var(--gap-xs4) var(--gutter);
	}
}
.mega-menu-panel.is-open .mega-menu-erbjudande__bottom {
	opacity: 1;
	transform: translateY(0);
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 4);
}

.mega-menu-erbjudande__bottom .box {
	padding: var(--gap-xs6);
	transition: background 0.2s ease-out;
}

.mega-menu-erbjudande__bottom .box * {
	transition: 0.2s ease-out;
}

.mega-menu-erbjudande__bottom .box a {
	outline: none;
}

.mega-menu-erbjudande__bottom .box .link-primary {
	pointer-events: none;
}

@media screen and (min-width: 1026px) {
	.mega-menu-erbjudande__bottom .box:has(a:is(:hover, :focus-visible)) {
		background: var(--primary);
	}

	.mega-menu-erbjudande__bottom .box:has(a:is(:hover, :focus-visible)) * {
		color: #fff;
	}
}

.mega-menu-erbjudande .service-feed__section {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out;
}
.mega-menu-erbjudande .service-feed__heading{
	margin-bottom:4px;
}

.mega-menu-panel.is-open .mega-menu-erbjudande .service-feed__section {
	opacity: 1;
	transform: translateY(0);
}

.mega-menu-panel.is-open .mega-menu-erbjudande .service-feed__section:nth-child(1) {
	transition-delay: var(--stagger-base);
}
.mega-menu-panel.is-open .mega-menu-erbjudande .service-feed__section:nth-child(2) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step));
}
.mega-menu-panel.is-open .mega-menu-erbjudande .service-feed__section:nth-child(3) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 2);
}
.mega-menu-panel.is-open .mega-menu-erbjudande .service-feed__section:nth-child(4) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step) * 3);
}

.mega-menu-erbjudande .service-single {
	padding-bottom: 6px;
	padding-left:0;
	padding-right:0;
	padding-top:0;
}

.mega-menu-erbjudande .service-single svg.hover {
	left: 0;
}

@media screen and (min-width: 1026px) {
	.mega-menu-erbjudande .service-single:is(:hover, :focus-visible, .current) {
		box-shadow: none;
	}

	.mega-menu-erbjudande .service-single.current span {
		transform: translateX(18px);
	}

	.mega-menu-erbjudande .service-single.current svg.hover {
		opacity: 1;
		transform: translateX(0) translateY(-50%);
	}
}

/* ==========================================================================
   Language Picker
   ========================================================================== */

.menu-support__language-picker.has-mega-menu {
	position: relative;
}

/* Rotate chevron on open */
.menu-support__language-picker svg.rotate {
	transition: transform 0.2s ease-out;
}

.menu-support__language-picker:has(.mega-menu-panel.is-open) svg.rotate {
	transform: rotate(180deg);
}

/* Language picker content */
.menu-support__language-picker .mega-menu-content a {
	display: block;
	padding: 6px 24px;
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity 180ms ease-out,
		transform 180ms ease-out;
}

.mega-menu-panel.is-open .menu-support__language-picker .mega-menu-content a,
.menu-support__language-picker .mega-menu-panel.is-open .mega-menu-content a {
	opacity: 1;
	transform: translateY(0);
}

.menu-support__language-picker .mega-menu-panel.is-open .mega-menu-content a:nth-child(1) {
	transition-delay: var(--stagger-base);
}
.menu-support__language-picker .mega-menu-panel.is-open .mega-menu-content a:nth-child(2) {
	transition-delay: calc(var(--stagger-base) + var(--stagger-step));
}

@media screen and (min-width: 1026px) {
	.menu-support__language-picker .mega-menu-content {
		padding: 12px 0;
		transform: translateY(22px);
	}
}

/* ==========================================================================
   Menu Support - Desktop/Mobile visibility
   ========================================================================== */

.menu-support--mobile {
	display: none;
}

@media screen and (min-width: 1026px) {
	.menu-support--mobile {
		display: none !important;
	}
}

@media screen and (max-width: 1025px) {
	.menu-support--desktop {
		display: none !important;
	}

	.menu-support--mobile {
		display: flex;
		flex-direction: column !important;
		margin-top: var(--gap-s);
		margin-right: auto;
	}
}