/*
 * Footer — Maan Figma (#0095c3 accents, responsive grid).
 * Scoped with .maan-footer to minimize clashes with Beaver Builder layouts.
 */

.maan-footer {
	--mf-primary: #0095c3;
	--mf-text: #232323;
	--mf-white: #ffffff;
	--mf-border-soft: rgba(49, 35, 34, 0.1);
	--mf-tint-bg: rgba(0, 149, 195, 0.12);
	--mf-font-heading: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--maan-footer-content-max: 1440px;

	margin-top: clamp(2rem, 5vw, 4rem);
	color: var(--mf-text);
	font-family: var(--mf-font-heading);
	font-weight: 500;
	line-height: 1.6;
}

.maan-footer__main {
	box-sizing: border-box;
	max-width: min(var(--maan-footer-content-max), calc(100vw - 48px));
	margin: 0 auto;
	padding: clamp(24px, 4vw, 48px) 24px;
	width: 100%;
}

/* Top link columns — main menu: each top-level section is a grid column (walker uses items_wrap %3$s). */
.maan-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: clamp(24px, 3vw, 48px);
	margin-bottom: clamp(32px, 5vw, 56px);
}

/*
 * If wp_nav_menu is ever switched back to wrapping output in ul (e.g. default items_wrap),
 * add menu_class => 'maan-footer__columns-root' so grid still applies to section columns.
 */
.maan-footer__columns > ul.maan-footer__columns-root {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.maan-footer__col-title {
	margin: 0 0 0.85rem;
	color: var(--mf-primary);
	font-family: var(--mf-font-heading);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
}

a.maan-footer__col-title--link {
	display: inline-block;
	text-decoration: none;
}

a.maan-footer__col-title--link:hover {
	text-decoration: none;
	opacity: 0.92;
}

a.maan-footer__col-title--link:focus-visible {
	outline: 2px solid var(--mf-primary);
	outline-offset: 2px;
}

.maan-footer__col-title--on-tint {
	position: relative;
	z-index: 1;
	margin-bottom: 1rem;
}

.maan-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.maan-footer__menu a {
	display: inline-block;
	color: var(--mf-text);
	font-size: 0.875rem;
    padding: 0 !important;
	font-weight: 500;
	text-decoration: none;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.maan-footer__menu a:focus-visible,
.maan-footer .maan-footer__link:focus-visible,
.maan-footer .maan-footer__legal-link:focus-visible,
.maan-footer .maan-footer__linkedin:focus-visible,
.maan-footer .maan-footer__logo-link:focus-visible {
	outline: 2px solid var(--mf-primary);
	outline-offset: 2px;
}

.maan-footer__menu a:hover {
	color: var(--mf-primary);
}

/* Middle row — desktop: 4 gelijke kolommen; nieuwsbrief bespaant 2 (zoals Figma-breedte). Kleinere schermen: netjes schalen. */
.maan-footer__middle {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 48px);
	align-items: start;
}

.maan-footer__block--newsletter {
	grid-column: span 2;
	min-width: 0;
}

.maan-footer__text {
	margin: 0;
	font-size: 0.875rem;
}

.maan-footer__text + .maan-footer__text {
	margin-top: 0;
}

.maan-footer__label {
	color: var(--mf-primary);
	font-weight: 700;
	margin-right: 0.2em;
}

.maan-footer__link {
	color: var(--mf-text);
	text-decoration: none;
	word-break: break-word;
}

.maan-footer__link:hover {
	color: var(--mf-primary);
}

.maan-footer__social {
	margin: 1rem 0 0;
}

.maan-footer__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.15s ease;
}

.maan-footer__linkedin:hover {
	opacity: 0.85;
}

/* Newsletter tint + Gravity Forms -------------------------------------- */
.maan-footer__newsletter-card {
	position: relative;
	padding: 1.35rem clamp(14px, 2.5vw, 24px);
	background: var(--mf-tint-bg);
	border-radius: 8px;
}

.maan-footer__gf {
	--maan-gf-field-h: 51px;
}

.maan-footer__gf .gform_wrapper {
	margin: 0;
}

.maan-footer__gf form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.75rem;
}

.maan-footer__gf form .gform_body {
	position: relative;
	z-index: 1;
	flex: 1 1 200px;
	min-width: 0;
	margin: 0 !important;
	display: flex;
	align-items: stretch;
}

/* Field + button row (single-field newsletter) */
.maan-footer__gf .gform_fields {
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	width: 100%;
	margin: 0 !important;
}

.maan-footer__gf .gfield {
	flex: 1 1 auto;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	align-items: stretch;
}

.maan-footer__gf .gfield .ginput_container {
	flex: 1 1 auto;
	display: flex;
	align-items: stretch;
}

.maan-footer__gf .gfield.maan-gf-float .ginput_container input[type="email"],
.maan-footer__gf .gfield.maan-gf-float .ginput_container input[type="text"] {
	height: var(--maan-gf-field-h);
	min-height: var(--maan-gf-field-h);
}

/* Field visuals: see css/gravity-forms.css (floating labels). */

.maan-footer__gf .gform_wrapper .gform_footer,
.maan-footer__gf .gform_wrapper .gform-footer {
	position: static;
	margin: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto;
	align-self: stretch;
	display: flex;
	align-items: stretch;
}

