/* ==========================================================================
   MENY – pilar för undermenyer + icke klickbara tomma föräldrasidor
   --------------------------------------------------------------------------
   Ligger i en undermapp och byggs därför INTE in i _cache/css/instance.css.
   Laddas separat från /_project/_source/misc-header.asp, efter Bootstrap.
   Beteende: /_project/_layout/script/menu/menu-toggle.js
   ========================================================================== */

/* --- Språkflaggorna ------------------------------------------------------ */
/* Flaggorna ligger i #swl-header ovanför #swl-sub-header. När sub-headern
   blir position:relative (mobilheadern nedan) hamnade logoytan ovanpå dem
   och klicken nådde aldrig länkarna. Lyft länkarna utan att flytta dem. */
#swl-header .editions-wrap .edi-link {
	position: relative;
	z-index: 1002;
}

/* --- Pilknappen ---------------------------------------------------------- */
#bootstrap-menu .sub-toggle {
	-webkit-appearance: none;
	appearance: none;
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
}
#bootstrap-menu .sub-toggle:focus-visible,
#bootstrap-menu a.no-link:focus-visible {
	outline: 2px solid #1D218C;
	outline-offset: -2px;
	border-radius: 4px;
}
/* Själva pilen: en liten vinkel, ritad med kantlinjer */
#bootstrap-menu .sub-toggle .menu-caret {
	display: block;
	width: 7px;
	height: 7px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);          /* pekar nedåt */
	transition: transform 0.2s ease;
}
#bootstrap-menu li.open > .sub-toggle .menu-caret {
	transform: translateY(2px) rotate(-135deg);         /* pekar uppåt */
}

/* Tomma föräldrasidor: ingen länk, bara öppnare */
#bootstrap-menu a.no-link {
	cursor: pointer;
}

/* --- Dator (> 1024px) ----------------------------------------------------- */
@media (min-width: 1025px) {
	/* Raden som flex: inga mellanrum från inline-block (~5px per val) */
	#bootstrap-menu ul.level1 {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
	/* Toppnivå: text + pil i samma "pill" */
	#bootstrap-menu ul.level1 > li.has-sub {
		display: inline-flex;
		align-items: center;
		vertical-align: top;
	}
	#bootstrap-menu ul.level1 > li.has-sub > a {
		display: inline-block;
		padding-right: 4px;
	}
	#bootstrap-menu ul.level1 > li.has-sub > .sub-toggle {
		height: 45px;
		padding: 0 14px 0 4px;
		color: #333;
	}
	#bootstrap-menu ul.level1 > li.has-sub:hover > .sub-toggle,
	#bootstrap-menu ul.level1 > li.has-sub.active > .sub-toggle {
		color: #1D218C;
	}
	/* Aktiv toppnivå: bakgrunden på hela valet så att pilen ingår */
	#bootstrap-menu ul.level1 > li.has-sub.active {
		background-color: #dbe3F1;
		border-radius: 5px 5px 0 0;
	}
	#bootstrap-menu ul.level1 > li.has-sub.active > a {
		background-color: transparent;
	}
	/* Pilen vänds även när menyn är öppen via hovring */
	#bootstrap-menu ul.level1 > li.has-sub.hover-menu > .sub-toggle .menu-caret,
	#bootstrap-menu ul.level1 > li.has-sub:hover > .sub-toggle .menu-caret {
		transform: translateY(2px) rotate(-135deg);
	}
	/* Klick-öppnad meny ligger kvar även när musen lämnar */
	#bootstrap-menu li.has-sub.open > ul {
		display: block !important;
	}

	/* Nivå 2+: pilen till höger i raden, pekar åt höger (utfällning) */
	#bootstrap-menu ul ul li.has-sub > a {
		padding-right: 36px;
	}
	#bootstrap-menu ul ul li.has-sub > .sub-toggle {
		position: absolute;
		top: 0;
		right: 0;
		width: 34px;
		height: 100%;
		color: #333;
	}
	#bootstrap-menu ul ul li.has-sub > .sub-toggle .menu-caret {
		transform: translateX(-2px) rotate(-45deg);      /* pekar höger */
	}
	#bootstrap-menu ul ul li.has-sub.open > .sub-toggle .menu-caret,
	#bootstrap-menu ul ul li.has-sub.hover-menu > .sub-toggle .menu-caret,
	#bootstrap-menu ul ul li.has-sub:hover > .sub-toggle .menu-caret {
		transform: translateX(2px) rotate(135deg);       /* pekar vänster */
	}
}

