/* =========================================================
   E. NILSSONS , KOMPONENTER
   Jourrad, sidfot, korttyper. Bygger på tokens.css och core.css.
   ========================================================= */

/* ---------------------------------------------------------
   JOURRAD , ovanför sidhuvudet, på varje sida
   Acceptanskrav: jourtelefonen ska synas utan scroll.
   --------------------------------------------------------- */
.enil-jourrad {
	background: var(--enil-bla);
	color: var(--enil-text-invers);
	padding-inline: var(--enil-marginal);
}

.enil-jourrad__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--enil-rum-2) var(--enil-rum-6);
	max-width: var(--enil-bredd);
	margin-inline: auto;
	padding-block: var(--enil-rum-2);
}

.enil-jourrad__text {
	margin: 0;
	font-size: var(--enil-text-xs);
	color: rgba(255, 255, 255, 0.85);
}

.enil-jourrad__nummer {
	display: inline-flex;
	align-items: center;
	gap: var(--enil-rum-2);
	min-height: 40px;
	color: var(--enil-text-invers);
	font-weight: 700;
	font-size: var(--enil-text-sm);
	text-decoration: none;
}

.enil-jourrad__nummer:hover,
.enil-jourrad__nummer:focus {
	color: var(--enil-text-invers);
	text-decoration: underline;
}

.enil-jourrad__ikon svg {
	width: 18px;
	height: 18px;
	display: block;
}

.enil-jourrad__nummer:focus-visible {
	outline: 3px solid var(--enil-gul);
	outline-offset: 2px;
}

@media (max-width: 600px) {
	.enil-jourrad__inner { justify-content: center; }
	.enil-jourrad__text  { width: 100%; text-align: center; }
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */
.enil-hero__devis {
	margin: 0 0 var(--enil-rum-3);
	font-size: var(--enil-text-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--enil-ockra);
}

.enil-hero__brodtext {
	font-size: var(--enil-text-lg);
	color: var(--enil-text);
}

/* ---------------------------------------------------------
   SEKTIONSRUBRIK , centrerad, som referenssajten
   --------------------------------------------------------- */
.enil-sektionshuvud {
	max-width: 62ch;
	margin-inline: auto;
	margin-bottom: var(--enil-rum-12);
	text-align: center;
}

.enil-sektionshuvud h2 {
	margin: 0 0 var(--enil-rum-4);
}

.enil-sektionshuvud p {
	max-width: none;
	margin: 0 auto;
	color: var(--enil-text-dampad);
	font-size: var(--enil-text-lg);
}

.enil-sektionshuvud__knappar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--enil-rum-4);
	margin-top: var(--enil-rum-8);
}

/* ---------------------------------------------------------
   KORT
   --------------------------------------------------------- */
/* KORTEN SKA FYLLA SIN KOLUMN.

   Astra satter margin-left: auto och margin-right: auto pa allt som
   ligger tva niva'er under .entry-content, via selektorn
   .ast-page-builder-template .entry-content[data-ast-blocks-layout]
   > :not(.wp-block-group):where(...) > *.

   Pa ett rutnatsbarn betyder auto-marginaler "krymp till innehallet och
   centrera", inte "stracks ut". Foljden syntes pa /om-oss/, dar
   kortraden ligger direkt i innehallet: kolumnerna var jamna 282 px men
   korten blev 195, 205, 209, 221 och 260 px beroende pa hur langa
   namnen och e-postadresserna var. Inuti en .enil-sektion trafffade
   Astras regel sjalva raden i stallet for korten, sa startsidan sag
   ratt ut och felet var latt att missa.

   width: 100% loser det utan specificitetskrig: med en angiven bredd
   finns inget fritt utrymme kvar for auto-marginalerna att fordela. */
.enil-kortrad > .enil-kort {
	width: 100%;
}

.enil-kortrad--varm .enil-kort { background: var(--enil-varm); border-color: transparent; }
.enil-kortrad--bla  .enil-kort { background: var(--enil-bla-ljus); border-color: transparent; }

.enil-kort__eget-namn {
	margin: 0;
	font-size: var(--enil-text-xs);
	font-style: italic;
	color: var(--enil-text-dampad);
}

.enil-kort__adress,
.enil-kort__tider,
.enil-kort__roll {
	margin: 0;
	color: var(--enil-text-dampad);
	font-size: var(--enil-text-sm);
}

.enil-kort__tel a,
.enil-kort__mail a {
	font-weight: 600;
	word-break: break-word;
}

.enil-kort__tel,
.enil-kort__mail {
	margin: 0;
	font-size: var(--enil-text-sm);
}

.enil-kort__portratt img {
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	object-position: center top;
	border-radius: var(--enil-radie);
	display: block;
}

/* ---- Kontorskort ----

   KUNDFEEDBACK 2026-08-19: "Gor ett snyggt upplagg pa kontoren med
   ljusblaa rutor, ta bort las mer knapparna. Det kanns rorigt nu."

   Korten ar nu ljusblaa ytor utan ram, samma ton som juridikkorten och
   bokningsrutan. Utan knappen ar ortsnamnet kortets enda lank, sa den
   far bara rollen som knappen hade: hela kortet lyfter pa hover, och
   rubriken ar tydligt blaa. */
.enil-kortrad--kontor .enil-kort {
	background: var(--enil-bla-ljus);
	border-color: transparent;
	transition: background-color 0.18s ease;
}

.enil-kort--kontor h3 {
	font-size: var(--enil-text-xl);
}

/* Kortrubriker ska lasa som rubriker, inte som lankar mitt i en text.

   SPECIFICITETEN AR MEDVETET HOJD med .entry-content. Astra skriver
   ut .ast-single-post .entry-content a { text-decoration: underline }
   i sin dynamiska stilmall, alltsa tre klasser. En regel pa
   .enil-kort--kontor h3 a bar bara tva och forlorade tyst: ortsnamnen
   lag understrukna pa /kontakt/ men inte pa startsidan, eftersom
   kroppsklassen skiljer sig mellan sidtyperna. Regeln nedan tacker
   bada korttyperna och bada sidtyperna. */
.entry-content .enil-kortrad .enil-kort h3 a {
	text-decoration: none;
}

/* Fargen halls utanfor regeln ovan. Personkorten sätter color: inherit
   langre ned i filen, med lagre specificitet, och skulle annars fa
   lankblatt pa namnen. Ortsnamnen ska daremot vara blaa. */
.enil-kort--kontor h3 a {
	color: var(--enil-bla);
}

