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

 Theme Name:   Govert Schilling 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; }


#main-content {
    background-color: transparent !important;
}

/* Verander 'body' naar de gewenste kleur */
body {
    background: #BAC4D6;
	background: linear-gradient(180deg, rgba(186, 196, 214, 1) 0%, rgba(218, 225, 236, 1) 20%);
}

.et_pb_post .et_pb_section{
	background:transparent;
	padding:0;
}

/* Boeken CSS issue volgende pagina's */
.container,
.et_pb_row:not([class*="et_flex_column"]),
.et_pb_slider .et_pb_container,
.et_pb_fullwidth_section .et_pb_title_container,
.et_pb_fullwidth_section .et_pb_title_featured_container,
.et_pb_fullwidth_header:not(.et_pb_fullscreen) .et_pb_fullwidth_header_container {
    max-width: 1400px;
}



/*--------------------------------------------------------------
    Typography
--------------------------------------------------------------*/
.entry-content ul{
	padding: 0 0 23px 2em;
}

body a{
	color:#aec9e8;
}

.textlight a{
	color:var(--gcid-primary-color);
}


.boekengrid{
	h2{
		padding-bottom:0;
	}
}

.small-letter{
	font-size:0.65em;
}

/* Kleur van de 'No Results' melding aanpassen */
/* .not-found-title, 
.entry-content p {
    color: #ffffff !important;
}
 */

.et_pb_button.et_pb_bg_layout_light.et_pb_module.et_flex_module.winkel-knop {
    color: white;
}



/*--------------------------------------------------------------
    Components
--------------------------------------------------------------*/
/* Gallery source */
.bg-source-row {
  display: none;
}


/* Zoom background */
.random-bg,
.backgroundimgzoom,
.backgroundcoverzoom{
  position: relative;
  overflow: hidden;
}

.random-bg::before,
.backgroundcoverzoom::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  animation: slowZoom 40s ease-out forwards;
  z-index: 0;
}

/* Zorgt dat content boven de achtergrond blijft */
.random-bg > *,
.backgroundimgzoom > *,
.backgroundcoverzoom > *{
  position: relative;
  z-index: 1;
}

/* Animatie */
@keyframes slowZoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.2);
  }
}


/* Zoom background start contain */
/* Achtergrond via pseudo-element */
.backgroundimgzoom::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: contain;
  background-position: center top;
  background-repeat: no-repeat;
  
  transform: scale(1);
  animation: slowZoom 40s ease-out forwards;
  z-index: 0;
}




/* Post carousel loop */
/* Zorg dat image niet buiten kaart komt */
.news-card .et_pb_image_wrap {
	overflow: hidden;
}

/* Basis afbeelding */
.news-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 0.5s ease;
}

/* Zoom wanneer hele kaart hover heeft */
.news-card:hover img {
	transform: scale(1.05);
}

/* Achtergrondkleur aanpassen */
.news-card {
	cursor: pointer;
	background-color:white;
	transition: background-color 0.4s ease;
}

.news-card:hover {
	background-color: #152f48; /* of rgba */
}

/* Titel bewegen */
.news-card .et_pb_module_header {
/* 	transition: transform 0.4s ease; */
	transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
	color:#417fba;
	transform: scale(1);
}

.news-card:hover .et_pb_module_header{
	transform: translateY(-4px);
	color:white;
	transform: scale(1.03);
}

.news-card:hover .brontext p{
	color:white !important;
}

/* Carousel 3 items per rij */
/* .news-card.flex-loop {
	display: flex;
	gap: 20px; 
	overflow-x: auto;
	scroll-snap-type: x mandatory;
}

.news-card.flex-loop .project-card {
	flex: 0 0 33.333%; 
	scroll-snap-align: start;
} */

.et_pb_group_carousel_0 .et_pb_group_carousel_arrow .et-pb-icon:hover {
    color: var(--gcid-primary-color);
}

/* Animatie tegels */
@media (min-width: 980px) {
	.group-carousel .news-card {
	  opacity: 0;
	  transform: translateY(60px);
	}
}


/* Social media icons */
/* Verberg het standaard Buffer icoon */
.et_pb_social_media_follow_network_0 .icon:before,
.et_pb_social_media_follow_network_2 .icon:before{
    content: none !important;
}

/* Toon Bluesky logo */
.et_pb_social_media_follow_network_0 .icon,
.et_pb_social_media_follow_network_2 .icon{
    background-image: url("/wp-content/uploads/2026/02/Bluesky_Logo.png");
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}

