/* maralm.nl — De Mare kleurenprofiel (UTF-8) */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Montserrat:wght@500;600;700&display=swap");

:root {
	color-scheme: light;
	--bg: #ffffff;
	--fg: #1a3d32;
	--primary: #198754;
	--primary-dark: #146c43;
	--primary-light: #2d9967;
	--primary-fg: #ffffff;
	--secondary: #9cd454;
	--secondary-fg: #1a3d32;
	--accent: #f1f6f4;
	--accent-fg: #1a3d32;
	--card-bg: #ffffff;
	--card-fg: #1a3d32;
	--border: #d1e7dd;
	--input-bg: #eef6f2;
	--muted: #f1f6f4;
	--muted-fg: #4d6b62;
	--radius: 1.25rem;
	--shadow-soft: 0 2px 4px rgba(0, 0, 0, 0.1);
	--shadow-strong: 0 2px 8px rgba(255, 255, 255, 0.2);
	--font-sans: "Inter", system-ui, sans-serif;
	--font-heading: "Montserrat", sans-serif;
	--font-mono: Monaco, monospace;
	--mare-blue: #049dd9;
	--mare-blue-dark: #0378a8;
	--mare-amber: #d97706;
	--mare-amber-dark: #b45309;
	--footer-legal: #d4eebb;

	/* Impact-template (main.css) */
	--default-font: var(--font-sans);
	--heading-font: var(--font-heading);
	--nav-font: var(--font-sans);
	--background-color: var(--bg);
	--default-color: var(--fg);
	--heading-color: var(--fg);
	--accent-color: var(--primary);
	--surface-color: var(--card-bg);
	--contrast-color: var(--primary-fg);
	--nav-color: var(--fg);
	--nav-hover-color: var(--primary);
	--nav-mobile-background-color: var(--card-bg);
	--nav-dropdown-background-color: var(--card-bg);
	--nav-dropdown-color: var(--fg);
	--nav-dropdown-hover-color: var(--primary);

	/* Bootstrap-knoppen */
	--bs-primary: #146c43;
	--bs-primary-rgb: 20, 108, 67;
	--bs-secondary: #9cd454;
	--bs-secondary-rgb: 156, 212, 84;
	--bs-link-color: var(--primary-dark);
	--bs-link-hover-color: var(--primary);
	--bs-border-radius: 0.8rem;
	--bs-border-radius-lg: var(--radius);
}

.light-background {
	--background-color: var(--muted);
	--surface-color: var(--card-bg);
}

.dark-background {
	--background-color: #0f1f1a;
	--default-color: #f4f4f4;
	--heading-color: #f4f4f4;
	--surface-color: #1a3d32;
	--contrast-color: #ffffff;
}

.accent-background {
	--background-color: var(--primary-dark);
	--default-color: var(--primary-fg);
	--heading-color: var(--primary-fg);
	--accent-color: var(--secondary);
	--surface-color: var(--primary-light);
	--contrast-color: var(--primary-fg);
}

a:hover {
	color: var(--secondary);
}

/* Header: lichte balk + groene topbar */
.header {
	--background-color: var(--card-bg);
	--heading-color: var(--fg);
	--default-color: var(--fg);
	background-color: var(--card-bg);
	border-bottom: 1px solid var(--border);
	box-shadow: var(--shadow-soft);
}

.header .topbar {
	background-color: var(--primary-dark);
}

.header .logo h1 {
	font-family: var(--font-heading);
	color: var(--fg);
}

.header .logo span {
	color: var(--secondary);
}

/* Hero & paginatitel */
.hero.accent-background {
	background: linear-gradient(
		125deg,
		var(--primary-dark) 0%,
		var(--primary) 45%,
		var(--primary-light) 100%
	);
}

.hero .btn-get-started {
	background-color: var(--secondary);
	color: var(--secondary-fg);
	border-color: var(--secondary);
	font-family: var(--font-sans);
	font-weight: 700;
	border-radius: 0.8rem;
}

.hero .btn-get-started:hover {
	background-color: #ffffff;
	color: var(--primary-dark);
	border-color: #ffffff;
}

.hero .btn-get-started.maralm-btn-outline,
.hero .btn-get-started[style*="transparent"] {
	background: transparent !important;
	color: var(--primary-fg) !important;
	border: 2px solid var(--primary-fg) !important;
}

.hero .btn-get-started.maralm-btn-outline:hover,
.hero .btn-get-started[style*="transparent"]:hover {
	background: var(--secondary) !important;
	color: var(--secondary-fg) !important;
	border-color: var(--secondary) !important;
}