.entry-content .enil-kortrad .enil-kort h3 a:hover,
.entry-content .enil-kortrad .enil-kort h3 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Hela rutan svarar pa muspekaren, inte bara rubriken. :focus-within
   tacker tangentbordet: den som tabbar in i kortet ser samma markering
   som den som pekar pa det. */
.enil-kortrad--kontor .enil-kort:hover,
.enil-kortrad--kontor .enil-kort:focus-within {
	background: var(--enil-bla-ljus-2);
}

/* ---------------------------------------------------------
   SBF
   --------------------------------------------------------- */
.enil-sbf__text { color: var(--enil-text-dampad); }

/* ---------------------------------------------------------
   LÄSSPALT PÅ VANLIGA SIDOR

   Sidorna körs i Astras page-builder-layout, alltså utan temats
   container, eftersom hero och sektioner ska gå ut i kanterna och
   bär sin egen sidmarginal. Konsekvensen är att vanlig brödtext
   annars skulle spänna hela skärmens bredd.

   Därför får allt direkt under .entry-content en läsbar spalt,
   UTOM våra egna fullbreddsblock, som uttryckligen undantas.
   --------------------------------------------------------- */
/* .enil-sektionslayout undantas: den bär sitt eget rutnät med en
   navigeringskolumn och en innehållskolumn, och sätter läsbredden
   på innehållet inuti. Utan undantaget kapades hela rutnätet till
   läsbredden och navigeringskolumnen klämdes ihop till ingenting. */
/* .enil-kortrad undantas också: kortrutnäten ska använda hela
   innehållsbredden (1200 px), inte läsbredden. Kapade till 736 px fick
   de bara plats med två kort per rad, vilket gav både onödig scrollning
   och stora tomma ytor i sidled. */
/* .enil-form och .enil-form-tack undantas: formuläret bär ett rutnät
   med produktkort och ärendekort. Kapat till läsbredden fick de bara
   plats två per rad, vilket gjorde formuläret onödigt högt. Det får en
   egen bredd i formular.css i stället. */
.ast-page-builder-template .entry-content > *:not(.enil-hero):not(.enil-sektion):not(.enil-sektionslayout):not(.enil-kortrad):not(.enil-knapprad):not(.enil-form):not(.enil-form-tack):not(.enil-boka):not(.enil-genvagar) {
	max-width: min(var(--enil-lasbredd), 100% - 2.5rem);
	margin-inline: auto;
}

/* Kortrutnät och knapprader centreras mot innehållsbredden i stället. */
.ast-page-builder-template .entry-content > .enil-kortrad,
.ast-page-builder-template .entry-content > .enil-knapprad {
	max-width: min(var(--enil-bredd), 100% - 2.5rem);
	margin-inline: auto;
}

/* En knapprad är block-nivå.

   Jourknappen låg tidigare som ett naket <a> direkt i .entry-content.
   Den ärvde då reglerna ovan, men margin-inline: auto centrerar bara
   block-nivåboxar. Ett inline-flex-element ignorerar dem och hamnade
   längst ut i vänsterkanten, utanför spalten. */
.enil-knapprad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--enil-rum-4);
}

/* Knapprader som ligger i läsande text följer textspalten. */
.enil-knapprad--text {
	max-width: min(var(--enil-lasbredd), 100% - 2.5rem) !important;
}

/* Sidor som saknar hero behöver luft mot sidhuvudet. */
.ast-page-builder-template .entry-content > *:first-child:not(.enil-hero):not(.enil-sektionslayout) {
	margin-block-start: var(--enil-sektion);
}

.ast-page-builder-template .entry-content > *:last-child:not(.enil-sektion):not(.enil-sektionslayout):not(.enil-genvagar) {
	margin-block-end: var(--enil-sektion);
}

/* Innanför en sektion styr .enil-innehall bredden i stället. */
.enil-innehall > * {
	max-width: var(--enil-radlangd);
}

.enil-innehall > h1,
.enil-innehall > h2,
.enil-innehall > h3 {
	max-width: none;
}

/* ---------------------------------------------------------
   KONTORSSIDA , faktarutor
   --------------------------------------------------------- */
.enil-kontorsfakta {
	display: grid;
	gap: var(--enil-rum-12);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	max-width: var(--enil-bredd);
}

.enil-kontorsfakta > * { max-width: none; }

.enil-faktalista h2 {
	margin: 0 0 var(--enil-rum-4);
	font-size: var(--enil-text-xl);
}

.enil-faktalista h3 {
	margin: var(--enil-rum-6) 0 var(--enil-rum-1);
	font-size: var(--enil-text-lg);
}

.enil-faktalista dl {
	display: grid;
	grid-template-columns: minmax(90px, auto) 1fr;
	gap: var(--enil-rum-2) var(--enil-rum-6);
	margin: 0;
}

.enil-faktalista dt {
	font-weight: 600;
	color: var(--enil-text-dampad);
}

.enil-faktalista dd {
	margin: 0;
}

/* ---------------------------------------------------------
   EXTERNA LÄNKAR

   Öppnas i ny flik. WCAG 2.2 kriterium 3.2.5 säger att det inte
   ska ske utan förvarning, så länken bär både en dold upplysning
   för skärmläsare och den lilla ikonen nedan för seende.
   --------------------------------------------------------- */
.enil-extern::after {
	content: "";
	display: inline-block;
	width: 0.72em;
	height: 0.72em;
	margin-left: 0.35em;
	vertical-align: -0.02em;
	background-color: currentColor;
	opacity: 0.65;
	/* Pil som lämnar en ruta. Maskad SVG, så den ärver textfärgen
	   och fungerar lika bra på mörk som ljus botten. */
	-webkit-mask: var(--enil-extern-ikon) no-repeat center / contain;
	mask: var(--enil-extern-ikon) no-repeat center / contain;
}

:root {
	--enil-extern-ikon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3C/svg%3E");
}

/* Inuti en knapp sitter ikonen närmare texten och är lite tydligare. */
.enil-knapp.enil-extern::after {
	opacity: 0.9;
	margin-left: 0.45em;
}

/* ---------------------------------------------------------
   KARTA MED KLICK FÖR ATT LADDA

   Inget hämtas från Google innan besökaren bett om det. På en sajt
   där folk söker efter en avliden anhörig ska inga kakor sättas i
   förbifarten. Adressen står alltid som text ovanför, så kartan är
   ett komplement och aldrig enda bäraren av informationen.
   --------------------------------------------------------- */
.enil-karta {
	border: 1px solid var(--enil-kant);
	border-radius: var(--enil-radie);
	overflow: hidden;
	background: var(--enil-bla-ljus);
}

