/*!
Theme Name: Buurkracht Child
Theme URI: http://underscores.me/
Author: Buurkracht
Author URI: http://www.buurkracht.nl
Description: Buurkracht is de kracht die jij en je buren samen hebben. De kracht om de buurt duurzamer, veiliger of gezelliger te maken. Gebruik je buurkracht!
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Template: buurkracht
Text Domain: buurkracht-child
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Buurkracht is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# CSS Custom Properties (Variables)
# Font Declarations
# Base Styles
	- HTML & Body
	- Typography
	- Lists
# Layout Components
	- Site Main
	- Site Header
	- Site Footer
# Navigation
	- Main Navigation
	- Menu Toggle
	- Submenu
# Content Components
	- Hero Section
	- Content Blocks
	- News Grid
	- Posts Grid
	- Pagination
# WordPress Blocks
	- Headings
	- Media & Text
	- Columns
	- Buttons
	- Images
# Utility Classes
# Responsive Design
	- Mobile (max-width: 767px)
	- Tablet (768px - 1023px)
	- Desktop (1024px+)
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# CSS Custom Properties (Variables)
--------------------------------------------------------------*/

:root {
	/* Brand Colors */
	--color-brand-black: #222;	
	--color-brand-blue: #004b7d;
	--color-brand-blue-secondary: #637492;
	--color-brand-blue-tertiary: #cddeec;
	--color-brand-blue-light: #e6f4ff;
	--color-brand-blue-extra-light: #f5fbff;	
	--color-brand-orange: #fa6400;
	--color-brand-orange-light: #ffe2b1;	
	--color-brand-green: #4bd316;
	--color-brand-green-light: #d3fa80;
	--color-brand-blue-four: #93a8c1;

	/* Typography Scale */
	--text-xxs: 0.5rem; /* 8px */
	--text-xx: 0.67rem; /* 10px */
	--text-small: 0.75rem; /* 12px */
	--text-base: 1rem;     /* 16px */
	--text-lg: 1.125rem;   /* 18px */
	--text-xl: 1.375rem;   /* 22px */
	--text-2xl: 2rem;      /* 32px */
	--text-3xl: 2.25rem;   /* 36px */
	--text-4xl: 3.125rem;  /* 50px */

	/* Spacing */
	--margin-bk-block-bottom: 2em;
	--margin-bk-block-top: 2em;
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 1.5rem;
	--spacing-lg: 2rem;
	--spacing-xl: 3rem;

	/* Layout */
	--container-max-width: 1200px;
	--header-height: 100px;
	--border-radius: 3px;
	--border-radius-lg: 15px;
	--border-radius-xl: 40px;
	--border-radius-full: 50px;

	/* Shadows */
	--shadow-sm: 0 2px 5px rgba(0,0,0,0.1);
	--shadow-md: 0 4px 15px rgba(0,0,0,0.1);
	--shadow-lg: 0 8px 25px rgba(0,0,0,0.15);
	--shadow-hover: 0 10px 30px rgba(0,0,0,0.1);

	/* Transitions */
	--transition-base: all 0.3s ease;
	--transition-transform: transform 0.3s ease;
}

/*--------------------------------------------------------------
# Font Declarations
--------------------------------------------------------------*/

@font-face {
	font-family: "swiss";
	src: url("fonts/swiss.woff2");
	font-weight: normal; 
	font-display: swap;
}

@font-face {
	font-family: "swiss";
	src: url("fonts/swiss.woff2");
	font-weight: bold;
	font-display: swap;
}

@font-face {
	font-family: "montserrat";
	src: url("fonts/montserrat.woff2");
	font-weight: normal;
	font-display: swap;
}

/*--------------------------------------------------------------
# Base Styles
--------------------------------------------------------------*/

/* HTML & Body
--------------------------------------------- */
html, 
body {
	margin: 0;
	padding: 0;	
	width: 100%;
	overflow-x: hidden;
	font-family: montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: clamp(var(--text-base), 1.5vw, var(--text-lg));
	color: var(--color-brand-blue);
}



/* Typography
--------------------------------------------- */
h1 {
	font-family: swiss, sans-serif;
	font-size: clamp(var(--text-2xl), 3vw, var(--text-3xl));
	color: var(--color-brand-orange);
	margin: 0 0 var(--spacing-md) 0;
}

h2 {
	font-family: swiss, sans-serif;
	font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
	color: var(--color-brand-blue);
	margin: 0 0 var(--spacing-md) 0;
}

