/* ============================================================
   HUB-widgets in de Next Source-huisstijl.
   Elke selector hieronder komt uit de werkelijke pagina-broncode
   van nextsource.nl. De prefix body[class*="elementor-kit-"] geeft
   net genoeg gewicht om de inline kit-CSS van Elementor te
   overschrijven, zonder !important.
   ============================================================ */

/* ---------- Typografie ----------
   De site zet h1 t/m h6 op "DM Sans" en broodtekst op zwart.
   De huisletter is Anek Devanagari Expanded, tekstkleur navy. */
body[class*="elementor-kit-"]{color:var(--text-body);font-family:var(--font-core)}
body[class*="elementor-kit-"] h1,body[class*="elementor-kit-"] .h1,
body[class*="elementor-kit-"] h2,body[class*="elementor-kit-"] .h2,
body[class*="elementor-kit-"] h3,body[class*="elementor-kit-"] .h3,
body[class*="elementor-kit-"] h4,body[class*="elementor-kit-"] .h4,
body[class*="elementor-kit-"] h5,body[class*="elementor-kit-"] .h5,
body[class*="elementor-kit-"] h6,body[class*="elementor-kit-"] .h6{
font-family:var(--font-display);color:var(--text-strong);letter-spacing:var(--tracking-tight);text-wrap:balance}
body[class*="elementor-kit-"] h1,body[class*="elementor-kit-"] .h1{font-weight:var(--weight-bold);line-height:var(--leading-tight)}
body[class*="elementor-kit-"] h2,body[class*="elementor-kit-"] .h2{font-weight:var(--weight-bold);line-height:var(--leading-snug)}
body[class*="elementor-kit-"] h3,body[class*="elementor-kit-"] .h3{font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
body[class*="elementor-kit-"] h4,body[class*="elementor-kit-"] .h4,
body[class*="elementor-kit-"] h5,body[class*="elementor-kit-"] .h5{font-weight:var(--weight-semibold)}
body[class*="elementor-kit-"] h6,body[class*="elementor-kit-"] .h6{
font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ns-teal-700)}
body[class*="elementor-kit-"] .lqd-post-content,
body[class*="elementor-kit-"] .lqd-post-header .entry-excerpt{font-family:var(--font-body);line-height:var(--leading-relaxed)}

/* Donkere secties: witte koppen, geen zwart. */
.page-scheme-dark{color:rgba(255,255,255,.82)}
.page-scheme-dark h1,.page-scheme-dark h2,.page-scheme-dark h3,
.page-scheme-dark h4,.page-scheme-dark h5,.page-scheme-dark .h1,
.page-scheme-dark .h2,.page-scheme-dark .h3,.page-scheme-dark .h4{color:var(--ns-white)}
.page-scheme-dark h6,.page-scheme-dark .h6{color:var(--ns-teal-300)}

/* ---------- Links ---------- */
body[class*="elementor-kit-"] a{color:var(--text-link)}
body[class*="elementor-kit-"] a:hover{color:var(--text-link-hover)}
.page-scheme-dark a{color:var(--ns-teal-300)}

/* ---------- ld-fancy-heading (HUB) ----------
   Wordt op de site gebruikt met een gradient over de tekst. De richting
   stond op 240deg (geel links). Het merk schrijft teal links voor. */
body[class*="elementor-kit-"] .ld-fh-element{font-family:var(--font-display)}
body[class*="elementor-kit-"] .ld-fh-element[style*="linear-gradient"],
body[class*="elementor-kit-"] .ld-fh-element[style*="gradient"]{
background-image:var(--gradient-brand)!important;
-webkit-background-clip:text;background-clip:text}
body[class*="elementor-kit-"] .lqd-highlight-inner{background:var(--gradient-brand)}

/* ---------- iconbox (HUB) ----------
   De site gebruikt een tealtint als vlak met teal icoon. Het merk gebruikt
   een massieve navy schijf met een wit icoon. */
body[class*="elementor-kit-"] .iconbox-icon-container{
background-color:var(--ns-navy-900);color:var(--ns-white);border-radius:var(--radius-full)}
body[class*="elementor-kit-"] .iconbox-icon-container svg{fill:currentColor}
body[class*="elementor-kit-"] .lqd-iconbox-heading{font-family:var(--font-display);font-weight:var(--weight-semibold);color:var(--text-strong)}
.page-scheme-dark .lqd-iconbox-heading{color:var(--ns-white)}

