/*
Theme Name: Toine de Klusman (bewerkbaar)
Description: Bewerkbare landingspagina voor toinedeklusman.nl, opgebouwd met standaard WordPress-blokken zodat alle tekst en afbeeldingen aanpasbaar zijn via de editor.
Author: Toine de Klusman
Version: 1.0
Text Domain: toinedeklusman
*/

*{ box-sizing:border-box; }
body{ -webkit-font-smoothing:antialiased; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.wp-block-image img{ width:100%; }
.wp-block-heading{ line-height:1.2; }

/* HEADER */
.site-header{ background:#32384D; position:sticky; top:0; z-index:100; }
.header-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:20px; max-width:1300px; margin:0 auto; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:42px; width:auto; display:block; }
.brand-text{ display:flex; flex-direction:column; line-height:1.25; }
.brand-text .name{ color:#fff; font-weight:700; font-size:18px; }
.brand-text .tagline{ color:#E29930; font-size:11px; letter-spacing:.03em; }
.main-nav ul{ display:flex; gap:26px; list-style:none; margin:0; padding:0; }
.main-nav a{ color:#fff; font-size:14.5px; font-weight:500; opacity:.9; }
.main-nav a:hover{ opacity:1; color:#E29930; }
.header-cta{ display:flex; align-items:center; gap:14px; }
.phone-link{ color:#E29930; font-size:14px; font-weight:600; white-space:nowrap; }
.nav-toggle{ display:none; background:none; border:none; color:#fff; font-size:24px; cursor:pointer; }

/* BUTTONS (styling on top of core/button) */
.wp-block-button.is-style-tdk-primary .wp-block-button__link{
  background:#E29930; color:#32384D; font-weight:600; border-radius:6px; padding:14px 24px;
}
.wp-block-button.is-style-tdk-primary .wp-block-button__link:hover{ background:#EAB86E; }
.wp-block-button.is-style-outline .wp-block-button__link{
  border:1.5px solid rgba(255,255,255,0.6); color:#fff; border-radius:6px; padding:13px 24px; background:transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{ background:rgba(255,255,255,0.1); }

/* HERO */
.tdk-hero{ padding:40px 0 48px; }
.tdk-hero .wp-block-heading{ font-size:clamp(30px,4vw,44px); }
.tdk-hero-visual{ position:relative; }
.tdk-hero-visual img{ border-radius:8px; }
.tdk-hero-checklist{
  position:absolute; right:16px; bottom:-30px; background:#fff; border-radius:8px;
  padding:18px 22px; box-shadow:0 12px 30px rgba(0,0,0,0.2); max-width:230px;
}
.tdk-hero-checklist ul{ margin:0; padding:0; list-style:none; }
.tdk-hero-checklist li{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:500; color:#32384D; padding:4px 0; }
.tdk-hero-checklist li::before{ content:"✓"; color:#E29930; font-weight:700; }
.tdk-rating{ color:#E29930; letter-spacing:3px; font-size:15px; }

/* TRUST BAR (oude iconenstijl, vervangen door tdk-trust-row hieronder) */

/* SERVICE CARDS */
.tdk-service-card{
  background:#fff; border:1px solid #E4E6EB; border-radius:8px; padding:20px 18px; height:100%;
}
.tdk-service-card .ic{
  width:50px; height:50px; border-radius:50%; background:#FBEEDA; color:#E29930;
  display:flex; align-items:center; justify-content:center; margin-bottom:14px;
}
.tdk-service-card .ic svg{ width:22px; height:22px; }
.tdk-service-card ul{ margin:0 0 12px; padding-left:16px; }
.tdk-service-card li{ font-size:13.5px; color:#5B6272; padding:2px 0; }
.tdk-service-card .more{ color:#E29930; font-weight:600; font-size:13.5px; }

/* SPEC COMPARISON TABLE (Peblar Home vs Business) */
.tdk-spec-table table{ border-collapse:collapse; width:100%; background:#fff; border-radius:8px; overflow:hidden; }
.tdk-spec-table th, .tdk-spec-table td{ padding:10px 16px; font-size:13.5px; text-align:center; border-bottom:1px solid #E4E6EB; }
.tdk-spec-table th{ background:#32384D; color:#fff; font-weight:700; }
.tdk-spec-table td:first-child, .tdk-spec-table th:first-child{ text-align:left; font-weight:600; color:#32384D; }
.tdk-spec-table tr:last-child td{ border-bottom:none; }
.tdk-spec-table tr:nth-child(even) td{ background:#F9FAFB; }

/* WHY BAND */
.tdk-why-band{ padding:40px 0; }
.tdk-why-band img{ border-radius:8px; }
.tdk-why-checks ul{ list-style:none; margin:0; padding:0; }
.tdk-why-checks li{ display:flex; align-items:center; gap:10px; color:#fff; font-size:14.5px; font-weight:500; padding:6px 0; }
.tdk-why-checks li::before{ content:"✓"; color:#E29930; font-weight:700; }

/* PROCESS */
.tdk-process{ padding:44px 0; }
.tdk-process-card{
  background:#fff; border-radius:14px; box-shadow:0 8px 30px rgba(30,40,60,0.08);
  padding:36px 28px 24px; margin-top:8px;
}
.tdk-process-row{ position:relative; }
.tdk-process-row::before{
  content:""; position:absolute; top:26px; left:8%; right:8%; height:2px;
  background-image:linear-gradient(to right,#E29930 60%, transparent 40%);
  background-size:14px 2px; background-repeat:repeat-x;
}
.tdk-process-step{ text-align:center; position:relative; }
.tdk-process-step .num{
  width:52px; height:52px; border-radius:50%; background:#232838;
  display:flex; align-items:center; justify-content:center; margin:0 auto 14px;
  position:relative; z-index:1;
}
.tdk-process-step .num svg{ width:22px; height:22px; }
.tdk-process-step .num .badge{
  position:absolute; top:-6px; right:-6px; width:20px; height:20px; border-radius:50%;
  background:#E29930; color:#232838; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; z-index:2;
}
.tdk-process-step h4{ font-size:15px; margin:0 0 6px; color:#32384D; }
.tdk-process-step p{ font-size:13px; color:#5B6272; margin:0; }

/* TRUST BAR */
.tdk-trust-bar{ padding:28px 0; }
.tdk-trust-item{ display:flex; align-items:center; }
.tdk-trust-row{ display:flex; align-items:center; gap:12px; }
.tdk-trust-row svg{ width:20px; height:20px; flex-shrink:0; }
.tdk-trust-row span{ color:#ffffff !important; font-size:13.5px; font-weight:500; line-height:1.3; }

/* RECENTE PROJECTEN */
.tdk-project-card{ border-radius:10px; overflow:hidden; border:1px solid #E4E6EB; background:#fff; height:100%; }
.tdk-project-thumb{ margin:0; aspect-ratio:4/3; overflow:hidden; }
.tdk-project-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tdk-project-info{ padding:14px 16px; }
.tdk-project-info h4{ font-size:14.5px; margin:0 0 4px; color:#32384D; }
.tdk-project-info p{ font-size:12.5px; color:#5B6272; margin:0; }
.tdk-project-cta{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  height:100%; min-height:180px; border:1.5px dashed #D8DCE3; border-radius:10px;
  text-align:center; padding:20px; color:#32384D; font-size:14.5px;
}
.tdk-project-cta:hover{ border-color:#E29930; }
.tdk-project-cta strong{ color:#E29930; }
.tdk-project-cta .arrow{ color:#E29930; font-size:18px; }

/* CONTACT FORM */
.tdk-contact-form p{ margin-bottom:14px; }
.tdk-contact-form label{ font-size:13px; display:block; margin-bottom:4px; }
.tdk-contact-form input, .tdk-contact-form textarea{
  width:100%; padding:11px 14px; border-radius:6px; font-family:inherit; font-size:14px;
}
.tdk-contact-form button{
  background:#E29930; color:#32384D; font-weight:600; border:none; border-radius:6px;
  padding:13px 26px; font-size:14.5px; cursor:pointer;
}
.tdk-contact-form button:hover{ background:#EAB86E; }
/* Op de homepage-band (navy achtergrond): donkere invulvelden */
#contact .tdk-contact-form label{ color:#fff; }
#contact .tdk-contact-form input, #contact .tdk-contact-form textarea{
  border:1px solid #4A5170; background:#232838; color:#fff;
}
/* Op de losse Contact-pagina (lichte achtergrond): lichte invulvelden */
.tdk-contact-form-light label{ color:#32384D; }
.tdk-contact-form-light input, .tdk-contact-form-light textarea{
  border:1px solid #D8DCE3; background:#fff; color:#1F2430;
}

/* FOOTER */
.site-footer{ background:#282D3D; color:#B8BECC; padding:38px 0 0; font-size:13.5px; }
.site-footer .wrap{ max-width:1200px; margin:0 auto; padding:0 24px; }
.site-footer h4{ color:#fff; font-size:14px; margin-bottom:14px; }
.site-footer ul{ list-style:none; margin:0; padding:0; }
.site-footer li{ padding:5px 0; }
.site-footer a:hover{ color:#E29930; }
.tdk-social-icon{
  width:34px; height:34px; border-radius:50%; border:1px solid #454C5F;
  display:flex; align-items:center; justify-content:center; color:#B8BECC;
  transition:border-color .15s ease, color .15s ease;
}
.tdk-social-icon:hover{ border-color:#E29930; color:#E29930; }
.tdk-footer-rating{ margin-top:12px; font-size:13px; }
.tdk-footer-rating a{ color:#B8BECC; }
.tdk-footer-rating a:hover{ color:#E29930; }
.tdk-footer-rating .tdk-rating{ color:#E29930; letter-spacing:1px; margin:0 4px; }
.footer-bottom{ border-top:1px solid #3B4154; padding:18px 24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:12.5px; max-width:1200px; margin:0 auto; }

/* PROMO LINK CARDS */
.tdk-promo-card{
  display:flex; align-items:center; gap:16px; background:#fff; border:1px solid #E4E6EB;
  border-radius:8px; padding:22px 24px; transition:border-color .15s ease, transform .15s ease;
}
.tdk-promo-card:hover{ border-color:#E29930; transform:translateY(-2px); }
.tdk-promo-card .ic{
  width:48px; height:48px; border-radius:12px; background:#FBEEDA; color:#E29930;
  display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0;
}
.tdk-promo-card .promo-text{ display:flex; flex-direction:column; gap:4px; }
.tdk-promo-card .promo-text strong{ color:#32384D; font-size:15.5px; }
.tdk-promo-card .promo-text span{ color:#5B6272; font-size:13.5px; }

/* REVIEWS */
.tdk-reviews-head{ text-align:center; margin-bottom:26px; font-size:14.5px; color:#32384D; }
.tdk-reviews-head .tdk-rating{ margin-right:8px; }
.tdk-reviews-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1200px; margin:0 auto; }
.tdk-review-card{ background:#fff; border:1px solid #E4E6EB; border-radius:8px; padding:22px; }
.tdk-review-card .stars{ color:#E29930; font-size:14px; margin-bottom:10px; }
.tdk-review-card p{ font-size:14px; color:#1F2430; font-style:italic; margin-bottom:12px; }
.tdk-review-card .who{ font-size:13px; color:#5B6272; font-weight:600; }
.tdk-reviews-more{ text-align:center; margin-top:24px; }
.tdk-reviews-more a{ color:#E29930; font-weight:600; font-size:14px; }
.tdk-reviews-fallback{ text-align:center; padding:20px; }
.tdk-reviews-fallback p{ color:#5B6272; font-size:14px; margin-bottom:10px; }
.tdk-reviews-link{ color:#E29930; font-weight:600; }
@media (max-width: 780px){
  .tdk-reviews-grid{ grid-template-columns:1fr; }
}
@media (max-width: 780px){
  .main-nav{ display:none; position:absolute; top:100%; left:0; right:0; background:#32384D; padding:16px 24px; }
  .main-nav.open{ display:block; }
  .main-nav ul{ flex-direction:column; gap:16px; }
  .nav-toggle{ display:block; }
  .tdk-hero-checklist{ position:static; margin-top:16px; }
  .tdk-process-row::before{ display:none; }
}
@media (max-width: 900px){
  .site-footer .wrap{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 560px){
  .site-footer .wrap{ grid-template-columns:1fr !important; }
}

/* PROJECTEN-GALERIJ (echt WordPress Galerij-blok) */
.tdk-project-gallery.wp-block-gallery{ gap:14px; }
.tdk-project-gallery .wp-block-image{ margin:0; border-radius:8px; overflow:hidden; }
.tdk-project-gallery .wp-block-image img{ border-radius:8px; transition:transform .2s ease; }
.tdk-project-gallery .wp-block-image:hover img{ transform:scale(1.04); }