/**
 * Sarepta samtykke
 *
 * Fargene og skriften er temaets egne (awardify): primary #CCA054, base
 * #FBF9F3, mono-1 #565D5F, mono-3 #EAE7DE, Barlow. Banneret legger seg over
 * siden og krever et svar før man kommer videre. «Godta alle» og «Bare
 * nødvendige» har med vilje samme vekt — det er valget som skal sperre, ikke
 * svaret som skal styres.
 */

.sams {
	--sams-flate: #fbf9f3;
	--sams-kant: #eae7de;
	--sams-tekst: #1b1b1b;
	--sams-dempet: #565d5f;
	--sams-handling: #565d5f;
	--sams-handling-hover: #3f4446;
	--sams-merke: #cca054;

	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	/*
	 * flex-start + margin: auto på kortet: kortet står midt på når det får
	 * plass, og øverst når det ikke gjør det. Med align-items: center ville et
	 * høyt kort stikke ut over toppen, der det ikke kan rulles fram.
	 */
	align-items: flex-start;
	justify-content: center;
	padding: clamp( 0.75rem, 2vw, 1.5rem );
	/* Kortet slutter over språkflaggene (bottom 30px + 32px høye). */
	padding-bottom: 5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: rgba( 27, 27, 27, 0.55 );
	opacity: 0;
	transition: opacity 240ms ease-out;
}

.sams--inne {
	opacity: 1;
}

/**
 * display: flex over slår hidden-attributtet, og da blir overlegget liggende
 * usynlig over hele siden etter at man har svart — ingenting kan klikkes.
 * Denne linjen må stå.
 */
.sams[hidden] {
	display: none;
}

/* Siden skal ikke kunne skrolles bak overlegget. */
.sams-sperret {
	overflow: hidden;
}

/**
 * Chatroboten skal ikke kunne brukes før man har svart.
 *
 * Å legge den under overlegget med z-index virker ikke: widgeten tegner
 * innholdet sitt i en shadow-rot med z-index 2147483647, og det laget slipper
 * ut av stablingen til vertselementet. Målt — den tok imot klikk selv med
 * verten på 99998. Derfor skjuler vi den i stedet. visibility, ikke display:
 * widgeten beholder tilstanden sin og kommer tilbake som den var.
 */
.sams-sperret #chattrick-container {
	visibility: hidden !important;
	pointer-events: none !important;
}

/**
 * Språkvelgeren skal nås før man har svart — den som ikke leser norsk, må
 * kunne lese spørsmålet på sitt eget språk først. Weglot ligger fixed på
 * z-index 9999, altså under overlegget vårt (99999); her løftes den over.
 * Alt annet på siden blir liggende bak.
 */
.sams-sperret .country-selector {
	z-index: 100000;
}

.sams__kort {
	box-sizing: border-box;
	width: 100%;
	max-width: 56rem;
	/*
	 * 100 % av overleggets innholdsflate, ikke 100vh. På iPhone er 100vh
	 * høyere enn det som faktisk synes mellom adressefeltet og verktøylinjen,
	 * og da forsvant toppen av kortet (målt 11.11.2026, iOS Safari).
	 */
	max-height: 100%;
	margin: auto 0;
	overflow-y: auto;
	padding: clamp( 1.25rem, 3vw, 2rem );
	background: var( --sams-flate );
	color: var( --sams-tekst );
	border: 1px solid var( --sams-kant );
	border-top: 3px solid var( --sams-merke );
	border-radius: 4px;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.18 );
	font-family: "Barlow", system-ui, sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	transform: translateY( 1.5rem );
	opacity: 0;
	transition: transform 240ms ease-out, opacity 240ms ease-out;
}

.sams--inne .sams__kort {
	transform: translateY( 0 );
	opacity: 1;
}

.sams__kort:focus-visible {
	outline: 2px solid var( --sams-merke );
	outline-offset: 3px;
}