.maan-footer__gf .gform_wrapper .gform_footer input[type="submit"],
.maan-footer__gf .gform_wrapper .gform_footer button,
.maan-footer__gf .gform_wrapper .gform-footer input[type="submit"],
.maan-footer__gf .gform_wrapper .gform-footer button,
.maan-footer__gf .gform_wrapper .gform_button,
.maan-footer__gf .gform_wrapper button.gform_button,
.maan-footer__gf .gform_wrapper input.gform_button {
	display: flex;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	box-sizing: border-box;
	height: 100%;
	min-height: var(--maan-gf-field-h);
	margin: 0 !important;
	padding: 0 20px !important;
	border: none !important;
	border-radius: 4px;
	background-color: #0095c3 !important;
	background: #0095c3 !important;
	color: #ffffff !important;
	font-family: var(--mf-font-heading);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	cursor: pointer;
	transition: background 0.15s ease, background-color 0.15s ease;
	white-space: nowrap;
}

.maan-footer__gf .gform_wrapper .gform_footer input[type="submit"]:hover,
.maan-footer__gf .gform_wrapper .gform_footer button:hover,
.maan-footer__gf .gform_wrapper .gform-footer input[type="submit"]:hover,
.maan-footer__gf .gform_wrapper .gform-footer button:hover,
.maan-footer__gf .gform_wrapper .gform_button:hover,
.maan-footer__gf .gform_wrapper button.gform_button:hover,
.maan-footer__gf .gform_wrapper input.gform_button:hover {
	background-color: #0082ad !important;
	background: #0082ad !important;
}

.maan-footer__gf .validation_error,
.maan-footer__gf .gfield_description.validation_message {
	padding: 0.5rem 0 0 !important;
}

/* Bottom gradient bar --------------------------------------------------- */
.maan-footer__bottom {
	position: relative;
	margin-top: clamp(32px, 5vw, 56px);
}

.maan-footer__bottom-bg {
	position: absolute;
	inset: 0;
	left: 0;
	right: 0;
	top: -40%;
	z-index: 0;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 149, 195, 0) 0%, rgba(0, 149, 195, 0.18) 100%);
}

.maan-footer__bottom-row {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 72px);
}

.maan-footer__bottom-inner {
	box-sizing: border-box;
	max-width: min(var(--maan-footer-content-max), calc(100vw - 48px));
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	padding: 0 24px;
	width: 100%;
}

.maan-footer__logo-link {
	display: inline-flex;
	line-height: 0;
}

.maan-footer__logo {
	display: block;
	height: auto;
	max-width: min(200px, 38vw);
}

.maan-footer__legal-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.35rem 1.25rem;
	font-size: 0.875rem;
}

.maan-footer__copy {
	font-weight: 600;
}

.maan-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.35rem 1.25rem;
}

.maan-footer__legal-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.35rem 1.25rem;
}

.maan-footer ul.maan-footer__legal-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	gap: 0.35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.maan-footer ul.maan-footer__legal-menu a {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--mf-text);
	text-decoration: none;
}

.maan-footer ul.maan-footer__legal-menu a:hover {
	color: var(--mf-primary);
}

.maan-footer__legal-link {
	font-weight: 500;
	color: var(--mf-text);
	text-decoration: none;
	font-size: 0.875rem;
}

.maan-footer__legal-link:hover {
	color: var(--mf-primary);
}

.maan-footer__group-badge {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
}

.maan-footer__badge-img {
	max-width: min(373px, 85vw);
	height: auto;
	display: block;
}

@media (max-width: 1100px) {
	.maan-footer__middle {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.maan-footer__block--newsletter {
		grid-column: 1 / -1;
	}
}

@media (max-width: 900px) {
	.maan-footer__middle {
		grid-template-columns: minmax(0, 1fr);
	}

	.maan-footer__block--newsletter {
		grid-column: auto;
	}

	.maan-footer__bottom-row {
		padding-bottom: clamp(24px, 4vw, 40px);
	}

	.maan-footer__bottom-inner {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	.maan-footer__group-badge {
		position: static;
		justify-content: flex-end;
		width: 100%;
		margin-top: clamp(16px, 3vw, 24px);
	}
}

@media (max-width: 520px) {
	.maan-footer__columns {
		grid-template-columns: 1fr;
	}

	.maan-footer__gf form {
		flex-direction: column;
	}

	.maan-footer__gf .gform_fields {
		flex-direction: column;
	}

	.maan-footer__gf .gform_wrapper .gform_footer,
	.maan-footer__gf .gform_wrapper .gform-footer {
		width: 100%;
	}

	.maan-footer__gf .gform_wrapper .gform_footer input[type="submit"],
	.maan-footer__gf .gform_wrapper .gform_footer button,
	.maan-footer__gf .gform_wrapper .gform-footer input[type="submit"],
	.maan-footer__gf .gform_wrapper .gform-footer button,
	.maan-footer__gf .gform_wrapper .gform_button,
	.maan-footer__gf .gform_wrapper button.gform_button,
	.maan-footer__gf .gform_wrapper input.gform_button {
		width: 100%;
	}
}