/*
Theme Name: Praktijk Corpius
Theme URI: https://praktijkcorpius.nl
Author: Emiel Dewulf
Author URI: https://emieldewulf.be
Description: Thema voor Praktijk Corpius
Version: 1.0
Text Domain: praktijk-corpius
Requires at least: 5.0
Tested up to: 6.6
Requires PHP: 7.4
License: Proprietary
*/

/* ── Slider arrow knoppen ────────────────────────────────── */

.slider-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: none;
    cursor: pointer;
    color: #fff;
    position: relative;
    flex-shrink: 0;
    padding: 0;
}

.slider-arrow .btn__bg {
    border-radius: 50%;
    background-color: var(--color-kinesitherapie);
}

.slider-arrow .btn__circle-wrap {
    border-radius: 50%;
}

.slider-arrow .btn__circle {
    background-color: color-mix(in srgb, var(--color-kinesitherapie) 70%, #000);
}

.slider-arrow:hover .btn__circle {
    transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}

.slider-arrow__icon {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}

/* ── Kine carousel kaart ─────────────────────────────────── */

.kine-card {
    height: 100%;
}

/* ── Absolute center ─────────────────────────────────────── */
/* Gebruik: element binnen een relative parent centreren */

.absolute--center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* ── Basis ───────────────────────────────────────────────── */

body {
    font-family: 'Lato', sans-serif;
}

section[id] {
    scroll-margin-top: 120px;
}

.btn {
  cursor: pointer;
  border-radius: 1em;
  border-radius: calc(var(--btn-height) * .5);
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: center;
  align-items: center;
  height: 3em;
  padding-left: 1.25em;
  padding-right: 1.25em;
  text-decoration: none;
  display: flex;
  position: relative;
}

.btn__text {
  color: #efede3;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn-text-p {
  color: currentColor;
  white-space: nowrap;
  margin-bottom: 0;
  padding-bottom: .05em;
  font-family: 'Lato', sans-serif;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.2;
}

.btn__bg {
  background-color: #08181b;
  border-radius: 4px 1.5em 1.5em 4px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}



.btn__bg.white{
  background-color: #FFF;
}

.btn-text-p.white{
  color:var(--color-home);
}

.btn__circle-wrap {
  border-radius: 4px 1.5em 1.5em 4px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.btn__circle {
  pointer-events: none;
  background-color: #d1fd88;
  border-radius: 50%;
  width: 100%;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.7s cubic-bezier(0.625, 0.05, 0, 1), background-color 0.4s cubic-bezier(0.625, 0.05, 0, 1);
  transform: translate(-50%, -50%) scale(0) rotate(0.001deg);
  background-color: #D1FD88;
}
.btn__circle.white{
    background-color:rgba(255,255,255,.5);
}

.before__100 {
  padding-top: 100%;
  display: block;
}

.btn .btn__text {
  transition: color 0.7s cubic-bezier(0.625, 0.05, 0, 1);
}

.btn:hover .btn__circle {
  transform: translate(-50%, -50%) scale(1) rotate(0.001deg);
}

/* Dark */
.btn[data-theme="dark"] .btn__circle {
  background-color: #D1FD88;
}

.btn[data-theme="dark"]:hover .btn__text {
  color: #031819;
}

/* Light */
.btn[data-theme="light"] .btn__bg {
  background-color: #FFF;
}

.btn[data-theme="light"] .btn__text {
  color: var(--color-home);
}

.btn[data-theme="light"] .btn__circle {
  background-color: #F7ECE1;
}

/* Primary */
.btn[data-theme="primary"] .btn__bg {
  background-color: var(--color-home);
}

.btn[data-theme="primary"] .btn__text {
  color: #FFF;
}

.btn[data-theme="primary"] .btn__circle {
  background-color: #07241C;
}

/* Outline */
.btn[data-theme="outline"] .btn__bg {
  background-color: transparent;
  border: 1.5px solid var(--color-home);
}

.btn[data-theme="outline"] .btn__text {
  color: var(--color-home);
}

.btn[data-theme="outline"] .btn__circle {
  background-color: var(--color-home);
}

.btn[data-theme="outline"]:hover .btn__text {
  color: #FFF;
}

/* Osteopathie */
.btn[data-theme="osteopathie"] .btn__bg {
  background-color: var(--color-osteopathie);
}

.btn[data-theme="osteopathie"] .btn__text {
  color: #FFF;
}

.btn[data-theme="osteopathie"] .btn__circle {
  background-color: color-mix(in srgb, var(--color-osteopathie) 70%, #000);
}

/* Osteopathie Outline */
.btn[data-theme="osteopathie-outline"] .btn__bg {
  background-color: transparent;
  border: 1.5px solid var(--color-osteopathie);
}

.btn[data-theme="osteopathie-outline"] .btn__text {
  color: var(--color-osteopathie);
}

.btn[data-theme="osteopathie-outline"] .btn__circle {
  background-color: var(--color-osteopathie);
}

.btn[data-theme="osteopathie-outline"]:hover .btn__text {
  color: #FFF;
}

/* Kinesitherapie */
.btn[data-theme="kinesitherapie"] .btn__bg {
  background-color: var(--color-kinesitherapie);
}

.btn[data-theme="kinesitherapie"] .btn__text {
  color: #FFF;
}

.btn[data-theme="kinesitherapie"] .btn__circle {
  background-color: color-mix(in srgb, var(--color-kinesitherapie) 70%, #000);
}

/* Kinesitherapie Outline */
.btn[data-theme="kinesitherapie-outline"] .btn__bg {
  background-color: transparent;
  border: 1.5px solid var(--color-kinesitherapie);
}

.btn[data-theme="kinesitherapie-outline"] .btn__text {
  color: var(--color-kinesitherapie);
}

.btn[data-theme="kinesitherapie-outline"] .btn__circle {
  background-color: var(--color-kinesitherapie);
}

.btn[data-theme="kinesitherapie-outline"]:hover .btn__text {
  color: #FFF;
}

/* Outline White */
.btn[data-theme="outline-white"] .btn__bg {
  background-color: transparent;
  border: 1.5px solid #FFF;
}

.btn[data-theme="outline-white"] .btn__text {
  color: #FFF;
}

.btn[data-theme="outline-white"] .btn__circle {
  background-color: #F7ECE1;
}

.btn[data-theme="outline-white"]:hover .btn__text {
  color: var(--color-home);
}

/* ── Blob mask ───────────────────────────────────────────── */
/* Gebruik: <img class="mask--blob" src="..."> */

.mask--blob {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='1916' height='1487' viewBox='0 0 1916 1487' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M789.311 45.2372C577.632 112.623 386.905 240.57 229.151 395.397C193.215 430.92 160.249 466.583 131.671 503.944C49.1904 610.225 -14.6101 730.795 2.67331 868.617C23.356 1028.94 140.395 1135.75 272.287 1212.01C308.514 1233.08 346.299 1252.75 388.611 1271.14C430.923 1289.53 476.207 1308.06 521.631 1323.62C738.425 1399.43 980.689 1471.99 1210.92 1484.4C1444.12 1496.96 1690.18 1426.74 1826.28 1226.21C1944.69 1053.14 1934.33 832.253 1856.9 643.924C1761.35 398.146 1586.41 130.731 1328.58 41.0553C1246.5 13.3326 1162.31 -1.08847 1077.41 -0.65165C980.617 -0.779111 882.982 16.923 789.311 45.2372Z' fill='white'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='1916' height='1487' viewBox='0 0 1916 1487' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M789.311 45.2372C577.632 112.623 386.905 240.57 229.151 395.397C193.215 430.92 160.249 466.583 131.671 503.944C49.1904 610.225 -14.6101 730.795 2.67331 868.617C23.356 1028.94 140.395 1135.75 272.287 1212.01C308.514 1233.08 346.299 1252.75 388.611 1271.14C430.923 1289.53 476.207 1308.06 521.631 1323.62C738.425 1399.43 980.689 1471.99 1210.92 1484.4C1444.12 1496.96 1690.18 1426.74 1826.28 1226.21C1944.69 1053.14 1934.33 832.253 1856.9 643.924C1761.35 398.146 1586.41 130.731 1328.58 41.0553C1246.5 13.3326 1162.31 -1.08847 1077.41 -0.65165C980.617 -0.779111 882.982 16.923 789.311 45.2372Z' fill='white'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* ── Lijst met SVG bullet ────────────────────────────────── */
/* Gebruik: <ul class="list--leaf">...</ul> */

.list--leaf {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.list--leaf li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.list--leaf li::before {
  content: '';
  display: block;
  flex-shrink: 0;
  width: 10px;
  height: 9px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_59_293)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.7297 0.719152C6.59468 0.689779 6.455 0.680303 6.31481 0.695182C5.70047 0.760081 5.27319 1.22587 4.80331 1.57432C3.68383 2.40459 2.18398 2.53256 1.0897 3.43192C0.899501 3.58837 0.723041 3.76704 0.605811 3.98072C0.385376 4.38242 0.470846 4.83733 0.695781 5.20395C1.27242 6.14379 2.4606 6.76608 3.57074 6.86441C4.98813 6.98981 6.39303 6.30711 7.3073 5.22736C7.73541 4.72176 8.06492 4.12276 8.16925 3.48203C8.29904 2.68523 8.08385 1.74821 7.52054 1.168C7.30861 0.949682 7.03049 0.784757 6.7297 0.719152Z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_59_293'%3E%3Crect width='8' height='5' fill='white' transform='matrix(0.866025 -0.5 -0.5 -0.866025 2.5 8.33014)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='10' height='9' viewBox='0 0 10 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_59_293)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.7297 0.719152C6.59468 0.689779 6.455 0.680303 6.31481 0.695182C5.70047 0.760081 5.27319 1.22587 4.80331 1.57432C3.68383 2.40459 2.18398 2.53256 1.0897 3.43192C0.899501 3.58837 0.723041 3.76704 0.605811 3.98072C0.385376 4.38242 0.470846 4.83733 0.695781 5.20395C1.27242 6.14379 2.4606 6.76608 3.57074 6.86441C4.98813 6.98981 6.39303 6.30711 7.3073 5.22736C7.73541 4.72176 8.06492 4.12276 8.16925 3.48203C8.29904 2.68523 8.08385 1.74821 7.52054 1.168C7.30861 0.949682 7.03049 0.784757 6.7297 0.719152Z' fill='%23000'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_59_293'%3E%3Crect width='8' height='5' fill='white' transform='matrix(0.866025 -0.5 -0.5 -0.866025 2.5 8.33014)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ── Grid utilities ──────────────────────────────────────── */

.grid--3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 96px;
}

@media (max-width: 1024px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .grid--3 { grid-template-columns: 1fr; }
}

/* ── Behandeling card ────────────────────────────────────── */

.behandeling-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 32px;
  padding-top: 96px;
  border-radius: 16px;
  background-color: #FBF6F0;
  position:relative;  
}

.behandeling-card__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.behandeling-card__icon--placeholder {
  width: 90px;
  height: 90px;
  border-radius: 100px;
  background-color: var(--color-home);
  top: -45px;
  position: absolute;
  border:5px solid #F7ECE1;
}

.behandeling-card__label {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 100em;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.behandeling-card__label--osteopathie {
  background-color: var(--color-osteopathie);
  color: #fff;
}

.behandeling-card__label--kinesitherapie {
  background-color: var(--color-kinesitherapie);
  color: #fff;
}

/* ── Link underline hover ────────────────────────────────── */
/* Gebruik: <a class="link--underline">...</a> */

.link--underline {
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
}

.link--underline::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.35s cubic-bezier(0.76, 0, 0.24, 1);
}

.link--underline:hover::after,
.link--underline.is--active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.behandeling-card__footer {
  margin-top: auto;
}

/* contactform */
.wpforms-field-large, .wpforms-field-medium{
  background:rgba(14,66,52,.05) !important;
  border:1px solid var(--color-home) !important;
  border-radius:8px !important;
  color:var(--color-home) !important;
}

.wpforms-submit{
  background:var(--color-home) !important;
  width:100% !important;
  height: 3em !important;
  padding-left: 1.25em !important;
  border-radius: 4px 1.5em 1.5em 4px !important;
}

.splide__slide.is--active .kine-card {
    border: 2px solid var(--color-kinesitherapie);
}