/* Megamenu (functions/site/megamenu.php, views/partials/megamenu-*.twig).
   The wrapper is a ul.child-pages so menu.js opens/closes it like any submenu; the rules below
   override the dropdown look from menu-subitems.css (which loads after this file, hence the
   `.megamenu` prefix on li rules for specificity). */

/* The area whose page we're on (both breakpoints) */
.megamenu__area.is-current > .megamenu__area-button {
	font-weight: 500;
}

/* Subtle fade-up when a panel (desktop) or view (mobile drill-down) is shown */
@keyframes megamenu-panel-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@media screen and (min-width: 1026px) {
	/* Full-width panel: position against the fixed header instead of the menu item */
	header li.menu-item.has-megamenu {
		position: static;
	}
	header ul.child-pages--megamenu {
		left: 0;
		right: 0;
		top: 100%;
		width: 100%;
		padding: 0;
		background: var(--white);
		border-top: 1px solid var(--primary-subtle-light);
		box-shadow: 0 24px 40px -24px rgba(18, 14, 37, 0.25);
	}
	header ul.child-pages--megamenu > li.megamenu {
		display: block;
		width: 100%;
		padding: 0 !important;
	}

	.megamenu__inner {
		max-inline-size: calc(var(--width-vp-max) + var(--gutter) * 2);
		margin-inline: auto;
		padding: 0 var(--gutter);
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
		gap: var(--space-l);
	}
	/* Vertical padding on the columns, not on __inner, so the areas' divider runs the panel's full height
	   (top border to bottom edge) */
	.megamenu__panels {
		padding-block: var(--space-l);
	}

	/* Left column: areas */
	.megamenu__areas {
		margin: 0;
		padding: var(--space-l) var(--space-l) var(--space-l) 0;
		border-right: 1px solid var(--primary-subtle-light);
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
	}
	.megamenu .megamenu__areas li {
		display: block;
		padding: 0 !important;
	}
	/* Hover/focus target only (switches panel), so a button, not a link, and an e-resize cursor instead
	   of pointer since clicking does nothing (the arrow points at the panel it shows). `.megamenu` prefix beats the global button:hover/:focus colors in
	   site-specific/sondra/style-min.css */
	.megamenu .megamenu__area-button {
		display: flex;
		align-items: center;
		gap: 0;
		width: 100%;
		padding: 1rem 1.6rem;
		border: 0;
		border-radius: 4px;
		background: none;
		font: inherit;
		font-size: var(--text-m);
		text-align: left;
		color: var(--base);
		cursor: e-resize;
		transition: background-color 0.15s ease-out;
	}
	/* Dot: takes no space by default (negative margin = its width), so the text sits at the padding edge.
	   Active and hover grow the margin, which slides the text right to make room, and scale the dot in */
	.megamenu__area-button::before {
		content: "";
		flex: 0 0 auto;
		width: 8px;
		height: 8px;
		margin-right: -8px;
		border-radius: 50%;
		background: var(--primary);
		opacity: 0;
		transform: scale(0);
		transition: margin 0.15s ease-out, opacity 0.15s ease-out, transform 0.15s ease-out;
	}
	/* Active = the area whose page we're on: background + dot (font-weight from the rule at the top) */
	.megamenu__area.is-current > .megamenu__area-button {
		background: var(--primary-light);
	}
	/* Hover = dot only. Also on is-active (the area whose panel is shown, set by hover), so the dot stays
	   when the pointer moves on into the panel */
	.megamenu__area:is(.is-current, .is-active) > .megamenu__area-button::before,
	.megamenu__area-button:is(:hover, :focus-visible)::before {
		margin-right: 1.6rem;
		opacity: 1;
		transform: none;
	}

	/* Right column: one panel per area, switched by megamenu.js. Main content + optional "Utvalda" aside;
	   without the aside, main takes the full width */
	.megamenu__panel {
		display: none;
	}
	/* Subtle fade-in when switching area: the animation restarts every time a panel goes from display:none to shown */
	.megamenu__panel.is-active {
		display: flex;
		gap: var(--space-l);
		animation: megamenu-panel-in 0.2s ease-out;
	}
	.megamenu__main {
		flex: 2 1 0;
		min-width: 0;
		display: flex;
		flex-direction: column;
		gap: var(--space-xs);
	}
	/* align-self: main is a flex column, which would otherwise stretch the link (and its hover area) to full width */
	.megamenu__title {
		position: relative;
		display: inline-flex;
		align-self: flex-start;
		align-items: center;
		gap: 1.2rem;
		margin: 0;
		color: var(--base);
		text-decoration: none !important;
	}
	.megamenu__title-arrow svg {
		width: 22px;
		height: auto;
		color: var(--primary);
	}
	/* Hover: the link--primary icon's #small "dot" fades in to the left of the title (absolutely positioned,
	   so the text never moves) */
	.megamenu__title-icon {
		position: absolute;
		right: 100%;
		top: 50%;
		transform: translateY(-50%);
		display: inline-flex;
		align-items: center;
		width: 30px;
		pointer-events: none;
	}
	.megamenu__title-icon svg {
		flex: 0 0 auto;
		width: 30px;
		height: auto;
	}
	.megamenu__title-icon svg path {
		opacity: 0;
		transition: opacity 0.2s ease-out;
	}
	.megamenu__title:is(:hover, :focus-visible) .megamenu__title-icon svg path#small {
		opacity: 1;
	}
	.megamenu__ingress {
		max-width: 42ch;
		margin: 0;
		font-size: var(--text-s);
	}
	.megamenu__subtitle {
		margin: var(--space-s) 0 0;
	}
	.megamenu__funktioner {
		margin: 0;
		padding: 0;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.8rem var(--space-m);
	}
	.megamenu .megamenu__funktioner li {
		display: block;
		padding: 0 !important;
	}
	/* `.megamenu` prefix beats .primary-navigation li a (font-weight 500) in menu-global.css */
	.megamenu .megamenu__funktioner a {
		display: inline-flex;
		align-items: center;
		gap: 0;
		font-size: var(--text-m);
		font-weight: 300;
		color: var(--base);
		text-decoration: none !important;
	}
	.megamenu__funktioner a svg {
		width: 0;
		height: 12px;
		margin-right: 0;
		opacity: 0;
		color: var(--primary);
		transition: width 0.15s ease-out, margin 0.15s ease-out, opacity 0.15s ease-out;
	}
	.megamenu__funktioner a:is(:hover, :focus-visible) {
		font-weight: 500;
	}
	.megamenu__funktioner a:is(:hover, :focus-visible) svg {
		width: 16px;
		margin-right: 0.8rem;
		opacity: 1;
	}
	/* The circle chevron is for the mobile rows */
	.megamenu__funktioner .funktion-feed__chevron {
		display: none;
	}

	/* "Funktioner" template: the child funktion cards from the landing pages (components/funktion-card.twig,
	   funktion-feed.css), 3 per row. white-space: undo .primary-navigation li a { nowrap } (menu-global.css) */
	.megamenu__funktion-cards {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-s);
		margin-top: var(--space-xs);
	}
	.megamenu .funktion-card a {
		white-space: normal;
	}
	/* Smaller than on the landing page (h--5), to fit three narrow cards */
	.megamenu .funktion-card__title {
		font-size: var(--text-m) !important;
		font-weight: 500;
	}
	/* Two lines in the menu (the landing page shows the full text), so one long text doesn't stretch the row */
	.megamenu .funktion-card__text {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	/* "Utvalda berättelser": the area's related posts as small cards (image + title + excerpt) */
	.megamenu__utvalda {
		flex: 1 1 0;
		min-width: 0;
	}
	.megamenu__utvalda-heading {
		margin: 0 0 var(--space-xs);
		font-size: var(--text-m);
		font-weight: 400;
		line-height: 1.3;
	}
	.megamenu__utvalda-list {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}
	/* justify-content: undo `ul.child-pages li { space-between }` in menu-subitems.css, which pushes short text to the right */
	.megamenu .megamenu__utvalda-list li {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 1.6rem;
		padding: 1rem !important;
		background: var(--primary-light);
	}
	.megamenu__utvalda-image {
		flex: 0 0 auto;
		width: 93px;
		aspect-ratio: 1;
	}
	.megamenu__utvalda-image img {
		width: 100%;
		height: 100%;
	}
	.megamenu__utvalda-text {
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		min-width: 0;
	}
	/* `.megamenu` prefix beats .primary-navigation li a (nowrap, 1.4rem) in menu-global.css */
	.megamenu .megamenu__utvalda-title {
		font-size: var(--text-s);
		font-weight: 500;
		line-height: 1.3;
		white-space: normal;
		color: var(--base);
	}
	.megamenu__utvalda-excerpt {
		margin: 0;
		font-size: var(--text-xs);
		line-height: 1.4;
	}

	/* Mobile-only elements */
	.megamenu__mobile-head,
	.megamenu__back,
	.megamenu__area-chevron {
		display: none;
	}

	/* Open state on the menu item: purple bar under the label, chevron flipped */
	header li.has-megamenu.expanded > a::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: calc(var(--space-s) * -1);
		height: 3px;
		background: var(--primary);
	}
	header li.has-megamenu > button.expand-icon svg {
		transition: transform 0.2s ease-out;
	}
	header li.has-megamenu.expanded > button.expand-icon svg {
		transform: rotate(180deg);
	}
	/* Keep menu-hovers.css's fade of the other items while the panel is open (that rule only matches while
	   the label itself is hovered). :hover lets another item light up when hovered over a click-opened panel */
	ul.primary-navigation:has(> li.has-megamenu.expanded) > li:not(.expanded, :hover) > a {
		opacity: 0.6;
	}
	/* The chevron is an open stroke path: menu-headroom.css's `fill: white` (meant for filled expand icons)
	   would close it into a solid triangle */
	body.transparent-header:not(.show-menu) header.headroom--top ul.primary-navigation > li.has-megamenu > button.expand-icon path {
		fill: none !important;
		stroke: white !important;
	}
}

