/* Raamdecoland - contactpagina (contact.php, contact-sjabloon.php). Mobile-first.
   Kleurlogica (kleurronde okt 2026): hoofdknoppen ink, secundair wit met 2px ink rand, links #C4006A, gekozen = lime met ink vinkje.
   Sora (koppen) en Figtree (tekst) uit Kadence.
   Header: de stalentafel (3:1 desktop, 4:3 mobiel) staat zonder tekst erop naast (desktop) of boven (mobiel) de kop. */

.rdl-ct { --ct-marge: 20px; --ct-tekst: var(--rdl-ink); --ct-grijs: #4a504c; --ct-lijn: #d9ddd4; --ct-vlak: var(--rdl-tint); --ct-lime: var(--rdl-lime); --ct-magenta: var(--rdl-magenta-ink); --ct-fout: #b3261e;
  color: var(--ct-tekst); overflow-x: clip; }
.rdl-ct *, .rdl-ct *::before, .rdl-ct *::after { box-sizing: border-box; }
.rdl-ct h1, .rdl-ct h2 { margin: 0; font-family: Sora, sans-serif; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ct-tekst); overflow-wrap: break-word; }
.rdl-ct h2 { font-size: 24px; }
.rdl-ct p { margin: 0; }
.rdl-ct img { display: block; max-width: 100%; height: auto; }
.rdl-ct a:focus-visible, .rdl-ct button:focus-visible, .rdl-ct input:focus-visible, .rdl-ct textarea:focus-visible { outline: 2px solid var(--rdl-ink); outline-offset: 2px; }
.rdl-ct-wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--ct-marge); padding-right: var(--ct-marge); }
@media (max-width: 359px) { .rdl-ct { --ct-marge: 16px; } }
@media (min-width: 768px) { .rdl-ct { --ct-marge: 24px; } .rdl-ct h2 { font-size: 30px; } }

