/*
Theme Name: Monkberry Child Theme
Template: extendable
Author: Monkberry
Author URI: https://monkberry.be
Description: Gebaseerd op extendable theme. Gewoon klein beetje extra css.
Requires at least: 6.9
Tested up to: 6.9
*/
/* ----------------------------------------------------------------------*/
/* - CUSTOM HEADER STYLING
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
/* - BREAKPOINTS
/* ----------------------------------------------------------------------*/
/* ----------------------------------------------------------------------*/
/* - CUSTOM HEADER STYLING
/* ----------------------------------------------------------------------*/
/* ----------------------- 1.0 CLEARFIX ----------------------- */
/* ----------------------- 1.1 IMAGES ----------------------- */
/*
 *  Set retina-ready bg-image. pastes @2x before extension on retina devices
 *  In most instances it's ideal to set the background-size to the dimensions
 *  of the non-retina image
 *
 *  $name = path to the image without extension
 *  $w = background-size width
 *  $h = background-size height
 *  $ext = extension (default = png)
 */
/*
 *  Sets up block that purely display a bg-image.
 *  Doesn't set the bg-image itself. Use retina-image for that
 *
 *  Give width and height for dimension and background-size
 *  Optional: repeat (background-repeat) default = no-repeat;
 *  Optional: hide text width overflow and text-indent; default = show text
 */
header .header--gb {
  position: relative;
  z-index: 1000;
  padding-bottom: 18px !important;
}

header .header--gb:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 100%;
  right: 0;
  height: 20px;
  background: url("/wp-content/themes/monkberry-childtheme/images/ragged-edges--green.svg") repeat center bottom;
  background-size: auto 43px;
}

header .header--gb h1.wp-block-site-title a {
  display: block;
  width: 89px;
  height: 115px;
  background-size: 89px 115px;
  background-repeat: no-repeat;
  text-indent: -999px;
  overflow: hidden;
  background: url("/wp-content/themes/monkberry-childtheme/images/logo.svg") no-repeat left top;
  background-size: contain;
  margin-bottom: -70px;
  position: relative;
  z-index: 10;
}
@media (min-width: 1024px) {
  header .header--gb h1.wp-block-site-title a {
    width: 109px;
    height: 142px;
    margin-top: -22px;
    margin-bottom: -77px;
  }
}
header .header--gb li.current-menu-item > a {
  font-weight: 700;
}

.wp-block-group.is-layout-flow {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.wp-block-navigation .wp-block-navigation__submenu-container {
  padding: 7px;
  border-radius: 15px;
  border-top: 10px solid #324232 !important;
}

.aioseo-breadcrumbs {
  text-align: center;
}

/* ----------------------------------------------------------------------*/
/* - CUSTOM FOOTER STYLING
/* ----------------------------------------------------------------------*/
footer .is-layout-flex .wp-block-image {
  margin-top: -105px;
  position: relative;
  z-index: 31;
}

/* ----------------------------------------------------------------------*/
/* - FOOTER IN LICHTE KLEUR
/* ----------------------------------------------------------------------*/
.page-id-277 footer > .wp-block-group {
  background: #1d241d !important;
}
.page-id-277 footer > .wp-block-group.tree-divider-top:before {
  background-image: url("/wp-content/themes/monkberry-childtheme/images/bomen--dark.svg");
}

/* ----------------------------------------------------------------------*/
/* - CUSTOM EDGES AND PATTERNS STYLING
/* ----------------------------------------------------------------------*/
.ragged-edges {
  position: relative;
}
.ragged-edges:before {
  content: " ";
  position: absolute;
  z-index: 50;
  left: 0;
  bottom: 0;
  right: 0;
  height: 25px;
  background: url("/wp-content/themes/monkberry-childtheme/images/ragged-edges--beige.svg") repeat center top;
  background-size: auto 43px;
}

.ragged-edges--light:before {
  background-image: url("/wp-content/themes/monkberry-childtheme/images/ragged-edges--beige-light.svg");
}

.ragged-edges--flipped:before {
  bottom: -25px;
  transform: scale(1, -1);
}

.ragged-edges--beneath {
  bottom: 0;
}

.tree-divider-top:before {
  content: " ";
  position: absolute;
  z-index: 10;
  left: 0;
  top: -40px;
  right: 0;
  height: 65px;
  background: url("/wp-content/themes/monkberry-childtheme/images/bomen.svg") repeat center top;
  background-size: auto 65px;
}

.treeline-pattern {
  background-image: url("/wp-content/themes/monkberry-childtheme/images/boomlijnen.svg");
  background-size: 100% auto;
}

.background-overlay-top {
  position: absolute !important;
  left: 0;
  top: -300px;
  right: 0;
  bottom: 0;
  z-index: -1;
  max-width: none;
  margin: 0 !important;
  background-color: #324232;
}
.background-overlay-top.tree-divider-inverse:after {
  content: " ";
  position: absolute;
  z-index: 50;
  left: 0;
  top: 0;
  right: 0;
  height: 34px;
  background: url("/wp-content/themes/monkberry-childtheme/images/bomen-inverse.svg") repeat center top;
  background-size: auto 34px;
}

body.block-editor-page .background-overlay-top {
  top: 0;
  z-index: 0;
}

/* ----------------------------------------------------------------------*/
/* - CUSTOM VIDEOPLAYER STYLING
/* ----------------------------------------------------------------------*/
.video-js, .video-js video {
  border-radius: 15px;
  overflow: hidden;
}

.video-js .vjs-big-play-button {
  font-size: 8em;
  line-height: 1.5em;
  height: 1.5em;
  width: 1.5em;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.3);
  margin-top: -0.75em;
  margin-left: -0.75em;
  box-shadow: 0 0 100px 10px rgba(0, 0, 0, 0.6);
}