.enil-karta__knapp {
	display: flex;
	align-items: center;
	gap: var(--enil-rum-4);
	width: 100%;
	min-height: 120px;
	padding: var(--enil-rum-6);
	border: 0;
	background: transparent;
	color: var(--enil-text);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.enil-karta__knapp:hover,
.enil-karta__knapp:focus-visible {
	background: rgba(36, 54, 110, 0.07);
}

.enil-karta__ikon svg {
	width: 32px;
	height: 32px;
	color: var(--enil-bla);
	display: block;
}

.enil-karta__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.enil-karta__text strong {
	color: var(--enil-bla);
	font-size: var(--enil-text-sm);
}

.enil-karta__text small {
	color: var(--enil-text-dampad);
	font-size: var(--enil-text-xs);
	line-height: 1.45;
}

.enil-karta--laddad { background: none; }

.enil-karta iframe {
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
}

.enil-karta__vag { margin-top: var(--enil-rum-4); }

/* ---------------------------------------------------------
   HERO UTAN BILD

   Bildmaterialet kommer från kunden och saknas ännu. Utan denna
   regel står högra spalten tom och heron ser trasig ut. Så fort
   en utvald bild sätts på sidan fylls kolumnen och tvåspaltigheten
   återkommer automatiskt.
   --------------------------------------------------------- */
.enil-hero__bild:empty { display: none; }

.enil-hero__inner:has(.enil-hero__bild:empty) {
	grid-template-columns: 1fr;
	max-width: 78ch;
}

/* Reservlösning för webbläsare utan :has(). Heron blir enspaltig
   och texten behåller en läsbar radlängd. */
@supports not selector(:has(*)) {
	.enil-hero__text { max-width: 78ch; }
}

/* ---------------------------------------------------------
   SIDFOT
   Kundkrav: SBF-märket och samtliga kontaktuppgifter ska ligga här.
   Uppgifterna hämtas från CPT:n kontor, aldrig handskrivna.
   --------------------------------------------------------- */
.enil-sidfot {
	background: var(--enil-bla);
	color: var(--enil-text-invers);
	padding-block: var(--enil-rum-16) var(--enil-rum-8);
	padding-inline: var(--enil-marginal);
}

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

.enil-sidfot a {
	color: var(--enil-text-invers);
}

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

.enil-sidfot :focus-visible {
	outline: 3px solid var(--enil-gul);
	outline-offset: 2px;
}

.enil-sidfot__topp {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--enil-rum-8);
	padding-bottom: var(--enil-rum-8);
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* Boka ett möte och jourtelefonen, grupperade till höger om loggan.
   2026-09-10, ersätter de ljusblå bokningsrutorna på undersidorna. */
.enil-sidfot__kontakt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--enil-rum-8);
}

/* Vit knapp på den mörkblå sidfoten. a.-prefixet behövs för att slå
   .enil-sidfot a:hover, som annars gör texten vit på vit botten. */
.enil-sidfot a.enil-sidfot__boka {
	background: var(--enil-vit);
	border-color: var(--enil-vit);
	color: var(--enil-bla);
	text-decoration: none;
}

.enil-sidfot a.enil-sidfot__boka:hover,
.enil-sidfot a.enil-sidfot__boka:focus {
	background: transparent;
	color: var(--enil-vit);
	text-decoration: none;
}

@media (max-width: 720px) {
	.enil-sidfot__kontakt {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--enil-rum-5);
	}
}

/* ---------------------------------------------------------
   BOKNINGSRUTAN, se enil_boka_modal() i inc/timecut.php
   --------------------------------------------------------- */
.enil-bokruta {
	width: min(46rem, calc(100vw - 2rem));
	max-height: calc(100vh - 2rem);
	padding: 0;
	border: 0;
	border-radius: var(--enil-radie-stor);
	background: var(--enil-vit);
	color: var(--enil-text);
	box-shadow: 0 20px 60px rgba(20, 28, 46, 0.35);
	overflow: auto;
}

.enil-bokruta::backdrop {
	background: rgba(20, 28, 46, 0.6);
}

/* Den osynliga widgeten längst ned på sidan. Bara leverantörens egen
   startknapp döljs, inte behållaren: deras bokningsfönster ritas inuti
   #bo-meeting-root och skulle försvinna med den. Knappen klickas av
   assets/js/timecut.js. id:t i selektorn behövs för att vinna över
   leverantörens egen knappstil. */
.enil-bokmount {
	position: relative;
	height: 0;
}

/* ---------------------------------------------------------
   FÄRGAD YTA BREDVID SEKTIONSNAVET, 2026-09-10

   Lina: den beiga heron på /vid-dodsfall/ började exakt där texten
   började, så texten stod klistrad mot ytans vänsterkant.
   Vänsterlinjen i sig är rätt, den delas med all text under heron.
   Därför flyttas inte texten. Ytan sticker i stället ut åt vänster
   med samma mått som den inre luften, så att texten står kvar i linje
   med resten av spalten.

   Bara från 900 px, där navet står bredvid. Smalare än så finns
   ingen plats till vänster, och ytan hade gett horisontell scroll.
   Specificiteten är högre än padding-inline: 0 i sektionsnav.css,
   så att ordningen mellan filerna inte spelar någon roll.
   --------------------------------------------------------- */
@media (min-width: 900px) {
	.enil-sektionslayout .enil-sektionslayout__innehall > .enil-hero,
	.enil-sektionslayout .enil-sektionslayout__innehall > .enil-sektion--varm,
	.enil-sektionslayout .enil-sektionslayout__innehall > .enil-sektion--bla {
		padding-inline: var(--enil-rum-8);
		margin-inline-start: calc(-1 * var(--enil-rum-8));
		border-radius: var(--enil-radie-stor);
	}
}

/* Smalare an 900 px fick ytan ingen inre luft alls. Mobilgenomgangen
   2026-09-29 matte 0 px mellan fotoherons kant och rubriken pa /juridik/
   och /vid-dodsfall/, bada spraken, i 360 och 768. Har finns ingen plats
   att sticka ut at vanster, sa luften laggs inuti ytan i stallet. */
@media (max-width: 899px) {
	.enil-sektionslayout .enil-sektionslayout__innehall > .enil-hero,
	.enil-sektionslayout .enil-sektionslayout__innehall > .enil-sektion--varm,
	.enil-sektionslayout .enil-sektionslayout__innehall > .enil-sektion--bla {
		padding-inline: var(--enil-rum-5);
		border-radius: var(--enil-radie-stor);
	}
}

.enil-bokmount #bo-meeting-root .bo-meeting--btn-start {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Timecuts laddningsindikator är 488 px bred i en ruta på 422 px och gav
   en vågrät rullningslist i bokningsfönstret (2026-10-07). Inget innehåll
   behöver rullas i sidled. body framför: deras CSS laddas efter vår. */
