/* =====================================================================
   huisstijl.css - opmaak in de stijl van docs.custommaterecreatie.eu

   Lichtgele achtergrond, afgeronde (licht doorschijnende) witte kaarten,
   afgeronde gele vlakken, ronde knoppen en afgeronde afbeeldingen.
   Kop (donkere balk + gele balk) en voet blijven zoals ze waren.

   Wordt geladen NA style.css, w3.css en mobiel.css (zie load_css in
   functions.php). Terugdraaien: de enqueue-regel voor 'custommate-huisstijl'
   in functions.php weghalen.
   Kleuren uit de Customizer: --cm-donker en --cm-geel.
   ===================================================================== */

/* ---- Achtergrond: zelfde verloop als docs.custommaterecreatie.eu ----
   html/body stonden op height:100%; dan loopt het verloop niet door tot
   onderaan. De voet blijft onderaan door min-height. */
html { height: auto; min-height: 100%; background: #f7edca; }
body {
	height: auto;
	min-height: 100vh;
	background:
		radial-gradient(circle at 12% 10%, #fffffff2, #0000 31rem),
		linear-gradient(135deg, #fff9e6 0%, #f8e7a9 100%);
}

/* ---- Witte kaarten ---- */
#Content_center .w3-white {
	background-color: #ffffffdb !important;   /* w3.css zet wit met !important */
	border: 1px solid #00000024;
	border-radius: 22px;
	box-shadow: 0 14px 40px #34290012;
}
/* Eerste kaart die over de kopafbeelding valt: niet doorschijnend */
#Content_center.C-content_move > .w3-container:first-child > .w3-white { background-color: #fff !important; }
/* Kaart in een kaart (productlijst): geen tweede rand of schaduw */
#Content_center .w3-white .w3-white {
	background-color: transparent !important;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* ---- Gele vlakken (kleur uit de Customizer) ---- */
#Content_center .C-top_color { border-radius: 22px; }

/* Geel kopvlak met wit vak eronder ("Laatste nieuws", de drie kolommen op
   de startpagina, productpagina): samen één kaart */
#Content_center .C-top_color:has(+ .w3-white) { border-radius: 22px 22px 0 0; }
#Content_center .C-top_color + .w3-white {
	border-top: 0;
	border-radius: 0 0 22px 22px;
}

/* Markten-iconen: wat meer lucht in het gele vlak */
#Content_center .C-top_color:has(> .Markten_icon) { padding-bottom: 10px; }

/* Productlijst en berichten: elk item een eigen kaart (zoals de tegels op
   docs.custommaterecreatie.eu) in plaats van één grote kaart met lijnen */
#Content_center > .w3-white:has(> .blog-post) {
	padding: 0;
	background-color: transparent !important;
	border: 0;
	box-shadow: none;
}
#Content_center .blog-post {
	margin: 0 0 18px;
	padding: 18px 10px;
	background: #ffffffdb;
	border: 1px solid #00000024;
	border-radius: 22px;
	box-shadow: 0 14px 40px #34290012;
}
#Content_center .blog-post + .ThickHR { display: none; }
.ThickHR { border-top: 1px solid #0000001a; }

/* ---- Afbeeldingen ---- */
#Content_center article img,
#Content_center .blog-post img,
#Content_center .wp-post-image,
#Content_center .w3-white p img,
#Content_center .mySlides { border-radius: 14px; }
#Content_center .w3-display-container { border-radius: 14px; overflow: hidden; }

/* ---- Koppen en titellinks ---- */
#Content_center h1,
#Content_center h2 { letter-spacing: -.02em; }
#Content_center h2 a,
#Content_center .blog-post-title a { text-decoration: none; }
#Content_center h2 a:hover,
#Content_center .blog-post-title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--cm-geel, #ffd539);
	text-decoration-thickness: 3px;
	text-underline-offset: 4px;
}