.page-title.accent-background {
	background: linear-gradient(
		125deg,
		var(--primary-dark) 0%,
		var(--primary) 50%,
		var(--primary-light) 100%
	);
}

.page-title h1 {
	color: #fff;
}

.btn-primary {
	--bs-btn-bg: var(--primary-dark);
	--bs-btn-border-color: var(--primary-dark);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-active-bg: color-mix(in srgb, var(--primary-dark), #000 10%);
	--bs-btn-active-border-color: color-mix(in srgb, var(--primary-dark), #000 10%);
	font-weight: 600;
}

.btn-outline-primary {
	--bs-btn-color: var(--primary);
	--bs-btn-border-color: var(--primary);
	--bs-btn-hover-bg: var(--primary);
	--bs-btn-hover-border-color: var(--primary);
	--bs-btn-hover-color: var(--primary-fg);
}

.btn-outline-secondary {
	--bs-btn-color: var(--fg);
	--bs-btn-border-color: var(--border);
	--bs-btn-hover-bg: var(--muted);
	--bs-btn-hover-border-color: var(--border);
	--bs-btn-hover-color: var(--fg);
}

.section-title h2,
h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
}

/* Gekleurde koppen (portal-stijl, De Mare-palet) */
.hero.accent-background h2 > span:first-child {
	color: var(--secondary);
}

.hero.accent-background h2 .accent {
	color: var(--primary-fg);
}

/* Template main.css: .hero p met 40% transparantie — op iPad te licht */
.hero.accent-background p {
	color: var(--primary-fg);
	opacity: 1;
	font-weight: 500;
	line-height: 1.65;
	max-width: 36em;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.hero:not(.accent-background) p {
	color: var(--fg);
	opacity: 1;
}

body,
.section p,
.maralm-home-about p {
	color: var(--fg);
}

#about .section-title h2 {
	color: var(--primary);
}

#about .section-title h2::after {
	background: var(--secondary);
}

.maralm-card-grid .section-title h2 {
	color: var(--mare-blue);
}

.maralm-card-grid .section-title h2::after {
	background: var(--mare-blue);
}

#school-gallery .section-title h2 {
	color: var(--fg);
}

#school-gallery .section-title h2::after {
	background: var(--primary);
}

.maralm-startstrip-title {
	color: var(--primary);
}

.maralm-card-grid .card-title a {
	color: var(--primary);
}

.maralm-card-grid .col-md-6:nth-child(3n + 1) .card-title a {
	color: var(--primary);
}

.maralm-card-grid .col-md-6:nth-child(3n + 2) .card-title a {
	color: var(--mare-blue);
}

.maralm-card-grid .col-md-6:nth-child(3n) .card-title a {
	color: var(--fg);
}

/* Snelkoppeling-tegels onder hero */
.hero .row.gy-4 > .col-xl-3:nth-child(1) .icon-box {
	background: var(--secondary);
}

.hero .row.gy-4 > .col-xl-3:nth-child(1) .icon-box .icon,
.hero .row.gy-4 > .col-xl-3:nth-child(1) .icon-box .title a {
	color: var(--secondary-fg);
}

.hero .row.gy-4 > .col-xl-3:nth-child(2) .icon-box {
	background: var(--mare-blue);
}

.hero .row.gy-4 > .col-xl-3:nth-child(2) .icon-box .icon,
.hero .row.gy-4 > .col-xl-3:nth-child(2) .icon-box .title a {
	color: #fff;
}

.hero .row.gy-4 > .col-xl-3:nth-child(3) .icon-box {
	background: var(--primary);
}

.hero .row.gy-4 > .col-xl-3:nth-child(3) .icon-box .icon,
.hero .row.gy-4 > .col-xl-3:nth-child(3) .icon-box .title a {
	color: var(--primary-fg);
}

.hero .row.gy-4 > .col-xl-3:nth-child(4) .icon-box {
	background: var(--fg);
}

.hero .row.gy-4 > .col-xl-3:nth-child(4) .icon-box .icon,
.hero .row.gy-4 > .col-xl-3:nth-child(4) .icon-box .title a {
	color: #fff;
}

.hero .row.gy-4 > .col-xl-3 .icon-box:hover {
	filter: brightness(1.06);
}

.hero .row.gy-4 > .col-xl-3 .icon-box:hover .icon,
.hero .row.gy-4 > .col-xl-3 .icon-box:hover .title a {
	color: #fff;
}

/* Sectiekoppen op binnenpagina's */
.maralm-heading-primary h2,
h2.maralm-heading-primary,
.maralm-heading-primary {
	color: var(--primary);
	border-bottom-color: var(--primary);
}

