@charset "UTF-8";

/**
 * Bygop - Skabelon
 *
 * Visuel videreførelse af J51 Metropolis, bygget responsivt til Joomla 4.
 *
 * @package    Bygop
 * @author     Michael Sønderup Nielsen
 * @company    Joomlakonsulenten
 * @email      michael@joomlakonsulenten.dk
 * @website    https://www.joomlakonsulenten.dk
 * @copyright  Copyright (C) 2026 Joomlakonsulenten
 * @license    GNU General Public License v2 or later
 */

:root {
	--bygop-wrap: 1080px;
	--bygop-panel: #406089;
	--bygop-nav: #476b99;
	--bygop-text: #616068;
	--bygop-accent: #616068;
	--bygop-logoband: #ffffff;
	--bygop-logo-max: 1040px;

	--bygop-heading: #444;
	--bygop-modulehead: #2d2d2d;
	--bygop-body-bg: #ffffff;
	--bygop-card-bg: #ffffff;
	--bygop-dropdown-bg: #ebebeb;
	--bygop-dropdown-text: #555555;
	--bygop-footer-bg: #111111;
	--bygop-footer-modules-bg: rgba(0, 0, 0, 0.95);
	--bygop-footer-text: #bbbbbb;
	--bygop-footer-link: #aaaaaa;

	--bygop-radius-panel: 10px;
	--bygop-radius-card: 5px;
	--bygop-gutter: 20px;

	--bygop-font-body: "Metrophobic", "Trebuchet MS", "Segoe UI", Arial, sans-serif;
	--bygop-font-head: "Open Sans", "Segoe UI", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Grundlag
   -------------------------------------------------------------------------- */

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

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	font-family: var(--bygop-font-body);
	font-size: 12px;
	line-height: 1.5;
	color: var(--bygop-text);
	background-color: var(--bygop-body-bg);
}

.site-bg {
	min-height: 100vh;
	background-color: var(--bygop-body-bg);
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(255, 253, 253, 0.15) 50%,
		rgba(0, 0, 0, 0.15) 100%
	);
	background-attachment: fixed;
	background-size: cover;
	display: flex;
	flex-direction: column;
}

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

a {
	color: var(--bygop-accent, var(--bygop-text));
	text-decoration: none;
}

a:hover,
a:focus-visible {
	text-decoration: underline;
}

.wrap {
	width: 100%;
	max-width: var(--bygop-wrap);
	margin: 0 auto;
}

.sr-only,
.visually-hidden,
.element-invisible,
.sr-only-focusable:not(:focus):not(:focus-within) {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 200;
	padding: 10px 16px;
	background: #fff;
	color: #1a1a1a;
	font-size: 14px;
	border-radius: 0 0 4px 0;
}

.skip-link:focus {
	left: 0;
}

:focus-visible {
	outline: 3px solid #ffd24a;
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Header: blå menubjælke og hvidt logofelt
   -------------------------------------------------------------------------- */

.site-header {
	position: relative;
	z-index: 20;
}

.navbar {
	position: relative;
	z-index: 3;
	min-height: 60px;
	background-color: var(--bygop-nav);
	background-image: linear-gradient(to bottom, rgba(27, 27, 27, 0), rgba(27, 27, 27, 0.35));
	border-bottom: 1px solid rgba(0, 0, 0, 0.55);
	border-radius: 0 0 var(--bygop-radius-panel) var(--bygop-radius-panel);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), inset 0 -1px 1px rgba(225, 225, 225, 0.3);
	display: flex;
	align-items: stretch;
}

.nav-panel {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	justify-content: space-between;
	min-width: 0;
}

.nav-menu {
	display: flex;
	align-items: stretch;
	margin-left: var(--bygop-gutter);
	min-width: 0;
}

/* Hovedmenu, vandret */

.nav-menu ul.mod-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-menu ul.mod-menu > li {
	position: relative;
	display: flex;
	align-items: stretch;
}

.nav-menu ul.mod-menu > li > a,
.nav-menu ul.mod-menu > li > span.separator,
.nav-menu ul.mod-menu > li > .mod-menu__heading {
	display: flex;
	align-items: center;
	margin: 1px 2px;
	padding: 0 12px;
	min-height: 58px;
	color: #fff;
	font-family: var(--bygop-font-head);
	font-size: 13px;
	letter-spacing: 1px;
	line-height: 25px;
	text-decoration: none;
	box-shadow: inset 0 0 1px rgba(225, 225, 225, 0.4);
	transition: background-color 0.35s ease;
}

