/*
 * Theme Name:   BURO210 - Child Theme
 * Theme URI:    https://www.buro210.nl
 * Description:  BURO210 - Breakdance Child Theme
 * Author:       BURO210
 * Author URI:   https://www.buro210.nl
 * Template:     breakdance-zero-theme
 * Version:      1.0.0
 * Text Domain:	 buro210
 */


:root {
    --primary: #4A0A26;
}
html, body {
    overflow-x: hidden !important;
}


/* ==============================================
    Top header /* inklappen bij scroll
    - JavaScript in breakdance -> Settings -> Custom Code
   ============================================== */
#top-header{
  transition: opacity 200ms ease, max-height 200ms ease, padding 200ms ease, margin 200ms ease;
  max-height: 120px;
  opacity: 1;
  overflow: hidden;
}

.header--top-hidden #top-header {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  pointer-events: none;
}

/* ==============================================
    Cursor hover effect
   ============================================== */
/* Case slider */
.swiper.swiper-coverflow,
.swiper.swiper-coverflow .swiper-wrapper,
.swiper.swiper-coverflow .swiper-slide,
.swiper.swiper-coverflow .swiper-slide a {
    cursor: 
        url('/wp-content/themes/buro210-child/assets/img/custom-cursor.png') 16 16,
        grab !important;
}
.swiper.swiper-coverflow {
    cursor: 
        url('/wp-content/themes/buro210-child/assets/img/custom-cursor.png') 16 16,
        grab !important;
}

/* Cursor veranderen tijdens drag */
.swiper.swiper-coverflow:active {
    cursor: 
        url('/wp-content/themes/buro210-child/assets/img/custom-cursor.png') 16 16,
        grab !important;
}
.swiper.swiper-coverflow .swiper-slide {
    cursor: grab;
}

.swiper.swiper-coverflow .swiper-slide:active {
    cursor: grab;
}

/* Review slider */
.swiper.swiper-initialized,
.swiper.swiper-initialized .swiper-wrapper {
    cursor: 
        url('/wp-content/themes/buro210-child/assets/img/custom-cursor.png') 16 16,
        grab !important;
}

/* STORY SLIDER – cursor uitschakelen */
#story-slider .swiper,
#story-slider .swiper-wrapper,
#story-slider .swiper-slide,
#story-slider .swiper-slide a {
    cursor: auto !important;
}


/* ==============================================
    Highlighted tekst on WYSWYG
   ============================================== */
.custom-highlighted,
span.custom-highlighted {
    padding: .23em .4em;
    border-radius: 1em;
    font-weight: inherit !important;

    &.highlighted-white {
      background-color: #FFF;
      color:#4A0A26;
    }
    &.highlighted-pink {
      background-color:#ED0579;
      color:#FFF;
    }
    &.highlighted-purple {
      background-color:#4A0A26;
      color:#FFF;
    }
    &.highlighted-green {
      background-color:#B5BA00;
      color:#FFF;
    }
  }


/* ==============================================
   FacetWP
   ============================================== */
/******* FacetWP dropdown items *******/
.bde-facetwpfacet.facet-options {
    width: auto !important;
}
.facetwp-type-fselect {
  margin-bottom: 0 !important;
  width: fit-content !important;
}
.fs-label-wrap {
  background-color: transparent !important;
  border-radius: 10px !important; 
  padding: 5px 25px 7px 15px !important;
  line-height: 28px !important;
}
.facetwp-facet-doel_select .fs-wrap {
  width: 300px !important;
}
.fs-wrap {
  width: 190px !important;
  line-height: 1.2 !important;
}
.fs-label {
  padding: 0 !important;
  color: #FFF;
}
.fs-arrow {
  border-top: 5px solid #fff !important;
  right: 15px !important;
}