body .bo-meeting--modal--main-content-wrapper {
	overflow-x: hidden;
}

.enil-bokruta__huvud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--enil-rum-4);
	padding: var(--enil-rum-4) var(--enil-rum-4) var(--enil-rum-4) var(--enil-rum-6);
	border-bottom: 1px solid rgba(35, 38, 45, 0.1);
}

.enil-bokruta__rubrik {
	margin: 0;
	color: var(--enil-bla);
	font-size: var(--enil-text-xl);
	font-weight: 700;
}

/* Två klasser, så att Astras button- och button:hover-regler inte ger
   stängknappen blå botten. */
.enil-bokruta .enil-bokruta__stang {
	min-width: var(--enil-traffyta);
	min-height: var(--enil-traffyta);
	padding: 0;
	border: 0;
	border-radius: var(--enil-radie);
	background: transparent;
	color: var(--enil-text);
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}

.enil-bokruta .enil-bokruta__stang:hover,
.enil-bokruta .enil-bokruta__stang:focus {
	background: var(--enil-varm);
	color: var(--enil-bla);
}

.enil-bokruta__kropp {
	padding: var(--enil-rum-6);
}

.enil-bokruta__ring {
	margin: 0;
	max-width: none;
	padding: 0 var(--enil-rum-6) var(--enil-rum-6);
	font-size: var(--enil-text-sm);
}

/* ---------------------------------------------------------
   TEXTEN ÖVER FOTOT PÅ STARTSIDAN, 2026-09-10

   Lina: texten stod centrerad över bilden, uppmätt 278 px från
   vänster på en 1200 px bred bild som börjar på 100 px. Orsaken är
   Astras inbäddade regel
   .ast-page-builder-template .entry-content[data-ast-blocks-layout] ... > *
   med max-width none och margin-left auto, som vann över fotoregeln
   längre ned i filen. Selektorn nedan har samma början plus två
   klasser och vinner på specificitet, utan !important. Se minnet om
   Astra och specificitet: mät alltid i webbläsaren efteråt.
   Luften mot bildens vänsterkant är paddingen i fotoregeln, 48 px.
   --------------------------------------------------------- */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] .enil-sektion--foto > .enil-sektionshuvud--over,
.entry-content .enil-sektion--foto > .enil-sektionshuvud--over {
	justify-self: start;
	margin-inline: 0;
	max-width: min(34rem, 100%);
	text-align: left;
}

.enil-sidfot__namn {
	margin: 0;
	font-size: var(--enil-text-xl);
	font-weight: 700;
}

/* ---- Logotyper ---- */
/* Kundfeedback 2026-08-19: "Loggan i headern behover vara storre."
   Hojd fran 58 till 78 px. Sidhuvudets rad ar 108 px hog, sa loggan
   far plats utan att radhojden andras och utan att menyn flyttar sig. */
.enil-logo {
	display: block;
	width: auto;
	height: 78px;
	max-width: 100%;
}

@media (max-width: 600px) {
	.enil-logo { height: 54px; }
}

.enil-sidfot__logo {
	display: inline-block;
	text-decoration: none;
}

/* Sidfotens logotyp ar en ANNAN fil an sidhuvudets: enil-logo-negativ.svg
   saknar devisen "Garantin for ratt hjalp", som kunden ville bort ur
   sidfoten. Filen ar levererad av kunden.

   VARFOR 96 PX OCH INTE 78: den levererade vektorn beholl ritytan fran
   originalet, alltsa hojden dar devisen stod. Uppmatt bar den 254,8 av
   334,3 enheter innehall, resten ar tom yta i nederkant. En hojd pa
   96 px ger darfor cirka 73 px synlig ordbild. Rakna om harifran om
   filen nagon gang beskars. */
.enil-sidfot__logo .enil-logo { height: 96px; }

.enil-sbf-logo {
	width: 78px;
	height: auto;
	flex: 0 0 auto;
}

/* Sidhuvudets logotyp. Astra sätter egna marginaler på sidtiteln. */
.site-title { margin: 0 !important; line-height: 1 !important; }
.site-title a { display: inline-block; text-decoration: none; }

.enil-sidfot__jour { text-align: right; }

.enil-sidfot__jour-etikett {
	margin: 0;
	font-size: var(--enil-text-xs);
	color: rgba(255, 255, 255, 0.8);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.enil-sidfot__jour-nummer {
	display: block;
	font-size: var(--enil-text-2xl);
	font-weight: 700;
	text-decoration: none;
	line-height: 1.2;
}

.enil-sidfot__mail {
	display: block;
	font-size: var(--enil-text-sm);
}

.enil-sidfot__rubrik {
	margin: var(--enil-rum-8) 0 var(--enil-rum-6);
	color: var(--enil-text-invers);
	font-size: var(--enil-text-lg);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.enil-sidfot__kontorslista {
	display: grid;
	gap: var(--enil-rum-6);
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.enil-sidfot__kontorslista li {
	max-width: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: var(--enil-text-sm);
}

.enil-sidfot__ort {
	font-weight: 700;
	text-decoration: none;
}

.enil-sidfot__eget,
.enil-sidfot__adress {
	color: rgba(255, 255, 255, 0.78);
}

.enil-sidfot__eget { font-style: italic; font-size: var(--enil-text-xs); }

.enil-sidfot__tel { font-weight: 600; }

.enil-sidfot__botten {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enil-rum-8);
	justify-content: space-between;
	margin-top: var(--enil-rum-12);
	padding-top: var(--enil-rum-8);
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.enil-sidfot__sbf {
	display: flex;
	align-items: flex-start;
	gap: var(--enil-rum-4);
	max-width: 46ch;
}

.enil-sidfot__sbf p {
	margin: 0;
	max-width: none;
	font-size: var(--enil-text-xs);
	color: rgba(255, 255, 255, 0.85);
}

/* SBF-märket ligger i sin vita version direkt på den blå ytan.
   Ingen vit platta bakom, märket är redan gjort för mörk botten. */

.enil-sidfot__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--enil-rum-3);
	text-align: right;
}

.enil-sidfot__sociala,
.enil-sidfot__juridisk-lista {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--enil-rum-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--enil-text-xs);
}

.enil-sidfot__sociala li,
.enil-sidfot__juridisk-lista li { max-width: none; }

.enil-sidfot__copyright {
	margin: 0;
	max-width: none;
	font-size: var(--enil-text-xs);
	color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 720px) {
	.enil-sidfot__topp,
	.enil-sidfot__botten { flex-direction: column; }

	.enil-sidfot__jour,
	.enil-sidfot__meta { text-align: left; align-items: flex-start; }

	.enil-sidfot__sociala,
	.enil-sidfot__juridisk-lista { justify-content: flex-start; }
}

