/*
     !! - Denk eraan dat de kleuren in de editor options en de css hetzelfde moeten zijn. - !!
     Deze kan je vinden in /inc/custom/custom-editor-options.php
*/


/* 
    Variabelen
*/

:root{
  /* Kleuren */
  --primaryColor:#00204a;
  --primaryVariationColor:#005792; 
  --secondaryColor:#3172a3; 
  --secondaryVariationColor:#fdb44b; 
  --blackCustomColor:#0e0e0e;
  --whiteCustomColor:#ffffff;
  --greyCustomColor:#d5d2cd;

  /* Fonts */
  --primaryFont:'Roboto', sans-serif;
  --secondaryFont: 'League Spartan', sans-serif;

  /* Site opties */
  --siteWidth: 1200px;
  --defaultGap: 30px;
  --halfGap: calc(var(--defaultGap)/2);
  --flex3basis: calc((100% - 2 * var(--defaultGap)) / 3);
  --defaultBorderRadius: 5px;
  --menuWidthOnScroll: 215px;

  /* wp styles */
  --wp--preset--font-size--small: 0.8rem;
	--wp--preset--font-size--normal: 1rem;
	--wp--preset--font-size--medium: 1rem;
	--wp--preset--font-size--large: 1.2rem;
	--wp--preset--font-size--x-large: 1.5rem;
  --wp--preset--font-size--huge: 2rem;
}

/* styling */
h2 {font-weight: 600;}
h2 {font-size: 29px;}
.lease-block ul {list-style-type:none;list-style-position: outside;padding-left: 0; margin-bottom:var(--halfGap); }
.lease-block li::before {content:'\2713';color:#5DB75D;margin-right:10px;font-size: 1.4em;line-height: 1;}


/*svg*/
.wp-block-cover .wp-block-group__inner-container svg { fill: var(--primaryColor);width: 60%; max-height: 90px; transform-origin: center;transition: all .3s ease}
.wp-block-cover .wp-block-group__inner-container .wp-block-group.is-vertical {transition:all 0.3s ease;text-align:center;gap: 0;}
.wp-block-cover .wp-block-group__inner-container .wp-block-group.is-vertical:hover {transform:scale(1.1); transform-origin:center;fill:var(--secondaryColor);}
.wp-block-cover .wp-block-group__inner-container .wp-block-group.is-vertical:hover svg { fill:var(--secondaryColor); }

/* slider block reviews home */
.wp-block-group.slider { padding: 0; }
.wp-block-group.slider .wp-block-group__inner-container { max-width:unset; }

/*buttons*/
a.wp-block-button__link.wp-element-button { background: #5DB75D;}
a.wp-block-button__link.wp-element-button:hover { background:#3d8d3d; }
/*nav menu*/

.site-header{position:sticky; top:0;z-index:22}
.nav-menu .menu-item a{font-size: 19px;font-weight: 500;line-height: 27px;color: var(--primaryColor);padding: 13px 22px 13px 18px;}
.nav-menu .menu-item a:hover{color: var(--primaryVariationColor);}
.nav-menu .menu-item:hover > a {color: var(--primaryColor);}
.nav-menu .menu-item a:after{content: "";position: absolute;bottom: 9px;left: 18px;width: 0;height: 2px;background:#FFF;transition: all 1s ease, width 0.3s ease;}
.nav-menu .menu-item:hover > a:after{width: calc(100% - 36px);background-color:  var(--primaryVariationColor);}
.nav-menu .menu-item-has-children:hover > a:after{width: calc(100% - 23px);}
.nav-menu .submenu-expand {padding: 0 0 0 20px;}
.nav-menu .sub-menu .menu-item > a {border-left: 0px solid #FFF; transition: all .5s ease, border-left .3s ease;}
.nav-menu .sub-menu .menu-item:hover > a {border-left: 10px solid var(--primaryVariationColor);color: var(--primaryVariationColor);}
.nav-menu .sub-menu .menu-item:hover > a:after{display:none;}
.nav-menu .menu-item:hover > .sub-menu {left:auto;box-shadow: 5px 10px 20px rgb(0 0 0 / 15%);}
.nav-menu .sub-menu {background: #fefefe; }


/* content blocks */
.wp-block-cover.alignfull { padding:var(--defaultGap); }
.wp-block-cover.homelead { margin-bottom:100px;}
.wp-block-cover.homelead .wp-block-cover__inner-container { transform:translateY(100px); }
.wp-block-cover.homelead .wp-block-group {justify-content: space-evenly;}
.wp-block-cover h3{font-size:1em;}

.wp-block-group .wp-block-group__inner-container {padding:0;}
.wp-block-cover__inner-container { max-width:var(--siteWidth); }
.wp-block-cover .wp-block-cover__inner-container{width:fit-content; margin:0; padding:0;}
.wp-block-group.wp-container-3{padding:0; Margin:0; }
.wp-block-cover .wp-block-buttons {padding-top: 16px;justify-content: center;}
.wp-block-cover .wp-block-cover__inner-container > .wp-block-group {position:relative;margin: 00 auto;background:#fff;padding: 34px;border: 1px solid #CCC;border-radius: var(--halfGap);box-shadow: 0px 4px 10px -6px rgb(0 0 0 / 50%);width: 100%;}
.wp-block-cover .wp-block-group {padding: 0;}
.wp-block-columns, .wp-block-media-text { margin:var(--defaultGap) 0;}
.lease-block .wp-block-column {/* top:0; */padding:var(--defaultGap);border:1px solid #CCC;border-radius:var(--halfGap);transition: all 0.3s ease-in-out;position: relative;}
.lease-block .wp-block-column:hover {/* top:-2px; */border:1px solid rgba(204, 204, 204, 0.5);box-shadow: 0px 4px 10px -6px rgb(0 0 0 / 50%);transition: background 0s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}
.wp-block-column .wp-block-image {height: 0;padding-bottom: 66%; position:relative; }
.wp-block-column .wp-block-image img {position:absolute;top:0;height:100%;object-fit:contain;object-position: center bottom;}

/*footer*/
.site-footer{ background-color: transparent;background-image: linear-gradient(90deg, var(--primaryColor) 0%, var(--secondaryColor) 100%);}  
.site-footer h5, .site-footer p, .site-footer a{color: #FFFFFFCC;font-family: var(--secondaryFont);font-weight: normal;}
.site-footer a:hover { color:#FFF; }
.site-footer h5{font-weight:700; opacity:1;}

@media ( min-width:768px ) {
  :root body {
    /* Kleuren */
    --defaultGap: 40px;
    --halfGap:
    calc(var(--defaultGap)/2);

    --wp--preset--font-size--large: 1.3rem;
    --wp--preset--font-size--x-large: 2rem;
    --wp--preset--font-size--huge: 3rem;
  }
.site-header.active::before{display:none;}
.site-header.active .wrap .menu-toggle,.site-header.active .wrap .search-toggle{display:none;}

}