/* =========================================================
   DirectClinics — Sitewide basis
   Palet, typografie en containers. Single source of truth.
   Laadvolgorde: main.css (Bootstrap) -> dc-base.css -> dc-header/footer/home.
   Wordt globaal ingeladen, dus geldt op de hele site.

   INHOUD
     1. Design tokens        (kleuren, containerbreedtes, brand- + Bootstrap-vars)
     2. Containers           (.container / .dc-container / .dc-small-container)
     3. Typografie           (body, koppen, teksthulpklassen + responsive type)
     4. Buttons              (alle knopvarianten + knop-marges)
     5. Componenten & tweaks (losse element-aanpassingen)
     6. WPML taalwisselaar
     7. Utilities
     8. Responsive — mobiele layout (<= 768px)
========================================================= */

textarea.wpcf7-form-control.wpcf7-textarea.form-control {
    border-radius: 20px;
}
/* =========================================================
   1. DESIGN TOKENS
   Schuif hier; alles wat var(--...) gebruikt beweegt automatisch mee.
========================================================= */
:root {
  /* ---- Kleurpalet ---- */
  --beige:    #D8CFC4;
  --stone:    #B8AEA4;
  --graphite: #2A2A2A;
  --cream:    #F7F5F2;
  --petrol:   #6ba8ae;

  /* ---- Containerbreedtes (single source of truth) ----
     Schuif hier; alle containers én afgeleide maten (hero-split, reviews,
     paginablokken) bewegen automatisch mee. */
  --dc-w-wide:   1480px;   /* .container          */
  --dc-w-normal: 1280px;   /* .dc-container       */
  --dc-w-small:  960px;    /* .dc-small-container */
  --dc-w-gutter: 35px;     /* padding-inline      */

  /* ---- Hoogtepadding-waarden (dc-sec + varianten) ----
     Gebruikt door de paginablokken-render via var(--dc-pad-*). */
  --dc-pad-standaard: 85px;   /* Sitestandaard (= dc-sec) */
  --dc-pad-groter:    120px;
  --dc-pad-kleiner:   40px;

  /* ---- Brand-tokens hergedefinieerd op het palet ----
     Hierdoor kleurt alle var(--dc-*) in header/footer/home automatisch mee. */
  /* LET OP: deze vijf stonden tot 21-09-2026 ook in dc-header.css, dat later
     laadt en dus sitewide won. De waarden hieronder zijn de waarden die de site
     al die tijd al toonde. Er is dus niets van kleur veranderd, er is nu nog
     maar één plek waar ze staan. */
  --dc-navy:          #03394b;           /* primaire tekst            */
  --dc-dark:          #16262c;           /* donkere secties           */
  --dc-teal:          #15655a;           /* accent                    */
  --dc-cta-solid:     #15655a;           /* knop op witte achtergrond */
  --dc-cta-trans:     var(--petrol);     /* knop op transparante hero */
  --dc-cream:         #f4f3ee;

  /* Header-specifiek, verhuisd uit dc-header.css */
  --dc-nav-h:         80px;              /* hoogte van de nav-rij     */
  --dc-line:          rgba(0,0,0,.06);
  --dc-section-cream: var(--cream);
  --dc-sand:          var(--beige);      /* zachte vlakken / sec. knoppen */
  --dc-muted:         #5f6f73;           /* gedempte subtekst (ongewijzigd) */

  /* ---- Bootstrap-tekst gelijktrekken ---- */
  --bs-body-font-family: "Inter", sans-serif;
  --bs-body-font-size:   15px;
  --bs-body-font-weight: 300;
  --bs-body-color:       var(--graphite);
  --bs-heading-color:    var(--graphite);

  /* Bootstrap-merkkleuren naar het palet. Anders blijven standaard-links,
     .btn-primary, .text-primary en focus-rings op bootscore-mint (#3db8a1)
     en zelfs Bootstrap-blauw staan. */
  --bs-primary:              #32666B;
  --bs-primary-rgb:          50, 102, 107;
  --bs-link-color:           #32666B;
  --bs-link-color-rgb:       50, 102, 107;
  --bs-link-hover-color:     #284f54;
  --bs-link-hover-color-rgb: 40, 79, 84;
}


/* =========================================================
   2. CONTAINERS  (sitewide)
   Breedtes komen uit de tokens hierboven — nooit hier hardcoden.
========================================================= */
.container          { width: 100%; max-width: var(--dc-w-wide);   margin-inline: auto; padding-inline: var(--dc-w-gutter); }
.dc-container       { width: 100%; max-width: var(--dc-w-normal); margin-inline: auto; padding-inline: var(--dc-w-gutter); }
.dc-small-container { width: 100%; max-width: var(--dc-w-small);  margin-inline: auto; padding-inline: var(--dc-w-gutter); }