.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
  color: transparent;
  -webkit-text-stroke: 3px #fff;
}

.video-js .vjs-big-play-button:focus, .video-js:hover .vjs-big-play-button {
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.3);
}
.video-js .vjs-big-play-button:focus .vjs-icon-placeholder:before, .video-js:hover .vjs-big-play-button .vjs-icon-placeholder:before {
  color: #fff;
}

/* ----------------------------------------------------------------------*/
/* - CUSTOM BUTTONS STYLING
/* ----------------------------------------------------------------------*/
.buttons-sticky-bottom {
  position: relative;
  padding-bottom: 50px;
}
.buttons-sticky-bottom .wp-block-buttons {
  position: absolute;
  z-index: 2;
  left: 0;
  bottom: -20px;
  right: 0;
}

/* ----------------------------------------------------------------------*/
/* - CUSTOM PARALLAX STYLING
/* ----------------------------------------------------------------------*/
.wp-block-psb-parallax {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.wp-block-psb-parallax .psbParallaxImg {
  height: 100vh !important;
}

/* ----------------------------------------------------------------------*/
/* - CUSTOM TEXT STYLING
/* ----------------------------------------------------------------------*/
.text-columns--2 {
  columns: 2;
}

.text-columns--3 {
  columns: 3;
}

.text-columns--4 {
  columns: 4;
}

.text--columns--data {
  columns: 100px 3;
}

/* ----------------------------------------------------------------------*/
/* - CUSTOM OVERLAY STYLING
/* ----------------------------------------------------------------------*/
.salamander-overlay {
  position: relative;
}
.salamander-overlay:before {
  content: " ";
  display: block;
  width: 140px;
  height: 130px;
  position: absolute;
  z-index: 100;
  right: -35px;
  bottom: -45px;
  background: url("/wp-content/themes/monkberry-childtheme/images/salamander.svg") no-repeat left top;
  background-size: contain;
  pointer-events: none;
}

.salamander-overlay--green:before {
  background-image: url("/wp-content/themes/monkberry-childtheme/images/salamander--green.svg");
}

@media (min-width: 1024px) {
  .salamander-overlay:before {
    width: 280px;
    height: 265px;
    right: -70px;
    bottom: -80px;
  }
}
.emblem-overlay {
  position: relative;
}
.emblem-overlay:before {
  content: " ";
  display: block;
  width: 600px;
  height: 600px;
  position: absolute;
  z-index: 0;
  left: -210px;
  top: 50%;
  margin-top: -320px;
  background: url("/wp-content/themes/monkberry-childtheme/images/gb-lines--wit.svg") no-repeat left top;
  background-size: contain;
  pointer-events: none;
}

.emblem-overlay--green:before {
  display: none;
}

@media (min-width: 1140px) {
  .emblem-overlay--green:before {
    display: block;
    background-image: url("/wp-content/themes/monkberry-childtheme/images/gb-lines--groen.svg");
    z-index: 105;
    width: 410px;
    height: 530px;
  }
  .emblem-overlay--right:before {
    left: auto;
    right: -170px;
  }
  .emblem-overlay--top:before {
    top: 0;
  }
}