/* ---------------------------------------------------------
   404
   Astras standard gav ingen vag vidare, saknade main-landmarke
   och hade en sokknapp pa 15 x 21 px. Den som landar har har
   ofta klickat pa en gammal lank till en dodsannons.
   --------------------------------------------------------- */
.enil-404 {
	max-width: var(--enil-bredd);
	margin-inline: auto;
	padding-inline: var(--enil-marginal);
	padding-block: var(--enil-sektion);
}

.enil-404 h2 {
	margin-top: var(--enil-rum-16);
	font-size: var(--enil-text-2xl);
}

.enil-404 .enil-kortrad { margin-top: var(--enil-rum-8); }

.enil-404__orter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--enil-rum-3);
	margin: var(--enil-rum-6) 0 0;
	padding: 0;
	list-style: none;
}

.enil-404__orter li { max-width: none; }

.enil-404__orter a {
	display: inline-flex;
	align-items: center;
	min-height: var(--enil-traffyta);
	padding: 0 var(--enil-rum-5);
	border: 1px solid var(--enil-kant);
	border-radius: var(--enil-radie);
	background: var(--enil-vit);
	font-weight: 600;
	text-decoration: none;
}

.enil-404__orter a:hover,
.enil-404__orter a:focus-visible {
	border-color: var(--enil-bla);
	background: var(--enil-bla-ljus);
}

/* Sokfaltet: WCAG 2.2 kraver minst 24 x 24 px traffyta. */
.enil-404 .search-form,
.enil-404 .wp-block-search__inside-wrapper {
	display: flex;
	gap: var(--enil-rum-2);
	max-width: 34rem;
	margin-top: var(--enil-rum-4);
}

.enil-404 .search-field,
.enil-404 input[type="search"] {
	flex: 1;
	min-height: var(--enil-traffyta);
	padding: 0 var(--enil-rum-4);
	border: 1px solid var(--enil-kant);
	border-radius: var(--enil-radie);
}

.enil-404 .search-submit,
.enil-404 button[type="submit"] {
	min-height: var(--enil-traffyta);
	min-width: var(--enil-traffyta);
	padding-inline: var(--enil-rum-6);
	border: 0;
	border-radius: var(--enil-radie);
	background: var(--enil-bla);
	color: var(--enil-vit);
	font-weight: 600;
	cursor: pointer;
}

/* ---------------------------------------------------------
   SMA TRAFFYTOR, WCAG 2.2 kriterium 2.5.8 (minst 24 x 24 px)
   Uppmatt i granskningen: sidfotslankar 18 px, brodsmulan
   "Hem" 21 px.
   --------------------------------------------------------- */
.enil-sidfot__sociala a,
.enil-sidfot__juridisk-lista a,
.enil-sidfot__sbf a,
.enil-brodsmulor a,
.enil-brodsmulor [aria-current="page"] {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* ---------------------------------------------------------
   PLATSHALLARPORTRATT

   Fem av elva medarbetare saknar foto. Utan platshallare blev
   korten olika hoga och raden lases som ofardig. Initialerna
   i varumarkesfargerna har samma bildformat som ett riktigt
   portratt, sa rutnatet haller ihop tills bilderna kommer.
   --------------------------------------------------------- */
/* KUNDFEEDBACK 2026-08-19: "Forminska bilderna pa personal sa den inte
   klipper huvuden."

   ORSAKEN var inte storleken utan bildformatet. Samtliga elva portratt
   ar 400x600, alltsa 2:3. Ramen har var 4:5. Med object-fit: cover
   skalades bilden till ramens bredd, blev for hog, och overskottet
   kapades halften i overkant och halften i underkant. Pa Lars Johansson
   och Lars-Erik Frid hamnade snittet rakt genom haret.

   Ramen har nu samma format som filerna, 2:3, sa ingenting beskars.
   object-position: center top ar ett skyddsnat: laggs det nagon gang in
   ett portratt med annat format kapas det i underkant, aldrig i huvudet.

   Ramen kapas dessutom till 210 px och centreras. Ett 2:3-portratt i
   full kortbredd hade blivit 393 px hogt och tagit over hela raden.
   Bilden blir alltsa mindre, precis som kunden bad om, och korten
   kortare. */
.enil-kort__portratt {
	position: relative;
	aspect-ratio: 2 / 3;
	max-width: 210px;
	margin-inline: auto;
	width: 100%;
	border-radius: var(--enil-radie);
	overflow: hidden;
	background: var(--enil-bla-ljus);
}

.enil-kort__initialer {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--enil-bla);
	font-size: clamp(2rem, 1rem + 4vw, 3rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	opacity: 0.42;
}

/* Korten i en personrad ska bli lika hoga och innehallet ligga
   uppifran, inte tryckas ned av flexens fria utrymme. */
.enil-kortrad--personer .enil-kort {
	justify-content: flex-start;
}

.enil-kortrad--personer .enil-kort h3 {
	margin-top: var(--enil-rum-1);
}

/* ---------------------------------------------------------
   FULLBREDD UTAN VIT RAM

   Astras <article> bar padding: 36px 20px 0 20px, vilket gav en
   vit ram runt hero och sektioner. Uppmatt: heron borjade pa
   x=20 i stallet for x=0 och hade 36 px vitt ovanfor.

   Sidorna kor page-builder-layout, sa temats egen padding fyller
   ingen funktion. Vara egna block bar sin padding sjalva.
   --------------------------------------------------------- */
.ast-single-post.ast-page-builder-template .site-main > article,
.ast-page-builder-template .site-main > article,
.ast-page-builder-template .ast-article-single {
	padding: 0;
}

/* ---------------------------------------------------------
   HERO MED FOTO

   Bilden kommer fran sidans utvalda bild via --enil-hero-bild.
   Scrim i varumarkets marinbla, starkast dar texten star, sa att
   den halls lasbar oavsett vad som hander i motivet. Tonen ar
   lugn och inte "begravningslyx": bilden far synas.
   --------------------------------------------------------- */
.enil-hero--foto {
	position: relative;
	background-color: var(--enil-bla-mork);
	background-image: var(--enil-hero-bild, none);
	background-size: cover;
	background-position: center 62%;
	background-repeat: no-repeat;
	isolation: isolate;
}

.enil-hero--foto::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		100deg,
		rgba(20, 28, 46, 0.94) 0%,
		rgba(20, 28, 46, 0.86) 34%,
		rgba(20, 28, 46, 0.52) 62%,
		rgba(20, 28, 46, 0.18) 100%
	);
}

