/* Leef Preventief ontwerpsysteem, laag 4 (lp-core.css).
   Alleen wat het atomic schema van Elementor 4.2 niet kent. Actief via body.lp-ds, zie functions-lp.php.
   Kleuren altijd via de variabelen uit laag 1. Groeit dit bestand, dan hoort er iets in laag 2. */

/* Basis van pagina's in het ontwerpsysteem */
html:has(> body.lp-ds){scroll-behavior:smooth;scroll-padding-top:96px}
body.lp-ds{margin:0;background:var(--lp-cream);color:var(--lp-text);font-family:"Hanken Grotesk",system-ui,sans-serif;
  font-size:1.125rem;line-height:1.62;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.lp-ds img{max-width:100%}
.lp-ds .elementor-widget-html{width:100%}
.lp-ds :focus-visible{outline:2px solid var(--lp-amber);outline-offset:3px}

/* Theme Builder header: het omhulsel van Elementor Pro krijgt geen eigen box, anders blijft de sticky balk
   binnen dat omhulsel steken en scrolt hij mee. De mededeling erboven scrolt gewoon weg. */
.lp-ds [data-elementor-type="header"]{display:contents}

/* Nested accordion (v3 widget, rendert details en summary zonder javascript) */
.lp-ds .elementor-widget-n-accordion{--n-accordion-padding:0;--n-accordion-border-width:0;--n-accordion-border-radius:0;
  --n-accordion-item-title-space-between:0;--n-accordion-item-title-distance-from-content:0}
.lp-ds .elementor-widget-n-accordion .e-n-accordion{display:flex;flex-direction:column;gap:0!important;
  border-top:1px solid color-mix(in srgb,var(--lp-primary) 16%,transparent)}
.lp-ds .elementor-widget-n-accordion .e-n-accordion-item{border:0!important;
  border-bottom:1px solid color-mix(in srgb,var(--lp-primary) 16%,transparent)!important;border-radius:0!important;
  background:transparent!important;margin:0!important;padding:0!important;box-shadow:none!important}
.lp-ds .elementor-widget-n-accordion .e-n-accordion-item-title{display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;cursor:pointer;list-style:none;padding:22px 0!important;margin:0!important;background:transparent!important;
  border:0!important;border-radius:0!important}
.lp-ds .e-n-accordion-item-title::-webkit-details-marker{display:none}
.lp-ds .elementor-widget-n-accordion .e-n-accordion-item-title-header{flex:1;margin:0}
.lp-ds .elementor-widget-n-accordion .e-n-accordion-item-title-text{margin:0;font-family:"Fraunces",Georgia,serif;font-weight:400;
  font-variation-settings:"SOFT" 28,"WONK" 0;font-size:1.375rem;line-height:1.3;letter-spacing:-.015em;color:var(--lp-primary)}
.lp-ds .e-n-accordion-item-title:hover .e-n-accordion-item-title-text{text-decoration:underline;
  text-decoration-color:var(--lp-amber);text-underline-offset:4px;text-decoration-thickness:2px}
.lp-ds .elementor-widget-n-accordion .e-n-accordion-item-title::after{content:"";flex:none;align-self:center;width:16px;height:16px;
  background:linear-gradient(var(--lp-primary),var(--lp-primary)) center/16px 2px no-repeat,
  linear-gradient(var(--lp-primary),var(--lp-primary)) center/2px 16px no-repeat;transition:background-size .25s ease}
.lp-ds .elementor-widget-n-accordion .e-n-accordion-item[open]>.e-n-accordion-item-title::after{background-size:16px 2px,2px 0}
.lp-ds .elementor-widget-n-accordion .e-n-accordion-item>.e-con{padding:0!important;margin:0!important;border:0!important;
  background:transparent!important;border-radius:0!important}

/* Formulier van Elementor Pro (v3 widget form, pagina contact). !important omdat de stijlcontrols van de widget
   standaardwaarden uit de Kit zetten met een hogere specificiteit. Afstand tussen de velden staat in de widget. */
.lp-ds .elementor-widget-form .elementor-field-group>label{font-family:"Hanken Grotesk",system-ui,sans-serif!important;
  font-size:1rem!important;font-weight:500!important;line-height:1.4!important;color:var(--lpc-heading,var(--lp-primary))!important;padding:0 0 8px!important}
.lp-ds .elementor-widget-form .elementor-field-textual{font-family:"Hanken Grotesk",system-ui,sans-serif!important;
  font-size:1.0625rem!important;line-height:1.5!important;color:var(--lp-text)!important;background-color:var(--lp-cream)!important;
  border:1.5px solid var(--lp-line)!important;border-radius:12px!important;padding:.75em 1em!important;box-shadow:none!important}
.lp-ds .elementor-widget-form .elementor-field-textual:focus{border-color:var(--lp-amber)!important;outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--lp-amber) 28%,transparent)!important}
.lp-ds .elementor-widget-form .elementor-field-textual::placeholder{color:color-mix(in srgb,var(--lp-text) 55%,transparent)}
.lp-ds .elementor-widget-form .elementor-field-option{display:flex;align-items:flex-start;gap:10px}
.lp-ds .elementor-widget-form .elementor-field-option input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--lp-amber)}
.lp-ds .elementor-widget-form .elementor-field-option label{font-size:.95rem!important;font-weight:400!important;
  line-height:1.5!important;color:var(--lpc-text,var(--lp-text))!important}
