/* =========================================================
   SEKTIONSNAVIGERING OCH BRÖDSMULOR
   =========================================================
   NN/g: lokal navigering får inte vara visuellt starkare än
   huvudmenyn. Kolumnen är därför dämpad i vikt och färg, och
   bara den aktuella sidan får full styrka.

   GOV.UK:s A/B-test: platt lista slår expanderbara avsnitt
   (75,9 mot 66 procent). Listan göms aldrig bakom ett dragspel,
   inte heller på mobil.
   ========================================================= */

/* ---------------------------------------------------------
   BRÖDSMULOR
   --------------------------------------------------------- */
.enil-brodsmulor-rad {
	padding-inline: var(--enil-marginal);
	padding-block: var(--enil-rum-4) 0;
}

.enil-brodsmulor {
	max-width: var(--enil-bredd);
	margin-inline: auto;
}

.enil-brodsmulor__lista {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--enil-rum-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--enil-text-xs);
	color: var(--enil-text-dampad);
}

.enil-brodsmulor__lista li {
	display: flex;
	align-items: center;
	gap: var(--enil-rum-2);
	max-width: none;
}

.enil-brodsmulor__lista li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.55;
}

.enil-brodsmulor a {
	color: var(--enil-text-dampad);
	text-decoration: none;
}

.enil-brodsmulor a:hover,
.enil-brodsmulor a:focus {
	color: var(--enil-bla);
	text-decoration: underline;
}

.enil-brodsmulor [aria-current="page"] {
	color: var(--enil-text);
	font-weight: 600;
}

/* ---------------------------------------------------------
   LAYOUT

   Innehållet ligger först i koden. På desktop flyttas
   navigeringskolumnen till vänster med grid, utan att
   läsordningen för skärmläsare ändras.
   --------------------------------------------------------- */
.enil-sektionslayout {
	display: grid;
	gap: var(--enil-rum-12);
	padding-inline: var(--enil-marginal);
	padding-block: var(--enil-rum-8) 0;
}

.enil-sektionslayout__innehall > *:not(.enil-hero):not(.enil-sektion):not(.enil-boka) {
	max-width: min(var(--enil-lasbredd), 100%);
	margin-inline: 0;
}

/* Personkort i en innehallsspalt: tre i bredd, inte tva.

   Pa /juridik/ visas tre jurister. Med standardrutnatet, auto-fit och
   minmax(240px, 1fr), fick 736 px lasspalt plats med exakt tva kort,
   och det tredje hamnade ensamt pa en egen rad. Portrattramen ar sedan
   2026-08-19 kapad till 210 px, sa 190 px som minimum racker gott och
   ger tre jamna kolumner. */
@media (min-width: 700px) {
	.enil-sektionslayout__innehall .enil-kortrad--personer {
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	}
}

/* KUNDFEEDBACK 2026-09-29 (Lina): "Lagg portratten under juridik pa
   en rad". Sedan 2026-09-25 ligger juridiksidans innehall i en
   .enil-sektion, och .enil-innehall > * kapar varje barn till
   radlangden 68ch. Tre kort a 190 px plus tva mellanrum kraver 618 px,
   sa det tredje hamnade ensamt igen. Kortraden ar inte lopande text
   och ska folja spalten, inte radlangden. */
.enil-sektionslayout__innehall .enil-innehall > .enil-kortrad--personer {
	max-width: 100%;
}

/* Bokningsrutan undantas: den ar en avslutande yta, inte brodtext,
   och ska folja innehallsspalten hela vagen ut. Kapad till lasbredden
   fick den en tom remsa till hoger som lasre som ett fel. */
.enil-sektionslayout__innehall > .enil-boka {
	max-width: 100%;
	margin-block: var(--enil-rum-16) var(--enil-rum-8);
}

@media (min-width: 900px) {
	/* Specificiteten är medvetet höjd till samma nivå som Astras egen
	   regel .ast-page-builder-template .entry-content > *, som annars
	   vinner på max-width och låter rutnätet spänna hela viewporten.
	   Då hamnade navigeringskolumnen i ytterkanten i stället för i
	   linje med sidhuvudet. */
	.ast-page-builder-template .entry-content > .enil-sektionslayout,
	.enil-sektionslayout {
		grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
		max-width: var(--enil-bredd);
		margin-inline: auto;
		padding-inline: 0;
	}

	.enil-sektionslayout__nav      { grid-column: 1; grid-row: 1; }
	.enil-sektionslayout__innehall { grid-column: 2; grid-row: 1; }

	.enil-sektionsnav {
		position: sticky;
		top: var(--enil-rum-8);
	}
}

