/*
Theme Name:   Hello Elementor Child
Theme URI:    https://elementor.com/
Description:   Lightweight child theme voor Hello Elementor met performance-defaults.
Author:       Patelle Reclame
Template:      hello-elementor
Version:       1.0.1
Text Domain:   hello-elementor-child
*/

/* Eigen CSS hieronder — of gebruik Elementor global styles */

/* ==========================================================================
 * Berichtcontent (Gutenberg block-editor content binnen Elementor Pro's
 * "Post Content"-widget, o.a. gebruikt in template "Berichten — Detail",
 * id 863). Doel: Lato-typografie, site-kleuren en site-spacing i.p.v.
 * WordPress-standaardstijl, zonder de rest van de site (of wp-admin) te
 * raken.
 *
 * Scoping: alles hangt aan ".elementor-widget-theme-post-content" — dat is
 * de class die Elementor Pro op ELKE instantie van de Post Content-widget
 * zet (dus stabiel, niet gebonden aan een widget-element-ID dat verandert
 * als het template herbouwd wordt). Er wordt bewust NIET site-breed op
 * kale ".wp-block-*"-classes gestyled.
 *
 * Bronnen (geverifieerd, niet gegokt — zie ook _agency/docs/berichten-
 * templates.md voor de volledige toelichting):
 * - Kleuren/typografie-tokens: Site Kit "Standaard kit" (elementor_library
 *   id 6), gecompileerd in wp-content/uploads/elementor/css/post-6.css
 *   (--e-global-color-ace8a5b: #3B483D: kop-kleur; --e-global-color-text:
 *   #7A7A7A: systeem-tekstkleur; --e-global-color-54484f0: #07967c: MBM-
 *   accentgroen; --e-global-color-1ed4561: #075748: hover).
 * - Basis-tekststijl (Lato 400/18px/1.6): al aanwezig als widget-instelling
 *   op de Post Content-widget in template 863 zelf (element 629cab7, zie
 *   post-863.css) — hier expliciet herhaald zodat de stijl niet afhankelijk
 *   blijft van dat ene widget-element-ID.
 * - Kop-schaal: geen kale kit-H2/H3-tokens (42px/24px, bedoeld voor volle-
 *   breedte paginasecties) hergebruikt, maar dezelfde "afgeschaalde"
 *   aanpak als de Post Title-widget op hetzelfde template (40px/900/
 *   line-height 1.15/letter-spacing 0.5px i.p.v. de kit-H1 55px/1.05em/
 *   1.3px) — logisch passend bij een leesbrede (900px) artikelcontext.
 * - Afbeelding-radius (16px) en schaduw (0px 24px 60px rgba(59,72,61,.14),
 *   d.i. de RGB van #3B483D): beide waarden komen al voor in bestaande
 *   sectie-templates (o.a. post-604.css, post-714.css, post-862.css) —
 *   hergebruikt i.p.v. nieuwe waarden verzonnen.
 * ========================================================================== */

.elementor-widget-theme-post-content {
	font-family: "Lato", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: #7A7A7A;
}

.elementor-widget-theme-post-content p,
.elementor-widget-theme-post-content li,
.elementor-widget-theme-post-content .wp-block-paragraph {
	font-family: "Lato", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
	color: #7A7A7A;
}

.elementor-widget-theme-post-content strong,
.elementor-widget-theme-post-content b {
	color: #3B483D;
	font-weight: 700;
}

/* Koppen — zelfde "afgeschaalde" logica als de Post Title-widget op dit
 * template: forser dan lopende tekst, maar bewust kleiner/zachter dan de
 * kit-koppen die voor volle paginasecties bedoeld zijn. */
.elementor-widget-theme-post-content .wp-block-heading,
.elementor-widget-theme-post-content h2,
.elementor-widget-theme-post-content h3,
.elementor-widget-theme-post-content h4 {
	font-family: "Lato", sans-serif;
	color: #3B483D;
	margin-top: 1.4em;
	margin-bottom: 0.6em;
}

.elementor-widget-theme-post-content h2.wp-block-heading,
.elementor-widget-theme-post-content h2 {
	font-size: 28px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: 0.3px;
}

.elementor-widget-theme-post-content h3.wp-block-heading,
.elementor-widget-theme-post-content h3 {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.2px;
}

