/*
 * 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;
}