h3 {
	font-family: swiss, sans-serif;
	font-size: clamp(var(--text-lg), 2vw, var(--text-xl));
	color: var(--color-brand-orange);
	margin: 0 0 var(--spacing-sm) 0;
}

h6 {
	font-family: swiss, sans-serif;
	font-size: var(--text-lg);
	margin: 0 0 var(--spacing-sm) 0;
}

p {
	font-family: montserrat, sans-serif;
	font-size: clamp(var(--text-base), 1.5vw, var(--text-lg));
	color: var(--color-brand-blue);
	line-height: 1.6;
	margin-bottom: var(--spacing-md);
}

/* Lists
--------------------------------------------- */
ul, 
ol {
	margin: 0 0 var(--spacing-md) 0;
}

li {
	padding: 0 0 0.6em 0;
	color: var(--color-brand-blue);
}

/*--------------------------------------------------------------
# Layout Components
--------------------------------------------------------------*/

/* Site Main
--------------------------------------------- */
.site-main {
	max-width: var(--container-max-width);
	margin: 0 auto;
	padding: clamp(80px, 12vw, var(--header-height)) clamp(var(--spacing-sm), 3vw, var(--spacing-lg)) var(--spacing-lg); /* oude waarde: 100px 20px 20px */
}

/* Site Header
--------------------------------------------- */
.site-header {
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	background: #fff; 
	z-index: 99999; 
	box-shadow: var(--shadow-sm);
}

.site-header-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: var(--container-max-width);
	width: 100%;
	margin: 0 auto;
	height: var(--header-height);
}

.site-branding {
	display: flex;
	padding-left: clamp(var(--spacing-sm), 3vw, var(--spacing-lg)); /* oude waarde: 20px */
	align-items: center;
}

.custom-logo {
	width: clamp(140px, 20vw, 185px) !important; /* oude waarde: 185px */
	height: auto !important;
}

.header-app {
	display: flex;
	align-items: center;
	margin: 0 clamp(var(--spacing-sm), 4vw, 30px); /* oude waarde: 0 30px */
}

/* Site Footer
--------------------------------------------- */
.site-footer {
	width: 100%;
	text-align: center;
	padding: var(--spacing-lg) 0;
	background-color: rgba(21, 45, 73, 0.99);
	margin-top: clamp(var(--spacing-lg), 5vw, 40px); /* oude waarde: 40px */
}

.footer-content {
	max-width: var(--container-max-width);
	margin: 0 auto;
}

.footer-columns {
	display: flex;
	gap: clamp(var(--spacing-lg), 4vw, 30px); /* oude waarde: 30px */
	padding: clamp(var(--spacing-lg), 5vw, 40px) clamp(var(--spacing-sm), 3vw, var(--spacing-lg)); /* oude waarde: 40px 20px */
}

.footer-column {
	flex: 1;
	text-align: left;
}

.footer-column a {
	text-decoration: none;
	color: var(--color-brand-blue-four);
	transition: var(--transition-base);
}

.footer-column a:hover {
	color: #fff;
}

.footer-column p {
	margin: clamp(var(--spacing-xs), 2vw, var(--spacing-sm)) 0; /* oude waarde: 10px 0 */
	color: var(--color-brand-blue-four);
	font-size: clamp(var(--text-small), 1.0vw, var(--text-base));
}

.footer-column h1,
.footer-column h2,
.footer-column h3,
.footer-column h4,
.footer-column h5,
.footer-column h6 {
	margin: clamp(var(--spacing-xs), 2vw, var(--spacing-sm)) 0; /* oude waarde: 10px 0 */
	color: #fff;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

/* Main Navigation
--------------------------------------------- */
.main-navigation {
	margin-left: auto;
	text-align: right; 
	display: flex;
	justify-content: flex-end;   
	padding-right: clamp(var(--spacing-sm), 3vw, var(--spacing-lg)); /* oude waarde: 20px */
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: clamp(var(--spacing-xs), 2vw, 15px); /* oude waarde: 15px */
	margin-left: auto;
}

.main-navigation li {
	display: inline-block;
	margin-left: clamp(var(--spacing-sm), 4vw, 30px); /* oude waarde: 30px */
	position: relative;
	line-height: var(--header-height);
	padding: 0;
}

.main-navigation a {   
	text-decoration: none;
	color: var(--color-brand-blue);
	font-size: clamp(14px, 1.8vw, 15px); /* oude waarde: 15px */
	transition: var(--transition-base);
}

.main-navigation a:hover {
	color: var(--color-brand-orange);
}

.main-navigation .active > a {     
	color: var(--color-brand-orange);
}



/* Menu Toggle
--------------------------------------------- */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	padding: clamp(var(--spacing-xs), 2vw, var(--spacing-sm)); /* oude waarde: 10px */
	cursor: pointer;
	font-size: clamp(18px, 3vw, 24px);
	color: var(--color-brand-blue);
}