.lp-ds .elementor-widget-form .elementor-button{width:100%;font-family:"Hanken Grotesk",system-ui,sans-serif!important;
  font-size:1.0625rem!important;font-weight:500!important;line-height:1.2!important;padding:.85em 1.5em!important;border-radius:999px!important;
  border:1.5px solid transparent!important;background-color:var(--lp-amber)!important;color:var(--lp-deep)!important;transition:background-color .2s}
.lp-ds .elementor-widget-form .elementor-button:is(:hover,:focus-visible){background-color:var(--lp-amber-hover)!important}
.lp-ds .elementor-widget-form .elementor-message{font-size:1rem;line-height:1.5;margin-top:16px;color:var(--lpc-heading,var(--lp-primary))}
.lp-ds .elementor-widget-form .elementor-message-danger,.lp-ds .elementor-widget-form .elementor-help-inline{
  border-left:3px solid var(--lp-amber);padding-left:10px;color:var(--lpc-heading,var(--lp-primary))}

/* Loop Grid van Elementor Pro (pagina artikelen). De kaart is het loop item, atomic met klassen uit laag 2; hier alleen de
   paginering. !important om dezelfde reden als bij het formulier: de stijlcontrols van de widget. */
.lp-ds .elementor-widget-loop-grid .elementor-pagination{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:8px;margin-top:clamp(40px,5vw,56px);font-family:"Hanken Grotesk",system-ui,sans-serif!important;font-size:1rem!important;line-height:1.2!important}
.lp-ds .elementor-widget-loop-grid .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:2.75em;
  margin:0!important;padding:.7em 1em;border:1.5px solid color-mix(in srgb,var(--lpc-heading,var(--lp-primary)) 22%,transparent);
  border-radius:999px;color:var(--lpc-heading,var(--lp-primary))!important;font-weight:500;text-decoration:none;transition:border-color .2s}
.lp-ds .elementor-widget-loop-grid a.page-numbers:is(:hover,:focus-visible){border-color:var(--lpc-heading,var(--lp-primary))}
.lp-ds .elementor-widget-loop-grid .page-numbers.current{background:var(--lp-primary);border-color:var(--lp-primary);color:var(--lp-cream)!important}
.lp-ds .elementor-widget-loop-grid span.page-numbers:is(.prev,.next){opacity:.45}
.lp-ds .elementor-widget-loop-grid .page-numbers.dots{border-color:transparent;min-width:0}

/* Systeemkaart: interactieve svg, blijft een html widget */
.lp-kaart svg{width:100%;height:auto;display:block;overflow:visible}
.lp-kaart-edge{stroke:var(--lp-primary);stroke-width:1;opacity:.12;transition:opacity .35s ease,stroke .35s ease,stroke-width .35s ease}
.lp-kaart-edge.is-aan{stroke:var(--lp-amber);stroke-width:3;opacity:1}
.lp-kaart-cirkel{fill:var(--lp-sand);stroke:color-mix(in srgb,var(--lp-primary) 16%,transparent);stroke-width:1.5;
  transition:fill .35s ease,stroke .35s ease}
.lp-kaart-stip{fill:var(--lp-amber);opacity:0;transition:opacity .35s ease}
.lp-kaart-node text{font-family:"Hanken Grotesk",system-ui,sans-serif;font-size:19px;fill:var(--lp-text);transition:fill .35s ease}
.lp-kaart-node.is-aan .lp-kaart-cirkel{fill:var(--lp-primary);stroke:var(--lp-primary)}
.lp-kaart-node.is-aan .lp-kaart-stip{opacity:1}
.lp-kaart-node.is-aan text{fill:var(--lp-primary);font-weight:600}
@media (max-width:767px){.lp-kaart-node text{font-size:20px}}

/* Minder beweging */
@media (prefers-reduced-motion:reduce){
  .lp-ds *,.lp-ds *::before,.lp-ds *::after{transition:none!important}
  html:has(> body.lp-ds){scroll-behavior:auto}
}