/* ---- Knoppen en paginanummers ---- */
.page-numbers { border-radius: 99px; }
.page-numbers:hover { background: #0000000d; }

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	min-height: 46px;
	padding: 8px 28px;
	background: var(--cm-donker, #333333) !important;   /* knop heeft w3-light-grey (met !important) */
	color: var(--cm-geel, #ffd539) !important;
	border: 1px solid #fafafa26;
	border-radius: 14px;
	font: 600 16px/28px Arial, Helvetica, sans-serif;
	cursor: pointer;
	transition: transform .15s cubic-bezier(.22, 1, .36, 1), background-color .15s, color .15s;
}
.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	background: var(--cm-geel, #ffd539) !important;
	color: #1f1f1f !important;
	transform: translateY(-1px);
	box-shadow: none;
}
.wpcf7 input[type="submit"]:focus-visible { outline: none; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cm-geel, #ffd539); }

/* ---- Invulvelden (contactformulier) ---- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea,
.wpcf7 select {
	box-sizing: border-box;
	padding: 10px 13px;
	background: #fff;
	border: 1px solid #aaa28c;
	border-radius: 9px;
	transition: border-color .18s, box-shadow .18s;
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
	outline: none;
	border-color: #9b7100;
	box-shadow: 0 0 0 3px #ffc4004d;
}
.wpcf7 textarea { width: 100%; resize: vertical; }
.wpcf7-response-output { border-radius: 12px; }

/* ---- Menu op de computer: ronde knoppen, zoals op docs.custommaterecreatie.eu ----
   Het gele vlak zat op de hele (90px hoge) link; nu op de tekst (<span>)
   eromheen als pil. De actieve pagina krijgt ook een gele pil.
   (De Customizer-kleuren staan inline in de kop, vandaar !important.) */
@media (min-width: 701px) {
	#cssmenu > ul > li > a,
	#cssmenu > ul > li > a:hover,
	#cssmenu ul li.has-sub:hover > a { background: transparent !important; }
	#cssmenu > ul > li > a > span {
		display: inline-block;
		margin-top: -8px;
		padding: 8px 15px;
		border-radius: 99px;
		transition: background-color .15s, color .15s;
	}
	#cssmenu > ul > li > a:hover > span,
	#cssmenu > ul > li.has-sub:hover > a > span,
	#cssmenu > ul > li.active > a > span {
		background: var(--cm-geel, #ffd539);
		color: #252525;
	}
	#cssmenu > ul > li > a:focus-visible > span { box-shadow: 0 0 0 2px var(--cm-donker, #333), 0 0 0 4px var(--cm-geel, #ffd539); }
	/* Menu even breed als voorheen: de ruimte zit nu in de pil, niet om de link */
	#cssmenu > ul > li > a { padding-left: 5px; padding-right: 5px; }
	/* Pijltje van "Markten" binnen de pil, donker op geel */
	#cssmenu > ul > li.has-sub > a > span { padding-right: 26px; }
	#cssmenu > ul > li.has-sub > a:before { right: 13px; }
	#cssmenu > ul > li.has-sub:hover > a:before,
	#cssmenu > ul > li.has-sub.active > a:before { border-top-color: #252525; }
	#cssmenu ul li > ul { border-radius: 14px; overflow: hidden; }
}

/* ---- Telefoon: iets kleinere afronding ---- */
@media (max-width: 600px) {
	#Content_center .w3-white,
	#Content_center .C-top_color { border-radius: 16px; }
	#Content_center .C-top_color:has(+ .w3-white) { border-radius: 16px 16px 0 0; }
	#Content_center .C-top_color + .w3-white { border-radius: 0 0 16px 16px; }
	#Content_center .w3-white .w3-white { border-radius: 0; }
	/* mobiel.css haalt de binnenmarge van de productlijst weg; als kaart is die nodig */
	#Content_center .blog-post.w3-row-padding,
	#Content_center .blog-post { padding: 6px 14px 4px; border-radius: 16px; }
	.wpcf7 input[type="submit"] { width: 100%; }
}