.maralm-heading-secondary h2,
.maralm-heading-secondary {
	color: color-mix(in srgb, var(--primary), #000 8%);
	border-bottom-color: var(--secondary);
}

.maralm-heading-blue h2,
h2.maralm-heading-blue,
.maralm-heading-blue {
	color: var(--mare-blue);
	border-bottom-color: var(--mare-blue);
}

.maralm-heading-fg h2,
.maralm-heading-fg {
	color: var(--fg);
	border-bottom-color: var(--fg);
}

.maralm-heading-fg h2::after,
.maralm-heading-primary h2::after,
.maralm-heading-secondary h2::after,
.maralm-heading-blue h2::after {
	display: none;
}

.maralm-subheading-accent {
	color: var(--mare-blue);
}

.maralm-card-grid .card,
.maralm-search-bar,
.maralm-alert {
	border-radius: var(--radius);
}

.maralm-card-grid .card {
	border: 1px solid var(--border);
	box-shadow: var(--shadow-soft);
}

/* maralm.nl — componenten */

.skip-link {
	position: absolute;
	left: 1rem;
	top: -3rem;
	z-index: 1000;
	background: var(--primary);
	color: var(--primary-fg);
	padding: 0.55rem 0.8rem;
	border-radius: 0.6rem;
	text-decoration: none;
}

.skip-link:focus {
	top: 1rem;
	outline: 3px solid var(--secondary);
	outline-offset: 3px;
}

.maralm-logo {
	height: 2.25rem;
	width: auto;
}

.inner-page main {
	padding-top: 6rem;
}

.maralm-startstrip {
	padding: 2rem 0 1rem;
}

.maralm-startstrip-title {
	font-size: 1.35rem;
	margin-bottom: 0.35rem;
	font-family: var(--font-heading);
}

.maralm-startstrip-lead {
	color: var(--muted-fg);
	margin-bottom: 1rem;
}

.maralm-startstrip-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
}

.maralm-pill {
	display: inline-block;
	padding: 0.45rem 1rem;
	border-radius: 2rem;
	background: var(--primary);
	color: var(--primary-fg) !important;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.maralm-pill:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-soft);
	background: var(--secondary);
	color: var(--secondary-fg) !important;
}

.maralm-card-grid .card-img-top {
	height: 200px;
	object-fit: cover;
}

.maralm-link-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.maralm-link-list li {
	margin-bottom: 0.5rem;
	padding-left: 1.25rem;
	position: relative;
}

.maralm-link-list li::before {
	content: "\F285";
	font-family: bootstrap-icons !important;
	position: absolute;
	left: 0;
	color: var(--primary);
	font-size: 0.85rem;
	top: 0.15rem;
}

.maralm-link-list a {
	text-decoration: none;
	color: var(--primary);
}

.maralm-link-list a:hover {
	color: var(--secondary);
	text-decoration: underline;
}

.maralm-search-bar {
	background: color-mix(in srgb, var(--primary), transparent 92%);
	border: 1px solid var(--border);
	padding: 1.25rem;
	margin-bottom: 2rem;
}

.maralm-search-bar input {
	width: 100%;
	max-width: 28rem;
	background: var(--input-bg);
	border-color: var(--border);
}

.maralm-section-block {
	margin-bottom: 2.5rem;
}

.maralm-section-block h2 {
	font-size: 1.25rem;
	border-bottom: 2px solid var(--secondary);
	padding-bottom: 0.35rem;
	margin-bottom: 1rem;
	color: var(--primary);
}

.maralm-section-block.maralm-heading-primary h2 {
	color: var(--primary);
	border-bottom-color: var(--primary);
}