.nav-menu ul.mod-menu > li > a:hover,
.nav-menu ul.mod-menu > li > a:focus-visible,
.nav-menu ul.mod-menu > li.active > a,
.nav-menu ul.mod-menu > li.current > a {
	background-color: var(--bygop-panel);
	text-decoration: none;
}

/* Kompakt menu, til sites med mange topniveaupunkter.

   Kun relevant for den vandrette desktopmenu. Reglerne er derfor spaerret
   inde bag samme graense som mobilmenuen bruger, ellers ville de overstyre
   mobilens trykflader paa grund af hoejere specificitet. */

@media (min-width: 1025px) {
	.navbar.is-compact .nav-menu {
		margin-left: 10px;
	}

	.navbar.is-compact .nav-menu ul.mod-menu > li > a,
	.navbar.is-compact .nav-menu ul.mod-menu > li > span.separator,
	.navbar.is-compact .nav-menu ul.mod-menu > li > .mod-menu__heading {
		padding: 0 8px;
		letter-spacing: 0.3px;
	}

	.navbar.is-compact .nav-tools {
		padding-right: 12px;
		padding-left: 6px;
	}

	.navbar.is-compact .nav-search input[type="search"],
	.navbar.is-compact .nav-search input[type="text"],
	.navbar.is-compact .nav-search .inputbox {
		width: 140px;
	}
}

/* Undermenuer

   Joomla 6 leverer et stylesheet der skjuler undermenuer med
   display:none styret af aria-hidden. Skabelonens mod_menu tilsidesaettelse
   indlaeser det ikke, men reglen herunder staar som vaern, hvis en anden
   udvidelse skulle traekke det ind. Kernens regler bruger :where() og har
   nul specificitet, saa denne vinder. */

.nav-menu ul.mod-menu__sub,
.nav-menu ul.mod-menu__sub[aria-hidden="true"] {
	display: block;
}

/* Kernens egen foldeknap bruges ikke i dette design */

.nav-menu .mod-menu__toggle-sub {
	display: none;
}


.nav-menu ul.mod-menu__sub {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 220px;
	margin: 0;
	padding: 5px 0;
	list-style: none;
	background: var(--bygop-dropdown-bg);
	border-radius: 0 0 var(--bygop-radius-card) var(--bygop-radius-card);
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s linear, transform 0.2s linear, visibility 0.2s linear;
}

