/* Responsive Fixes voor betere leesbaarheid en weergave op mobiele apparaten */

/* Verbeter tekst wrapping en leesbaarheid */
body {
	word-wrap: break-word;
	overflow-x: hidden;
}

/* Fix voor buttons - laat tekst wrappen op mobiel */
@media screen and (max-width: 736px) {
	.button {
		white-space: normal !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
		padding: 0.75rem 1rem !important;
		line-height: 1.4 !important;
		min-height: 3rem;
		height: auto !important;
	}
	
	.button.large {
		padding: 1rem 1.25rem !important;
		min-height: 3.5rem;
	}
}

/* Verbeter headings op mobiel */
@media screen and (max-width: 736px) {
	h1 {
		font-size: 2rem !important;
		line-height: 1.2 !important;
		word-wrap: break-word;
	}
	
	h2 {
		font-size: 1.5rem !important;
		line-height: 1.3 !important;
		word-wrap: break-word;
	}
	
	h3 {
		font-size: 1.2rem !important;
		line-height: 1.4 !important;
	}
	
	header.major h1,
	header.major h2 {
		font-size: 1.75rem !important;
		line-height: 1.3 !important;
	}
}

/* Verbeter paragraaf tekst op mobiel */
@media screen and (max-width: 736px) {
	p {
		text-align: left !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
		line-height: 1.6 !important;
	}
	
	header.major > p {
		text-align: center !important;
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
	}
}

/* Fix voor actions lijsten op mobiel */
@media screen and (max-width: 480px) {
	ul.actions li .button {
		white-space: normal !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
		text-align: center;
		padding: 0.75rem 0.5rem !important;
		line-height: 1.4 !important;
		min-height: 3rem;
		height: auto !important;
	}
}

/* Verbeter layout van actions buttons op desktop */
ul.actions {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 1rem !important;
	margin-left: 0 !important;
}

ul.actions li {
	flex: 0 1 auto !important;
	min-width: 0;
	padding: 0 !important;
	margin: 0 !important;
}

ul.actions li .button {
	white-space: normal !important;
	word-wrap: break-word;
	overflow-wrap: break-word;
	text-align: center;
	display: inline-block;
	min-width: 200px;
	max-width: 100%;
	height: auto !important;
	min-height: 3rem;
	padding: 0.75rem 1.5rem !important;
	line-height: 1.4 !important;
	box-sizing: border-box;
	overflow: visible;
}

/* Op middelgrote schermen: 2 kolommen */
@media screen and (min-width: 481px) and (max-width: 980px) {
	ul.actions li {
		flex: 1 1 calc(50% - 0.5rem) !important;
		min-width: 200px;
	}
}

/* Op desktop: 3 kolommen */
@media screen and (min-width: 981px) {
	ul.actions li {
		flex: 1 1 calc(33.333% - 0.67rem) !important;
		min-width: 250px;
	}
}

/* Verbeter leesbaarheid van lange download links */
@media screen and (max-width: 736px) {
	ul.actions li a.button {
		font-size: 0.85rem !important;
		white-space: normal !important;
		word-wrap: break-word;
		overflow-wrap: break-word;
		display: block;
		text-align: center;
		height: auto !important;
		min-height: 3rem;
		padding: 0.75rem 1rem !important;
		line-height: 1.4 !important;
	}
}

/* Zorg dat buttons met iconen ook goed wrappen */
ul.actions li .button.icon {
	white-space: normal !important;
	height: auto !important;
	min-height: 3rem;
	padding: 0.75rem 1.5rem 0.75rem 2.5rem !important;
	line-height: 1.4 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center;
	word-wrap: break-word;
	overflow-wrap: break-word;
	box-sizing: border-box;
}

ul.actions li .button.icon:before {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	margin-right: 0.5rem !important;
	flex-shrink: 0;
}

/* Fix voor intro tekst */
@media screen and (max-width: 736px) {
	#intro h1 {
		font-size: 2.5rem !important;
		line-height: 1.2 !important;
	}
	
	#intro p {
		font-size: 1rem !important;
		line-height: 1.6 !important;
		text-align: center;
	}
}

/* Maak intro button groter zodat tekst zichtbaar is */
#intro .button.icon.solo {
	width: auto !important;
	height: auto !important;
	min-width: 280px !important;
	padding: 1rem 2rem 1rem 3rem !important;
	text-indent: 0 !important;
	line-height: 1.5 !important;
	white-space: nowrap !important;
	border-radius: 2rem !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.75rem !important;
}

#intro .button.icon.solo:before {
	position: relative !important;
	left: auto !important;
	top: auto !important;
	width: auto !important;
	height: auto !important;
	line-height: inherit !important;
	margin-right: 0 !important;
	font-size: 1rem !important;
}

/* Responsive aanpassing voor kleinere schermen */
@media screen and (max-width: 736px) {
	#intro .button.icon.solo {
		min-width: 240px !important;
		padding: 0.875rem 1.5rem 0.875rem 2.5rem !important;
		font-size: 0.9rem !important;
		white-space: normal !important;
	}
}

/* Verbeter footer op mobiel */
@media screen and (max-width: 736px) {
	#footer {
		padding: 2rem 1rem !important;
	}
	
	#footer section {
		margin-bottom: 2rem;
	}
	
	#footer h3 {
		font-size: 1.1rem !important;
	}
	
	#footer p {
		font-size: 0.9rem !important;
		line-height: 1.6 !important;
	}
}

/* Fix voor copyright tekst */
@media screen and (max-width: 480px) {
	#copyright ul li {
		display: block;
		margin-bottom: 0.5rem;
		font-size: 0.85rem !important;
		word-wrap: break-word;
	}
}

/* Verbeter navigatie op mobiel */
@media screen and (max-width: 736px) {
	#nav ul.links li a {
		padding: 0.5rem 0.75rem;
		font-size: 0.9rem;
		word-wrap: break-word;
	}
}

/* Fix voor images op mobiel */
@media screen and (max-width: 736px) {
	.image {
		max-width: 100% !important;
		height: auto !important;
	}
	
	.image.main img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
	
	.image.fit img {
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain !important;
	}
}

/* Verbeter posts grid op mobiel */
@media screen and (max-width: 736px) {
	.posts article {
		margin-bottom: 2rem !important;
	}
	
	.posts article header h2 {
		font-size: 1.3rem !important;
		line-height: 1.3 !important;
		word-wrap: break-word;
	}
	
	.posts article p {
		font-size: 0.95rem !important;
		line-height: 1.6 !important;
	}
}

/* Verbeter formulier op mobiel */
@media screen and (max-width: 480px) {
	form input[type="text"],
	form input[type="email"],
	form textarea {
		font-size: 16px !important; /* Voorkomt zoom op iOS */
		padding: 0.75rem !important;
	}
	
	form label {
		font-size: 0.85rem !important;
	}
}

/* Algemene verbeteringen voor leesbaarheid */
* {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Zorg dat content niet buiten viewport valt */
#wrapper {
	max-width: 100%;
	overflow-x: hidden;
}

#main {
	max-width: 100%;
	overflow-x: hidden;
}

/* Verbeter spacing op kleine schermen */
@media screen and (max-width: 480px) {
	.post {
		padding: 1.5rem 1rem !important;
	}
	
	.post header.major {
		margin-bottom: 2rem !important;
	}
	
	.post h2 {
		margin-bottom: 1rem !important;
	}
	
	.post hr {
		margin: 2rem 0 !important;
	}
}