/* ==========================================================================
 *   1. SCHERMVULLENDE ACHTERGROND & STICKY FOOTER STRUCTUUR
 *   ========================================================================== */

/* Algemene instellingen voor de achtergrondafbeelding */
.bg-full-body {
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

/* Specifieke afbeeldingen per pagina */
.bg-start 		{ background-image: url('/img/start.jpg'); }
.bg-tools 		{ background-image: url('/img/tools.jpg'); }
.bg-skills		{ background-image: url('/img/skills.jpg'); }
.bg-project		{ background-image: url('/img/project.jpg'); }
.bg-php			{ background-image: url('/img/php.jpg'); }
.bg-zzp-denhaag	{ background-image: url('/img/zzp-denhaag.jpg'); }
.bg-bi			{ background-image: url('/img/bi.jpg'); }

/* Dwingt de footer naar de bodem en regelt de ruimte onder de navigatiebalk */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding-top: 35px; /* Ruimte voor de 32px nav-balk op desktop */
}

/* Zorgt dat dit element alle resterende verticale ruimte opeist */
.content-wrapper {
	flex: 1;
}

/* ==========================================================================
 *   2. BRANDING KLEUREN
 *   ========================================================================== */
.prof-blue {
	background-color: #2157d1;
	color: #ffffff;
}
.prof-olive {
	background-color: #d7a357;
	color: #ffffff;
}
.prof-brown {
	background-color: #9a623f;
	color: #ffffff;
}
.prof-gray {
	background-color: #5d5f4a;
	color: #ffffff;
}
.prof-red {
	background-color: #9b273c;
	color: #ffffff;
}
.extraLargeFont {
	font-size: 2.2em;
	font-weight: bold;
}


/* ==========================================================================
 *   3. COMPONENT STYLING (NAVIGATIE & FOOTER)
 *   ========================================================================== */

/* Navigatie lettertype */
.nav-custom {
	font-family: 'Courier New', Courier, monospace;
}

/* Gecentreerde container met een max-breedte van 1500px voor de footer */
.footer-max {
	max-width: 1500px;
	margin: 0 auto;
}
.card {
	flex: 1 1 280px;
	max-width: 280px;
	height: 420px;
}
.cardLong {
	height: 560px;
}
.cards-row {
	display: flex !important; /* !important zorgt dat het W3.CSS overschrijft */
	flex-wrap: wrap;
	margin: 0 !important;    /* Verwijdert de indent/inspringing aan de linkerkant */
	padding: 0 !important;   /* Zorgt dat de rij strak tegen de rand begint */
	gap: 64px;               /* Meer ruimte tussen de kaarten (pas naar wens aan) */
	justify-content: center;
}
.card h3 {
	width:100%;
	font-weight: bold;
	text-align: center;
	font-size:2em;
	margin: 0px 0px 10px 0px;;

}
.card p {
	padding: 0px 16px 8px 16px;
}
.card li {padding: 8px 16px 0px 16px;}
.benefit {
	font-weight: bold;
	font-size: 1.2em;
	color: maroon;
	text-align: center;


}


/* ==========================================================================
 *   4. RESPONSIVITEIT (MOBIEL)
 *   ========================================================================== */
@media (max-width: 600px) {
	body {
		padding-top: 60px; /* Meer ruimte op mobiel omdat de nav-balk daar 2 regels hoog is */
	}
	/* Centreert de vlaggen en het menu netjes op mobiele schermen */
	.w3-mobile {
		text-align: center !important;
	}
}