/*
Theme Name: Dynamic Senses
Theme URI: https://dynamicsenses.nl
Author: Dynamic Senses BV
Description: Eigen thema voor Dynamic Senses. Wad-palet, Schibsted Grotesk en Literata, eilandenkaart.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: dynamic-senses
*/
:root{--slik:#E9ECE6;--schuim:#F7F8F5;--inkt:#1C2B33;--geul:#1F6F6B;--lamsoor:#7D6A9E;--kwelder:#A9B79A;--diep:#16343A;--sans:var(--wp--preset--font-family--sans);--serif:var(--wp--preset--font-family--serif)}
html{scroll-behavior:smooth}
body{-webkit-text-size-adjust:100%}
a:focus-visible,button:focus-visible{outline:3px solid var(--lamsoor);outline-offset:3px}
.wp-site-blocks>*+*,.wp-block-post-content>*+*,main>*+*{margin-block-start:0}
.ds-wrap{width:100%;padding-inline:clamp(1.25rem,4vw,2.5rem);box-sizing:border-box}
.ds-wrap p{max-width:38rem}
h2.wp-block-heading{max-width:20ch;letter-spacing:-.015em}
h1.wp-block-heading{max-width:18ch;letter-spacing:-.02em}
/* header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--slik) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid rgba(28,43,51,.08)}
.admin-bar .top{top:32px}
.topbalk{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.topbalk>*{margin:0!important}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-family:var(--sans);font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--inkt)}
.mark{width:30px;height:30px;color:var(--inkt)}
.ds-nav{font-family:var(--sans);font-size:.95rem;font-weight:500;gap:1.4rem}
.ds-nav a{text-decoration:none}
/* sections */
.ds-sec{padding-block:clamp(4rem,9vw,7rem)}
.ds-licht{background:var(--schuim)}
.ds-donker{background:var(--inkt);color:var(--schuim)}
.ds-donker h2,.ds-donker a{color:var(--schuim)}
.ds-donker .wp-block-button.is-style-outline .wp-block-button__link{color:var(--schuim);border-color:var(--schuim)}
.ds-donker .wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--schuim);color:var(--inkt)}
.wp-block-button.is-style-outline .wp-block-button__link{background:transparent;color:var(--inkt);border:2px solid var(--inkt)}
.wp-block-button.is-style-outline .wp-block-button__link:hover{background:var(--inkt);color:var(--schuim)}
/* hero */
.ds-hero{padding-block:clamp(2.5rem,6vw,5rem) clamp(2rem,5vw,3.5rem)}
.held{gap:2.5rem 4rem!important;align-items:center!important}
.held>.wp-block-column:first-child{flex-basis:42%!important}
.held>.wp-block-column:last-child{flex-basis:58%!important}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem)}
.kaart{margin:0}.kaart svg{width:100%;height:auto;display:block}
.onderschrift{font-size:1rem;color:var(--diep);margin-top:.8rem!important}
.zee{fill:#CFDDD9}.land{fill:#F1F2EC;stroke:#9AA89C;stroke-width:1}
.eiland{fill:var(--kwelder);stroke:var(--inkt);stroke-width:1.3}
.plaat{fill:#E4DCC3;stroke:#C9BC95;stroke-width:1}.plaat2{fill:none;stroke:#C9BC95;stroke-width:1;stroke-dasharray:3 4}
.geul{fill:none;stroke:var(--geul);stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ds-draw 2s 1.9s ease-out forwards}
.water{fill:#CFDDD9;opacity:1;animation:ds-eb 2.8s .5s cubic-bezier(.45,.05,.2,1) forwards}
.dijk{stroke:var(--inkt);stroke-width:3;stroke-linecap:round}
.naam{font-family:var(--sans);font-weight:600;font-size:15px;fill:var(--inkt)}
.zeenaam{font-family:var(--serif);font-style:italic;font-size:17px;fill:var(--geul);text-anchor:middle}
.landnaam{font-family:var(--serif);font-style:italic;font-size:20px;fill:#6E7C72;text-anchor:middle}
.balk{fill:var(--lamsoor);stroke:#fff;stroke-width:2}
@keyframes ds-draw{to{stroke-dashoffset:0}}@keyframes ds-eb{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.geul{animation:none;stroke-dashoffset:0}.water{animation:none;opacity:0}}
.editor-styles-wrapper .water{animation:none;opacity:0}.editor-styles-wrapper .geul{animation:none;stroke-dashoffset:0}
/* hard / hardnekkig */
.ds-lagen>*{margin:0!important}
.boven{padding-block:clamp(2rem,4vw,2.8rem) 1.2rem}
h2.klein{font-size:1.25rem!important;margin-bottom:1rem!important}
.lijn{display:block;width:100%;height:22px;color:var(--diep);margin-bottom:-1px}
.onder{background:var(--diep);color:var(--schuim);padding-block:1.2rem clamp(2rem,4vw,2.8rem)}
.onder h3{color:#CFE3DE}
.laag{gap:.3rem 2rem!important;margin:0!important}
.laag>.wp-block-column:first-child{flex-basis:11rem!important;flex-grow:0!important}
.laag h3{font-size:.95rem!important;margin:0}
.laag p{font-size:.95rem;margin:0}
/* split */
.split{gap:3rem 5rem!important}
.groot{font-family:var(--serif);font-style:italic;font-size:clamp(1.5rem,2.6vw,2rem)!important;line-height:1.35;color:var(--diep);max-width:22ch!important}
ul.lagen3{list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid rgba(28,43,51,.18)}
ul.lagen3 li{padding:1rem 0;border-bottom:1px solid rgba(28,43,51,.18)}
ul.lagen3 strong{font-family:var(--sans)}
/* tijdlijn */
ol.tijd{list-style:none;margin:2.5rem 0 1.5rem;padding:0;border-left:2px solid var(--kwelder)}
ol.tijd li{position:relative;padding:0 0 1.6rem 1.8rem;max-width:44rem;font-family:var(--sans);font-weight:600;font-size:1.05rem;line-height:1.45}
ol.tijd li::before{content:"";position:absolute;left:-7px;top:.4rem;width:12px;height:12px;border-radius:50%;background:var(--slik);border:2px solid var(--geul)}
ol.tijd strong{color:var(--geul);font-size:.95rem}
ol.tijd em{font-family:var(--serif);font-style:normal;font-weight:400;color:#4A5A62}
.naast{margin-top:2rem;max-width:44rem;padding:1.4rem 1.6rem;border-left:4px solid var(--lamsoor);background:var(--schuim)}
.naast p{margin:0}
/* stappen */
ol.stappen{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;counter-reset:s}
ol.stappen li{counter-increment:s;border-top:2px solid var(--inkt);padding-top:1rem;font-size:1rem}
ol.stappen li::before{content:counter(s);font-family:var(--sans);font-weight:800;font-size:2.4rem;color:var(--geul);display:block;line-height:1;margin-bottom:.6rem}
ol.stappen strong{font-family:var(--sans);font-size:1.15rem}
@media (max-width:900px){ol.stappen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){ol.stappen{grid-template-columns:1fr}}
.belofte{margin-top:3.5rem;max-width:46rem}
/* contact */
.contactrij{align-items:center!important}
.foto{aspect-ratio:4/5;max-width:22rem;border-radius:180px 180px 12px 12px;overflow:hidden;background:var(--kwelder);position:relative;display:grid;place-items:center}
.foto .mono{font-family:var(--sans);font-weight:800;font-size:4rem;color:var(--diep)}
.contactrij .wp-block-image img{aspect-ratio:4/5;object-fit:cover;max-width:22rem;border-radius:180px 180px 12px 12px}
.hulp{font-size:.85rem;color:#4A5A62}
.hulp{display:none}
.editor-styles-wrapper .hulp.hulp{display:block}
.adres{font-family:var(--sans);font-size:1.1rem;line-height:1.9}
.adres a{text-underline-offset:4px}
.voet{padding-block:2rem 3rem;font-family:var(--sans);font-size:.9rem;color:#4A5A62;border-top:1px solid rgba(28,43,51,.12)}
