/*
Theme Name: De Gezondheidspsycholoog B
Template: gezondheidspsycholoog
Description: Preview B: het ontwerp van Meyken met verbeteringen in gebruiksgemak (UX/UI). Kindthema van De Gezondheidspsycholoog.
Author: Nano Web
Author URI: https://www.nanoweb.nl
Version: 1.3.0
Text Domain: gezondheidspsycholoog
*/

/* Ritme en leesbaarheid: meer lucht tussen secties, regels niet breder dan prettig leest */
.sectie { padding-bottom: clamp(72px, 7.5vw, 112px); }
.sectie > .wrap::before { margin-bottom: clamp(40px, 4.4vw, 60px); }
.tekst, .blok-tekst { line-height: 1.6; }
.paginakop-tekst .tekst, .kolommen-kop .tekst, .blok-tekst, .tekstsectie .tekst, .stappen-voet .tekst, .beeld-tekst .tekst { max-width: 62ch; }
@media (min-width: 901px) { .paginakop-beeld { min-height: 500px; } }
.paginakop-tekst { padding-bottom: 8px; }
.kop-l { letter-spacing: -0.02em; }

/* Hele kolom klikbaar, met een rustige reactie: lijn en titel kleuren mee, pijl schuift */
.kolom { position: relative; transition: border-color .25s; }
.kolom h3 { transition: color .25s; }
.kolom .tekstlink::after, .kolom .knop::after { content: ''; position: absolute; inset: 0; }
.kolom:has(a):hover { border-left-color: var(--groen); }
.kolom:has(a):hover h3 { color: var(--groen); }
.kolom:has(.tekstlink):hover .tekstlink svg { transform: translateX(4px); }
.kolom:has(.knop):hover .knop { background: var(--groen-donker); border-color: var(--groen-donker); }

/* Kaarten op Kennis: titel kleurt mee */
.artikel-kaart h3 { transition: color .25s; }
.artikel-kaart:hover h3 { color: var(--groen); }

