/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  strong {
    font-weight: inherit;
    /* background: linear-gradient(90deg, #0666A4 -3.7%, #5FC3E1 100%); */
    background: linear-gradient(90deg, #008EC8 0%, #5FC3E1 41.83%);
    background-size: 200% 200%;
    background-position: 0% 50%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    padding-right: 0.25ch;
  }
}

.h3{
	margin-bottom: 16px;
    font-size: var(--32-24);
	font-family: "Gloock";
    font-weight: 400;
    line-height: 100%;
}

body{
  max-width: 100vw;
  overflow-x: hidden;
}

body.single:not(.single-dienst) .brxe-text {
  h2, h3 {
    font-size: var(--32-24);
  }

  p ~ h2 {
    margin-top: 56px;
  }

  ul li::before {
    background-color: var(--Wit);
  }

  li {
    color: var(--donker-blauw);
  }
}

.vacancy-icon svg {
  fill: transparent !important;
}

.bricks-button .ion-md-arrow-forward {
  background: var(--geel);
  height: 32px;
  width: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bricks-button:has(i) {
  padding: 10px 10px 10px 16px;
}

.bricks-button i::before{
  transition: all 0.3s cubic-bezier(.25, .46, .45, .94);;
}

.bricks-button:hover i::before{
  transform:rotate(-45deg);
}

.brxe-button:hover i.ion-md-arrow-forward::before {
  transform: rotate(-45deg);
  transition: var(--Animatie);
}

.brxe-button i.ion-md-arrow-forward::before {
  transition: var(--Animatie);
}

.button-white:hover span{
  color:#fff;
}

.brxe-text ul {
  list-style: none;
  padding-left: 0px;
  margin: 24px 0px 0px 0px;
}

.brxe-text ul li {
  position: relative;
  list-style: none;
  padding-left: 54px;
  min-height: 38px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  transition: var(--Animatie);
}

.brxe-text ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  background-color: #F1F1E6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none'%3E%3Cpath d='M12.75 0.75L4.5 9L0.75 5.25' stroke='%231E2749' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px 10px;
  transition: all 0.1s cubic-bezier(.25, .46, .45, .94);
}

.animating-cards-wrapper {
  min-height: 0;
  padding-top: 160px;
  padding-bottom: 160px;
  display: flex;
  align-items: center;
}

/* Het Block om de USP's heen wordt de stapel */
.stack-cards {
  position: relative;
  min-height: 216px;
}

/* Elke USP-kaart absoluut over elkaar heen */
.stack-cards > * {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;            /* geen bottom → kaart krijgt inhoudshoogte, meetbaar */
  will-change: transform;
  backface-visibility: hidden;
}

/* Content / Image */
.bg-white h2 {
  color: var(--donker-blauw);
}

.bg-white .brxe-text {
  color: var(--body-tekst);
}

.bg-white .btn-1 {
  background-color: var(--donker-blauw) !important;
  color: var(--Wit) !important;
}

.bg-light-blue h2 {
  color: var(--Wit);
}

.bg-light-blue h2 strong {
  color: var(--Wit);
  background: unset;
  -webkit-text-fill-color: var(--Wit);
}

.bg-light-blue .brxe-text {
  color: var(--Wit);
}

.bg-light-blue .bricks-button,
.bg-transparent .bricks-button:not(.bricks-background-secondary) {
  background: var(--donker-blauw) !important;
  color: var(--Wit) !important;
}

.bg-transparent h2 {
  color: var(--donker-blauw);
}

.bg-transparent .brxe-text {
  color: var(--body-tekst);
}

.bg-dark-blue .btn-2:hover {
  background-color: var(--Wit) !important;
  color: var(--donker-blauw) !important;
}

.gform_required_legend,
.gform_validation_errors,
.gfield_validation_message {
  display: none !important;
}

.single-evenement .gform_title {
  display: none ;
}

.gform_fields {
  gap: 16px !important;
}

.gfield_label span {
  padding-right: 0px !important;
}

.gfield_label  {
  font-size: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  line-height: 120% !important;
  color: var(--donker-blauw) !important;
  margin-bottom: 16px !important;
  font-weight: 400 !important;
}

.gfield_required {
  color: var(--donker-blauw) !important;
}

.gform_fields input:not([type="checkbox"]), 
.gform_fields textarea {
  height: 56px !important;
  padding: 16px !important;
  background: #F1F1E6 !important;
  color: var(--body-tekst) !important;
  border-radius: 8px !important;
  border: solid 1px rgba(0,0,0,.1) !important;
  outline: unset !important;
  stroke: unset !important;
  box-shadow: unset !important;
}

