/* EFRJ - aanvullende stijlen bovenop theme.json */

/* ---------- Header ---------- */
.efrj-header {
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(1.4) blur(8px);
}

.efrj-header .wp-block-navigation__responsive-container-open,
.efrj-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--contrast);
}

.efrj-header .wp-block-navigation a {
	position: relative;
	padding-block: 0.35rem;
	transition: color var(--wp--custom--transition);
}

.efrj-header .wp-block-navigation .current-menu-item > a {
	color: var(--wp--preset--color--primary);
}

.efrj-header .wp-block-navigation .current-menu-item > a::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
}

/* ---------- Footer ---------- */
.efrj-footer a:hover {
	color: var(--wp--preset--color--accent);
}

.efrj-footer .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}

/* ---------- Blokstijl: kaart ---------- */
.wp-block-group.is-style-efrj-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--30);
	box-shadow: var(--wp--preset--shadow--soft);
	transition: box-shadow var(--wp--custom--transition), transform var(--wp--custom--transition);
	height: 100%;
}

.wp-block-group.is-style-efrj-card:hover {
	box-shadow: var(--wp--preset--shadow--lifted);
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-group.is-style-efrj-card {
		transition: none;
	}
	.wp-block-group.is-style-efrj-card:hover {
		transform: none;
	}
}

/* ---------- Blokstijl: checklist ---------- */
.wp-block-list.is-style-efrj-checklist {
	list-style: none;
	padding-inline-start: 0;
}

.wp-block-list.is-style-efrj-checklist li {
	position: relative;
	padding-inline-start: 1.9rem;
	margin-block-end: 0.65rem;
}

.wp-block-list.is-style-efrj-checklist li::before {
	content: "";
	position: absolute;
	inset-inline-start: 0;
	top: 0.45em;
	width: 1.05rem;
	height: 0.55rem;
	border-inline-start: 2.5px solid var(--wp--preset--color--accent);
	border-bottom: 2.5px solid var(--wp--preset--color--accent);
	transform: rotate(-45deg);
}

/* ---------- Blokstijl: bovenkopje ---------- */
.is-style-efrj-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-weight: 650;
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: var(--wp--preset--spacing--10);
}

/* ---------- Blokstijl: afgeronde afbeelding ---------- */
.wp-block-image.is-style-efrj-rounded img {
	border-radius: var(--wp--custom--radius--lg);
}

/* ============================================================
   Contactformulier (Contact Form 7)
   ============================================================ */
.efrj-form p { margin-block: 0 1rem; }
.efrj-form label { display: block; font-weight: 600; font-size: var(--wp--preset--font-size--small); }

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
	width: 100%;
	margin-top: 0.35rem;
	padding: 0.7rem 0.85rem;
	font: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color var(--wp--custom--transition), box-shadow var(--wp--custom--transition);
}

.wpcf7-form textarea { min-height: 8rem; resize: vertical; }

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(27,73,101,.12);
}

.wpcf7-form input[aria-invalid="true"],
.wpcf7-form textarea[aria-invalid="true"] { border-color: #cf2e2e; }

.wpcf7-form .wpcf7-submit {
	appearance: none;
	cursor: pointer;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	padding: 0.85em 1.9em;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--small);
	transition: background var(--wp--custom--transition);
}

.wpcf7-form .wpcf7-submit:hover { background: var(--wp--preset--color--primary-dark); }
.wpcf7-form .wpcf7-response-output { border-radius: var(--wp--custom--radius--md); margin: 1rem 0 0; }
.wpcf7-not-valid-tip { font-size: var(--wp--preset--font-size--small); }

/* ============================================================
   Mobiel
   ============================================================ */

/* Tot tabletbreedte: smallere zijmarges, header-CTA opgeruimd */
@media (max-width: 781px) {
	:root {
		--wp--style--root--padding-left: var(--wp--preset--spacing--20);
		--wp--style--root--padding-right: var(--wp--preset--spacing--20);
	}
	/* Op mobiel volstaat het hamburgermenu; de losse CTA-knop verdringt anders de header */
	.efrj-header .wp-block-buttons { display: none; }
}

/* Telefoon: minder verticale lucht en ruimere tapdoelen */
@media (max-width: 600px) {
	:root {
		--wp--preset--spacing--60: 3.5rem;
		--wp--preset--spacing--50: 2.75rem;
	}
	.wp-block-buttons { gap: 0.75rem; }
	.wp-block-buttons > .wp-block-button { flex: 1 1 auto; }
	.wp-block-button .wp-block-button__link { display: block; text-align: center; }
	/* Kaarten iets compacter */
	.wp-block-group.is-style-efrj-card { padding: var(--wp--preset--spacing--20); }
}