/* BEGIN enable mobile preview */

/* enable image to shrink
   if the screen gets smaller */
img {
    max-width: 100%;
    height: auto;
}

/* BEGIN friends
/* Force the Friend Grid rows to match the header width */
.wp-block-kadence-rowlayout.friend_grid {
    max-width: 1025px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

/* 1. Target the cell containing our specific image */
.center-my-image {
    display: block;
    margin-left: auto !important;
    margin-right: auto !important;
	/* border: 5px solid red !important; */
	transition: transform 0.3s ease; /* Makes the movement smooth */
}

.center-my-image:hover {
    transform: scale(1.1); /* Grows the image by 10% */
    cursor: pointer;
}

/* 2. Target the wrapper that WordPress/Kadence often puts around images */
.wp-block-image.center-my-image,
.wp-block-image:has(.center-my-image) {
    /* text-align: center !important; @@@ */
	text-align: left !important;
    display: block !important;
}

/* 1. Tablet View (e.g., screens smaller than 1024px) */
@media (max-width: 1024px) {
    .friend_grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns instead of 4 */
        gap: 20px;
    }
}

/* 2. Mobile View (e.g., screens smaller than 600px) */
@media (max-width: 600px) {
    .friend_grid {
        grid-template-columns: repeat(1, 1fr); /* 1 column (stacking) */
        gap: 15px;
    }
    
    .center-my-image {
        width: 120px; /* Slightly smaller images for small screens */
        height: 120px;
    }
}
/* END friends */

/*** BEGIN site-header ***/
#site-header {
	/* Safari */	
	/* position: -webkit-sticky; 	 */
	position: sticky !important;
	top:0  !important;
	z-index: 9999;
	/* background: green ; */
	padding-top: 0px !important;
	padding-bottom: 0px !important;
	padding-left: 0px !important;
	
    max-width: 1025px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;	
}

/* 1) prevent white space below logo image. */
#header_item1 figure {
		margin-bottom: 2px !important;
	}

/* 2) prevent white space below logo image. */
#header_item1 figure img {
	margin-bottom: 0 !important;
	margin-left: 0 !important;
	display: block !important;
}

