/* Clickdreams: aanvullingen voor WordPress (formulieren, beheerbalk, toegankelijkheid).
   De opmaak van de pagina's zelf staat in base.css en de stijlsets. */

/* ---------- Beheerbalk: de vaste header schuift mee ---------- */
body.admin-bar .header{top:32px}
@media (max-width:782px){body.admin-bar .header{top:46px}}
@media (max-width:600px){body.admin-bar .header{top:0}}

/* ---------- Fluent Forms in de opmaak van .cd-form ---------- */
.cd-ff{display:block;margin:0;padding:clamp(24px,3vw,36px);background:#fff;border-radius:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.cd-ff .fluentform,.cd-ff form{margin:0}
.cd-ff fieldset{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0;padding:0;border:0;min-width:0}
.cd-ff fieldset>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cd-ff .ff-el-group{margin:0!important;min-width:0}
.cd-ff .ff-el-group.full,.cd-ff .ff-el-group.ff_submit_btn_wrapper,.cd-ff .ff-el-group:has(textarea),.cd-ff .ff-el-group:has(select),.cd-ff .ff-el-group.ff-el-section-break,.cd-ff .ff-t-container,.cd-ff .ff-el-group.ff_list_buttons,.cd-ff .ff-el-tc,.cd-ff .ff-el-recaptcha,.cd-ff .ff-el-turnstile,.cd-ff .ff-custom_html,.cd-ff .ff-el-group:has(input[type=checkbox]){grid-column:1 / -1}
.cd-ff .ff-el-input--label{margin:0!important;padding:0!important}
.cd-ff .ff-el-input--label label{display:block;margin:0 0 6px;color:#0f1124;font-family:var(--font);font-size:13.5px;font-weight:600;line-height:1.7}
.cd-ff .ff-el-is-required.asterisk-right label:after,.cd-ff .ff-el-is-required.asterisk-left label:before{content:" *";color:var(--btn);font-style:normal;margin:0}
.cd-ff .ff-el-form-control,.cd-ff input[type=text],.cd-ff input[type=email],.cd-ff input[type=tel],.cd-ff input[type=url],.cd-ff input[type=number],.cd-ff textarea,.cd-ff select{width:100%;height:50px;padding:0 16px;background:#f4f5f9;color:#0f1124;border:1px solid #d9dce6;border-radius:8px;outline:none;box-shadow:none;font:15px var(--font);line-height:normal;transition:border-color .2s,box-shadow .2s,background .2s}
.cd-ff textarea.ff-el-form-control,.cd-ff textarea{height:120px;min-height:120px;padding:12px 16px;resize:vertical;line-height:1.6}
.cd-ff select.ff-el-form-control,.cd-ff select{padding:0 44px 0 16px;background:#f4f5f9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%230f1124' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;-webkit-appearance:none;appearance:none}
.cd-ff .ff-el-form-control::placeholder{color:#8a8fa3;opacity:1}
.cd-ff .ff-el-form-control:focus{background-color:#fff;border-color:#5c54c9;box-shadow:0 0 0 3px rgba(92,84,201,.25)}
.cd-ff .ff-el-is-error .ff-el-form-control{border-color:#c0392b}
.cd-ff .ff-el-is-error .text-danger,.cd-ff .error.text-danger{margin:6px 0 0;color:#c0392b;font-size:13px;line-height:1.4}
.cd-ff .ff-el-form-check label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3f4452}
.cd-ff .ff-el-form-check input{width:18px;height:18px;margin-top:3px;accent-color:#b425ab}
.cd-ff .ff_submit_btn_wrapper{margin:0}
.cd-ff .ff-btn-submit,.cd-ff button[type=submit]{width:100%;height:54px;margin-top:2px;padding:0 20px;background:#b425ab!important;color:#fff!important;border:0;border-radius:8px;box-shadow:none;cursor:pointer;font:600 15.5px var(--font);display:flex;align-items:center;justify-content:center;gap:10px;transition:background .2s;opacity:1}
.cd-ff .ff-btn-submit:after{content:"";width:18px;height:18px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat}
.cd-ff .ff-btn-submit:hover{background:#0f1124!important}
.cd-ff .ff-btn-submit:focus-visible{outline:3px solid #5c54c9;outline-offset:3px}
.cd-ff .ff-message-success{margin:0;padding:0;border:0;box-shadow:none;background:none;color:#46a33a;font-size:15px;line-height:1.6}
.cd-ff .ff-errors-in-stack{margin:8px 0 0;color:#c0392b;font-size:13.5px}
@media (max-width:620px){.cd-ff fieldset{grid-template-columns:1fr}}

/* ---------- Secties "Tekst" en "Formulier" (eenvoudige pagina's zoals contact en privacy) ---------- */
.cd-tekst-in{max-width:820px}
.cd-tekst .h2,.cd-formulier .h2{margin:0 0 18px}
.cd-prose{color:#3f4452;font-size:16px;line-height:1.75}
.cd-prose>*:first-child{margin-top:0}
.cd-prose h2{font-size:clamp(23px,2.3vw,30px);font-weight:800;line-height:1.25;margin:40px 0 14px;color:var(--ink)}
.cd-prose h3{font-size:19px;font-weight:700;margin:28px 0 8px;color:var(--ink)}
.cd-prose p{margin:0 0 16px}
.cd-prose ul,.cd-prose ol{margin:0 0 16px;padding-left:22px}
.cd-prose li{margin:0 0 6px}
.cd-prose a{color:var(--btn);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.cd-formulier-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:start}
.cd-formulier-tekst{color:#3f4452;font-size:16px;line-height:1.75}
.cd-formulier-tekst p{margin:0 0 14px}
.cd-formulier-tekst a{color:var(--btn);font-weight:600}
@media (max-width:900px){.cd-formulier-in{grid-template-columns:1fr}}

/* ---------- Zoekresultaten zonder afbeelding ---------- */
.search .post:not(:has(.post-media)) .post-b{padding-top:24px}

/* ---------- Schermlezers ---------- */
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Ondertitel in de h1 (ook op stijlsets waarvan het design er geen heeft) */
.h1-sub{display:block;white-space:normal;font-size:clamp(22px,2.2vw,30px);font-weight:700;line-height:1.25;color:#111216;margin-top:12px}
.cd-ff select.ff-el-form-control:not([size]):not([multiple]){height:50px}
/* In het design "Website laten maken" heeft deze afbeelding geen vaste hoogte (WordPress zet width/height) */
.stijl-web .shop-card img{height:auto}
/* Uitgelichte kaart in het mega-menu: de hoogte uit het HTML-attribuut mag de 16:9-verhouding niet overschrijven. */
.feat img{height:auto;flex:none}
/* Fluent Forms: afstanden gelijk aan de formulieren in de designs (Fluent-CSS laadt later, dus specifieker) */
.cd-ff .ff-default .ff-el-input--label{display:block}
.cd-ff .ff-default .ff-el-input--label label{display:block;margin:0 0 6px;font-weight:600;line-height:1.7}
.cd-ff .ff-default .ff-el-input--label.ff-el-is-required.asterisk-right label:after{content:" *";margin:0;color:var(--btn)}
.cd-ff .ff-default textarea.ff-el-form-control{display:inline-block;vertical-align:baseline}
.cd-ff fieldset::after{content:"";grid-column:1 / -1;min-height:1.2em;margin-top:-4px;font-size:13.5px}
/* Hero van een dienstpagina met een foto rechts in plaats van een kaart (contactpagina). */
.hw-card.hw-foto{padding:14px}
.hw-card.hw-foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:16px}
@media (max-width:640px){.hw-card.hw-foto{padding:10px;border-radius:20px}.hw-card.hw-foto img{border-radius:12px}}
/* Links in FAQ-antwoorden in de knopkleur, net als de links in de notities van het design. */
.faq details p a,.faq details .a a,.faq-list details p a,.faq-list details .a a{color:var(--btn);font-weight:600}
/* Notitie op een lichtblauwe sectie: witte achtergrond, anders valt het blok weg tegen de sectie. */
.result .k-note,.veilig .k-note{background:#fff;border:1px solid #dcedf8}
/* Project met een website: de hele kaart is de link. */
.ex-link{display:flex;flex-direction:column;flex:1;color:inherit;text-decoration:none}
/* Klikbare items in de zwarte balk onder de hero (contactpagina). */
.hw-usps a{color:inherit;text-decoration:none}
.hw-usps a .tile{transition:transform .2s}
.hw-usps a:hover .tile{transform:translateY(-2px)}
.hw-usps h3 a:hover{text-decoration:underline;text-underline-offset:4px}
/* Geen onderlijn onder een geopend hoofdmenu-item (op verzoek van Clickdreams). */
.nav-dd[aria-expanded="true"]::after,.nav-link[aria-current="page"]::after{display:none}