/* ---------- accordion (HUB) ----------
   Gesloten: wit met navy tekst. Open: merkgradient met navy tekst — niet
   wit, want wit op de gradient haalt de contrastdrempel niet. */
body[class*="elementor-kit-"] .accordion-title a{
font-family:var(--font-display);font-weight:var(--weight-semibold);
color:var(--text-strong);background-color:var(--ns-white);
border-radius:var(--radius-md) var(--radius-md) 0 0}
body[class*="elementor-kit-"] .accordion-item.active .accordion-title a{
background-image:var(--gradient-brand);color:var(--ns-navy-900);
border-radius:var(--radius-md) var(--radius-md) 0 0}
body[class*="elementor-kit-"] .accordion-content{
background-color:var(--ns-white);color:var(--text-muted);
border-radius:0 0 var(--radius-md) var(--radius-md)}
body[class*="elementor-kit-"] .accordion-expander{color:var(--ns-navy-900)}
body[class*="elementor-kit-"] .accordion-item.active .accordion-expander{color:var(--ns-navy-900)}

/* ---------- Knoppen ----------
   HUB gebruikt .btn, Elementor .elementor-button. Beide volledig afgerond;
   afgeronde hoeken zijn een merkregel. */
body[class*="elementor-kit-"] .btn,
body[class*="elementor-kit-"] .elementor-button,
body[class*="elementor-kit-"] button,
body[class*="elementor-kit-"] input[type="button"],
body[class*="elementor-kit-"] input[type="submit"]{
font-family:var(--font-core);font-weight:var(--weight-semibold);
border-radius:var(--radius-control);transition:var(--transition-control)}
body[class*="elementor-kit-"] .btn:active,
body[class*="elementor-kit-"] .elementor-button:active{transform:scale(.98)}

/* Gradient-knoppen: richting corrigeren naar teal links, geel rechts. */
body[class*="elementor-kit-"] .btn[style*="gradient"],
body[class*="elementor-kit-"] .elementor-button[style*="gradient"]{
background-image:var(--gradient-brand)!important;color:var(--ns-navy-900)}
body[class*="elementor-kit-"] .btn[style*="gradient"]:hover,
body[class*="elementor-kit-"] .elementor-button[style*="gradient"]:hover{filter:brightness(1.06)}

/* ---------- Formulieren ----------
   Invoervelden radius 8px, niet pill. Verzendknop in de merkgradient. */
body[class*="elementor-kit-"] .elementor-field-group .elementor-field:not(.elementor-select-wrapper),
body[class*="elementor-kit-"] .elementor-field-group .elementor-select-wrapper select,
body[class*="elementor-kit-"] .wpcf7-form-control:not(.wpcf7-submit):not([type=checkbox]):not([type=radio]){
font-family:var(--font-body);color:var(--text-body);
background-color:var(--ns-white);border-color:var(--border-default);
border-radius:var(--radius-input)}
body[class*="elementor-kit-"] .elementor-field-group .elementor-field:focus{
border-color:var(--ns-teal-500);box-shadow:var(--ring-focus)}
body[class*="elementor-kit-"] .elementor-field-group .elementor-field,
body[class*="elementor-kit-"] .elementor-field-subgroup label{font-weight:var(--weight-regular)}
body[class*="elementor-kit-"] .elementor-field-group > label,
body[class*="elementor-kit-"] .elementor-field-label{
font-family:var(--font-body);font-weight:var(--weight-semibold);color:var(--text-strong)}
body[class*="elementor-kit-"] .elementor-button[type="submit"]{
background-image:var(--gradient-brand);background-color:transparent;color:var(--ns-navy-900)}
body[class*="elementor-kit-"] .elementor-button[type="submit"]:hover{filter:brightness(1.06);color:var(--ns-navy-900)}

/* ---------- Header & footer ----------
   De footer stond op rood (#C10A0B). Dat is geen merkkleur; navy met de
   verloopbalk als bovenrand hoort hier. */