/* =========================================================
   2b. SECTIES  (dc-sec — sitewide sectie-spacing)
   Verhuisd uit dc-home.css. Mobiele padding staat in sectie 8.
========================================================= */
.dc-sec { padding: 85px 0; }
.dc-sec--cream { background: var(--dc-section-cream); }
.dc-sec--dark { background: var(--graphite); color: #fff; }
.dc-sec--dark h2, .dc-sec--dark .dc-quote-text { color: #fff; }


/* =========================================================
   3. TYPOGRAFIE  (sitewide)
========================================================= */
body {
  font-family: "Inter", sans-serif;
  font-weight: 300;            /* Inter Light */
  font-size: 15px;
  line-height: 1.5;
  color: var(--graphite);
}

/* Koppen altijd Lora. !important wint van bootscore's heading-font,
   maar laat ruimte voor doelbewuste overrides met hogere specificiteit
   (bv. de footer-kolomtitels, die expliciet Inter blijven). */
h1, h2, h3, h4, h5, h6 {
  font-family: "Lora", Georgia, serif !important;
  font-weight: 400;
  color: var(--graphite);
}

h1 { font-size: 50px; line-height: 55px; }
h2 { font-size: 35px; line-height: 45px; }
h3 { font-size: 30px; line-height: 40px; }

/* Opvallender bodytekst / USP's: Inter Regular */
.dc-strong,
.dc-usps__item p {
  font-weight: 400;
}

/* Tekstlinks: Inter Semi-Bold 18px (utility; plak op inline links) */
.dc-textlink {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 18px;
}

/* Grote quote (verhuisd uit dc-home.css: text-align/padding/color/max-width) */
.dc-bigquote { text-align: center; padding: 70px 0; }
.dc-bigquote blockquote {
  font-family: "Lora", Georgia, serif;
  font-weight: 400;
  font-size: 35px;
  line-height: 45px;
  color: var(--dc-navy);
  max-width: 900px; margin: 0 auto;
}

/* ---- Responsive type ----
   Spec geeft alleen desktopmaten; hieronder schalen we af zodat 60px/50px
   niet uit hun jasje knallen op kleinere schermen. */
@media (max-width: 991px) {
  h1 { font-size: 42px; line-height: 1.15; }
  h2 { font-size: 32px; line-height: 1.2; }
  h3 { font-size: 24px; line-height: 1.3; }
  .dc-bigquote blockquote { font-size: 32px; line-height: 1.2; }
}
@media (max-width: 575px) {
  h1 { font-size: 32px; }
  h2 { font-size: 27px; }
  h3 { font-size: 22px; }
  .dc-bigquote blockquote { font-size: 27px; line-height: 1.2; }
}


/* =========================================================
   4. BUTTONS
   Vier varianten + gedeelde knop-typografie. Kleur/achtergrond hier,
   font uit de tokens. Marges onderaan.
========================================================= */
.dc-btn-primary {
  display: inline-flex; align-items: center;
  padding: 8px 30px; border-radius: 999px;
  background: #32666b; color: #fff !important;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dc-btn-sand {
  display: inline-flex; align-items: center;
  padding: 8px 30px; border-radius: 999px;
  background: var(--dc-sand); color: #fff;
  text-decoration: none; transition: transform .2s ease;
}
.dc-btn-primary-light {
  display: inline-flex; align-items: center;
  padding: 8px 30px; border-radius: 999px;
  background: #6ba8ae; color: #fff !important;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dc-btn-primary-light:hover { transform: translateY(-1px); }
.dc-btn-primary-dark {
  display: inline-flex; align-items: center;
  padding: 8px 30px; border-radius: 999px;
  background: #2A2A2A; color: #fff !important;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.dc-btn-primary-dark:hover { transform: translateY(-1px); }

/* Knop-typografie: Lora 16px (geldt ook voor .btn, header- en mobiele CTA) */
.btn,
.dc-btn-primary,
.dc-btn-sand,
.dc-dh-cta,
.dc-mobile-cta {
  font-family: "Lora", Georgia, serif;
  font-size: 16px;
}

/* Standaard bovenmarge voor knoppen in de content (mobiel op 0 gezet, zie sectie 8) */
main#primary .dc-btn-sand,
main#primary .dc-btn-primary,
.dc-btn-primary-light,
.dc-btn-primary-dark,
main#primary .btn,
.dc-help__contact,
.dc-map__text a {
  margin-top: 20px;
}


/* =========================================================
   5. COMPONENTEN & TWEAKS
   Losse element-aanpassingen die sitewide gelden.
========================================================= */
/* Locatie-slider */
.dc-small-container.dc-locsl__filters { padding-bottom: 25px; }
.dc-locsl .swiper-slide { cursor: grab; }

/* Hero-split badges + term */
.dc-hero__badges.dc-pbhero-split__badges { display: flex; flex-direction: column; gap: 15px; }
a.dc-pbhero-split__term { margin-top: 20px; }

/* Vierkante beeldverhouding in split + partnergrid */
.dc-split img { aspect-ratio: 1 / 1; object-fit: cover; }
.dc-partner__grid img { object-fit: cover; aspect-ratio: 1 / 1; }

/* Specialisme: donkere USP-iconen */
body.specialisme-template-default .dc-usps__icon { background: #2A2A2A; color: #d8cfc4; }


/* =========================================================
   6. WPML TAALWISSELAAR
========================================================= */
.wpml-ls-legacy-dropdown { width: fit-content; max-width: 100%; }
.wpml-ls-statics-shortcode_actions .wpml-ls-current-language > a { background-color: transparent; border: none; }
.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle { padding-right: calc(5px + 1.4em); }
.wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a,
.wpml-ls-legacy-dropdown a:focus,
.wpml-ls-legacy-dropdown a:hover { background: transparent !important; }
.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a { border: none; }
.wpml-ls-statics-shortcode_actions,
.wpml-ls-statics-shortcode_actions .wpml-ls-sub-menu,
.wpml-ls-statics-shortcode_actions a { border-color: #cdcdcd; background: #f4f3ee; padding: 5px 10px; }
.wpml-ls-legacy-dropdown a span:hover { color: #6ba8ae; }


/* =========================================================
   7. UTILITIES
========================================================= */
/* Desktop-only regelafbreking verbergen op mobiel */
@media (max-width: 767px) { .dc-br-desktop { display: none; } }


/* =========================================================
   8. RESPONSIVE — MOBIELE LAYOUT (<= 768px)
   Centreren van knoppen/acties + kleinere sectie-padding op mobiel.
========================================================= */
@media (max-width: 768px) {

  /* Knop-bovenmarges uit (zie sectie 4) */
  main#primary .dc-btn-sand,
  main#primary .dc-btn-primary,
  .dc-btn-primary-light,
  .dc-btn-primary-dark,
  main#primary .btn,
  .dc-help__contact,
  .dc-map__text a { margin-top: 0px !important; }

  /* Sectie-padding compacter */
  .dc-sec { padding: 35px 0 !important; }
  :root { --dc-pad-standaard: 35px; }   /* Sitestandaard mobiel = dc-sec 35px, zodat inline var() ook mobiel klopt */

  /* Hero + zoekbalk gecentreerd */
  .dc-dhero__btns { display: flex; justify-content: center; gap: 0px; flex-direction: column; align-items: center; }
  .dc-popsearch { display: flex; justify-content: center; }
  form.dc-specialisme-search { min-width: auto; }

  /* Dienst-tabs / FAQ / help: knoppen gecentreerd stapelen */
  .dc-dtabs__nav { justify-content: center; }
  .dc-dtabs__btns { display: flex; align-items: center; gap: 0 !important; margin-top: 26px; flex-wrap: wrap; justify-content: center; }
  .dc-faq__actions { gap: 0; justify-content: space-between; flex-direction: column; align-items: center; }
  .dc-help__foot { display: flex; flex-direction: column; align-items: center; }

  /* Specialisme intro + vergelijk-foot + reviews-contact */
  .dc-small-container.dc-spec-intro p { font-size: 30px !important; line-height: 40px !important; }
  .dc-small-container.dc-vk-foot { display: flex; justify-content: center; gap: 0; }
  .dc-grev__contact-info { text-align: center; }
}

/* =========================================================
   8. Overig algemeen
========================================================= */
span.dc-card__tab {
    text-align: center;
}
.dc-card__list-title {
    color: #2a2a2a;
}
p.dc-vk__nagesprek {
    padding-top: 10px;
    line-height: 18px;
}
b, strong {
    font-weight: 700;
}
h1 {
    //font-weight: 500 !important;
}
.dc-pbhero h3 {
    color: #fff !important;
}

.dc-hbslider-wrap { display: none; }
@media (max-width: 768px) {
    .dc-hero__badges.has-hbslider { display: none !important; }
    .dc-hbslider-wrap { display: block; position: relative; width: 100%; margin-top: 24px; padding: 0 44px; }
    .dc-hbslider { overflow: hidden; }
    .dc-hbslider-wrap .swiper-button-prev, .dc-hbslider-wrap .swiper-button-next { --swiper-navigation-size: 16px; color: #fff; background: none; width: 28px; height: 36px; border-radius: 0; top: 50%; margin-top: 0; transform: translateY(-50%); }
    .dc-hbslider-wrap .swiper-button-prev { left: 0; }
    .dc-hbslider-wrap .swiper-button-next { right: 0; }
    .dc-hbslider .swiper-slide { display: flex; flex-direction: column; align-items: center; gap: 12px; height: auto; }
    .dc-hbslider .dc-hero__badge { margin: 0; justify-content: center; text-align: center; }
}