.nav-menu ul.mod-menu li:hover > ul.mod-menu__sub,
.nav-menu ul.mod-menu li:focus-within > ul.mod-menu__sub,
.nav-menu ul.mod-menu li.is-open > ul.mod-menu__sub {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-menu ul.mod-menu__sub li {
	position: relative;
	display: block;
}

.nav-menu ul.mod-menu__sub a {
	display: block;
	padding: 8px 12px;
	color: var(--bygop-dropdown-text);
	font-family: var(--bygop-font-head);
	font-size: 13px;
	letter-spacing: 0.5px;
	border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-menu ul.mod-menu__sub li:first-child > a {
	border-top: 0;
}

.nav-menu ul.mod-menu__sub a:hover,
.nav-menu ul.mod-menu__sub a:focus-visible {
	background-color: rgba(0, 0, 0, 0.06);
	text-decoration: none;
}

/* Lille peger oeverst paa dropdownen */

.nav-menu ul.mod-menu > li > ul.mod-menu__sub::before {
	content: "";
	position: absolute;
	top: -7px;
	left: 26px;
	width: 0;
	height: 0;
	border-left: 7px solid transparent;
	border-right: 7px solid transparent;
	border-bottom: 7px solid var(--bygop-dropdown-bg);
}

/* Tredje niveau folder ud til siden */

.nav-menu ul.mod-menu__sub ul.mod-menu__sub {
	top: 0;
	left: 100%;
	border-radius: var(--bygop-radius-card);
	transform: translateX(6px);
}

.nav-menu ul.mod-menu li:hover > ul.mod-menu__sub ul.mod-menu__sub,
.nav-menu ul.mod-menu__sub li:hover > ul.mod-menu__sub,
.nav-menu ul.mod-menu__sub li:focus-within > ul.mod-menu__sub {
	transform: translateX(0);
}

.nav-menu ul.mod-menu__sub li.parent > a::after {
	content: "";
	position: absolute;
	right: 12px;
	top: 50%;
	width: 0;
	height: 0;
	margin-top: -4px;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-left: 4px solid rgba(0, 0, 0, 0.35);
}

/* Søgefelt og sociale ikoner i menubjælken */

.nav-tools {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px 0 10px;
	flex: 0 0 auto;
}

.nav-search .mod-finder,
.nav-search .search {
	margin: 0;
}

.nav-search form {
	margin: 0;
	display: flex;
	align-items: center;
}

.nav-search input[type="search"],
.nav-search input[type="text"],
.nav-search .inputbox {
	width: 180px;
	max-width: 100%;
	height: 30px;
	padding: 4px 10px 4px 30px;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23777" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="16.5" y1="16.5" x2="21" y2="21"/></svg>');
	background-repeat: no-repeat;
	background-position: 8px center;
	background-size: 15px 15px;
	border: 1px solid rgba(0, 0, 0, 0.25);
	border-radius: 15px;
	background: rgba(255, 255, 255, 0.9);
	color: #333;
	font-family: var(--bygop-font-body);
	font-size: 13px;
}

.nav-search input::placeholder {
	color: #777;
}

.nav-search .btn,
.nav-search button {
	margin-left: 6px;
	padding: 5px 12px;
	border: 0;
	border-radius: 14px;
	background: rgba(0, 0, 0, 0.25);
	color: #fff;
	font-size: 13px;
	cursor: pointer;
}

.social-links {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.social-links__item {
	display: block;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.65);
	transition: background-color 0.25s ease;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 22px 22px;
	mask-size: 22px 22px;
}

.social-links__item:hover,
.social-links__item:focus-visible {
	background-color: #fff;
}

.social-links__item--facebook {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2C6.5 2 2 6.5 2 12c0 5 3.7 9.1 8.4 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.4h-1.2c-1.2 0-1.6.8-1.6 1.6V12h2.7l-.4 2.9h-2.3v7C18.3 21.1 22 17 22 12c0-5.5-4.5-10-10-10z"/></svg>');
}

.social-links__item--instagram {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.3-.1 1.7-.1 4.8-.1zm0 3.2A6.6 6.6 0 1 0 18.6 12 6.6 6.6 0 0 0 12 5.4zm0 10.9A4.3 4.3 0 1 1 16.3 12 4.3 4.3 0 0 1 12 16.3zm6.9-11.1a1.5 1.5 0 1 1-1.5-1.5 1.5 1.5 0 0 1 1.5 1.5z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2.2c3.2 0 3.6 0 4.9.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.3.1 1.7.1 4.9s0 3.6-.1 4.9c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.3.1-1.7.1-4.9.1s-3.6 0-4.9-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2C2.2 15.6 2.2 15.2 2.2 12s0-3.6.1-4.9c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.3-.1 1.7-.1 4.8-.1zm0 3.2A6.6 6.6 0 1 0 18.6 12 6.6 6.6 0 0 0 12 5.4zm0 10.9A4.3 4.3 0 1 1 16.3 12 4.3 4.3 0 0 1 12 16.3zm6.9-11.1a1.5 1.5 0 1 1-1.5-1.5 1.5 1.5 0 0 1 1.5 1.5z"/></svg>');
}

.social-links__item--rss {
	-webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.2 15.6a2.2 2.2 0 1 1 0 4.4 2.2 2.2 0 0 1 0-4.4zM4 4v3.1c6.1 0 11 4.9 11 11h3.1C18.1 10.3 11.7 4 4 4zm0 5.6v3.1c3 0 5.4 2.4 5.4 5.4h3.1c0-4.7-3.8-8.5-8.5-8.5z"/></svg>');
	mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.2 15.6a2.2 2.2 0 1 1 0 4.4 2.2 2.2 0 0 1 0-4.4zM4 4v3.1c6.1 0 11 4.9 11 11h3.1C18.1 10.3 11.7 4 4 4zm0 5.6v3.1c3 0 5.4 2.4 5.4 5.4h3.1c0-4.7-3.8-8.5-8.5-8.5z"/></svg>');
}

/* Undermenuknappen bruges kun i mobilmenuen */

.submenu-toggle {
	display: none;
}

/* Mobilknap */

.nav-toggle {
	display: none;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0 18px;
	min-height: 60px;
	border: 0;
	background: transparent;
	color: #fff;
	font-family: var(--bygop-font-head);
	font-size: 15px;
	letter-spacing: 1px;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 24px;
	height: 3px;
	background: #fff;
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before {
	top: -8px;
}

.nav-toggle__bars::after {
	top: 8px;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
	background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
	transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
	transform: translateY(-8px) rotate(-45deg);
}

/* Logofelt */

.site-logo {
	position: relative;
	z-index: 1;
	margin: -15px var(--bygop-gutter) 15px;
	padding-top: 15px;
	overflow: hidden;
	background-color: var(--bygop-logoband, #fff);
	background-image: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(255, 253, 253, 0.15) 50%,
		rgba(0, 0, 0, 0.15) 100%
	);
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.3), inset 0 0 1px rgba(225, 225, 225, 0.3);
	text-align: center;
}

.site-logo a {
	display: block;
	line-height: 0;
}

.site-logo img {
	width: 100%;
	max-width: var(--bygop-logo-max, 1040px);
	height: auto;
	margin: 0 auto;
	display: block;
}

/* --------------------------------------------------------------------------
   Indholdspanel
   -------------------------------------------------------------------------- */

.panel-wrap {
	flex: 1 0 auto;
}

.panel {
	background-color: var(--bygop-panel);
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: var(--bygop-radius-panel);
	padding: 10px;
	margin-bottom: 40px;
}

.panel__breadcrumbs {
	padding: 2px 6px 8px;
}

.panel__breadcrumbs ol,
.panel__breadcrumbs ul {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
}

.panel__breadcrumbs a {
	color: rgba(255, 255, 255, 0.9);
}

.content-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-start;
}

.maincontent {
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px;
	background: var(--bygop-card-bg);
	border-radius: var(--bygop-radius-card);
	box-shadow:
		inset 0 0 0 1px #fff,
		inset 0 0 60px 0 #999,
		0 0 3px 0 rgba(0, 0, 0, 0.8);
}

.sidebar {
	flex: 0 0 25%;
	max-width: 25%;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Typografi i indholdet
   -------------------------------------------------------------------------- */

.maincontent h1,
.maincontent h2,
.maincontent h3,
.maincontent h4,
.maincontent h5,
.maincontent h6 {
	margin: 0.5em 0;
	padding-top: 0.9em;
	font-family: var(--bygop-font-head);
	font-weight: normal;
	line-height: 1.25;
}

.maincontent h1 {
	font-size: 28px;
	color: var(--bygop-heading);
	padding-top: 0.3em;
}

.maincontent h2 {
	font-size: 1.7em;
	padding-top: 0;
	color: var(--bygop-accent, var(--bygop-text));
}

.maincontent h3 {
	font-size: 1.5em;
	color: var(--bygop-heading);
}

.maincontent h4 {
	font-size: 18px;
	color: #9e9e9e;
}

.maincontent h5 {
	font-size: 1.1em;
}

.maincontent h6 {
	font-size: 1em;
	font-weight: bold;
}

.maincontent p {
	margin-top: 10px;
	margin-bottom: 0;
	padding-bottom: 5px;
}

.maincontent ul {
	list-style: disc outside none;
	margin-left: 20px;
	padding-left: 0;
}

.maincontent ol {
	list-style: decimal outside none;
	margin-left: 20px;
	padding-left: 0;
}

.maincontent blockquote {
	margin: 15px 0;
	padding: 5px 0 5px 20px;
	border-left: 4px solid rgba(0, 0, 0, 0.12);
	font-style: italic;
	line-height: 1.5;
}

.maincontent pre,
.maincontent code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background: #f1f1f1;
	border: 1px solid #e7e7e7;
	border-left-width: 5px;
}

.maincontent pre {
	padding: 10px;
	overflow-x: auto;
}

.maincontent hr {
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.12);
	margin: 20px 0;
}

