/*
 Theme Name:   De Zonnepaneel verwijderaar
 Theme URI:    https://DeZonnepaneelVerwijderaar.nl/
 Description:  Bricks Child Theme voor De Zonnepaneel verwijderaar
 Author:       De Zonnepaneel verwijderaar
 Author URI:   https://DeZonnepaneelVerwijderaar.nl/
 Template:     bricks
 Version:      1.0.0
 Text Domain:  dzv-child
*/

:root {
  --dzv-font-family-sans: "DM Sans", Arial, sans-serif;
}

/* Bricks stores the selected custom font as a single family. Keep text and
 * headings readable in a sans-serif while the webfont is still loading. */
.brx-body {
  font-family: var(--dzv-font-family-sans);
}

.brx-body :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--dzv-font-family-sans);
}

/* Keep the document viewport fixed horizontally without turning it into a
 * scroll container. Component-level horizontal scrolling remains available. */
html,
body {
  max-width: 100%;
}

body {
  overflow-x: clip;
}

html {
  overscroll-behavior-x: none;
}

.brxe-nav-nested a[aria-current="page"],
.brxe-nav-nested a[aria-current="true"],
.brxe-nav-nested a[aria-current="location"] {
  color: var(--primary);
}

/* Keep later Bricksforge form steps out of the initial layout until its
 * multistep controller has finished assigning the active step. */
.brxe-brf-pro-forms.form-loading .step ~ * {
  display: none !important;
}

/* Bricksforge scrolls the first invalid field group into view after step
 * validation. Keep that field clear of the sticky header and center it in the
 * viewport instead of pinning it to the top edge. */
.brxe-brf-pro-forms .form-group.brf-invalid {
  scroll-margin-block-start: max(6rem, calc(50vh - 4rem));
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) {
  /*--kb-content-width: 780px;*/
  --kb-paragraph-spacing: 1.1em;
  --kb-heading-spacing-top: 1.9em;
  --kb-heading-spacing-bottom: 0.55em;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) :is(h2, h3, h4, h5, h6, p, ul, ol, blockquote, figure, table) {
  max-width: var(--kb-content-width);
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) :is(h2, h3, h4, h5, h6) {
  color: var(--ink);
  font-family: var(--dzv-font-family-sans);
  font-weight: 700;
  letter-spacing: 0;
  text-wrap: balance;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) h2 {
  margin-block: var(--kb-heading-spacing-top) var(--kb-heading-spacing-bottom);
  font-size: var(--Heading-H3);
  line-height: 1.2;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) h3 {
  margin-block: 1.7em 0.5em;
  font-size: var(--Heading-H4);
  line-height: 1.25;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) h4 {
  margin-block: 1.5em 0.45em;
  font-size: var(--Heading-H5);
  line-height: 1.3;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) :is(h5, h6) {
  margin-block: 1.35em 0.4em;
  font-size: var(--Heading-H6);
  line-height: 1.35;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) p {
  margin-block: 0 var(--kb-paragraph-spacing);
  color: var(--ink-t-9);
  font-size: var(--text-p2);
  line-height: 1.7;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) :is(ul, ol) {
  margin-block: 0 1.25em;
  padding-inline-start: 1.25em;
  color: var(--ink-t-9);
  font-size: var(--text-p2);
  line-height: 1.7;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) li + li {
  margin-top: 0.45em;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) a {
  color: var(--primary);
  font-weight: 600;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

:is(.kennisbank_styles, .kennisbank_styles.brxe-post-content, .kennisbank_styles .brxe-post-content) blockquote {
  margin-inline: 0;
  padding-left: 1em;
  border-left: 3px solid var(--primary);
  color: var(--ink);
  font-size: var(--text-p1);
  line-height: 1.65;
}

/* Wide article tables scroll inside their own figure instead of widening the
 * page. This preserves every column on small screens. */
.kennisbank_styles figure.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dzv-slider-nav-top-right {
  --dzv-slider-nav-offset-top: -110px;
  --dzv-slider-nav-gap: 24px;
  --dzv-slider-nav-size: 68px;

  overflow: visible;
}

.dzv-slider-nav-top-right .splide__arrows {
  position: absolute;
  top: var(--dzv-slider-nav-offset-top);
  right: 0;
  display: flex;
  gap: var(--dzv-slider-nav-gap);
  z-index: 5;
}

.dzv-slider-nav-top-right .splide__arrow {
  position: static;
  width: var(--dzv-slider-nav-size);
  height: var(--dzv-slider-nav-size);
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  background: #fff;
  color: #102033;
  opacity: 1;
  transform: none;
}

.dzv-slider-nav-top-right .splide__arrow--prev,
.dzv-slider-nav-top-right .splide__arrow--next {
  inset: auto;
}

.dzv-slider-nav-top-right .splide__arrow svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

@media (max-width: 767px) {
  /* Keep text controls at Safari's minimum focus size without disabling zoom. */
  :where(.brxe-form, .brxe-brf-pro-forms) :is(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
    select,
    textarea
  ) {
    font-size: 16px;
  }

  /* Place navigation after the slide so it cannot overlap section headings. */
  .dzv-slider-nav-top-right .splide__arrows {
    position: static;
    justify-content: flex-end;
    margin-top: 20px;
    gap: 12px;
  }
}

.dzv-project-meta-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  color: currentColor;
  flex: 0 0 auto;
  vertical-align: -0.125em;
}

img.dzv-project-meta-icon {
  object-fit: contain;
}

.dzv-project-work-list {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dzv-project-work-list > li:not(.dzv-project-work-list__item) {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

.dzv-project-work-list > li:not(.dzv-project-work-list__item)::before {
  content: "";
  width: 9px;
  height: 15px;
  margin-top: 0.18em;
  margin-left: 4px;
  border: solid var(--primary, #44c13c);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

@media (min-width: 768px) {
  .dzv-footer-accordion.brxe-accordion-nested,
  .dzv-footer-accordion.brxe-accordion,
  .dzv-footer-accordion .brxe-accordion,
  .dzv-footer-accordion .brxe-accordion-nested {
    gap: 0;
  }

  .dzv-footer-accordion.brxe-accordion-nested > .brxe-block,
  .dzv-footer-accordion.brxe-accordion > li,
  .dzv-footer-accordion .brxe-accordion > li,
  .dzv-footer-accordion .brxe-accordion-nested > .brxe-block {
    cursor: default;
  }

  .dzv-footer-accordion .accordion-title-wrapper {
    cursor: default;
    pointer-events: none;
  }

  .dzv-footer-accordion .accordion-title-wrapper .brx-icon-collapsed,
  .dzv-footer-accordion .accordion-title-wrapper .brx-icon-expanded,
  .dzv-footer-accordion .accordion-title-wrapper .brx-icon-transform,
  .dzv-footer-accordion .accordion-title-wrapper [isaccordionicon],
  .dzv-footer-accordion .accordion-title-wrapper .icon,
  .dzv-footer-accordion .accordion-title-wrapper .brxe-icon:last-child,
  .dzv-footer-accordion .accordion-title-wrapper svg:last-child {
    display: none;
  }

  .dzv-footer-accordion .accordion-content-wrapper {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible !important;
    visibility: visible !important;
  }
}