.enil-hero--foto .enil-hero__inner { min-height: 22rem; }

.enil-hero--foto .enil-hero__titel,
.enil-hero--foto h1,
.enil-hero--foto h2 {
	color: var(--enil-vit);
}

.enil-hero--foto .enil-hero__brodtext,
.enil-hero--foto .enil-hero__underrubrik,
.enil-hero--foto p {
	color: rgba(255, 255, 255, 0.92);
}

.enil-hero--foto .enil-hero__devis { color: var(--enil-gul); }

/* Sekundarknappen behover vit kant mot den morka ytan. */
.enil-hero--foto .enil-knapp--sekundar {
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--enil-vit);
}

.enil-hero--foto .enil-knapp--sekundar:hover,
.enil-hero--foto .enil-knapp--sekundar:focus {
	background: var(--enil-vit);
	color: var(--enil-bla);
}

.enil-hero--foto .enil-jour,
.enil-hero--foto .enil-jour:hover {
	color: var(--enil-vit);
}

.enil-hero--foto :focus-visible {
	outline-color: var(--enil-gul);
}

/* Pa smal skarm loper texten over hela bredden, sa scrimen gar
   nedifran i stallet for fran sidan.

   Scrimen ar ocksa starkare an pa stor skarm. Skalet ar motivet: pa
   bredd hamnar solreflexen till hoger om textspalten, men nar bilden
   beskars till 390 px hamnar den rakt bakom brodtexten. Uppmatt
   kontrast dar var 3,4:1 med den tidigare scrimen, alltsa under
   WCAG 1.4.3. Bildutsnittet flyttas dessutom upp mot himlen. */
@media (max-width: 767px) {
	.enil-hero--foto {
		background-position: center 34%;
	}

	.enil-hero--foto::before {
		background: linear-gradient(
			180deg,
			rgba(20, 28, 46, 0.78) 0%,
			rgba(20, 28, 46, 0.93) 46%,
			rgba(20, 28, 46, 0.96) 100%
		);
	}

	.enil-hero--foto .enil-hero__inner { min-height: 0; }
}

/* Textspalten i en foto-hero kapas, av tva skal: radlangden blir
   lasbar, och motivet till hoger far synas i stallet for att skymmas
   av text. Scrimen ar starkast just dar texten star. */
.enil-hero--foto .enil-hero__text {
	max-width: 40rem;
}

.enil-hero--foto .enil-hero__brodtext,
.enil-hero--foto .enil-hero__underrubrik,
.enil-hero--foto .enil-hero__titel {
	max-width: none;
}

@media (max-width: 767px) {
	.enil-hero--foto .enil-hero__text { max-width: none; }
}

/* ---------------------------------------------------------
   PRODUKTKORT , kistor, urnor, blommor, gravvårdar

   Bilden ligger i kortets överkant och går ut i kanterna, så
   kortet läses som en produkt och inte som en textruta.
   --------------------------------------------------------- */
/* Fast antal kolumner i stället för auto-fit.
   Produktrutnätet ligger i innehållskolumnen bredvid sektionsnavet,
   alltså på cirka 740 px. Med auto-fit och minmax(260px) blev det två
   kort per rad och en onödigt lång sida. Tre kolumner är deterministiskt
   och ger samma resultat oavsett var rutnätet placeras. */
.enil-kortrad--produkt {
	grid-template-columns: repeat(var(--enil-produktkolumner, 3), minmax(0, 1fr));
	gap: var(--enil-rum-4);
}

@media (max-width: 900px) {
	.enil-kortrad--produkt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
	.enil-kortrad--produkt { grid-template-columns: 1fr; }
}

.enil-kort--produkt {
	padding: 0;
	overflow: hidden;
}

.enil-kort__bild {
	margin: 0;
	background: var(--enil-varm);
}

.enil-kort__bild img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Utan foto: ingen bildyta, bara en smal färgkant i överkant.
   Se motiveringen i inc/produkt.php. */
.enil-kort--utan-bild {
	border-top: 4px solid var(--enil-ockra);
}

.enil-kort__text {
	display: flex;
	flex-direction: column;
	gap: var(--enil-rum-2);
	padding: var(--enil-rum-6);
	flex: 1;
}

.enil-kort__titel {
	margin: 0;
	font-size: var(--enil-text-lg);
}

.enil-kort__pris {
	margin: 0;
	font-size: var(--enil-text-lg);
	font-weight: 700;
	color: var(--enil-bla);
}

.enil-kort__brod {
	margin: 0;
	color: var(--enil-text-dampad);
	font-size: var(--enil-text-sm);
}

/* Faktaraden hakas i kortets underkant, så att Material och Färg
   ligger på samma höjd över hela raden även när beskrivningarna är
   olika långa. */
.enil-kort__fakta {
	margin: auto 0 0;
	padding: var(--enil-rum-3) 0 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: var(--enil-rum-1) var(--enil-rum-4);
}

.enil-kort__fakta li {
	margin: 0;
	font-size: var(--enil-text-xs);
	color: var(--enil-text-dampad);
}

/* ---------------------------------------------------------
   MEDARBETARSIDA
   --------------------------------------------------------- */
.enil-hero__inner--person {
	grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
	align-items: center;
}

.enil-hero__portratt {
	max-width: 260px;
}

.enil-person__bild {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--enil-radie);
}

.enil-person__initialer {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	border-radius: var(--enil-radie);
}

.enil-hero--person .enil-hero__devis {
	color: var(--enil-bla);
}

.enil-hero--person .enil-hero__underrubrik {
	margin: 0 0 var(--enil-rum-3);
	font-size: var(--enil-text-lg);
	color: var(--enil-text-dampad);
}

@media (max-width: 700px) {
	.enil-hero__inner--person { grid-template-columns: 1fr; }
	.enil-hero__portratt { max-width: 200px; }
}

/* ---------------------------------------------------------
   PLATSHÅLLARE FÖR EJ BYGGD INBÄDDNING

   Syns bara för inloggade. Filtret i inc/inbaddning.php tar bort
   rutan ur HTML:en för besökare, så det här är enbart utseende
   för redaktören. Streckad kant och ockra, alltså tydligt skild
   från allt annat på sidan, så att den inte kan misstas för
   publicerat innehåll.
   --------------------------------------------------------- */
.enil-platshallare {
	max-width: var(--enil-lasbredd);
	margin: var(--enil-rum-12) auto;
	padding: var(--enil-rum-8) var(--enil-rum-6);
	border: 2px dashed var(--enil-ockra);
	border-radius: var(--enil-radie);
	background: var(--enil-varm);
	color: var(--enil-ockra);
	text-align: center;
}

