/* ============================================================
   MOBILMENY

   Jour överst, sedan fyra snabbval, sedan navigeringen.

   Posterna ligger i samma <ul> som desktopmenyn, eftersom Astra
   renderar menyn två gånger och vi inte vill gissa vilken kopia
   som är mobilens. På desktop göms de i stället, se sist i filen.

   BRYTPUNKTEN 921 px är Astras egen. Samma gräns används i
   megameny.css, så att exakt en av de två menyerna är aktiv.
   ============================================================ */

.enil-mobil {
	border: 0 !important;
	padding: 0;
}

/* ---- Jouren ----
   Störst yta i hela panelen och först i tabbordningen. Det är
   det ärende flest har när de öppnar menyn på en sådan här sajt. */
.enil-mobil__jour {
	margin: var(--enil-rum-4) var(--enil-rum-5) var(--enil-rum-5);
}

.main-header-menu .enil-mobil__jour > .enil-mobil__jourlank,
.enil-mobil__jourlank {
	display: flex !important;
	align-items: center;
	gap: var(--enil-rum-4);
	padding: var(--enil-rum-5) var(--enil-rum-6) !important;
	background: var(--enil-bla);
	color: var(--enil-text-invers) !important;
	border-radius: var(--enil-radie-stor);
	text-decoration: none;
	/* 64 px hög yta. Långt över de 44 px som är minsta rimliga
	   tryckyta, för att den ska gå att träffa med darrande hand. */
	min-height: 64px;
}

.enil-mobil__jourikon {
	display: flex;
	flex: 0 0 auto;
	color: var(--enil-gul);
}

.enil-mobil__jourikon svg {
	width: 28px;
	height: 28px;
}

.enil-mobil__jourtext {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.enil-mobil__joursmall {
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
	line-height: 1.3;
}

.enil-mobil__journummer {
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.1;
	color: var(--enil-gul);
	white-space: nowrap;
}

/* ---- Snabbvalen ---- */
.enil-mobil__rubrik {
	display: block;
	padding: 0 var(--enil-rum-5) var(--enil-rum-3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--enil-text-dampad);
}

.enil-mobil__rutor {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--enil-rum-3);
	padding: 0 var(--enil-rum-5) var(--enil-rum-6);
}

.main-header-menu .enil-mobil__rutor > .enil-mobil__ruta,
.enil-mobil__ruta {
	display: flex !important;
	flex-direction: column;
	gap: 0.2rem;
	padding: var(--enil-rum-5) var(--enil-rum-4) !important;
	background: var(--enil-varm);
	border: 1px solid var(--enil-kant);
	border-radius: var(--enil-radie);
	color: var(--enil-text) !important;
	text-decoration: none;
	min-height: 96px;
}

.enil-mobil__rutikon {
	display: block;
	color: var(--enil-bla);
	margin-bottom: 0.15rem;
}

.enil-mobil__rutikon svg {
	width: 24px;
	height: 24px;
}

.enil-mobil__ruttitel {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--enil-bla);
}

.enil-mobil__ruthjalp {
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--enil-text-dampad);
}

/* Första rutan är den akuta och ska synas som sådan, utan att
   skrika. Blå bottenplatta i stället för varm, samma familj. */
.enil-mobil__rutor > .enil-mobil__ruta:first-child {
	background: var(--enil-bla-ljus);
	border-color: transparent;
}

/* ---- Avdelaren före den vanliga navigeringen ---- */
.enil-mobil__avdelare {
	border-top: 1px solid var(--enil-kant) !important;
	padding-top: var(--enil-rum-5);
	margin-top: var(--enil-rum-2);
}

/* ---- Plats för samtyckeslisten ----
   Panelen scrollar i sin egen behållare, så body-paddingen från
   samtycke.css räcker inte. Utan detta låg listen över den sista
   menyposten, uppmätt: "Kontakt" gick inte att träffa. */
body.enil-har-samtyckesruta .main-header-bar-navigation,
body.enil-har-samtyckesruta .ast-mobile-popup-drawer .ast-mobile-popup-inner {
	/* Listens hojd PLUS en marginal. Exakt listhojd racker inte: nar
	   sidan scrollats till botten hamnade sista posten da precis i
	   kant med listens overkant, alltsa tryckbar men utan luft.
	   Uppmatt pa iPhone 13: sista postens underkant och listens
	   overkant lag bada pa y=664. */
	padding-bottom: calc(var(--enil-samtycke-hojd, 0px) + var(--enil-rum-8));
}

/* ============================================================
   DESKTOP: göm allt ovan.
   Posterna ligger i samma lista som megamenyn använder, så de
   måste bort helt här, inte bara döljas visuellt.
   ============================================================ */
@media (min-width: 922px) {
	.main-header-menu > .enil-mobil,
	.enil-mobil {
		display: none !important;
	}
}