/*
 Theme Name:   Taal is moeilijk
 Theme URI:    https://lsart.nl/
 Description:  Child theme for taal is moeilijk
 Author:       LSART
 Author URI:   https://lsart.nl
 Template:     bricks
 Version:      1.1
 Text Domain:  lsart
*/

:root {
  --main: rgba(245, 225, 186, 0.3);
}

h1 {
    color: #5EC2D2 !important;
}
.flexible-content + .flexible-content {
    padding-top: 120px;
}
.flexible-content:first-of-type {
    padding-top: 50px;
}
.bricks-background-primary, .bricks-background-secondary {
    transform-origin: center;
    transition: transform 0.2s ease;
}
.bricks-background-primary:hover, .bricks-background-secondary:hover {
    animation: button-squish 0.55s ease;
}

.bricks-background-primary:hover::after, .bricks-background-secondary:hover:after{
  content:"";
	animation: accent-jump 0.75s
  cubic-bezier(0.34, 1.56, 0.64, 1);
}
#menu-hoofdmenu .menu-item {
    position: relative;

}
#menu-hoofdmenu .menu-item a{
        z-index: 1;
        position: relative;
}
#menu-hoofdmenu .menu-item::after {
  content: "";
  position: absolute;

  left: -6px;
  right: -6px;
  bottom: -2px;
  height: 10px;

  background: #fef4d8;
  border-radius: 10px;

  z-index: 0;

  transform: scaleX(0) rotate(-2deg);
  transform-origin: left center;

  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}

#menu-hoofdmenu .menu-item:hover::after,
#menu-hoofdmenu .menu-item.current-menu-item::after {
  transform: scaleX(1) rotate(-2deg);
}



#menu-hoofdmenu .menu-item.current-menu-item::before {
  content: "";
  position: absolute;

  width: 12px;
  height: 12px;

  right: -15px;
  top: -5px;

  background: #fdc72c;

  clip-path: polygon(
    50% 0,
    62% 38%,
    100% 50%,
    62% 62%,
    50% 100%,
    38% 62%,
    0 50%,
    38% 38%
  );

  animation: menu-pop 0.45s cubic-bezier(.34,1.56,.64,1);
}

@keyframes menu-pop {
  0% {
    transform: scale(0) rotate(-30deg);
  }

  70% {
    transform: scale(1.25) rotate(8deg);
  }

  100% {
    transform: scale(1) rotate(0);
  }
}


@keyframes accent-jump {
    0% {
      transform: translate(0, 0) rotate(0deg) scale(1);
    }
    
    30% {
      transform:
        translate(12px, -5px)
        rotate(18deg)
        scale(1.18);
    }
    
    55% {
      transform:
        translate(-4px, 3px)
        rotate(-8deg)
        scale(0.94);
    }
    
    75% {
      transform:
        translate(2px, -3px)
        rotate(4deg)
        scale(1.04);
    }
    
    100% {
      transform:
        translate(0, 0)
        rotate(0deg)
        scale(1);
    }
}

@keyframes button-squish {
    0% {
      transform: scale(1);
    }
    
    30% {
      transform: scale(0.96, 1.04);
    }
    
    55% {
      transform: scale(1.03, 0.98);
    }
    
    100% {
      transform: scale(1);
    }
}

@supports (
    clip-path: shape(
      from 50% 0%,
      curve to 95.51% 0.69% with 77.53% 0% / 85.11% 0%,
      close
    )
  ) {
    .squircle {
      border-radius: 0;

      clip-path: shape(
        from 61.51% 0%,

        curve to 95.51% 0.69%
          with 77.53% 0% / 85.11% 0%,

        curve to 99.58% 11.03%
          with 98.31% 1.03% / 99.30% 4.14%,

        curve to 100% 50%
          with 100% 19.31% / 100% 35.87%,

        curve to 99.58% 88.97%
          with 100% 64.13% / 100% 80.69%,

        curve to 95.51% 99.31%
          with 99.30% 95.86% / 98.31% 98.97%,

        curve to 61.51% 100%
          with 85.11% 100% / 76.96% 100%,

        curve to 4.49% 99.31%
          with 46.06% 100% / 14.90% 100%,

        curve to 0.42% 88.97%
          with 1.69% 98.97% / 0.70% 95.86%,

        curve to 0% 50%
          with 0% 80.69% / 0% 64.49%,

        curve to 0.42% 11.03%
          with 0% 35.51% / 0% 19.31%,

        curve to 4.49% 0.69%
          with 0.70% 4.14% / 1.69% 1.03%,

        curve to 61.51% 0%
          with 14.89% 0% / 45.50% 0%,

        close
      );
    }
  }

@media screen and (max-width: 550px) {
    .flexible-content + .flexible-content {
        padding-top: 80px;
    }
}