/**
 * MHRF Klubbnyheter.
 *
 * Håller sig medvetet neutralt: temat kör Bootstrap 5 och GeneratePress, så
 * typografi och färger ärvs. Här definieras bara layout och det som är
 * specifikt för de här vyerna.
 */

/*
 * Färger, radier och avstånd kommer RAKT ur temats palett i
 * themes/mhrf-child/assets/css/global/variables.css, som autoladdas site-wide
 * av temats register_global_styles():
 *
 *   --blue-primary              rubriker, knappar, markeringar
 *   --blue-primary--trans-40    ramar och skiljelinjer
 *   --blue-secondary            mjuk bakgrundston
 *   --gray-primary              dämpad text
 *   --yellow-primary            MHRF:s signalfärg
 *   --yellow-primary--trans-10  gul bakgrundston
 *   --radius-s / --radius-m     hörnradier
 *
 * Pluginet definierar INGA egna alias för dem. Ett eget namn på temats färg
 * ger bara ett extra hopp att läsa igenom och en till plats att glömma
 * uppdatera. Fallback-värdet efter kommatecknet är temats nuvarande värde,
 * så vyerna ser rätt ut även om variabelfilen inte laddats.
 *
 * Kvar här ligger bara det temat faktiskt saknar.
 */
:root {
	/* Statusfärger. Ingår inte i temats palett — höll dem i samma ton. */
	--mhrf-kn-ok: #0a7d28;
	--mhrf-kn-varning: #8a6100;
	--mhrf-kn-fara: #b32d2e;

	/* Rubrikfont. Temat refererar Source Sans Pro på tre olika sätt
	   (`Source sans pro`, `Source Sans Pro`, med och utan fallback) — här
	   används den kompletta varianten. Fonten laddas av GeneratePress'
	   typografimodul, inte av något @font-face i temat. */
	--mhrf-kn-rubrikfont: "Source Sans Pro", sans-serif;
}

/* ---------- Administratörernas navigeringsrad ----------
 *
 * Renderas bara för manage_options — markupen finns inte ens i HTML-källan för
 * andra besökare. Blå bakgrund så det är omedelbart tydligt att raden är ett
 * administrationsverktyg och inte en del av sidans innehåll.
 */

.mhrf-kn-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* Radavstånd 6px, avstånd mellan rubrik och knappar 24px. */
	gap: 6px 24px;
	/* Ingen marginal uppåt: raden ska ligga direkt under menyn, inte flyta
	   mitt emellan menyn och innehållet. Avståndet nedåt skiljer den från
	   sidans egentliga innehåll. Toolbaren renderas först i innehållsytan, så
	   0 här ger temats egen padding-top och inget mer. */
	/* !important: nagot utanfor pluginet skriver over marginalen. <nav> far
	   marginaler fran bade Bootstrap och temat, och den regeln vann. */
	margin: 0 0 56px !important;
	padding: 10px 14px;
	background: var(--blue-primary, #15529f);
	border-radius: var(--radius-m, 8px);
	color: #fff;
	font-size: 0.9375em;
	line-height: 1.4;
	/* Krymper till innehållet i stället för att spänna över hela spalten.
	   fit-content respekterar ändå tillgänglig bredd, så raden radbryter
	   fortfarande på små skärmar. */
	width: fit-content;
	max-width: 100%;
}

.mhrf-kn-toolbar-titel {
	font-weight: 700;
	letter-spacing: 0.02em;
}

.mhrf-kn-toolbar-lankar {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	/* Ingen grow: toolbaren är fit-content och ska inte sträckas ut. */
	flex: 0 1 auto;
}

.mhrf-kn-toolbar-lank {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	color: #fff;
	text-decoration: none;
	/* Helvit ram, inte halvtransparent: knapparna ska avgransas skarpt mot
	   den bla raden. */
	border: 1px solid #fff;
}

/* Ikonerna foljer lankens textfarg via currentColor — vita pa bla, svarta nar
   knappen ar aktiv eller hovras och blir gul. Ingen egen hover-regel behovs. */
.mhrf-kn-toolbar-ikon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Gult med svart text vid hover — samma färg som den aktiva sidan får, och
   samma relation som temats .btn-primary. Ingen färgändring vid fokus. */