/* key insight: WordPress uses is-menu-open and has-modal-open classes to manage menu state. */
/* SET BREAKPOINT FOR HAMBURGER MENU IN NEXT LINE. */
@media screen and (max-width: 1000px) {
	/* Target the container and the figure wrapper */
    #header_item1, 
    #header_item1 figure {
        padding-left: 0px !important;
        margin-left:  0px !important;
        text-align: left !important; /* Ensure the inline container aligns left */
    }	
	
	/* Force the image to not have any inherited offsets */
    #header_item1 img {
        margin-left: 0px !important;
        padding-left: 0px !important;
    }	
	
	/* Show the full menu */
	/* see: https://www.365iwebdesign.co.uk/news/2026/01/26/wordpress-navigation-block-hamburger-menu-css-fix/ */
	#header_item2 .wp-block-navigation__responsive-container-open {
		display: block !important;
	}

	/* Hide the full menu, but only when the modal is closed */
	#header_item2 .wp-block-navigation__responsive-container:not(.is-menu-open.has-modal-open) {
		display: none !important;
	}

	/*  format columns 1 and 2, hide column 3 */
	#site-header > .kt-row-column-wrap{
		display: grid !important;
		/* Handles horizontal space distribution */
		/* 'max-content' makes the first column only as wide as your logo */
		/* '1fr' makes the second column fill all remaining space */
		grid-template-columns: max-content 1fr !important; 
		
		align-items: center !important;  /* Handles vertical centering within the row */
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		/* background: green; */
		
	}

	/* item 1:
	   Let the first item stay snug to the left */
	#header_item1 {
		display: grid !important;
		justify-content: flex-start !important;
	}

	/* item 2:
	   ensure the hamburger icon hits the right wall */
	#header_item2 {
		display: grid !important;
		justify-content: flex-end !important;
		/* background-color: red; */
	}

    /* item 3
	   hide Contact Button in 3rd column */
	#site-header #header_item3 {
        display: none !important;
    }  
	
	/* test how much space an item takes @@@ remove later*/
 	#header_item1, #header_item2, #header_item3 {
		outline: 1px solid red;
	}

	/* Hamburger and X buttons
	   High-visibility outline for the  when having focus */
	#header_item2 button:focus {
		outline: 2px solid #0078CD !important;
		outline-offset: 4px !important;
		box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.8) !important;
	}

	/* Hamburger OPEN button */
	#header_item2 button.wp-block-navigation__responsive-container-open {
		transform: scale(2.5);            /* Increase size by 150% */
		transform-origin: right center; /* Keep it pinned to the right wall while growing */
		padding: 5px;                   /* Give it a larger "tap target" for fingers */
		display: flex !important;       
		align-items: center;            /* Ensure vertical centering of the SVG */
	}

	/* Hamburger OPEN button svg
	   format the button svg */
	#header_item2 button.wp-block-navigation__responsive-container-open svg {
		stroke-width: 40px; /* Standard is usually 1.5 or 2 */
		color: #0078CD; /* magenta @@@ */
	}

	/* Inject logo with ::before pseudo element */
	.wp-block-navigation__responsive-container-content::before {
		content: "";        /* LEGE CONTENT */
		position: absolute;
		/* top: 47px;  */
		top: -20px; 
		left: 0px; /* DIT IS DE SETTING DIE DE DOORSLAG GEEFT vwb de LEFT position */
		width: 120px;  /* Adjust size as needed */
		height: 120px; /* Adjust size as needed */
		background-image: url('https://www.inclusiecollectiefdelft.nl/wp-content/uploads/2025/08/logo-Inclusie-Collectief-Delft.jpg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: left center;
	}

	/* X button
	   format the X button, CLOSE button */
	#header_item2 button.wp-block-navigation__responsive-container-close svg {
		stroke-width: 40px;
		color: red; /* #0078CD; */
	}
	
	/* Target the CLOSE (X) button */
	#header_item2 button.wp-block-navigation__responsive-container-close {
		/* Bring the X back inside the screen wall  */
		/* Adjust top and right until the X sits exactly where the Hamburger was */
		top: 90px !important;
		/* Since we are using transform-origin: right center,
		this 20px is effectively pushing the right edge of the icon's box
		20 pixels away from the screen edge.
		On the Pixel 4a (393px wide),
		this leaves plenty of room so it never gets cut off again. */	
		right: 20px !important;
		padding: 5px;
		transform: scale(2) !important; 
		transform-origin: right center !important; /* Added transform-origin to keep it stable while scaling */
		position: fixed !important;
		z-index: 9999;
	}

	/* main menu level items
	   items bold to distinguish them from sub-items */
	.wp-block-navigation-item__content {
		font-weight: 500;
	}

	/* submenu level items "VN-verdrag" and "Doelstelling
	   subitems regular weight */
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-weight: 400;
		font-size: 0.9em; /* Optional: make them slightly smaller */
		background-color: #f9f9f9 !important; /* Subtle light gray */
		padding-left: 40px !important;       
		border-bottom: 1px solid #e0e0e0 !important;		
	}	    

	/*** BEGIN MAIN MENU ***/
	/* ORDER OF LIST: <div><ul><li><a> */
	/* 1. left align menu items, part 1
	<div>: wp-block-navigation__responsive-container-content
	*/
	#header_item2 .wp-block-navigation__responsive-container-content {
		display: flex !important;
		flex-direction: column !important;
		align-items: flex-start !important; /* Forces children to the left */
		justify-content: flex-start !important;
		/* text-align: left !important; */

		/* BEGIN settings for logo */
			position: relative !important; /* Required for the logo positioning */

			/* The Menu List Push */
			/* leave a gap for the logo with padding-top VALUE */
			padding-top: 100px !important; /* Space for the logo/X area */
			padding-left: 0px !important;   /* Critical: allow rows to hit the left edge */
			padding-right: 0px !important;  /* Critical: allow rows to hit the right edge */
		/* END settings for logo */
}

	/* 2. left align menu items, part 2
	Target the actual Unordered List (ul) inside the container 
	<div>: wp-block-navigation__responsive-container-content
	<ul> : wp-block-navigation__container
	*/
	#header_item2 .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		margin-left: 0 !important;
		margin-right: auto !important;
		align-items: flex-start !important;
		text-align: left !important;
		/* Width 100%:
		If the <ul> (the menu list) isn't set to width: 100%,
		it will only be as wide as the longest text item ("VN-verdrag"),
		making "Nieuws" look centered relative to the box,
		even if the box is on the left. */		
		width: 100% !important;
		gap: 0 !important; /* Removes the space between flex items */
		row-gap: 0 !important;
	}

	/* 3. left align menu items, part 3
	   Ensure the list items (li) aren't centering themselves 
	   <div>: wp-block-navigation__responsive-container-content
	   <li> : wp-block-navigation-item
   */ 
	#header_item2 .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		align-items: flex-start !important;
		text-align: left !important;
		width: 100% !important;
		margin: 0 !important; /* Remove default spacing */
		
		/* line-height: 1 This makes the line height exactly the same size as the font itself.
		   It effectively "hugs" the letters,
		   leaving zero extra space above or below. */
		line-height: 1 !important;  

		/* Remove any default margins just in case */
		margin-top: 0 !important;
		margin-bottom: 0 !important;

		/* Adjust these numbers to your liking */
		padding-top: 0px !important;
		padding-bottom: 0px !important;
		padding-left: 10px !important;
	}
	
	#header_item2 .wp-block-navigation__responsive-container-content .wp-block-navigation-item a {
		display: block;
		line-height: inherit;
		font-size: 1.2em;
	}	

	#header_item2 .wp-block-navigation {
		--wp--style--root--padding-left:  0px !important;
		--wp--style--root--padding-right: 0px !important;
	}

	/* Style the clickable area
	<div>: wp-block-navigation__responsive-container-content
	<li> : NOT CURRENT menu-item 
	<a>  : wp-block-navigation-item__content
	*/
	#header_item2 .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content{
		display: flex !important;
		align-items: center;
		width: 100% !important;
		/* padding: 25px 30px !important; */
		
		padding-top: 20px !important;
		padding-right: 0px !important;
		padding-bottom: 20px !important;
		padding-left: 0px !important;		

		margin-top: 0 !important;
		margin-bottom: 0 !important;	

		border-bottom: 1px solid black; /* magenta Create the 'tabular' line */
		text-decoration: none;
	}
	
	#header_item2 li {
		margin-top: 0px !important;
		margin-bottom: 0px !important;
		display: block; /* Ensures they stack and follow your padding rules */
		background-color: white !important; /* purple */
	}
	