/* Kennis: tabbladen en zoekveld op één regel; op mobiel scrollen de tabbladen horizontaal */
.kennis-balk { display: flex; align-items: flex-end; gap: 16px 32px; margin-bottom: 28px; border-bottom: 1px solid var(--lijn); }
.kennis-balk .tabs { flex: 1; margin: 0; border: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.kennis-balk .tabs::-webkit-scrollbar { display: none; }
.kennis-balk .tabs button { flex: none; white-space: nowrap; }
.kennis-zoek { flex: none; width: 260px; padding-bottom: 8px; }
.kennis-zoek input { width: 100%; height: 40px; padding: 0 0 0 30px; border: 0; border-bottom: 1px solid var(--lijn); background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23666' stroke-width='1.6'/%3E%3Cpath d='M15.5 15.5L21 21' stroke='%23666' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat left center / 18px; font: 400 15px var(--font); color: var(--tekst); border-radius: 0; -webkit-appearance: none; }
.kennis-zoek input:focus { outline: none; border-bottom-color: var(--groen); }
@media (max-width: 860px) {
  .kennis-balk { flex-direction: column-reverse; align-items: stretch; border: 0; }
  .kennis-balk .tabs { border-bottom: 1px solid var(--lijn); margin: 0 calc(-1 * var(--goot)); padding: 0 var(--goot); }
  .kennis-zoek { width: auto; }
}

/* Footer: paginalinks */
.voet-nav ul { display: flex; flex-wrap: wrap; gap: 8px 28px; list-style: none; margin: 0; padding: 22px 0; border-bottom: 1px solid var(--lijn); }
.voet-nav a { font-size: 13.5px; color: var(--tekst); text-decoration: none; }
.voet-nav a:hover { color: var(--groen); }
.voet-nav .alleen-mobiel { display: none; }

/* Formulieren: foutmelding per veld */
.veld-fout { margin: 6px 0 0; font-size: 13px; color: #8a2f16; }
.formulier [aria-invalid=true] { border-color: #a2381b !important; }
.vinkje:has([aria-invalid=true]) { color: #8a2f16 !important; }

/* Op mobiel eerst de afspraak (product, datum, prijs), dan de gegevens, en pas daarna akkoord en verzenden */
@media (max-width: 860px) {
  .formulier-kolommen { display: flex; flex-direction: column; }
  .formulier-kolommen .formulier-kolom:last-child { display: contents; }
  .formulier-kolommen .formulier-kolom:first-child { order: 1; margin: 40px 0 0; padding: 40px 0 0; border-top: 1px solid var(--lijn); }
  .formulier-kolommen .formulier-kolom:last-child > .dgp-akkoordblok,
  .formulier-kolommen .formulier-kolom:last-child > .dgp-akkoordblok ~ * { order: 2; }
  .formulier-kolommen .formulier-kolom:last-child > .dgp-akkoordblok { margin-top: 40px; }
}

/* Vaste afspraakknop onderin op mobiel */
.mobiele-knop { display: none; }
@media (max-width: 1000px) {
  .mobiele-knop { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: block; padding: 10px var(--goot) calc(10px + env(safe-area-inset-bottom)); background: var(--wit); border-top: 1px solid var(--lijn); transition: transform .3s; }
  .mobiele-knop .knop { width: 100%; }
  .mobiele-knop.weg, .menu-open .mobiele-knop { transform: translateY(110%); }
  .met-mobiele-knop .voet { padding-bottom: 76px; }
}

/* ================================================================== Ronde 2: wit en constructief (Ashwin 26 okt)
   Haar stijlinstructie blijft leidend: witte achtergrond, dunne lichtgrijze lijnen en kaders in plaats van gekleurde vlakken,
   olijfgroen alleen voor titels, knoppen en kleine accenten, witte footer, geen grafische motieven. */

/* Paginakop: titel op 64 px (bovenkant van haar richtmaat 56-64 px), rustige inkomst, beeld komt binnen met een veeg */
.paginakop .kop-xl { font-size: clamp(42px, 5.2vw, 64px); line-height: 1.02; letter-spacing: -0.025em; }
.paginakop { padding-bottom: clamp(64px, 7vw, 104px); }
@media (prefers-reduced-motion: no-preference) {
  .paginakop-tekst > * { animation: dgpb-op .8s cubic-bezier(.2, .7, .2, 1) both; }
  .paginakop-tekst > :nth-child(2) { animation-delay: .08s; }
  .paginakop-tekst > :nth-child(3) { animation-delay: .16s; }
  .paginakop-tekst > :nth-child(4) { animation-delay: .24s; }
  .paginakop-tekst > :nth-child(5) { animation-delay: .32s; }
  .paginakop-beeld img { animation: dgpb-veeg 1.4s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes dgpb-op { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes dgpb-veeg { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }

/* Secties komen rustig in beeld (alleen met JavaScript en zonder voorkeur voor minder beweging) */
.js-onthul .onthul { opacity: 0; transform: translateY(28px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.js-onthul .onthul.zichtbaar { opacity: 1; transform: none; }

/* Grotere sectiekoppen */
.kop-l { font-size: clamp(30px, 3.6vw, 44px); }

/* Kolommen met beeld: kaarten in een dun lichtgrijs kader, beeld zoomt in en het kader kleurt mee bij hover */
.kolommen:has(.met-beeld) { gap: 20px; }
.kolom.met-beeld { padding: 0 0 30px; border: 1px solid var(--lijn); transition: border-color .25s; }
.kolom.met-beeld > :not(.kolom-beeld) { margin-left: clamp(20px, 2.4vw, 30px); margin-right: clamp(20px, 2.4vw, 30px); }
.kolom.met-beeld .kolom-beeld { margin: 0 0 28px; border-bottom: 1px solid var(--lijn); }
.kolom.met-beeld .kolom-beeld img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.kolom.met-beeld:hover { border-color: var(--groen); }
.kolom.met-beeld:hover .kolom-beeld img { transform: scale(1.05); }
@media (max-width: 860px) {
  .kolommen:has(.met-beeld) { gap: 16px; }
  .kolom.met-beeld, .kolom.met-beeld:first-child { padding: 0 0 26px; border: 1px solid var(--lijn); }
}

/* Stappen: nummer boven, met een dunne verbindingslijn naar de volgende stap */
.stappen.met-pijl .stap, .stappen.met-lijn .stap { position: relative; grid-template-columns: minmax(0, 1fr); padding: 0 40px 0 0; border-left: 0; }
.stappen .stap h3 { margin-top: 24px; font-size: 22px; }
.stappen.met-pijl .stap:not(:last-child)::after, .stappen.met-lijn .stap:not(:last-child)::after { content: ''; position: absolute; top: 30px; left: 76px; right: 16px; width: auto; height: 1px; background: var(--lijn); -webkit-mask: none; mask: none; }
.stap-nr { background: var(--wit); }
@media (max-width: 760px) {
  .stappen.met-pijl .stap:not(:last-child)::after, .stappen.met-lijn .stap:not(:last-child)::after { display: none; }
  .stappen.met-lijn .stap + .stap { padding-top: 0; border-top: 0; }
}

/* Knoppen: pijl beweegt mee */
.knop svg { transition: transform .25s; }
.knop:hover svg { transform: translateX(4px); }



/* Afwisselend wit en lichtgrijs (Ashwin 26 okt: grijze vlakken mogen): elke tweede sectie na de paginakop op warmgrijs,
   zonder lijn erboven. Formulieren en Kennis blijven wit. */
main > .sectie:nth-child(even):not(#formulier):not(.zonder-lijn) { padding-top: clamp(64px, 7vw, 104px); background: var(--warm); }
main > .sectie:nth-child(even):not(#formulier):not(.zonder-lijn) > .wrap::before { display: none; }
main > .sectie:nth-child(even) + .sectie > .wrap::before { display: none; }
main > .sectie:nth-child(even) + .sectie { padding-top: clamp(64px, 7vw, 104px); }
main > .sectie:nth-child(even) .kolom.met-beeld { background: var(--wit); border-color: var(--wit); }
main > .sectie:nth-child(even) .kolom.met-beeld:hover { border-color: var(--groen); }
main > .sectie:nth-child(even) .stap-nr { background: var(--warm); }
main > .sectie:nth-child(even) .plaatshouder, main > .sectie:nth-child(even) .ervaring { background: var(--wit); }
main > .sectie:nth-child(even) .beeld-tekst-beeld { background: var(--wit); }