.page-header h1,
.page-header h2 {
	margin-top: 0;
	padding-top: 0;
}

/* Billedrammer fra den gamle skabelon */

.img-intro-left img,
.img-intro-right img,
.img-intro-none img,
.img-fulltext-left img,
.img-fulltext-right img,
.img-fulltext-none img,
img.frame-1 {
	padding: 4px;
	background: linear-gradient(to bottom, #fafafa 0%, #dddddd 99%);
	border: 1px solid #dddddd;
	border-bottom-width: 2px;
	box-shadow: 0 8px 6px -10px #000;
}

.img-intro-left,
.img-fulltext-left {
	float: left;
	margin: 3px 15px 10px 0;
	max-width: 100%;
}

.img-intro-right,
.img-fulltext-right {
	float: right;
	margin: 3px 0 10px 15px;
	max-width: 100%;
}

/* --------------------------------------------------------------------------
   Tabeller i artikelindhold
   Indholdet redigeres ikke. Tabeller pakkes ved indlæsning i en
   vandret rulleflade, så brede tabeller ikke sprænger layoutet.
   -------------------------------------------------------------------------- */

.table-scroll {
	max-width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	margin: 0 0 10px;
}

.table-scroll.is-scrollable {
	background-image:
		linear-gradient(to right, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0)),
		linear-gradient(to left, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0));
	background-position: left center, right center;
	background-repeat: no-repeat;
	background-size: 14px 100%, 14px 100%;
	background-attachment: local, local;
}