/* Mobile: drill-down. The submenu becomes a full-screen view inside the mobile menu:
   header ("‹ Funktioner") + level 1 = areas, level 2 (li.megamenu.is-level-2) = one area's panel. */
@media screen and (max-width: 1025px) {
	header ul.primary-navigation li.has-megamenu.expanded > ul.child-pages--megamenu.visible {
		position: fixed !important;
		inset: 0;
		z-index: 5;
		display: block;
		width: 100%;
		height: 100dvh;
		padding: 0 var(--gutter) 4rem; /* top spacing: .megamenu__mobile-head */
		overflow-y: auto;
		background: var(--primary-ultra-dark) !important;
		animation: megamenu-slide-in 0.25s ease-out;
	}
	@keyframes megamenu-slide-in {
		from {
			opacity: 0;
			transform: translateX(3rem);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
	header ul.child-pages--megamenu > li.megamenu {
		display: block;
		width: 100%;
		padding: 0 !important;
		color: var(--white);
	}
	.megamenu__inner {
		display: block;
	}

	/* menu-mobile.css scales every button in the nav 1.5x and fills every path white (meant for the
	   expand icons); undo both for the megamenu's own buttons and stroke-based chevrons */
	header ul.primary-navigation .megamenu button {
		scale: 1;
	}
	header ul.primary-navigation .megamenu svg path,
	header ul.primary-navigation li.has-megamenu > button.expand-icon path {
		fill: none !important;
		stroke: currentColor !important;
	}
	header ul.primary-navigation li.has-megamenu > button.expand-icon path {
		stroke: white !important;
	}
	/* The item drills into a new view, so the chevron points right (like the area rows) */
	header ul.primary-navigation li.has-megamenu > button.expand-icon svg {
		transform: rotate(-90deg);
	}
	/* The whole row opens it (megamenu.js), not just the chevron */
	header ul.primary-navigation > li.has-megamenu {
		cursor: pointer;
	}

	/* Header: the back button labelled with the menu item's title ("‹ Funktioner"), the same on both levels and pinned
	   while the view scrolls, so it's always clear which menu you're in. It holds the view's top spacing (below the site
	   header's logo and close button, which sit on top of it) so the pinned header covers the rows scrolling up behind it */
	.megamenu__mobile-head {
		position: sticky;
		top: 0;
		z-index: 1;
		padding: 7rem 0 1.6rem;
		background: var(--primary-ultra-dark);
	}
	.megamenu__back {
		display: flex;
		align-items: center;
		gap: 1rem;
		width: 100%;
		padding: 1.4rem 0;
		margin: 0;
		background: none;
		border: 0;
		color: var(--white);
		font: inherit;
		font-size: var(--text-l);
		font-weight: 500;
		text-align: left;
		cursor: pointer;
	}
	.megamenu__back svg {
		width: 14px;
		height: auto;
		transform: rotate(90deg);
	}

	/* Level 1: areas as rows with a chevron. Both levels fade up like the desktop panels (the header stays put);
	   the animation restarts whenever a level goes from display:none to shown */
	.megamenu__areas {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		animation: megamenu-panel-in 0.2s ease-out;
	}
	.megamenu .megamenu__areas li {
		padding: 0 !important;
		display: block;
	}
	.megamenu .megamenu__area-button {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		width: 100%;
		padding: 1.6rem 0;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		background: none;
		font: inherit;
		text-align: left;
		color: inherit;
		cursor: pointer;
	}
	.megamenu__area-chevron svg {
		width: 12px;
		height: auto;
		transform: rotate(-90deg);
	}

	/* Level 2: one panel */
	.megamenu__panels {
		display: none;
	}
	.megamenu.is-level-2 .megamenu__areas {
		display: none;
	}
	.megamenu.is-level-2 .megamenu__panels {
		display: block;
	}
	.megamenu__panel {
		display: none;
	}
	.megamenu__panel.is-active {
		display: flex;
		flex-direction: column;
		animation: megamenu-panel-in 0.2s ease-out;
	}
	/* The view's heading, below the header's back button. Top padding = the area rows' (level 1), so the content
	   starts at the same distance from the header on both levels */
	.megamenu__title {
		display: flex;
		align-items: center;
		gap: 1.2rem;
		padding: 1.6rem 0;
		margin: 0;
		color: var(--white);
		text-decoration: none;
	}
	/* Beats menu-mobile.css's `header ul.child-pages li a { font-size: var(--text-m) !important }` */
	header ul.child-pages .megamenu__title {
		font-size: var(--h3) !important;
	}
	.megamenu__title-icon {
		display: none;
	}
	.megamenu__title-arrow svg {
		width: 18px;
		height: auto;
		color: var(--primary);
	}
	.megamenu__ingress {
		margin: 0;
		padding: 1.6rem 0 0.4rem;
		font-size: var(--text-s);
		opacity: 0.85;
	}
	.megamenu__subtitle {
		margin: 0;
		padding: 1.6rem 0 0.8rem;
		font-size: var(--text-s) !important;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--white) !important; /* ACSS gives headings --heading-color (dark) */
		opacity: 0.7;
	}
	.megamenu__funktioner {
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
	}
	.megamenu .megamenu__funktioner li {
		padding: 0 !important;
		display: block;
	}
	/* Rows like the "Funktioner" template's cards below: title + chevron (funktion-feed.css) */
	.megamenu .megamenu__funktioner a {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		padding: 1.2rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		font-weight: 400;
		color: inherit;
		text-decoration: none;
	}
	.megamenu__funktioner a > svg {
		display: none;
	}
	.megamenu__funktioner a:is(:hover, :focus-visible) .funktion-feed__chevron {
		background-color: var(--primary);
		color: var(--white);
	}
	.megamenu__utvalda {
		display: none;
	}

	/* "Funktioner" template: the cards become rows (title + chevron), like the areas' funktioner list */
	.megamenu__funktion-cards {
		display: flex;
		flex-direction: column;
		padding-top: 0.4rem;
	}
	.megamenu .funktion-card {
		padding: 1.2rem 0;
		border: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: 0;
	}
	.megamenu .funktion-card::before,
	.megamenu .funktion-card__text {
		display: none;
	}
	.megamenu .funktion-card__head {
		align-items: center;
	}
	.megamenu .funktion-card__title {
		font-size: var(--text-m) !important;
		font-weight: 400;
		color: var(--white) !important; /* ACSS gives headings --heading-color (dark) */
	}
}