/* Target the parent container just in case */
#header_item2 ul {
    margin: 0px !important;
    padding: 0px !important;
}	

	/* current menu item background-color black + color white
	   Target the LINK inside the active list item
	   <div>: wp-block-navigation__responsive-container-content
	   <li> CURRENT menu-item
	   <a>  : wp-block-navigation-item__content	
	 */
	#header_item2 .wp-block-navigation__responsive-container-content .current-menu-item .wp-block-navigation-item__content{
		background-color: #000000 !important; /* Set background to Black */
		color: #ffffff !important;            /* Set text to White       */
		width: 100% !important;
		display: flex !important;
	}	

	/* Create the tabular row look */
	#header_item2 .wp-block-navigation-item {
		/* @@@ border-bottom: 1px solid blue !important; */ /* #e0e0e0 The separator line */
		width: 100% !important;
	}

	#header_item2 .wp-block-navigation-item__content {
		/* @@@ padding: 15px 20px !important; /* Give it the 'thick' row feel */ */
		padding: 0px 0px !important; 
		width: 100% !important;
	}
	/*** END MAIN MENU ***/	
	
	/*** BEGIN SUBMENU ***/
	/* 1. SUBMENU items indentation, part 1
	      Reset the submenu container so it doesn't have its own centering/padding 
	   <div>: wp-block-navigation__responsive-container-content  
    */
	.wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
		margin-left: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		/* @@@ weg border-left: none !important; */ /* Remove the old guide line if using full-width rows */		
	}

	/* 2. submenu items indentation, part 2
		  Apply the indentation to the actual sub-items */
	.wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item {
		margin-left: 10px !important; /* Move the line slightly more to the right */
		padding-left: 15px !important; /* This creates the visual 'indent' */
		/* align-items: flex-start:
		Since the navigation block uses Flexbox, 
		this setting on the sub-items ensures
		they don't try to stretch or center themselves if the container width changes. */
		align-items: flex-start !important;
		text-align: left !important;
		/* background-color: green !important; */
	}

	/* 3. submenu items indentation, part 3
	Target the link specifically if the text still looks off
	<a>  : wp-block-navigation-item__content */
	.wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
	
	/* Add a small dash BEFORE sub-menu items */
	/* to emphasize nesting with "::before" pseudo-element 
	<ul> submenu: wp-block-navigation__submenu-container
	<a>  : wp-block-navigation-item__content
	*/
	.wp-block-navigation__submenu-container .wp-block-navigation-item__content::before {
		content: "—"; /* em-dash */
		margin-right: 8px;
		color: #0078CD; /* Using your brand blue for the accent */
		font-weight: 300; /* Keep the dash light so it doesn't compete with text */
		opacity: 0.8;
	}	

	/* vertical spacing between sub-items for better 'tap-ability'
	<ul> submenu: wp-block-navigation__submenu-container
	<li>        : wp-block-navigation-item
	*/
	.wp-block-navigation__submenu-container .wp-block-navigation-item {
		margin-bottom: 12px !important; /* Spacing between VN-verdrag and Doelstelling */
	}
	
	/* vertical breathing room for the sub-menu container itself
	<ul> submenu: wp-block-navigation__submenu-container
	*/
	.wp-block-navigation__submenu-container {
		margin-top: 0px !important;
		margin-bottom: 20px !important;
		margin-left: 5px !important;
	}
	
	/*** END SUBMENU ***/
}
/*** END site-header ***/

