/*
Theme Name: Shuker Fysiotherapie
Theme URI: https://shukerfysiotherapie.nl
Author: MeeSa Online
Author URI: https://meesaonline.nl
Description: Maatwerkthema voor Shuker Fysiotherapie in Utrecht. Rustig, tijdloos en luxe, in de kleuren van het logo. Meerdere pagina's met doordachte interne links, gebouwd voor Elementor, mobiel volwaardig, met beveiliging en SEO in het thema zelf.
Version: 2.4.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shuker
Tags: custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================
   1. Design tokens
   Alle kleuren, maten en fonts staan hier op een plek.
   ========================================================= */

:root {
  /* Merkkleuren */
  --sh-groen: #0A3E6B;
  --sh-groen-diep: #062E52;
  --sh-groen-zacht: #33618C;
  --sh-mint: #3FAFAC;
  --sh-mint-licht: #E4F2F1;
  --sh-inkt: #0E2A45;
  --sh-tekst: #27384C;
  --sh-tekst-zacht: #5A6B80;
  --sh-creme: #FAF7F1;
  --sh-zand: #C9A96A;
  --sh-wit: #FFFFFF;
  --sh-lijn: #E3E0D8;
  --sh-fout: #B3453C;

  /* Typografie */
  --sh-font-kop: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sh-font-tekst: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Maten */
  --sh-max-breedte: 1200px;
  --sh-sectie-ruimte: clamp(4rem, 9vw, 7rem);
  --sh-radius: 18px;
  --sh-radius-klein: 12px;
  --sh-schaduw: 0 10px 40px rgba(14, 42, 69, 0.08);
  --sh-schaduw-zwaar: 0 18px 60px rgba(14, 42, 69, 0.14);
  --sh-overgang: 0.35s cubic-bezier(0.25, 0.6, 0.3, 1);
}

/* =========================================================
   2. Basis
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sh-font-tekst);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--sh-tekst);
  background: var(--sh-wit);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--sh-groen); transition: color var(--sh-overgang); }
a:hover { color: var(--sh-groen-diep); }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--sh-font-kop);
  font-weight: 500;
  line-height: 1.15;
  color: var(--sh-inkt);
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.5rem, 5.5vw, 3.9rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 2.7rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); }

p { margin: 0 0 1.2em; }

::selection { background: var(--sh-mint); color: var(--sh-inkt); }

/* Zichtbare focus voor toetsenbordgebruik */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--sh-groen);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--sh-inkt);
  color: var(--sh-wit);
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--sh-radius-klein) 0;
}
.skip-link:focus { left: 0; color: var(--sh-wit); }

.schermlezer-tekst {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.shuker-omlijsting {
  width: min(100% - 3rem, var(--sh-max-breedte));
  margin-inline: auto;
}

/* =========================================================
   3. Knoppen
   ========================================================= */

.shuker-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.95rem 2rem;
  border-radius: 999px;
  border: 2px solid var(--sh-groen);
  background: var(--sh-groen);
  color: var(--sh-wit);
  font-family: var(--sh-font-tekst);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--sh-overgang), border-color var(--sh-overgang),
              color var(--sh-overgang), transform var(--sh-overgang), box-shadow var(--sh-overgang);
}
.shuker-knop:hover {
  background: var(--sh-groen-diep);
  border-color: var(--sh-groen-diep);
  color: var(--sh-wit);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(6, 46, 82, 0.25);
}
.shuker-knop svg { width: 1.05em; height: 1.05em; transition: transform var(--sh-overgang); }
.shuker-knop:hover svg { transform: translateX(4px); }

.shuker-knop--omlijnd {
  background: transparent;
  color: var(--sh-groen);
  border-color: rgba(10, 62, 107, 0.35);
}
.shuker-knop--omlijnd:hover {
  background: var(--sh-mint-licht);
  color: var(--sh-groen-diep);
  border-color: var(--sh-groen);
  box-shadow: none;
}

.shuker-knop--licht {
  background: var(--sh-wit);
  border-color: var(--sh-wit);
  color: var(--sh-groen-diep);
}
.shuker-knop--licht:hover {
  background: var(--sh-mint-licht);
  border-color: var(--sh-mint-licht);
  color: var(--sh-groen-diep);
}

/* =========================================================
   4. Header en navigatie
   ========================================================= */

/* Lege alinea's en losse regeleinden die wpautop rond shortcodes
   achterlaat mogen nooit een witte strook opleveren. */
.shuker-hoofd > p:empty,
.shuker-hoofd > br,
.shuker-hoofd .shuker-omlijsting > p:empty { display: none; margin: 0; }

/* De blur zit op een pseudo-element en niet op de kop zelf.
   Een backdrop-filter op de kop maakte de kop een containing block,
   waardoor het mobiele menu (position fixed) niet groter kon worden
   dan de kopbalk zelf. */