/* ---------------------------------------------------------
   KOLUMNEN
   --------------------------------------------------------- */
.enil-sektionsnav {
	border-top: 3px solid var(--enil-gul);
	padding-top: var(--enil-rum-4);
}

.enil-sektionsnav__rubrik {
	display: block;
	margin-bottom: var(--enil-rum-3);
	color: var(--enil-bla);
	font-size: var(--enil-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.enil-sektionsnav__rubrik:hover,
.enil-sektionsnav__rubrik:focus {
	text-decoration: underline;
}

.enil-sektionsnav__lista {
	margin: 0;
	padding: 0;
	list-style: none;
}

.enil-sektionsnav__lista li { max-width: none; }

/* Astra stryker under alla länkar i .entry-content. I en navigationslista
   blir det brus, och understrykningen konkurrerar med markeringen av
   aktuell sida. Specificiteten är höjd för att vinna över temat. */
.entry-content .enil-sektionsnav__lista a,
.entry-content .enil-sektionsnav__rubrik,
.enil-sektionsnav__lista a {
	text-decoration: none;
}

.entry-content .enil-sektionsnav__lista a:hover,
.entry-content .enil-sektionsnav__lista a:focus-visible {
	text-decoration: none;
}

.enil-sektionsnav__lista a {
	display: block;
	/* Vänsterkanten bär markeringen av aktuell sida. Alla poster har
	   samma inramning så att inget hoppar i sidled vid byte. */
	border-left: 3px solid transparent;
	padding: 0.55rem 0.75rem;
	color: var(--enil-text-dampad);
	font-size: 0.95rem;
	line-height: 1.35;
	text-decoration: none;
	transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
}

.enil-sektionsnav__lista a:hover,
.enil-sektionsnav__lista a:focus-visible {
	color: var(--enil-bla);
	background: rgba(36, 54, 110, 0.05);
	border-left-color: var(--enil-kant);
}

.enil-sektionsnav__lista a[aria-current="page"] {
	border-left-color: var(--enil-bla);
	background: var(--enil-bla-ljus);
	color: var(--enil-bla);
	font-weight: 700;
}

/* ---------------------------------------------------------
   MOBIL

   Listan hamnar efter innehållet, som ett tydligt märkt kort.
   Den göms aldrig bakom ett dragspel, se GOV.UK-testet.
   --------------------------------------------------------- */
@media (max-width: 899px) {
	.enil-sektionslayout__nav {
		margin-top: var(--enil-sektion);
	}

	.enil-sektionsnav {
		border: 1px solid var(--enil-kant);
		border-top: 3px solid var(--enil-gul);
		border-radius: var(--enil-radie);
		padding: var(--enil-rum-5) var(--enil-rum-4) var(--enil-rum-3);
		background: var(--enil-varm);
	}

	.enil-sektionsnav__rubrik {
		font-size: var(--enil-text-sm);
	}

	/* Två spalter när listan är lång, så att den inte blir en rullgardin
	   av länkar. Bryter till en spalt på riktigt smala skärmar. */
	.enil-sektionsnav__lista {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
		gap: 2px var(--enil-rum-4);
	}

	.enil-sektionsnav__lista a {
		min-height: var(--enil-traffyta);
		display: flex;
		align-items: center;
		background: var(--enil-vit);
		border-left-width: 3px;
	}
}

/* ---------------------------------------------------------
   HERO OCH SEKTION INUTI EN SEKTIONSLAYOUT

   .enil-hero och .enil-sektion bär egen sidmarginal med
   var(--enil-marginal), alltså max(1.25rem, (100vw - 1200px) / 2).
   Den formeln räknar på VIEWPORTEN och förutsätter att blocket
   ligger direkt i sidans fulla bredd.

   Ligger blocket i stället inuti innehållskolumnen bredvid
   sektionsnavet är kolumnen redan indragen, och de 120 px per
   sida på en 1440-skärm läggs ovanpå. Resultatet mättes på
   /vid-dodsfall/ till 1690 px innehåll i en 1440 px vid vy,
   alltså horisontell scroll på hela sidan.

   Inuti kolumnen ska blocken därför inte bära någon egen
   sidmarginal alls.
   --------------------------------------------------------- */
/* width: 100% är inte överflödigt, det är hela poängen.
 *
 * Astra sätter i sin inline-CSS `margin-left: auto; margin-right: auto`
 * på allt som ligger två nivåer under .entry-content, alltså även på
 * den här kolumnen. På ett vanligt block är det harmlöst. På ett
 * RUTNÄTSOBJEKT betyder auto-marginaler i stället att objektet ska
 * storleksbestämmas efter sitt innehåll och sedan centreras, och då
 * blev kolumnen 1032 px bred i ett 726 px brett spår.
 *
 * Uppmätt på /vid-dodsfall/: 1330 px innehåll i en 1024 px vy.
 * Med width: 100% finns ingen fri yta kvar för auto-marginalerna att
 * fördela, och kolumnen följer spåret igen. Löser problemet utan att
 * behöva vinna ett specificitetskrig mot temats inline-regel. */
.enil-sektionslayout__innehall {
	min-width: 0;
	width: 100%;
}

.enil-sektionslayout__innehall .enil-hero,
.enil-sektionslayout__innehall .enil-sektion {
	padding-inline: 0;
}

.enil-sektionslayout__innehall .enil-hero__inner,
.enil-sektionslayout__innehall .enil-innehall {
	max-width: 100%;
}

/* ---------------------------------------------------------
   LUFT I INNEHALLSKOLUMNEN

   KUNDFEEDBACK 2026-09-11 (Lina, kommentarer pa previewen):
   "Kontrollera radavstand mellan nedan rutor och nasta rubrik"
   (kistor och urnor), "Kolla radavstand mellan denna rubrik och
   personerna ovan" (juridik), "Skapa blank space mellan knapparna
   och sidfoten likt de andra sidorna" (blomsterarrangemang).

   Rubrikerna har margin-top 0, sa luften fore en rubrik kommer helt
   fran blocket ovanfor. Ett stycke bar 29 px, men kortrader, knapprader
   och bilder bar 0. Uppmatt 2026-09-13 i Chromium: produktrutor och
   personrutor 0 px mot nasta rubrik, bilden pa gravvardar 0 px,
   knapparna pa blomsterarrangemang 0 px mot sidfoten. Samma fel pa
   engelska. .enil-sektionslayout har dessutom ingen luft i nederkant,
   sa pa mobil lag sidomenyn kant i kant mot sidfoten pa alla undersidor.

   3 rem under ett block ar samma som katalogrutan redan bar (48 px),
   alltsa tydligt mer an ett stycke, eftersom ett block ar en storre
   enhet an en textrad. */
/* Aven inne i en .enil-sektion. Juridiksidan lindades in 2026-09-25 och
   tappade da luften under personkorten igen, uppmatt 0 px 2026-09-29. */
.enil-sektionslayout__innehall > :is(.enil-kortrad, .wp-block-buttons, .wp-block-image):not(:last-child),
.enil-sektionslayout__innehall .enil-innehall > :is(.enil-kortrad, .wp-block-buttons, .wp-block-image):not(:last-child) {
	margin-block-end: var(--enil-rum-12);
}

/* Sidomenyn bar luften mot sidfoten. Padding pa rutnatsobjektet och
   inte pa kortet, sa att kortets ram inte vaxer. Pa desktop raknas den
   bara nar menyn ar hogre an innehallet, pa mobil ligger menyn sist. */
.enil-sektionslayout__nav {
	padding-block-end: var(--enil-sektion);
}

@media (min-width: 900px) {
	/* Sista blocket i innehallet far samma luft mot sidfoten som pa sidor
	   utan sidomeny (.entry-content > *:last-child i komponenter.css).
	   Bara desktop: pa mobil foljer sidomenyn efter innehallet och har
	   redan egen luft ovanfor sig. En sektion bar sin egen padding. */
	.enil-sektionslayout__innehall > :last-child:not(.enil-sektion):not(.enil-hero) {
		margin-block-end: var(--enil-sektion);
	}
}