/* ==========================================================================
Praktijk Natuurlijk Helen — shared styles
Ported from the Claude Design prototype (Praktijk Natuurlijk Helen.dc.html)
and extended for a multi-page static site (nav state + mobile menu).
Fonts are loaded via in each page for preconnect benefits.
========================================================================== */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:#F4F0E8}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
::selection{background:#3E4D3A;color:#F4F0E8}
.pnh-serif{font-family:'Cormorant Garamond',Georgia,serif}
.pnh-sans{font-family:'Mulish',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
/* ---- Entrance / scroll-reveal animations ---- */
@keyframes pnhFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes pnhRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.pnh-hero-in>*{opacity:0;animation:pnhRise .95s cubic-bezier(.22,1,.36,1) forwards}
.pnh-hero-in>*:nth-child(1){animation-delay:.10s}
.pnh-hero-in>*:nth-child(2){animation-delay:.24s}
.pnh-hero-in>*:nth-child(3){animation-delay:.42s}
.pnh-hero-in>*:nth-child(4){animation-delay:.58s}
@media (prefers-reduced-motion:reduce){.pnh-hero-in>*{animation:none;opacity:1}}
.pnh-reveal{opacity:0;transform:translateY(26px);transition:opacity .95s cubic-bezier(.22,1,.36,1),transform .95s cubic-bezier(.22,1,.36,1)}
.pnh-reveal.pnh-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.pnh-reveal{opacity:1 !important;transform:none !important;transition:none !important}}
/* ---- Underline-on-hover links ---- */
.pnh-link{position:relative}
.pnh-link::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:currentColor;transition:width .35s cubic-bezier(.22,1,.36,1)}
.pnh-link:hover::after{width:100%}
/* ---- Cards / buttons / inputs ---- */
.pnh-card img{transition:transform 1.1s cubic-bezier(.22,1,.36,1)}
.pnh-card:hover img{transform:scale(1.06)}
.pnh-btn{transition:all .3s cubic-bezier(.22,1,.36,1)}
.pnh-btn-dark:hover{background:#2A3527 !important}
.pnh-btn-ghost:hover{background:rgba(244,240,232,.12) !important;border-color:rgba(244,240,232,.9) !important}
.pnh-btn-out:hover{background:#3E4D3A !important;color:#F4F0E8 !important}
.pnh-btn-light:hover{background:#E7E0CF !important}
.pnh-input:focus{outline:none;border-color:#3E4D3A !important;background:#fff !important}
/* ---- WhatsApp floating button ---- */
.pnh-wa{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:45;width:58px;height:58px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:#3E4D3A;color:#F4F0E8;box-shadow:0 10px 26px rgba(37,46,33,.30);text-decoration:none;transition:transform .35s cubic-bezier(.22,1,.36,1),background .3s ease}
.pnh-wa:hover{background:#2A3527 !important;transform:translateY(-3px) scale(1.05)}
.pnh-wa:focus-visible{outline:2px solid #3E4D3A;outline-offset:3px}
.pnh-wa svg{width:30px;height:30px;display:block}
@media (max-width:600px){.pnh-wa{width:52px;height:52px}.pnh-wa svg{width:27px;height:27px}}
@media (prefers-reduced-motion:reduce){.pnh-wa{transition:none}.pnh-wa:hover{transform:none}}
/* ---- Focus visibility ---- */
.pnh-nav-a:focus-visible,.pnh-burger:focus-visible{outline:2px solid #F4F0E8;outline-offset:4px;border-radius:4px}
/* ---- Accordions () ---- */
details summary{list-style:none}
details summary::-webkit-details-marker{display:none}
.pnh-acc-icon{transition:transform .35s cubic-bezier(.22,1,.36,1);font-weight:300;flex:none}
details[open] .pnh-acc-icon{transform:rotate(45deg)}
details summary:hover .pnh-acc-q{opacity:.65}
/* ---- Navigation active state (drives off aria-current="page") ---- */
.pnh-nav-a{opacity:1;transition:opacity .3s cubic-bezier(.22,1,.36,1)}
.pnh-desktop-nav .pnh-nav-a:not([aria-current="page"]){opacity:.68}
.pnh-desktop-nav .pnh-nav-a[aria-current="page"]{opacity:1;font-weight:700 !important}
/* ---- Mobile menu (replaces the prototype's conditional render) ---- */
.pnh-burger{display:none}
.pnh-mobile-menu{position:fixed;inset:0;z-index:60;background:#2E382A;display:none;flex-direction:column;padding:26px clamp(20px,6vw,40px)}
.pnh-mobile-menu.is-open{display:flex;animation:pnhFade .3s ease both}
body.pnh-no-scroll{overflow:hidden}
@media (max-width:900px){
.pnh-desktop-nav{display:none !important}
.pnh-burger{display:inline-flex !important}
}
@media (max-width:820px){
.pnh-2col{grid-template-columns:1fr !important;gap:32px !important}
.pnh-3col{grid-template-columns:1fr !important;gap:38px !important}
.pnh-steps{grid-template-columns:1fr !important;gap:32px !important}
.pnh-sticky{position:static !important}
.pnh-foot-bottom{flex-direction:column;align-items:flex-start !important;gap:14px}
}
/* ---- Tweak: typografische sfeer (display font) ---- */
.pnh-root[data-font="statig"] .pnh-serif{font-family:'Playfair Display',Georgia,serif;letter-spacing:-.005em}
.pnh-root[data-font="helder"] .pnh-serif{font-family:'Spectral',Georgia,serif}
/* ---- Tweak: beeldsfeer (photo treatment) ---- */
.pnh-root[data-beeld="warm"] img{filter:saturate(1.06) sepia(.2) contrast(.97) brightness(1.03)}
.pnh-root[data-beeld="duotone"] img{filter:grayscale(.45) sepia(.5) hue-rotate(58deg) saturate(.85) contrast(1.02) brightness(.97)}
/* keep logo/brand marks untouched by treatments */
.pnh-root[data-beeld] img[alt="Praktijk Natuurlijk Helen"]{filter:brightness(0) invert(1) !important}
/* ---- Tweak: sfeer (ambient light) ---- */
.pnh-sfeer-overlay{position:fixed;inset:0;pointer-events:none;z-index:6;opacity:0;transition:opacity .7s ease;mix-blend-mode:multiply}
.pnh-root[data-sfeer="gloed"] .pnh-sfeer-overlay{opacity:1;mix-blend-mode:soft-light;background:radial-gradient(130% 80% at 50% -5%,rgba(255,221,168,.55),transparent 55%),radial-gradient(110% 75% at 100% 105%,rgba(214,158,110,.5),transparent 60%)}
.pnh-root[data-sfeer="ingetogen"] .pnh-sfeer-overlay{opacity:1;mix-blend-mode:multiply;background:radial-gradient(125% 105% at 50% 42%,transparent 42%,rgba(26,33,22,.42) 100%)}