.gform_wrapper .gform_body input[type="checkbox"]{
    @media screen and (max-width: 767px) {
      width:18px !important;
      height:18px !important;
    }
}

.gform_fields .gfield_error input,
.gform_fields .gfield_error .ginput_container_consent input,
.gform_fields .gfield_error textarea {
  border: 1px solid red !important;
}

.gform_fields input[type="checkbox"] {
  height: 24px !important;
  width: 24px !important;
  background: unset !important;
  border: solid 1px rgba(0,0,0,.1) !important;
  border-radius: 4px !important;
  outline: unset !important;
  stroke: unset !important;
  box-shadow: unset !important;
  cursor: pointer !important;
}

input[type="checkbox"]::before {
  color: var(--donker-blauw) !important;
}

.gfield_consent_label,
.gchoice label {
  cursor: pointer !important;
  color: rgba(0,0,0,.5) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  line-height: 120% !important;
}

.gchoice,
.ginput_container_consent {
  align-items: center !important;
}

.gfield_consent_label a {
  color: #5FC3E1 !important;
  font-weight: 800 !important;
}

.gform_fields input:not([type="checkbox"])::placeholder, 
.gform_fields textarea::placeholder {
  color: rgba(0,0,0,.5) !important;
}

.gform_button  {
  font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 100% !important;
    padding-top: 18px !important;
    padding-right: 32px !important;
    padding-bottom: 18px !important;
    padding-left: 32px !important;
    border-radius: 16px !important;
    background-color: var(--geel) !important;
    color: var(--donker-blauw) !important;
    outline: unset !important;
  stroke: unset !important;
  box-shadow: unset !important;
}

.search-wrapper-desk {
  cursor: pointer !important  ;
}

.search-wrapper-desk .brxe-search {
  border-radius: 8px;
  max-width: unset !important;
  width: 0 !important;
  overflow: hidden;
  right: 64px !important;
  transition: var(--Animatie);
  background: var(--Wit) !important;
}

.search-wrapper-desk .brxe-search input {
  width: 100%;
}

.search-wrapper-desk.active .brxe-icon {
  border-color: var(--donker-blauw) !important;
}

.search-wrapper-desk.active .brxe-search input {
  border: solid 1px var(--donker-blauw) !important;
}

.search-wrapper-desk .brxe-search input:focus {
  outline: unset !important;
  stroke: unset !important;
}

.search-wrapper-desk.active .brxe-search {
  border-radius: 8px;
  z-index: 1000;
  width: 20vw !important;
}

.search-wrapper-desk.active {
  z-index: 10;
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.1);
  border-radius: 16px; /* optioneel, zodat de "uitsparing" mooi afgerond is */
}

.splide__arrow{
  transition: all 0.3s var(--Animatie);
}

/* Header - Resnav */

#brxe-owditk .bricks-nav-menu > .current-menu-ancestor > .brx-submenu-toggle > a{
  color:#1E2749 !important;
}