.enil-platshallare p {
	margin: 0;
	font-size: var(--enil-text-sm);
}

/* Omslag runt leverantörens anmälningsformulär. Centreringen
   och bredden sköts av .enil-inbaddning--fast i inbaddning.css,
   här behövs bara luften runt omkring. */
.enil-anmalan {
	margin-block: var(--enil-rum-12);
}

/* Namnlänken i medarbetarkortet. Ska läsa som en rubrik, inte som
   en länk mitt i texten, men fortfarande vara tydligt klickbar. */
.enil-kortrad--personer .enil-kort h3 a {
	color: inherit;
	text-decoration: none;
}

.enil-kortrad--personer .enil-kort h3 a:hover,
.enil-kortrad--personer .enil-kort h3 a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---------------------------------------------------------
   BOKNINGSRUTAN , sidornas avslut

   Kundfeedback 2026-08-19: undersidorna slutade med en H2, ett
   stycke och en lös knapp, och lastes som roriga. Avslutet ar nu
   en lugn ruta i den ljusblaa varumarkestonen. Se inc/boka.php
   for varfor rubriken ar ett <p> och inte en rubriknivaa.

   Fargen ar --enil-bla-ljus, samma som juridikkorten. Rutan ska
   lasa som en inbjudan, inte som en varning: ingen ram, ingen
   skugga, ingen accentfarg pa ytan.
   --------------------------------------------------------- */
.enil-boka {
	background: var(--enil-bla-ljus);
	border-radius: var(--enil-radie-stor);
	padding: var(--enil-rum-12) var(--enil-rum-8);
	text-align: center;
}

.enil-boka__inner {
	max-width: 44rem;
	margin-inline: auto;
}

.enil-boka__rubrik {
	margin: 0 0 var(--enil-rum-3);
	color: var(--enil-bla);
	font-size: var(--enil-text-2xl);
	font-weight: 700;
	line-height: var(--enil-radhojd-rubrik);
}

.enil-boka__text {
	margin: 0 auto;
	max-width: 38rem;
	color: var(--enil-text);
	font-size: var(--enil-text-bas);
}

.enil-boka__knappar {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--enil-rum-4);
	margin: var(--enil-rum-8) 0 0;
}

/* Sekundarknappen star mot ljusblaa botten och behover en tydlig
   kant for att lasa som en knapp och inte som brodtext. */
.enil-boka .enil-knapp--sekundar {
	background: var(--enil-vit);
}

@media (max-width: 600px) {
	.enil-boka {
		padding: var(--enil-rum-8) var(--enil-rum-5);
	}

	/* Knapparna staplas hellre an bryts pa mitten. */
	.enil-boka__knappar .enil-knapp {
		width: 100%;
	}
}

/* Rutan ar bredare an lasspalten, men smalare an sektionsbredden.
   Utan undantaget nedan kapas den till 46 rem och den inre
   textspalten far da ingen luft kvar i sidled. */
.ast-page-builder-template .entry-content > .enil-boka {
	max-width: min(58rem, 100% - 2.5rem);
	margin-inline: auto;
	margin-block: var(--enil-sektion);
}

/* Ligger rutan sist i dokumentet behovs andaa luft under den, annars
   klistras den mot sidfoten. */
.ast-page-builder-template .entry-content > .enil-boka:last-child {
	margin-block-end: var(--enil-sektion);
}

/* Inuti en sektion bar sektionen luften. Rutan behover bara sin bredd,
   annars spanner den hela innehallsbredden pa 1200 px och den centrerade
   texten far en orimligt lang radlangd. */
.enil-sektion > .enil-boka {
	max-width: min(58rem, 100%);
	margin-inline: auto;
}

/* ---------------------------------------------------------
   SEKTIONSBILD , bred bandbild inuti en sektion

   KUNDFEEDBACK 2026-09-04 (Lina): "Under sektionen Mot manniskorna
   du far prata med, lagg till bild LKK03386-web."

   Bilden ligger som ett wp:image-block, inte som ra HTML i ett
   wp:html-block. Det ar avsiktligt: da kan Lina byta motiv direkt i
   redigeraren. Priset ar att den bar Gutenbergs egna klasser
   (.wp-block-image, .size-full) och att reglerna nedan maste vinna
   over bade dem och Astra.

   SPECIFICITETEN AR MEDVETET HOJD med .entry-content. .wp-block-image
   vager (0,1,0) och Astras bildregler ligger pa samma niva. Kedjan
   .entry-content .enil-sektionsbild vager (0,2,0) och vinner utan
   !important. Samma grepp som kortrubrikerna hogre upp i filen.

   Marginalen i sidled lamnas som auto med vett: Astras
   .ast-page-builder-template .entry-content[data-ast-blocks-layout]
   -regel satter margin-left/right: auto pa allt tva nivaer ned, och
   den vager mer an detta. Har vill vi ha auto anda, sa striden ar
   onodig. Bara margin-bottom behover hallas, och den ror Astra inte.
   --------------------------------------------------------- */
.entry-content .enil-sektionsbild {
	max-width: var(--enil-bredd);
	/* Sektionshuvudet bar 3 rem under sig. Bilden lagger lika mycket
	   under sig sjalv, sa att rutnatet under far samma andrum som
	   rubriken ovan och sektionen laser som tre jamna steg. */
	margin: 0 auto var(--enil-rum-12);
	border-radius: var(--enil-radie-stor);
	/* Kapar bildens horn mot radien. Utan detta sticker den
	   fyrkantiga <img> ut genom figurens rundade horn. */
	overflow: hidden;
}

.entry-content .enil-sektionsbild img {
	display: block;
	width: 100%;
	height: auto;
}

/* ---------------------------------------------------------
   GENVAGAR , tunn lankrad ovanfor sidfoten

   KUNDFEEDBACK 2026-09-04 (Lina): "Lagg till lankar till
   Livsarkivet, beg online och familjesidan innan sidfoten pa ett
   diskret och snyggt satt."

   DISKRET betyder har: ingen rubriknivo, ingen knapp, ingen egen
   bakgrundsfarg. Raden arver den varma tonen fran SBF-sektionen
   ovanfor och skiljs bara av en harfin linje, sa att den lases som
   en fot pa sidan och inte som en sektion till att ta stallning
   till. Hojden ar drygt en tredjedel av en sektion.

   Raden ligger sist i innehallet och undantas darfor bade fran
   lasspaltens maxbredd och fran :last-child-marginalen hogre upp i
   filen. Utan de tva :not(.enil-genvagar) kapades den till 46 rem
   och fick 6 rem luft ned till sidfoten, alltsa raka motsatsen till
   diskret.

   OMFATTNING: bara startsidan, beslut 2026-09-04. Darfor ren markup
   i post 25 och 582 och ingen plugin-kod. Ska raden nagon gang ut
   pa hela sajten ar CSS:en redan pa plats, men markupen maste da
   flyttas till inc/footer.php och strangarna bli oversattningsbara.
   --------------------------------------------------------- */