/* Boeken raster */
/* .boeken-raster img {
    aspect-ratio: 4 / 5;
    width: 100%;
    height: auto;
    object-fit: cover;
}
 */

/* CV-tabel */
/* Selecteer de even rijen in de tabel binnen de .cv class */
.cv table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

.cv tr td,
.cv table:not(.variations){
    border:none;
}

/* Optioneel: voeg wat padding toe aan de cellen voor een rustiger beeld */
.cv td {
    padding: 8px 10px;
}


.overgovert .et_pb_section_0{
	opacity: 0.3 !important; /* 0.3 is 30% zichtbaar */
}


/* links pagin */
.linkloop {
  transition: background-color 0.3s ease;
}

.linkloop:hover {
  background-color: rgba(65, 127, 186, 0.58) !important; /* voorbeeld */
}


/* Blog */
.blogtegels .et_grid_module>.et_pb_post, .et_pb_blog_grid .et_pb_post {
    border: none;
    padding: 19px;
    background-color: rgba(194, 203, 220, 0.20);
}


/* in focus */


/*--------------------------------------------------------------
    Buttons and navigation
--------------------------------------------------------------*/

/* ===== BASIS HEADER ===== */
.custom-scroll-header {
  background-color: transparent;
  transition: background-color 0.4s ease;
}

/* Logo start verborgen */
.scroll-logo {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Submenu breedte */
.nav li ul {
	width:210px;
}

/* ===== SCROLLED STATE ===== */
.custom-scroll-header.scrolled {
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.0);
}

.custom-scroll-header.scrolled .scroll-logo {
  opacity: 1;
  transform: translateY(0);
}

/* Blauw hamburger menu bij scroll */
.custom-scroll-header.scrolled .et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before {
    color: var(--gcid-primary-color);
}

.et_pb_section_0_tb_header.et_pb_section.et_pb_section--fixed.et_section_regular.et_flex_section.custom-scroll-header.et_pb_section--with-menu.scrolled {
    height: 60px;
}

@media (max-width: 980px) {
    .et_pb_menu .et_mobile_nav_menu {
        margin: 0 -9px;
    }
}


/* ===== MENU BASIS (bovenaan) ===== */
.custom-scroll-header .et-menu a,
.custom-scroll-header .et_pb_menu__menu > nav > ul > li > a {
  color: #ffffff;
  transition: color 0.35s ease;
}

/* ===== SCROLLED STATE ===== */
.custom-scroll-header.scrolled .et-menu a,
.custom-scroll-header.scrolled .et_pb_menu__menu > nav > ul > li > a {
  color: #417fba;
}

.sub-menu{
	background-color: rgba(0, 0, 0, 0.6) !important;
}

.custom-scroll-header.scrolled .sub-menu{
	background-color: rgba(255, 255, 255, 1) !important;
}

.et-menu li li a {
    padding: 6px 10px;
}

.et_pb_menu .et-menu-nav>ul ul {
    padding: 5px 0;
}

.nav li li {
    padding: 0 5px;
}

/* ===== CURRENT MENU ITEM ===== */
.custom-scroll-header .current-menu-item > a {
  color: #ffffff;
}

.custom-scroll-header.scrolled .current-menu-item > a {
  color: #417fba;
}

/* ===== HOVER ===== */
.custom-scroll-header .et-menu a:hover {
  opacity: 0.7;
}


/* Medialinks zoom */
/* Zorg dat hij netjes clipped */

/* Normale staat (dit bepaalt zoom-out snelheid) */
.medialinks .et_pb_row_nested.et_clickable,
.sterrenkundelinks .et_pb_row_nested.et_clickable{
  transition: transform 0.9s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
}

/* Hover (dit bepaalt zoom-in snelheid) */
.medialinks .et_pb_row_nested.et_clickable:hover,
.sterrenkundelinks .et_pb_row_nested.et_clickable:hover{
  transform: scale(1.02);
  transition: transform 0.25s cubic-bezier(.33,1,.68,1);
}

.medialinks .et_pb_row_nested.et_clickable {
    width: 100% !important;
}
@media (max-width: 980px) {
	.sterrenkundelinks .et_pb_row_nested.et_clickable {
		width: 100% !important;
	}
	.agenda {
		width: 100% !important;
	}
}

.agenda,
.agendarow{
	min-width: 100% !important;
}

/* blog */
.single-post .entry-content a,
.logged-in-as a{
  color: #417fba; /* jouw kleur */
}


.form-submit .et_pb_button {
    color: #417fba !important;
}