.shuker-kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 90;
  transition: box-shadow var(--sh-overgang);
}
.shuker-kop::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(250, 247, 241, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--sh-overgang);
}
.shuker-kop.is-gescrold {
  box-shadow: 0 6px 30px rgba(14, 42, 69, 0.08);
}
.shuker-kop.is-gescrold::before {
  background: rgba(255, 255, 255, 0.92);
}

/* Ingelogde beheerders: de vaste kop valt onder de adminbalk. */
body.admin-bar .shuker-kop { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .shuker-kop { top: 46px; }
}

.shuker-kop__binnen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  min-height: 84px;
}

.shuker-merk { display: inline-flex; align-items: center; gap: 0.8rem; text-decoration: none; }
.shuker-merk img.custom-logo,
.shuker-merk img.shuker-merk__beeld { max-height: 58px; width: auto; }

.shuker-merk__naam {
  font-family: var(--sh-font-tekst);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-groen);
  line-height: 1.1;
}
.shuker-merk__naam span { display: block; font-size: 0.62rem; letter-spacing: 0.42em; color: var(--sh-tekst-zacht); font-weight: 600; }

.shuker-nav { display: flex; align-items: center; gap: 2.2rem; }
.shuker-nav ul { list-style: none; display: flex; gap: 2rem; margin: 0; padding: 0; }
.shuker-nav li { position: relative; }
.shuker-nav a:not(.shuker-knop) {
  text-decoration: none;
  color: var(--sh-inkt);
  font-weight: 600;
  font-size: 0.98rem;
  padding: 0.4rem 0;
}
.shuker-nav a:hover:not(.shuker-knop) { color: var(--sh-groen); }
.shuker-nav li a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -2px;
  height: 2px;
  background: var(--sh-groen);
  transition: right var(--sh-overgang);
}
.shuker-nav li:hover a::after,
.shuker-nav li.current-menu-item a::after { right: 0; }

.shuker-nav__cta { white-space: nowrap; padding: 0.75rem 1.6rem; }

.shuker-menuknop {
  display: none;
  background: none;
  border: 0;
  padding: 0.6rem;
  cursor: pointer;
}
.shuker-menuknop__balk {
  display: block;
  width: 26px; height: 2px;
  background: var(--sh-inkt);
  margin: 6px 0;
  border-radius: 2px;
  transition: transform var(--sh-overgang), opacity var(--sh-overgang);
}

@media (max-width: 900px) {
  .shuker-menuknop { display: block; }
  .shuker-nav {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: var(--sh-creme);
    flex-direction: column;
    justify-content: safe center;
    align-items: center;
    gap: 2.5rem;
    padding: 6rem 1.5rem 3rem;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--sh-overgang), visibility var(--sh-overgang);
  }
  .shuker-nav.is-open { opacity: 1; visibility: visible; }
  .shuker-nav ul { flex-direction: column; text-align: center; gap: 1.6rem; }
  .shuker-nav a:not(.shuker-knop) { font-size: 1.4rem; font-family: var(--sh-font-kop); font-weight: 500; }
  body.menu-open { overflow: hidden; }
  body.menu-open .shuker-menuknop__balk:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  body.menu-open .shuker-menuknop__balk:nth-child(2) { opacity: 0; }
  body.menu-open .shuker-menuknop__balk:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .shuker-menuknop { position: relative; z-index: 95; }
}

/* =========================================================
   5. Secties, algemeen
   ========================================================= */

.shuker-sectie { padding-block: var(--sh-sectie-ruimte); }
.shuker-sectie--creme { background: var(--sh-creme); }
.shuker-sectie--mint { background: var(--sh-mint-licht); }
.shuker-sectie--inkt { background: var(--sh-inkt); color: rgba(255, 255, 255, 0.85); }
.shuker-sectie--inkt h2, .shuker-sectie--inkt h3 { color: var(--sh-wit); }

.shuker-sectiekop { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.shuker-sectiekop--midden { margin-inline: auto; text-align: center; }

.shuker-boventitel {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--sh-groen);
  margin-bottom: 1.1rem;
}
.shuker-boventitel::before {
  content: "";
  width: 2.2rem; height: 2px;
  background: var(--sh-zand);
  border-radius: 2px;
}
.shuker-sectiekop--midden .shuker-boventitel::after {
  content: "";
  width: 2.2rem; height: 2px;
  background: var(--sh-zand);
  border-radius: 2px;
}

.shuker-intro-tekst { font-size: 1.15rem; color: var(--sh-tekst-zacht); }