/* Submenu
--------------------------------------------- */
.main-navigation .sub-menu {
	display: none; 
	position: absolute;
	top: 100%;  
	left: clamp(-15px, -2vw, -10px); /* oude waarde: -10px */
	border-top: 3px solid var(--color-brand-orange);
	min-width: clamp(180px, 25vw, 200px); /* oude waarde: 200px */
	background: #fff;
	box-shadow: var(--shadow-sm);
	flex-direction: column; 
	gap: 0; 
	padding: clamp(var(--spacing-xs), 2vw, var(--spacing-sm)) 0; /* oude waarde: 10px 0 */
}

.main-navigation li:hover > .sub-menu {
	display: block;
}

.main-navigation .sub-menu li {
	display: block;
	margin: 0;
	width: 100%;
	text-align: left;
	line-height: 1em;
}

.main-navigation .sub-menu a {
	display: block;
	padding: clamp(var(--spacing-xs), 2vw, var(--spacing-sm)) clamp(var(--spacing-sm), 3vw, var(--spacing-lg)); /* oude waarde: 10px 20px */
	white-space: nowrap;
	width: auto !important;
}

.main-navigation .sub-menu a:hover {
	background-color: #f5f5f5;
}

/*--------------------------------------------------------------
# Content Components
--------------------------------------------------------------*/

/* Hero Section
--------------------------------------------- */
.hero img {
	width: 100%;
	height: auto;
}

/* Content Blocks
--------------------------------------------- */
.content-blocks {
	padding: clamp(var(--spacing-lg), 5vw, 40px) 0; /* oude waarde: 40px 0 */
}

/* Tag Filter
--------------------------------------------- */
.tag-filter {
	border: 2px solid var(--color-brand-orange);
	padding: clamp(3px, 1vw, 5px); /* oude waarde: 5px */
	font-size: var(--text-small);
	border-radius: var(--border-radius);
}

/* News Grid
--------------------------------------------- */
.news-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 40vw, 350px), 1fr)); /* oude waarde: minmax(350px, 1fr) */
	gap: clamp(var(--spacing-lg), 4vw, 30px); /* oude waarde: 30px */
	max-width: var(--container-max-width);
	margin: var(--margin-bk-block-top) auto;
}

.news-grid h2 {
	margin-bottom: 1em;
}

.news-item-card {
	background: #f8f9fa;
	border-radius: var(--border-radius-xl);
	padding: clamp(var(--spacing-lg), 4vw, 30px) clamp(var(--spacing-sm), 3vw, var(--spacing-lg)); /* oude waarde: 30px 20px */
	text-align: center;
	transition: var(--transition-transform), box-shadow 0.3s ease;
}

.news-item-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-hover);
}

.news-photo {
	width: clamp(80px, 15vw, 120px); /* oude waarde: 120px */
	height: clamp(80px, 15vw, 120px); /* oude waarde: 120px */
	margin: 0 auto clamp(var(--spacing-sm), 3vw, var(--spacing-lg)); /* oude waarde: 0 auto 20px */
	border-radius: var(--border-radius-full);
	overflow: hidden;
	background-color: #e9ecef;
}

.news-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.news-title {
	font-size: clamp(16px, 2.5vw, 18px); /* oude waarde: 18px */
	font-weight: 600;
	color: #2c5282;
	margin-bottom: clamp(3px, 1vw, 5px); /* oude waarde: 5px */
}

.news-excerpt {
	font-size: clamp(var(--text-small), 1.8vw, 14px); /* oude waarde: 14px */
	color: #666;
	margin: 0;
}

/* Posts Grid
--------------------------------------------- */
.category-description {
	font-size: clamp(var(--text-base), 2vw, var(--text-lg)); /* oude waarde: 1.1rem */
	color: #666;
	max-width: clamp(500px, 80vw, 600px); /* oude waarde: 600px */
	margin: 0 auto;
}

