/* Grunnoppsett */
html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

:root {
	--page-width: 1180px;
	--sidebar-width: 240px;
	--text: #202124;
	--muted: #5f6368;
	--border: #dadce0;
	--surface: #f8f9fa;
	--surface-hover: #f1f3f4;
	--link: #1a73e8;
	--link-visited: #5f3dc4;
	--radius: 8px;
}

body {
	margin: 0;
	background: #fff;
	color: var(--text);
	font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

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

/* Sideoppsett */
.site-layout {
	width: min(var(--page-width), calc(100% - 48px));
	margin: 0 auto;
	display: grid;
	grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

.sidebar {
	position: sticky;
	top: 24px;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	padding: 24px 0;
	scrollbar-width: thin;
}

.desktop-logo-link,
.mobile-logo-link {
	display: inline-block;
}

.logo {
	display: block;
	width: 100%;
	max-width: 190px;
}

.page-column {
	min-width: 0;
}

/* Navigasjon */
.site-navigation {
	margin-top: 32px;
}

.site-navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-navigation li {
	margin: 2px 0;
	list-style: none;
}

.site-navigation a {
	display: block;
	padding: 9px 12px;
	border-radius: 6px;
	color: #3c4043;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.35;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
	background: var(--surface-hover);
	color: var(--link);
	outline: none;
}

.site-navigation .current > a,
.site-navigation .active > a,
.site-navigation li.current a,
.site-navigation li.active a {
	background: #e8f0fe;
	color: #174ea6;
	font-weight: 700;
}

/* Mobil toppmeny */
.mobile-header {
	display: none;
}

.menu-toggle {
	border: 1px solid var(--border);
	border-radius: 6px;
	background: #fff;
	color: var(--text);
	padding: 8px 12px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.menu-toggle:hover,
.menu-toggle:focus-visible {
	background: var(--surface-hover);
	outline: none;
}

.menu-icon {
	margin-right: 5px;
	font-size: 18px;
	vertical-align: -1px;
}

/* Innhold */
.content {
	width: 100%;
	max-width: 820px;
	padding: 64px 0 32px;
}

.content > :first-child {
	margin-top: 0;
}

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
	color: var(--text);
	font-weight: 600;
	line-height: 1.25;
	padding: 0;
	border: 0;
}

.content h1 {
	margin: 0 0 28px;
	font-size: clamp(2rem, 5vw, 2.75rem);
	letter-spacing: -0.035em;
}

.content h2 {
	margin: 56px 0 18px;
	padding-top: 8px;
	font-size: clamp(1.25rem, 3vw, 1.375rem);
	letter-spacing: -0.025em;
}

.content h3 {
	margin: 38px 0 14px;
	font-size: 1rem;
}

.content h4 {
	margin: 30px 0 12px;
	font-size: 1rem;
}

.content h5,
.content h6 {
	margin: 24px 0 10px;
	font-size: 1rem;
}

.content p,
.content ul,
.content ol,
.content blockquote,
.content pre,
.content table {
	margin: 0 0 1.35rem;
}

.content p,
.content li,
.content td,
.content th {
	font-size: 1rem;
}

.content p,
.content b,
.content strong {
	padding: 0;
}

.content ul,
.content ol {
	padding-left: 1.4rem;
}

.content li {
	margin: 0.35rem 0;
	color: var(--text);
}

.content a {
	color: var(--link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}

.content a:visited {
	color: var(--link-visited);
}

.content a:hover,
.content a:focus-visible {
	text-decoration-thickness: 2px;
}

.content img {
	display: block;
	max-width: 100% !important;
	height: auto !important;
	margin: 1.5rem 0;
}

.content blockquote {
	margin-left: 0;
	padding: 0.25rem 0 0.25rem 1rem;
	border-left: 4px solid var(--border);
	color: var(--muted);
}

.content hr {
	margin: 2.5rem 0;
	border: 0;
	border-top: 1px solid var(--border);
}

/* Forside-/kortlister */
.mainlist {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 20px 12px;
	align-items: start;
	max-width: 100%;
	margin: 0 auto;
}

.mainlist img {
	width: 100%;
	max-width: 200px;
	margin: 0;
	border-radius: var(--radius);
}

.mainlist a:hover img {
	box-shadow: 0 4px 18px rgb(60 64 67 / 18%);
}

.HTML-list a,
.HTML-list a:hover {
	padding: 8px;
	color: #5f6368;
	font-size: 10px;
	text-decoration: none;
}

/* Tabeller */
.content table {
	width: 100%;
	border-collapse: collapse;
	table-layout: auto;
}

.content th,
.content td {
	padding: 10px 12px;
	border: 1px solid var(--border);
	text-align: left;
	vertical-align: top;
	word-break: normal;
	overflow-wrap: anywhere;
}

.content th {
	background: var(--surface);
	color: var(--text);
	font-weight: 700;
}

.content tr:nth-child(even) td {
	background: #fcfcfc;
}

.content td:nth-child(1) {
	width: 30%;
}

.largebox {
	width: 100%;
	border: 0;
}

table.shrink {
	width: 100%;
	max-width: 400px;
	border-collapse: separate;
}

.shrink td,
.shrink th {
	white-space: nowrap;
	font-size: 12px;
}

.zeromarg {
	margin: 0;
	padding: 0;
}

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

/* Bunntekst */
.footer {
	width: 100%;
	max-width: 820px;
	padding: 24px 0 40px;
	border-top: 1px solid var(--border);
}

.footer p {
	margin: 4px 0;
	padding: 0;
	color: #5f6368;
	font-size: 12px;
	line-height: 1.5;
}

.footer a {
	color: inherit;
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}

/* Nettbrett og mobil */
@media screen and (max-width: 860px) {
	body {
		padding-top: 65px;
	}

	.mobile-header {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		height: 65px;
		padding: 10px 18px;
		background: rgb(255 255 255 / 96%);
		border-bottom: 1px solid var(--border);
		backdrop-filter: blur(8px);
	}

	.mobile-header .logo {
		max-width: 135px;
	}

	.site-layout {
		display: block;
		width: min(100% - 32px, 820px);
	}

	.sidebar {
		position: static;
		max-height: none;
		overflow: visible;
		padding: 0;
	}

	.desktop-logo-link {
		display: none;
	}

	.site-navigation {
		position: fixed;
		top: 65px;
		left: 0;
		right: 0;
		z-index: 999;
		display: none;
		margin: 0;
		max-height: calc(100vh - 65px);
		overflow-y: auto;
		padding: 12px 16px 24px;
		background: #fff;
		border-bottom: 1px solid var(--border);
		box-shadow: 0 8px 18px rgb(60 64 67 / 16%);
	}

	.site-navigation.is-open {
		display: block;
	}

	.site-navigation a {
		padding: 11px 12px;
		font-size: 15px;
	}

	.content {
		max-width: none;
		padding: 34px 0 28px;
	}

	.footer {
		max-width: none;
	}
}

@media screen and (max-width: 600px) {
	.mobile-header {
		padding-inline: 12px;
	}

	.site-layout {
		width: min(100% - 24px, 820px);
	}

	.content h1 {
		margin-bottom: 22px;
	}

	.content h2 {
		margin-top: 42px;
	}


	.mainlist {
		grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
		gap: 16px 8px;
	}

	.content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

@media screen and (max-width: 430px) {
	.shrink {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Rød profil for Ingrid Elisabeth */
:root {
	--brand: #8c0000;
	--brand-dark: #650000;
}

body {
	background: var(--brand);
}

.sidebar {
	margin-top: 24px;
	padding: 24px;
	background: linear-gradient(145deg, var(--brand), var(--brand-dark));
	border-radius: var(--radius);
	box-shadow: 0 8px 24px rgb(44 0 0 / 24%);
}

.logo {
	max-width: 220px;
}

.site-navigation a {
	color: #fff;
}

.site-navigation a:hover,
.site-navigation a:focus-visible {
	background: rgb(255 255 255 / 14%);
	color: #fff;
}

.site-navigation .current > a,
.site-navigation .active > a,
.site-navigation li.current a,
.site-navigation li.active a {
	background: #fff;
	color: var(--brand);
}

.page-column {
	min-height: 100vh;
	padding: 0 32px;
	background: #fff;
	box-shadow: 0 0 28px rgb(44 0 0 / 18%);
}

@media screen and (max-width: 860px) {
	body {
		background: #fff;
	}

	.mobile-header {
		background: rgb(140 0 0 / 97%);
		border-bottom-color: var(--brand-dark);
	}

	.menu-toggle {
		border-color: rgb(255 255 255 / 55%);
		background: transparent;
		color: #fff;
	}

	.menu-toggle:hover,
	.menu-toggle:focus-visible {
		background: rgb(255 255 255 / 14%);
	}

	.sidebar {
		margin: 0;
		padding: 0;
		background: transparent;
		border-radius: 0;
		box-shadow: none;
	}

	.site-navigation {
		background: var(--brand);
		border-bottom-color: var(--brand-dark);
	}

	.page-column {
		min-height: 0;
		padding: 0;
		box-shadow: none;
	}
}

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