/* Accentlijn, signatuurelement */
.shuker-accentlijn {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 1.5rem 0;
  color: var(--sh-groen);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
.shuker-accentlijn::before, .shuker-accentlijn::after {
  content: "";
  height: 2px;
  background: linear-gradient(90deg, var(--sh-zand), var(--sh-mint));
  border-radius: 2px;
  flex: 0 0 2.4rem;
}
.shuker-accentlijn--links::before { display: none; }
.shuker-accentlijn--midden { justify-content: center; }

/* Onthullen bij scrollen.
   Alleen actief wanneer JavaScript draait (html.shuker-js),
   zodat de site zonder JavaScript volledig zichtbaar blijft. */
html.shuker-js .shuker-onthul {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.25, 0.6, 0.3, 1),
              transform 0.8s cubic-bezier(0.25, 0.6, 0.3, 1);
  transition-delay: var(--sh-vertraging, 0s);
}
html.shuker-js .shuker-onthul.is-zichtbaar { opacity: 1; transform: none; }

/* =========================================================
   6. Hero
   ========================================================= */

.shuker-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(63, 175, 172, 0.28), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(201, 169, 106, 0.14), transparent 60%),
    var(--sh-creme);
  overflow: hidden;
  padding-block: 7.5rem 4rem;
}

.shuker-hero__binnen {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

.shuker-hero__label {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--sh-wit);
  border: 1px solid var(--sh-lijn);
  border-radius: 999px;
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sh-groen-diep);
  box-shadow: var(--sh-schaduw);
  margin-bottom: 1.6rem;
}
.shuker-hero__label .bolletje {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--sh-groen);
  animation: shuker-hartslag 2.4s ease-in-out infinite;
}

.shuker-hero h1 { margin-bottom: 1.2rem; }
.shuker-hero h1 .accent { color: var(--sh-groen); font-style: italic; }

.shuker-hero__tekst { font-size: 1.18rem; color: var(--sh-tekst-zacht); max-width: 34rem; }

.shuker-hero__knoppen { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.2rem; }

.shuker-hero__noot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 2.2rem;
  font-size: 0.95rem;
  color: var(--sh-tekst-zacht);
}
.shuker-hero__noot svg { width: 1.2rem; height: 1.2rem; color: var(--sh-groen); flex: none; }

.shuker-hero__beeld { position: relative; }

/* Scrollhint */
.shuker-scrollhint {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--sh-tekst-zacht);
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
}
.shuker-scrollhint__lijn {
  width: 2px; height: 42px;
  background: var(--sh-lijn);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.shuker-scrollhint__lijn::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 14px;
  background: var(--sh-groen);
  border-radius: 2px;
  animation: shuker-scrolldruppel 2s ease-in-out infinite;
}

@media (max-width: 980px) {
  .shuker-hero { min-height: 0; padding-block: 8rem 3.5rem; }
  .shuker-hero__binnen { grid-template-columns: 1fr; }
  .shuker-hero__beeld { order: -1; max-width: 420px; margin-inline: auto; }
  .shuker-scrollhint { display: none; }
}

/* =========================================================
   7. Fysio-illustratie en animatie
   ========================================================= */

.shuker-illustratie { position: relative; width: 100%; }
.shuker-illustratie svg { width: 100%; height: auto; }

.shuker-illustratie .vloeiveld {
  transform-origin: center;
  animation: shuker-adem 9s ease-in-out infinite;
}
.shuker-illustratie .vloeiveld--2 {
  animation-duration: 11s;
  animation-delay: -4s;
}

/* De figuur strekt rustig van links naar rechts, als een kalme
   rek- en strekoefening. De voeten blijven op de grond staan,
   armen en hoofd bewegen net iets anders mee dan de romp. */
.shuker-illustratie .bovenlijf {
  transform-box: view-box;
  transform-origin: 279px 306px;
  animation: shuker-strek 8s ease-in-out infinite;
}
.shuker-illustratie .hoofd {
  transform-box: view-box;
  transform-origin: 285px 213px;
  animation: shuker-hoofd 8s ease-in-out infinite;
}
.shuker-illustratie .arm--links {
  transform-box: view-box;
  transform-origin: 280px 222px;
  animation: shuker-arm-links 8s ease-in-out infinite;
}
.shuker-illustratie .arm--rechts {
  transform-box: view-box;
  transform-origin: 288px 220px;
  animation: shuker-arm-rechts 8s ease-in-out infinite;
}
.shuker-illustratie .voetschaduw {
  transform-box: fill-box;
  transform-origin: center;
  animation: shuker-schaduw 8s ease-in-out infinite;
}
.shuker-illustratie .ademring {
  transform-box: fill-box;
  transform-origin: center;
  animation: shuker-ademring 4s ease-in-out infinite;
}