.sams__tittel {
	margin: 0 0 0.5rem;
	font-size: 1.125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
}

.sams__tekst {
	margin: 0 0 1.25rem;
	max-width: 48rem;
	color: var( --sams-dempet );
}

.sams__tekst a {
	color: inherit;
	text-decoration: underline;
}

/**
 * Knappene ligger til høyre, der tommelen er. Rekkefølgen i koden er «Godta
 * alle», «Bare nødvendige», «Tilpass» — row-reverse setter den første lengst ut
 * mot kanten, uten at lesererekkefølgen endres.
 */
.sams__knapper {
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.75rem;
}

.sams__knapper--detaljer {
	margin-top: 1.25rem;
}

.sams__knapp {
	flex: 0 1 auto;
	min-width: 11rem;
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: var( --sams-handling );
	border: 1px solid var( --sams-handling );
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 140ms ease-out;
}

.sams__knapp:hover,
.sams__knapp:focus-visible {
	background: var( --sams-handling-hover );
	border-color: var( --sams-handling-hover );
}

.sams__knapp:focus-visible {
	outline: 2px solid var( --sams-merke );
	outline-offset: 2px;
}

/* «Tilpass» er ikke et svar, og skal ikke se ut som et. */
.sams__knapp--stille {
	min-width: 0;
	color: var( --sams-dempet );
	background: transparent;
	border-color: transparent;
	text-decoration: underline;
	font-weight: 400;
}

.sams__knapp--stille:hover,
.sams__knapp--stille:focus-visible {
	color: var( --sams-tekst );
	background: transparent;
	border-color: transparent;
}

/**
 * Personvernerklæringen er sin egen side i kortet, ikke et felt inni valget.
 * Den ruller med kortet — ett rullefelt, ikke to inni hverandre.
 */
.sams__side[hidden] {
	display: none;
}

