/*
Theme Name:     Alacar
Theme URI:      
Description:    Make-some-waves child theme.
Author:         0117 Web Wizards
Author URI:     https://www.0117.nl
Template:       make-some-waves
Version:        0.1.0
*/

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body{
	overflow-x: hidden;
}

footer hr.wp-block-separator{
	width: 50px !important;
  border: none;
  margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Reverse columns */
@media (max-width: 788px) {
  .reverse-columns {
    flex-direction: column-reverse;
  }
}

/* Header image */
@media only screen and (min-width: 782px) {
  .header-image img {
    width: 190% !important;
    max-width: none !important;
    height: 600px!important;
  }
}

@media only screen and (min-width: 1000px) {
  .header-image img {
	  aspect-ratio: 16/9 !important;
  }
}

/* Algemene buttons (override waves) */ 
.wp-block-button:not(.no-icon-animation) a 
span.wp-font-awesome-icon svg{
    opacity: .5!important;
    transition: all .3s ease;
    margin-left: 0px!important;
    margin-right: 3px!important;
}

.wp-block-button:not(.no-icon-animation) a:hover 
span.wp-font-awesome-icon svg{
    opacity: 1;
    transform: translateX(0px)!important;
    transition: all .2s ease;
}

/* Negative logo margin */
.logo{
  margin-top: -40px!important;
  width: 200px;
}
@media only screen and (max-width: 782px) {
.logo{
  margin-top: -30px!important;
  width: 150px;
}
}

@media only screen and (max-width: 782px) {
.nav-button{
  display: none!important;
}
}

.yoast-kruimelpad{
  a{
     text-decoration: none;
  color: var(--wp--preset--color--dark-200); 
  }
  a:hover{
  text-decoration: none;
  color: var(--wp--preset--color--primary-200);
  }
}

/* Button with chevron */
a.button-with-chevron {
  background-color: var(--wp--preset--color--dark-200);
  padding: 10px 15px;
  color: white;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

a.button-with-chevron::after {
  opacity: .5!important;
  transition: all .3s ease;
  content: "";
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='white' d='M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  transform: translateX(0px);
  transition: transform 0.2s ease;
}

a.button-with-chevron:hover::after {
  transform: translateX(4px);
}
a.button-with-chevron:hover{
  background-color: var(--wp--preset--color--primary-200)!important;
}

/* Sticky title */
.sticky-title {
  position: sticky!important;
  top: 20px;
  align-self: flex-start;
  z-index: 10;
}

@media only screen and (max-width: 782px) {
  .sticky-title {
    position: relative!important;
    top: 0px;
  }
  .wp-block-buttons.is-content-justification-right {
    margin-top: 20px;
    justify-content: start!important;
  }
}

/* menu */
/* Navbar */
.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container{
  border: none !important;
  padding: 10px 5px !important;
  margin-top: 3px;
  color: var(--wp--preset--color--dark-200)!important;
  background-color: var(--wp--preset--color--light-100)!important;
}

/* Mobile submenus */
@media(max-width: 1000px){
  .wp-block-navigation__submenu-container>.wp-block-navigation-item>.wp-block-navigation-item__content {
      padding: .2em 0 !important;
      font-weight: 400;
  }
	.no-pointer{
		pointer-events: none;
	}
	
	.no-pointer ul {
		pointer-events: auto;
	}
}

.wp-block-navigation__responsive-container{
  background-color: var(--wp--preset--color--light-200)!important;
}

/* 
* Navigation text decoration
*/

/* Default - Transparent */
:root :where(.wp-block-navigation a:where(:not(.wp-element-button))){
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: 2px;
    transition: text-decoration .3s;
    text-underline-offset: 5px;
}

/* Active item */
:root :where(.wp-block-navigation .current-menu-item a:where(:not(.wp-element-button))){
    text-decoration-color: currentColor;
}

@media (hover: hover){
    :root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover){
        text-decoration-color: var(--wp--preset--color--dark-200)!important;
        transition: text-decoration .1s;
    }
}

@media (min-width: 1000px){
.wp-block-navigation__submenu-container {
  padding: 0 !important;
	border: none;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0,0,0,0.08);
	border-radius: 6px;
	overflow: hidden;
}

/* submenu items */
.wp-block-navigation__submenu-container .wp-block-navigation-item {
	margin: 0 !important;
	border-bottom: none !important;
}

/* submenu links */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 10px 20px !important;
  border-radius: 5px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* submenu hover */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: #f5f5f5;
	color: #000;
	text-decoration: none;
}

/* actief submenu item */
.wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
	font-weight: 600;
	border-bottom: none !important;
	background-color: #f8f8f8;
}

.wp-block-navigation li.current-menu-ancestor{
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 5px;
}

}




 /* Parent reset voor counter */
.alacar-list {
  counter-reset: white-block;
  position: relative;
}

/* Elke groep laten tellen */
.alacar-list .wp-block-group {
  position: relative;
  counter-increment: white-block;
  padding-left: 50px; /* iets meer ruimte voor de cirkel */
}