.enil-genvagar {
	padding-block: var(--enil-rum-5);
	padding-inline: var(--enil-marginal);
	background: var(--enil-varm);
	border-top: 1px solid var(--enil-kant);
}

.enil-genvagar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0 var(--enil-rum-8);
	max-width: var(--enil-bredd);
	margin-inline: auto;
}

/* SPECIFICITET: Astra skriver .ast-single-post .entry-content a
   { text-decoration: underline } i sin dynamiska stilmall, alltsa
   (0,2,1). En regel pa .enil-genvagar__lank ensam vager (0,1,0) och
   skulle forlora tyst, precis som kortrubrikerna gjorde fore
   2026-08-19. Kedjan nedan vager (0,3,0) och vinner utan !important. */
.entry-content .enil-genvagar .enil-genvagar__lank {
	display: inline-flex;
	align-items: center;
	/* WCAG 2.2 kriterium 2.5.8. Raden ser tunn ut, men klickytan ar
	   full traffyta i hojd. */
	min-height: var(--enil-traffyta);
	color: var(--enil-text-dampad);
	font-size: var(--enil-text-sm);
	text-decoration: none;
}

.entry-content .enil-genvagar .enil-genvagar__lank:hover,
.entry-content .enil-genvagar .enil-genvagar__lank:focus-visible {
	color: var(--enil-bla);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

@media (max-width: 600px) {
	/* Staplade pa smal skarm. Med tre lankar pa rad bryts raden annars
	   till tva plus en, vilket ser ostadat ut. Stapeln laser som en
	   liten lista och behaller full traffyta per rad. */
	.enil-genvagar__inner {
		flex-direction: column;
		gap: 0;
	}
}

/* ---------------------------------------------------------
   SEKTION MED FOTO , text ovanpa tonad bild

   KUNDFEEDBACK 2026-09-10 (Lina): "Tona bilden likt startbilden och
   lagg ovan text till vanster, under texten tva knappar till
   'kontakt', 'boka mote'."

   Alltsa samma grepp som heron: samma scrim, vit text, vansterstalld.
   Skillnaden mot heron ar att bilden HAR ligger kvar som ett
   wp:image-block och inte som en CSS-bakgrund. Det ar medvetet och
   samma skal som star vid SEKTIONSBILD ovan: Lina ska kunna byta
   motiv i redigeraren. En background-image i en CSS-variabel hade
   last motivet till koden.

   STAPLINGEN gors med grid i stallet for position:absolute. Bada
   barnen far grid-area 1/1 och ligger da i samma cell. Vinsten ar att
   sektionens hojd fortfarande bestams av bilden, sa den kan inte
   kollapsa om texten ar kort, och texten kan inte spilla ut om den ar
   lang. Malordningen i markupen ar bild forst, text sedan, sa texten
   malas overst utan z-index-strid.
   --------------------------------------------------------- */
.enil-sektion--foto {
	display: grid;
	isolation: isolate;
}

.enil-sektion--foto > * {
	grid-area: 1 / 1;
}

/* Bilden bar 3 rem under sig i grundregeln. Inuti stapeln skulle den
   marginalen bara skjuta ned hela cellen. */
.entry-content .enil-sektion--foto .enil-sektionsbild {
	margin-bottom: 0;
	position: relative;
}

/* Scrimmet ligger pa bilden och inte pa sektionen, sa att det foljer
   bildens rundade horn och inte den fyrkantiga sektionen.
   Vardena ar hamtade rakt fran .enil-hero--foto, sa att de tva ytorna
   verkligen ser lika ut. Andras heron ska detta andras med. */
.enil-sektion--foto .enil-sektionsbild::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(
		100deg,
		rgba(20, 28, 46, 0.94) 0%,
		rgba(20, 28, 46, 0.86) 34%,
		rgba(20, 28, 46, 0.52) 62%,
		rgba(20, 28, 46, 0.18) 100%
	);
}

/* Sektionshuvudet ar centrerat och 62ch brett i grundregeln. Over ett
   foto ska det i stallet sta till vanster, som i heron. */
.enil-sektion--foto .enil-sektionshuvud--over {
	position: relative;
	align-self: center;
	justify-self: start;
	max-width: min(46ch, 100%);
	margin: 0;
	padding: var(--enil-rum-12);
	text-align: left;
}

.enil-sektion--foto .enil-sektionshuvud--over h2 {
	color: var(--enil-vit);
}

.enil-sektion--foto .enil-sektionshuvud--over p {
	color: rgba(255, 255, 255, 0.92);
}

/* Knapparna ligger nu inne i sektionshuvudet, alltsa under texten, och
   ska da inte centreras som de gor i grundregeln. */
.enil-sektion--foto .enil-sektionshuvud__knappar {
	justify-content: flex-start;
}

.enil-sektion--foto .enil-knapp--sekundar {
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--enil-vit);
}

.enil-sektion--foto .enil-knapp--sekundar:hover,
.enil-sektion--foto .enil-knapp--sekundar:focus {
	background: var(--enil-vit);
	color: var(--enil-bla);
}

.enil-sektion--foto :focus-visible {
	outline-color: var(--enil-gul);
}

/* MOBIL: stapla inte.
   Under 768 px ar bilden drygt 200 px hog och texten plus tva knappar
   far inte plats ovanpa utan att bli oläslig. Da laggs texten under
   bilden i stallet, pa morkbla platta, sa att kontrasten halls. */
@media (max-width: 767px) {
	.enil-sektion--foto {
		display: block;
	}

	.entry-content .enil-sektion--foto .enil-sektionsbild {
		margin-bottom: 0;
		border-end-start-radius: 0;
		border-end-end-radius: 0;
	}

	.enil-sektion--foto .enil-sektionsbild::after {
		/* Utan text over sig behovs bara en latt fordjupning, inte ett
		   scrim som ska bara lasbarhet. */
		background: linear-gradient(
			180deg,
			rgba(20, 28, 46, 0) 55%,
			rgba(20, 28, 46, 0.35) 100%
		);
	}

	.enil-sektion--foto .enil-sektionshuvud--over {
		max-width: none;
		background: var(--enil-bla-mork);
		border-end-start-radius: var(--enil-radie-stor);
		border-end-end-radius: var(--enil-radie-stor);
		padding: var(--enil-rum-8);
	}
}