.fs-dropdown {
  border-radius: 0 0 10px 10px;
  background-color: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.fs-search {
  display: none !important;
}
.fs-options .fs-option:hover {
  background-color: #ED0579 !important;
  color: #FFF !important;
  .fs-option-label {
    color: #FFF !important;
  }
  &:last-of-type {
    border-radius: 0 0 10px 10px !important;
  }
}

.fs-option-label {
  color: #4A0A26 !important;
}

.fs-wrap.single .fs-option.selected {
  background-color: #ED0579 !important;
  .fs-option-label {
    color: #FFF !important;
  }
  &:last-of-type {
    border-radius: 0 0 10px 10px !important;
  }
}

/******* FacetWP pagination *******/
.bde-facetwpfacet.facet-pagination {
    margin-top: 35px;
    margin-bottom: 0 !important;
    margin-left: auto;
}
.facetwp-facet.facetwp-type-pager {
    margin-bottom: 0 !important;
}
.facetwp-facet.facetwp-type-pager .facetwp-pager {
    width: fit-content;
    margin-left: auto;
}
.facetwp-pager a {
    font-size: 14px;
    font-weight: 400;

    &:hover,
    &.active {
        color: var(--bde-links-color-hover);
    }

    &.next,
    &.prev {
        font-size: 11px;
    }
}


/* ==============================================
   HOT FIX VOOR ONBEKENDE STYLING OP 
   ============================================== */
.breakdance .term,
.breakdance .taxonomy {
  color: inherit !important;
  background-color: inherit !important;
}

#nf-form-2-cont .nf-form-fields-required {
  color: var(--bde-background-color);
  font-size: 11px;
}
#nf-form-2-cont .nf-progress-container , #nf-form-2-cont .nf-fu-progress-bar {
  border: none;
  margin: 20px 0;
  background-color: #DFDFDF;
  border-radius: 10px;
}
#nf-form-2-cont .nf-progress {
  border-radius: 10px;
  background: linear-gradient(90deg, #ED0579 0%, #FC4D16 100%);
}
#nf-form-2-cont .nf-fu-progress {
  border-radius: 10px;
}
#nf-form-2-cont .nf-fu-progress-bar.nf-fu-progress-bar-success {
    background-color: #ED0579;
    background: linear-gradient(90deg, #ED0579 0%, #FC4D16 100%);
    margin: 0;
}
#nf-form-2-cont .nf-label-span , #nf-form-2-cont .nf-field-label {
  color: var(--bde-background-color);
  font-size: 15px;
  font-weight: 500;
}
#nf-form-2-cont .nf-field-element input[type="text"] , #nf-form-2-cont .nf-field-element input[type="email"] , #nf-form-2-cont .nf-field-element input[type="tel"] {
  background-color: #F7F6F2;
  padding: 10px 5px;
  border-radius: 5px;
  border: none;
  color: var(--bde-background-color);
}
#nf-form-2-cont .nf-field-element input[type="text"]:focus , #nf-form-2-cont .nf-field-element input[type="email"]:focus , #nf-form-2-cont .nf-field-element input[type="tel"]:focus {
  outline-color: #ED0579;
}
#nf-form-2-cont .nf-field-element textarea {
  background-color: #F7F6F2;
  padding: 10px 5px;
  border-radius: 5px;
  border: none;
  color: var(--bde-background-color);
}
#nf-form-2-cont .nf-field-element li input[type="radio"] , #nf-form-2-cont input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  border: 8px solid #F7F6F2;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}
#nf-form-2-cont .nf-field-element li input[type="radio"]:checked , #nf-form-2-cont input[type="checkbox"].nf-checked {
  border: 8px solid var(--bde-brand-primary-color);
}
#nf-form-2-cont .nf-field-element li label {
  text-align: left;
  color: var(--bde-background-color);
}

#nf-form-2-cont .nf-form-content .nf-next {
  background-color: transparent;
  box-shadow: none;
  padding: 12px 18px;
  border: 1px solid var(--bde-background-color);
  border-radius: 5px;
  font-size: 15px;
  color: var(--bde-background-color);
  cursor: pointer;
  transition: all .3s ease-in-out;
}
#nf-form-2-cont .nf-form-content .nf-previous , #nf-form-2-cont .nf-fu-button-cancel {
  background-color: transparent;
  box-shadow: none;
  border: none;
  font-size: 15px;
  color: #989898;
  cursor: pointer;
  transition: all .3s ease-in-out;
  font-weight: 500;
}
#nf-form-2-cont .nf-form-content .nf-next:hover {
  background-color: var(--bde-background-color);
  color: #FFF;
}
#nf-form-2-cont .nf-form-content .nf-previous:hover {
  color: var(--bde-background-color);
}
#nf-form-2-cont .nf-error-msg {
  text-align: left;
  font-size: 12px;
}
#nf-form-2-cont .btn.nf-fu-fileinput-button {
  background-color: transparent;
  box-shadow: none;
  padding: 5px 18px;
  border: 1px solid var(--bde-background-color);
  border-radius: 5px;
  font-size: 15px;
  color: var(--bde-background-color);
  cursor: pointer;
  transition: all .3s ease-in-out;
  text-align: left;
}

#nf-form-2-cont .nf-field-element select {
  width: 100%;
  padding: 12px 44px 12px 14px;
  border: none;
  border-radius: 5px;
  background-color: #F7F6F2;
  font-size: 16px;

  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
#nf-form-2-cont .nf-field-element {
  position: relative
}
#nf-form-2-cont .list-select-wrap .nf-field-element::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
}
#nf-form-2-cont .files_uploaded p {
  color: var(--bde-background-color);
  font-size: 13px;
}
#nf-form-2-cont .files_uploaded p .delete {
  font-size: 11px;
}
#nf-form-2-cont .bde-button__button {
  text-align: right;
  border: 1px solid var(--bde-background-color);
  border-radius: 9999px;
  background-color: transparent;
  font-size: 16px;
  font-weight: 400;
  padding: 15px 15px;
  color: var(--bde-background-color);
  transition: all 0.3s ease-in-out;
}
#nf-form-2-cont .bde-button__button:hover {
  background-color: var(--bde-background-color);
  color: #FFF;
}
#nf-form-2-cont .nf-response-msg p {
  color: var(--bde-background-color);
}