#brx-header {
  display: initial;
  z-index: 10;


  .brxe-offcanvas {
    &.brx-open {
      opacity: 100%;
    }

    .sub-menu {
      padding-top: 1.5rem;
      padding-bottom: 1.5rem;

      .bricks-menu-item {
        &:not(:last-child)  {
          margin-bottom: 1rem;
        }
      }
    }

    @media screen and (max-width: 991px) {
      #brxe-ihoeiv {
        svg {
          path {
            stroke: inherit;
          }
        }
      }
    }
  }

  .brxe-toggle {
    .brxa-wrap {
      width: 1rem;
      height: 1rem;

      display: flex;
      justify-content: center;
      align-items: center;
    }

    .brxa-inner {
      --brxe-toggle-bar-width: 1rem;

      display: inline-flex;
      justify-content: center;
      align-items: center;

      position: relative;
      top: unset;
      margin-top: unset;

      background-color: transparent;

      &:before {
        top: -3px;

        transition: var(--Animatie);
      }

      &:after {
        bottom: -3px;

        transition: var(--Animatie);
      }
    }

    &.is-active {
      .brxa-inner {
        &:before {
          top: 0px;
          transform: rotate(45deg);
        }

        &:after {
          bottom: 0px;
          transform: rotate(-45deg);
        }
      }
    }
  }

  .brxe-nav-nested {
    #brxe-xvynik, .brxe-xvynik {
      .bricks-nav-menu {
        > .menu-item {
          padding: 0.75rem 1rem;
          background: var(--carbon-fade);
          border-radius: 0.5rem;
          border: 0.5px solid rgba(212, 212, 212, 0.5);

          .brx-submenu-toggle {
            justify-content: space-between;

            button {
              width: 2.5rem;
              height: 2.5rem;
              display: flex;
              align-items: center;
              justify-content: center;

              svg {
                transition: var(--Animatie);
              }
            }
          }

          &.menu-item-has-children {
            max-height: var(--cHeight);
            transition: var(--Animatie);
            background: var(--Wit);

            overflow: clip;

            &.open {
              max-height: var(--fHeight);
            }
          }

          &:not(.menu-item-has-children) {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            background: var(--Wit);
            
            &::after {
              content: "";
              display: block;
              width: 2.5rem;
              height: 2.5rem;
              background-repeat: no-repeat;
              background-size: 1.5rem;
              background-position: center;
              background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7 17L17 7' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7 7H17V17' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            }
          }

          .sub-menu {
            display: block !important;
            padding: 0rem;
            opacity: 100%;
            visibility: visible;
            pointer-events: auto;

            margin-top: 0.25rem;

            .menu-item {
              padding-top: 0.75rem;
              padding-bottom: 0.75rem;

              &:not(:last-child) {
                border-bottom: 0.5px solid rgba(212, 212, 212, 0.50);
                margin-bottom: 0rem;
              }

              a {
                display: flex;
                align-items: center;
                justify-content: space-between;

                &::after {
                  content: "";
                  display: block;
                  width: 2.5rem;
                  height: 2.5rem;
                  border-radius: 0.4375rem;
                  background-color: var(--light-purple);
                  background-repeat: no-repeat;
                  background-size: 1rem;
                  background-position: center;
                  background-color: var(--geel);
                  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17' fill='none'%3E%3Cpath d='M4.74585 11.5254L11.5255 4.74576' stroke='black' stroke-width='1.35593' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M4.74585 4.74576H11.5255V11.5254' stroke='black' stroke-width='1.35593' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                }
              }
            }
          }
        }
      }
    }
  }
}

#reviews .splide__arrows{
  @media screen and (max-width: 767px) {
    display:none;
  }
}

.news-item:hover .brxe-button{
  background-color: var(--Wit) !important;
  color:#1E2749 !important;

  i::before{
    transform: rotate(-45deg);
  }
}

/* Footer */
#brx-footer {
  --cHeight: 52px;
    --fHeight: 100%;

    & .brxe-nav-menu {
      @media screen and (max-width: 991px) {
        width: 100%;
          & .bricks-nav-menu-wrapper {
          width: 100%;
        }
      }
      & #menu-footer {
        > li {
          &.open {
            max-height: var(--fHeight);
          }
          @media screen and (max-width: 991px) {
                padding: 12px 0px;
                height: 100%;
                max-height: var(--cHeight);
                transition: var(--Animatie);
                overflow: clip;
                padding-bottom: 1rem;
                border-top: 1px solid rgba(57, 57, 57, 0.2);
                border-bottom: 1px solid rgba(57, 57, 57, 0.2);
            }

            &:last-child {
              @media screen and (max-width: 991px) {
                border-top: unset;
            }
            }
          }
          
        }

        li {
          &:last-child {
          ul {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 48px;
          }
        }
        }

        & .brx-submenu-toggle {
          justify-content: space-between;
          margin-bottom: 16px;
          a {
            &:hover {
              color: unset !important;
            }
            pointer-events: none !important;
          }
            button {
              display: none;
              @media screen and (max-width: 991px) {
                display: flex;
              }
                
            }
        }
        .sub-menu {
          display: flex;
          flex-flow: column;
          padding: 0px;
            position: relative;
            top: unset;
            visibility: unset;
            opacity: 100%;
            background-color: transparent;
            white-space: nowrap;
        }
    } 
}

.brxe-breadcrumbs {
  display: flex;
  overflow: hidden;
  flex-wrap:nowrap;
}

.brxe-breadcrumbs a:last-child,
.brxe-breadcrumbs span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 70vw; /* pas aan naar wens */
}

.dienst-card:hover{
  .h3{
    color:#ffffff !important;
  }
}

.highlighted-news .splide__pagination  {
  display: none !important;
}

@media screen and (max-width: 767px) {
    html {
      overflow-x: hidden;
    }
    
    .highlighted-news .splide__pagination  {
      display: unset !important;
    }
  }