/* --- Smal dator/surfplatta liggande (1025–1399px): tätare meny så att
       den ryms på en rad trots pilarna ---------------------------------------- */
@media (min-width: 1025px) and (max-width: 1399px) {
	#bootstrap-menu ul.level1 > li > a {
		padding-left: 7px;
		padding-right: 7px;
		font-size: 16px;
	}
	#bootstrap-menu ul.level1 > li.has-sub > a {
		padding-right: 3px;
	}
	#bootstrap-menu ul.level1 > li.has-sub > .sub-toggle {
		padding: 0 7px 0 3px;
	}
}

/* --- Mobil/surfplatta (<= 1024px) ------------------------------------------ */
@media (max-width: 1024px) {
	/* Header: logon till vänster, hamburgerknappen till höger i höjd med
	   logon (i stället för på en egen rad under logon). Logoytan var 190px
	   hög men bilden bara ~85px -> lägre yta. */
	#swl-sub-header,
	#swl-sub-header.outer-wrapper {
		position: relative;
		height: auto;         /* temat har fast 235px */
	}
	#swl-sub-header .menu-wrapper {
		position: static;     /* knappen placeras mot headern, inte menyraden */
	}
	#swl-sub-header .logo-wrapper {
		justify-content: flex-start;
		max-width: none;
		padding: 8px 16px 0;
	}
	#swl-main-logo {
		height: 110px;
		background-position: left center;
	}
	#swl-sub-header .mobile-wrap {
		position: absolute;
		top: 45px;            /* 8 + (110 - 35) / 2 = mitt för logon */
		right: 16px;
		padding: 0;
		line-height: 0;
		float: none;
	}
	/* Menyraden har bara den utfällbara menyn kvar */
	#swl-sub-header .menu-wrapper {
		min-height: 0;
	}

	/* Mindre luft mellan header och sidans innehåll */
	html body #swl-content-wrapper .inner-wrapper {
		margin-top: 8px;
	}
	html .pageHeader.text-header {
		margin-top: 24px;
	}

	/* Menyval vänsterställda, pilen längst till höger */
	#bootstrap-menu ul li a {
		text-align: left !important;
		padding: 11px 56px 11px 20px !important;
	}
	#bootstrap-menu li.has-sub {
		position: relative;
	}
	#bootstrap-menu li.has-sub > .sub-toggle {
		position: absolute;
		top: 0;
		right: 6px;
		width: 44px;          /* stor träffyta för fingret */
		height: 44px;
		color: #333;
	}
	/* Undermenyer styrs bara av klick på mobil (överstyr superfish) */
	#bootstrap-menu li.has-sub > ul {
		display: none !important;
	}
	#bootstrap-menu li.has-sub.open > ul {
		display: block !important;
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		width: 100%;
		height: auto !important;      /* superfish kan sätta fast höjd */
		overflow: visible !important;
	}
	/* Öppen mobilmeny: låt headern växa med menyn i stället för en egen
	   scrollruta på 100 % skärmhöjd (gav dubbel scroll när undermenyer
	   fälls ut). */
	#swl-sub-header.menutggl {
		height: auto !important;
		overflow: visible !important;
	}
	#bootstrap-menu li.has-sub.open > a,
	#bootstrap-menu li.has-sub.open > .sub-toggle {
		color: #1D218C;
	}
	/* Undermenyns rader: full bredd, indrag per nivå */
	#bootstrap-menu ul ul li {
		display: block;
		width: 100%;
	}
	#bootstrap-menu ul ul a {
		display: block;
		font-size: 16px;
		padding-left: 36px !important;
	}
	#bootstrap-menu ul ul ul a {
		padding-left: 52px !important;
		background-color: #c9d4ea;    /* nivå 3 lite mörkare */
	}
}
/* Smal mobil: flaggorna ligger absolut uppe till höger i headern -> knappen
   under dem. */
@media (max-width: 600px) {
	#swl-sub-header .mobile-wrap {
		top: 64px;
	}
}