/* =========================================================
   datic-warm.css — gedeelde chrome (nav, footer, bolletjes)
   Activeer met html.warm-page (header.php)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Outfit:wght@400;500;600;700&display=swap');

html.warm-page {
	--warm-ink: #1e1a17;
	--warm-muted: #6a635c;
	--warm-line: #e6e2dc;
	--warm-bg: #f3f1ed;
	--warm-panel: #ffffff;
	--warm-green: #5cb85c;
	--warm-green-deep: #449d44;
	--warm-blue: #2d8cde;
	--warm-font: "Outfit", system-ui, sans-serif;
	--warm-display: "Fraunces", Georgia, serif;
}

html.warm-page body {
	background: var(--warm-bg) !important;
	font-family: var(--warm-font);
}

html.warm-page .wrapper,
html.warm-page .wrapper.bg-default {
	background-color: #f3f1ed !important;
	background-image:
		radial-gradient(circle at 12% 10%, rgba(92, 184, 92, 0.22), transparent 38%),
		radial-gradient(circle at 90% 6%, rgba(92, 184, 92, 0.14), transparent 36%),
		radial-gradient(circle at 82% 68%, rgba(92, 184, 92, 0.14), transparent 42%),
		radial-gradient(circle at 14% 78%, rgba(68, 157, 68, 0.10), transparent 40%),
		radial-gradient(rgba(30, 26, 23, 0.11) 1.4px, transparent 1.5px) !important;
	background-size: auto, auto, auto, auto, 20px 20px !important;
	/* scroll op touch/iOS — fixed veroorzaakt horizontale layout-bugs */
	background-attachment: scroll !important;
	background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;
	overflow-x: hidden;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
	html.warm-page .wrapper,
	html.warm-page .wrapper.bg-default {
		background-attachment: fixed !important;
	}
}

/* Hoofdmenu */
html.warm-page #navigation-bar.navbar,
html.warm-page #navigation-bar.bg-primary,
html.warm-page .navbar.navbar-dark.bg-primary {
	background: var(--warm-panel) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--warm-line);
	box-shadow: 0 1px 0 rgba(30, 26, 23, 0.04);
	min-height: 56px;
}
html.warm-page #navigation-bar a,
html.warm-page .navbar.navbar-dark.bg-primary a {
	color: var(--warm-ink) !important;
}
html.warm-page #navigation-bar .nav-link:hover,
html.warm-page #navigation-bar .navbar-brand:hover,
html.warm-page .navbar.navbar-dark.bg-primary .navbar-brand:hover {
	color: var(--warm-green-deep) !important;
}
html.warm-page #navigation-bar .navbar-brand,
html.warm-page .navbar.navbar-dark.bg-primary .navbar-brand {
	font-family: var(--warm-font);
	font-weight: 600;
	letter-spacing: -0.01em;
}
html.warm-page #navigation-bar .navbar-toggler {
	border-color: var(--warm-line) !important;
	color: var(--warm-ink) !important;
	opacity: 1;
}
html.warm-page #navigation-bar .navbar-toggler:hover,
html.warm-page #navigation-bar .navbar-toggler:focus {
	color: var(--warm-green-deep) !important;
	opacity: 1;
}
html.warm-page #navigation-bar .pwa-nav-hint,
html.warm-page #navigation-bar .pwa-nav-hint strong {
	color: var(--warm-ink);
}
html.warm-page #navigation-bar .pwa-install--nav-bar {
	background: var(--warm-green);
	box-shadow: 0 4px 14px rgba(92, 184, 92, 0.28);
}
html.warm-page #navigation-bar .pwa-install--nav-bar:hover {
	background: var(--warm-green-deep);
}

html.warm-page #navigation-bar .tag-danger {
	background: var(--warm-green) !important;
}
html.warm-page #navigation-bar .dropdown-menu {
	border: 1px solid var(--warm-line);
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(30, 26, 23, 0.08);
}
html.warm-page #navigation-bar .dropdown-item {
	color: var(--warm-ink) !important;
}
html.warm-page #navigation-bar .dropdown-item:hover {
	background: var(--warm-bg);
	color: var(--warm-green-deep) !important;
}

@media (max-width: 767px) {
	html.warm-page #mainNavbarCollapse {
		background: var(--warm-panel);
		border-top: 1px solid var(--warm-line);
		margin-top: 0;
		padding-bottom: 0.5rem;
	}
	html.warm-page #mainNavbarCollapse.collapse.in,
	html.warm-page #mainNavbarCollapse.collapsing {
		max-height: calc(100vh - 60px - 5.5rem);
		max-height: calc(100dvh - 60px - 5.5rem);
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