/* Nummer cirkel */
.alacar-list .wp-block-group::before {
  content: counter(white-block);
  position: absolute;
  top: 48px;
  left: 0;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  background: var(--wp--preset--color--dark-200)!important;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.alacar-werkwijzer .wp-block-group::before, .alacar-garantie .wp-block-group::before {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  background: var(--wp--preset--color--dark-200);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* add icon inside */
.alacar-werkwijzer .wp-block-group::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
}

.alacar-werkwijzer .wp-block-group:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M256 0c23.7 0 44.4 12.9 55.4 32l8.6 0c35.3 0 64 28.7 64 64l0 352c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l8.6 0C83.6 12.9 104.3 0 128 0L256 0zm26.9 212.6c-10.7-7.8-25.7-5.4-33.5 5.3l-85.6 117.7-26.5-27.4c-9.2-9.5-24.4-9.8-33.9-.6s-9.8 24.4-.6 33.9l46.4 48c4.9 5.1 11.8 7.8 18.9 7.3s13.6-4.1 17.8-9.8L288.2 246.1c7.8-10.7 5.4-25.7-5.3-33.5zM136 64c-13.3 0-24 10.7-24 24s10.7 24 24 24l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L136 64z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M256 0c23.7 0 44.4 12.9 55.4 32l8.6 0c35.3 0 64 28.7 64 64l0 352c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 96C0 60.7 28.7 32 64 32l8.6 0C83.6 12.9 104.3 0 128 0L256 0zm26.9 212.6c-10.7-7.8-25.7-5.4-33.5 5.3l-85.6 117.7-26.5-27.4c-9.2-9.5-24.4-9.8-33.9-.6s-9.8 24.4-.6 33.9l46.4 48c4.9 5.1 11.8 7.8 18.9 7.3s13.6-4.1 17.8-9.8L288.2 246.1c7.8-10.7 5.4-25.7-5.3-33.5zM136 64c-13.3 0-24 10.7-24 24s10.7 24 24 24l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L136 64z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
}

.alacar-garantie .wp-block-group::after {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  background-color: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256.1 0c4.6 0 9.2 1 13.3 2.9L457.8 82.8c22 9.3 38.4 31 38.3 57.2-.5 99.2-41.3 280.7-213.7 363.2-16.7 8-36.1 8-52.7 0-172.4-82.5-213.1-263.9-213.6-363.2-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256.1 0zm90.9 164.6c-10.7-7.8-25.7-5.4-33.5 5.3l-85.6 117.7-26.5-27.4c-9.2-9.5-24.4-9.8-33.9-.6-9.5 9.2-9.8 24.4-.6 33.9l46.4 48c4.9 5.1 11.8 7.8 18.9 7.3s13.6-4.1 17.8-9.8L352.3 198.1c7.8-10.7 5.4-25.7-5.3-33.5z'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256.1 0c4.6 0 9.2 1 13.3 2.9L457.8 82.8c22 9.3 38.4 31 38.3 57.2-.5 99.2-41.3 280.7-213.7 363.2-16.7 8-36.1 8-52.7 0-172.4-82.5-213.1-263.9-213.6-363.2-.1-26.2 16.3-47.9 38.3-57.2L242.7 2.9C246.8 1 251.4 0 256.1 0zm90.9 164.6c-10.7-7.8-25.7-5.4-33.5 5.3l-85.6 117.7-26.5-27.4c-9.2-9.5-24.4-9.8-33.9-.6-9.5 9.2-9.8 24.4-.6 33.9l46.4 48c4.9 5.1 11.8 7.8 18.9 7.3s13.6-4.1 17.8-9.8L352.3 198.1c7.8-10.7 5.4-25.7-5.3-33.5z'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
}

.alacar-check{
  top: -30px;
  position: absolute;
  z-index: 1;
}

/* prijswijzer */
.alacar-pw {
  counter-reset: pw-counter;
  position: relative;
}

.alacar-pw .pw-step {
  position: relative;
  counter-increment: pw-counter;
}

.alacar-pw .pw-step::before {
  content: counter(pw-counter);
  position: absolute;
  top: 48px;
  left: 0;
  transform: translate(-50%, -50%);
  width: 35px;
  height: 35px;
  background: black;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.pw-step {
  background: white;
  padding: 0.50rem 2.75rem 2.25rem;
  margin-bottom: 1rem;
}

.pw-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pw-option {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}

.pw-option input[type=radio] {
  display: none;
}

.pw-radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px solid var(--wp--preset--color--dark-100)!important;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

.pw-radio-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wp--preset--color--primary-200)!important;
  display: none;
}

.pw-option.selected .pw-radio-dot {
  display: block;
}

.pw-selects {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.pw-select-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 140px;
}

.pw-conditional {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.35s ease, opacity 0.25s ease;
}

.pw-conditional.visible {
  max-height: 500px;
  opacity: 1;
}

select {
  width: 100%;
  height: 40px;
  padding: 10px;
}

.pw-result {
  background: white;
  padding: 1.5rem;
  margin-top: 0.5rem;
}

.pw-paneelcode{
  background-color: var(--wp--preset--color--light-200)!important;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pw-price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  border-bottom: 0.5px solid var(--wp--preset--color--light-200)!important;
}

.pw-price-row:last-child {
  font-weight: 700;
  border-bottom: none!important;
}

.pw-incomplete {
  text-align: center;
  padding: 1rem 0;
}