.maralm-section-block.maralm-heading-secondary h2 {
	color: color-mix(in srgb, var(--primary), #000 8%);
	border-bottom-color: var(--secondary);
}

.maralm-section-block.maralm-heading-blue h2 {
	color: var(--mare-blue);
	border-bottom-color: var(--mare-blue);
}

.maralm-section-block.maralm-heading-fg h2 {
	color: var(--fg);
	border-bottom-color: var(--fg);
}

.maralm-contact-form .form-field {
	margin-bottom: 1rem;
}

/* Contact — info-vlakken (kleuren zoals hero-tegels op index) */
.contact .info-container {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	height: auto;
	padding: 1rem;
	background: var(--muted);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
}

.contact .info-item {
	display: flex;
	align-items: flex-start;
	width: 100%;
	margin-bottom: 0;
	padding: 1.15rem 1.25rem;
	border-radius: calc(var(--radius) - 0.2rem);
	box-shadow: var(--shadow-soft);
	transition: filter 0.2s ease, transform 0.2s ease;
}

.contact .info-item:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

.contact .info-item > div {
	flex: 1;
	min-width: 0;
}

.contact .info-item i {
	flex-shrink: 0;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: 1rem;
	font-size: 1.2rem;
	border-radius: 50%;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.contact .info-item h3 {
	margin-bottom: 0.35rem;
	font-size: 1.05rem;
	font-weight: 700;
}

.contact .info-item p {
	font-size: 0.95rem;
	line-height: 1.45;
	color: inherit;
}

/* .section p zet anders overal --fg (donker), ook op gekleurde vlakken */
.contact .info-container .info-item:nth-child(2) p,
.contact .info-container .info-item:nth-child(4) p {
	color: #fff;
}

.contact .info-container .info-item:nth-child(3) p {
	color: var(--primary-fg);
}

.contact .info-item a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
	font-weight: 600;
}

.contact .info-item a:hover {
	opacity: 0.92;
}

/* 1 — lime (secondary), 2 — blauw, 3 — groen, 4 — donker */
.contact .info-container .info-item:nth-child(1) {
	background: var(--secondary);
	color: var(--secondary-fg);
}

.contact .info-container .info-item:nth-child(1) i {
	background: color-mix(in srgb, var(--secondary-fg), transparent 82%);
	color: var(--secondary-fg);
}

.contact .info-container .info-item:nth-child(1) h3 {
	color: var(--secondary-fg);
}

.contact .info-container .info-item:nth-child(2) {
	background: var(--mare-blue);
	color: #fff;
}

.contact .info-container .info-item:nth-child(2) i {
	background: color-mix(in srgb, #fff, transparent 78%);
	color: #fff;
}

.contact .info-container .info-item:nth-child(2) h3 {
	color: #fff;
}

.contact .info-container .info-item:nth-child(3) {
	background: var(--primary);
	color: var(--primary-fg);
}

.contact .info-container .info-item:nth-child(3) i {
	background: color-mix(in srgb, var(--primary-fg), transparent 82%);
	color: var(--primary-fg);
}

.contact .info-container .info-item:nth-child(3) h3 {
	color: var(--primary-fg);
}

.contact .info-container .info-item:nth-child(4) {
	background: var(--fg);
	color: #fff;
}

.contact .info-container .info-item:nth-child(4) i {
	background: color-mix(in srgb, #fff, transparent 78%);
	color: #fff;
}

.contact .info-container .info-item:nth-child(4) h3 {
	color: #fff;
}

.contact .info-container .info-item:hover i {
	background: color-mix(in srgb, #fff, transparent 65%);
	color: inherit;
}

.contact .php-email-form {
	border-radius: var(--radius);
}

.contact .php-email-form .form-label {
	color: var(--default-color);
	font-weight: 600;
}

.contact .php-email-form .form-control,
.contact .php-email-form .form-select {
	border-radius: calc(var(--bs-border-radius) * 0.75);
}

.contact .php-email-form fieldset {
	margin-bottom: 0;
}

.maralm-alert {
	padding: 1rem 1.25rem;
	margin-bottom: 1.5rem;
}

.maralm-alert-success {
	background: color-mix(in srgb, var(--secondary), #fff 75%);
	border: 1px solid var(--secondary);
	color: var(--primary);
}

.maralm-alert-error {
	background: #f8d7da;
	border: 1px solid #f5c2c7;
	color: #842029;
}

#school-gallery .portfolio-content img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	width: 100%;
	border-radius: calc(var(--radius) - 0.35rem);
}

.maralm-gallery-intro {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem 2.5rem;
	width: 100%;
	max-width: none;
	margin-bottom: 1.75rem;
	line-height: 1.65;
}

@media (min-width: 768px) {
	.maralm-gallery-intro {
		grid-template-columns: 1fr 1fr;
		align-items: start;
	}
}

.maralm-gallery-intro p {
	margin-bottom: 0;
	max-width: none;
}

.maralm-gallery-intro p:last-child {
	margin-bottom: 0;
}

.maralm-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	gap: 1.35rem 1.15rem;
	margin-bottom: 0.5rem;
}

.maralm-gallery__item {
	margin: 0;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.maralm-gallery__link {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc(var(--radius) - 0.35rem);
	box-shadow: var(--shadow-soft);
	border: 1px solid var(--border);
	background: var(--muted);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.maralm-gallery__link:hover,
.maralm-gallery__link:focus-visible {
	box-shadow: var(--shadow-strong);
	transform: translateY(-2px);
	outline: none;
}

.maralm-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.maralm-gallery__caption {
	margin-top: 0.65rem;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--fg);
}

.maralm-gallery__title {
	display: block;
	color: var(--primary);
	font-family: var(--font-heading);
	font-size: 1.05rem;
	margin-bottom: 0.2rem;
}

.maralm-gallery-empty {
	color: var(--muted-fg);
	font-style: italic;
}

.maralm-gallery-heading {
	margin: 2.5rem 0 1.25rem;
	font-family: var(--font-heading);
	font-size: 1.55rem;
	color: var(--primary);
	border-bottom: 3px solid var(--secondary);
	padding-bottom: 0.45rem;
}

.maralm-kamp-section {
	margin: 2rem 0 2.5rem;
	padding: 1.35rem 1.25rem 1.5rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: linear-gradient(135deg, color-mix(in srgb, var(--primary), transparent 94%), color-mix(in srgb, var(--secondary), transparent 88%));
	box-shadow: var(--shadow-soft);
}

.maralm-kamp-section__title {
	margin: 0 0 0.5rem;
	font-family: var(--font-heading);
	font-size: 1.45rem;
	color: var(--primary);
}

.maralm-kamp-section__lead {
	margin: 0;
	color: var(--fg);
	line-height: 1.6;
	max-width: none;
	width: 100%;
}

.maralm-kamp-grid {
	margin-top: 1.25rem;
}

.maralm-kamp-card {
	height: 100%;
	border: none;
	box-shadow: none;
	background: transparent;
	border-radius: 0;
	overflow: visible;
	transition: none;
}

.maralm-kamp-card:hover {
	transform: none;
	box-shadow: none;
}

.maralm-kamp-card__media {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: calc(var(--radius) - 0.35rem);
	box-shadow: var(--shadow-soft);
	border: 1px solid var(--border);
	background: var(--muted);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.maralm-kamp-card:hover .maralm-kamp-card__media {
	box-shadow: var(--shadow-strong);
	transform: translateY(-2px);
}

.maralm-kamp-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.maralm-kamp-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 2.5rem;
	color: var(--primary);
	background: color-mix(in srgb, var(--secondary), transparent 75%);
}

.maralm-kamp-card__year {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	padding: 0.25rem 0.65rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 700;
	color: var(--primary-fg);
	background: var(--primary);
	box-shadow: var(--shadow-soft);
}

.maralm-kamp-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 0;
	margin-top: 0.65rem;
}

.maralm-kamp-card__title {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--font-heading);
	font-size: 1.05rem;
	color: var(--primary);
}

.maralm-kamp-card__place {
	display: block;
	margin-bottom: 0.35rem;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--mare-blue);
}

.maralm-kamp-card__text {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--fg);
}