.mhrf-kn-toolbar-lank:hover {
	background: var(--yellow-primary, #ffc400);
	border-color: var(--yellow-primary, #ffc400);
	color: #000;
}

/* Aktiv sida markeras med samma gula. */
.mhrf-kn-toolbar-lank.is-aktiv {
	background: var(--yellow-primary, #ffc400);
	border-color: var(--yellow-primary, #ffc400);
	color: #000;
	font-weight: 600;
}

.mhrf-kn-toolbar-lank.is-aktiv:hover {
	background: var(--yellow-primary, #ffc400);
	color: #000;
}

.mhrf-kn-toolbar-raknare {
	display: inline-block;
	min-width: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--yellow-primary, #ffc400);
	color: #000;
	font-size: 0.75em;
	font-weight: 700;
	text-align: center;
	line-height: 1.6;
}

/* När länken själv är gul — aktiv ELLER hovrad — måste räknaren byta till mörk
   bakgrund, annars blir den gul på gult och försvinner. */
.mhrf-kn-toolbar-lank.is-aktiv .mhrf-kn-toolbar-raknare,
.mhrf-kn-toolbar-lank:hover .mhrf-kn-toolbar-raknare {
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
}

@media (max-width: 600px) {
	/* Rubriken tar en egen rad. flex-basis, inte width — width beter sig
	   oförutsägbart i en fit-content-container. */
	.mhrf-kn-toolbar-titel {
		flex: 0 0 100%;
	}
}

/* ---------- Hover ger färg, fokus gör det inte ----------
 *
 * Två saker måste hanteras, och det är därför reglerna ser överarbetade ut:
 *
 * 1. Fokusringen. Temat har `button:focus:not(:focus-visible) { outline: 0 }`,
 *    vilket täcker musklick men bara för `button` — tangentbordsfokus och
 *    `input` blir kvar.
 * 2. En inline-regel på sidan, `.active, .accordion:hover, button:focus`, sätter
 *    `background: #85a6d1` och `border: none` på VARJE <button>. Den ligger
 *    utanför pluginet och är det som faktiskt färgar knapparna vid fokus.
 *
 * !important överallt är medvetet: den främmande regeln injiceras inline och
 * kan flytta sig, så specificitet och källordning går inte att lita på. Hover
 * ska alltid vinna, fokus ska aldrig ändra något.
 */

/* Öga och kopieringsknappar. */
.mhrf-kn-ikonknapp:focus,
.mhrf-kn-ikonknapp:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	background: #fff !important;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1) !important;
	color: var(--gray-primary, #435b79) !important;
}

/* Blockbyggarens flytta/ta bort. */
.mhrf-kn-block-knapp:focus,
.mhrf-kn-block-knapp:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	background: #fff !important;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1) !important;
	color: inherit !important;
}

/* Bildens ta-bort-knapp — vilar mörk, inte vit. */
.mhrf-kn-bild-bort:focus,
.mhrf-kn-bild-bort:focus-visible {
	outline: none !important;
	box-shadow: none !important;
	background: rgba(0, 0, 0, 0.68) !important;
	border: 0 !important;
	color: #fff !important;
}

/* Länkfältet är en input och träffas inte av button:focus — bara outline. */
.mhrf-kn-lank-falt:focus,
.mhrf-kn-lank-falt:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ---------- Gemensamt ---------- */

.mhrf-kn-notis {
	padding: 14px 16px;
	background: var(--blue-secondary, #ebf1f8);
	border-left: 4px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
	margin-bottom: 20px;
}

.mhrf-kn-notis--varning {
	border-left-color: var(--mhrf-kn-varning);
}

.mhrf-kn-notis p:last-child {
	margin-bottom: 0;
}

/*
 * Alla hjälptexter ligger på en egen platta. Målgruppen är klubbstyrelser som
 * skummar formuläret fält för fält, och grå småtext under ett fält hoppas
 * över — plattan gör raden till något man ser innan man börjar skriva, inte
 * efter att man skrivit fel.
 *
 * Svart text och inte temats dämpade grå: texten ska läsas, inte tonas ner.
 *
 * width: fit-content i stället för hela kolumnbredden: en full remsa under
 * varje fält läser sig som ännu ett inmatningsfält. Plattan slutar där texten
 * slutar. Fortfarande display:block, så nästa element börjar på egen rad —
 * spanen står bland andra spans (etikett, fältfel) som annars kan hamna
 * bredvid varandra.
 *
 * font-weight explicit: en del av spanen ligger i sammanhang som ärver fetstil
 * (etiketter, sektionsrubriker), och hjälptexten ska väga som brödtext oavsett
 * var den står. <strong> inuti behåller sin fetstil.
 */
.mhrf-kn-hjalptext {
	display: block;
	width: fit-content;
	max-width: 100%;
	/* 16px, samma som brödtexten. Inte em: en del av spanen ligger i block som
	   skalar ner sin egen text, och hjälptexten ska vara lika stor överallt. */
	font-size: 16px;
	font-weight: 400;
	color: #000;
	margin-top: 6px;
	padding: 6px 10px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-s, 4px);
}

/*
 * Varningsvarianten. Skiljer sig inte längre i färg — basen är svart sedan
 * hjälptexterna fick sin platta — men klassen står kvar som fäste för
 * aria-describedby-texten och för att markera att raden är en varning, inte en
 * beskrivning.
 *
 * Ingen röd färg och ingen ikon — fältet är inte fel, det är bara lätt att
 * skriva fel i. Rött här hade konkurrerat med det riktiga felmeddelandet
 * strax ovanför.
 */

.mhrf-kn-rubrik {
	margin-top: 0;
	margin-bottom: 40px;
}

.mhrf-kn-obl {
	color: var(--mhrf-kn-fara);
}

/* Motsatsen till .mhrf-kn-obl: står i etiketten, inte i hjälptexten, så man
   ser att fältet får lämnas tomt utan att läsa raden under. */
.mhrf-kn-frivillig {
	color: var(--gray-primary, #435b79);
	font-weight: 400;
}

/*
 * Datumfälten ska vara EXAKT lika höga som textfälten — de står på samma rad
 * som Plats. Webbläsaren ger input[type="date"] en egen, lägre standardhöjd,
 * och den ärver inte fältens padding eftersom kalenderikonen ligger i fältets
 * skugg-DOM.
 *
 * Uppmätta värden från textfälten: 10px 15px padding, 16px/24px text, 1px ram
 * = 46px. Höjden sätts explicit så den inte glider isär om typsnittet byts.
 */
.mhrf-kn-falt input[type="date"] {
	width: 100%;
	height: 46px;
	padding: 10px 15px;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
}

.mhrf-kn-fel {
	margin-top: 12px;
	padding: 10px 14px;
	border-radius: var(--radius-s, 4px);
	background: #fdf0f0;
	border-left: 4px solid var(--mhrf-kn-fara);
	color: var(--mhrf-kn-fara);
}

/* ---------- Sektioner i publiceringsformuläret ----------
 *
 * Tre likvärdiga steg: Kontaktperson, Information om publiceringen, Innehåll.
 * Alla får samma h2 så formuläret läses som sektioner — tidigare var det en
 * <legend>, en <h3> och ingen rubrik alls, vilket gjorde att fälten såg ut att
 * hänga i luften.
 */

.mhrf-kn-sektion {
	margin: 0 0 56px;
	padding-top: 72px;
	border-top: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-sektion:first-of-type {
	padding-top: 0;
	border-top: 0;
}

.mhrf-kn-sektion-rubrik {
	margin: 0 0 16px;
	font-size: 1.625em;
	line-height: 1.25;
}

/*
 * Stegsiffran i avsnittsrubrikerna.
 *
 * aria-hidden i markupen: siffran är en visuell orienteringshjälp, inte en del
 * av rubriktexten. En skärmläsare ska läsa "Kontaktperson för publiceringen",
 * inte "1 Kontaktperson för publiceringen".
 *
 * Siffran hänger UTANFÖR innehållskolumnen, absolut positionerad mot rubriken.
 * Med den i flödet sköts rubriktexten in och hamnade ur linje med fälten
 * under — nu börjar all text på samma vänsterkant.
 */
.mhrf-kn-sektion-rubrik,
.mhrf-kn-eventfalt-rubrik {
	position: relative;
}

/* ---------- Ensam bild i ett innehållsblock ----------
 *
 * OBS namnet: .mhrf-kn-bild är upptagen av publiceringsformulärets bildrutor
 * längre upp i filen, som sätter height: 100% och object-fit: cover.
 *
 * Ett galleriblock med EN bild renderas som en vanlig figure, inte som en
 * slider (mhrf_kn_rendera_galleri). Ingen ram och ingen panel: bilden är
 * innehåll i texten, inte en box bredvid den.
 */
.mhrf-kn-enkelbild {
	/* width: 100% och inte bara display: block. En <figure> krymper till sitt
	   innehåll i flera av temats sammanhang, och då styrde bildens egen
	   pixelbredd hur stor den blev — en liten källbild ritades i 94px mitt i
	   en spalt på 800. Uppmätt i granskningsvyn. */
	width: 100%;
	margin: 24px 0;
}

.mhrf-kn-enkelbild img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius-s, 4px);
}

.mhrf-kn-enkelbild-text {
	margin: 10px 0 0;
	color: var(--gray-primary, #435b79);
	font-size: 0.9375em;
	line-height: 1.4;
}

/* ---------- Klubbens publiceringslänk ----------
 *
 * Ligger sist på publiceringssidan, under formuläret. Knappen bär
 * .mhrf-kn-kopiera och delar därmed kopieringsläget med granskningsvyns
 * "Kopiera länk" — se regeln vid .mhrf-kn-kopiera.is-kopierad.
 */
/* Marginalen är noll: blocket ligger i sidokolumnen, som håller avstånden
   med sin egen gap. Låg tidigare sist under formuläret och behövde luft dit. */
.mhrf-kn-publicera-lank {
	margin: 0;
}

/* Samma storlek som .mhrf-kn-minaklubbar-rubrik: korten står bredvid varandra
   i kolumnen och ska väga lika. 1.625em gällde när blocket låg ensamt under
   formuläret och behövde bära som en sektionsrubrik. */
.mhrf-kn-publicera-lank-rubrik {
	margin: 0 0 4px;
	font-size: 1.25em;
	line-height: 1.25;
}

/*
 * Plattan ärvs från .mhrf-kn-hjalptext; bara marginalerna är egna.
 *
 * margin-top nollas: basklassens 6px räknar med att ligga tätt under ett fält,
 * och här står texten under en rubrik som har sitt eget avstånd nedåt. Nedåt
 * ger den luft ner till kopieringsknappen.
 */
.mhrf-kn-publicera-lank-hjalp {
	margin: 0 0 20px;
}

/*
 * Klubbnamnet stryks under här och bara här. Klassen .mhrf-kn-klubbnamn sitter
 * på fyra ställen i formuläret (två rubriker, varningsnotisen och den här
 * raden) och skrivs av samma JS-anrop — understrykning på alla hade satt en
 * linje under halva rubriken i steg 2.
 *
 * Understrykning och inte fetstil: hjälptexterna väger 400 rakt igenom.
 */
.mhrf-kn-publicera-lank-hjalp .mhrf-kn-klubbnamn {
	text-decoration: underline;
}

/*
 * Klassen heter mhrf-kn-NUMMER och inte mhrf-kn-steg. Formulärets tre
 * stegcontainrar har redan klassen mhrf-kn-steg, och en 44px blå ruta på dem
 * kollapsade hela formuläret till en liten låda.
 */
.mhrf-kn-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	/* right: 100% lägger den precis till vänster om rubrikens textkant. */
	right: 100%;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 16px;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-s, 4px);
	background: var(--blue-primary, #15529f);
	color: #fff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/*
 * Under 1100px finns ingen marginal att hänga i — då skulle siffran hamna
 * utanför viewporten. Tillbaka i flödet, med rubriken som flexrad.
 */
@media (max-width: 1100px) {
	.mhrf-kn-sektion-rubrik,
	.mhrf-kn-eventfalt-rubrik {
		display: flex;
		align-items: center;
		gap: 14px;
	}

	.mhrf-kn-nummer {
		position: static;
		transform: none;
		margin-right: 0;
		flex: 0 0 auto;
	}
}

@media (max-width: 600px) {
	.mhrf-kn-nummer {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}
}

/* Source Sans Pro + vikt 600 på pluginets rubriker.
 *
 * 600 är HÖGRE än utgångsläget: temats Bootstrap sätter h1–h6 till
 * font-weight 500 (style.css:80), så rubrikerna var lättare än brödtextens
 * fetstil innan.
 *
 * Samlat i en regel — de enskilda rubrikklasserna sätter inte font-family
 * själva, så det finns bara ett ställe att ändra på. */
.mhrf-kn-rubrik,
.mhrf-kn-sektion-rubrik,
.mhrf-kn-falt-rubrik,
.mhrf-kn-block-typ,
.mhrf-kn-eventfalt-rubrik,
.mhrf-kn-eventinfo-rubrik,
.mhrf-kn-publicera-lank-rubrik,
.mhrf-kn-blockknappar-rubrik {
	font-family: var(--mhrf-kn-rubrikfont);
	font-weight: 600;
}

/* ---------- Testverktyg (endast MHRF) ----------
 *
 * Streckad ram och dämpad text: rutan ska läsas som ett verktyg ovanpå sidan,
 * inte som en del av formuläret klubben fyller i. Den som ser den ska aldrig
 * tveka om vilken av knapparna som skickar in inlägget.
 */

.mhrf-kn-testverktyg {
	margin-top: 32px;
	padding: 16px 20px;
	border: 1px dashed var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
}

.mhrf-kn-testverktyg-rubrik {
	margin: 0;
	font-weight: 600;
}

.mhrf-kn-testverktyg-text {
	margin: 4px 0 12px;
	font-size: 0.9375em;
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-testverktyg-svar {
	margin-left: 12px;
	font-size: 0.875em;
}

.mhrf-kn-testverktyg-svar.is-ok {
	color: var(--mhrf-kn-ok);
}

.mhrf-kn-testverktyg-svar.is-fel {
	color: var(--mhrf-kn-fara);
}

/* ---------- "Dina klubbar" ----------
 *
 * Genvägslistan högst upp på publiceringssidan, för den som har en roll i en
 * klubb. Egen platta så den inte läses som en del av formuläret under — det
 * är en väg IN, inte ett fält att fylla i.
 */

/*
 * Sidokolumn till höger, 30 % av bredden.
 *
 * GRID PÅ FÖRÄLDERN och inte float eller en egen wrapper: formuläret består av
 * fem syskon (stegen, kvittensen, länkrutan) som alla ska ligga kvar i samma
 * flöde. Med grid får de kolumn 1 var för sig, och listan lyfts till kolumn 2
 * utan att markupen behöver byggas om.
 *
 * align-items: start — annars sträcks kolumnerna till samma höjd, och listan
 * hade blivit en tom platta lika lång som hela formuläret.
 *
 * display sätts bara på föräldern. Barnen behåller sin egen, så [hidden] på
 * de tre dolda stegen fortsätter gälla och de tar ingen plats i griden.
 */
.mhrf-kn-publicera {
	display: grid;
	grid-template-columns: 1fr 30%;
	gap: 0 56px;
	align-items: start;
}

.mhrf-kn-publicera > * {
	grid-column: 1;
}

/*
 * En kolumn när sidokolumnen är tom eller vi lämnat steg 1. Klassen sätts av
 * uppdateraLankblock() i samma svep som elementet göms — utan den stod
 * formuläret kvar på 70 % med tom luft bredvid.
 */
.mhrf-kn-publicera.is-utan-sidebar {
	grid-template-columns: 1fr;
}

.mhrf-kn-sidebar {
	grid-column: 2;
	grid-row: 1;
	/* Uttalat, trots align-items: start på griden: kolumnen växer när
	   direktlänken dyker upp, och formuläret bredvid ska inte röra sig när den
	   gör det. Ett värde som layouten hänger på ska stå där man letar. */
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* [hidden] behöver hjälp mot display: flex ovanför — samma sak som för
   .mhrf-kn-eventfalt längre upp. */
.mhrf-kn-sidebar[hidden] {
	display: none;
}

/*
 * Sidokolumnens två kort delar utseende. De står under varandra i samma
 * kolumn och gör samma sorts sak — olika padding och olika rubrikstorlek såg
 * ut som två komponenter av misstag, inte som ett val.
 */
.mhrf-kn-minaklubbar,
.mhrf-kn-publicera-lank {
	padding: 20px 24px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-m, 8px);
}

/*
 * Hjälptexten står som vanlig brödtext i korten, utan basklassens platta.
 * Kortet ÄR redan en platta — en till inuti blev en låda i en låda, och raden
 * är en mening under rubriken, inte en upplysning knuten till ett fält.
 */
.mhrf-kn-minaklubbar .mhrf-kn-hjalptext,
.mhrf-kn-publicera-lank .mhrf-kn-hjalptext {
	width: auto;
	margin-top: 10px;
	padding: 0;
	background: none;
}

/*
 * En kolumn på smal skärm. 900px är samma brytpunkt som resten av filen
 * använder för tvåkolumnslägen, och 30 % av en telefonskärm är ändå ingen
 * användbar kolumn.
 */
@media (max-width: 900px) {
	.mhrf-kn-publicera {
		grid-template-columns: 1fr;
	}

	.mhrf-kn-sidebar {
		grid-column: 1;
		grid-row: auto;
	}
}

.mhrf-kn-minaklubbar-rubrik {
	margin: 0 0 4px;
	font-size: 1.25em;
}

.mhrf-kn-minaklubbar-lista {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.mhrf-kn-minaklubbar-lista li + li {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-minaklubbar-lista a {
	font-weight: 600;
}

/* Rollen är sammanhang, inte en etikett att läsa först — därför dämpad och
   efter namnet. */
.mhrf-kn-minaklubbar-roll {
	margin-left: 8px;
	font-size: 0.875em;
	font-style: italic;
	color: var(--gray-primary, #435b79);
}

/* ---------- Formulärfält ---------- */

.mhrf-kn-falt {
	margin-bottom: 32px;
}

.mhrf-kn-falt label {
	display: block;
	font-weight: 600;
	margin-bottom: 0;
}

/*
 * Hjälptexter som står MELLAN etiketten och fältet (se form-publicera.php).
 * Basklassens marginal sitter uppåt och räknar med att ligga under ett fält —
 * här ska luften i stället finnas ner mot inmatningen.
 */
.mhrf-kn-falt label + .mhrf-kn-hjalptext {
	margin: 4px 0 8px;
}

.mhrf-kn-falt input[type="text"],
.mhrf-kn-falt input[type="email"],
.mhrf-kn-falt input[type="url"],
.mhrf-kn-falt input[type="password"],
.mhrf-kn-falt select,
.mhrf-kn-falt textarea {
	width: 100%;
	max-width: 100%;
}

/* ---------- Fältens ram och bakgrund ----------
 *
 * !important genomgående. GP:s inline-genererade stilmall sätter ram, radie
 * och bakgrund på `input[type="text"]` (0,1,1) och byter dessutom ramfärg på
 * :focus via form_border_color_focus — utan !important blinkade fälten om
 * färg så fort markören landade i dem. Samma krock som lösningen på
 * .mhrf-kn-flodesok-input längre ner i filen, men här gäller den varje fält i
 * formuläret, och då är en genomgående regel enklare att lita på än en
 * specificitetsstege per fälttyp.
 */

.mhrf-kn-falt input[type="text"],
.mhrf-kn-falt input[type="email"],
.mhrf-kn-falt input[type="url"],
.mhrf-kn-falt input[type="password"],
.mhrf-kn-falt input[type="date"],
.mhrf-kn-falt input[type="number"],
.mhrf-kn-falt select,
.mhrf-kn-falt textarea,
.mhrf-kn-block-kropp input[type="text"],
.mhrf-kn-block-kropp textarea {
	border: 1px solid #cecece !important;
}

/*
 * Fokus syns med outline i stället för med ramen, som nu ligger fast.
 * Utan den här regeln blev fälten omöjliga att följa med tangentbord — GP
 * nollställer browserns egen fokusring och ersatte den med just den ramfärg
 * !important ovan låser.
 *
 * :focus-visible och inte :focus — ringen ska synas för den som tabbar, inte
 * runt fältet man nyss klickade i.
 */
.mhrf-kn-falt input:focus-visible,
.mhrf-kn-falt select:focus-visible,
.mhrf-kn-falt textarea:focus-visible,
.mhrf-kn-block-kropp input:focus-visible,
.mhrf-kn-block-kropp textarea:focus-visible {
	/*
	 * Diskret: 1px linje tätt mot fältet plus en svag halo. Den förra var
	 * 2px mättat blått med 1px glapp, vilket läste som att fältet var
	 * felmarkerat snarare än fokuserat.
	 *
	 * Linjen behåller --blue-primary trots att den är stark. Färgen bär
	 * kontrastkravet på fokusmarkeringar (WCAG 2.2 SC 1.4.11, 3:1 mot
	 * omgivningen) — en uttunnad ton hade hamnat runt 2:1 mot det vita
	 * fältet. Det som gör den lugn är bredden och att den ligger an, inte
	 * att färgen dämpas.
	 */
	outline: 1px solid var(--blue-primary, #15529f);
	outline-offset: 0;
	box-shadow: 0 0 0 3px rgba(21, 82, 159, 0.12);
}

/*
 * Vita fält i den blå evenemangsrutan. GP ger dem en ljusgrå bakgrund som
 * ligger för nära panelens blå ton — fälten slutade se ut som fält och blev
 * plattor i en platta.
 */
.mhrf-kn-eventfalt .mhrf-kn-falt input[type="text"],
.mhrf-kn-eventfalt .mhrf-kn-falt input[type="url"],
.mhrf-kn-eventfalt .mhrf-kn-falt input[type="date"],
.mhrf-kn-eventfalt .mhrf-kn-falt select,
.mhrf-kn-eventfalt .mhrf-kn-falt textarea {
	background: #fff !important;
}

/* ---------- Felmarkering ----------
 *
 * Medvetet kraftig. Målgruppen är klubbstyrelser med hög snittålder, och den
 * gamla markeringen var en 1px kantfärg plus 14px röd text — lätt att missa
 * även för den som letar. Nu byter hela fältet bakgrund och får en tjock röd
 * kantlist, så felet syns i perifert synfält utan att läsas.
 */

.mhrf-kn-falt.har-fel {
	padding: 14px 16px;
	border-left: 6px solid var(--mhrf-kn-fara);
	border-radius: var(--radius-s, 4px);
	background: #fdeaea;
}

.mhrf-kn-falt.har-fel label,
.mhrf-kn-falt.har-fel .mhrf-kn-falt-rubrik {
	color: var(--mhrf-kn-fara);
	font-weight: 700;
}

/* Vit inputbakgrund mot det röda fältet: fältet man ska skriva i måste
   fortfarande läsas som ett inmatningsfält. */
/* !important här också: den gemensamma #cecece-ramen ovan är !important och
   väger lika tungt, och utan detta försvann den röda ramen på fält med fel. */
.mhrf-kn-falt.har-fel input,
.mhrf-kn-falt.har-fel textarea,
.mhrf-kn-falt.har-fel select {
	border: 2px solid var(--mhrf-kn-fara) !important;
	background: #fff !important;
}

.mhrf-kn-faltfel {
	display: block;
	color: var(--mhrf-kn-fara);
	font-size: 0.875em;
	margin-top: 4px;
}

/*
 * :not(:empty) — spanen finns alltid i markupen, men ska bara ta plats och
 * ritas som en varning när den faktiskt innehåller ett meddelande. Utan det
 * skulle varje tomt fält få en utropstecken-cirkel.
 */
.mhrf-kn-faltfel:not(:empty) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 10px;
	font-size: 1em;
	font-weight: 700;
	line-height: 1.4;
}

.mhrf-kn-faltfel:not(:empty)::before {
	content: "!";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--mhrf-kn-fara);
	color: #fff;
	font-size: 0.875em;
	font-weight: 700;
	line-height: 22px;
	text-align: center;
}

/* Sammanfattningen vid submit-knappen — samma tyngd som fältfelen. */
.mhrf-kn-fel:not(:empty) {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 16px;
	border-left: 6px solid var(--mhrf-kn-fara);
	font-size: 1.0625em;
	font-weight: 600;
}

.mhrf-kn-fel:not(:empty)::before {
	content: "!";
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--mhrf-kn-fara);
	color: #fff;
	font-size: 0.875em;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
}

/* ---------- Typval: nyhet / evenemang (§4e) ----------
 *
 * Radioknappar under huven — tangentbord, skärmläsare och "obligatorisk"
 * fungerar då gratis. CSS gör dem till en knappgrupp: input:et döljs visuellt
 * men behåller sin plats i tabbordningen (clip, inte display:none).
 */

/* Samma roll som en label — håller samma marginal. */
.mhrf-kn-falt-rubrik {
	display: block;
	font-weight: 600;
	margin-bottom: 0;
}

/* Etikett och knappgrupp på samma rad — se .mhrf-kn-falt--inline. */
.mhrf-kn-knappgrupp-val {
	display: flex;
	width: fit-content;
	max-width: 100%;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: 50vmax;
	overflow: hidden;
	background: #fff;
}

/* Etiketten till VÄNSTER om kontrollen i stället för ovanför.
 *
 * flex-wrap + flex-basis: 100% på felmeddelandet: det ska ta en egen rad under
 * båda, inte tränga sig in mellan dem. */
.mhrf-kn-falt--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.mhrf-kn-falt--inline .mhrf-kn-faltfel {
	flex-basis: 100%;
	margin-top: 0;
}

.mhrf-kn-val {
	margin: 0;
	cursor: pointer;
}

.mhrf-kn-val input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.mhrf-kn-val > span {
	display: block;
	padding: 9px 26px;
	font-weight: 600;
	color: var(--gray-primary, #435b79);
	white-space: nowrap;
}

.mhrf-kn-val:hover > span {
	background: var(--blue-secondary, #ebf1f8);
}

/* Valt läge: MHRF:s gula med svart text, samma relation som .btn-primary. */
.mhrf-kn-val.is-vald > span,
.mhrf-kn-val input:checked + span {
	background: var(--yellow-primary, #ffc400);
	color: #000;
}

/* Tangentbordsfokus MÅSTE synas här — hela kontrollen är annars osynlig för
   den som tabbar, eftersom input:et är visuellt dolt. */
.mhrf-kn-val input:focus-visible + span {
	outline: 2px solid var(--blue-primary, #15529f);
	outline-offset: -2px;
}

/* Egen bakgrund så blocket läses som en enhet, inte som lösa fält i sektionen. */
.mhrf-kn-eventfalt {
	margin: 0 0 18px;
	padding: 36px 36px 4px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-m, 8px);
}

/* [hidden] behöver hjälp: display:flex/block i andra regler skulle annars
   vinna över attributets svaga standardstil. */
.mhrf-kn-eventfalt[hidden] {
	display: none;
}

/* Delas med den publika kontaktpersonen — samma nivå i hierarkin, och samma
   storlek som sektionsrubriken "Innehåll". */
.mhrf-kn-eventfalt-rubrik {
	margin: 0 0 6px;
	font-size: 1.625em;
	line-height: 1.25;
}

.mhrf-kn-eventfalt-rubrik + .mhrf-kn-hjalptext {
	margin-top: 0;
	margin-bottom: 14px;
}

/* Ingen bakgrund och ingen inramning: avsnittet är ett steg bland de andra,
   inte en inrutad ruta i formuläret. Luften ovanför gör avgränsningen. */
.mhrf-kn-publikkontakt {
	margin: 56px 0 18px;
}

/*
 * Kryssrutan som kopierar kontaktpersonen från steg 1.
 *
 * Egen bakgrund så att den läses som en genväg OVANFÖR fälten, inte som ett
 * fält bland dem. Samma blå ton som evenemangsrutan använder — den signalerar
 * "hör ihop", och gult är upptaget av hjälptexterna.
 */
/* Ingen egen bakgrund: kryssrutan står direkt över fälten den styr och läses
   som en del av dem. Ingen padding heller, så den ligger i vänsterkant med
   fältens etiketter. */
.mhrf-kn-samma-kontakt {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 24px;
}

/* 20px kryssruta, samma mått som flödesfiltret. accent-color räcker: ingen
   egen ruta att hålla i synk med temat. */
.mhrf-kn-samma-kontakt input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--blue-primary, #15529f);
	cursor: pointer;
}

/* Temat ger label en bottenmarginal som skulle knuffa texten ur linje mot
   kryssrutan. .mhrf-kn-falt label sätter dessutom font-weight 600 — den här
   etiketten är ett val, inte ett fältnamn, och ska väga som brödtext. */
/*
 * Evenemangsrutan har själv --blue-secondary som bakgrund, så hjälptextens
 * blå platta blev osynlig där — raden läste som lös brödtext mellan fälten.
 * Gult är MHRF:s signalfärg och syns mot det blå utan att bli en varning.
 *
 * BARA här. Överallt annars står hjälptexten mot vitt, och där gör den blå
 * plattan sitt jobb.
 */
.mhrf-kn-eventfalt .mhrf-kn-hjalptext {
	background: var(--yellow-primary--trans-10, #fff9e6);
}

.mhrf-kn-samma-kontakt label {
	margin: 0;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

/* ---------- Kryssruta med lång etikett ----------
 *
 * Samtycket för den publika kontaktpersonen. Skild från .mhrf-kn-samma-kontakt
 * ovan på två punkter: etiketten är en hel mening som bryter till flera rader,
 * så rutan linjerar mot FÖRSTA raden och inte mot mitten av textblocket, och
 * marginalen sitter i det omslutande .mhrf-kn-falt i stället för här.
 */

.mhrf-kn-kryssrad {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

/* margin-top 2px: rutan är 20px och radhöjden 21px, så utan den sitter
   kryssrutans överkant en hårsmån ovanför textens. */
.mhrf-kn-kryssrad input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--blue-primary, #15529f);
	cursor: pointer;
}

/* Temats label bär bottenmarginal och .mhrf-kn-falt label sätter 600 — det här
   är ett val, inte ett fältnamn, och ska väga som brödtext. */
.mhrf-kn-kryssrad label {
	margin: 0;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

/* Fältet runt kryssrutan har ingen inmatningsruta att hålla isär från
   etiketten, så det behöver bara luft uppåt mot fälten ovanför. */
.mhrf-kn-godkann {
	margin-top: 4px;
}

/*
 * Fälten medan kryssrutan är ikryssad. De är readonly, inte disabled:
 * disabled tar bort dem ur tabbordningen och gör värdet oläsbart för
 * skärmläsare, och användaren ska kunna läsa vad som kopierats.
 */
/*
 * Låsta fält. Streckad ram i stället för en egen bakgrundston: hjälptexterna
 * äger --blue-secondary nu, och temats fältbakgrund är så nära vit att en grå
 * ton inte gick att se skillnad på. Ramen syns oavsett bakgrund.
 */
.mhrf-kn-falt input[readonly] {
	border-style: dashed;
	/* Fältens vanliga ramfärg är nästan lika ljus som fältet självt — streckad
	   ram i den färgen syntes inte. Temats ram-/skiljelinjefärg gör den synlig
	   utan att se ut som en felmarkering. */
	border-color: var(--blue-primary--trans-40, #afc4e1);
	color: var(--gray-primary, #435b79);
	cursor: not-allowed;
}

/* ---------- Typmärke ("Event" / "Nyhet") ----------
 *
 * Ljusblå pill enligt designen, inte gul: gult är MHRF:s signalfärg och
 * reserveras för knapparnas hover-läge. Märket är en etikett, inte en åtgärd.
 *
 * OBS: reglerna för .mhrf-kn-eventinfo och .mhrf-kn-kontaktblock låg tidigare
 * här också, i en <dl>-baserad version från före Figma-designen. De satte
 * `display: grid` på listan, vilket den nuvarande <ul>-versionen längre ned
 * inte återställde — raderna hamnade därför i två kolumner och radbröt
 * ohjälpligt i den smala sidokolumnen. Duplikaten är borta; enda definitionen
 * finns nu under "Enskild nyhet". */

/*
 * Typmärket ("Nyhet" / "Event").
 *
 * Färgen följer BAKGRUNDEN märket ligger på, inte typen. Det spelar roll:
 * i flödet på start- och klubbsidor ligger evenemangen i den blå panelen och
 * nyheterna på vitt, men på Mitt konto ligger båda typerna i samma panel. Ett
 * märke som färgades efter "Nyhet" respektive "Event" hade därför blivit fel
 * på ena stället oavsett vilket värde man valde.
 *
 * Grundregeln är varianten för vit bakgrund, eftersom det är den vanligaste:
 * nyhetskolumnen, arkivet och den enskilda nyheten. Panelen skriver över.
 */
.mhrf-kn-typmarke {
	display: inline-block;
	padding: 3px 14px;
	border-radius: 50vmax;
	/* #ebf1f8 — samma ton som panelen använder som bakgrund. */
	background: var(--blue-secondary, #ebf1f8);
	color: #000;
	font-family: var(--mhrf-kn-rubrikfont);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	white-space: nowrap;
}

/*
 * På blå botten. Regeln hänger på panelen och inte på korttypen, så allt som
 * någonsin läggs i en panel får rätt märke utan att den här filen behöver
 * veta vad det är.
 */
.mhrf-kn-flode-panel .mhrf-kn-typmarke {
	background: var(--blue-primary--trans-40, #afc4e1);
	color: #000;
}

/* Två fält sida vid sida, 80/20. Radbryter till full bredd på små skärmar. */
.mhrf-kn-rad {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
}

.mhrf-kn-rad-80 {
	flex: 1 1 62%;
	min-width: 0;
}

.mhrf-kn-rad-20 {
	flex: 1 1 18%;
	min-width: 0;
}

/* Lika breda kolumner. flex-basis 180px gör att de bryter ner till färre
   kolumner av sig själva när utrymmet inte räcker — ingen media query behövs. */
.mhrf-kn-rad-lika {
	flex: 1 1 180px;
	min-width: 0;
}

/*
 * Ett fält per rad, fullbrett. Används i kontaktsektionerna, där fälten bär
 * egna hjälptexter: i kolumner blev raden ojämn eftersom en text under ett
 * fält sköt ner just den kolumnen och lämnade grannarna hängande.
 *
 * Raden är kvar som .mhrf-kn-rad så avstånden och grundstilarna delas — bara
 * bredden skrivs över.
 */
.mhrf-kn-rad--staplad .mhrf-kn-rad-lika {
	flex-basis: 100%;
}

/* ---------- Snabbval för slutdatum ----------
 *
 * Sju små knappar under slutdatumfältet: startdatum + 1..7 dagar. De ersätter
 * inte datumfältet utan fyller i det, så en klubb som vill ha ett datum längre
 * bort fortfarande kan använda kalendern.
 *
 * Egna stilar och inte temats .btn: de knapparna är stora, har pill-form och
 * bär ett eget typsnitt. Sju sådana under ett fält hade dominerat sektionen
 * och läst som formulärets viktigaste val, vilket det inte är.
 */

.mhrf-kn-snabbdatum {
	display: block;
	margin-top: 8px;
}

/*
 * Rubriken över en knapprad. Väger 600 och bär fältetikettens svarta:
 * raden är ett eget litet verktyg, och i dämpad grå 0.875em läste den som en
 * fotnot till datumfältet i stället för som något man kan använda.
 *
 * Fortfarande mindre än <label> ovanför — den namnger fältet, den här bara en
 * genväg till samma värde.
 */
.mhrf-kn-snabbdatum-etikett {
	display: block;
	font-size: 0.9375em;
	font-weight: 600;
	color: #000;
	margin-bottom: 6px;
}

/* Luft mellan två knapprader under samma fält, så "Kommande helger" och
   "Bläddra i dagar" inte läses som en enda lång rad knappar. */
.mhrf-kn-snabbdatum + .mhrf-kn-snabbdatum {
	margin-top: 14px;
}

.mhrf-kn-snabbdatum-knappar {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.mhrf-kn-snabbdatum-knapp {
	/* Minsta träffyta: 34px är under WCAG:s 44px-rekommendation, men knappen
	   är ett genvägsalternativ — datumfältet ovanför är den fullstora vägen
	   till samma värde, och den fungerar med både tangentbord och pekskärm. */
	min-width: 38px;
	padding: 6px 10px;
	font-size: 0.875em;
	line-height: 1;
	cursor: pointer;
	color: var(--blue-primary, #15529f);
	background: #fff;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
}

/* ---------- Genvägsknapparnas två lägen ----------
 *
 * BARA hovrad eller ohovrad. Ingen fokusregel.
 *
 * Tidigare blandade sig tre källor i knappens utseende: pluginets grundregel,
 * GeneratePress `button:hover`/`button:focus` inline i <head>, och en egen
 * fokusregel. Resultatet var att knappen bytte textfärg i samma ögonblick man
 * klickade — från GP:s #222 till pluginets blå — fast pekaren låg kvar. Och
 * en knapp man tryckt på blev liggande fylld tills man klickade någon
 * annanstans, vilket såg ut som ett valt läge.
 *
 * Därför slår de här två reglerna fast BÅDE färg och bakgrund i båda lägena,
 * med !important. Då finns det ingenting kvar för GP att ändra, och klicket
 * påverkar ingenting alls — bara muspekarens position gör det.
 *
 * :not(.is-vald) lämnar det verkliga valläget ifred; det är en egen sak och
 * har sin regel ovan.
 */

.mhrf-kn-snabbdatum-knapp:not(.is-vald):not(:hover) {
	color: var(--blue-primary, #15529f) !important;
	background: #fff !important;
	border-color: var(--blue-primary--trans-40, #afc4e1) !important;
}

.mhrf-kn-snabbdatum-knapp:not(.is-vald):not(:disabled):hover {
	color: var(--blue-primary, #15529f) !important;
	background: var(--blue-secondary, #ebf1f8) !important;
	border-color: var(--blue-primary, #15529f) !important;
}


/* Vald: fylld, så att den gäller syns utan att man jämför med datumfältet.
   !important av samma skäl som lägesreglerna nedan — GP:s button:hover och
   button:focus ska inte kunna blek(n)a det valda datumet. */
.mhrf-kn-snabbdatum-knapp.is-vald {
	color: #fff !important;
	background: var(--blue-primary, #15529f) !important;
	border-color: var(--blue-primary, #15529f) !important;
}

/*
 * Avstängd tills startdatumet är ifyllt — knapparna har inget att räkna från.
 * Dämpade och inte dolda: att de finns är information, och en knapprad som
 * dyker upp ur tomma intet när man fyller i fältet ovanför flyttar dessutom
 * resten av formuläret.
 */
.mhrf-kn-snabbdatum-knapp:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/*
 * Helgknapparna bär ett datum ("lör 20 sep"), inte ett ental. De behöver
 * därför ingen min-width att fyllas ut till — texten sätter bredden.
 */
.mhrf-kn-snabbdatum-knapp--datum {
	min-width: 0;
}

/* Stegknapparna trycks upprepade gånger. Större träffyta än de andra
   genvägarna, som man trycker en gång och sedan lämnar. */
.mhrf-kn-snabbdatum-knapp--steg {
	min-width: 48px;
	padding: 8px 12px;
	font-weight: 600;
}

/* ---------- Teckenräknare ----------
 *
 * Sitter under sitt fält och väger mindre än hjälptexterna: siffran är en
 * avstämning man tittar på när man redan skriver, inte en instruktion man
 * läser innan.
 */

.mhrf-kn-raknare {
	display: block;
	margin-top: 6px;
	font-size: 0.875em;
	color: var(--gray-primary, #435b79);
	font-variant-numeric: tabular-nums;
}

/* Nära gränsen. Samma gula som övriga varningar i pluginet — det är inget fel
   ännu, fältet tar bara slut snart. */
.mhrf-kn-raknare.is-nara {
	color: #8a6100;
	font-weight: 600;
}

/* Fullbred knapp. Används i steg 1, där den avslutar ett helt kort formulär
   och därför får bära hela bredden. */
.mhrf-kn-knapp-bred {
	display: block;
	width: 100%;
}

/*
 * "Fortsätt" — steg 1:s enda knapp och sidans första riktiga åtgärd, så den
 * får bära mer tyngd än temats standardknapp.
 *
 * !important: GeneratePress genererar knappstilar inline i <head> med
 * `.button, button, input[type="submit"]`, och den träffar knappen med samma
 * specificitet men senare i kaskaden. Utan det slår GP:s padding och
 * font-size tillbaka.
 */
.mhrf-kn-auth-submit {
	padding: 14px 6px !important;
	font-size: 20px !important;
	border-radius: 50vmax !important;
}

@media (max-width: 600px) {
	.mhrf-kn-rad-80,
	.mhrf-kn-rad-20 {
		flex-basis: 100%;
	}
}

/* Fullbred knapp. width räcker inte — Bootstraps .btn är inline-block. */
.mhrf-kn-fullbred {
	display: block;
	width: 100%;
	text-align: center;
}

/* Skicka in-knappen. !important behövs för padding och radie: Bootstraps .btn
   sätter båda, och den ligger senare i kaskaden än pluginets CSS. */
.mhrf-kn-submit {
	margin: 40px 0 !important;
	padding: 15px !important;
	font-size: 20px !important;
	border-radius: 50vmax !important;
}

/* ---------- Blockbyggaren ---------- */

/* Samma skäl som .mhrf-kn-publikkontakt: inget block-i-blocket. */
.mhrf-kn-byggare {
	margin: 0 0 24px;
	padding-top: 72px;
	border-top: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-block-lista {
	margin: 14px 0;
}

.mhrf-kn-block-tomt {
	margin: 0;
	padding: 18px;
	text-align: center;
	color: var(--gray-primary, #435b79);
	border: 1px dashed var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
	background: #fff;
}

/* Två kolumner: innehåll till vänster, flyttstapel längs högerkanten. */
.mhrf-kn-block {
	display: flex;
	align-items: stretch;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
	background: #fff;
	margin-bottom: 12px;
	overflow: hidden;
	/*
	 * Övergången som får blocken att glida i stället för att hoppa när man
	 * flyttar dem. Startläget sätts av animeraFlytt() i JS — den här raden
	 * bestämmer bara hur resan ser ut.
	 *
	 * transform och background, aldrig top eller margin: de två första kan
	 * webbläsaren animera utan att räkna om layouten, och blocken kan vara
	 * höga med bilder i sig.
	 *
	 * Kurvan startar snabbt och bromsar in. Ett block som glider linjärt ser
	 * ut att slira; ett som bromsar ser ut att landa.
	 */
	transition: transform 260ms cubic-bezier(0.2, 0, 0.2, 1),
		background-color 260ms ease;
}

/*
 * Blocket man just flyttade. Rörelsen ensam räcker inte när tre likadana
 * block står under varandra — markeringen svarar på "vilket var mitt?".
 *
 * Gult och kort: MHRF:s signalfärg, borta innan man hunnit uppfatta den som
 * ett tillstånd. Klassen tas av i JS efter 700 ms.
 */
.mhrf-kn-block.is-flyttad {
	background: var(--yellow-primary--trans-10, #fff9e6);
}

/*
 * Ingen rörelse för den som bett om att slippa den. JS hoppar över själva
 * animationen, men övergången måste bort här också — annars glider blocket
 * ändå när is-flyttad tas av.
 */
@media (prefers-reduced-motion: reduce) {
	.mhrf-kn-block {
		transition: none;
	}
}

.mhrf-kn-block-innehall {
	flex: 1 1 auto;
	/* min-width: 0 krävs — utan den vägrar flex-item:et krympa under sitt
	   innehålls minimibredd, och breda textareor spränger blocket. */
	min-width: 0;
}

/* Flyttstapeln. Knapparna delar blockets höjd lika, så de blir stora mål
   oavsett hur högt blocket är. */
.mhrf-kn-block-flytta {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	border-left: 1px solid var(--blue-primary--trans-40, #afc4e1);
	background: var(--blue-secondary, #ebf1f8);
}

/* Stapelns knappar har ingen egen ram eller radie — de ärver stapelns.
   !important behövs för att slå de generella fokusreglerna längre upp, som
   själva är !important för att kunna slå sidans inline-regel. */
.mhrf-kn-block-flytta .mhrf-kn-block-knapp,
.mhrf-kn-block-flytta .mhrf-kn-block-knapp:focus,
.mhrf-kn-block-flytta .mhrf-kn-block-knapp:focus-visible {
	width: 52px;
	height: auto;
	flex: 1 1 0;
	font-size: 22px;
	font-weight: 700;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--gray-primary, #435b79) !important;
}

.mhrf-kn-block-flytta .mhrf-kn-block-knapp:hover:not([disabled]) {
	background: var(--yellow-primary, #ffc400) !important;
	color: #000 !important;
}

/* Skiljelinje mellan upp och ner. */
.mhrf-kn-block-flytta .mhrf-kn-block-knapp + .mhrf-kn-block-knapp {
	border-top: 1px solid var(--blue-primary--trans-40, #afc4e1) !important;
}

.mhrf-kn-block--galleri {
	border-left: 3px solid var(--blue-primary, #15529f);
}

.mhrf-kn-block-huvud {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	background: var(--blue-secondary, #ebf1f8);
	border-bottom: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-block-typ {
	font-size: 0.8125em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #000;
}

.mhrf-kn-block-verktyg {
	display: flex;
	align-items: center;
	gap: 6px;
}

.mhrf-kn-block-knapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
	background: #fff;
	color: inherit;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

/* Ta bort har text, inte en ikon — auto bredd. */
.mhrf-kn-block-knapp--fara {
	width: auto;
	height: 30px;
	padding: 0 12px;
	font-size: 0.8125em;
	white-space: nowrap;
}

/* Armerat läge efter första klicket. Fylld röd, så det är otvetydigt att nästa
   klick tar bort — inte bara en färgskiftning. */
.mhrf-kn-block-knapp--fara.is-bekrafta,
.mhrf-kn-block-knapp--fara.is-bekrafta:hover:not([disabled]) {
	background: var(--mhrf-kn-fara) !important;
	border-color: var(--mhrf-kn-fara) !important;
	color: #fff !important;
	font-weight: 700;
}

.mhrf-kn-block-knapp:hover:not([disabled]) {
	background: var(--yellow-primary, #ffc400) !important;
	border-color: var(--yellow-primary, #ffc400) !important;
	color: #000 !important;
}

.mhrf-kn-block-knapp[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.mhrf-kn-block-knapp--fara:hover:not([disabled]) {
	border-color: var(--mhrf-kn-fara) !important;
	color: var(--mhrf-kn-fara) !important;
	background: #fdf0f0 !important;
}

.mhrf-kn-block-kropp {
	padding: 12px;
}

.mhrf-kn-block-kropp textarea,
.mhrf-kn-block-kropp input[type="text"],
.mhrf-kn-block-kropp input[type="file"] {
	width: 100%;
	max-width: 100%;
}

/* Bildtexten ligger också i blockkroppen men ska följa sin bildruta, inte
   sträcka sig över hela blocket som regeln ovan säger. */
.mhrf-kn-block-kropp .mhrf-kn-bildtext {
	width: 100%;
}

.mhrf-kn-block-rubrikfalt {
	font-weight: 600;
	font-size: 1.0625em;
}

/*
 * Listblockets fält: en <ul> med ett textfält per punkt.
 *
 * Punkten framför raden är listans egen markör och inte ett tecken i texten,
 * så editorn ser ut som det publicerade inlägget. list-style och padding sätts
 * explicit — både GeneratePress och Bootstrap nollställer listor, och vilken av
 * dem som vinner ska inte avgöra om punkterna syns.
 */
.mhrf-kn-punktfalt {
	margin: 0;
	padding-left: 1.6em;
	list-style: disc;
}

.mhrf-kn-punkt {
	margin: 0 0 6px;
}

.mhrf-kn-punkt:last-child {
	margin-bottom: 0;
}

.mhrf-kn-punkt::marker {
	color: var(--blue-primary, #15529f);
}

.mhrf-kn-block-kropp .mhrf-kn-punkt-falt {
	width: 100%;
	max-width: 100%;
}

.mhrf-kn-block-kropp .mhrf-kn-hjalptext {
	margin-top: 0;
	margin-bottom: 10px;
}

/*
 * Väntenotisen: står där sektion 2 kommer att stå, så länge kontaktpersonen
 * inte är ifylld. Fullbred, centrerad och i den gula tonen — den ska läsas som
 * "här händer något när du fyllt i", inte som ännu en hjälptext under ett fält.
 *
 * Gult och inte blått: hjälptexterna äger --blue-secondary, och notisen ska
 * kunna stå intill dem utan att smälta ihop.
 */
/*
 * Blå och inte gul: rutan säger vad som återstår innan formuläret öppnar sig,
 * alltså samma sorts upplysning som sidokolumnens kort och hjälptexterna. Gult
 * är signalfärgen och drog uppmärksamhet som om något gått fel.
 */
.mhrf-kn-vantar {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 28px 24px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-m, 8px);
	font-family: var(--mhrf-kn-rubrikfont);
	font-size: 24px;
	font-weight: 600;
	text-align: center;
}

/* Följer textfärgen och krymper inte när meningen bryts på smal skärm. */
.mhrf-kn-vantar-ikon {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Mindre än sektionsrubrikerna: knapparna är ett verktygsfält inne i
   "Innehåll", inte ett eget avsnitt. */
.mhrf-kn-blockknappar-rubrik {
	margin: 24px 0 10px;
	font-size: 1.125em;
	line-height: 1.3;
}

.mhrf-kn-block-knappar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------- Blockinnehåll vid visning ---------- */

.mhrf-kn-block-rubrik {
	margin: 28px 0 10px;
	font-size: 1.375em;
}

.mhrf-kn-block-rubrik:first-child {
	margin-top: 0;
}

.mhrf-kn-block-text p:last-child {
	margin-bottom: 0;
}

/*
 * Punktlistan i ett publicerat inlägg.
 *
 * Egen klass i stället för att lita på temats <ul>: GeneratePress och
 * Bootstrap sätter båda listmarginaler, och blocket ska ha samma avstånd som
 * ett textblock oavsett vilken av dem som råkar vinna.
 *
 * 18px är samma storlek som brödtextens paragrafer (.mhrf-kn-single-text p) —
 * en lista är brödtext, inte bildtext. Ändras det ena ska det andra följa med.
 */
.mhrf-kn-block-punkter {
	margin: 0 0 1.5em;
	padding-left: 1.4em;
	list-style: disc;
	font-size: 18px;
}

.mhrf-kn-block-punkter li {
	margin-bottom: 0.4em;
}

.mhrf-kn-block-punkter li:last-child {
	margin-bottom: 0;
}

/*
 * Följer med .mhrf-kn-galleri { margin: 42px 0 }.
 *
 * Den här regeln väger (0,2,0) och slår galleriets egen (0,1,0), så ett
 * galleri som står efter ett textblock — alltså nästan alltid — tog 24px
 * härifrån och inte 42 därifrån. Ändras det ena måste det andra följa med.
 */
.mhrf-kn-block-text + .mhrf-kn-galleri,
.mhrf-kn-galleri + .mhrf-kn-block-text {
	margin-top: 42px;
}

/* ---------- Bilduppladdning ---------- */

.mhrf-kn-bilder {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

.mhrf-kn-bilder:empty {
	margin-top: 0;
}

/*
 * Miniatyr + bildtextfält som en enhet. Wrappen är flex-item i .mhrf-kn-bilder;
 * .mhrf-kn-bild behåller sina 96×96 inuti.
 */
.mhrf-kn-bildpost {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 96px;
}

/* Rutan blir bredare först när det finns ett fält att skriva i — 96px går inte
   att skriva en bildtext i. Klassen sätts av JS i stället för :has(), som inte
   finns i äldre webbläsare och målgruppen sitter inte på de nyaste. */
.mhrf-kn-bildpost--text {
	width: 190px;
}

.mhrf-kn-bildtext {
	width: 100%;
	padding: 6px 8px;
	font-size: 14px;
}

.mhrf-kn-bild {
	position: relative;
	margin: 0;
	width: 96px;
	height: 96px;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
	overflow: hidden;
	background: var(--blue-secondary, #ebf1f8);
}

.mhrf-kn-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mhrf-kn-bild.is-laddar img {
	opacity: 0.45;
}

.mhrf-kn-bild.is-fel {
	border-color: var(--mhrf-kn-fara);
}

.mhrf-kn-bild-status {
	position: absolute;
	inset: auto 0 0 0;
	padding: 3px 5px;
	font-size: 10px;
	line-height: 1.3;
	text-align: center;
	background: rgba(0, 0, 0, 0.72);
	color: #fff;
}

.mhrf-kn-bild.is-fel .mhrf-kn-bild-status {
	background: var(--mhrf-kn-fara);
}

.mhrf-kn-bild-bort {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.68);
	color: #fff;
	font-size: 15px;
	line-height: 22px;
	cursor: pointer;
}

.mhrf-kn-bild-bort:hover {
	background: var(--mhrf-kn-fara) !important;
	color: #fff !important;
}

/* ---------- Galleri på enskild nyhet ---------- */

/*
 * Höjden måste sättas här.
 *
 * Temats galleri.css ger miniatyrremsan `height: 20%`, och temablocket sätter
 * containerns pixelhöjd från ett ACF-fält. Pluginet har inget sådant fält, så
 * procenten räknades mot en container utan höjd — uppmätt blev sliderns höjd
 * 33 554 418px.
 *
 * Fasta pixlar och inte aspect-ratio: miniatyrremsan under måste ha en egen
 * känd höjd för att Swipers 20%-regel ska landa rätt.
 */
.mhrf-kn-galleri {
	margin: 42px 0;
}

.mhrf-kn-galleri .mhrf-swiper1 {
	/*
	 * 560px mot spaltens 858px är ungefär 3:2, samma format som kamerorna
	 * levererar. Vid 440px blev rutan 1,95:1 och object-fit: cover skar bort
	 * en fjärdedel av bildens höjd — folk stod med huvudet utanför.
	 */
	height: 560px;
	border-radius: var(--radius-s, 4px);
	overflow: hidden;
}

/*
 * HELA bilden ska synas, inte en beskuren del.
 *
 * Temats galleri.css har `.swiper-slide img { object-fit: cover }`, vilket
 * fyller rutan men kapar allt som inte får plats — en stående bild tappade
 * både topp och botten. contain skalar in hela motivet i stället, och de smala
 * fälten som blir över är vita mot en vit sida.
 *
 * Bara den STORA bilden. Miniatyrerna behåller cover: de är brickor i en rad
 * och ska ha samma form, inte varsin.
 *
 * Samma val som helskärmsläget redan gjorde, så bilden ser likadan ut på båda
 * ställena.
 */
.mhrf-kn-galleri .mhrf-swiper1 .swiper-slide img {
	object-fit: contain;
}

/*
 * Miniatyrraden med en pil på var sida.
 *
 * Marginalen upp ligger HÄR och inte på .mhrf-swiper2. Som flex-item i en rad
 * med align-items: center hade en margin-top på slidern förskjutit den mot
 * pilarna i stället för mot innehållet ovanför.
 */
.mhrf-kn-galleri-miniatyrer {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 10px;
}

.mhrf-kn-galleri .mhrf-swiper2 {
	height: 120px;
	/* Tar all bredd som blir över när pilarna fått sin. min-width: 0 behövs —
	   ett flex-item krymper annars inte under sitt innehåll, och slidern hade
	   tryckt ut pilarna ur raden. */
	flex: 1 1 auto;
	min-width: 0;
	/* Nollar `.swiper { margin-right: auto }` ur temats galleri.css. Med
	   flex-grow äter den ingen plats i praktiken, men en auto-marginal i en
	   flexrad är inget att lämna åt turen. */
	margin: 0;
}

/*
 * Swipers egen CSS positionerar pilarna absolut (position: absolute, top: 50%,
 * en negativ margin-top och en transform). Här står de i ett flexflöde, och
 * varje del av den positioneringen måste bort — annars hamnar de ovanpå den
 * stora bilden igen, mot närmaste positionerade förfader.
 *
 * Två klasser ger (0,2,0) och slår både Swipers och galleri.css egna (0,1,0).
 */
/*
 * VARFÖR KLASSEN STÅR TVÅ GÅNGER I SELEKTORN.
 *
 * swiper-bundle.min.css innehåller, nedbäddat under .swiper-horizontal:
 *
 *   .swiper-horizontal ~ .swiper-button-next { margin-top: calc(0px - var(--swiper-navigation-size)/2) }
 *
 * En SYSKONSELEKTOR. Miniatyrslidern får klassen .swiper-horizontal av Swiper,
 * och nästa-knappen står som syskon EFTER den — alltså matchar regeln. Den
 * väger (0,2,0), exakt lika mycket som `.mhrf-kn-galleri .swiper-button-next`,
 * och swiper-bundle laddas efter pluginets CSS. Den vann på källordning.
 *
 * UPPMÄTT I WEBBLÄSAREN på den enskilda nyheten: margin-top blev -22px på
 * NEXT men 0 på PREV, eftersom prev står FÖRE slidern i DOM:en och `~` bara
 * pekar framåt. Pilarna hamnade därmed på olika höjd, och knappen såg ut att
 * hoppa. Det var aldrig en transition.
 *
 * Dubblerad klass ger (0,3,0) och vinner utan !important. Samma grepp som
 * temats buttons.css använder mot GeneratePress.
 */
.mhrf-kn-galleri .swiper-button-prev.swiper-button-prev,
.mhrf-kn-galleri .swiper-button-next.swiper-button-next {
	/* Ur Swipers absoluta positionering och in i miniatyrradens flexflöde. */
	position: static;
	flex: 0 0 auto;
	margin: 0;
	inset: auto;
	transform: none;

	/*
	 * Kvadratiska. width + aspect-ratio i stället för width + height, så en
	 * storleksändring är EN siffra och formen inte kan glida.
	 *
	 * 50px är HELA knappen: temats `* { box-sizing: border-box }` gör att
	 * paddingen räknas in i måttet. Paddingen håller chevronen borta från
	 * kanten och skalas med storleken — ändras 50 ska 8 följa med.
	 */
	width: 50px;
	height: auto;
	aspect-ratio: 1;
	padding: 8px;

	background: var(--blue-primary, #15529f);
	color: #fff;
	transition: 0.15s ease;

	/*
	 * Temats galleri.css lägger `outline: 1px solid #ffffffcf` med
	 * outline-offset: -4px — en dekorativ innerkontur, inte en fokusmarkering.
	 * Den riktiga fokusringen sätts längst ned.
	 */
	outline: none;
}

/* Chevronen i proportion till knappen: samma förhållande som 72/28 gav. */
.mhrf-kn-galleri .swiper-button-prev::after,
.mhrf-kn-galleri .swiper-button-next::after {
	font-size: 20px;
}

/*
 * :focus står med, inte bara :focus-visible. galleri.css färgar
 * `.swiper-button-next:focus` gult, och utan den här raden blinkade knappen
 * gul vid klick.
 */
.mhrf-kn-galleri .swiper-button-prev.swiper-button-prev:hover,
.mhrf-kn-galleri .swiper-button-next.swiper-button-next:hover,
.mhrf-kn-galleri .swiper-button-prev.swiper-button-prev:focus,
.mhrf-kn-galleri .swiper-button-next.swiper-button-next:focus {
	background: var(--accent, var(--blue-primary, #15529f));
}

/*
 * Fokusringen som ersätter den borttagna konturen. Utan den hade en
 * tangentbordsanvändare inte kunnat se vilken pil som är i fokus — den gamla
 * konturen låg på alla lägen och sa ingenting om fokus, men den syntes.
 */
.mhrf-kn-galleri .swiper-button-prev.swiper-button-prev:focus-visible,
.mhrf-kn-galleri .swiper-button-next.swiper-button-next:focus-visible {
	outline: 2px solid var(--blue-primary, #15529f);
	outline-offset: 2px;
}

.mhrf-kn-galleri .mhrf-swiper2 .swiper-slide {
	border-radius: var(--radius-s, 4px);
	overflow: hidden;
	cursor: pointer;
}

/* ---- Vald miniatyr ----
 *
 * Markeras med STORLEK, inte med en kontur. Temats galleri.css ritar en 3px
 * ljusblå outline med outline-offset: -5px på den valda; den läser som en ram
 * ovanpå bilden i stället för som ett val.
 *
 * DE OVALDA KRYMPER, den valda växer inte. Miniatyrslidern är exakt lika hög
 * som en miniatyr och har overflow: hidden — en uppskalad aktiv bild hade
 * klippts av upptill och nedtill. Att krympa de övriga ger samma
 * storleksskillnad utan att något hamnar utanför.
 *
 * SKILLNADEN ÄR BARA I HÖJD, och sätts med height — inte med transform:
 * scale(). En nedskalad ruta behåller sin layoutbredd men målas smalare, så
 * den målade kanten hamnade ~15px innanför slidern. Uppmätt: gapet mellan
 * pilen och miniatyren blev 12px på den sida där den VALDA bilden låg och
 * 27px på den sida där en nedskalad låg — samma marginal i koden, olika
 * marginal på skärmen. Med height ändras bara höjden och sidkanterna ligger
 * kvar där de ska.
 *
 * Selektorerna är längre än temats med flit: temats
 * `.preview-swiper .swiper-slide.swiper-slide-thumb-active` väger (0,3,0) och
 * galleri.css laddas EFTER pluginets CSS, så en lika tung selektor hade
 * förlorat på källordning. Klassen står därför två gånger.
 */
.mhrf-kn-galleri .preview-swiper .swiper-slide,
.mhrf-kn-galleri .preview-swiper .swiper-slide:hover,
.mhrf-kn-galleri .preview-swiper .swiper-slide.swiper-slide-thumb-active {
	outline: none;
}

.mhrf-kn-galleri .preview-swiper .swiper-slide {
	height: 84%;
	align-self: center;
	/* 0.4 ur galleri.css var för svagt — miniatyrerna blev svåra att läsa som
	   bilder, inte bara som "ej vald". */
	opacity: 0.65;
	transition: height 0.15s ease, opacity 0.15s ease;
}

.mhrf-kn-galleri .preview-swiper .swiper-slide:hover,
.mhrf-kn-galleri .preview-swiper .swiper-slide.swiper-slide-thumb-active {
	height: 100%;
	opacity: 1;
}

/*
 * Miniatyrbilden ska fylla sin ruta, inte ha en egen höjd.
 *
 * Temats galleri.css har `.preview-swiper img { height: 150px }` — ett fast
 * mått som ligger EFTER `.swiper-slide img { height: 100% }` och väger lika
 * mycket (0,1,1), så det vann på källordning. Uppmätt i helskärmsläget:
 * bilden ritades 150px hög i en ruta på 84px och kapades av rutans
 * overflow: hidden — halva motivet försvann.
 */
.mhrf-kn-galleri .preview-swiper img {
	height: 100%;
}

/*
 * Miniatyrernas BREDD måste räknas som Swiper räknar den.
 *
 * Temats galleri.css har `.mySwiper .swiper-slide { width: 25% !important }`.
 * 25% tar ingen hänsyn till mellanrummen: fyra rutor à 25% plus tre gap à
 * 10px blir 30px BREDARE än slidern, så den fjärde miniatyren klipptes mitt
 * itu och det såg ut som en jättemarginal före högerpilen.
 *
 * Uppmätt: box 734px, tre hela miniatyrer, 176px tomt före pilen — medan
 * vänstersidan hade 12px. Samma marginal i koden, olika på skärmen.
 *
 * calc((100% - 30px) / 4) är exakt Swipers egen uträkning för
 * slidesPerView: 4 och spaceBetween: 10 (galleri.js). Ändras något av de två
 * talen där måste 30px och 4 följa med här.
 *
 * !important krävs för att slå temats !important. Det går inte att lösa med
 * specificitet, och galleri.css delas med temats eget galleriblock och ska
 * inte röras.
 */
.mhrf-kn-galleri .preview-swiper .swiper-slide {
	width: calc((100% - 30px) / 4) !important;
}

@media (max-width: 700px) {
	.mhrf-kn-galleri .mhrf-swiper1 {
		height: 320px;
	}

	.mhrf-kn-galleri .mhrf-swiper2 {
		height: 88px;
	}
}

.mhrf-kn-galleri-raknare {
	margin: 10px 0 0;
	text-align: center;
	color: var(--gray-primary, #435b79);
	font-size: 0.9375em;
	font-variant-numeric: tabular-nums;
}

/*
 * Två klasser: Bootstraps .btn sätter display: inline-block och väger lika
 * mycket (0,1,0), men laddas efter pluginets CSS. Utan flex gjorde gap ingen
 * nytta och ikonen låg dikt an mot texten.
 *
 * display: flex + width: fit-content + auto-marginaler centrerar knappen utan
 * att galleriet självt behöver bli en flexbox. Det försöket gjorde .mhrf-swiper1
 * till ett flex-item, och då sprang bildens beräknade bredd iväg till
 * 33 554 426px — samma 2^25-symptom som höjden hade innan.
 */
.mhrf-kn-galleri .mhrf-kn-galleri-helskarm {
	display: flex;
	align-items: center;
	gap: 8px;
	width: fit-content;
	margin: 18px auto 0;
}

/*
 * Samma ljusblå som sidokolumnen och evenemangsrutan (--blue-secondary).
 *
 * Alla lägen står med i selektorlistan. GP genererar sina knappfärger ur
 * Customizer och skriver ut dem på `button:hover` — samma regel som gjorde
 * klubbchipen svarta och gula. Här räcker specificiteten: (0,3,0) mot GP:s
 * (0,1,1), alltså inget !important.
 */
.mhrf-kn-galleri .mhrf-kn-galleri-helskarm,
.mhrf-kn-galleri .mhrf-kn-galleri-helskarm:focus {
	padding: 12px 26px;
	background: var(--blue-secondary, #ebf1f8);
	/*
	 * HELA border-deklarationen, inte bara border-color.
	 *
	 * Customizer-CSS:en har `button:focus { border: none }` (tillsammans med
	 * den blå bakgrunden). Med bara border-color här fanns 1px kvar i vila men
	 * försvann vid fokus, och knappen krympte ~3px i båda riktningarna när man
	 * klickade på den. Uppmätt: 241x52 i vila, 238x49 med fokus.
	 */
	border: 1px solid transparent;
	color: #000;
	font-size: 17px;

	/*
	 * !important på box-shadow, till skillnad från resten här.
	 *
	 * Bootstraps .btn:focus sätter en box-shadow via variabeln
	 * --bs-btn-focus-box-shadow, och GP:s genererade knappregler lägger en
	 * till. Båda är svårare att peka ut än att stänga av: skuggan har inget
	 * med den här knappen att göra i något läge.
	 */
	box-shadow: none !important;
}

.mhrf-kn-galleri .mhrf-kn-galleri-helskarm:hover,
.mhrf-kn-galleri .mhrf-kn-galleri-helskarm:focus-visible {
	/* Nästa steg i samma blå skala, inte en ny färg. */
	background: var(--blue-primary--trans-40, #afc4e1);
	color: #000;
	box-shadow: none !important;
}

.mhrf-kn-galleri-helskarm-ikon {
	width: 20px;
	height: 20px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Bara en ikon i taget. Vilken avgörs av om overlayen är öppen. */
.mhrf-kn-ikon--stang,
.mhrf-kn-galleri.is-helskarm .mhrf-kn-ikon--oppna {
	display: none;
}

.mhrf-kn-galleri.is-helskarm .mhrf-kn-ikon--stang {
	display: block;
}

/*
 * I overlayen blir knappen en ghost-knapp: genomskinlig med vit kontur, så den
 * inte konkurrerar med bilden. !important eftersom Bootstraps .btn-primary
 * sätter bakgrund och ram med högre specificitet.
 */
.mhrf-kn-galleri.is-helskarm .mhrf-kn-galleri-helskarm {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.55) !important;
	color: #fff !important;
}

.mhrf-kn-galleri.is-helskarm .mhrf-kn-galleri-helskarm:hover,
.mhrf-kn-galleri.is-helskarm .mhrf-kn-galleri-helskarm:focus-visible {
	background: rgba(255, 255, 255, 0.14) !important;
	border-color: #fff !important;
}

/*
 * Overlayläget.
 *
 * Egen overlay och inte Fullscreen API: webbläsarens helskärm döljer all
 * kringliggande UI och lämnar ingen synlig väg tillbaka. Den här ligger kvar i
 * sidan, har en stängknapp och stängs med Esc.
 *
 * INGEN flexbox på behållaren. Det försöket gjorde .mhrf-swiper1 till ett
 * flex-item, och bildens beräknade bredd sprang iväg till 33 554 426px —
 * samma 2^25-symptom som höjden hade. Höjderna sätts i stället explicit.
 */
.mhrf-kn-galleri.is-helskarm {
	position: fixed;
	inset: 0;
	z-index: 100000;
	margin: 0;
	padding: 56px 24px 24px;
	/* Ogenomskinlig. 0.94 lät sidan bakom skymta precis tillräckligt för att
	   störa — ett galleri i helskärm har ingen anledning att vara halvtransparent. */
	background: #101010;
	overflow: auto;
}

.mhrf-kn-galleri.is-helskarm .mhrf-swiper1 {
	/*
	 * 300 = räknare + miniatyrrad + helskärmsknapp + overlayns padding.
	 * Växer något av dem måste talet följa med.
	 *
	 * Uppmätt: vid 288 blev innehållet 11px högre än rutan, overlayn fick en
	 * egen rullningslist, och listen sköt allt 7px åt vänster — miniatyrraden
	 * såg ocentrerad ut fast den var centrerad i sin behållare.
	 */
	height: calc(100vh - 300px);
	border-radius: 0;
}

.mhrf-kn-galleri.is-helskarm .swiper-slide img {
	object-fit: contain;
}

/* Temats galleri.css ger varje slide `background: #fff`. I overlayen målade den
   över den mörka bakgrunden, så sidan bakom lyste igenom som vita fält. */
.mhrf-kn-galleri.is-helskarm .swiper-slide {
	background: transparent;
}

.mhrf-kn-galleri.is-helskarm .mhrf-kn-galleri-raknare {
	color: #fff;
}

.mhrf-kn-galleri.is-helskarm .mhrf-swiper2 {
	height: 120px;
}

/*
 * Miniatyrremsan centreras och hålls smal i helskärm.
 *
 * Swiper räknar slidesPerView: 4 som en fjärdedel av behållarens BREDD. Över
 * hela en bred skärm blev varje ruta 300-600px, och eftersom bilderna är
 * små läste mellanrummen som gigantiska hål. 860px ger miniatyrer på samma
 * ~184px som på den vanliga sidan.
 */
.mhrf-kn-galleri.is-helskarm .mhrf-kn-galleri-miniatyrer {
	max-width: 860px;
	margin-inline: auto;
}

/* Stängknappen: bara synlig i overlayen. */
.mhrf-kn-galleri-stang {
	display: none;
}

.mhrf-kn-galleri.is-helskarm .mhrf-kn-galleri-stang {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 12px;
	right: 16px;
	width: 44px;
	height: 44px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50vmax !important;
	background: rgba(255, 255, 255, 0.14) !important;
	color: #fff !important;
	font-size: 30px;
	line-height: 1;
	cursor: pointer;
}

.mhrf-kn-galleri.is-helskarm .mhrf-kn-galleri-stang:hover,
.mhrf-kn-galleri.is-helskarm .mhrf-kn-galleri-stang:focus-visible {
	background: rgba(255, 255, 255, 0.28) !important;
}

/* Sidan bakom ska inte kunna scrollas medan overlayen är öppen. */
body.mhrf-kn-laser-scroll {
	overflow: hidden;
}

/* ---------- Miniatyrer i granskningsvyn ---------- */

.mhrf-kn-kort-bilder {
	margin: 16px 0;
}

.mhrf-kn-kort-bilder h4 {
	margin: 0 0 8px;
	font-size: 0.9375em;
}

.mhrf-kn-miniatyrer {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mhrf-kn-miniatyr {
	margin: 0;
	width: 90px;
}

.mhrf-kn-miniatyr img {
	width: 90px;
	height: 90px;
	object-fit: cover;
	border-radius: var(--radius-s, 4px);
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	display: block;
}

.mhrf-kn-miniatyr.is-topbild img {
	/* MHRF:s gula signalfärg markerar den utvalda bilden. */
	border-color: var(--yellow-primary, #ffc400);
	border-width: 3px;
}

.mhrf-kn-miniatyr figcaption {
	font-size: 11px;
	color: var(--gray-primary, #435b79);
	text-align: center;
	margin-top: 3px;
}

/* ---------- Galleriet i granskningsvyn ----------
 *
 * Swiper initieras inte här. swiper-bundle och temats galleri.js laddas bara
 * på en enskild klubbnyhet (mhrf_kn_enqueue_galleri), så i granskningsvyn
 * ligger alla slides staplade i .mhrf-swiper1 — som är 560px hög med
 * overflow: hidden. Resultatet är att bild ett syns, resten är bortklippta,
 * och miniatyrremsan lägger sig ovanpå texten under.
 *
 * Granskaren behöver inte bläddra, bara SE alla bilder. Galleriet plattas
 * därför ut till en rad småbilder. Klassen .mhrf-kn-granska bärs av alla
 * selektorer både för att väga tyngre än galleriets egna (0,3,0 mot 0,2,0)
 * och för att ingenting av det här ska nå den publika vyn.
 */

/* Räknaren, miniatyrremsan med pilarna och helskärmsknappen hör till slidern
   och har ingen uppgift när alla bilder redan ligger utlagda. */
.mhrf-kn-granska .mhrf-kn-galleri .mhrf-kn-galleri-raknare,
.mhrf-kn-granska .mhrf-kn-galleri .mhrf-kn-galleri-miniatyrer,
.mhrf-kn-granska .mhrf-kn-galleri .mhrf-kn-galleri-helskarm {
	display: none;
}

.mhrf-kn-granska .mhrf-kn-galleri {
	margin: 16px 0;
}

.mhrf-kn-granska .mhrf-kn-galleri .mhrf-swiper1 {
	height: auto;
	overflow: visible;
}

.mhrf-kn-granska .mhrf-kn-galleri .swiper-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	/* Swiper positionerar wrappern med transform. Den körs inte här, men ett
	   kvarliggande värde ska inte kunna skjuta raden ur bild. */
	transform: none;
}

.mhrf-kn-granska .mhrf-kn-galleri .swiper-slide {
	flex: 0 0 auto;
	width: auto;
	max-width: 250px;
}

/*
 * Ensam bild i ett block: samma tak som galleribilderna. Utan den här raden
 * hade ett block med en bild fyllt hela granskningskortets bredd medan ett
 * block med två stod på 250px.
 */
.mhrf-kn-granska .mhrf-kn-enkelbild {
	width: 250px;
	max-width: 100%;
}

/* width: auto och inte 100%: taket ska kapa stora bilder, inte blåsa upp små.
   Bilderna har width/height-attribut från wp_get_attachment_image, så höjden
   följer av sig själv med height: auto. */
.mhrf-kn-granska .mhrf-kn-galleri .swiper-slide img {
	display: block;
	width: auto;
	max-width: 250px;
	height: auto;
	border-radius: var(--radius-s, 4px);
}

/* ---------- Knappar ----------
 *
 * Knapparna använder temats egna Bootstrap-klasser (.btn.btn-primary,
 * .btn-secondary, .btn-danger) — samma som temats 43 befintliga knappar. Därför
 * definieras ingen egen knappstil här; det enda som behövs är laddningsindikatorn
 * och en enkel textlänk.
 *
 * .btn-primary är gul (#ffc107) med SVART text i det här temat, inte blå med
 * vit. Det är avsiktligt MHRF:s profil.
 */

.is-laddar::after {
	content: " …";
}

/* ---------- Granskningsvy ---------- */

.mhrf-kn-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-filter-lank {
	padding: 7px 14px;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: 999px;
	text-decoration: none;
	font-size: 0.9375em;
	color: inherit;
}

.mhrf-kn-filter-lank.is-aktiv {
	background: var(--blue-primary, #15529f);
	border-color: var(--blue-primary, #15529f);
	color: #fff;
}

.mhrf-kn-antal {
	display: inline-block;
	margin-left: 4px;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

.mhrf-kn-kort {
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-m, 8px);
	padding: 26px;
	margin-bottom: 24px;
	background: #fff;
}

.mhrf-kn-kort.is-atgardat {
	opacity: 0.72;
}

/* ---------- Infällbart kort ---------- */

.mhrf-kn-kort-fall {
	/* Marginalen sitter på kortet, inte här. */
	margin: 0;
}

/* summary är klickytan. list-style + ::-webkit-details-marker döljer
   browserns standardtriangel; pilen ritas i stället som ett eget element så
   den kan placeras och roteras kontrollerat. */
.mhrf-kn-kort-head {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	list-style: none;
	padding: 4px 0;
}

.mhrf-kn-kort-head::-webkit-details-marker {
	display: none;
}

.mhrf-kn-kort-head:hover .mhrf-kn-kort-rubrik {
	color: var(--blue-primary, #15529f);
}

.mhrf-kn-kort-pil {
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 6px solid currentColor;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	color: var(--gray-primary, #435b79);
	transition: transform 0.15s ease-out;
}

.mhrf-kn-kort-fall[open] .mhrf-kn-kort-pil {
	transform: rotate(90deg);
}

.mhrf-kn-kort-titelblock {
	flex: 1 1 auto;
	min-width: 0;
}

.mhrf-kn-kort-rubrik {
	display: block;
	margin: 0 0 2px;
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.3;
}

.mhrf-kn-kort-meta {
	display: block;
	margin: 0;
	font-size: 0.875em;
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-kort-kropp {
	padding-top: 16px;
	margin-top: 14px;
	border-top: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-status {
	flex-shrink: 0;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 0.8125em;
	font-weight: 600;
	white-space: nowrap;
	background: var(--blue-secondary, #ebf1f8);
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-status--publish {
	background: #e6f4ea;
	color: var(--mhrf-kn-ok);
}

.mhrf-kn-status--pending {
	background: var(--yellow-primary--trans-10, #fff9e6);
	color: var(--mhrf-kn-varning);
}

.mhrf-kn-status--trash {
	background: #fdf0f0;
	color: var(--mhrf-kn-fara);
}

.mhrf-kn-status--draft {
	background: var(--blue-secondary, #ebf1f8);
	color: var(--blue-primary, #15529f);
}

.mhrf-kn-kort-text {
	padding: 14px 16px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-s, 4px);
	margin-bottom: 28px;
}

.mhrf-kn-kort-text p:last-child {
	margin-bottom: 0;
}

/* ---------- Förhandsvisningen i granskningskortet ----------
 *
 * Samma partial som den publicerade sidan, så allt under .mhrf-kn-single-*
 * gäller här utan en enda extra regel. Det som sätts nedan är bara ramen
 * omkring och de mått som skiljer sig för att vyn ligger i ett kort i stället
 * för på en hel sida.
 *
 * Ljusblå platta, samma som kortets övriga innehållsrutor. Ramen håller isär
 * den från granskningens egna kontroller ovanför och nedanför.
 */

.mhrf-kn-kort-forhands {
	padding: 24px;
	margin-bottom: 28px;
	background: var(--blue-secondary, #ebf1f8);
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
}

/*
 * Sidokolumnen är 340px på en hel sida. Inne i ett kort — som dessutom ligger
 * i en lista med egen padding — blir det för mycket, så kolumnerna krymper och
 * faller ihop tidigare än på den publicerade sidan.
 */
.mhrf-kn-kort-forhands .mhrf-kn-single-grid {
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 32px;
}

@media (max-width: 900px) {
	.mhrf-kn-kort-forhands .mhrf-kn-single-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/*
 * Rubriken är inläggets H1 på den riktiga sidan. I kortet är den inte sidans
 * viktigaste rubrik — kortets egen titel är det — så den skalas ner till något
 * som läser som en rubrik i en förhandsvisning.
 */
.mhrf-kn-kort-forhands .mhrf-kn-single-rubrik {
	font-size: 1.75em;
}

/*
 * Evenemangsrutan och kontaktkortet bär SJÄLVA --blue-secondary. Nu när
 * behållaren har samma färg skulle de lösas upp i den och sluta läsas som
 * rutor — därför vit botten just här.
 *
 * Bara inne i förhandsvisningen: på den publicerade sidan ligger de mot vitt
 * och ska ha kvar sin ljusblå.
 */
.mhrf-kn-kort-forhands .mhrf-kn-eventinfo,
.mhrf-kn-kort-forhands .mhrf-kn-kontaktblock-kort {
	background: #fff;
}

.mhrf-kn-detaljer {
	display: grid;
	grid-template-columns: minmax(120px, auto) 1fr;
	gap: 4px 16px;
	margin: 0;
}

.mhrf-kn-detaljer dt {
	font-weight: 600;
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-detaljer dd {
	margin: 0;
	overflow-wrap: anywhere;
}

/* ---------- Kontaktpersonerna i granskningsvyn ----------
 *
 * Två kolumner: publiceringskontakten till vänster, den publika till höger.
 * Ordningen är inte godtycklig — den vänstra är obligatorisk och är den
 * granskaren faktiskt ska använda.
 *
 * align-items: stretch (default) så de två rutorna blir lika höga även när
 * den publika är tom. Olika höga rutor sida vid sida läser som att den korta
 * saknar något.
 */
/* 28px ned till "Innehåll". Samma mått som .mhrf-kn-kort-text har ned till
   noteringen och som .mhrf-kn-kort-foot har över sin linje — blocken i kortet
   ska ha samma avstånd till varandra hela vägen. */
.mhrf-kn-kontakter {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 28px 0;
}

.mhrf-kn-kontaktkol {
	padding: 14px 16px;
	border-radius: var(--radius-s, 4px);
	background: var(--blue-secondary, #ebf1f8);
}

/*
 * Ingen accentlist på den interna kolumnen. Den fanns för att peka ut vilken av
 * de två som var den viktiga, men rubrikerna säger redan det ("visas inte
 * publikt" / "visas i inlägget"), och listen gjorde bara att de två rutorna
 * började på olika x-led.
 */

.mhrf-kn-kontaktkol h4 {
	margin: 0 0 10px;
}

.mhrf-kn-kontaktkol-tom {
	margin: 0;
	color: var(--gray-primary, #435b79);
}

/* Samtycket under den publika kontakten. Mindre än uppgifterna den gäller:
   det är ett intygande om dem, inte en uppgift i sig. */
.mhrf-kn-kontaktkol-godkand {
	margin: 10px 0 0;
	font-size: 0.875em;
	line-height: 1.4;
	color: var(--gray-primary, #435b79);
}

/* Saknat intygande är inget fel — inlägget kan ha skickats in innan rutan
   fanns — men granskaren ska se det innan uppgifterna publiceras. Gul och inte
   röd: en varning, inte ett stopp. */
.mhrf-kn-kontaktkol-godkand--saknas {
	color: #8a6100;
	font-weight: 600;
}

/* En kolumn under varandra när de inte får plats bredvid varandra. */
@media (max-width: 700px) {
	.mhrf-kn-kontakter {
		grid-template-columns: minmax(0, 1fr);
	}
}

.mhrf-kn-internt h4 {
	margin: 0 0 8px;
	font-size: 0.9375em;
}

.mhrf-kn-internt-flagg {
	font-weight: 400;
	font-size: 0.8125em;
	color: var(--gray-primary, #435b79);
	font-style: italic;
}

.mhrf-kn-notering-sparad {
	padding: 10px 14px;
	background: var(--yellow-primary--trans-10, #fff9e6);
	border-radius: var(--radius-s, 4px);
	margin-bottom: 16px;
	font-size: 0.9375em;
}

/* ---------- Noteringshistorik ----------
 *
 * <ol> utan siffror: ordningen bär betydelse (äldst först är kronologin i
 * ärendet) men numren gör det inte — "3." säger ingenting om noteringen, och
 * en lista på två poster ser numrerad ut som ett formulär.
 */

/* ---------- Kuvertikon: "det här mejlas" ----------
 *
 * Sitter på noteringens etikett och på de granskningsknappar som skickar mail.
 * currentColor, så samma ikon fungerar på en vit knapp, en gul och en röd utan
 * en variant per plats.
 *
 * Ikonen renderas bara när utskicket faktiskt är påslaget — villkoret sitter i
 * mallen (mhrf_kn_mail_aktivt), inte här.
 */
.mhrf-kn-mailikon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	/* Följer med i textflödet i stället för att ligga på baslinjen, som lägger
	   kuvertet för lågt bredvid versaler. */
	vertical-align: -2px;
	margin-right: 6px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.mhrf-kn-noteringslista {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.mhrf-kn-noteringsrad + .mhrf-kn-noteringsrad {
	margin-top: 10px;
	padding-top: 10px;
	/* Skiljelinjen behövs för att två noteringar i följd annars läses som ett
	   enda stycke — texterna är ofta bara en rad var. */
	border-top: 1px solid var(--yellow-primary--trans-40, #f5e0a3);
}

.mhrf-kn-noteringsmeta {
	display: block;
	font-size: 0.8125em;
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-noteringstext {
	display: block;
	/* Radbrytningar i noteringen ska överleva: granskare skriver punktlistor. */
	white-space: pre-wrap;
}

/* ---------- Interna anteckningar ----------
 *
 * NEUTRAL bakgrund, till skillnad från noteringarnas gula. De två listorna
 * står under varandra i samma kort, och skillnaden mellan "det här har
 * klubben läst" och "det här är bara vårt" måste synas innan man börjar läsa
 * texten — inte efter.
 */

.mhrf-kn-interna-sparade {
	padding: 10px 14px;
	/* Literal och inte en variabel: temat har --blue-primary--trans-40 och
	   --trans-60, men ingen -10, och trans-40 (#afc4e1) är för mörk att läsa
	   text mot. Tonen är blue-primary uttunnad till samma ljushet som
	   noteringarnas gula ruta. */
	background: #eef3fa;
	border-radius: var(--radius-s, 4px);
	margin-bottom: 16px;
	font-size: 0.9375em;
}

.mhrf-kn-interna-sparade .mhrf-kn-noteringsrad + .mhrf-kn-noteringsrad {
	/* Skiljelinjen ärvs från noteringslistan, men i gult. Här ska den följa
	   blockets egen färg. */
	border-top-color: var(--blue-primary--trans-40, #afc4e1);
}

/* ---------- Intern MHRF-notering ---------- */

/*
 * Det interna spåret ligger sist i kortet, efter åtgärdsknapparna. Linjen
 * skiljer det från knappraden — utan den läser fältet som ännu en åtgärd i
 * samma följd, och det är precis vad det inte är.
 *
 * Linjen bärs av loggen när den syns, annars av fältet. De två är ett block,
 * och två linjer inuti det hade delat upp något som hör ihop.
 */
.mhrf-kn-falt--intern,
.mhrf-kn-interna-sparade {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-falt--intern {
	margin-bottom: 0;
}

/*
 * :not([hidden]) — blocket ligger kvar i DOM:en även när loggen är tom, och
 * utan det hade fältet tappat sin linje på varje kort som saknar anteckningar.
 */
.mhrf-kn-interna-sparade:not([hidden]) + .mhrf-kn-falt--intern {
	margin-top: 14px;
	padding-top: 0;
	border-top: 0;
}

/* Låg ruta: en intern anteckning är en rad eller två, och fältet ska inte
   väga tyngre än noteringen till klubben längre upp. */
.mhrf-kn-intern-notering {
	min-height: 0;
}

/*
 * Egen sparaknapp, så fältet inte ser ut att sparas av granskningsknapparna
 * bredvid. Raden håller knapp och kvittens på samma linje.
 */
.mhrf-kn-intern-rad {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 8px;
}

.mhrf-kn-intern-svar {
	font-size: 0.875em;
}

.mhrf-kn-intern-svar.is-ok {
	color: var(--mhrf-kn-ok);
}

.mhrf-kn-intern-svar.is-fel {
	color: var(--mhrf-kn-fara);
}

.mhrf-kn-kort-foot {
	padding-top: 28px;
	border-top: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-atgarder {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.mhrf-kn-atgarder.is-klar .mhrf-kn-atgard {
	display: none;
}

/* Samma form på alla tre knapparna.
 *
 * Temat ger pill-formen bara till .btn-secondary (buttons.css:19), medan
 * .btn-primary behåller Bootstraps 0.25rem. Utan detta får raden tre olika
 * radier — vilket är exakt vad den gjorde. Padding matchar temats egen
 * .btn-secondary så knapparna ser inhemska ut. */
.mhrf-kn-atgarder .btn {
	border-radius: 50vmax !important;
	padding: 5px 26px !important;
}

/* wp-admin-länken längst till höger, skild från åtgärdsknapparna. */
.mhrf-kn-atgard-admin {
	margin-left: auto;
}

/*
 * Kopiera länk. Står sist på raden, efter wp-admin-länken, som redan skjutits
 * dit av margin-left: auto ovan.
 *
 * Grön ram och grön text i två sekunder efter ett lyckat klick. Knapptexten
 * byter också ord ("Kopierad!"), men ett ordbyte ensamt är lätt att missa när
 * man tittar på urklippet i stället för på knappen.
 *
 * !important: temats .btn-secondary--ghost sätter outline och color med
 * (0,4,0), och det här är samma knapp i ett annat läge.
 */
.mhrf-kn-kopiera.is-kopierad {
	outline-color: var(--mhrf-kn-ok, #0a7d28) !important;
	color: var(--mhrf-kn-ok, #0a7d28) !important;
}

.mhrf-kn-kopiera {
	cursor: pointer;
}

/*
 * Det länkade kortet markeras så att den som följt länken ser VILKET kort som
 * menades. Listan kan innehålla femtio kort, och ett utfällt kort mitt i
 * högen räcker inte som utpekning.
 */
.mhrf-kn-kort.is-lankad {
	outline: 2px solid var(--blue-primary, #15529f);
	outline-offset: 3px;
}

/* Ghost-varianten har outline i stället för border, så den behöver lite luft
   för att inte klippas av flexradens gap. */
.mhrf-kn-atgarder {
	row-gap: 10px;
}

/* Avvisa/Avpublicera.
 *
 * Temat har gjort om .btn-danger till BLÅ (#366DB3, style.css:2921) och ger
 * den inte pill-formen som .btn-secondary får — därför använder markupen
 * .btn-secondary och den här modifiern i stället. Dubblerad klass för att slå
 * temats .btn-secondary.btn-secondary.btn-secondary (buttons.css:10). */
.mhrf-kn-atgard--fara.mhrf-kn-atgard--fara {
	background: var(--mhrf-kn-fara) !important;
	color: #fff !important;
	outline-color: var(--mhrf-kn-fara) !important;
}

.mhrf-kn-atgard--fara.mhrf-kn-atgard--fara:hover {
	background: #8f2426 !important;
	color: #fff !important;
	outline-color: #8f2426 !important;
}

.mhrf-kn-kort-svar {
	margin: 14px 0 0;
	padding: 10px 14px;
	border-radius: var(--radius-s, 4px);
}

.mhrf-kn-kort-svar.is-ok {
	background: #e6f4ea;
	color: var(--mhrf-kn-ok);
}

.mhrf-kn-kort-svar.is-fel {
	background: #fdf0f0;
	color: var(--mhrf-kn-fara);
}

/* ---------- Publikt flöde ---------- */

.mhrf-kn-flode-post {
	display: flex;
	gap: 20px;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-flode-post:last-child {
	border-bottom: 0;
}

.mhrf-kn-flode-bild {
	flex: 0 0 200px;
	max-width: 200px;
}

.mhrf-kn-flode-bild img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-s, 4px);
	display: block;
}

.mhrf-kn-flode-innehall {
	flex: 1 1 auto;
	min-width: 0;
}

.mhrf-kn-flode-meta {
	margin: 0 0 6px;
	font-size: 0.875em;
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-klubblank {
	font-weight: 600;
}

.mhrf-kn-flode-rubrik {
	margin: 0 0 8px;
	font-size: 1.25em;
}

.mhrf-kn-flode-utdrag {
	margin: 0 0 10px;
}

.mhrf-kn-arkivlank {
	margin-top: 8px;
	font-weight: 600;
}

.mhrf-kn-paginering {
	margin-top: 32px;
}

.mhrf-kn-paginering .page-numbers {
	display: inline-block;
	padding: 6px 12px;
	margin-right: 4px;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
	text-decoration: none;
}

.mhrf-kn-paginering .page-numbers.current {
	background: var(--blue-primary, #15529f);
	border-color: var(--blue-primary, #15529f);
	color: #fff;
}

@media (max-width: 600px) {
	.mhrf-kn-flode-post {
		flex-direction: column;
	}

	.mhrf-kn-flode-bild {
		flex-basis: auto;
		max-width: 100%;
	}

	.mhrf-kn-kort-head {
		flex-direction: column;
	}

	/* minmax(0, 1fr) av samma skäl som .mhrf-kn-single-grid nedan: bara 1fr
	   låter innehållets min-content bestämma cellens minsta bredd. */
	.mhrf-kn-detaljer {
		grid-template-columns: minmax(0, 1fr);
	}

	.mhrf-kn-detaljer dd {
		margin-bottom: 8px;
	}
}

/* ---------- Förhandsgranskning ----------
 *
 * Dialogen visar samma markup som den publicerade sidan
 * (templates/del-single-innehall.php), så allt under .mhrf-kn-single-* gäller
 * innanför den utan en enda extra regel. Det som sätts här är bara rutan
 * omkring: mått, ram och den fasta rubrikraden.
 */

.mhrf-kn-forhands {
	width: min(1100px, calc(100vw - 32px));
	max-width: none;
	/* Höjden är ett tak, inte ett mått: ett kort inlägg ska ge en kort ruta. */
	max-height: calc(100vh - 48px);
	padding: 0;
	border: 0;
	border-radius: var(--radius-s, 4px);
	/* Dialogen är sin egen rullningsbehållare, annars kan rubrikraden inte
	   ligga still när innehållet är långt. */
	overflow: hidden;
	/* display:flex bara när den är öppen — en stängd <dialog> döljs med
	   display:none, och en display-regel utan [open] slår ut det. */
	background: #fff;
	color: inherit;
}

.mhrf-kn-forhands[open] {
	display: flex;
	flex-direction: column;
}

.mhrf-kn-forhands::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

/* Rubrikraden ligger still medan innehållet rullar: stängknappen ska aldrig
   vara något man måste rulla tillbaka för att hitta. */
.mhrf-kn-forhands-huvud {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding: 14px 20px;
	border-bottom: 1px solid var(--blue-primary--trans-40, #afc4e1);
	background: var(--blue-secondary, #ebf1f8);
}

.mhrf-kn-forhands-rubrik {
	margin: 0;
	font-family: var(--mhrf-kn-rubrikfont);
	font-size: 1.125em;
	font-weight: 600;
	line-height: 1.3;
}

/* "ungefär så här" står i rubrikraden och inte som en notis i innehållet:
   förbehållet ska läsas innan man tittar, inte efteråt. */
.mhrf-kn-forhands-notis {
	display: block;
	font-family: inherit;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-forhands-kropp {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 28px 24px 32px;
}

/* Sidokolumnen blir orimligt bred i en dialog som är smalare än sidan.
   Samma brytpunkt som .mhrf-kn-single-grid använder i övrigt. */
@media (max-width: 1000px) {
	.mhrf-kn-forhands-kropp .mhrf-kn-single-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

/* Förhandsgranskningsknappen.
 *
 * SAMMA mått som .mhrf-kn-submit — de är två lika viktiga steg i samma flöde,
 * och en liten knapp ovanför en stor hade sagt att det ena är valfritt.
 *
 * Färgen bär hela skillnaden: ljusblå mot inskickets gula. Mörkblå (.btn-
 * secondary) var fel eftersom två mättade fält i rad tävlade om blicken, och
 * det får aldrig råda tvekan om vilken knapp som skickar iväg inlägget.
 *
 * !important av samma skäl som .mhrf-kn-submit: Bootstraps .btn sätter padding,
 * radie, färg OCH background-color: transparent, och ligger senare i kaskaden
 * än pluginets CSS. Utan !important på bakgrunden blir knappen genomskinlig.
 */
.mhrf-kn-forhandsgranska {
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 0 4px !important;
	padding: 15px !important;
	font-size: 20px !important;
	font-weight: 600;
	border-radius: 50vmax !important;
	color: var(--blue-primary, #15529f) !important;
	background: var(--blue-primary--trans-40, #afc4e1) !important;
	border: 0 !important;
}

.mhrf-kn-forhandsgranska:hover,
.mhrf-kn-forhandsgranska:focus {
	color: var(--blue-primary, #15529f) !important;
	background: var(--blue-primary--trans-60, #85a6d1) !important;
}

/* Ikonen följer textens färg och storlek. currentColor så den inte behöver
   sättas om när knappen byter tillstånd. */
.mhrf-kn-forhandsgranska-ikon {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Enskild nyhet ----------
 *
 * Tvåkolumn enligt designen: smal sidokolumn med bild, klubb och eventinfo,
 * bred huvudkolumn med datum, rubrik och innehåll.
 */

.mhrf-kn-single-grid {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

/*
 * minmax(0, 1fr) och inte bara 1fr — samma sak som desktopregeln ovan gör.
 *
 * Bara `1fr` betyder minmax(AUTO, 1fr), och auto som minsta bredd är cellens
 * min-content. Galleriet innehåller en Swiper som mäter sin behållare och
 * sätter slidebredden inline: en bred slide gav en bred min-content, som gav
 * en bredare cell, som gav en bredare slide. Återkopplingen slutade på
 * 33 554 432 px (2^25) per slide och en sida som var 37 miljoner pixlar bred.
 *
 * Desktop drabbades aldrig eftersom regeln där redan hade minmax(0, 1fr).
 * Felet syntes alltså bara under 900px.
 */
@media (max-width: 900px) {
	.mhrf-kn-single-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
}

/* ---- Sidokolumn ---- */

.mhrf-kn-single-bild {
	margin: 0 0 20px;
}

.mhrf-kn-single-bild img {
	width: 100%;
	height: auto;
	max-height: 670px;
	/*
	 * object-fit: cover är INTE valfritt här.
	 *
	 * Med width: 100% och height: auto räknar webbläsaren höjden ur bildens
	 * proportioner. Slår max-height till klampas höjden till 670px medan
	 * bredden ligger kvar på 100% — och en <img> utan object-fit sträcker då
	 * ut pixlarna. En stående klubbild blev hoptryckt i stället för beskuren.
	 *
	 * cover och inte contain: contain hade lämnat tomma fält över och under
	 * bilden i stället för att fylla rutan.
	 */
	object-fit: cover;
	border-radius: var(--radius-s, 4px);
	display: block;
}

.mhrf-kn-single-klubb {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.mhrf-kn-single-logo {
	flex: 0 0 auto;
	/* max- i stället för fast width/height: rutan tar logotypens EGNA
	   proportioner och 52px blir ett tak, inte ett mått. En bred logotyp
	   blir 52px bred och låg, en hög blir 52px hög och smal. Med fast
	   kvadrat skalades små logotyper dessutom upp till 52px och blev
	   suddiga — nu ritas de i sin egen storlek.
	   width/height: auto krävs för att slå ev. width/height-attribut i
	   markupen; de mappas till CSS width/height och skulle annars vinna
	   över max-*. */
	max-width: 52px;
	max-height: 52px;
	width: auto;
	height: auto;
	/* Skyddsnät om rutan ändå blir styrd någon annanstans ifrån: contain,
	   inte cover — klubbloggor får inte beskäras.
	   border-radius: 50% är borttagen: den gjorde en cirkel av en kvadrat,
	   men på en oproportionerlig ruta blir den en ellips som skär hörnen
	   av logotypen. */
	object-fit: contain;
	background: #fff;
}

.mhrf-kn-single-klubbnamn {
	font-weight: 600;
	line-height: 1.3;
}

/*
 * Bara placering. Länkens utseende kommer från temats .mhrf-lank i
 * assets/css/global/lankar.css — den gamla regeln
 * `.mhrf-kn-single-klubblank a { text-decoration: underline }` vägde (0,1,1)
 * och slog komponentens (0,1,0), så understrykningen låg kvar i viloläge.
 */
.mhrf-kn-single-klubblank {
	margin: 0 0 32px;
}

/* ---- Info om evenemanget ---- */

.mhrf-kn-eventinfo {
	margin: 0;
	padding: 20px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-s, 4px);
}

.mhrf-kn-eventinfo-rubrik {
	margin: 0 0 14px;
	font-size: 1.0625em;
}

.mhrf-kn-eventinfo-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mhrf-kn-eventinfo-lista li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
}

.mhrf-kn-eventinfo-lista li:last-child {
	margin-bottom: 0;
}

.mhrf-kn-eventinfo-lank {
	margin-top: 16px !important;
}

.mhrf-kn-eventinfo-lank a {
	text-decoration: underline;
}

.mhrf-kn-ikon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 3px;
	fill: none;
	stroke: var(--blue-primary, #15529f);
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---- Huvudkolumn ---- */

.mhrf-kn-single-datum {
	margin: 0 0 10px;
	font-family: var(--mhrf-kn-rubrikfont);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--blue-primary, #15529f);
}

/*
 * 25px ned till nästa element, vare sig det är ingressen eller brödtexten.
 * Marginalen sitter på rubriken och inte på det som följer, så avståndet blir
 * detsamma oavsett om ingressen finns eller inte.
 */
h1.mhrf-kn-single-rubrik {
	/* Elementet i selektorn är nödvändigt: GP har `.entry-title
	   { margin-bottom: 0 }` som väger lika mycket (0,1,0) och laddas senare.
	   h1 + klass ger (0,1,1) och vinner. */
	margin: 0 0 25px;
	line-height: 1.15;
}

.mhrf-kn-single-text > *:last-child {
	margin-bottom: 0;
}

/*
 * Brödtexten: 18px, en tick större än temats 16.
 *
 * Huvudkolumnen är bred (grid: 340px + resten) och 16px blir tunn i den.
 * Rubrikerna i brödtexten ligger på 20px, så steget mellan dem och texten
 * finns kvar — ändras det ena bör det andra ses över.
 */
.mhrf-kn-single-text p {
	font-size: 18px;
}

/* Ingressen: en ton tyngre och större än brödtexten, men klart mindre än
   rubriken. Ligger direkt under H1 och renderas bara om den fyllts i. */
.mhrf-kn-single-ingress {
	margin: 0 0 20px;
	/* Ingen egen toppmarginal — rubrikens 25px är avståndet. */
	font-size: 20px;
	font-weight: 600;
	line-height: 1.45;
}

/*
 * Rubriker i brödtexten.
 *
 * Alla nivåer får samma storlek och vikt. Klubbarna skriver texten själva och
 * väljer rubriknivå ganska godtyckligt — en h2 och en h3 i samma artikel ska
 * inte se olika stora ut när de i praktiken används likvärdigt. Nivån har
 * fortfarande betydelse för skärmläsare och innehållsförteckningar.
 *
 * Sans, inte temats serif: brödtextrubrikerna ska skilja sig från artikelns
 * egen H1 och från sidans övriga rubriker.
 */
.mhrf-kn-single-text h2,
.mhrf-kn-single-text h3,
.mhrf-kn-single-text h4,
.mhrf-kn-single-text h5,
.mhrf-kn-single-text h6 {
	margin: 28px 0 10px;
	font-family: var(--mhrf-kn-rubrikfont);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.35;
}

.mhrf-kn-single-text > :first-child {
	margin-top: 0;
}

/* ---- Publik kontaktperson ----
 *
 * Rubriken ligger UTANFÖR boxen, till skillnad från eventinfon. Den ärver
 * temats rubrikfont (serif) — därför ingen rubrikfont-override här.
 */

.mhrf-kn-kontaktblock {
	margin: 40px 0 0;
	max-width: 420px;
}

.mhrf-kn-kontaktblock-rubrik {
	margin: 0 0 14px;
	font-size: 1.5em;
}

.mhrf-kn-kontaktblock-kort {
	padding: 20px 24px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-s, 4px);
}

.mhrf-kn-kontaktblock-namn {
	margin: 0 0 6px;
	font-weight: 700;
}

.mhrf-kn-kontaktblock-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mhrf-kn-kontaktblock-lista li {
	margin: 0;
}

/* ---------- Länklistan (admin-shortcode) ---------- */

.mhrf-kn-lankar-summering {
	padding: 12px 16px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-s, 4px);
}

.mhrf-kn-tabell {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375em;
}

.mhrf-kn-tabell th,
.mhrf-kn-tabell td {
	padding: 8px 10px;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	text-align: left;
	vertical-align: top;
}

.mhrf-kn-tabell thead th {
	background: var(--blue-secondary, #ebf1f8);
}

.mhrf-kn-lank-falt {
	width: 100%;
	font-size: 0.8125em;
	font-family: monospace;
}

/* Avdelare mellan aktiva och inaktiva klubbar. */
.mhrf-kn-tabell-avdelare td {
	background: var(--blue-secondary, #ebf1f8);
	font-weight: 700;
	font-size: 0.8125em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--gray-primary, #435b79);
}

/* ---------- Lösenord med ögonknapp ---------- */

.mhrf-kn-pw {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.mhrf-kn-pw-varde {
	font-family: monospace;
	/* Reserverar bredden så raden inte hoppar när lösenordet visas. */
	min-width: 9ch;
	letter-spacing: 0.06em;
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-pw-varde.is-visad {
	color: inherit;
	letter-spacing: 0;
	user-select: all;
}

/* Delad stil för alla små ikonknappar: ögat och de två kopieringsknapparna. */
.mhrf-kn-ikonknapp {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
	background: #fff;
	color: var(--gray-primary, #435b79);
	cursor: pointer;
}

.mhrf-kn-ikonknapp svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Gult med svart ikon — samma relation som temats .btn-primary. */
.mhrf-kn-ikonknapp:hover:not([disabled]) {
	background: var(--yellow-primary, #ffc400) !important;
	border-color: var(--yellow-primary, #ffc400) !important;
	color: #000 !important;
}

.mhrf-kn-ikonknapp[disabled] {
	opacity: 0.5;
	cursor: progress;
}

.mhrf-kn-knappgrupp {
	display: inline-flex;
	gap: 4px;
	flex: 0 0 auto;
}

/* "Kopierad"-bekräftelsen ritas som ett pseudoelement på knappen själv, inte
   som ett insatt syskon.

   Skälet: knapparna ligger i flexcontainrar, och ett absolut positionerat
   syskon till en flex-child ankras enligt spec till FLEXCONTAINERNS hörn — inte
   till platsen efter knappen. Knappen har position: relative, så ett
   pseudoelement på den får rätt ankare garanterat, utan DOM-ändringar och utan
   att tabellen hoppar i bredd.

   Ankrad åt vänster (right: 100%) så den växer inåt i tabellen och inte utanför
   högerkanten i sista kolumnen. */
.mhrf-kn-ikonknapp.is-kopierad::after {
	content: "Kopierad";
	position: absolute;
	right: calc(100% + 6px);
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	padding: 3px 9px;
	border-radius: var(--radius-s, 4px);
	background: var(--blue-primary, #15529f);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	pointer-events: none;
}

/* Länkcellen: fältet växer, knappen håller sin storlek. */
.mhrf-kn-lank-cell {
	display: flex;
	align-items: center;
	gap: 6px;
}

/* Visat läge: ögat får ett streck över sig, ritat med ett pseudoelement
   istället för en andra ikon. */
/* Måste vara !important: fokusregeln ovan är det, och knappen är fokuserad
   direkt efter klicket som visade lösenordet. */
.mhrf-kn-oga.is-visad {
	border-color: var(--blue-primary, #15529f) !important;
	color: var(--blue-primary, #15529f) !important;
}

.mhrf-kn-oga.is-visad::after {
	content: "";
	position: absolute;
	left: 4px;
	right: 4px;
	top: 50%;
	height: 2px;
	background: currentColor;
	transform: rotate(-45deg);
	border-radius: 2px;
}

.mhrf-kn-flagg {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.8125em;
	font-weight: 600;
	white-space: nowrap;
}

.mhrf-kn-flagg--ok {
	background: #e6f4ea;
	color: var(--mhrf-kn-ok);
}

.mhrf-kn-flagg--av {
	background: var(--blue-secondary, #ebf1f8);
	color: var(--gray-primary, #435b79);
}

/* ==========================================================================
 * Tvåkolumnsflödet: "Evenemang" | "Nyheter"
 *
 * Samma regler används på startsidan, klubbsidan och längst ned på en enskild
 * nyhet. Kolumnbredden styrs av flödet, inte av var det sitter — därför inga
 * platsspecifika undantag här.
 * ========================================================================== */

/* ---------- "Publicera för klubb" bredvid sidrubriken ----------
 *
 * Knappen skrivs in i temats <header class="entry-header"> av
 * mhrf_kn_flode_publicera_knapp() i includes/views.php. :has() i stället för
 * en body-klass: regeln gäller där knappen faktiskt finns, oavsett vad
 * sidmallen råkar heta.
 *
 * flex-wrap: på smal skärm får H1:an hela raden och knappen hamnar under.
 */
.entry-header:has(> .mhrf-kn-flode-publicera) {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

/* .btn i selektorn: Bootstraps `.btn { display: inline-block }` väger
   (0,1,0) som en ensam klass och kan laddas efter pluginet. */
.btn.mhrf-kn-flode-publicera {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
	white-space: nowrap;
}

.mhrf-kn-flode-publicera-ikon {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ---------- Klubbfiltret ovanför flödet ----------
 *
 * Fritextfält med träfflista och valda klubbar som chips. Markupen ligger i
 * templates/del-flode-sok.php och renderas bara när flödet får visa_sok.
 *
 * Bredden följer intro-spalten i temats block "MHRF Klubbintro" (600px) i
 * stället för flödets fulla bredd. Ett sökfält över hela sidbredden läser som
 * en sidsökning, inte som ett filter på det som står under.
 *
 * VÄNSTERSTÄLLT här, centrerat i blocket. På flödessidan börjar
 * kolumnrubrikerna vid vänsterkanten, och en centrerad 600px-ruta ovanför dem
 * hade stått omotiverat i mitten. Centreringen hör till blockets layout och
 * ligger därför i temats klubbintro.css, inte här.
 */

.mhrf-kn-flodesok {
	max-width: 600px;
	margin: 0 0 48px;
}

/*
 * Bara fetstil. Ingen egen storlek, färg eller versalisering — etiketten ska
 * läsa som fet brödtext, inte som formulärets .mhrf-kn-falt-rubrik.
 */
.mhrf-kn-flodesok-rubrik {
	display: block;
	margin-bottom: 8px;
	font-weight: 700;
}

/* Ankaret för både sökikonen och träfflistan. */
.mhrf-kn-flodesok-falt {
	position: relative;
}

/*
 * TVÅ KLASSER, inte en. Sajtens inline-genererade GP-stilmall har regler på
 * `input[type="text"]` för ram, radie och bakgrund — (0,1,1), alltså mer än en
 * ensam klassselektors (0,1,0). Med bara .mhrf-kn-flodesok-input slog GP:s
 * ljusgrå ram och sin egen radie igenom.
 *
 * Samma grepp som temats `.klubbfilter .klubbfilter-falt`, som löste exakt
 * samma krock på medlemsklubbssidan.
 */
.mhrf-kn-flodesok .mhrf-kn-flodesok-input {
	width: 100%;
	/* Höger padding lämnar plats åt ikonen. */
	padding: 12px 48px 12px 16px;
	border: 1px solid var(--blue-primary, #15529f);
	border-radius: var(--radius-s, 4px);
	background: #fff;
}

/*
 * Fokusramen behåller den blå färgen. GP:s `input[type="text"]:focus` sätter
 * form_border_color_focus (var(--contrast-3), en grå) och väger (0,2,1) —
 * samma tyngd som selektorn ovan med :focus tillagt. En jämn strid avgörs av
 * laddningsordningen, och den vill jag inte att färgen ska hänga på.
 */
.mhrf-kn-flodesok .mhrf-kn-flodesok-input:focus {
	border-color: var(--blue-primary, #15529f) !important;
}

/*
 * opacity: 1 är inte överflödig. Firefox ritar placeholder med nedsatt
 * opacitet som standard, så enbart color hade gett en grå text ändå.
 */
.mhrf-kn-flodesok .mhrf-kn-flodesok-input::placeholder {
	color: #000;
	opacity: 1;
}

/*
 * pointer-events: none — ikonen ligger ovanpå fältets högra padding, och ett
 * klick där ska sätta markören i fältet som på resten av rutan.
 */
.mhrf-kn-flodesok-ikon {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	color: #000;
	pointer-events: none;
}

/*
 * Träfflistan svävar över innehållet under. z-index kräver en position, och
 * utan den hade flödets kort ritats ovanpå listan.
 */
.mhrf-kn-flodesok-traffar {
	position: absolute;
	z-index: 5;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	max-height: 320px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1);
	border-radius: var(--radius-s, 4px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.mhrf-kn-flodesok-traff {
	padding: 10px 16px;
	cursor: pointer;
}

/*
 * Tangentbordsmarkeringen och muspekaren ger SAMMA utseende. Två olika
 * markeringar samtidigt (en hovrad och en piltangentrad) läser som två
 * markörer.
 */
.mhrf-kn-flodesok-traff:hover,
.mhrf-kn-flodesok-traff--aktiv {
	background: var(--blue-secondary, #ebf1f8);
}

.mhrf-kn-flodesok-status {
	margin-top: 12px;
	margin-bottom: 0;
}

/*
 * Sist i blocket, under chipen den handlar om.
 *
 * Mörkblå kantlist i stället för .mhrf-kn-notis ljusblå. Den här notisen står
 * samtidigt som kolumnernas två, och ska gå att skilja från dem utan att en ny
 * färg introduceras — det är samma blå som allt annat i filtret.
 */
.mhrf-kn-flodesok-tom {
	margin-top: 16px;
	margin-bottom: 0;
	border-left-color: var(--blue-primary, #15529f);
}

/*
 * Chipen och rensa-knappen på samma rad. Knappen står sist och flyttar ned
 * först när chipen inte får plats, i stället för att ligga på en egen rad även
 * när det bara finns ett chip.
 */
.mhrf-kn-flodesok-valdarad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: 12px;
}

.mhrf-kn-flodesok-valda {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Samma skäl till !important som på chipet: GP:s genererade button-regler
 * sätter gul botten och svart text på hover och väger (0,1,1), mer än en
 * ensam klass. Utan dem blev "Rensa" en gul knapp vid hover.
 */
.mhrf-kn-flodesok-rensa,
.mhrf-kn-flodesok-rensa:hover,
.mhrf-kn-flodesok-rensa:focus,
.mhrf-kn-flodesok-rensa:focus-visible {
	background: transparent !important;
	color: var(--blue-primary, #15529f) !important;
	box-shadow: none !important;
}

.mhrf-kn-flodesok-rensa {
	padding: 0;
	border: 0;
	font-size: 0.9375em;
	line-height: 1.3;
	/* Understrykningen finns alltid — den ÄR affordansen. Knappen har varken
	   ram eller botten och skulle annars läsa som en etikett. */
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/*
 * Chipet ÄR knappen som tar bort klubben — inte en etikett med ett kryss
 * bredvid. Hela ytan är klickbar, vilket är lättare att träffa än ett kryss på
 * 12px, och den är fokuserbar med tangentbord utan extra kod.
 */
.mhrf-kn-flodesok-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	border: 0;
	border-radius: 50vmax;
	font-size: 0.9375em;
	line-height: 1.3;
	cursor: pointer;
	/* Färgerna sätts i regeln nedan, inte här — se kommentaren där. */
}

/*
 * BÅDE bakgrund och textfärg, i BÅDA lägena, med !important.
 *
 * GP genererar sina knappfärger ur Customizer och skriver ut dem som en
 * inline-regel i <head>. Sajtens inställning är gul botten med svart text på
 * button:hover — chipen blev först svarta i texten, sedan gula i botten när
 * bakgrunden också sattes utan tillräcklig tyngd. Regeln väger (0,1,1) mot en
 * klassselektors (0,1,0), och den är genererad: att matcha den med
 * specificitet skulle kräva en selektor som ingen kan läsa och som slutar
 * gälla så fort någon rör en inställning i Customizer.
 *
 * Chipet byter INTE färg vid hover. Minustecknet är hover-indikatorn (se
 * längre ned), och två samtidiga signaler för samma sak läser som två olika
 * saker.
 */
.mhrf-kn-flodesok-chip,
.mhrf-kn-flodesok-chip:hover,
.mhrf-kn-flodesok-chip:focus,
.mhrf-kn-flodesok-chip:focus-visible {
	background: var(--accent, var(--blue-primary, #15529f)) !important;
	color: #fff !important;
}

/*
 * Kryss i viloläge, minus vid hover och tangentbordsfokus.
 *
 * SVG OCH INTE TECKNEN ✕ och −. Med textglyfer bestämmer fontens metrik var
 * tecknet hamnar i sin rad, och ✕ ritas kring em-boxens mitt medan etiketten
 * sitter på sin baslinje. Resultatet var ett kryss som stod synligt högre än
 * texten bredvid, som inte gick att rätta utan en gissad pixelnudge.
 *
 * En 12x12-SVG med display: block har exakt den höjd den säger. Chipets
 * align-items: center centrerar då rutan mot textraden, och det stämmer i
 * varje font.
 *
 * Båda ikonerna ligger i SAMMA rutnätscell (grid-area: 1 / 1) och växlas med
 * opacity. Cellen är 12x12 oavsett vilken som syns — med display: none eller
 * en utbytt nod hade chipet ändrat bredd i samma stund som musen nådde det och
 * puffat undan chipen efter sig på raden.
 */
.mhrf-kn-flodesok-ikon-vaxel {
	display: inline-grid;
}

.mhrf-kn-flodesok-ikon-vaxel svg {
	grid-area: 1 / 1;
	display: block;
	transition: opacity 0.15s ease;
}

.mhrf-kn-flodesok-ikon-minus {
	opacity: 0;
}

.mhrf-kn-flodesok-chip:hover .mhrf-kn-flodesok-ikon-kryss,
.mhrf-kn-flodesok-chip:focus-visible .mhrf-kn-flodesok-ikon-kryss {
	opacity: 0;
}

.mhrf-kn-flodesok-chip:hover .mhrf-kn-flodesok-ikon-minus,
.mhrf-kn-flodesok-chip:focus-visible .mhrf-kn-flodesok-ikon-minus {
	opacity: 1;
}

/*
 * hidden på flödet måste väga mer än .mhrf-kn-flode2 { display: grid }.
 * Webbläsarens egen `[hidden] { display: none }` väger (0,1,0) och förlorar
 * mot vilken författarregel som helst med samma tyngd — utan den här raden
 * hade klubbfiltrets "dölj flödet" inte gjort någonting alls.
 */
.mhrf-kn-flode2[hidden] {
	display: none;
}

.mhrf-kn-flode2 {
	display: grid;
	gap: 64px;
	align-items: start;
	/*
	 * Luft ned till sidfoten. "Visa allt"-raden gav den tidigare; nu när den är
	 * borttagen slutade flödet tvärt mot footern.
	 *
	 * !important: GP har `.one-container .site-main > :last-child
	 * { margin-bottom: 0 }` som väger (0,3,0) mot den här regelns (0,1,0), och
	 * flödet ÄR sista barnet på flödessidan.
	 */
	margin-bottom: 48px !important;
}

/* Evenemangen får mer bredd: de ligger i två kolumner inne i panelen, medan
   nyheterna står i en. */
.mhrf-kn-flode2--tva {
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
}

.mhrf-kn-flode2--en {
	grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 900px) {
	.mhrf-kn-flode2--tva {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}
}

/* ---------- Kolumnhuvud ---------- */

/* Rubriken ärver temats rubrikfont med flit — den är en sidrubrik, inte en
   del av pluginets egen typografi.
   32px ned: samma avstånd till tidsfiltret i evenemangskolumnen som till
   listans första linje i nyhetskolumnen. */
.mhrf-kn-kolumn-rubrik {
	margin: 0 0 32px;
	font-size: 1.625em;
	line-height: 1.25;
}

/* ---------- Tidsfilter ---------- */

.mhrf-kn-flode-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 0 0 20px;
}

.mhrf-kn-flode-filter-val {
	display: flex;
	align-items: center;
	gap: 10px;
	/* 17px och inte temats 16px: etiketten står bredvid en 20px kryssruta och
	   ska väga upp mot den. Sätts på spannet så att label ärver det. */
	font-size: 17px;
}

.mhrf-kn-flode-filter input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 0;
	/* accent-color räcker: ingen egen kryssruta att hålla i synk med temat. */
	accent-color: var(--blue-primary, #15529f);
	cursor: pointer;
}

/* Temat ger label en bottenmarginal som skulle knuffa texten ur linje mot
   kryssrutan. */
.mhrf-kn-flode-filter label {
	margin: 0;
	font-weight: 400;
	line-height: 1.3;
	cursor: pointer;
}

/* ---------- Panelen runt evenemangen ---------- */

.mhrf-kn-flode-panel {
	padding: 16px 24px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-m, 8px);
}

/*
 * Tom panel = ingen panel.
 *
 * Panelen är ramen runt EVENEMANGSKORTEN. Står det bara en notis i den blir
 * den en stor ljusblå ruta runt en enda rad, medan nyhetskolumnens likadana
 * notis står naken — samma meddelande, men det ena såg tio gånger så tungt ut.
 * Nu ser de likadana ut.
 *
 * :has() och inte en klass som JS växlar: notisen sätts in på TVÅ vägar,
 * serverrenderingen i del-flode-kolumn.php och AJAX-svaret vid filterbyte. En
 * CSS-regel täcker båda utan att någon behöver komma ihåg den andra.
 *
 * I en webbläsare utan :has() faller det tillbaka på den gamla panelen — fult,
 * men inte trasigt.
 */
.mhrf-kn-flode-panel:has(.mhrf-kn-flode-tom) {
	padding: 0;
	background: none;
}

/* ---------- Kortlistan ---------- */

.mhrf-kn-kortlista {
	display: grid;
	/* Inget radgap: korten skiljs av linjen i toppen på varje kort, inte av
	   mellanrum. Ett gap hade lämnat ett hål mellan linjen och kortet ovanför. */
	gap: 0 36px;
}

.mhrf-kn-kortlista--1 {
	grid-template-columns: minmax(0, 1fr);
}

.mhrf-kn-kortlista--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* En kolumn även för evenemangen när panelen blir för smal för två. Bryts
   tidigare än sidans egen brytpunkt eftersom panelen bara är en del av
   sidbredden. */
@media (max-width: 1100px) {
	.mhrf-kn-kortlista--2 {
		grid-template-columns: minmax(0, 1fr);
	}
}

/*
 * Notisen är ett BARN till .mhrf-kn-kortlista, som är ett rutnät med två
 * kolumner för evenemang. Utan den här raden hamnade den i första cellen och
 * fick halva bredden — texten bröts mitt i, och det såg ut som ett fel i
 * meningen i stället för en trång ruta.
 */
.mhrf-kn-flode-tom {
	grid-column: 1 / -1;
	margin: 16px 0;
}

/* ---------- Kortet ---------- */

.mhrf-kn-flodekort {
	/* relative är inte kosmetiskt: rubriklänkens ::after nedan är absolut
	   positionerad och skulle annars sträcka sig över närmaste positionerade
	   förfader, alltså hela panelen. */
	position: relative;
	display: flex;
	flex-direction: column;
	/*
	 * Linjen ovanför varje kort, inte under: då får varje kolumn en linje i
	 * toppen och listan avslutas utan en hängande kantlinje.
	 *
	 * Ingen ram runt om, ingen bakgrund och ingen radie — kortet är inte en
	 * box i designen, utan en post avdelad med en linje.
	 */
	border-top: 1px solid var(--blue-primary--trans-40, #afc4e1);
	padding: 24px 0 60px;
}

.mhrf-kn-flodekort-topp {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* Ingen egen bottenmarginal: avståndet ned till rubriken sätts av
	   rubrikens margin-top, så att det finns på ETT ställe. Kortet är en
	   flexkolumn, så marginalerna kollapsar inte och två värden hade adderats. */
	margin-bottom: 0;
	/* Datumet får krympa, märket aldrig. */
	min-height: 26px;
}

.mhrf-kn-flodekort-datum {
	font-size: 16px;
	line-height: 1.3;
	color: #000;
}

/* Nyhetskort har inget datum. Märket hamnar då till vänster av sig självt
   eftersom det är enda barnet — ingen egen regel behövs. */

.mhrf-kn-flodekort-rubrik {
	margin: 13px 0 24px;
	font-family: var(--mhrf-kn-rubrikfont);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.35;
}

/*
 * Rubriken är alltid svart, i alla lägen.
 *
 * color: inherit räckte inte. Sidans inline-stilmall har
 * `a:hover, a:focus, a:active { color: var(--contrast) }` och style.css har
 * `a { color: rgb(54,109,179) }` — på Mitt konto vann de och rubriken blev blå
 * så fort man förde muspekaren över kortet. Två klasser här ger (0,2,0) mot
 * deras (0,0,2), och varje tillstånd skrivs ut eftersom en :hover-regel annars
 * väger tyngre än grundregeln.
 *
 * Understrykningen på hover ligger kvar i regeln längre ned — det är bara
 * färgen som låses.
 */
.mhrf-kn-flodekort .mhrf-kn-flodekort-lank,
.mhrf-kn-flodekort .mhrf-kn-flodekort-lank:link,
.mhrf-kn-flodekort .mhrf-kn-flodekort-lank:visited,
.mhrf-kn-flodekort .mhrf-kn-flodekort-lank:hover,
.mhrf-kn-flodekort .mhrf-kn-flodekort-lank:focus,
.mhrf-kn-flodekort .mhrf-kn-flodekort-lank:focus-visible,
.mhrf-kn-flodekort .mhrf-kn-flodekort-lank:active {
	color: #000;
}

.mhrf-kn-flodekort-lank {
	text-decoration: none;
}

/*
 * Överlägget som gör hela kortet klickbart. Ligger på länken och inte på
 * <article>, så att det fortfarande är ett riktigt ankare som får fokus,
 * mittenklick och "öppna i ny flik" — det hade ett klick-script på kortet
 * inte gett.
 */
.mhrf-kn-flodekort-lank::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.mhrf-kn-flodekort:hover .mhrf-kn-flodekort-lank,
.mhrf-kn-flodekort-lank:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/*
 * Hovrar man klubbnamnet ska bara det strykas under, inte rubriken också.
 * Kortet är klickbart i sin helhet, så rubrikens understrykning tänds av
 * :hover var som helst på kortet — och klubbnamnet är den enda ytan som leder
 * någon annanstans. Två understrykningar samtidigt hade sagt att båda gäller.
 *
 * :has() behövs: klubbnamnet ligger EFTER rubriken i markupen, och en
 * syskonselektor kan inte peka bakåt.
 */
.mhrf-kn-flodekort:has(.mhrf-kn-flodekort-klubbnamn:hover) .mhrf-kn-flodekort-lank {
	text-decoration: none;
}

/*
 * Ingen position/z-index HÄR, med flit.
 *
 * Raden lyfte tidigare hela sin bredd över rubriklänkens ::after. Det som
 * behöver ligga överst är bara klubbnamnet — med lyftet på raden blev även
 * mellanrummet mellan namnet och logotypen, och logotypen själv, en död yta
 * där kortets länk inte gick att klicka. Ytan är ~330x44 px, alltså inte
 * något man råkar undvika.
 *
 * Lyftet ligger i stället på .mhrf-kn-flodekort-klubbnamn nedan.
 */
.mhrf-kn-flodekort-klubb {
	display: flex;
	/* Toppställt: klubbnamnet radbryter till två rader i smala spalter, och
	   med center hamnade logotypen mitt emot mellanrummet mellan raderna. */
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	/* Skjuter ned klubbraden till kortets underkant så att kort med olika
	   lång rubrik får logotyperna på samma höjd. */
	margin-top: auto;
}

/*
 * Klubbnamnet måste ligga ÖVER rubriklänkens överlägg för att gå att klicka.
 * z-index kräver en position — utan position: relative gör z-index ingenting
 * alls. Bara ankaret lyfts, så resten av raden faller igenom till kortlänken.
 */
.mhrf-kn-flodekort-klubbnamn {
	position: relative;
	z-index: 1;
	font-family: var(--mhrf-kn-rubrikfont);
	font-size: 0.8125em;
	font-weight: 600;
	line-height: 1.35;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--blue-primary, #15529f);
	text-decoration: none;
}

.mhrf-kn-flodekort-klubbnamn:hover,
.mhrf-kn-flodekort-klubbnamn:focus-visible {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mhrf-kn-flodekort-logo {
	flex: 0 0 auto;
	/* Samma resonemang som .mhrf-kn-single-logo: 44px är ett tak i båda
	   riktningarna, inte en kvadrat som logotypen måste passa in i. */
	max-width: 44px;
	max-height: 44px;
	width: auto;
	height: auto;
	object-fit: contain;
	background: #fff;
	padding: 2px;
}

/* ---------- Passerade evenemang ---------- */

/* Överstruket datum och dämpad text, så att ett passerat evenemang går att
   känna igen på en halv sekund utan att behöva läsa datumet. */
.mhrf-kn-flodekort--passerat .mhrf-kn-flodekort-datum {
	text-decoration: line-through;
}

/*
 * Passerade evenemang dämpas fortfarande. Länken måste nämnas uttryckligen:
 * färgen sitter numera på <a> och ärvs inte längre från rubriken.
 */
.mhrf-kn-flodekort--passerat .mhrf-kn-flodekort-rubrik,
.mhrf-kn-flodekort--passerat .mhrf-kn-flodekort-klubbnamn {
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-flodekort--passerat .mhrf-kn-flodekort-lank,
.mhrf-kn-flodekort--passerat .mhrf-kn-flodekort-lank:hover,
.mhrf-kn-flodekort--passerat .mhrf-kn-flodekort-lank:focus,
.mhrf-kn-flodekort--passerat .mhrf-kn-flodekort-lank:focus-visible {
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-flodekort--passerat .mhrf-kn-flodekort-logo {
	opacity: 0.65;
}

/* ---------- "Ladda fler" ----------
 *
 * Utseendet kommer från TEMATS utility-klasser, inte härifrån:
 *   .btn-secondary                        solid blå, vit text
 *   .btn-secondary.btn-secondary--ghost    transparent med blå kontur
 *
 * Reglerna nedan sätter bara det temat inte kan veta: placering, och att fokus
 * inte får byta färg. Ingen egen färgsättning — då skulle två sanningar om vad
 * en blå knapp ser ut som ligga i två filer.
 */

.mhrf-kn-laddafler {
	display: inline-block;
	/*
	 * !important: temats buttons.css har `.btn-secondary.btn-secondary
	 * .btn-secondary { margin-top: 0 }` — klassen upprepad tre gånger för att
	 * vinna specificitet — och den väger (0,3,0) mot den här regelns (0,1,0).
	 * Utan det låg knappen dikt an mot innehållet ovanför.
	 */
	margin-top: 24px !important;
	cursor: pointer;
}

/*
 * Fokus ska inte byta färg — bara hover. Sidan har en inline-regel
 * `button:focus { background: #85a6d1 }` som träffar varje <button>, och den
 * kräver !important för att neutraliseras.
 *
 * Värdena speglar temats .btn-secondary--ghost i buttons.css: genomskinlig med
 * blå kontur. Utan den här regeln skulle knappen fyllas i vid fokus och sluta
 * se ut som en ghost-knapp.
 */
.mhrf-kn-laddafler:focus,
.mhrf-kn-laddafler:focus-visible {
	background: transparent !important;
	color: #000 !important;
	outline: 1px solid var(--blue-primary, #15529f) !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Hover vinner över fokus när båda gäller, annars ser knappen ut att fastna. */
.mhrf-kn-laddafler:focus:hover,
.mhrf-kn-laddafler:focus-visible:hover {
	background: var(--blue-primary--trans-60, #85a6d1) !important;
	color: #000 !important;
	outline-color: var(--blue-primary--trans-60, #85a6d1) !important;
}

.mhrf-kn-laddafler[disabled] {
	opacity: 0.6;
	cursor: default;
}

/* Måste stå här. `display: inline-block` ovan är en FÖRFATTARREGEL och slår
   webbläsarens egna `[hidden] { display: none }`, som bara är en UA-regel —
   knappen skulle alltså synas trots hidden-attributet. */
.mhrf-kn-laddafler[hidden] {
	display: none;
}

/* ---- "Visa allt" över båda kolumnerna ---- */

/* Samma form som megamenyns motsvarighet och som kalkylatorns tillbakalänk:
   ljusblått block, svart text vikt 500, understrykning vid hover. Pilen pekar
   framåt eftersom det är en framåtlänk. */
.mhrf-kn-kortlista[aria-busy="true"] {
	opacity: 0.55;
}

/* ---------- Äldre listvyer ----------
 *
 * Arkivet och [mhrf_klubbnyheter] visar märket inline i en metarad. Märket
 * har ingen egen marginal längre (det ligger i flexrader i de nya korten), så
 * avståndet sätts här i stället.
 */
.mhrf-kn-flode-meta .mhrf-kn-typmarke {
	margin-right: 6px;
}

/* Flödet längst ned på en enskild nyhet. Ligger utanför tvåkolumnsgriden
   ovanför, så det får hela innehållsbredden och sin egen avgränsning. */
.mhrf-kn-single-flode {
	margin-top: 64px;
	padding-top: 40px;
	border-top: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

/* ---------- Länkar in i wp-admin ----------
 *
 * Öppnas i ny flik, och ikonen finns för att det ska framgå INNAN man klickar.
 *
 * Ingen display-regel på själva länken: den kan vara både en tabellcellslänk
 * och en .btn från temat, och en display här skulle konkurrera med temats egen
 * knappregel på samma specificitet — där källordningen mellan plugin och tema
 * inte är garanterad. Ikonen positioneras därför med vertical-align i stället,
 * vilket fungerar oavsett vad föräldern har för display.
 */
/* ---------- Länkar i klubbarnas blockinnehåll ----------
 *
 * Klubbarna klistrar in råa URL:er i löptexten och make_clickable gör dem
 * klickbara (se mhrf_kn_externa_lankar). En sådan länk mitt i en mening är
 * lätt att missa, så den ritas som en chip med ljus botten i stället för att
 * bara vara understruken text.
 *
 * inline-block: den vertikala paddingen behövs för att bottnen ska få höjd,
 * och `display: inline` hade låtit bakgrunden lägga sig över raderna
 * omkring. max-width och overflow-wrap finns för att en lång adress ska
 * brytas INNE i chipen i stället för att spränga spalten.
 */
.mhrf-kn-extlank {
	display: inline-block;
	max-width: 100%;
	padding: 6px 12px;
	border-radius: var(--radius-s, 4px);
	background: var(--blue-secondary, #ebf1f8);
	overflow-wrap: anywhere;
}

.mhrf-kn-extlank:hover,
.mhrf-kn-extlank:focus-visible {
	background: var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-utikon {
	display: inline-block;
	width: 13px;
	height: 13px;
	margin-left: 6px;
	vertical-align: -1px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0.75;
}

/* ---------- Publicister i länklistan ----------
 *
 * Native <details>, ingen JS. Sammanfattningen visar antalet, listan vem och
 * vilken roll.
 */

/* ---------- Flikar: aktiverade / inte aktiverade ---------- */

.mhrf-kn-flikar {
	display: flex;
	gap: 8px;
	margin: 0 0 18px;
	border-bottom: 1px solid var(--blue-primary--trans-40, #afc4e1);
}

.mhrf-kn-flik {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px !important;
	border: 0 !important;
	border-bottom: 3px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--gray-primary, #435b79) !important;
	font-family: var(--mhrf-kn-rubrikfont);
	font-size: 0.9375em;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	/* Linjen ligger på samma rad som containerns border-bottom. */
	margin-bottom: -1px !important;
}

.mhrf-kn-flik[aria-selected="true"] {
	border-bottom-color: var(--blue-primary, #15529f) !important;
	color: var(--blue-primary, #15529f) !important;
}

.mhrf-kn-flik:hover {
	color: var(--blue-primary, #15529f) !important;
}

.mhrf-kn-flik:focus-visible {
	outline: 2px solid var(--blue-primary, #15529f) !important;
	outline-offset: -2px;
}

/* Antalet som en dämpad siffra, inte en färgad bricka — den ska läsas som
   information, inte som en knapp i knappen. */
.mhrf-kn-flik-antal {
	font-weight: 400;
	opacity: 0.7;
	font-variant-numeric: tabular-nums;
}

/* Förklaringen under Ej aktiverade. Samma mekanism som raderna: den finns
   alltid i markupen och visas bara under rätt flik. */
.mhrf-kn-flikforklaring {
	margin: 0 0 20px;
	padding: 14px 18px;
	background: var(--blue-secondary, #ebf1f8);
	border-radius: var(--radius-m, 8px);
	font-size: 18px;
	line-height: 1.5;
}

.mhrf-kn-lankar[data-kn-visar="aktiv"] .mhrf-kn-flikforklaring {
	display: none;
}

/*
 * Filtreringen. Ett attribut på behållaren styr vilken grupp som visas, så
 * flikbytet är en omritning i stället för en loop över 366 rader.
 */
.mhrf-kn-lankar[data-kn-visar="aktiv"] tr[data-kn-grupp="inaktiv"],
.mhrf-kn-lankar[data-kn-visar="inaktiv"] tr[data-kn-grupp="aktiv"] {
	display: none;
}

/* Knappen i cellen. Pillerform som resten av pluginets ghostknappar, men
   kompakt — den ska rymmas i en tabellcell utan att sätta kolumnbredden. */
.mhrf-kn-publicister-knapp {
	padding: 3px 12px;
	/*
	 * !important på ram, radie, bakgrund och färg.
	 *
	 * Tillståndsreglerna nedan hade redan !important, grundregeln inte — så
	 * ramen fanns bara vid hover och fokus och försvann i viloläge. Det är den
	 * kombinationen som gjorde knappen ojämn mellan raderna.
	 */
	border: 1px solid var(--blue-primary, #15529f) !important;
	border-radius: 50vmax !important;
	background: #fff !important;
	color: var(--blue-primary, #15529f) !important;
	font-size: 0.875em;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	cursor: pointer;
}

/* Triangel som vänder när raden är utfälld. Enda tillståndsindikatorn, så den
   följer aria-expanded och kan inte hamna ur synk med den. */
.mhrf-kn-publicister-knapp::after {
	content: "";
	display: inline-block;
	margin-left: 7px;
	vertical-align: 2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
}

.mhrf-kn-publicister-knapp[aria-expanded="true"]::after {
	border-top: 0;
	border-bottom: 5px solid currentColor;
}

.mhrf-kn-publicister-knapp:hover {
	background: var(--yellow-primary, #ffc400) !important;
	border-color: var(--yellow-primary, #ffc400) !important;
	color: #000 !important;
}

.mhrf-kn-publicister-knapp:focus,
.mhrf-kn-publicister-knapp:focus-visible {
	background: #fff !important;
	border-color: var(--blue-primary, #15529f) !important;
	color: var(--blue-primary, #15529f) !important;
}

.mhrf-kn-publicister-knapp:focus:hover,
.mhrf-kn-publicister-knapp:focus-visible:hover {
	background: var(--yellow-primary, #ffc400) !important;
	border-color: var(--yellow-primary, #ffc400) !important;
	color: #000 !important;
}

/* ---- Den fullbreda raden ----
 *
 * INGEN display-regel på <tr> här. Skulle den sättas till table-row vinner den
 * över webbläsarens [hidden] { display: none } — författarstil slår UA-stil —
 * och raden vore alltid synlig. Guarden nedan finns som försäkring om någon
 * lägger till en display-regel senare.
 */
.mhrf-kn-publicister-rad[hidden] {
	display: none;
}

.mhrf-kn-publicister-rad > td {
	background: var(--blue-secondary, #ebf1f8);
}

.mhrf-kn-publicister-rubrik {
	margin: 0 0 10px;
	font-family: var(--mhrf-kn-rubrikfont);
	font-size: 0.8125em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--gray-primary, #435b79);
}

/* Nu när listan har hela tabellbredden får den flera spalter i stället för en
   lång kolumn. */
.mhrf-kn-publicister-lista {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 12px 28px;
	margin: 0;
	padding: 0;
}

.mhrf-kn-publicister-lista li {
	padding: 0 0 0 12px;
	border-left: 3px solid var(--blue-primary--trans-40, #afc4e1);
	font-size: 0.9375em;
	line-height: 1.4;
}

.mhrf-kn-publicist-namn {
	display: block;
	font-weight: 600;
}

.mhrf-kn-publicist-roll {
	display: block;
	font-size: 0.875em;
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-publicist-epost {
	display: block;
	font-size: 0.875em;
	word-break: break-all;
}

.mhrf-kn-tom {
	color: var(--gray-primary, #435b79);
}

/* ---------- Filterrad i granskningsvyn (klubb + sortering) ----------
 *
 * flex-wrap, inte en mediefråga: fälten har olika bredd och raden ska brytas
 * när den faktiskt inte får plats, inte vid en gissad brytpunkt.
 */
.mhrf-kn-filterrad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 24px;
	margin: 0 0 24px;
}

/* Etikett och select hålls ihop som ett fält, så att en radbrytning aldrig
   lämnar "Klubb" ensamt på raden ovanför sin ruta. */
.mhrf-kn-filterfalt {
	display: flex;
	align-items: center;
	gap: 10px;
}

.mhrf-kn-filterrad label {
	font-family: var(--mhrf-kn-rubrikfont);
	font-weight: 600;
	color: #000;
	margin: 0;
	white-space: nowrap;
}

.mhrf-kn-filterrad select {
	width: auto;
	min-width: 260px;
	max-width: 100%;
	height: 46px;
	padding: 10px 15px;
}

/* Sorteringen har kortare alternativ än de längsta klubbnamnen och behöver
   inte samma minimibredd. */
.mhrf-kn-filterfalt--sort select {
	min-width: 220px;
}

/* ---------- Prenumerationsknapp på klubbsidan ----------
 *
 * Ghost i viloläge, ifylld när man prenumererar. Skillnaden ska synas utan att
 * man läser texten — det är hela poängen med en växlare.
 *
 * !important genomgående: knappen ärver Bootstraps .btn, och sidan har dessutom
 * en inline-regel `button:focus { background: #85a6d1 }` som annars färgar den
 * blå så fort man klickat.
 */

.mhrf-kn-prenumeration {
	margin: 40px 0 0;
}

/* Ingen egen typografi — temats h2 gäller. Bara marginalen sätts här. */
.mhrf-kn-prenumeration-rubrik {
	margin: 0 0 10px;
}

.mhrf-kn-prenumeration-text {
	margin: 0 0 18px;
	max-width: 62ch;
}

/* Länkraden under den avstängda knappen. */
.mhrf-kn-prenumeration-logga-in {
	margin: 14px 0 0;
}

/*
 * Avstängd knapp för utloggade. Bootstrap tonar ned .btn:disabled till
 * opacity .65 och väger (0,2,0) — därför två klasser här, annars vinner den.
 * Knappen ska se hel ut: överstrykningen och texten i den säger redan att den
 * inte går att använda.
 *
 * cursor: default och inte pointer, som resten av knappen har. Ingen
 * förbudssymbol heller — den läser som ett fel, inte som ett villkor.
 */
.mhrf-kn-prenumerera.mhrf-kn-prenumerera:disabled {
	opacity: 1;
	cursor: default;
}

/*
 * Överstruken etikett: åtgärden finns, men går inte att utföra.
 *
 * Regeln sitter på etiketten och inte på knappen. text-decoration ärvs ned till
 * flexbarnen och går inte att ta bort på ett barn — på knappen hade strecket
 * dragits genom villkorstexten också.
 */
.mhrf-kn-prenumerera:disabled .mhrf-kn-prenumerera-etikett {
	text-decoration: line-through;
}

.mhrf-kn-prenumerera-villkor {
	/* Egen marginal utöver flexens gap: villkoret hör till en annan nivå än
	   ikonen och etiketten, och ska inte läsas som ett tredje jämnstort ord. */
	margin-left: 3px;
	font-weight: 400;
}

/*
 * Två klasser: Bootstraps .btn sätter display: inline-block och väger lika
 * mycket (0,1,0), men laddas efter pluginets CSS. Utan flex gjorde gap ingen
 * nytta och ikonen låg ovanför texten i stället för vid sidan.
 *
 * flex + width: fit-content i stället för inline-flex: en block-flexbox
 * krymper inte till innehållet av sig själv, men den gör att align-items
 * faktiskt gäller.
 */
.mhrf-kn-prenumeration .mhrf-kn-prenumerera {
	display: flex;
	align-items: center;
	gap: 9px;
	width: fit-content;
	margin: 0;
	padding: 10px 20px !important;
	border: 1px solid var(--blue-primary, #15529f) !important;
	border-radius: 50vmax !important;
	background: transparent !important;
	color: var(--blue-primary, #15529f) !important;
	/* Bootstraps .btn:focus lägger en gul box-shadow. Den hör till de gula
	   knapparna, inte till en ghost. */
	box-shadow: none !important;
	font-weight: 600;
	line-height: 1.4;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mhrf-kn-prenumerera:hover,
.mhrf-kn-prenumerera:focus,
.mhrf-kn-prenumerera:focus-visible {
	background: var(--blue-primary, #15529f) !important;
	color: #fff !important;
	box-shadow: none !important;
}

/* Ifylld: användaren prenumererar. */
.mhrf-kn-prenumerera.is-pa,
.mhrf-kn-prenumerera.is-pa:hover,
.mhrf-kn-prenumerera.is-pa:focus,
.mhrf-kn-prenumerera.is-pa:focus-visible {
	background: var(--blue-primary, #15529f) !important;
	color: #fff !important;
	box-shadow: none !important;
}


.mhrf-kn-prenumerera-ikon {
	width: 19px;
	height: 19px;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Klockan fylls när man prenumererar — samma signal som knappen, i litet. */
.mhrf-kn-prenumerera.is-pa .mhrf-kn-prenumerera-ikon {
	fill: currentColor;
}

/* ---------- Prenumerationslista på Mitt konto ---------- */

/*
 * Ligger i den högra av två .col och tar alltså halva raden. Ingen toppmarginal
 * mot kontaktuppgifterna: rubriken ska ligga i linje med "Mina
 * kontaktuppgifter:" i kolumnen bredvid.
 */
.mhrf-kn-prenlista {
	margin: 0;
}

.mhrf-kn-prenlista-rubrik {
	margin: 0 0 14px;
}

.mhrf-kn-prenlista-tom {
	margin: 0;
	color: var(--gray-primary, #435b79);
}

.mhrf-kn-prenlista-poster {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * En rad per klubb: namnet till vänster, knappen till höger. gap och inte
 * space-between med marginal — då hamnar knappen dikt an mot namnet på smala
 * skärmar i stället för att bryta.
 */
.mhrf-kn-prenlista-post {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	/* Ingen skiljelinje mellan raderna. Avståndet räcker för att skilja dem
	   åt, och listan står nu i en smal kolumn där streck blir tungt. */
	margin: 0;
	padding: 8px 0;
}

.mhrf-kn-prenlista-post[hidden] {
	display: none;
}

/* Avprenumerera: dämpad ghost. Den ska gå att hitta men inte konkurrera med
   klubblänken, som är det man oftast vill klicka på. */
.mhrf-kn-prenlista .mhrf-kn-prenlista-bort {
	flex: 0 0 auto;
	padding: 7px 16px !important;
	border: 1px solid var(--blue-primary--trans-40, #afc4e1) !important;
	border-radius: 50vmax !important;
	background: transparent !important;
	color: var(--gray-primary, #435b79) !important;
	box-shadow: none !important;
	font-size: 0.9375em;
	font-weight: 600;
	cursor: pointer;
}

.mhrf-kn-prenlista .mhrf-kn-prenlista-bort:hover,
.mhrf-kn-prenlista .mhrf-kn-prenlista-bort:focus,
.mhrf-kn-prenlista .mhrf-kn-prenlista-bort:focus-visible {
	border-color: var(--mhrf-kn-fara) !important;
	background: transparent !important;
	color: var(--mhrf-kn-fara) !important;
	box-shadow: none !important;
}

.mhrf-kn-prenlista .mhrf-kn-prenlista-bort[disabled] {
	opacity: 0.6;
	cursor: default;
}