.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(clamp(280px, 40vw, 320px), 1fr)); /* oude waarde: minmax(320px, 1fr) */
	gap: clamp(var(--spacing-lg), 4vw, 30px); /* oude waarde: 30px */
	margin-bottom: clamp(var(--spacing-xl), 6vw, 50px); /* oude waarde: 50px */
}

.post-card {
	background: #fff;
	border-radius: var(--border-radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: var(--transition-transform), box-shadow 0.3s ease;
}

.post-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-lg);
}

.post-card-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

.post-image {
	height: clamp(150px, 25vw, 200px); /* oude waarde: 200px */
	overflow: hidden;
}

.post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-transform);
}

.post-card:hover .post-image img {
	transform: scale(1.05);
}

.post-image-placeholder {
	height: clamp(150px, 25vw, 200px); /* oude waarde: 200px */
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(2rem, 4vw, 3rem); /* oude waarde: 3rem */
}

.post-content {
	padding: clamp(var(--spacing-sm), 4vw, 25px); /* oude waarde: 25px */
	font-size: var(--text-base);
}

.post-title {
	font-size: clamp(var(--text-lg), 2.5vw, 1.3rem); /* oude waarde: 1.3rem */
	font-weight: 600;
	color: #2c5282;
	margin-bottom: clamp(var(--spacing-xs), 2vw, var(--spacing-sm)); /* oude waarde: 10px */
	line-height: 1.4;
}

.post-meta {
	margin-bottom: clamp(var(--spacing-sm), 2vw, 15px); /* oude waarde: 15px */
}

.post-date {
	font-size: clamp(var(--text-small), 1.5vw, 0.9rem); /* oude waarde: 0.9rem */
	color: #888;
}

.post-excerpt {
	color: #555;
	line-height: 1.6;
	margin-bottom: clamp(var(--spacing-sm), 2vw, 15px); /* oude waarde: 15px */
}

.post-card:hover .read-more {
	color: #764ba2;
}

/* Pagination
--------------------------------------------- */
.pagination-wrapper {
	text-align: center;
	margin-top: clamp(var(--spacing-lg), 5vw, 40px); /* oude waarde: 40px */
}

.page-numbers {
	display: inline-block;
	padding: clamp(6px, 1.5vw, 8px) clamp(12px, 2.5vw, 16px); /* oude waarde: 8px 16px */
	margin: 0 clamp(2px, 0.5vw, 4px); /* oude waarde: 0 4px */
	background: #f8f9fa;
	color: #2c5282;
	text-decoration: none;
	border-radius: var(--border-radius);
	transition: var(--transition-base);
}

.page-numbers:hover,
.page-numbers.current {
	background: #2c5282;
	color: white;
}

/*--------------------------------------------------------------
# WordPress Blocks
--------------------------------------------------------------*/

/* Block Headings
--------------------------------------------- */
.wp-block-heading.oranje {
	font-family: swiss, sans-serif;
	font-size: clamp(var(--text-2xl), 4vw, 36px); /* oude waarde: 36px */
	color: var(--color-brand-orange);
}

.wp-block-heading.blauw {
	font-family: swiss, sans-serif;
	font-size: clamp(var(--text-xl), 3.5vw, 30px); /* oude waarde: 30px */
	color: var(--color-brand-blue);
}

/* Media & Text Block
--------------------------------------------- */
.wp-block-media-text {
	margin-top: var(--spacing-lg);
	gap: clamp(4%, 8vw, 8%); /* oude waarde: 8% */
}

.wp-block-heading {
	margin-top: var(--spacing-lg);
}

.wp-block-media-text__content {
	padding: 0 !important;
}

/* Columns Block
--------------------------------------------- */
.wp-block-columns {
	gap: clamp(4%, 8vw, 8%); /* oude waarde: 8% */
}

/* Button Blocks
--------------------------------------------- */
.wp-block-button {
	padding-right: clamp(var(--spacing-sm), 3vw, var(--spacing-lg)); /* oude waarde: 20px */
	margin-bottom: 1em !important;
}

/* Primary Button - Orange */
.wp-block-button.is-style-buurkracht-knop-oranje .wp-block-button__link {
	background-color: var(--color-brand-orange);
	color: white;
	border: 2px solid var(--color-brand-orange);
	border-radius: var(--border-radius-full);
	padding: clamp(10px, 2vw, 12px) clamp(20px, 3vw, 24px); /* oude waarde: 12px 24px */
	transition: var(--transition-base);
}