.maralm-kamp-card__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	align-self: flex-start;
	padding: 0.5rem 0.9rem;
	border-radius: 0.65rem;
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	color: var(--primary-fg);
	background: var(--primary);
	transition: background 0.2s ease, color 0.2s ease;
}

.maralm-kamp-card__btn:hover {
	background: var(--secondary);
	color: var(--secondary-fg);
	text-decoration: none;
}

.maralm-kamp-grid .maralm-kamp-card:nth-child(1) .maralm-kamp-card__year {
	background: var(--primary);
}

.maralm-kamp-grid .maralm-kamp-card:nth-child(2) .maralm-kamp-card__year {
	background: var(--mare-blue);
}

.maralm-kamp-grid .maralm-kamp-card:nth-child(3) .maralm-kamp-card__year {
	background: var(--fg);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

/* Portal-tegels (gekleurde blokken i.p.v. saaie lijsten) */
.maralm-portal-section {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-soft);
	padding: 1rem 1.15rem;
	margin-bottom: 1.25rem;
}

.maralm-portal-section-title {
	margin: 0 0 0.85rem;
	font-size: 1.3rem;
	line-height: 1.2;
	padding-bottom: 0.4rem;
	border-bottom: 3px solid var(--secondary);
}

.maralm-portal-section.maralm-heading-primary .maralm-portal-section-title {
	color: var(--primary);
	border-bottom-color: var(--primary);
}

.maralm-portal-section.maralm-heading-blue .maralm-portal-section-title {
	color: var(--mare-blue);
	border-bottom-color: var(--mare-blue);
}

.maralm-portal-section.maralm-heading-fg .maralm-portal-section-title {
	color: var(--fg);
	border-bottom-color: var(--fg);
}