.article-body table {
	max-width: 100%;
}

.article-body table img {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Moduler
   -------------------------------------------------------------------------- */

.mod-card {
	margin-bottom: 10px;
	padding: 15px;
	background: rgba(255, 255, 255, 0.92);
	border-radius: var(--bygop-radius-card);
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.35);
}

.mod-card__title,
.mod-plain__title {
	margin: 0 0 8px;
	padding: 0;
	font-family: var(--bygop-font-head);
	font-size: 20px;
	font-weight: normal;
	line-height: 1.2;
	color: var(--bygop-modulehead);
}

.mod-plain {
	margin-bottom: 15px;
}

.band {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 10px;
}

.band__col {
	flex: 1 1 300px;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   Bund
   -------------------------------------------------------------------------- */

.site-footer {
	flex: 0 0 auto;
	background: var(--bygop-footer-modules-bg);
}

.footer-modules {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	padding: 20px 15px;
}

.footer-modules__col {
	flex: 1 1 220px;
	min-width: 0;
}

.mod-footer {
	color: #ccc;
	font-size: 13px;
}

.mod-footer__title {
	margin: 0 0 8px;
	font-family: var(--bygop-font-head);
	font-size: 20px;
	font-weight: normal;
	color: #848484;
}

.mod-footer a {
	color: #bbb;
}

.footer-bar {
	background: var(--bygop-footer-bg);
	padding: 5px 0;
}

.footer-bar__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 15px;
}

.copyright {
	margin: 10px 0;
	color: var(--bygop-footer-text);
	font-size: 13px;
}

