/* Joh Clothing v2: groep Home (home, over-ons, faq). Alleen wat 10-basis.css en 20-componenten.css niet dekken.
 * joh-home-logos (vc_row class="joh-logos joh-home-logos"): klantwens "logo's kleiner, meer witruimte".
 * 28 logo's: 7 per rij op desktop en tablet (4 volle rijen), 4 per rij op gsm.
 * Brede woordmerken worden begrensd door max-width, vierkante beeldmerken door max-height: zo krijgen ze een gelijker gewicht.
 */
body .main-content .joh-home-logos .joh-sectiekop { margin-bottom: 56px; }
body .main-content .joh-home-logos .clients.no-carousel {
	--joh-logo-kol: 7;
	--joh-logo-gap: 64px;
	row-gap: 52px;
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}
body .main-content .joh-home-logos .clients.no-carousel > div { height: 48px; }
body .main-content .joh-home-logos.joh-logos .clients > div img {
	max-width: min(100%, 112px) !important;
	max-height: 40px;
	opacity: .6;
}
body .main-content .joh-home-logos.joh-logos .clients > div:hover img { opacity: 1; }
@media only screen and (max-width: 999px) {
	body .main-content .joh-home-logos .joh-sectiekop { margin-bottom: 40px; }
	body .main-content .joh-home-logos .clients.no-carousel { --joh-logo-kol: 7; --joh-logo-gap: 24px; row-gap: 36px; }
	body .main-content .joh-home-logos .clients.no-carousel > div { height: 40px; }
	body .main-content .joh-home-logos.joh-logos .clients > div img { max-height: 32px; }
}
@media only screen and (max-width: 690px) {
	body .main-content .joh-home-logos .joh-sectiekop { margin-bottom: 28px; }
	body .main-content .joh-home-logos .clients.no-carousel { --joh-logo-kol: 4; --joh-logo-gap: 20px; row-gap: 28px; }
	body .main-content .joh-home-logos .clients.no-carousel > div { height: 36px; }
	body .main-content .joh-home-logos.joh-logos .clients > div img { max-height: 28px; }
}

/* joh-home-daarna (home, rij "En daarna?"): korte tekst naast een 4:5-beeld liet een groot leeg vlak naast het beeld.
 * Het vierkante beeld op desktop komt van de gedeelde modifier joh-beeld-vierkant op dezelfde rij (20-componenten.css).
 * Hier alleen de uitsnede iets onder het midden, zodat pers en stapel kleding allebei in beeld blijven. */
body .main-content .joh-home-daarna .img-with-aniamtion-wrap img { object-position: 50% 60%; }

/* ---------- Contact (pagina 14, inhoud ongewijzigd uit het origineel; alleen opmaak in de nieuwe stijl) ---------- */
/* De rij heeft column_margin 80px: op gsm stak de kolomrij daardoor 17px rechts buiten het scherm (body 407px breed). */
@media only screen and (max-width: 999px) {
	body.page-id-14 .main-content .vc_row > .row_col_wrap_12 { margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; }
	body.page-id-14 .main-content .vc_row > .row_col_wrap_12 > .wpb_column { padding-left: 0 !important; padding-right: 0 !important; }
}
/* social-iconen in teksteur zoals in de footer, niet in de Salient-accentkleur (felblauw) */
body.page-id-14 .main-content .nectar_icon i,
body.page-id-14 .main-content .nectar_icon svg { color: var(--joh-tekst) !important; fill: var(--joh-tekst) !important; transition: color .2s; }
body.page-id-14 .main-content .nectar_icon a:hover i { color: var(--joh-rood) !important; }
/* Gravity Forms (Orbital-thema): afgeronde velden, labels in het tekstfont, knop zoals de andere knoppen */
body .main-content .gform_wrapper.gform-theme {
	--gf-color-primary: var(--joh-rood);
	--gf-color-primary-rgb: 252, 0, 57;
	--gf-ctrl-border-color: var(--joh-lijn);
	--gf-ctrl-radius: 12px;
	--gf-ctrl-label-color-primary: var(--joh-tekst);
	--gf-ctrl-label-color-req: var(--joh-rood);
}
body .main-content .gform_wrapper .gfield_label,
body .main-content .gform_wrapper .gform-field-label {
	font-family: var(--joh-tekstfont) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	color: var(--joh-tekst) !important;
}
body .main-content .gform_wrapper input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
body .main-content .gform_wrapper select,
body .main-content .gform_wrapper textarea {
	border: 1px solid var(--joh-lijn) !important;
	border-radius: 12px !important;
	background-color: var(--joh-wit) !important;
	box-shadow: none !important;
}
body .main-content .gform_wrapper input:focus,
body .main-content .gform_wrapper select:focus,
body .main-content .gform_wrapper textarea:focus { border-color: var(--joh-tekst) !important; outline: none; }
body .main-content .gform_wrapper .gform_button {
	background: var(--joh-rood) !important;
	color: var(--joh-wit) !important;
	font-family: var(--joh-kop) !important;
	font-weight: 600 !important;
	font-size: 17px !important;
	border: 0 !important;
	border-radius: 200px !important;
	padding: 16px 32px !important;
}
body .main-content .gform_wrapper .gform_button:hover { background: var(--joh-tekst) !important; }
@media only screen and (max-width: 690px) {
	body .main-content .gform_wrapper .gform_button { width: 100%; }
}