/*---------------------------------------------------------------------------------

 Theme Name:   Studiobasil Theme 2026
 Theme URI:    https://studiobasil.nl
 Description:  
 Author:       Studiobasil
 Author URI:   https://studiobasil.nl/
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/


/*--------------------------------------------------------------
    Global
--------------------------------------------------------------*/

/* reCAPTCHA */
.grecaptcha-badge { visibility: hidden !important; }

/* grain */
.grain {
  position: fixed;
  inset: -50%;
  background-image: url("https://studiobasil.nl/wp-content/uploads/2026/02/grain.png");
  opacity: .4;
  pointer-events: none;
  animation: grain 1.5s steps(2) infinite;
}

.grain {
  z-index: 999999;
}

@keyframes grain {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-10%, 10%); }
  40% { transform: translate(10%, -10%); }
  60% { transform: translate(-15%, 5%); }
  80% { transform: translate(5%, -15%); }
}





/*--------------------------------------------------------------
    Typography
--------------------------------------------------------------*/

.et_pb_post_content_0_tb_body.et_pb_post_content.et_pb_module {
    color: white;
}

.portfolio .post-content-inner {
    font-size: 92%;
}

@media screen and (max-width: 767px) {
    .et_pb_post_title_0_tb_body .et_pb_title_container h1.entry-title {
        font-size: 2.2em !important; /* Pas deze waarde aan naar wens voor mobiel */
    }
}




/*--------------------------------------------------------------
    Components
--------------------------------------------------------------*/
/* Project tiles */
.et_grid_module>.et_pb_post, .et_masonry_module .et_pb_post, .et_pb_blog_grid .et_pb_post {
    border: 0px;
    padding: 19px;
    background-color: #181c1d;
}

.postgrid .et_pb_post {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
	transition: transform 0.2s ease, border-radius 0.2s ease;
	border-radius:0px;
}

.postgrid .et_pb_post:hover {
  transform: scale(1.07);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
	border-radius:20px;
}

.postgrid .post-content-inner {
    line-height: 0px;
    margin-bottom: 20px;
}
@media screen and (max-width: 767px) {
	.postgrid .post-content-inner {
		line-height: 10px !important;
		margin-bottom: 0px;
	}
}

article[class*="et_pb_blog_item"].is-hidden {
  display: none !important;
}

/* image zoom */
.postgrid .et_pb_image_container {
  overflow: hidden;
	border-top-left-radius: inherit;
	border-top-right-radius:inherit;
}

.postgrid .et_pb_image_container img {
  transition: transform 0.45s cubic-bezier(.2,.8,.2,1);
	border-radius: 0 !important;
}

/* .et_pb_post:hover .et_pb_image_container img {
  transform: scale(1.10) rotate(1deg);
} */


.postgrid .et_pb_post:nth-child(3n):hover img {
  transform: scale(1.10) rotate(-2.5deg);
}

.postgrid .et_pb_post:nth-child(3n+1):hover img {
  transform: scale(1.10) rotate(1deg);
}

.postgrid .et_pb_post:nth-child(3n+2):hover img {
  transform: scale(1.10) rotate(-1deg);
}

.postgrid .et_pb_image_container {
  margin: -19px -18.5px 0 -18.5px;
}



/*--------------------------------------------------------------
    Buttons and navigation
--------------------------------------------------------------*/
/* Nav balk */
@media (min-width: 981px) {
    #main-header.et-fixed-header {
        box-shadow: none !important;
    }
}

/* Blog filter */
.blog-filters {
  display: flex;
  gap: 12px;
  margin-bottom: 30px;
}
.blog-filters button {
  cursor: pointer;
	color:white;
	padding: .3em 0em 0.3em 1.3em;
	font-size: 16px;
	font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
	font-weight:500;
    background-color: rgba(0, 0, 0, 0.18);
    border-width: 0px;
    border-radius: 7px;
}

.blog-filters button:hover {
  cursor: pointer;
	font-size: 16px;
	font-family: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
	font-weight:500;
    background-color: rgba(0, 0, 0, 0.05);
    border-width: 0px;
    border-radius: 7px;
}

/* Media query voor mobiele schermen (kleiner dan 767px) */
@media screen and (max-width: 767px) {
    .blog-filters button,
    .blog-filters button:hover {
        font-size: 12px;
    }
}


/* basis Divi 5 button look */
.divi-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.2em;

  transition:
    padding 0.25s ease,
    background-color 0.25s ease;
}

/* Divi-style hoek-icoon */
.divi-btn::after {
  content: "\35";
  font-family: "ETmodules";
  font-size: 1.4em;

  opacity: 0;
  transform: translateX(-6px);
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

/* hover = breder + icoon verschijnt */
.divi-btn:hover {
  padding-right: 1em;
}

.divi-btn:hover::after {
  opacity: 1;
  transform: translateX(0);
}




@media only screen and (max-width: 980px) {
  .et_mobile_menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
	  background: linear-gradient(to bottom, rgba(195,183,159,0) 0%, rgba(195,183,159,0.6) 100%);
    backdrop-filter: blur(7px); /* optioneel voor extra luxe look */
    z-index: 9999;
    padding-top: 100px; /* ruimte voor het logo of sluiten */
    display: none;
  }

  .et_mobile_menu.opened {
    display: block !important;
  }

  .mobile_nav.opened .mobile_menu_bar:before {
    content: "✕"; /* vervangt hamburger met een kruisje */
    font-size: 30px;
	   z-index: 999999;
  }
}

.et_mobile_menu li a {
    border-bottom: 0px solid rgba(0, 0, 0, .03);
    color: #fff;
    padding: 10px 5%;
    display: block;
	text-align:center;
	font-size:20px;
}

.et_mobile_menu {
    border-top: 0px solid #2ea3f2;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .0);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,.0);
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .0);
}

@media (max-width: 980px) {
    .et_header_style_centered .et_menu_container .mobile_menu_bar {
        z-index: 99999;
        position: absolute;
        right: 5px;
        top: 2px;
    }
}






/*--------------------------------------------------------------
    Custom fonts
--------------------------------------------------------------*/