/**
 * Teamet: kort, rutenett, filtrering og profilside.
 * Oslo Helsestudio, Montage AS.
 *
 * Kontrast er kontrollert mot mørk bakgrunn (#141414):
 *   salviegrønn #899875 = 5,98:1, oransje #FB8E28 = 7,90:1.
 * Begge ligger over kravet på 3:1 for rammer (WCAG 1.4.11) og 4,5:1
 * for tekst (1.4.3).
 */

.ohs-team,
.ohs-profil {
	--ohs-gronn: #899875;
	--ohs-oransje: #FB8E28;
	--ohs-mork: #141414;
	--ohs-tekst: #ffffff;
	--ohs-dempet: rgba(255, 255, 255, .72);
	--ohs-flate: rgba(255, 255, 255, .04);
	--ohs-kant: rgba(255, 255, 255, .12);
	--ohs-radius: 14px;
	--ohs-luft: 26px;
}

/* Visuelt skjult, men lesbart for skjermlesere. */
.ohs-visuelt-skjult {
	position: absolute !important;
	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;
}

/* -------------------------------------------------------------------------
   Rutenett
   ------------------------------------------------------------------------- */

.ohs-team__grid {
	display: grid;
	gap: var(--ohs-luft);
	margin: 0;
	padding: 0;
	list-style: none;
	/* Mobil: to i bredden, slik det er bestemt. */
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ohs-team__grid > li::before,
.ohs-team__grid > li::marker {
	content: none;
}

@media (min-width: 700px) {
	.ohs-team__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 1000px) {
	.ohs-team__grid[data-kolonner="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ohs-team__grid[data-kolonner="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ohs-team__grid[data-kolonner="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -------------------------------------------------------------------------
   Kort
   ------------------------------------------------------------------------- */

.ohs-kort {
	position: relative;
	display: flex;
}

.ohs-kort__inner {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: var(--ohs-flate);
	border: 1px solid var(--ohs-kant);
	border-radius: var(--ohs-radius);
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

/* Kvadratisk utsnitt holder kortene lave, slik at et stort team ikke blir
   en endeløs side. Sparer 91 px per kort mot 3:4, altså 16 prosent av
   seksjonshøyden ved fjorten personer. Testet mot alle sju dagens
   portretter, se beskjæringsregelen under. */
.ohs-kort__media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
}

/* Toppjustert beskjæring som standard. På et portrett sitter hodet alltid
   øverst, så regelen kan ikke kutte ansiktet, og for mye luft over hodet
   er lett å oppdage. Den enkelte ansatte kan overstyres med feltet
   "Bildeutsnitt på kortet". */
/* Salient setter .main-content img { height: auto }, som er mer spesifikk
   enn en enkelt klasse. Uten media-klassen foran vinner den, og da faller
   object-fit bort: portretter flyter utenfor og blir klippet av overflow,
   mens et liggende bilde etterlater en grå stripe under seg. */
.ohs-kort__media .ohs-kort__bilde {
	/* Absolutt plassert, ikke height: 100 prosent. Boksen får høyden sin
	   fra aspect-ratio i rutenett, fra flex-linjen i "side om side" og fra
	   et fast mål i listen. En prosenthøyde løses ikke opp mot en forelder
	   uten fastsatt høyde, og da beholdt bildet sitt eget format i to av
	   de tre visningene. */
	position: absolute;
	inset: 0;
	width: 100%;
	/* !important er nødvendig: en regel i Salient setter høyden på bilder
	   til auto med !important, og et bilde er et erstattet element, så
	   verken inset eller object-fit retter det opp. Uten dette beholdt
	   portrettet sitt eget format i to av de tre visningene. */
	height: 100% !important;
	object-fit: cover;
	object-position: top;
	display: block;
	transition: transform .4s ease;
}

/* Utsnitt valgt per ansatt. transform-origin følger utsnittet, ellers
   glir bildet i feil retning når det zoomes ved hover. */
.ohs-kort__media .ohs-kort__bilde--pos-top    { object-position: top; }
.ohs-kort__media .ohs-kort__bilde--pos-center { object-position: center; }
.ohs-kort__media .ohs-kort__bilde--pos-bottom { object-position: bottom; }

.ohs-kort__bilde--tom {
	display: block;
	width: 100%;
	height: 100%;
}

/* Hint nederst på bildet. Glir opp ved hover og ved tastaturfokus, så
   begge inngangene får samme signal. Gradienten sikrer lesbar tekst
   uansett hvor lyst portrettet er nederst. */
.ohs-kort__hint {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 28px 16px 12px;
	font-size: 13px;
	font-weight: 500;
	color: #fff;
	background: linear-gradient( transparent, rgba(20, 20, 20, .92) );
	transform: translateY(100%);
	opacity: 0;
	transition: transform .25s ease, opacity .25s ease;
	/* Skal aldri stjele klikket fra kortet under. */
	pointer-events: none;
}

.ohs-kort__inner:hover .ohs-kort__hint,
.ohs-kort:focus-within .ohs-kort__hint {
	transform: translateY(0);
	opacity: 1;
}

/* I listevisning er portrettet for lite til at teksten får plass. */
.ohs-team__grid[data-visning="liste"] .ohs-kort__hint {
	display: none;
}

.ohs-kort__tekst {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
	flex: 1;
}

.ohs-kort__hoved {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Pillen skal ligge nederst i kortet, slik at knappene står på linje
   selv når én rolletekst går over flere linjer. En fast margin-top ville
   overstyrt auto-margen fra .ohs-kort__booking, så avstanden sikres med
   polstring under teksten i stedet. */
.ohs-kort__hoved {
	padding-bottom: 10px;
}

.ohs-kort__hoved + .ohs-kort__booking {
	margin-top: auto;
}

/* Salient styrer h3 gjennom ".row .span_x h3" og setter 24 px med
   linjehøyde 42 px. Den er mer spesifikk enn én klasse, og på mobil ble
   navnet så stort at "Anethe Toth" brakk over to linjer med et stort
   sprang mellom dem. Tre klasser holder for å vinne uten !important. */
.ohs-team .ohs-kort .ohs-kort__navn {
	margin: 0;
	font-size: 17px;
	line-height: 1.3;
}

.ohs-kort__lenke {
	color: var(--ohs-tekst);
	text-decoration: none;
}

/* Klikkflaten dekker hele kortet, men det finnes bare én lenke i
   markupen. Da unngår vi lenke inni lenke, og tastaturbrukere møter
   nøyaktig to elementer per kort: navnet og booking. */
.ohs-kort__lenke::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ohs-kort__rolle {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	/* !important er nødvendig her: nettstedets tilleggs-CSS i Customizer
	   setter p, h1 til h6 til ren hvit med !important. Uten dette forsvinner
	   forskjellen mellom navn og rolle, og kortet blir én grå masse. */
	color: var(--ohs-dempet) !important;
}

/* Avdelingen står under rollen, mindre og med et stedsikon foran, slik at
   den leses som en opplysning og ikke som en del av tittelen. */
.ohs-kort__sted {
	margin: 6px 0 0;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--ohs-dempet) !important;
	opacity: .85;
}

.ohs-kort__sted::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	border: 1.5px solid currentColor;
	border-radius: 50% 50% 50% 0;
	transform: rotate(-45deg) translateY(-1px);
	vertical-align: baseline;
}

/* Booking er en fylt pille, ikke en tekstlenke. To grunner: den skiller
   seg tydelig fra klikkflaten rundt, og treffområdet blir stort nok til
   å klare 44 x 44 px, som er anbefalt størrelse (WCAG 2.5.5). En ren
   tekstlenke lå på 35 px høyde.
   Mørk tekst på salviegrønn gir 5,98:1, over kravet på 4,5:1. */
.ohs-kort__booking {
	position: relative; /* legger pillen over klikkflaten */
	z-index: 1;
	align-self: flex-start;
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* border-box settes eksplisitt: uten den legges polstringen oppå
	   min-height, og pillen blir 66 px i stedet for 44. */
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 22px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ohs-mork);
	background: var(--ohs-gronn);
	border-radius: 999px;
	text-decoration: none;
	white-space: nowrap;
	transition: filter .15s ease;
}

/* To kort i bredden på mobil gir smale kort. Uten mindre polstring her
   brekker "Bestill time" over to linjer. */
@media (max-width: 420px) {
	.ohs-kort__booking {
		padding: 10px 16px;
		font-size: 13px;
	}
}

.ohs-kort__booking:hover,
.ohs-kort__booking:focus-visible {
	filter: brightness(1.12);
	color: var(--ohs-mork);
}

/* Hover og tastaturfokus gir samme signal. */
.ohs-kort__inner:hover,
.ohs-kort:focus-within .ohs-kort__inner {
	border-color: var(--ohs-gronn);
	box-shadow: 0 0 0 1px var(--ohs-gronn);
	transform: translateY(-3px);
}

/* Zoom ved hover. Origo følger valgt utsnitt. */
.ohs-kort__inner:hover .ohs-kort__bilde {
	transform: scale(1.04);
	transform-origin: top center;
}

.ohs-kort__inner:hover .ohs-kort__bilde--pos-center {
	transform-origin: center;
}

.ohs-kort__inner:hover .ohs-kort__bilde--pos-bottom {
	transform-origin: bottom center;
}

/* Egen markering for booking, siden kortrammen ikke skiller den
   fra navnelenken. */
.ohs-kort__booking:focus-visible,
.ohs-team__filter:focus-visible,
.ohs-profil__booking:focus-visible {
	outline: 3px solid var(--ohs-oransje);
	outline-offset: 3px;
	border-radius: 4px;
}

.ohs-kort__lenke:focus-visible {
	outline: none; /* rammen rundt kortet er markeringen */
}

/* Skjulte kort tas helt ut, ikke bare visuelt, så de forsvinner fra
   tabrekkefølgen og fra skjermlesere. */
.ohs-kort[hidden] {
	display: none !important;
}

/* -------------------------------------------------------------------------
   Filtrering
   ------------------------------------------------------------------------- */

.ohs-team__filtre {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0 0 22px;
}

.ohs-team__filterrad {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.ohs-team__filterledetekst {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--ohs-dempet);
	margin-right: 4px;
}

.ohs-team__filter {
	font: inherit;
	font-size: 13.5px;
	line-height: 1;
	padding: 9px 15px;
	color: var(--ohs-tekst);
	background: transparent;
	border: 1px solid var(--ohs-kant);
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ohs-team__filter:hover {
	border-color: var(--ohs-gronn);
}

.ohs-team__filter[aria-pressed="true"] {
	background: var(--ohs-gronn);
	border-color: var(--ohs-gronn);
	color: var(--ohs-mork);
	font-weight: 600;
}

.ohs-team__status {
	margin: 0 0 18px;
	font-size: 13.5px;
	color: var(--ohs-dempet) !important;
}

/* Tom tilstand. Vises av skriptet når et filter ikke gir treff. */
.ohs-team__tomt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 8px 0 0;
	padding: 26px 28px;
	font-size: 15px;
	color: var(--ohs-dempet);
	background: var(--ohs-flate);
	border: 1px dashed var(--ohs-kant);
	border-radius: var(--ohs-radius);
}

.ohs-team__tomt[hidden] {
	display: none;
}

.ohs-team__nullstill {
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	box-sizing: border-box;
	min-height: 44px;
	padding: 10px 22px;
	color: var(--ohs-mork);
	background: var(--ohs-gronn);
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: filter .15s ease;
}

.ohs-team__nullstill:hover {
	filter: brightness(1.12);
}

.ohs-team__nullstill:focus-visible {
	outline: 3px solid var(--ohs-oransje);
	outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   Profilside
   ------------------------------------------------------------------------- */

/* Salient har mørk tekst som utgangspunkt, mens bakgrunnen på nettstedet
   er mørk. På vanlige sider løses det av WPBakery-radene, som setter sine
   egne farger. Profilsiden bygges av oss og har ingen slik rad, så den må
   sette fargene selv. Uten dette blir navnet nesten usynlig. */
.ohs-profil {
	max-width: 900px;
	margin: 0 auto;
	padding: 10px 0 40px;
	color: var(--ohs-tekst);
}

.ohs-profil h1,
.ohs-profil h2,
.ohs-profil h3,
.ohs-profil p,
.ohs-profil li,
.ohs-profil strong {
	color: inherit;
}

.ohs-profil a:not(.ohs-profil__booking):not(.ohs-kort__lenke):not(.ohs-kort__booking) {
	color: var(--ohs-gronn);
}

.ohs-profil__topp {
	display: grid;
	gap: 30px;
	align-items: start;
	margin-bottom: 34px;
	grid-template-columns: 1fr;
}

@media (min-width: 760px) {
	.ohs-profil__topp {
		grid-template-columns: 320px 1fr;
	}
}

.ohs-profil__bilde {
	width: 100%;
	height: auto;
	border-radius: var(--ohs-radius);
	display: block;
}

.ohs-profil__navn {
	margin: 0 0 8px;
	line-height: 1.15;
}

.ohs-profil__rolle {
	margin: 0 0 6px;
	font-size: 17px;
	color: var(--ohs-gronn) !important;
}

.ohs-profil__avdeling {
	margin: 0 0 22px;
	font-size: 14px;
	color: var(--ohs-dempet) !important;
}

.ohs-profil__booking {
	display: inline-block;
	padding: 13px 26px;
	background: var(--ohs-gronn);
	color: var(--ohs-mork);
	font-weight: 600;
	text-decoration: none;
	border-radius: 999px;
	transition: filter .15s ease;
}

.ohs-profil__booking:hover {
	filter: brightness(1.1);
	color: var(--ohs-mork);
}

.ohs-profil__bio {
	font-size: 16px;
	line-height: 1.7;
	color: rgba(255, 255, 255, .88);
}

.ohs-profil__bio p {
	margin: 0 0 1.1em;
	color: rgba(255, 255, 255, .88) !important;
}

.ohs-profil__kvalifikasjoner {
	margin-top: 34px;
	padding: 24px 26px;
	background: var(--ohs-flate);
	border: 1px solid var(--ohs-kant);
	border-radius: var(--ohs-radius);
}

.ohs-profil__kvalifikasjoner h2 {
	margin: 0 0 12px;
	font-size: 18px;
}

.ohs-profil__kvalifikasjoner ul {
	margin: 0;
	padding-left: 20px;
}

.ohs-profil__kvalifikasjoner li {
	margin-bottom: 6px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

.ohs-profil__andre {
	margin-top: 54px;
}

.ohs-profil__andre h2 {
	margin: 0 0 22px;
	font-size: 20px;
}

/* -------------------------------------------------------------------------
   Redusert bevegelse
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ohs-kort__inner,
	.ohs-kort__bilde,
	.ohs-kort__booking,
	.ohs-kort__hint,
	.ohs-team__filter,
	.ohs-profil__booking {
		transition: none;
	}
	.ohs-kort__inner:hover,
	.ohs-kort:focus-within .ohs-kort__inner {
		transform: none;
	}
	.ohs-kort__inner:hover .ohs-kort__bilde {
		transform: none;
	}
}


/* -------------------------------------------------------------------------
   Visningsmoduser

   Tre måter å vise det samme rutenettet. Markupen er identisk i alle tre,
   bare layouten endrer seg, slik at bytte av modus ikke krever ny
   innlasting og ikke påvirker rekkefølgen for skjermlesere.
   ------------------------------------------------------------------------- */

/* Modus: bilde ved siden av teksten. To i bredden på store skjermer. */
@media (min-width: 900px) {
	.ohs-team__grid[data-visning="rad"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ohs-team__grid[data-visning="rad"] .ohs-kort__inner {
		flex-direction: row;
	}

	.ohs-team__grid[data-visning="rad"] .ohs-kort__media {
		width: 42%;
		flex: 0 0 42%;
		/* Kortet er så høyt som tekstsiden krever. Uten dette beholder
		   portrettet 1:1 og etterlater en grå stripe under seg. */
		aspect-ratio: auto;
		align-self: stretch;
	}

	.ohs-team__grid[data-visning="rad"] .ohs-kort__tekst {
		justify-content: center;
		padding: 22px 24px;
	}
}

/* Under 900 px faller "rad" tilbake til vanlig rutenett, og knappen for
   den skjules. Da kan ingen havne i en modus som ikke er ment for mobil. */
@media (max-width: 899px) {
	.ohs-team__visningsknapp--kun-stor {
		display: none;
	}
}

/* Modus: liste. Kompakt rad med lite portrett og booking til høyre.
   To i bredden fra 1100 px, der det er plass til det uten at pillen
   klemmes mot navnet. */
.ohs-team__grid[data-visning="liste"] {
	grid-template-columns: 1fr;
	gap: 12px;
}

@media (min-width: 1100px) {
	.ohs-team__grid[data-visning="liste"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px 20px;
	}
}

.ohs-team__grid[data-visning="liste"] .ohs-kort__inner {
	flex-direction: row;
	align-items: center;
}

/* Portrettet følger høyden på raden i stedet for å være en fast firkant.
   Når teksten stables på smal skjerm blir raden høyere enn 92 px, og et
   kvadratisk bilde ville da stått med tomrom over og under seg. */
.ohs-team__grid[data-visning="liste"] .ohs-kort__media {
	width: 92px;
	flex: 0 0 92px;
	aspect-ratio: auto;
	align-self: stretch;
	min-height: 92px;
}

.ohs-team__grid[data-visning="liste"] .ohs-kort__tekst {
	flex-direction: row;
	align-items: center;
	gap: 18px;
	padding: 14px 18px;
}

.ohs-team__grid[data-visning="liste"] .ohs-kort__hoved {
	flex: 1;
	gap: 2px;
	padding-bottom: 0;
}

.ohs-team__grid[data-visning="liste"] .ohs-kort__hoved + .ohs-kort__booking {
	margin-top: 0;
	margin-left: auto;
	flex-shrink: 0;
}

/* På smal skjerm stables listeraden, ellers blir pillen klemt. */
@media (max-width: 560px) {
	.ohs-team__grid[data-visning="liste"] .ohs-kort__tekst {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.ohs-team__grid[data-visning="liste"] .ohs-kort__hoved + .ohs-kort__booking {
		margin-left: 0;
	}
}

/* Knapperaden for visningsmodus */
.ohs-team__visning {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
}

/* Knappene sitter sammen som én valgbryter, ikke tre løse ikoner. Rammen
   ligger på gruppa, og skillelinjene mellom knappene er en venstrekant på
   alle unntatt den første. */
.ohs-team__visningsgruppe {
	display: inline-flex;
	border: 1px solid var(--ohs-kant);
	border-radius: 999px;
	overflow: hidden;
}

/* Visningsknappene er rene ikonknapper. Navnet ligger som skjult tekst for
   skjermlesere og som title for musebrukere. 44 x 44 px er anbefalt
   treffområde (WCAG 2.5.5), og en sirkel skiller dem tydelig fra de
   avlange filterpillene like over. */
.ohs-team__visningsknapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 52px;
	height: 42px;
	padding: 0;
	color: var(--ohs-tekst);
	background: transparent;
	border: 0;
	border-left: 1px solid var(--ohs-kant);
	border-radius: 0;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.ohs-team__visningsknapp:first-child {
	border-left: 0;
}

.ohs-team__ikon {
	width: 19px;
	height: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
	pointer-events: none;
}

/* Rutenettikonet er fylte flater, ikke streker. */
.ohs-team__visningsknapp[data-visning="rutenett"] .ohs-team__ikon {
	fill: currentColor;
	stroke: none;
}

.ohs-team__visningsknapp:hover {
	background: rgba(255, 255, 255, .07);
}

.ohs-team__visningsknapp[aria-pressed="true"] {
	background: var(--ohs-gronn);
	color: var(--ohs-mork);
}

/* Gruppa klipper innholdet, så fokusmarkeringen legges innover i stedet
   for utenfor. Ellers ville den blitt borte for tastaturbrukere. */
.ohs-team__visningsknapp:focus-visible {
	outline: 3px solid var(--ohs-oransje);
	outline-offset: -3px;
}

/* -------------------------------------------------------------------------
   Forfatterboks på blogginnlegg

   Samme person, samme profilside, enten man kommer fra teamsiden eller fra
   et innlegg. Hele boksen er klikkbar, men navnet er den eneste lenken:
   pseudoelementet strekker den over boksen. Ett tabstopp, ingen lenke inne
   i en lenke.
   ---------------------------------------------------------------------- */

.ohs-forfatter {
	position: relative;
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 40px 0 0;
	padding: 16px 20px;
	border: 1px solid var(--ohs-kant, #d9d9d9);
	border-radius: 10px;
	background: var(--ohs-flate, #fff);
	transition: border-color .18s ease;
}

.ohs-forfatter:hover,
.ohs-forfatter:focus-within {
	border-color: var(--ohs-aksent, #6b7d61);
}

.ohs-forfatter__bilde {
	flex: 0 0 auto;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	object-position: top;
}

.ohs-forfatter__bilde--tom {
	display: block;
	background: var(--ohs-kant, #d9d9d9);
}

.ohs-forfatter__tekst {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.ohs-forfatter__navn a {
	font-weight: 600;
	text-decoration: none;
	color: inherit;
}

/* Strekker navnelenken over hele boksen, slik at alt er klikkbart. */
.ohs-forfatter__navn a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.ohs-forfatter__navn a:hover {
	text-decoration: underline;
}

.ohs-forfatter__navn a:focus-visible {
	outline: 2px solid var(--ohs-aksent, #6b7d61);
	outline-offset: 3px;
}

.ohs-forfatter__rolle {
	font-size: .9em;
	opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
	.ohs-forfatter { transition: none; }
}