.wp-block-button.is-style-buurkracht-knop-oranje .wp-block-button__link:hover {
	background-color: var(--color-brand-orange-light);
	border-color: var(--color-brand-orange-light);
	color: #333;
}

/* Secondary Button - Blue */
.wp-block-button.is-style-buurkracht-knop-blauw .wp-block-button__link {
	background-color: var(--color-brand-blue);
	color: white;
	border: 2px solid var(--color-brand-blue);
	border-radius: var(--border-radius-full);
	padding: clamp(10px, 2vw, 12px) clamp(20px, 3vw, 24px); /* oude waarde: 12px 24px */
	transition: var(--transition-base);
}

.wp-block-button.is-style-buurkracht-knop-blauw .wp-block-button__link:hover {
	background-color: var(--color-brand-blue-light);
	border-color: var(--color-brand-blue-light);
	color: #333;
}

/* Tertiary Button - Light Blue */
.wp-block-button.is-style-buurkracht-knop-lblauw .wp-block-button__link {
	background-color: var(--color-brand-blue-secondary);
	color: white;
	border: 2px solid var(--color-brand-blue-secondary);
	border-radius: var(--border-radius-full);
	padding: clamp(10px, 2vw, 12px) clamp(20px, 3vw, 24px); /* oude waarde: 12px 24px */
	transition: var(--transition-base);
}

.wp-block-button.is-style-buurkracht-knop-lblauw .wp-block-button__link:hover {
	background-color: var(--color-brand-blue-light);
	border-color: var(--color-brand-blue-light);
	color: #333;
}

/* Image Blocks
--------------------------------------------- */
.wp-block-image.is-style-buurkracht-rounded-image img {
	border-radius: 50%;
	aspect-ratio: 1/1;
	object-fit: cover;
}

.wp-block-image.is-style-buurkracht-image img {
	border: 1px solid var(--color-brand-blue);
	top: 0;
	align-items: flex-start;
}

.wp-block-media-text.is-style-buurkracht-rounded-image img {
	border-radius: 50%;
	aspect-ratio: 1/1;
	object-fit: cover;
	transform: scale(0.75);
}

.wp-block-media-text.is-style-buurkracht-image img {
	border: 1px solid var(--color-brand-blue);
}

/*--------------------------------------------------------------
# Utility Classes
--------------------------------------------------------------*/

/* Rounded Image Utility */
.plaatje_rond {
	border-radius: var(--border-radius-full);
}

/* email adres protectie */
.eprtct {
    unicode-bidi: bidi-override;
    direction: rtl;
}

/*--------------------------------------------------------------
# Responsive Design
--------------------------------------------------------------*/

/* Mobile (max-width: 767px)
--------------------------------------------- */
@media (max-width: 767px) {
	/* Header Adjustments */
	.site-header {
		flex-direction: column;
	}

	.site-header-inner {
		height: auto;
		min-height: var(--header-height);
		padding: var(--spacing-sm) 0;
	}

	.site-branding {
		padding-left: var(--spacing-sm);
	}

	.custom-logo {
		width: 140px !important;
	}

	/* Navigation */
	.menu-toggle {
		display: block;
	}

	.menu-open{
   		display:none;
	}

	.main-navigation {
		padding-right: var(--spacing-sm);
	}

	.main-navigation ul {
		display: none;
		position: absolute;
		top: var(--header-height);
		left: 0;
		width: 100%;
		background: #fff;
		flex-direction: column;
		padding: 0;
		box-shadow: var(--shadow-sm);
	}

	.main-navigation.toggled ul {
		display: block;
	}

	.main-navigation li {
		/* display: block; */
		margin: 0;
		width: 100%;        
		text-align: left;       
		color: var(--color-brand-blue);
		border-bottom: 1px solid #eee;
		line-height: 1em;
	}

	.main-navigation a {
		display: block;
		font-size: 1em;
		padding: var(--spacing-sm) var(--spacing-md);
		border-bottom:1px solid var(--color-brand-blue-four);
	}

	/* Submenu Mobile */
	.main-navigation .sub-menu {
		position: static;
		display: none!important;
		width: 100%;
		box-shadow: none;
		background: #f5f5f5;
		padding: 0;
		z-index: 1001;
		border-top: none;
		min-width: auto;
	}

	.main-navigation .sub-menu li {
		border-bottom: none;
		z-index: 1001;
	}

	.main-navigation .sub-menu a {
		padding-left: calc(var(--spacing-lg) * 2);
	}

	.main-navigation li.active > .sub-menu {
		display: block!important;
	}

	/* Content Adjustments */
	.site-main {
		padding-top: calc(var(--header-height) + var(--spacing-lg));
	}

	/* Footer */
	.footer-columns {
		flex-direction: column;
		gap: var(--spacing-lg);
	}
	
	.footer-column {
		margin-bottom: var(--spacing-lg);
	}

	/* Grid Adjustments */
	.news-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	.posts-grid {
		grid-template-columns: 1fr;
		gap: var(--spacing-lg);
	}

	/* Typography Mobile Adjustments */
	h1 {
		font-size: clamp(var(--text-xl), 5vw, var(--text-2xl));
	}

	h2 {
		font-size: clamp(var(--text-lg), 4vw, var(--text-xl));
	}

	/* Button Mobile Adjustments */
	.wp-block-button {
		padding-right: var(--spacing-sm);
	}

	/* News Item Card Mobile */
	.news-item-card {
		padding: var(--spacing-lg) var(--spacing-sm);
	}

	.news-photo {
		width: 80px;
		height: 80px;
		margin-bottom: var(--spacing-sm);
	}

	/* Post Card Mobile */
	.post-image,
	.post-image-placeholder {
		height: 150px;
	}

	.post-content {
		padding: var(--spacing-sm);
	}

	.post-title {
		font-size: var(--text-lg);
	}
}