.maralm-portal-section.maralm-heading-secondary .maralm-portal-section-title {
	color: color-mix(in srgb, var(--primary), #000 10%);
	border-bottom-color: var(--secondary);
}

.maralm-bento-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 0.75rem;
}

.maralm-tile {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.35rem;
	min-height: 96px;
	padding: 0.9rem 1rem;
	border-radius: calc(var(--radius) - 0.25rem);
	text-decoration: none;
	font-weight: 700;
	line-height: 1.25;
	box-shadow: var(--shadow-soft);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.maralm-tile:hover,
.maralm-tile:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12);
	text-decoration: none;
}

.maralm-tile:focus-visible {
	outline: 3px solid var(--secondary);
	outline-offset: 3px;
}

.maralm-tile-label {
	font-size: 1rem;
}

.maralm-tile-hint {
	font-size: 0.82rem;
	font-weight: 600;
	opacity: 0.88;
}

.maralm-tile-green {
	background: var(--secondary);
	color: var(--secondary-fg);
}

.maralm-tile-blue {
	background: var(--mare-blue);
	color: #fff;
}

.maralm-tile-primary {
	background: var(--primary);
	color: var(--primary-fg);
}

.maralm-tile-purple {
	background: var(--fg);
	color: #fff;
}

.maralm-tile-yellow {
	background: var(--muted);
	color: var(--fg);
	border: 1px solid var(--border);
}

.maralm-nieuwsbrief-card {
	border: none;
	box-shadow: var(--shadow-soft);
}

.maralm-nieuwsbrief-card .card-body,
.maralm-nieuwsbrief-card .card-title,
.maralm-nieuwsbrief-card .card-text {
	color: inherit;
}

.maralm-nieuwsbrief-card .card-text {
	opacity: 0.95;
}

.maralm-nieuwsbrief-card .btn-light {
	--bs-btn-bg: #fff;
	--bs-btn-border-color: rgba(255, 255, 255, 0.9);
	--bs-btn-color: var(--fg);
	--bs-btn-hover-bg: var(--muted);
	--bs-btn-hover-border-color: #fff;
	--bs-btn-hover-color: var(--fg);
	font-weight: 600;
}

.maralm-nieuwsbrief-card.maralm-tile-green .btn-light {
	--bs-btn-color: var(--primary);
	--bs-btn-hover-color: var(--primary);
}

.maralm-home-about {
	background: linear-gradient(120deg, color-mix(in srgb, var(--primary), transparent 94%), color-mix(in srgb, var(--secondary), transparent 82%));
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 1.5rem;
	box-shadow: var(--shadow-soft);
}

.maralm-home-about .maralm-bento-grid {
	margin-top: 1rem;
}

.maralm-callout {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-left: 5px solid var(--secondary);
	border-radius: var(--radius);
	padding: 1rem 1.15rem;
	margin-bottom: 1.25rem;
	box-shadow: var(--shadow-soft);
}

.maralm-callout h2 {
	margin-top: 0;
}

.maralm-callout--compact {
	padding: 0.65rem 0.85rem;
	margin-bottom: 0.75rem;
}

.maralm-callout--compact h2 {
	font-size: 1.05rem;
	margin-bottom: 0.35rem;
}

.maralm-callout--compact p:last-of-type {
	margin-bottom: 0.5rem;
}