.shuker-illustratie .tekenlijn {
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: shuker-tekenen 2.4s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
.shuker-illustratie .tekenlijn--2 { animation-delay: 0.5s; }
.shuker-illustratie .tekenlijn--3 { animation-delay: 0.9s; }

.shuker-illustratie .gewricht {
  transform-origin: center;
  transform-box: fill-box;
  animation: shuker-hartslag 2.4s ease-in-out infinite;
}
.shuker-illustratie .gewricht--2 { animation-delay: 0.7s; }
.shuker-illustratie .gewricht--3 { animation-delay: 1.3s; }

.shuker-illustratie .halo {
  transform-origin: center;
  transform-box: fill-box;
  animation: shuker-halo 2.8s ease-out infinite;
}
.shuker-illustratie .halo--2 { animation-delay: 1.1s; }

.shuker-illustratie .pulslijn {
  stroke-dasharray: 6 340;
  animation: shuker-puls 3.6s linear infinite;
}

.shuker-illustratie .boogpijl {
  transform-origin: center;
  animation: shuker-zweef 6s ease-in-out infinite reverse;
}

@keyframes shuker-adem {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.06) translate(6px, -8px); }
}
@keyframes shuker-zweef {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes shuker-strek {
  0%, 100% { transform: rotate(-9deg); }
  50% { transform: rotate(9deg); }
}
@keyframes shuker-hoofd {
  0%, 100% { transform: rotate(5deg); }
  50% { transform: rotate(-5deg); }
}
@keyframes shuker-arm-links {
  0%, 100% { transform: rotate(-8deg); }
  45% { transform: rotate(5deg); }
}
@keyframes shuker-arm-rechts {
  0%, 100% { transform: rotate(-5deg); }
  55% { transform: rotate(8deg); }
}
@keyframes shuker-schaduw {
  0%, 100% { transform: scaleX(1.06) translateX(-8px); }
  50% { transform: scaleX(1.06) translateX(8px); }
}
@keyframes shuker-ademring {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.14); opacity: 0.25; }
}
@keyframes shuker-tekenen {
  to { stroke-dashoffset: 0; }
}
@keyframes shuker-hartslag {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.35); opacity: 0.75; }
}
@keyframes shuker-halo {
  0% { transform: scale(0.6); opacity: 0.8; }
  100% { transform: scale(2.1); opacity: 0; }
}
@keyframes shuker-puls {
  0% { stroke-dashoffset: 346; }
  100% { stroke-dashoffset: 0; }
}
@keyframes shuker-scrolldruppel {
  0% { transform: translateY(-16px); }
  60%, 100% { transform: translateY(46px); }
}

/* =========================================================
   8. Kaarten
   ========================================================= */

.shuker-kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 1.6rem;
}

.shuker-kaart {
  background: var(--sh-wit);
  border: 1px solid rgba(227, 224, 216, 0.7);
  border-radius: var(--sh-radius);
  padding: 2.2rem 2rem;
  box-shadow: var(--sh-schaduw);
  transition: transform var(--sh-overgang), box-shadow var(--sh-overgang), border-color var(--sh-overgang);
  position: relative;
  overflow: hidden;
}
.shuker-kaart::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--sh-mint), var(--sh-groen));
  opacity: 0;
  transition: opacity var(--sh-overgang);
}
.shuker-kaart:hover {
  transform: translateY(-6px);
  box-shadow: var(--sh-schaduw-zwaar);
  border-color: rgba(63, 175, 172, 0.6);
}
.shuker-kaart:hover::before { opacity: 1; }

.shuker-kaart__icoon {
  width: 62px; height: 62px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: var(--sh-mint-licht);
  color: var(--sh-groen);
  margin-bottom: 1.4rem;
  transition: background var(--sh-overgang), color var(--sh-overgang), transform var(--sh-overgang);
}
.shuker-kaart__icoon svg { width: 30px; height: 30px; }
.shuker-kaart:hover .shuker-kaart__icoon {
  background: var(--sh-groen);
  color: var(--sh-wit);
  transform: rotate(-4deg) scale(1.05);
}

.shuker-kaart h3 { margin-bottom: 0.5rem; }
.shuker-kaart p { color: var(--sh-tekst-zacht); margin-bottom: 0; font-size: 1rem; }

.shuker-kaart__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.1rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
}
.shuker-kaart__link svg { width: 1em; height: 1em; transition: transform var(--sh-overgang); }
.shuker-kaart__link:hover svg { transform: translateX(4px); }

/* =========================================================
   9. Mediasectie, beeld naast tekst
   ========================================================= */

.shuker-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}
.shuker-media--omgekeerd .shuker-media__beeld { order: 2; }