/* Mobile menu */

@media (max-width: 980px) {

  /* Alleen fullscreen als menu open is */
  .mobile_nav.opened .et_mobile_menu {
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #0a1a29;
	  opacity:0.95;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 9998;
  }

  /* Hamburger altijd boven overlay */
  .mobile_menu_bar {
    position: relative;
    z-index: 9999;
  }

  /* Nettere menu items */
  .et_mobile_menu li {
    text-align: center;
  }

  .et_mobile_menu li a {
    font-size: 24px;
    padding: 15px 0;
  }

  /* Scroll blokkeren als open */
  body.et_mobile_menu_open {
    overflow: hidden;
  }
	.sub-menu {
		background-color: rgba(255, 255, 255, 0) !important;
	}
	.sub-menu li a {
		color:var(--gcid-link-color) !important;
	}
	.custom-scroll-header.scrolled .sub-menu {
		background-color: rgba(255, 255, 255, 0) !important;
	}
	.custom-scroll-header.scrolled .current-menu-item > a {
		color: white;
	}
	.container{
    	width: 100%;
  }
	.et_post_meta_wrapper{
		width: 90%;
		margin:auto;
	}
	/* blog width */
	.et_pb_post .entry-content {
		width: 90%;
		margin: auto;
	}
}

.et_pb_row{
    	width: 90% !important;
  }




@media (max-width: 980px) {

  /* 1. De basis staat: onzichtbaar, maar technisch 'aanwezig' voor de animatie */
  .et_mobile_menu {
    display: flex !important; 
    position: fixed !important;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: #0a1a29;
    
    /* Animatie instellingen */
    opacity: 0 !important;
    visibility: hidden;
    pointer-events: none; /* Zorgt dat je nog op de pagina eronder kunt klikken als hij dicht is */
    transform: translateY(20px);
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.4s;
    
    flex-direction: column;
    justify-content: center;
    z-index: 9998;
    border-top: none !important;
  }

  /* 2. De "Open" staat: Divi voegt .opened toe aan .mobile_nav */
  .mobile_nav.opened .et_mobile_menu {
    opacity: 0.96 !important;
    visibility: visible !important;
    pointer-events: auto; /* Menu wordt weer klikbaar */
    transform: translateY(0);
  }

  /* Forceer de weergave van de lijst items */
  .mobile_nav.opened .et_mobile_menu li {
    display: block !important;
  }
}

/* 1. Basis staat van het submenu (verborgen) */
.et_mobile_menu .sub-menu {
  display: block !important; /* Moet op block staan voor animatie */
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease, 
              padding 0.4s ease;
  padding: 0 20px; /* Ruimte aan de zijkanten */
  margin: 0 !important;
}

/* 2. Staat wanneer het menu geopend is */
.et_mobile_menu .menu-item-has-children.et-open > .sub-menu {
  max-height: 1000px; /* Hoog genoeg voor alle items */
  visibility: visible;
  opacity: 1;
  padding: 10px 20px 20px 20px; /* Ruimte boven/onder bij uitklappen */
}

/* 3. Draai het pijltje soepel */
.menu-toggle-icon {
  transition: transform 0.4s ease-in-out !important;
}

.et-open > a > .menu-toggle-icon {
  transform: rotate(180deg);
}


/* 1. Verwijder de oude CSS pijl (deze veroorzaakte de dubbele pijl) */
.et_mobile_menu .menu-item-has-children > a::after {
  display: none !important;
  content: "" !important;
}

/* 2. Positioneer de link container */
.et_mobile_menu .menu-item-has-children > a {
  display: flex !important;
  justify-content: center; /* Houdt de tekst in het midden */
  align-items: center;
  position: relative;
  width: 100%;
}

/* 3. Zet de nieuwe toggle pijl helemaal rechts */
.menu-toggle-icon {
  position: absolute;
  right: 0;
  padding: 15px 25px; /* Maak het klikvlak lekker groot voor duimen */
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  transition: transform 0.3s ease;
  z-index: 10;
}

/* 4. Rotatie bij openen */
.et-open > a > .menu-toggle-icon {
  transform: rotate(180deg);
}

/* Optioneel: een verticaal lijntje links van de pijl om de scheiding aan te geven */
/* .menu-toggle-icon {
  border-left: 1px solid rgba(255,255,255,0.1);
} */


.et_mobile_menu li li {
    padding-left: 0%;
}


.et_mobile_menu .menu-item-has-children>a {
    font-weight: 500;
}




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