/* Tablet (768px - 1023px)
--------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {
	/* Navigation */
	.menu-toggle {
		display: none;
	}
	
	.main-navigation ul {
		display: flex;
	}

	/* Grid Adjustments for Tablet */
	.news-grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: var(--spacing-lg);
	}

	.posts-grid {
		grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
		gap: var(--spacing-lg);
	}

	/* Header Adjustments */
	.custom-logo {
		width: 160px !important;
	}

	/* Typography Tablet Adjustments */
	h1 {
		font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl));
	}

	h2 {
		font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl));
	}

	/* Footer Tablet */
	.footer-columns {
		gap: var(--spacing-lg);
	}

	/* News Item Card Tablet */
	.news-item-card {
		padding: var(--spacing-lg);
	}

	.news-photo {
		width: 100px;
		height: 100px;
	}
}

/* Desktop (1024px+)
--------------------------------------------- */
@media (min-width: 1024px) {
	/* Navigation */
	.menu-toggle {
		display: none;
	}
	
	.main-navigation ul {
		display: flex;
	}

	/* Ensure desktop layout remains unchanged */
	.site-main {
		padding: var(--header-height) var(--spacing-lg) var(--spacing-lg);
	}

	.custom-logo {
		width: 185px !important;
	}

	/* Desktop specific adjustments */
	.news-grid {
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	}

	.posts-grid {
		grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	}

	/* Hover effects for desktop */
	.main-navigation a:hover {
		color: var(--color-brand-orange);
	}

	.news-item-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--shadow-hover);
	}

	.post-card:hover {
		transform: translateY(-5px);
		box-shadow: var(--shadow-lg);
	}

	.post-card:hover .post-image img {
		transform: scale(1.05);
	}
}

/* 2025-09-27 Wordt niet gebruikt - oude media query vervangen door responsive versie
@media (max-width: 768px) {
    .site-header {
        flex-direction: column;
    }
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        padding: 10px;
        cursor: pointer;
    }
    .main-navigation ul {
        display: none;
        position: absolute;
        top: 100px;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        padding: 0;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    .main-navigation.toggled ul {
        display: block;
    }
    .main-navigation li {
        display: block;
        margin: 0;
        width: 100%;        
        text-align: left;       
        color: var(--color-brand-blue);
        border-bottom: 1px solid #eee;
        line-height: 1em;
    }
    .main-navigation a {
        display: block;
        font-size: 1em;
        padding: 15px 20px;
    }
    .main-navigation .sub-menu {
        position: static;
        display: none;
        width: 100%;
        box-shadow: none;
        background: #f5f5f5;
        padding: 0;
        z-index: 1001;
    }
    .main-navigation .sub-menu li {
        border-bottom: none;
        z-index:1001;
    }
    .main-navigation .sub-menu a {
        padding-left: 40px;
    }
    .main-navigation li.active > .sub-menu {
        display: block;
    }
    .footer-columns {
        flex-direction: column;
    }
    .footer-column {
        margin-bottom: 30px;
    }
}
*/