.shuker-media__beeld { position: relative; }
.shuker-media__beeld img {
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-schaduw-zwaar);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
}
.shuker-media__beeld::after {
  content: "";
  position: absolute;
  inset: 1.6rem -1.6rem -1.6rem 1.6rem;
  border: 2px solid var(--sh-mint);
  border-radius: var(--sh-radius);
  z-index: -1;
}
.shuker-media--omgekeerd .shuker-media__beeld::after { inset: 1.6rem 1.6rem -1.6rem -1.6rem; }

.shuker-media__plaatshouder {
  aspect-ratio: 4 / 5;
  border-radius: var(--sh-radius);
  background:
    linear-gradient(160deg, var(--sh-mint-licht), rgba(63, 175, 172, 0.5));
  display: grid;
  place-items: center;
  color: var(--sh-groen);
  box-shadow: var(--sh-schaduw);
}
.shuker-media__plaatshouder svg { width: 34%; height: auto; opacity: 0.8; }

.shuker-media__punten { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.shuker-media__punten li { display: flex; gap: 0.8rem; align-items: flex-start; }
.shuker-media__punten svg { width: 1.35rem; height: 1.35rem; color: var(--sh-groen); flex: none; margin-top: 0.2rem; }

@media (max-width: 860px) {
  .shuker-media { grid-template-columns: 1fr; }
  .shuker-media--omgekeerd .shuker-media__beeld { order: 0; }
  .shuker-media__beeld { max-width: 480px; }
  .shuker-media__beeld::after { display: none; }
}

/* =========================================================
   10. Stappen, werkwijze
   ========================================================= */

.shuker-stappen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 1.6rem;
  counter-reset: stap;
}

.shuker-stap {
  position: relative;
  background: var(--sh-wit);
  border-radius: var(--sh-radius);
  padding: 2.4rem 2rem 2.2rem;
  box-shadow: var(--sh-schaduw);
  border-top: 4px solid var(--sh-mint);
  transition: transform var(--sh-overgang), box-shadow var(--sh-overgang), border-color var(--sh-overgang);
}
.shuker-stap:hover {
  transform: translateY(-6px);
  border-color: var(--sh-groen);
  box-shadow: var(--sh-schaduw-zwaar);
}

.shuker-stap__nummer {
  font-family: var(--sh-font-kop);
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--sh-mint);
  margin-bottom: 1rem;
  transition: color var(--sh-overgang);
}
.shuker-stap:hover .shuker-stap__nummer { color: var(--sh-mint); }

.shuker-stap h3 { margin-bottom: 0.5rem; }
.shuker-stap p { color: var(--sh-tekst-zacht); font-size: 1rem; margin: 0; }

/* =========================================================
   10b. Cijfers
   ========================================================= */

.shuker-sectie--cijfers { padding-block: 0; }

.shuker-cijfers {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1.5rem;
  background:
    radial-gradient(700px 300px at 85% 0%, rgba(63, 175, 172, 0.22), transparent 60%),
    linear-gradient(135deg, var(--sh-groen-diep), var(--sh-groen));
  border-radius: calc(var(--sh-radius) + 8px);
  padding: clamp(2.2rem, 5vw, 3.5rem);
  overflow: hidden;
}
.shuker-cijfer__getal {
  font-family: var(--sh-font-kop);
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  font-weight: 600;
  line-height: 1;
  color: var(--sh-wit);
  margin: 0 0 0.3rem;
}
.shuker-cijfer__getal .achtervoegsel { color: var(--sh-mint); }
.shuker-cijfer__label {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}
.shuker-cijfer--cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 0.4rem;
}
.shuker-cijfer--cta p { margin: 0; color: rgba(255, 255, 255, 0.85); font-weight: 600; }

/* =========================================================
   10c. Behandeldetails
   ========================================================= */

.shuker-details .shuker-detail {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 1.8rem;
  padding: clamp(1.8rem, 4vw, 2.6rem);
  background: var(--sh-wit);
  border: 1px solid var(--sh-lijn);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-schaduw);
  margin-bottom: 1.6rem;
  transition: border-color var(--sh-overgang), box-shadow var(--sh-overgang);
}
.shuker-details .shuker-detail:hover {
  border-color: rgba(63, 175, 172, 0.6);
  box-shadow: var(--sh-schaduw-zwaar);
}
.shuker-detail__icoon {
  width: 84px; height: 84px;
  border-radius: 20px;
  background: var(--sh-mint-licht);
  color: var(--sh-groen);
  display: grid;
  place-items: center;
}
.shuker-detail__icoon svg { width: 40px; height: 40px; }
.shuker-detail__tekst h2 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 0.4rem; }
.shuker-detail__tekst > p { color: var(--sh-tekst-zacht); }
.shuker-detail__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1.2rem 0 0;
  font-weight: 700;
}
.shuker-detail__cta a { text-decoration: none; }
.shuker-detail__cta svg { width: 1.1em; height: 1.1em; color: var(--sh-groen); }