.footermenu ul {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footermenu ul li {
	padding: 5px 0;
}

.footermenu ul ul {
	display: none;
}

.footermenu ul li a {
	display: block;
	padding: 0 10px;
	color: var(--bygop-footer-link);
	font-size: 13px;
	border-right: 1px solid #555;
}

.footermenu ul li:last-child a {
	border-right: 0;
}

.footermenu ul li a:hover,
.footermenu ul li a:focus-visible {
	color: #fff;
}

/* Systembeskeder */

.maincontent .alert {
	margin-bottom: 15px;
	padding: 10px 14px;
	border-radius: 4px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background: #f5f5f5;
	font-size: 13px;
}

.maincontent .alert-success {
	background: #e6f4ea;
	border-color: #b7dfc4;
}

.maincontent .alert-danger,
.maincontent .alert-error {
	background: #fdecea;
	border-color: #f5c2bd;
}

/* --------------------------------------------------------------------------
   Responsivt
   -------------------------------------------------------------------------- */

@media (max-width: 1119px) {
	.wrap {
		max-width: 100%;
	}

	.panel-wrap,
	.band,
	.site-header .wrap {
		padding-left: 10px;
		padding-right: 10px;
	}

	.site-logo {
		margin-left: 0;
		margin-right: 0;
	}
}

/* Vandret menu erstattes af mobilmenu */

@media (max-width: 1024px) {
	.nav-toggle {
		display: flex;
	}

	.navbar {
		flex-wrap: wrap;
		align-items: center;
	}

	.nav-panel {
		flex: 1 0 100%;
		flex-direction: column;
		align-items: stretch;
		display: none;
		padding: 0 0 10px;
	}

	.navbar.is-open .nav-panel {
		display: flex;
	}

	.nav-menu {
		margin-left: 0;
		display: block;
	}

	.nav-menu ul.mod-menu {
		display: block;
	}

	.nav-menu ul.mod-menu > li {
		display: block;
	}

	.nav-menu ul.mod-menu > li > a,
	.nav-menu ul.mod-menu > li > span.separator,
	.nav-menu ul.mod-menu > li > .mod-menu__heading {
		min-height: 0;
		margin: 0;
		padding: 12px 18px;
		font-size: 15px;
		border-top: 1px solid rgba(255, 255, 255, 0.18);
		box-shadow: none;
	}

	.nav-menu ul.mod-menu > li.parent > a::after {
		display: none;
	}

	/* Undermenuer foldes ud i fladen */
	.nav-menu ul.mod-menu__sub {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		min-width: 0;
		padding: 0;
		background: rgba(0, 0, 0, 0.18);
		border-radius: 0;
		box-shadow: none;
		display: none;
	}

	.nav-menu li.is-open > ul.mod-menu__sub {
		display: block;
	}

	.nav-menu ul.mod-menu__sub a {
		padding: 11px 18px 11px 34px;
		color: rgba(255, 255, 255, 0.92);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
		font-size: 14px;
	}

	.nav-menu ul.mod-menu__sub ul.mod-menu__sub a {
		padding-left: 50px;
	}

	.nav-menu ul.mod-menu__sub a:hover,
	.nav-menu ul.mod-menu__sub a:focus-visible {
		background: rgba(0, 0, 0, 0.2);
	}

	.nav-menu ul.mod-menu__sub li.parent > a::after,
	.nav-menu ul.mod-menu > li > ul.mod-menu__sub::before {
		display: none;
	}

	/* Knap til at folde undermenu ud */
	.submenu-toggle {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		height: 100%;
		padding: 0;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.18);
		background: transparent;
		color: #fff;
		cursor: pointer;
	}

	.submenu-toggle::after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		margin: 0 auto;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid rgba(255, 255, 255, 0.85);
		transition: transform 0.2s ease;
	}

	.submenu-toggle[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}

	.nav-menu ul.mod-menu li.parent {
		position: relative;
	}

	.nav-tools {
		padding: 12px 18px 0;
		justify-content: space-between;
	}

	.nav-search input[type="search"],
	.nav-search input[type="text"],
	.nav-search .inputbox {
		width: 100%;
		height: 36px;
	}

	.nav-search {
		flex: 1 1 auto;
	}
}

@media (max-width: 959px) {
	.content-row {
		display: block;
	}

	.sidebar {
		max-width: 100%;
		margin-top: 10px;
	}
}

@media (max-width: 767px) {
	body {
		font-size: 14px;
	}

	.maincontent {
		padding: 15px;
	}

	.site-logo img {
		min-width: 480px;
	}

	/* Faste tabelbredder slippes, så tabeller forsøger at passe skærmen.
	   Det der stadig er for bredt, ruller vandret i .table-scroll. */
	.article-body table[width],
	.article-body table {
		width: auto !important;
		max-width: 100% !important;
	}

	.article-body td[width],
	.article-body th[width] {
		width: auto !important;
	}

	.article-body img[width],
	.article-body img[height] {
		max-width: 100% !important;
		height: auto !important;
	}

	.img-intro-left,
	.img-intro-right,
	.img-fulltext-left,
	.img-fulltext-right {
		float: none;
		display: block;
		margin: 10px 0;
	}

	.footer-bar__inner {
		justify-content: flex-start;
	}

	.footermenu ul li a {
		padding: 4px 10px;
	}
}

@media (max-width: 480px) {
	.site-logo img {
		min-width: 380px;
	}

	.panel {
		padding: 6px;
	}

	.maincontent {
		padding: 12px;
	}
}

@media print {
	.site-header,
	.site-footer,
	.nav-toggle,
	.skip-link {
		display: none !important;
	}

	.site-bg,
	.panel {
		background: none !important;
		border: 0 !important;
	}

	.maincontent {
		box-shadow: none !important;
		padding: 0 !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}