/* Knoppen */
.rdl-ct .rdl-ct-knop { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 24px; border: 2px solid var(--ct-magenta); border-radius: 12px; font-family: inherit; font-size: 17px; font-weight: 800; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; }
.rdl-ct .rdl-ct-knop--donker { border-color: var(--rdl-ink); background: var(--rdl-ink); color: #fff; }
.rdl-ct .rdl-ct-knop--donker:hover { border-color: #2c3a30; background: #2c3a30; color: #fff; }
.rdl-ct .rdl-ct-knop--omlijnd { border-color: var(--rdl-ink); background: #fff; color: var(--rdl-ink); }
.rdl-ct .rdl-ct-knop--omlijnd:hover { background: var(--rdl-tint); color: var(--rdl-ink); }
/* Knoppenrij (rdl_ct_knoppenrij_html()): [Bel …] donker met telefoonicoon + [DM op Instagram] omlijnd met het Kadence-icoon.
   Mobiel onder elkaar op volle breedte, vanaf 768px naast elkaar met gelijke breedte; 52px hoog, tekst mag afbreken. */
.rdl-ct .rdl-ct-knop--bel, .rdl-ct .rdl-ct-knop--dm { gap: 10px; white-space: normal; }
.rdl-ct .rdl-ct-knop--bel .kadence-svg-iconset, .rdl-ct .rdl-ct-knop--dm .kadence-svg-iconset { display: inline-flex; flex: none; }
.rdl-ct .rdl-ct-knop--bel svg, .rdl-ct .rdl-ct-knop--dm svg { flex: none; width: 20px; height: 20px; }
.rdl-ct .rdl-ct-knop--dm svg, .rdl-ct .rdl-ct-knop--bel .kadence-svg-iconset svg { fill: currentColor; }
.rdl-ct .rdl-ct-knoppen--rij .rdl-ct-knop { min-height: 52px; padding-top: 12px; padding-bottom: 12px; }
@media (min-width: 768px) {
  .rdl-ct .rdl-ct-knoppen--rij { flex-direction: row; flex-wrap: wrap; align-items: stretch; }
  /* Gelijke breedte zolang ze naast elkaar passen; nooit smaller dan de tekst (anders 2 regels in de smalle tekstkolom),
     past het niet, dan elk een eigen regel op volle breedte. */
  .rdl-ct .rdl-ct-knoppen--rij .rdl-ct-knop { flex: 1 1 0; min-width: max-content; width: auto; padding-left: 16px; padding-right: 16px; gap: 8px; font-size: 16px; white-space: nowrap; }
}
.rdl-od .rdl-od-stappen__knoppen { margin-top: 12px; }

/* 1. Header: mobiel de stalentafel boven (hoogte begrensd), dan kop en knoppen op volle breedte; vanaf 768px beeld ca. 60% met de tekst rechts ernaast */
.rdl-ct-banner { background: #fff; }
.rdl-ct-banner__binnen { display: flex; flex-direction: column; max-width: 1240px; margin: 0 auto; }
.rdl-ct-banner__beeld { display: block; aspect-ratio: 4 / 3; max-height: 45vh; width: 100%; overflow: hidden; background: #e9ece4; }
.rdl-ct-banner__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.rdl-ct-banner__tekst { padding: 22px var(--ct-marge) 28px; }
.rdl-ct-banner h1 { font-size: 28px; line-height: 1.12; }
.rdl-ct-knoppen { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.rdl-ct-knoppen .rdl-ct-knop { width: 100%; }
/* Grijze regel onder de knoppen: openingstijden · buitenlandnummer (gewone tel:-link, zelfde kleur); mobiel twee regels */
.rdl-ct .rdl-ct-tijden { margin-top: 8px; font-size: 14px; line-height: 1.45; color: var(--rdl-ink-muted); }
.rdl-ct .rdl-ct-tijden__deel { display: block; }
.rdl-ct .rdl-ct-tijden__punt { display: none; }
.rdl-ct .rdl-ct-tijden a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (min-width: 768px) {
  .rdl-ct .rdl-ct-tijden__deel, .rdl-ct .rdl-ct-tijden__punt { display: inline; }
}
.rdl-ct-banner.is-zonder-beeld { background: var(--ct-vlak); }
.rdl-ct-banner.is-zonder-beeld .rdl-ct-banner__tekst { padding-top: 32px; }
@media (min-width: 768px) {
  .rdl-ct-banner { background: #fff; }
  .rdl-ct-banner__binnen { flex-direction: row; align-items: center; gap: 32px; padding: 24px var(--ct-marge); }
  .rdl-ct-banner__beeld { flex: 0 0 60%; width: 60%; aspect-ratio: 3 / 1; max-height: none; border-radius: 14px; }
  .rdl-ct-banner__tekst { flex: 1 1 auto; padding: 0; }
  .rdl-ct-banner h1 { font-size: clamp(26px, 2.8vw, 40px); }
  .rdl-ct-knoppen { align-items: flex-start; }
  .rdl-ct-knoppen .rdl-ct-knop { width: auto; }
  .rdl-ct-banner.is-zonder-beeld { background: var(--ct-vlak); }
  .rdl-ct-banner.is-zonder-beeld .rdl-ct-banner__binnen { padding-top: 48px; padding-bottom: 48px; }
}

/* 2. Twee kolommen: formulier | Geen callcenter (mobiel onder elkaar) */
.rdl-ct-onder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.rdl-ct-formulier { padding: 36px 0 40px; }
.rdl-ct-formulier__binnen { max-width: 760px; }
@media (min-width: 900px) {
  .rdl-ct-onder { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; padding-top: 56px; padding-bottom: 72px; }
  .rdl-ct-onder .rdl-ct-formulier { padding: 0; }
}
.rdl-ct-intro { margin-top: 10px; font-size: 17px; line-height: 1.55; color: var(--ct-grijs); }
.rdl-ct-formulier__kaart { margin-top: 20px; }
.rdl-ct-melding { padding: 14px 16px; border: 2px dashed var(--ct-lijn); border-radius: 10px; font-size: 15px; }
@media (min-width: 768px) { .rdl-ct-formulier { padding: 56px 0 56px; } .rdl-ct-formulier__kaart { margin-top: 24px; } }

/* Velden van Contact Form 7 (de formuliercode staat in Data/contact/cf7-formulier.txt) */
.rdl-ct .wpcf7 form { margin: 0; }
.rdl-ct .rdl-cf br { display: none; }
.rdl-ct .rdl-cf p { margin: 0; }
.rdl-ct .rdl-cf p:empty { display: none; } /* lege alinea's die de editor van Contact Form 7 soms maakt */
.rdl-ct .rdl-cf { display: grid; gap: 18px; }
.rdl-ct .rdl-cf__veld { display: block; margin: 0; }
.rdl-ct .rdl-cf__label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ct-tekst); }
.rdl-ct .rdl-cf__ster { color: var(--ct-magenta); }
.rdl-ct .rdl-cf__hint { display: block; margin-top: 6px; font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--ct-grijs); }
.rdl-ct .rdl-cf__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; }
.rdl-ct .wpcf7-form-control-wrap { display: block; }
.rdl-ct .rdl-cf input[type="text"], .rdl-ct .rdl-cf input[type="email"], .rdl-ct .rdl-cf input[type="tel"], .rdl-ct .rdl-cf textarea {
  display: block; width: 100%; min-height: 54px; margin: 0; padding: 14px 16px; border: 2px solid #b9bfb2; border-radius: 10px; background: #fff;
  font-family: inherit; font-size: 17px; line-height: 1.4; color: var(--ct-tekst); box-shadow: none; -webkit-appearance: none; appearance: none; }
.rdl-ct .rdl-cf textarea { min-height: 160px; resize: vertical; }
.rdl-ct .rdl-cf input[type="text"]:focus, .rdl-ct .rdl-cf input[type="email"]:focus, .rdl-ct .rdl-cf input[type="tel"]:focus, .rdl-ct .rdl-cf textarea:focus { border-color: var(--rdl-ink); outline: 2px solid var(--rdl-ink); outline-offset: 0; }
.rdl-ct .rdl-cf .wpcf7-not-valid { border-color: var(--ct-fout); }
.rdl-ct .wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--ct-fout); }

/* Foto's: duidelijke uploadknop, de bestandsnaam staat ernaast */
.rdl-ct .rdl-cf__fotos { display: grid; gap: 12px; padding: 16px; border: 2px dashed var(--ct-lijn); border-radius: 12px; background: #fff; }
.rdl-ct .rdl-cf__fotos > .rdl-cf__label { margin-bottom: 0; }
.rdl-ct .rdl-cf__foto { display: block; margin: 0; }
.rdl-ct .rdl-cf input[type="file"] { display: block; width: 100%; min-height: 54px; padding: 0; margin: 0; border: 0; background: transparent; font-family: inherit; font-size: 15px; line-height: 1.3; color: var(--ct-tekst); cursor: pointer; }
.rdl-ct .rdl-cf input[type="file"]::file-selector-button { min-height: 54px; margin: 0 14px 0 0; padding: 12px 18px; border: 2px solid var(--ct-magenta); border-radius: 10px; background: #fff; font-family: inherit; font-size: 16px; font-weight: 800; color: var(--ct-magenta); cursor: pointer; }
.rdl-ct .rdl-cf input[type="file"]::file-selector-button { border-color: var(--rdl-ink); color: var(--rdl-ink); }
.rdl-ct .rdl-cf input[type="file"]:hover::file-selector-button { background: var(--rdl-tint); }
.rdl-ct .rdl-cf input[type="file"]:focus-visible { outline: 2px solid var(--rdl-ink); outline-offset: 2px; border-radius: 10px; }
/* Met JavaScript verschijnt de volgende uploadknop pas als de vorige een bestand heeft; zonder JavaScript staan ze alle drie. */
.rdl-cf-js .rdl-cf__foto--extra:not(.is-open) { display: none; }

/* Akkoordregel */
.rdl-ct .wpcf7-acceptance .wpcf7-list-item { display: block; margin: 0; }
.rdl-ct .wpcf7-acceptance label { display: flex; align-items: flex-start; gap: 12px; margin: 0; min-height: 44px; font-size: 15px; line-height: 1.5; color: var(--ct-grijs); cursor: pointer; }
/* Vinkvakje: aangevinkt = lime vlak, 2px ink rand, ink vinkje */
.rdl-ct .wpcf7-acceptance input[type="checkbox"] { flex: 0 0 auto; width: 24px; height: 24px; margin: 2px 0 0; box-sizing: border-box; -webkit-appearance: none; appearance: none; border: 2px solid var(--rdl-border-control); border-radius: 6px; background: #fff; cursor: pointer; }
.rdl-ct .wpcf7-acceptance input[type="checkbox"]:checked { border-color: var(--rdl-ink); background: var(--rdl-lime) var(--rdl-vink) center / 100% no-repeat; }
.rdl-ct .wpcf7-acceptance a { color: var(--ct-tekst); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Verzenden en meldingen */
.rdl-ct .rdl-cf input[type="submit"], .rdl-ct .rdl-cf button[type="submit"] { display: block; width: 100%; min-height: 56px; margin: 0; padding: 14px 24px; border: 2px solid var(--ct-magenta); border-radius: 12px; background: var(--ct-magenta); font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.2; color: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rdl-ct .rdl-cf input[type="submit"], .rdl-ct .rdl-cf button[type="submit"] { border-color: var(--rdl-ink); background: var(--rdl-ink); color: #fff; }
.rdl-ct .rdl-cf input[type="submit"]:hover { border-color: #2c3a30; background: #2c3a30; }
.rdl-ct .rdl-cf input[type="submit"]:disabled { opacity: .6; cursor: progress; }
.rdl-ct .wpcf7-spinner { display: none; }
.rdl-ct .wpcf7 .hidden-fields-container { display: none; }
.rdl-ct .wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); }
.rdl-ct .wpcf7-response-output { margin: 18px 0 0; padding: 14px 16px; border: 2px solid var(--ct-fout); border-radius: 10px; background: #fdf1f0; font-size: 16px; font-weight: 600; line-height: 1.45; color: var(--ct-tekst); }
.rdl-ct .wpcf7-response-output:empty, .rdl-ct .wpcf7 form.init .wpcf7-response-output { display: none; }
.rdl-ct .wpcf7 form.sent .wpcf7-response-output { border-color: var(--rdl-ink); background: var(--rdl-lime-tint); }
@media (min-width: 768px) {
  .rdl-ct .rdl-cf input[type="submit"], .rdl-ct .rdl-cf button[type="submit"] { display: inline-block; width: auto; min-width: 260px; }
}

/* 3. Geen callcenter: kop, korte tekst en de foto van het familiebedrijf (rechterkolom vanaf 900px) */
.rdl-ct-familie { display: flex; flex-direction: column; gap: 12px; padding: 0 0 48px; }
.rdl-ct-familie__tekst { max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--ct-grijs); }
.rdl-ct-familie__foto { width: 100%; height: auto; margin-top: 8px; border-radius: 12px; }
@media (min-width: 900px) { .rdl-ct-familie { padding: 0; } }
@media (prefers-reduced-motion: no-preference) { .rdl-ct .rdl-ct-knop, .rdl-ct .rdl-cf input[type="submit"] { transition: background-color .15s, border-color .15s; } }

/* Band onder de banner (contact, canvas 23 okt 2026): surface-tint van rand tot rand, 40px (mobiel) / 64px binnenin.
   Links het formulier in een witte kaart, rechts Geen callcenter + foto + kaartje naar /onderdelen/. */
.rdl-ct-band { background: var(--rdl-tint); padding: 40px 0; }
.rdl-ct-band .rdl-ct-onder { gap: 32px; padding-top: 0; padding-bottom: 0; }
.rdl-ct-band .rdl-ct-formulier, .rdl-ct-band .rdl-ct-familie { padding: 0; }
.rdl-ct-band .rdl-ct-formulier__kaart { margin: 0; padding: 24px 16px; border: 1px solid var(--rdl-border); border-radius: 12px; background: #fff; }
.rdl-ct-band .rdl-ct-formulier__velden { margin-top: 24px; container-type: inline-size; container-name: rdl-cf; }
@media (min-width: 768px) {
  .rdl-ct-band { padding: 64px 0; }
  .rdl-ct-band .rdl-ct-formulier__kaart { padding: 32px; }
}
@media (min-width: 900px) {
  .rdl-ct-band .rdl-ct-onder { gap: 48px; padding-top: 0; padding-bottom: 0; }
}

/* Formulier in de kaart: mobiel alles onder elkaar; is de kaart breed genoeg (container ≥ 520px), dan naam/e-mail en
   telefoon/ordernummer naast elkaar (gap 16px), vraag, foto's en akkoord over de volle breedte, en Turnstile en
   "Bericht versturen" samen op één rij (wrap). Alleen CSS: de markup van Contact Form 7 blijft gelijk. */
.rdl-ct-band .rdl-cf { display: flex; flex-wrap: wrap; gap: 18px 16px; }
.rdl-ct-band .rdl-cf > * { flex: 1 1 100%; min-width: 0; }
.rdl-ct-band .rdl-cf > .wpcf7-turnstile, .rdl-ct-band .rdl-cf > p:has(.wpcf7-turnstile) { flex: 0 0 auto; max-width: 100%; }
.rdl-ct-band .rdl-cf input[type="submit"], .rdl-ct-band .rdl-cf button[type="submit"] { min-height: 52px; padding-top: 12px; padding-bottom: 12px; font-size: 17px; }
@container rdl-cf (min-width: 520px) {
  .rdl-ct-band .rdl-cf > p:has([data-name="naam"], [data-name="email"], [data-name="telefoon"], [data-name="ordernummer"]) { flex: 1 1 calc(50% - 8px); }
  .rdl-ct-band .rdl-cf > p:has([type="submit"]) { flex: 1 1 200px; display: flex; align-items: center; }
  .rdl-ct-band .rdl-cf > p:has([type="submit"]) input[type="submit"] { width: 100%; min-width: 0; }
}

/* Kaartje naar /onderdelen/: wit met rand, de hele kaart is de link */
.rdl-ct .rdl-ct-od-kaart { display: block; min-height: 44px; margin-top: 4px; padding: 16px 20px; border: 1px solid var(--rdl-border); border-radius: 12px; background: #fff; color: var(--rdl-ink); text-decoration: none; }
.rdl-ct .rdl-ct-od-kaart:hover { border-color: var(--rdl-ink); }
.rdl-ct .rdl-ct-od-kaart__kop { display: block; font-size: 16px; font-weight: 700; line-height: 1.35; }
.rdl-ct .rdl-ct-od-kaart__link { display: block; margin-top: 2px; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--rdl-magenta-ink); }