@media (max-width: 640px) {
  .shuker-details .shuker-detail { grid-template-columns: 1fr; }
  .shuker-detail__icoon { width: 64px; height: 64px; }
}

/* Ankers landen netjes onder de vaste kop */
[id] { scroll-margin-top: 110px; }

/* =========================================================
   10d. Bedanktsectie
   ========================================================= */

.shuker-bedankt {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  background: var(--sh-wit);
  border: 1px solid var(--sh-lijn);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-schaduw);
  padding: clamp(2.4rem, 5vw, 3.5rem);
}
.shuker-bedankt__icoon {
  width: 72px; height: 72px;
  border-radius: 50%;
  margin: 0 auto 1.4rem;
  display: grid;
  place-items: center;
  background: var(--sh-mint-licht);
  color: var(--sh-groen);
}
.shuker-bedankt__icoon svg { width: 34px; height: 34px; }

/* =========================================================
   11. Vergoeding en tarieven
   ========================================================= */

.shuker-vergoeding {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

.shuker-tarieven {
  background: var(--sh-wit);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-schaduw);
  padding: 2rem;
  border: 1px solid var(--sh-lijn);
}
.shuker-tarieven table { width: 100%; border-collapse: collapse; }
.shuker-tarieven th, .shuker-tarieven td {
  text-align: left;
  padding: 0.85rem 0.4rem;
  border-bottom: 1px solid var(--sh-lijn);
  font-size: 1rem;
}
.shuker-tarieven th { font-weight: 700; color: var(--sh-inkt); }
.shuker-tarieven tr:last-child td { border-bottom: 0; }
.shuker-tarieven td:last-child { text-align: right; font-weight: 700; color: var(--sh-groen-diep); white-space: nowrap; }
.shuker-tarieven__noot { font-size: 0.88rem; color: var(--sh-tekst-zacht); margin: 1rem 0 0; }

@media (max-width: 860px) {
  .shuker-vergoeding { grid-template-columns: 1fr; }
}

/* =========================================================
   12. Referenties
   ========================================================= */

.shuker-referenties {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 1.6rem;
}
.shuker-referentie {
  background: var(--sh-wit);
  border-radius: var(--sh-radius);
  padding: 2.2rem 2rem;
  box-shadow: var(--sh-schaduw);
  border: 1px solid var(--sh-lijn);
}
.shuker-referentie__quote { font-size: 1.05rem; font-style: italic; color: var(--sh-tekst); }
.shuker-referentie__naam { font-weight: 700; color: var(--sh-inkt); margin-top: 1.2rem; }
.shuker-referentie__rol { font-size: 0.9rem; color: var(--sh-tekst-zacht); }
.shuker-referentie svg { width: 2rem; height: 2rem; color: var(--sh-mint); margin-bottom: 1rem; }

/* =========================================================
   13. CTA-band
   ========================================================= */

.shuker-cta {
  position: relative;
  background:
    radial-gradient(800px 400px at 90% 0%, rgba(63, 175, 172, 0.25), transparent 60%),
    linear-gradient(135deg, var(--sh-groen-diep), var(--sh-groen));
  border-radius: calc(var(--sh-radius) + 8px);
  padding: clamp(3rem, 6vw, 4.5rem);
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
  text-align: center;
}
.shuker-cta h2 { color: var(--sh-wit); max-width: 26ch; margin-inline: auto; }
.shuker-cta p { max-width: 52ch; margin-inline: auto; }
.shuker-cta .shuker-knop { margin-top: 1.4rem; }
.shuker-cta__golf {
  position: absolute;
  inset: auto 0 0 0;
  opacity: 0.25;
  pointer-events: none;
}

/* =========================================================
   14. Contact en formulier
   ========================================================= */

.shuker-contact {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 900px) {
  .shuker-contact { grid-template-columns: 1fr; }
}

.shuker-contactgegevens { display: grid; gap: 1.1rem; margin-top: 1.8rem; }
.shuker-contactregel {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  text-decoration: none;
  color: var(--sh-tekst);
  padding: 1.1rem 1.2rem;
  background: var(--sh-wit);
  border: 1px solid var(--sh-lijn);
  border-radius: var(--sh-radius-klein);
  transition: transform var(--sh-overgang), box-shadow var(--sh-overgang), border-color var(--sh-overgang);
}
a.shuker-contactregel:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-schaduw);
  border-color: var(--sh-mint);
  color: var(--sh-tekst);
}
.shuker-contactregel svg { width: 1.5rem; height: 1.5rem; color: var(--sh-groen); flex: none; margin-top: 0.15rem; }
.shuker-contactregel strong { display: block; color: var(--sh-inkt); font-size: 0.95rem; }
.shuker-contactregel span { color: var(--sh-tekst-zacht); font-size: 0.98rem; }