.maralm-callout--lock {
	border-left-color: var(--mare-blue);
	border-color: color-mix(in srgb, var(--mare-blue), var(--border) 55%);
	background: color-mix(in srgb, var(--mare-blue), #ffffff 93%);
}

.maralm-callout--lock h2 {
	color: var(--mare-blue-dark);
}

.maralm-hubster-lock-btn {
	font-weight: 700;
	color: #ffffff;
	background: linear-gradient(135deg, var(--mare-blue-dark), var(--mare-blue));
	border: 2px solid color-mix(in srgb, var(--mare-blue-dark), #000 10%);
	box-shadow: 0 3px 12px color-mix(in srgb, var(--mare-blue), transparent 55%);
}

.maralm-hubster-lock-btn:hover,
.maralm-hubster-lock-btn:focus-visible {
	color: #ffffff;
	background: linear-gradient(135deg, var(--mare-blue), color-mix(in srgb, var(--mare-blue), #ffffff 18%));
	border-color: var(--mare-blue-dark);
	box-shadow: 0 5px 16px color-mix(in srgb, var(--mare-blue), transparent 45%);
}

.maralm-portal-section--collapsible .maralm-portal-section-title {
	margin-bottom: 0;
}

.maralm-portal-section--collapsible:not(.is-collapsed) .maralm-portal-section-title {
	margin-bottom: 0.55rem;
}

.maralm-portal-section--collapsible.is-collapsed .maralm-portal-section-title {
	border-bottom: 0;
	padding-bottom: 0;
}

.maralm-portal-section-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
	cursor: pointer;
}

.maralm-portal-section-toggle:focus-visible {
	outline: 3px solid var(--secondary);
	outline-offset: 3px;
	border-radius: 0.2rem;
}

.maralm-portal-section-meta {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	flex-shrink: 0;
}

.maralm-portal-section-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 700;
	background: color-mix(in srgb, currentColor 12%, transparent);
}

.maralm-portal-section-chevron {
	font-size: 0.95rem;
	transition: transform 0.18s ease;
}

.maralm-portal-section--collapsible:not(.is-collapsed) .maralm-portal-section-chevron {
	transform: rotate(180deg);
}

.maralm-hubster-compact .page-title .container {
	padding-top: 1.35rem;
	padding-bottom: 0.85rem;
}

.maralm-hubster-compact .page-title h1 {
	font-size: 1.65rem;
	margin-bottom: 0.15rem;
}

.maralm-hubster-compact .page-title p {
	margin-bottom: 0.35rem;
	font-size: 0.95rem;
}

.maralm-hubster-compact .page-title .breadcrumbs {
	font-size: 0.85rem;
}

.maralm-hubster-compact .maralm-page-content {
	padding-top: 0.75rem;
}

.maralm-hubster-compact .maralm-portal-section {
	padding: 0.55rem 0.75rem;
	margin-bottom: 0.5rem;
}

.maralm-hubster-compact .maralm-portal-section-title {
	font-size: 1.05rem;
	padding-bottom: 0.25rem;
}

.maralm-hubster-compact .maralm-bento-grid {
	grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
	gap: 0.45rem;
}

.maralm-hubster-compact .maralm-tile {
	min-height: 72px;
	padding: 0.55rem 0.65rem;
	gap: 0.2rem;
}

.maralm-hubster-compact .maralm-tile-label {
	font-size: 0.9rem;
}

.maralm-hubster-compact .maralm-tile-hint {
	font-size: 0.75rem;
}

.maralm-hubster-toolbar {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 0.85rem;
}

.maralm-hubster-logout {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.55rem 1rem;
	border-radius: 0.7rem;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none;
	color: #ffffff;
	background: linear-gradient(135deg, var(--mare-amber-dark), var(--mare-amber));
	border: 2px solid color-mix(in srgb, var(--mare-amber-dark), #000 12%);
	box-shadow: 0 4px 14px color-mix(in srgb, var(--mare-amber), transparent 50%);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.maralm-hubster-logout:hover,
.maralm-hubster-logout:focus-visible {
	color: #ffffff;
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--mare-amber), transparent 40%);
	background: linear-gradient(135deg, var(--mare-amber), color-mix(in srgb, var(--mare-amber), #ffffff 16%));
}

.maralm-hubster-kamp {
	margin-bottom: 1rem;
	padding: 1rem 1.1rem 1.1rem;
	border: 1px solid var(--border);
	border-left: 5px solid var(--mare-blue);
	border-radius: var(--radius);
	background: var(--card-bg);
	box-shadow: var(--shadow-soft);
}

.maralm-hubster-kamp__title {
	margin: 0 0 0.35rem;
	font-family: var(--font-heading);
	font-size: 1.15rem;
	color: var(--primary);
}

.maralm-hubster-kamp__lead {
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--muted-fg);
	max-width: none;
	width: 100%;
}

.maralm-hubster-kamp__lead a {
	font-weight: 600;
}

.maralm-hubster-kamp__list {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 0.85rem;
}

.maralm-hubster-kamp__row {
	display: grid;
	grid-template-columns: minmax(240px, 1.4fr) minmax(150px, 0.7fr) minmax(280px, 1fr);
	gap: 1rem 1.25rem;
	align-items: center;
}

.maralm-hubster-kamp__row--head {
	padding: 0 0.75rem 0.35rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--muted-fg);
	border-bottom: 1px solid var(--border);
}

.maralm-hubster-kamp__row--head span:nth-child(2) {
	text-align: center;
}

.maralm-hubster-kamp__item {
	padding: 0.75rem;
	border: 1px solid var(--border);
	border-radius: calc(var(--radius) - 0.25rem);
	background: color-mix(in srgb, var(--muted), transparent 35%);
}

.maralm-hubster-kamp__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.maralm-hubster-kamp__year {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	padding: 0.25rem 0.5rem;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--primary-fg);
	background: var(--primary);
}

.maralm-hubster-kamp__name {
	margin: 0 0 0.15rem;
	font-size: 0.98rem;
	color: var(--fg);
}

.maralm-hubster-kamp__place {
	font-size: 0.84rem;
	color: var(--mare-blue);
	font-weight: 600;
}

.maralm-hubster-kamp__album {
	display: flex;
	justify-content: center;
}

.maralm-hubster-kamp__open {
	min-width: 9.5rem;
	font-weight: 700;
}

.maralm-hubster-kamp__secret {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.25rem;
	min-width: 0;
}

.maralm-hubster-kamp__secret-label {
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--muted-fg);
}

