/* ==========================================================================
   .mhrf-lank — textlänk med caret
   ==========================================================================

   Markup:

     <a class="mhrf-lank" href="#">
       <span class="mhrf-lank-text">Etikett</span>
       <span class="mhrf-lank-pil" aria-hidden="true">&rsaquo;</span>
     </a>

   Modifierare, var och en med EXAKT ett ansvar så de kan kombineras fritt:

     .mhrf-lank--bla        blå etikett i stället för svart
     .mhrf-lank--arvd-farg  ärver färgen från sin kontext, ingen tvingad
     .mhrf-lank--tillbaka   pilen pekar vänster (ordningen sätts i markupen)
     .mhrf-lank--large      större etikett och en ljusblå cirkel kring pilen
     .mhrf-lank--center     centrerad över hela förälderns bredd

   Ligger i assets/css/global/ och laddas därför på hela sajten, av både temat
   och pluginet mhrf-klubbnyheter. Det är avsikten: komponenten ska se likadan
   ut oavsett vem som skriver ut den.

   Pilen är ETT SPAN och inte ett ::after på länken. text-decoration propagerar
   till flex-items och går inte att ta bort på ett barn, så med pilen i länkens
   eget textflöde fick den en egen understrykning med flex-gapet som hål
   emellan. Med ett eget span kan understrykningen ligga på .mhrf-lank-text.
   ========================================================================== */

.mhrf-lank {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	/* !important av samma skäl som .mhrf-back-link i mhrf-calculator behöver
	   det: temats a:hover har högre specificitet och bytte annars färg. Ett
	   !important i grundregeln gäller båda lägena. */
	color: #000 !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-decoration: none;
}

.mhrf-lank--bla {
	color: var(--blue-primary, #15529f) !important;
}

/*
 * --arvd-farg: länken tar färgen från sin kontext i stället för grundregelns
 * svarta. För länkar som står i mängd, där en tvingad färg krockar med det
 * block de sitter i.
 *
 * inherit slår igenom trots grundregelns !important eftersom den här
 * selektorn väger mer (0,2,0 mot 0,1,0) och också är !important.
 */
.mhrf-lank--arvd-farg,
.mhrf-lank--arvd-farg:hover,
.mhrf-lank--arvd-farg:focus-visible {
	color: inherit !important;
}

/*
 * --tillbaka: pilen pekar vänster och står FÖRE texten. Ordningen sätts i
 * markupen, riktningen här — glyfen &rsaquo; finns bara åt höger, så den
 * roteras.
 */
.mhrf-lank--tillbaka .mhrf-lank-pil {
	transform: rotate(180deg);
	/* Den optiska centreringen i .mhrf-lank-pil är gjord för högerläget och
	   hamnar på fel sida när glyfen vänds. */
	padding-right: 1px;
	padding-left: 0;
}

/*
 * --large: den framträdande varianten. Större och tyngre etikett, och en pil
 * som redan i viloläge är en ljusblå cirkel i stället för bara ett tecken.
 *
 * Cirkeln är samma knapp som karusellen på startsidan (.swiper-buttons button
 * i postflode.css). Vid hover fylls den mörkblå precis som grundvariantens,
 * så beteendet är detsamma — bara utgångsläget skiljer.
 */
.mhrf-lank--large {
	font-size: 20px;
	font-weight: 600;
}

.mhrf-lank--large .mhrf-lank-pil {
	background: var(--blue-secondary, #ebf1f8);
	color: var(--blue-primary, #15529f);
	font-size: 26px;
}

/*
 * --center: centrerad över hela sin förälders bredd, med luft runt om.
 *
 * display: flex och inte inline-flex — den ska ta hela bredden för att kunna
 * centreras i den. Grundvarianten är inline-flex och krymper till innehållet.
 */
.mhrf-lank--center {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: 18px;
}


/*
 * Understrykningen finns ALLTID men är genomskinlig. Då är det bara färgen som
 * ändras vid hover, vilket går att animera — hade linjen tillkommit vid hover
 * hade den poppat fram utan övergång.
 */
.mhrf-lank-text {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.2s ease;
}

.mhrf-lank:hover .mhrf-lank-text,
.mhrf-lank:focus-visible .mhrf-lank-text {
	text-decoration-color: currentColor;
}

/*
 * Cirkeln är genomskinlig i viloläge och mörkblå med vitt tecken vid hover.
 * Samma knapp som karusellen på startsidan, nedskalad till 26px.
 *
 * padding-bottom och padding-left är optisk centrering — glyfen &rsaquo; sitter
 * inte mitt i sin ruta.
 */
.mhrf-lank-pil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 26px;
	aspect-ratio: 1 / 1;
	padding-bottom: 4px;
	padding-left: 1px;
	border-radius: 50vmax;
	background: transparent;
	color: inherit;
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.mhrf-lank:hover .mhrf-lank-pil,
.mhrf-lank:focus-visible .mhrf-lank-pil {
	background: var(--blue-primary, #15529f);
	color: #fff;
}

/*
 * Pilen kan innehålla en SVG i stället för glyfen. Nedladdningslänken på
 * klubbsidan gör det: den vill ha samma cirkel och samma två övergångar, men
 * en nedåtpil i stället för en högerpil.
 *
 * Den optiska centreringen måste då bort. padding-bottom och padding-left
 * finns för att &rsaquo; inte sitter mitt i sin ruta — en SVG gör det, och med
 * paddingen kvar hamnar den uppåt vänster i cirkeln.
 *
 * stroke: currentColor och inte en fast färg: ikonen ska bli vit när cirkeln
 * fylls blå, precis som glyfen gör.
 */
.mhrf-lank-pil:has(svg) {
	padding: 0;
}

.mhrf-lank-pil > svg {
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Luft ned till rubriken den står ovanför. */
.mhrf-klubb-tillbaka {
	margin: 0 0 14px;
}

/*
 * Klubblänkarna på Mitt konto ligger på samma rad som etiketten.
 *
 * inline-flex på behållaren: .mhrf-lank är själv inline-flex, och utan en
 * flexbox runt dem hamnade flera klubbar utan mellanrum. flex-wrap gör att de
 * bryter först om raden verkligen inte räcker.
 */
.mhrf-konto-klubbar {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 18px;
	vertical-align: middle;
}

/* Etiketten och länkarna på en rad. */
.mhrf-konto-klubbrad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

/*
 * På mobil får varje klubb en egen rad.
 *
 * Wrap räckte inte: två korta klubbnamn ryms bredvid varandra och raden blev
 * ojämn — en klubb hamnade ensam på rad två. En kolumn ger samma vänsterkant
 * för alla, och pilen står då direkt efter varje namn.
 *
 * align-items: flex-start, inte stretch: .mhrf-lank är inline-flex och hade
 * annars sträckts till full bredd, så att pilen flöt ut till högerkanten.
 */
@media (max-width: 768px) {
	.mhrf-konto-klubbrad {
		display: block;
	}

	.mhrf-konto-klubbar {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* 4px var radavståndet från när länkarna låg på en rad och bara bröt
		   vid behov. Staplade behöver de läsas som en lista. */
		gap: 12px;
	}
}