.sams__tilbake {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0 0 1rem -0.375rem;
	padding: 0.25rem 0.375rem;
	font: inherit;
	color: var( --sams-dempet );
	background: none;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

.sams__tilbake:hover,
.sams__tilbake:focus-visible {
	color: var( --sams-tekst );
}

.sams__tilbake:focus-visible {
	outline: 2px solid var( --sams-merke );
	outline-offset: 2px;
}

.sams__tilbakepil {
	width: 1.125rem;
	height: 1.125rem;
}

.sams__personverntekst {
	color: var( --sams-dempet );
	font-size: 0.9375rem;
}

.sams__personverntekst h1,
.sams__personverntekst h2,
.sams__personverntekst h3,
.sams__personverntekst h4 {
	margin: 1.25rem 0 0.5rem;
	color: var( --sams-tekst );
	font-size: 1rem;
	font-weight: 600;
}

.sams__personverntekst h1:first-child,
.sams__personverntekst h2:first-child,
.sams__personverntekst h3:first-child {
	margin-top: 0;
}

.sams__personverntekst p,
.sams__personverntekst ul,
.sams__personverntekst ol {
	margin: 0 0 0.75rem;
}

.sams__personverntekst ul,
.sams__personverntekst ol {
	padding-left: 1.25rem;
}

.sams__personverntekst a {
	color: inherit;
	text-decoration: underline;
}

.sams__personverntekst img {
	max-width: 100%;
	height: auto;
}

.sams__venter {
	color: var( --sams-dempet );
	font-style: italic;
}

.sams__detaljer {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var( --sams-kant );
}

.sams__kategori + .sams__kategori {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var( --sams-kant );
}

.sams__bryter {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	cursor: pointer;
}

.sams__bryter input {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var( --sams-handling );
	cursor: pointer;
}

.sams__bryter input:disabled {
	cursor: default;
}

.sams__kategorinavn {
	font-weight: 600;
}

.sams__kategoritekst {
	margin: 0.375rem 0 0 1.75rem;
	color: var( --sams-dempet );
	font-size: 0.9375rem;
}

.sams__tabell {
	width: 100%;
	margin: 0.75rem 0 0 1.75rem;
	max-width: calc( 100% - 1.75rem );
	border-collapse: collapse;
	font-size: 0.875rem;
	color: var( --sams-dempet );
}

.sams__tabell th,
.sams__tabell td {
	padding: 0.375rem 0.75rem 0.375rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var( --sams-kant );
}

.sams__tabell th {
	font-weight: 600;
	color: var( --sams-tekst );
	white-space: nowrap;
}

.sams__tabell code {
	font-size: 0.875em;
}

.sams__skjult {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
}

/**
 * Knotten som åpner valget igjen.
 *
 * Nede til venstre, med klaring over språkflaggene (som står fixed på bottom
 * 30px og er 32px høye — altså til og med 62px). Høyre hjørne er opptatt av
 * chatroboten.
 */
.sams-knott {
	position: fixed;
	left: 20px;
	bottom: 80px;
	z-index: 9998;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	color: #565d5f;
	background: #fbf9f3;
	border: 1px solid #eae7de;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.14 );
	cursor: pointer;
	opacity: 0.85;
	transition: opacity 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}

.sams-knott:hover,
.sams-knott:focus-visible {
	opacity: 1;
	color: #1b1b1b;
	border-color: #cca054;
}

.sams-knott:focus-visible {
	outline: 2px solid #cca054;
	outline-offset: 2px;
}

.sams-knott__ikon {
	width: 1.5rem;
	height: 1.5rem;
}

/* Knotten er veien tilbake — den skal ikke stå og konkurrere med banneret. */
.sams-knott[hidden] {
	display: none;
}

/* Lenken i sidebunnen som åpner valget på nytt. */
.sams-lenke {
	padding: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	text-decoration: underline;
	cursor: pointer;
}

@media ( max-width: 36rem ) {
	/* Stablet, i samme rekkefølge som koden: Godta alle øverst. */
	.sams__knapper {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.sams__knapp {
		flex: 1 1 100%;
		min-width: 0;
	}

	.sams__knapp--stille {
		flex: 1 1 auto;
	}

	.sams__kategoritekst,
	.sams__tabell {
		margin-left: 0;
		max-width: 100%;
	}

	/* Fire kolonner får ikke plass; tabellen blir liggende rader i stedet. */
	.sams__tabell thead {
		display: none;
	}

	.sams__tabell tr {
		display: block;
		padding: 0.5rem 0;
		border-bottom: 1px solid var( --sams-kant );
	}

	.sams__tabell td {
		display: block;
		padding: 0;
		border: 0;
	}

	.sams__tabell td:first-child {
		font-weight: 600;
	}
}

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

	.sams__kort {
		transition: none;
		transform: none;
		opacity: 1;
	}
}

/**
 * Plassholder for innhold fra andre (Google Maps, Podbean). Den sier hvem som
 * får hva, og lar den besøkende velge. Samme farger som banneret.
 */
.sams-innhold {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
	padding: 1.5rem;
	text-align: center;
	color: #565d5f;
	background: #fbf9f3;
	border: 1px solid #eae7de;
	border-radius: 4px;
}

.sams-innhold__tekst {
	max-width: 32rem;
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.sams-innhold__knapp {
	min-height: 2.75rem;
	padding: 0.625rem 1.25rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: #565d5f;
	border: 1px solid #565d5f;
	border-radius: 3px;
	cursor: pointer;
}

.sams-innhold__knapp:hover,
.sams-innhold__knapp:focus-visible {
	background: #3f4446;
	border-color: #3f4446;
}

.sams-innhold__knapp:focus-visible {
	outline: 2px solid #cca054;
	outline-offset: 2px;
}

.sams-innhold__lenke {
	color: inherit;
	font-size: 0.9375rem;
	text-decoration: underline;
}

.sams-innhold__lenke:hover,
.sams-innhold__lenke:focus-visible {
	color: #1b1b1b;
}