/**
 * Kurstype-merkelappene i lista over kursbeskrivelser.
 *
 * Merkelappene brukes både her og over tittelen på enkeltsidene, så reglene
 * ligger på .skogkurs-kurstyper / .skogkurs-kurstype og lastes av begge blokkene.
 *
 * I lista ligger merkelappene rett etter tittelen, og må flyte som vanlig tekst:
 *
 *   - Omslutteren er `display: inline`, ikke `inline-flex`. En inline-flex-boks
 *     er atomisk og kan ikke brytes, så hele gruppa hoppet ned på neste linje
 *     samlet – og tok venstremargen sin med seg, som ga et innrykk foran
 *     merkelappen når den havnet alene på linje to.
 *   - Avstanden foran og mellom merkelappene er vanlige mellomrom i markupen,
 *     ikke margin. Mellomrom kollapser ved linjeskift, margin gjør det ikke.
 *   - `margin-block` gir luft over og under, slik at merkelappen ikke ligger
 *     tett inntil linja over når tittelen brytes over to linjer.
 */

.skogkurs-kurstyper {
	display: inline;
}

/*
 * Litt mer luft mellom tittelen og første merkelapp enn mellomrommet alene gir.
 *
 * Margen ligger på lenka, ikke på merkelappen: en margin på slutten av linje én
 * påvirker ikke starten av linje to, så innrykket kommer ikke tilbake når
 * merkelappen brytes ned. `:has()` gjør at margen bare settes når det faktisk
 * følger merkelapper etter lenka.
 */
li > a:has(+ .skogkurs-kurstyper) {
	margin-inline-end: 0.35em;
}

/*
 * `vertical-align: middle` sentrerer merkelappen om grunnlinja pluss halv
 * x-høyde. Den optiske midten av tittelteksten ligger litt høyere enn det
 * (halv versalhøyde), så merkelappen havner et par piksler for lavt.
 *
 * Vi løfter merkelappen i stedet for å senke teksten: teksten deles med
 * listepunktene som ikke har merkelapp, og en senking der ville gjort at
 * titlene med og uten merkelapp ikke lå på samme linje. `position: relative`
 * flytter bare det som vises, ikke oppsettet, og margin-block er økt
 * tilsvarende så lufta opp mot linja over blir den samme.
 */
.skogkurs-kurstype {
	display: inline-block;
	position: relative;
	top: -2px;
	margin-block: 5px;
	padding: 3px 9px;
	border-radius: 4px;
	background-color: #ececec;
	color: #000;
	font-size: max(0.6em, 14px);
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0;
	text-decoration: none;
	vertical-align: middle;
	white-space: nowrap;
}

/* Over H1 på enkeltsida står merkelappene på egen linje. */
.skogkurs-kurstyper--single {
	display: flex;
	flex-flow: row wrap;
	gap: 0.5rem;
}

/* På enkeltsida står merkelappene alene på en linje og trenger ingen justering. */
.skogkurs-kurstyper--single .skogkurs-kurstype {
	top: 0;
	margin-block: 0;
	padding: 0.25em 1em;
	font-size: 16px;
}

/*
 * Litt mindre merkelapp på små skjermer, der tittelen oftest brytes.
 *
 * Gjelder bare merkelappene i lista: reglene for enkeltsida over har to klasser
 * og dermed høyere spesifisitet, så de beholder sin egen padding.
 */
@media only screen and (max-width: 651px) {
	.skogkurs-kurstype {
		padding: 2px 7px;
	}
}