.shuker-formulier {
  background: var(--sh-wit);
  border-radius: var(--sh-radius);
  box-shadow: var(--sh-schaduw-zwaar);
  border: 1px solid var(--sh-lijn);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.shuker-formulier__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
@media (max-width: 640px) { .shuker-formulier__rij { grid-template-columns: 1fr; } }

.shuker-veld { margin-bottom: 1.2rem; }
.shuker-veld label { display: block; font-weight: 700; font-size: 0.92rem; color: var(--sh-inkt); margin-bottom: 0.45rem; }
.shuker-veld label .verplicht { color: var(--sh-fout); }
.shuker-veld input[type="text"],
.shuker-veld input[type="email"],
.shuker-veld input[type="tel"],
.shuker-veld textarea {
  width: 100%;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--sh-lijn);
  border-radius: var(--sh-radius-klein);
  font-family: var(--sh-font-tekst);
  font-size: 1rem;
  color: var(--sh-tekst);
  background: var(--sh-creme);
  transition: border-color var(--sh-overgang), background var(--sh-overgang);
}
.shuker-veld input:focus, .shuker-veld textarea:focus {
  outline: none;
  border-color: var(--sh-groen);
  background: var(--sh-wit);
}
.shuker-veld textarea { min-height: 140px; resize: vertical; }

.shuker-veld--akkoord { display: flex; gap: 0.7rem; align-items: flex-start; }
.shuker-veld--akkoord input { margin-top: 0.35rem; accent-color: var(--sh-groen); width: 1.1rem; height: 1.1rem; }
.shuker-veld--akkoord label { font-weight: 500; font-size: 0.92rem; color: var(--sh-tekst-zacht); margin: 0; }

/* Honeypot, visueel weg maar niet display none */
.shuker-veld--webadres {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.shuker-formulier__melding {
  padding: 1rem 1.2rem;
  border-radius: var(--sh-radius-klein);
  margin-bottom: 1.2rem;
  font-weight: 600;
}
.shuker-formulier__melding--fout { background: #FBEDEC; color: var(--sh-fout); border: 1px solid rgba(179, 69, 60, 0.3); }

/* =========================================================
   14b. Terug naar boven
   ========================================================= */

.shuker-omhoog {
  position: fixed;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 80;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--sh-lijn);
  color: var(--sh-groen);
  box-shadow: var(--sh-schaduw);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--sh-overgang), visibility var(--sh-overgang),
              transform var(--sh-overgang), background var(--sh-overgang),
              color var(--sh-overgang), border-color var(--sh-overgang);
}
.shuker-omhoog.is-zichtbaar {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.shuker-omhoog:hover {
  background: var(--sh-groen);
  border-color: var(--sh-groen);
  color: var(--sh-wit);
}
.shuker-omhoog svg { width: 20px; height: 20px; }

body.menu-open .shuker-omhoog { opacity: 0; visibility: hidden; }

/* =========================================================
   15. Footer
   ========================================================= */

.shuker-voet {
  background: var(--sh-inkt);
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(3.5rem, 6vw, 5rem) 0 0;
  font-size: 0.98rem;
}
.shuker-voet a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.shuker-voet a:hover { color: var(--sh-mint); }

.shuker-voet__kolommen {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 900px) { .shuker-voet__kolommen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .shuker-voet__kolommen { grid-template-columns: 1fr; } }

.shuker-voet__merk {
  font-family: var(--sh-font-tekst);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sh-wit);
  font-size: 1.1rem;
  margin-bottom: 0.9rem;
}
.shuker-voet__logo { margin-bottom: 1.1rem; }
.shuker-voet__logo img { max-height: 74px; width: auto; }
.shuker-voet h3 {
  color: var(--sh-wit);
  font-family: var(--sh-font-tekst);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.shuker-voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }

.shuker-voet__sociaal { display: flex; gap: 0.9rem; margin-top: 1.4rem; }
.shuker-voet__sociaal a {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  place-items: center;
  transition: background var(--sh-overgang), border-color var(--sh-overgang), transform var(--sh-overgang);
}
.shuker-voet__sociaal a:hover { background: var(--sh-groen); border-color: var(--sh-groen); transform: translateY(-3px); color: var(--sh-wit); }
.shuker-voet__sociaal svg { width: 1.1rem; height: 1.1rem; }

.shuker-voet__onder {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 1.4rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.5);
}
.shuker-voet__onder a { color: rgba(255, 255, 255, 0.6); }

/* =========================================================
   16. Subpagina's, berichten, archief, zoeken, 404
   ========================================================= */

.shuker-paginakop {
  background:
    radial-gradient(900px 400px at 80% 0%, rgba(63, 175, 172, 0.3), transparent 60%),
    var(--sh-creme);
  padding: 9rem 0 4rem;
}
.shuker-paginakop h1 { margin-bottom: 0.4rem; }
.shuker-paginakop__intro { font-size: 1.15rem; color: var(--sh-tekst-zacht); max-width: 46rem; margin: 0; }