/* TTS active menu border */
.wp-block-kadence-advancedbtn.kb-buttons-wrap.active {
	border: 2px solid #0078cd !important;
    display: inline-flex !important; /* Makes the box wrap tightly around buttons */
    padding: 8px !important;         /* Gives the buttons some breathing room */
    border-radius: 20px !important;  /* Optional: gives it a pill-shaped 'audio player' look */
}

.blauw_witte_balk {
  background: repeating-linear-gradient(
    -60deg,         /* angle */
    #FFFFFF,        /* color 1 */
    #FFFFFF 80px,   /* end of color 1 stripe */
    #0078CD 80px,   /* start of color 2 stripe */
    #0078CD 160px   /* end of color 2 stripe */
  );
  height: 2rem;
}

.grijs_witte_balk {
/* [data-row="top"] { */
  background: repeating-linear-gradient(
    -60deg,          /* angle */
    #FFFFFF,        /* color 1 */
    #FFFFFF 80px,   /* end of color 1 stripe */
    #A5A5A5 80px,   /* start of color 2 stripe */
    #A5A5A5 160px    /* end of color 2 stripe */
  );
  height: 2rem;
}

a{
	color: #0078CD; /* blauw */
}

/* hover over a navigation link */
a.kb-nav-link-content:hover {
  color: #0078CD; /* blauw */
  text-decoration-line: underline;
}

