/* ------ basis css */
.page-row {
  display: flex;
  gap: var(--spacing-md);
}
.page-row > div {
	flex: 1;
}
.page-row ul {
	margin-left: var(--spacing-md);
}

/* Responsive page layout */
@media (max-width: 768px) {
	.page-row {
		flex-direction: column;
		gap: var(--spacing-sm, 1rem);
	}
	
	.page-row > div {
		flex: none;
		width: 100%;
	}
}

a:hover {
	color: var(--color-accent, #0284c7);
}

.button {
	display: inline-block;
	padding: 15px 30px;
	background-color: #1e3a8a;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	font-weight: bold;
	font-size: 1.1rem;
	transition: background-color 0.3s ease;
}

.button:hover {
	background-color: #0284c7;
}

.callout {
	border-left: 4px solid;
	padding: 1rem;
	border-radius: 0 0.375rem 0.375rem 0;
	margin: 1rem 0;
}

.callout[data-intent="info"] {
	border-left-color: #3b82f6;
	background-color: #eff6ff;
	color: #1e3a8a;
}

.callout[data-intent="warning"] {
	border-left-color: #f59e0b;
	background-color: #fffbeb;
	color: #92400e;
}

.callout[data-intent="error"] {
	border-left-color: #ef4444;
	background-color: #fef2f2;
	color: #991b1b;
}

.callout p {
	margin-bottom: 0.5rem;
}

.callout p:last-child {
	margin-bottom: 0;
}

.callout a {
	color: inherit;
	font-weight: 600;
}

.callout a:hover {
	opacity: 0.8;
}

/* ------ element accordion css */
/* Accordion Styles */
.accordion-item {
	margin-bottom: 0;
}

.accordion-header {
	width: 100%;
	text-align: left;
	padding: 15px 20px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-bottom: none;
	cursor: pointer;
	font-size: 1.1rem;
	font-weight: 600;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.2s ease;
}

.accordion-header:hover {
	background: #e8e8e8;
}

.accordion-header:focus {
	outline: 2px solid #007cba;
	outline-offset: -2px;
}

.accordion-icon {
	transition: transform 0.3s ease;
	font-size: 1.2rem;
	font-weight: bold;
}

.accordion-content {
	display: none;
	padding: 20px;
	border: 1px solid #ddd;
	border-top: none;
	background: white;
	animation: slideDown 0.3s ease;
}

.accordion-content.show {
	display: block;
}

@keyframes slideDown {
	from {
		opacity: 0;
		max-height: 0;
		padding-top: 0;
		padding-bottom: 0;
	}
	to {
		opacity: 1;
		max-height: 1000px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

/* Last accordion item styling */
.accordion-item:last-child .accordion-header {
	border-bottom: 1px solid #ddd;
}

.accordion-item:last-child .accordion-content {
	border-bottom: 1px solid #ddd;
}

/* ------ element hero css */
.hero {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ------ element osm-box css */
.osm-box {
  height: 250px;
  width: 100%;
}

/* ------ layout css */
/* Palette values come from the website's stored palette map.  A key absent
   from that map renders as a Go placeholder marker, and custom properties
   accept any token sequence, so a var() fallback at the use site would not
   catch it -- `or` with the manifest default is what makes this safe. */
:root {
	--background-page: #eaeef0;
	--background-main: #ffffff;
	--header-background: #acf1bd;
	--header-info-background: #d8eff5;
	--menu-background: #003449;
	--color-on-menu: #ffffff;
	--color-main: #183981;
	--color-accent: #8b0000;
	--color-faded: #5f6360;
	--border-color: #d4dae0;
	--button-background: #acf1bd;
	--font-header: Nunito Sans;
	--font-body: Nunito Sans;

	--max-width: 1160px;
	--brand-width: 340px;
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;
	--rule: 1px solid var(--border-color);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	background: var(--background-page);
	color: var(--color-main);
	font-family: var(--font-body), sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

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

/* Nothing in this layout is rounded. */
.button,
.box,
.hero,
.osm-box,
.accordion-header,
.accordion-content,
img {
	border-radius: 0;
}

/* Header: mint logo block on the left, pale info block plus the menu bar on
   the right.  Neither spans the full window width.
   ------------------------------------------------------------------ */

.site-header__inner {
	display: flex;
	align-items: stretch;
}

.site-brand {
	flex: 0 0 var(--brand-width);
	background: var(--header-background);
	color: var(--color-main);
	text-decoration: none;
	display: flex;
	align-items: center;
	padding: var(--spacing-lg) var(--spacing-md);
	font-family: var(--font-header), sans-serif;
	font-size: 2.4rem;
	font-weight: 800;
	line-height: 1.05;
}

.site-header__side {
	flex: 1;
	display: flex;
	flex-direction: column;
	background: var(--header-info-background);
}

.site-contact {
	flex: 1;
	padding: var(--spacing-md) var(--spacing-lg);
	color: var(--color-main);
	font-size: 0.95rem;
	line-height: 1.5;
}

.site-contact strong {
	font-weight: 700;
}

.site-brand a,
.site-contact a,
.site-footer a {
	color: inherit;
}

/* Slot content arrives wrapped in .page-row; keep the bands tight. */
.site-header .page-row,
.site-footer .page-row,
.page-hero .page-row {
	gap: 0;
	margin: 0;
}

.site-header .page-row p,
.site-footer .page-row p {
	margin: 0;
}

.site-brand h1,
.site-brand h2,
.site-brand h3,
.site-brand p {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	margin: 0;
	color: inherit;
	text-transform: none;
}

/* Contact details laid out as icon + value pairs. */
.site-contact .contact-items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs) var(--spacing-xl);
	align-items: center;
	margin-bottom: var(--spacing-xs);
}

.site-contact .contact-item {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

.site-contact .contact-item svg {
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
}

.site-contact .contact-emergency {
	font-weight: 700;
	line-height: 1.45;
}

/* Menu bar
   ------------------------------------------------------------------ */

.site-nav {
	background: var(--menu-background);
}

nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav > ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

nav li {
	position: relative;
}

.site-nav a {
	display: block;
	padding: 0.7rem var(--spacing-md);
	font-family: var(--font-header), sans-serif;
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	text-decoration: none;
	white-space: nowrap;
	color: var(--color-on-menu);
}

/* Beats the generic a:hover further down, which would otherwise tint the
   menu bar with the accent colour. */
.site-nav > ul > li > a:hover,
.site-nav > ul > li.active > a,
.site-nav > ul > li.active-child > a {
	background: rgba(255, 255, 255, 0.14);
	color: var(--header-background);
}

/* Dropdowns: square, light, hard-edged. */
.site-nav ul ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	min-width: 250px;
	background: var(--background-main);
	border: var(--rule);
}

.site-nav ul ul ul {
	top: 0;
	left: 100%;
}

.site-nav li:hover > ul {
	display: block;
}

.site-nav ul ul a {
	color: var(--color-main);
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	white-space: normal;
	padding: 0.55rem var(--spacing-sm);
	border-left: 4px solid transparent;
}

.site-nav ul ul li + li > a {
	border-top: var(--rule);
}

/* Dropdowns sit on the content background, so they keep the text colour and
   mark the active item with the menu bar's own colour rather than the accent. */
.site-nav ul ul a:hover,
.site-nav ul ul li.active > a,
.site-nav ul ul li.active-child > a {
	background: var(--background-page);
	border-left-color: var(--menu-background);
	color: var(--color-main);
}

/* Content: a white sheet on the page background
   ------------------------------------------------------------------ */

/* The sheet butts straight up against the menu bar -- no page tint between. */
.main {
	flex: 1;
	width: 100%;
	padding: 0 0 var(--spacing-xl);
}

.sheet {
	background: var(--background-main);
	padding: var(--spacing-lg);
}

.sheet > .page-row + .page-row {
	margin-top: var(--spacing-lg);
}

.page-hero {
	margin-bottom: var(--spacing-lg);
}

.page-hero img,
.sheet img {
	display: block;
	max-width: 100%;
	height: auto;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-header), sans-serif;
	color: var(--color-main);
	line-height: 1.25;
	margin-bottom: var(--spacing-sm);
}

/* Section labels sit at body size; only the page title is display-sized. */
h1 { font-size: 2rem; font-weight: 800; margin-bottom: var(--spacing-md); }
h2 { font-size: 1.35rem; font-weight: 800; }
h3 { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.25rem; }
h4 { font-size: 1rem; font-weight: 700; }
h5, h6 { font-size: 0.95rem; font-weight: 700; }

p {
	margin-bottom: var(--spacing-sm);
}

.sheet ul,
.sheet ol {
	margin: 0 0 var(--spacing-sm) var(--spacing-md);
}

.sheet li {
	margin-bottom: 0.2rem;
}

/* Links never recolour on hover -- the accent colour is reserved for
   emphasised body copy, not for link states. */
a {
	color: var(--color-main);
}

a:hover {
	text-decoration: underline;
}

.site-brand:hover,
.site-nav a:hover {
	text-decoration: none;
}

/* Trailing "Opdateret <month> <year>" note. */
.page-updated {
	margin-top: var(--spacing-lg);
	padding-top: var(--spacing-xs);
	border-top: var(--rule);
	font-size: 0.82rem;
	color: var(--color-faded);
}

/* Plain definition-style hours, not a data table. */
.hours {
	margin-bottom: var(--spacing-sm);
}

.hours div {
	display: flex;
	gap: var(--spacing-sm);
}

.hours dt,
.hours span:first-child {
	flex: 0 0 8.5rem;
}

/* Hero element (used inside page content).  Its template sets padding,
   min-height and heading size inline, so only what is not inlined applies. */
.hero h1 {
	font-family: var(--font-header), sans-serif;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* Box element as a square card. */
.box {
	height: 100%;
	background: var(--background-page);
	border: var(--rule);
	padding: 0 0 var(--spacing-sm);
}

.box img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-bottom: var(--spacing-sm);
}

.box h3,
.box h4,
.box > div {
	padding: 0 var(--spacing-sm);
}

.box h3 {
	font-size: 1.05rem;
	text-transform: none;
	margin-top: var(--spacing-sm);
	margin-bottom: 0.15rem;
}

.box h4 {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--color-faded);
	margin-bottom: var(--spacing-xs);
}

.box p:last-child {
	margin-bottom: 0;
}

/* Mint button with a hard offset shadow. */
.button {
	display: inline-block;
	padding: 0.65rem 1.4rem;
	background-color: var(--button-background);
	color: var(--color-main);
	font-family: var(--font-header), sans-serif;
	font-size: 1rem;
	font-weight: 800;
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-shadow: 5px 5px 0 #000000;
	transition: background-color 0.15s ease;
}

/* Darken only -- the button must not shift under the cursor. */
.button:hover {
	color: var(--color-main);
	background-color: color-mix(in srgb, var(--button-background) 90%, black);
}

/* Accordion */
.accordion-header {
	background: var(--background-page);
	border: var(--rule);
	border-bottom: none;
	font-family: var(--font-header), sans-serif;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-main);
	padding: 0.8rem var(--spacing-sm);
}