.shuker-kruimelpad { font-size: 0.88rem; color: var(--sh-tekst-zacht); margin-bottom: 1.4rem; }
.shuker-kruimelpad a { text-decoration: none; }
.shuker-kruimelpad .scheiding { margin-inline: 0.5rem; color: var(--sh-lijn); }

/* Geen eigen padding: de omliggende sectie regelt de ruimte.
   Dubbele witruimte gaf eerder lege witte vlakken. */
.shuker-inhoud { padding-block: 0; }
.shuker-inhoud--smal { max-width: 780px; margin-inline: auto; }
.shuker-inhoud h2 { margin-top: 2rem; }
.shuker-inhoud img { border-radius: var(--sh-radius); }

.shuker-berichten {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 1.8rem;
}
.shuker-bericht-kaart {
  background: var(--sh-wit);
  border-radius: var(--sh-radius);
  overflow: hidden;
  box-shadow: var(--sh-schaduw);
  border: 1px solid var(--sh-lijn);
  transition: transform var(--sh-overgang), box-shadow var(--sh-overgang);
  display: flex;
  flex-direction: column;
}
.shuker-bericht-kaart:hover { transform: translateY(-6px); box-shadow: var(--sh-schaduw-zwaar); }
.shuker-bericht-kaart__beeld { aspect-ratio: 16 / 10; background: var(--sh-mint-licht); }
.shuker-bericht-kaart__beeld img { width: 100%; height: 100%; object-fit: cover; }
.shuker-bericht-kaart__tekst { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.shuker-bericht-kaart__datum { font-size: 0.85rem; color: var(--sh-tekst-zacht); margin-bottom: 0.5rem; }
.shuker-bericht-kaart h2, .shuker-bericht-kaart h3 { font-size: 1.3rem; }
.shuker-bericht-kaart a { text-decoration: none; color: var(--sh-inkt); }
.shuker-bericht-kaart a:hover { color: var(--sh-groen); }

.shuker-paginering { display: flex; gap: 0.5rem; justify-content: center; margin-top: 3rem; }
.shuker-paginering .page-numbers {
  min-width: 44px; height: 44px;
  display: inline-grid;
  place-items: center;
  padding-inline: 0.6rem;
  border-radius: var(--sh-radius-klein);
  border: 1px solid var(--sh-lijn);
  text-decoration: none;
  font-weight: 600;
}
.shuker-paginering .page-numbers.current { background: var(--sh-groen); border-color: var(--sh-groen); color: var(--sh-wit); }

.shuker-404 { text-align: center; padding-block: clamp(6rem, 12vw, 9rem); }
.shuker-404__code {
  font-family: var(--sh-font-kop);
  font-size: clamp(6rem, 16vw, 10rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 2px var(--sh-mint);
}

.shuker-zoekformulier { display: flex; gap: 0.8rem; max-width: 480px; }
.shuker-zoekformulier input[type="search"] {
  flex: 1;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid var(--sh-lijn);
  border-radius: 999px;
  font-family: var(--sh-font-tekst);
  font-size: 1rem;
  background: var(--sh-wit);
}
.shuker-zoekformulier input[type="search"]:focus { outline: none; border-color: var(--sh-groen); }

/* =========================================================
   17. Elementor-samenwerking
   ========================================================= */

/* Laat themasecties vol-breed uitbreken binnen Elementor-containers */
.elementor-widget-container > .shuker-sectie,
.elementor-widget-container > .shuker-hero {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
}
body.elementor-page .shuker-hero { min-height: 88svh; }

/* Paginasjablonen zonder eigen padding */
body.page-template-volledig .shuker-hoofd,
body.page-template-landing .shuker-hoofd { padding: 0; }

.shuker-hoofd { display: block; }

/* Berichtinhoud basisopmaak */
.shuker-inhoud blockquote {
  border-left: 4px solid var(--sh-mint);
  margin: 1.5rem 0;
  padding: 0.6rem 0 0.6rem 1.4rem;
  font-style: italic;
  color: var(--sh-tekst-zacht);
}
.wp-block-image img, .shuker-inhoud figure img { border-radius: var(--sh-radius); }

/* =========================================================
   18. Toegankelijkheid en beweging
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html.shuker-js .shuker-onthul { opacity: 1; transform: none; }
  .shuker-illustratie .tekenlijn { stroke-dashoffset: 0; }
}

/* Afdrukken */
@media print {
  .shuker-kop, .shuker-voet, .shuker-scrollhint, .shuker-knop { display: none !important; }
  body { background: #fff; color: #000; }
}