.elementor-widget-theme-post-content h4.wp-block-heading,
.elementor-widget-theme-post-content h4 {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.elementor-widget-theme-post-content > :first-child {
	margin-top: 0;
}

/* Kolommen (wp-block-columns) — spacing gelijk aan bestaande gap-waarden
 * elders op de site (base-desktop.css), i.p.v. de WP-standaard 24px. */
.elementor-widget-theme-post-content .wp-block-columns {
	gap: 30px;
	margin-top: 1.6em;
	margin-bottom: 1.6em;
}

/* Afbeeldingen — afgeronde hoeken + subtiele schaduw, zelfde patroon als
 * elders op de site. */
.elementor-widget-theme-post-content .wp-block-image img,
.elementor-widget-theme-post-content figure img {
	border-radius: 16px;
	box-shadow: 0px 24px 60px 0px rgba(59, 72, 61, 0.14);
}

.elementor-widget-theme-post-content .wp-block-image figcaption {
	font-family: "Lato", sans-serif;
	font-size: 14px;
	color: #7A7A7A;
	margin-top: 10px;
}

/* Links — MBM-accentgroen, met hover-tint uit de kit. */
.elementor-widget-theme-post-content a {
	color: #07967c;
	text-decoration: underline;
	text-decoration-color: rgba(7, 150, 124, 0.35);
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.elementor-widget-theme-post-content a:hover,
.elementor-widget-theme-post-content a:focus {
	color: #075748;
	text-decoration-color: #075748;
}

/* Quotes — accentkleur + linkerrand, voor het geval een bericht een
 * blockquote gebruikt. */
.elementor-widget-theme-post-content blockquote,
.elementor-widget-theme-post-content .wp-block-quote {
	border-left: 3px solid #07967c;
	padding-left: 20px;
	margin: 1.6em 0;
	font-style: italic;
	color: #3B483D;
}

.elementor-widget-theme-post-content blockquote p,
.elementor-widget-theme-post-content .wp-block-quote p {
	color: #3B483D;
}

.elementor-widget-theme-post-content blockquote cite,
.elementor-widget-theme-post-content .wp-block-quote cite {
	font-style: normal;
	font-size: 14px;
	color: #7A7A7A;
}

/* ============================================================
 * Fluent Forms — Miedema Groep styling
 * Powered by Maten - Miedema Groep
 * ============================================================ */

:root {
	--mg-green: #07967c;
	--mg-green-dark: #3B483D;
	--mg-cream: #f6f1e7;
	--mg-white: #ffffff;
	--mg-border: #d9d2c4;
	--mg-text: #3B483D;
	--mg-muted: #7a7264;
	--mg-error: #c0392b;
	--mg-radius: 10px;
	--mg-space: 18px;
}

/* ---- Formulier-container ---- */
.fluentform {
	--ff_accent: var(--mg-green);
	background: var(--mg-cream);
	padding: 32px;
	border-radius: var(--mg-radius);
	border: 1px solid var(--mg-border);
	font-family: 'Lato', sans-serif;
	color: var(--mg-text);
}

.fluentform .ff-el-group {
	margin-bottom: var(--mg-space);
}

/* ---- Labels ---- */
.fluentform .ff-el-input--label label {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: .01em;
	color: var(--mg-green-dark);
	margin-bottom: 6px;
}

.fluentform .ff-el-is-required.asterisk-right > label:after,
.fluentform .ff-el-input--label.asterisk-right label:after {
	color: var(--mg-green);
}

/* ---- Inputs, textarea, select ---- */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform input[type="date"],
.fluentform textarea,
.fluentform select,
.fluentform .ff-el-form-control {
	width: 100%;
	background: var(--mg-white);
	border: 1px solid var(--mg-border);
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 15px;
	font-family: 'Lato', sans-serif;
	color: var(--mg-text);
	transition: border-color .18s ease, box-shadow .18s ease;
	box-shadow: none;
}

.fluentform textarea {
	min-height: 130px;
	resize: vertical;
}

.fluentform .ff-el-form-control::placeholder {
	color: var(--mg-muted);
	opacity: 1;
}

/* ---- Focus ---- */
.fluentform input:focus,
.fluentform textarea:focus,
.fluentform select:focus,
.fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--mg-green);
	box-shadow: 0 0 0 3px rgba(7, 150, 124, .15);
}

/* ---- Checkbox / radio ---- */
.fluentform .ff-el-form-check input[type="checkbox"],
.fluentform .ff-el-form-check input[type="radio"] {
	accent-color: var(--mg-green);
	width: 17px;
	height: 17px;
	margin-right: 8px;
}

.fluentform .ff-el-form-check-label {
	font-size: 14px;
	color: var(--mg-text);
	line-height: 1.5;
}

/* ---- Bestandsupload ---- */
.fluentform .ff-el-input--content .ff_upload_btn.ff-btn,
.fluentform .ff_upload_btn {
	background: transparent;
	border: 2px dashed var(--mg-green);
	color: var(--mg-green-dark);
	border-radius: 8px;
	padding: 14px 18px;
	font-weight: 700;
	width: 100%;
	transition: background .18s ease, border-color .18s ease;
}

.fluentform .ff_upload_btn:hover {
	background: rgba(7, 150, 124, .07);
	border-color: var(--mg-green-dark);
}

.fluentform .ff-uploaded-list .ff-upload-preview {
	border: 1px solid var(--mg-border);
	border-radius: 8px;
	background: var(--mg-white);
	margin-top: 10px;
}

.fluentform .ff-upload-progress .ff-upload-progress-inline {
	background: var(--mg-green);
}

/* ---- Submit-knop ---- */
.fluentform .ff-btn-submit,
.fluentform .ff-btn.ff-btn-submit {
	background: var(--mg-green);
	color: var(--mg-white);
	border: none;
	border-radius: 8px;
	padding: 14px 30px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .02em;
	cursor: pointer;
	transition: background .18s ease, transform .06s ease;
}

.fluentform .ff-btn-submit:hover {
	background: var(--mg-green-dark);
}

.fluentform .ff-btn-submit:active {
	transform: translateY(1px);
}

.fluentform .ff-btn-submit:focus-visible {
	outline: 3px solid rgba(7, 150, 124, .35);
	outline-offset: 2px;
}

/* ---- Validatie / fouten ---- */
.fluentform .ff-el-is-error input,
.fluentform .ff-el-is-error textarea,
.fluentform .ff-el-is-error select {
	border-color: var(--mg-error);
}

.fluentform .error.text-danger,
.fluentform .ff-el-is-error .text-danger {
	color: var(--mg-error);
	font-size: 13px;
	margin-top: 5px;
}

/* ---- Succesmelding ---- */
.ff-message-success,
.fluentform_success {
	background: rgba(7, 150, 124, .10);
	border: 1px solid var(--mg-green);
	border-radius: 8px;
	padding: 18px 20px;
	color: var(--mg-green-dark);
	font-family: 'Lato', sans-serif;
}

/* ---- Twee kolommen netjes op mobiel ---- */
@media (max-width: 600px) {
	.fluentform { padding: 22px; }
	.fluentform .ff-el-group.ff-el-column-container {
		flex-direction: column;
	}
}