/* hover over a button */
.wp-block-button__link:hover{
  background-color: #004A7F; /* donker blauw */
  text-decoration-line: underline;
}

/* @@@ kan weg op termijn
   Teken een tijdelijke hulplijn om alle GenerateBlocks containers in de editor */
.interface-interface-skeleton__content .gb-container {
    outline: 1px dotted #2196f3 !important;
    outline-offset: -1px;
}

/* BEGIN custom post types */
.custom-bestuursleden_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
	gap: 25px;
	width: 100%;
	max-width: 1025px; /* Your specific width */
	margin: 40px auto; /* The auto value is what actually centers that 1025px container on the screen. */ 
	/* box-sizing: border-box; */
	align-items: start;   /* Ensures rows don't stretch into each other */
}

.bestuurslid_card {
	/*
	display       : flex;
	flex-direction: column;
	This ensures that if you have a "Read More" button or footer text later,
	everything stays neatly aligned within the card. */
	display       : flex;
	flex-direction: column;
	border: 1px solid #e0e0e0;
	padding: 20px;
	border-radius: 32px;
	background: #ffffff;
	/* height: 100%; This ensures cards stay the same height even if text length varies */
	height: auto;         /* Changed from 100% to auto to prevent overlap */
	text-align: center;   /* Looks better with circular photos */
	box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.bestuurslid_card h3 { margin-top: 0; color: #0078CD; } /* header */
.bestuurslid_card p  { margin: 5px 0; color: #666; }    /* paragraaf */

.foto_wrapper {
	margin-bottom: 15px;
	text-align: center;
}

.bestuurslid_foto {
	width: 300px;       /* Set a specific size for the circle */
	height: 300px;      /* Height MUST match Width */
	object-fit: cover;  /* This crops the photo instead of squishing it */
	border-radius: 9999px; 
	margin: 0 auto 15px auto; /* Centers the circle in the card */
	display: block;
	border: 3px solid #eee; /* Optional: adds a nice ring around the photo */
}

/* Responsive: Stack columns on smaller screens */
@media (max-width: 1024px) {
	.custom-bestuursleden_grid {
		max-width: 90%; /* Give it some breathing room on tablets */
	}
}

/* Tablet adjustment */
@media (max-width: 768px) {
	.custom-bestuursleden_grid {
		grid-template-columns: repeat(2, 1fr); /* 2 columns for tablet */
	}
}

/* Mobile adjustment */
@media (max-width: 480px) {
	.custom-bestuursleden_grid {
		grid-template-columns: 1fr; /* 1 column for mobile */
	}
}
/* END custom post types */

/* .h1-default to .h5-default:
   create consistent "default" styles across browsers */
.h1-default {  
  display: block;  
  font-size: 2em;  
  font-weight: 700; /* bold */  
  margin-block-start: 0.67em;  
  margin-block-end: 0.67em;  
  line-height: normal;  
}  
 
/* Replicate H2 default styles */  
.h2-default {  
  display: block;  
  font-size: 1.5em;  
  font-weight: 700;  
  margin-block-start: 0.83em;  
  margin-block-end: 0.83em;  
  line-height: normal;  
}  
 
/* Replicate H3 default styles */  
.h3-default {  
  display: block;  
  font-size: 1.17em;  
  font-weight: 700;  
  margin-block-start: 1em;  
  margin-block-end: 1em;  
  line-height: normal;  
}  
 
/* Replicate H4 default styles */  
.h4-default {  
  display: block;  
  font-size: 1em;  
  font-weight: 700;  
  margin-block-start: 1.33em;  
  margin-block-end: 1.33em;  
  line-height: normal;  
}  
 
/* Replicate H5 default styles */  
.h5-default {  
  display: block;  
  font-size: 0.83em;  
  font-weight: 700;  
  margin-block-start: 1.67em;  
  margin-block-end: 1.67em;  
  line-height: normal;  
}