.maralm-hubster-kamp__copy-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.45rem;
}

.maralm-hubster-kamp__secret-value {
	flex: 1 1 10rem;
	padding: 0.45rem 0.55rem;
	border-radius: 0.45rem;
	font-size: 0.86rem;
	font-family: var(--font-mono);
	color: var(--fg);
	background: var(--card-bg);
	border: 1px dashed color-mix(in srgb, var(--primary), transparent 55%);
	word-break: break-all;
	user-select: all;
}

.maralm-hubster-kamp__copy-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 0.45rem 0.75rem;
	border: 1px solid color-mix(in srgb, var(--mare-blue), transparent 35%);
	border-radius: 0.45rem;
	font-size: 0.84rem;
	font-weight: 700;
	color: var(--primary-fg);
	background: var(--mare-blue);
	cursor: pointer;
	transition: background 0.18s ease, transform 0.18s ease;
}

.maralm-hubster-kamp__copy-btn:hover,
.maralm-hubster-kamp__copy-btn:focus-visible {
	background: color-mix(in srgb, var(--mare-blue), #000 10%);
	transform: translateY(-1px);
}

.maralm-hubster-kamp__copy-btn.is-copied {
	background: var(--secondary);
	color: var(--secondary-fg);
	border-color: var(--secondary);
}

.maralm-hubster-kamp__copy-hint {
	font-size: 0.78rem;
	color: var(--muted-fg);
	line-height: 1.35;
}

.maralm-hubster-kamp__list .maralm-hubster-kamp__item:nth-child(2) .maralm-hubster-kamp__year {
	background: var(--primary);
}

.maralm-hubster-kamp__list .maralm-hubster-kamp__item:nth-child(3) .maralm-hubster-kamp__year {
	background: var(--mare-blue);
}

.maralm-hubster-kamp__list .maralm-hubster-kamp__item:nth-child(4) .maralm-hubster-kamp__year {
	background: var(--fg);
}

@media (max-width: 991px) {
	.maralm-hubster-kamp__row--head {
		display: none;
	}

	.maralm-hubster-kamp__row {
		grid-template-columns: 1fr;
		gap: 0.65rem;
	}

	.maralm-hubster-kamp__album {
		justify-content: flex-start;
	}
}

@media (max-width: 575px) {
	.maralm-hubster-toolbar {
		justify-content: stretch;
	}

	.maralm-hubster-logout {
		width: 100%;
		justify-content: center;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0f1f1a;
		--fg: #e8f5ef;
		--primary: #2d9967;
		--primary-dark: #198754;
		--primary-light: #3cb371;
		--primary-fg: #ffffff;
		--secondary: #9cd454;
		--secondary-fg: #0f1f1a;
		--accent: #1a3d32;
		--accent-fg: #e8f5ef;
		--card-bg: #1a3d32;
		--card-fg: #ffffff;
		--border: #2d5a4a;
		--input-bg: #1a3d32;
		--muted: #152921;
		--muted-fg: #b8d4c8;
	}

	.header,
	.maralm-card-grid .card {
		box-shadow: var(--shadow-strong);
	}

	.maralm-search-bar {
		background: color-mix(in srgb, var(--card-bg), #fff 8%);
	}

	.hero.accent-background p {
		color: #ffffff;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	}

	.maralm-callout--lock {
		background: color-mix(in srgb, var(--mare-blue), var(--card-bg) 82%);
		border-color: color-mix(in srgb, var(--mare-blue), var(--border) 45%);
	}

	.maralm-callout--lock h2 {
		color: color-mix(in srgb, var(--mare-blue), #ffffff 35%);
	}
}

/* Copyright onder de streep: fris groen (secondary), niet wit */
.footer.accent-background .copyright {
	border-top-color: color-mix(in srgb, var(--footer-legal), transparent 50%);
}

.footer.accent-background .copyright p {
	color: var(--footer-legal);
	font-size: 0.92rem;
	letter-spacing: 0.01em;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition: none !important;
		animation: none !important;
	}
}