/* ============================================================
   E. NILSSONS , MEGAMENY
   ============================================================
   Toppnivåposter med tre eller fler undersidor får klassen
   .enil-mega. Undermenyn läggs ut som en fullbreddspanel med tre
   kolumner länkar och en fjärde kolumn med ljusbilden och
   journumret.

   Antalet rader sätts av PHP som .enil-mega-rader-N, eftersom CSS
   inte kan räkna barn. Med grid-auto-flow: column fylls kolumnerna
   uppifrån och ned, vilket ger en läsbar ordning.

   Endast desktop. Under 922 px faller menyn tillbaka på Astras
   dragspel, som fungerar bättre med tumme på liten skärm.
   ============================================================ */

@media (min-width: 922px) {

	/* Panelen ska spänna headerns container, från logotypens vänsterkant
	   till menyns högerkant. Vi gör containern till positioneringskontext
	   och nollställer positioneringen på ul och li. */
	.ast-primary-header-bar .site-primary-header-wrap { position: relative; }
	.ast-primary-header-bar .main-header-menu { position: static; }
	.main-header-menu .enil-mega { position: static; }

	.main-header-menu .enil-mega > .sub-menu {
		position: absolute;
		/* Panelen överlappar menyradens underkant några pixlar, så att
		   hovern inte tappas i glappet när musen rör sig nedåt. */
		top: calc(100% - 0.75rem);
		/* !important behövs: Astra har JS som flyttar undermenyer i sidled
		   för att de inte ska hamna utanför fönstret, och sätter då left
		   och right inline. Utan låsningen får varje panel olika bredd
		   beroende på var i menyraden föräldern råkar ligga. */
		left: 0 !important;
		right: 0 !important;
		width: auto !important;
		max-width: none !important;
		margin: 0;
		border: 0;
		border-top: 3px solid var(--enil-gul);
		border-radius: 0 0 var(--enil-radie-stor) var(--enil-radie-stor);
		background: var(--enil-vit);
		box-shadow: 0 18px 40px rgba(24, 32, 48, 0.18);

		display: grid;
		grid-auto-flow: column;
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, 340px);
		gap: 0 var(--enil-rum-8);
		padding: var(--enil-rum-8);
		align-content: start;
	}

	.main-header-menu .enil-mega-rader-2 > .sub-menu { grid-template-rows: repeat(2, auto); }
	.main-header-menu .enil-mega-rader-3 > .sub-menu { grid-template-rows: repeat(3, auto); }
	.main-header-menu .enil-mega-rader-4 > .sub-menu { grid-template-rows: repeat(4, auto); }
	.main-header-menu .enil-mega-rader-5 > .sub-menu { grid-template-rows: repeat(5, auto); }
	.main-header-menu .enil-mega-rader-6 > .sub-menu { grid-template-rows: repeat(6, auto); }

	/* ---- Länkarna ---- */
	.main-header-menu .enil-mega > .sub-menu > .menu-item {
		border: 0;
		border-bottom: 1px solid var(--enil-kant);
		margin: 0;
		width: auto;
	}

	.main-header-menu .enil-mega > .sub-menu > .menu-item > a {
		display: block;
		padding: 0.72rem 0;
		background: transparent;
		color: var(--enil-text);
		font-size: 0.95rem;
		font-weight: 600;
		line-height: 1.25;
		white-space: normal;
		/* transform i stället för padding, så att långa poster inte
		   radbryts om vid hover. */
		transition: color 0.18s ease, transform 0.18s ease;
	}

	.main-header-menu .enil-mega > .sub-menu > .menu-item > a::after {
		content: '\2192';
		margin-left: 0.4rem;
		color: var(--enil-ockra);
		opacity: 0;
		transition: opacity 0.18s ease;
	}

	.main-header-menu .enil-mega > .sub-menu > .menu-item > a:hover,
	.main-header-menu .enil-mega > .sub-menu > .menu-item > a:focus {
		color: var(--enil-bla);
		background: transparent;
		transform: translateX(0.3rem);
	}

	.main-header-menu .enil-mega > .sub-menu > .menu-item > a:hover::after,
	.main-header-menu .enil-mega > .sub-menu > .menu-item > a:focus::after {
		opacity: 1;
	}

	/* ---- Bild- och jourpanelen, sista kolumnen ---- */
	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta {
		grid-column: 4;
		grid-row: 1 / -1;
		border: 0;
		border-radius: var(--enil-radie);
		overflow: hidden;
		/* Mörk gradient underifrån, så att texten blir läsbar oavsett
		   var i bilden lågorna hamnar. */
		/* Bakgrundsbilden satts forst nar panelen faktiskt visas.
		   Astra doljer undermenyer med left:-100%, inte display:none,
		   sa elementet renderas anda och bilden hamtades pa VARJE
		   sidvisning (uppmatt 5,4 kB, utan hover). Kommentaren i
		   megameny.php pastod motsatsen. */
		background-image: linear-gradient(180deg, rgba(10, 12, 18, 0.15) 0%, rgba(10, 12, 18, 0.88) 72%);
		background-size: cover;
		background-position: center right;
		display: flex;
		align-items: flex-end;
		min-height: 220px;
	}

	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta > a {
		display: block;
		width: 100%;
		padding: var(--enil-rum-6);
		background: transparent;
		color: var(--enil-gul);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1.1;
		letter-spacing: 0;
		white-space: nowrap;
		transform: none;
	}

	/* Etiketten ovanför numret. Ligger i CSS och inte i bilden, så att
	   den kan översättas och läsas av skärmläsare tillsammans med
	   telefonlänken. */
	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta > a::before {
		content: 'Vi svarar dygnet runt';
		display: block;
		margin-bottom: 0.35rem;
		max-width: 24ch;
		color: var(--enil-vit);
		font-size: 0.72rem;
		font-weight: 500;
		letter-spacing: 0.06em;
		line-height: 1.35;
		text-transform: uppercase;
		white-space: normal;
	}

	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta > a::after {
		content: none;
	}

	/* Astra lägger in en pilikon och en dragspelsknapp i menylänkar.
	   I jourpanelen blir pilen bara en grafisk krock framför numret. */
	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta .ast-icon,
	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta svg,
	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta .ast-menu-toggle {
		display: none !important;
	}

	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta > a:hover,
	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta > a:focus {
		color: var(--enil-gul);
		background: rgba(24, 32, 48, 0.35);
		transform: none;
	}

	.main-header-menu .enil-mega > .sub-menu > .enil-mega-cta > a:focus-visible {
		outline: 3px solid var(--enil-gul);
		outline-offset: -3px;
	}

	/* Panelen halls oppen en kort stund efter att musen lamnat den,
	   se assets/js/megameny.js. Klassen satts bara av skriptet.
	   !important for att ga fore Astras animationsregler, som doljer
	   med opacity, visibility och transform. */
	.main-header-menu .enil-mega.enil-mega--kvar > .sub-menu {
		visibility: visible !important;
		opacity: 1 !important;
		transform: none !important;
	}

	.main-header-menu .enil-mega:hover > .sub-menu > .enil-mega-cta,
	.main-header-menu .enil-mega.enil-mega--kvar > .sub-menu > .enil-mega-cta,
	.main-header-menu .enil-mega:focus-within > .sub-menu > .enil-mega-cta {
		background-image:
			linear-gradient(180deg, rgba(10, 12, 18, 0.15) 0%, rgba(10, 12, 18, 0.88) 72%),
			var(--enil-mega-bild, none);
	}


	/* ============================================================
	   GRUPPERAD PANEL

	   Linas brief: "Vid dodsfall och gast pa begravning hamnar bada
	   under begravning". Hon beskriver tva grupper, inte en platt
	   lista. Med de tappade posterna atterlagda blev listan 15 poster
	   som blandade tre olika arenden.

	   Har far varje grupp en egen kolumn med klickbar rubrik. Till
	   skillnad fran den ojamna panelen ovan fylls kolumnerna INTE
	   uppifran och ned over gruppgranser, sa grid-auto-flow lamnas
	   pa row och varje niva-tva-post tar sin egen cell.
	   ============================================================ */
	.main-header-menu .enil-mega--grupperad > .sub-menu {
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(260px, 340px);
		align-items: start;
	}

	/* Gruppens li ar en kolumn, inte en rad med underkant. */
	.main-header-menu .enil-mega--grupperad > .sub-menu > .enil-mega-grupp {
		border-bottom: 0;
	}

	/* Kolumnrubriken. Storre och i var bla, men fortfarande en riktig
	   lank till gruppens egen sida, sa att den som vill lasa oversikten
	   kommer dit. */
	.main-header-menu .enil-mega--grupperad > .sub-menu > .enil-mega-grupp > a {
		padding: 0 0 0.6rem;
		border-bottom: 2px solid var(--enil-gul);
		margin-bottom: 0.4rem;
		color: var(--enil-bla);
		font-size: 1.02rem;
		font-weight: 700;
		letter-spacing: 0.01em;
	}

	/* Undermenyn inuti en grupp ska ligga i floder i kolumnen, inte
	   svava som en egen panel. Astra positionerar niva tre absolut och
	   flyttar den utanfor bild med left:-100%, darfor nollstallningen. */
	.main-header-menu .enil-mega--grupperad > .sub-menu > .enil-mega-grupp > .sub-menu {
		position: static !important;
		display: block !important;
		left: auto !important;
		right: auto !important;
		top: auto !important;
		width: auto !important;
		min-width: 0 !important;
		max-width: none !important;
		margin: 0;
		padding: 0;
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		transform: none !important;

		/*
		 * visibility: inherit, INTE visible.
		 *
		 * Astra döljer panelen med visibility: hidden på nivå två och
		 * sätter samma sak på nivå tre. Vi måste överrida nivå tre för
		 * att den ska ligga i flödet i kolumnen, men skrev först
		 * visibility: visible !important. Eftersom visibility ärvs
		 * blev barnen då synliga ÄVEN när panelen var dold, och hela
		 * undermenyn låg utfälld ovanpå sidans innehåll utan hover.
		 * Uppmätt på /cookiepolicy/ 2026-08-13: tolv menylänkar låg
		 * över sidans H1.
		 *
		 * Med inherit följer nivå tre panelens eget läge.
		 *
		 * opacity: 1 är däremot ofarligt. Sätter föräldern opacity: 0
		 * blir hela underträdet osynligt oavsett vad barnen säger,
		 * eftersom opacity skapar en egen grupp.
		 */
		opacity: 1 !important;
		visibility: inherit !important;
	}

	.main-header-menu .enil-mega--grupperad .enil-mega-grupp > .sub-menu > .menu-item {
		border: 0;
		border-bottom: 1px solid var(--enil-kant);
		margin: 0;
		width: auto;
	}

	.main-header-menu .enil-mega--grupperad .enil-mega-grupp > .sub-menu > .menu-item > a {
		display: block;
		padding: 0.62rem 0;
		background: transparent;
		color: var(--enil-text);
		font-size: 0.92rem;
		font-weight: 500;
		line-height: 1.3;
		white-space: normal;
		transition: color 0.18s ease, transform 0.18s ease;
	}

	.main-header-menu .enil-mega--grupperad .enil-mega-grupp > .sub-menu > .menu-item > a:hover,
	.main-header-menu .enil-mega--grupperad .enil-mega-grupp > .sub-menu > .menu-item > a:focus {
		color: var(--enil-bla);
		transform: translateX(0.3rem);
	}

	/* Jourpanelen ska sta kvar i fjarde kolumnen och spanna hela hojden
	   aven nar kolumnerna ar olika langa. */
	.main-header-menu .enil-mega--grupperad > .sub-menu > .enil-mega-cta {
		grid-column: 4;
		grid-row: 1;
		align-self: stretch;
	}

	/* Astra lagger en expanderingspil pa varje post som har barn.
	   I den grupperade panelen har kolumnrubrikerna barn, sa pilen dok
	   upp som ett lost "›" vid hoger kant i varje kolumn. Undermenyn
	   ar redan utfalld har, sa pilen fyller ingen funktion. */
	/* OBS: > .sub-menu i selektorn, inte bara .enil-mega--grupperad.
	   Utan den traffade regeln aven toppnivalankens egen chevron, och
	   "Begravning" blev da det enda toppvalet utan pil medan Juridik
	   och Mangkulturellt hade sin. Bara panelens innandome ska rensas. */
	.main-header-menu .enil-mega--grupperad > .sub-menu .ast-menu-toggle,
	.main-header-menu .enil-mega--grupperad > .sub-menu .ast-icon,
	.main-header-menu .enil-mega--grupperad > .sub-menu .ast-arrow-svg,
	.main-header-menu .enil-mega--grupperad > .sub-menu .dashicons,
	.main-header-menu .enil-mega--grupperad > .sub-menu .enil-mega-grupp > a::after {
		display: none !important;
		content: none !important;
	}

	/* Astras egna pilar och indikatorer inne i panelen. */
	.main-header-menu .enil-mega > .sub-menu .ast-submenu-expanded,
	.main-header-menu .enil-mega > .sub-menu .dashicons {
		display: none;
	}
}

/* Under brytpunkten är panelen en vanlig lista i Astras dragspel.
   Bildpanelen skulle bara ta plats där, så den blir en tydlig
   jourrad i stället. */
@media (max-width: 921px) {
	.enil-mega-cta > a {
		font-weight: 700;
		color: var(--enil-bla) !important;
	}
}