.main-footer{background-color:var(--ns-navy-900)!important;position:relative}
.main-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:var(--rule-height);background:var(--gradient-brand)}
.main-footer,.main-footer p,.main-footer li,.main-footer a{color:rgba(255,255,255,.78)}
.main-footer a:hover{color:var(--ns-white)}
.main-footer h1,.main-footer h2,.main-footer h3,.main-footer h4,.main-footer h5{color:var(--ns-white)}
.main-footer h6,.main-footer .h6{color:var(--ns-teal-300)}

/* ---------- Cookiemelding & meldingsbalk ---------- */
.seopress-user-consent{font-family:var(--font-body);color:var(--text-body)}
.seopress-user-consent button{
font-family:var(--font-core);font-weight:var(--weight-semibold);
border-radius:var(--radius-control);background:var(--ns-navy-900);color:var(--ns-white)}
.seopress-user-consent button:hover{background:var(--ns-navy-800)}
#seopress-user-consent-close{background:var(--ns-white);color:var(--ns-navy-900);border:1px solid var(--border-default)!important}
#seopress-user-consent-close:hover{background:var(--ns-grey-100);color:var(--ns-navy-900)}
[class*="lqd-6a9abb"]{background-color:var(--ns-navy-900)!important}

/* ---------- WooCommerce ----------
   Alleen vormgeving; prijzen en teksten blijven zoals ze zijn. */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt{
font-family:var(--font-core);font-weight:var(--weight-semibold);border-radius:var(--radius-control)}
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce .single_add_to_cart_button{
background-image:var(--gradient-brand);background-color:transparent;color:var(--ns-navy-900)}
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover,.woocommerce .single_add_to_cart_button:hover{
filter:brightness(1.06);color:var(--ns-navy-900)}
.woocommerce span.onsale{
background:var(--gradient-brand);color:var(--ns-navy-900);border-radius:var(--radius-full);
font-family:var(--font-core);font-weight:var(--weight-semibold);
letter-spacing:var(--tracking-caps);text-transform:uppercase}
.woocommerce-info,.woocommerce-message{
background:var(--ns-teal-100);border:0;border-radius:var(--radius-md);color:var(--text-body)}
.woocommerce-error{background:#fbe9ec;border:0;border-radius:var(--radius-md);color:#7d2632}

/* ---------- Selectie & focus ---------- */
::selection{background:var(--ns-teal-500);color:var(--ns-navy-900)}
body[class*="elementor-kit-"] :focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* ---------- Beweging ----------
   Rustig en zakelijk: geen bounce. De site gebruikt bounceInLeft en
   bounceInRight; die worden hier omgezet naar een fade met verschuiving. */
@media (prefers-reduced-motion:no-preference){
.animated.bounceInLeft,.animated.bounceInRight{animation-name:nsFadeIn!important;animation-duration:var(--duration-reveal)!important;animation-timing-function:var(--ease-out)!important}
}
@keyframes nsFadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- Scroll-reveal ----------
   Automatisch op herkenbare HUB-widgets, plus opt-in via [data-ns-reveal].
   Zonder JS (of zonder de klasse .has-ns-js op <html>) blijft alles gewoon
   zichtbaar — er verdwijnt nooit content voor bezoekers zonder JS. */
.has-ns-js .iconbox-icon-container,.has-ns-js .accordion-item,
.has-ns-js .ns-card,.has-ns-js .ns-product-card,.has-ns-js .ns-service,
.has-ns-js .ns-tile,.has-ns-js [data-ns-reveal]{
opacity:0;transform:translateY(16px);
transition:opacity var(--duration-reveal) var(--ease-out),transform var(--duration-reveal) var(--ease-out)}
.has-ns-js .iconbox-icon-container.is-in,.has-ns-js .accordion-item.is-in,
.has-ns-js .ns-card.is-in,.has-ns-js .ns-product-card.is-in,.has-ns-js .ns-service.is-in,
.has-ns-js .ns-tile.is-in,.has-ns-js [data-ns-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
.has-ns-js .iconbox-icon-container,.has-ns-js .accordion-item,.has-ns-js .ns-card,
.has-ns-js .ns-product-card,.has-ns-js .ns-service,.has-ns-js .ns-tile,.has-ns-js [data-ns-reveal]{opacity:1;transform:none}
}

/* ---------- Swirl-parallax ---------- */
[data-ns-parallax]{will-change:transform}