.accordion-header:hover {
	background: color-mix(in srgb, var(--background-page) 88%, black);
}

.accordion-header:focus {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

.accordion-content {
	border: var(--rule);
	border-top: none;
	background: var(--background-main);
	padding: var(--spacing-sm);
}

.accordion-item:last-child .accordion-header,
.accordion-item:last-child .accordion-content {
	border-bottom: var(--rule);
}

.osm-box {
	border: var(--rule);
}

/* Tables stay plain: no zebra, no filled header row. */
table {
	width: auto;
	border-collapse: collapse;
	margin: 0 0 var(--spacing-sm);
}

th, td {
	padding: 0.1rem var(--spacing-md) 0.1rem 0;
	text-align: left;
	vertical-align: top;
	border: none;
}

th {
	font-weight: 700;
}

/* Info band: full-bleed strip between the content sheet and the footer.
   Its rows sit edge to edge with no gutter, so two slots read as two solid
   panels meeting in the middle.
   ------------------------------------------------------------------ */

.site-band .page-row {
	gap: 0;
	margin: 0;
	align-items: stretch;
}

.site-band .page-row > div {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* A heading row above the panels. */
.band-heading {
	background: var(--header-info-background);
	padding: var(--spacing-md) var(--spacing-lg);
	text-align: center;
}

.band-heading h1,
.band-heading h2,
.band-heading h3 {
	margin: 0;
	font-size: 1.6rem;
	font-weight: 800;
	text-transform: none;
}

/* Coloured panel with an icon beside centred copy. */
.band-callout {
	flex: 1;
	background: var(--header-background);
	color: var(--color-main);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-lg);
	padding: var(--spacing-xl) var(--spacing-lg);
	text-align: center;
}

.band-callout svg {
	flex: 0 0 auto;
	width: 78px;
	height: 78px;
}

.band-callout p,
.band-callout h2,
.band-callout h3 {
	margin: 0;
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1.3;
	text-transform: none;
}

.site-band .osm-box {
	flex: 1;
	height: 100%;
	min-height: 300px;
	border: none;
}

@media (max-width: 768px) {
	.band-callout {
		gap: var(--spacing-sm);
		padding: var(--spacing-lg) var(--spacing-sm);
	}

	.band-callout svg {
		width: 52px;
		height: 52px;
	}

	.band-callout p,
	.band-callout h2,
	.band-callout h3 {
		font-size: 1.15rem;
	}

	.site-band .osm-box {
		min-height: 240px;
	}
}

/* Footer
   ------------------------------------------------------------------ */

.site-footer {
	margin-top: auto;
	background: var(--menu-background);
	color: var(--color-on-menu);
}

.site-footer .wrap {
	padding: var(--spacing-lg) var(--spacing-md);
	font-size: 0.88rem;
}

.site-footer p {
	margin-bottom: 0.35rem;
}

.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4 {
	color: var(--color-on-menu);
	font-size: 1.05rem;
}

/* Mobile navigation
   ------------------------------------------------------------------ */

.mobile-menu-button {
	display: none;
	flex-direction: column;
	justify-content: space-around;
	width: 1.75rem;
	height: 1.5rem;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	margin: var(--spacing-sm);
	z-index: 1001;
}

.hamburger-line {
	width: 100%;
	height: 2px;
	background: var(--color-main);
	transition: transform 0.2s ease, opacity 0.2s ease;
	transform-origin: center;
}

.mobile-menu-button.active .hamburger-line:nth-child(1) {
	transform: rotate(45deg) translate(3px, 3px);
}

.mobile-menu-button.active .hamburger-line:nth-child(2) {
	opacity: 0;
}

.mobile-menu-button.active .hamburger-line:nth-child(3) {
	transform: rotate(-45deg) translate(4px, -4px);
}

.mobile-nav {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: var(--menu-background);
	z-index: 1000;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-nav.active {
	opacity: 1;
	visibility: visible;
}

.mobile-nav__content {
	padding: 4rem var(--spacing-sm) var(--spacing-sm);
	height: 100%;
	overflow-y: auto;
}

.mobile-nav li {
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.mobile-nav a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.85rem 0;
	font-family: var(--font-header), sans-serif;
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	color: var(--color-on-menu);
}

.mobile-nav a:hover,
.mobile-nav li.active > a {
	color: var(--header-background);
}

.mobile-submenu-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	margin-left: 0.5rem;
	color: inherit;
	font-size: 1rem;
	transition: transform 0.25s ease;
	flex-shrink: 0;
}

.mobile-submenu-toggle.active {
	transform: rotate(180deg);
}

.mobile-nav ul ul {
	display: none;
	background: rgba(0, 0, 0, 0.2);
	margin: 0;
	padding: 0;
}

.mobile-nav ul ul.show {
	display: block;
}

.mobile-nav ul ul a {
	padding-left: var(--spacing-sm);
	font-size: 0.9rem;
}

.mobile-nav ul ul ul a {
	padding-left: var(--spacing-lg);
	font-size: 0.85rem;
}

body.mobile-menu-open {
	overflow: hidden;
}

@media (max-width: 1024px) {
	:root {
		--brand-width: 260px;
	}

	.site-brand {
		font-size: 1.8rem;
	}

	.site-nav a {
		padding: 0.7rem var(--spacing-sm);
	}
}

@media (max-width: 768px) {
	:root {
		--spacing-xs: 0.25rem;
		--spacing-sm: 0.75rem;
		--spacing-md: 1rem;
		--spacing-lg: 1.25rem;
		--spacing-xl: 1.5rem;
	}

	.site-header__inner {
		flex-wrap: wrap;
		align-items: center;
	}

	.site-brand {
		flex: 1;
		font-size: 1.5rem;
		padding: var(--spacing-md);
	}

	.site-header__side {
		flex: 1 0 100%;
		order: 3;
	}

	.desktop-nav {
		display: none;
	}

	.mobile-menu-button {
		display: flex;
	}

	.mobile-nav {
		display: block;
	}

	.sheet {
		padding: var(--spacing-md);
	}

	.hours dt,
	.hours span:first-child {
		flex-basis: 7rem;
	}

	h1 { font-size: 1.6rem; }
	h2 { font-size: 1.2rem; }
}