/* Footer */
html.warm-page footer.navbar,
html.warm-page footer {
	background: #1e1a17 !important;
	border-top: none !important;
	color: rgba(255, 255, 255, 0.62) !important;
	padding: 0.55rem 0 !important;
}
html.warm-page footer.datic-site-footer {
	padding: 0.35rem 0 !important;
}
@media (max-width: 767px) {
	html.warm-page footer.datic-site-footer {
		padding: 0.15rem 0 !important;
	}
}
html.warm-page footer a {
	color: rgba(255, 255, 255, 0.78) !important;
	font-size: 0.9rem;
	font-weight: 500;
}
html.warm-page footer a:hover {
	color: #5cb85c !important;
}
html.warm-page footer .fa-info,
html.warm-page footer .fa {
	color: rgba(255, 255, 255, 0.7) !important;
}
html.warm-page footer .fa-circle {
	color: #3b5998 !important;
}
html.warm-page footer .fa-facebook {
	color: #fff !important;
}
html.warm-page footer span,
html.warm-page footer .datic-site-footer__copy,
html.warm-page footer .datic-site-footer__sep {
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.85rem;
}
html.warm-page footer .datic-site-footer__logo {
	filter: brightness(0) invert(1);
	opacity: 0.88;
}

/* Generieke pagina-kaarten / fieldsets op warme pagina's */
html.warm-page .identifier {
	font-family: var(--warm-font);
	color: var(--warm-muted);
	background: transparent !important;
}

html.warm-page .identifier fieldset {
	background: var(--warm-panel);
	border: 1px solid var(--warm-line) !important;
	border-radius: 16px !important;
	padding: 1rem 1.1rem 1.15rem !important;
	margin-bottom: 1rem !important;
	box-shadow: 0 8px 24px rgba(30, 26, 23, 0.04);
	height: auto !important;
}

html.warm-page .identifier fieldset > legend {
	display: none;
}

html.warm-page .identifier .fieldset-header,
html.warm-page #profile .fieldset-header,
html.warm-page #settings .fieldset-header,
html.warm-page #favorites .fieldset-header,
html.warm-page #notification .fieldset-header,
html.warm-page #contact .fieldset-header,
html.warm-page #disclaimer .fieldset-header,
html.warm-page #group .fieldset-header,
html.warm-page #myGroups .fieldset-header,
html.warm-page #index .fieldset-header,
html.warm-page #newMembers .fieldset-header,
html.warm-page .identifier .text-header,
html.warm-page .identifier .text-header-edit,
html.warm-page .identifier .sub-header {
	font-family: var(--warm-display);
	font-size: 1.2rem !important;
	font-weight: 700;
	color: var(--warm-green-deep) !important;
	margin: 0 0 0.85rem !important;
	margin-left: 0 !important;
	margin-top: 0 !important;
	padding: 0 0 0.65rem !important;
	border-bottom: 1px solid var(--warm-line);
}

html.warm-page .identifier fieldset .fa-circle,
html.warm-page .identifier legend .fa-circle {
	color: var(--warm-green) !important;
}

html.warm-page .identifier .btn-success {
	background: var(--warm-green);
	border-color: var(--warm-green-deep);
}

html.warm-page .identifier .btn-success:hover {
	background: var(--warm-green-deep);
	border-color: var(--warm-green-deep);
}

/* Warme page-hero (gedeeld) */
html.warm-page .warm-hero {
	background:
		radial-gradient(ellipse 80% 60% at 10% 0%, rgba(92, 184, 92, 0.18), transparent 55%),
		radial-gradient(ellipse 70% 50% at 90% 20%, rgba(92, 184, 92, 0.12), transparent 50%),
		linear-gradient(165deg, rgba(235, 231, 225, 0.55) 0%, rgba(247, 245, 241, 0.35) 55%, rgba(243, 241, 237, 0.2) 100%);
	border-bottom: 1px solid var(--warm-line);
	padding: 1.35rem 1rem 1.5rem;
	margin-bottom: 0.25rem;
}
html.warm-page .warm-hero__inner {
	width: min(1100px, 100%);
	margin: 0 auto;
}
html.warm-page .warm-hero__eyebrow {
	margin: 0 0 0.25rem;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--warm-green-deep);
}
html.warm-page .warm-hero__title {
	margin: 0;
	font-family: var(--warm-display);
	font-size: clamp(1.55rem, 3.5vw, 2.1rem);
	font-weight: 700;
	color: var(--warm-ink);
	line-height: 1.2;
}
html.warm-page .warm-hero__lead {
	margin: 0.4rem 0 0;
	font-size: 0.98rem;
	color: var(--warm-muted);
	max-width: 36rem;
}