/* --- BASIS RESET --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333333; background: #ffffff; text-align: center; }
.container { width: 95%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
img { max-width: 100%; height: auto; display: block; margin: 0 auto; }

/* --- HEADER & NAVIGATIE --- */
header { background: #1B244F; border-bottom: 5px solid #D1D5DB; padding: 15px 0; position: sticky; top: 0; z-index: 10000; text-align: left; }
.nav-container { display: block; width: 100%; clear: both; }
.site-logo { max-height: 55px; width: auto; float: left; }

.main-nav { float: right; }
.main-nav ul { list-style: none; }
.main-nav ul li { display: inline-block; margin-left: 20px; position: relative; }
.main-nav a { color: #D1D5DB; text-decoration: none; font-weight: bold; text-transform: uppercase; font-size: 13px; line-height: 55px; }
header:after { content: ""; display: table; clear: both; }

/* DROPDOWN FIX (Echt een Dropdown nu) */
.dropdown-content { 
    display: none; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    background: #1B244F; 
    min-width: 220px; 
    z-index: 999; 
    border-top: 3px solid #D1D5DB; 
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}
.dropdown:hover .dropdown-content { display: block; }
.dropdown-content li { display: block !important; margin: 0 !important; width: 100%; text-align: left; }
.dropdown-content a { display: block !important; line-height: 1.4 !important; padding: 12px 15px !important; text-transform: none; border-bottom: 1px solid rgba(255,255,255,0.1); }

/* --- HERO & KNOP (FOTO FIX) --- */
.hero { background: #1B244F; color: #ffffff; padding: 60px 0; margin: 0; }
.hero h1 { font-size: 42px; margin-bottom: 10px; }
.btn-hero { 
    display: inline-block; 
    padding: 15px 35px; 
    background: #D1D5DB; 
    color: #1B244F; 
    text-decoration: none; 
    font-weight: bold; 
    border-radius: 4px; 
    text-transform: uppercase; 
    margin-top: 20px; 
}

/* --- SECTIES & WITRUIMTE --- */
.intro-section { padding: 40px 0; clear: both; }
.intro-section p { max-width: 850px; margin: 0 auto 20px; font-size: 18px; }

/* --- CONTACT PAGINA (KAART NAAST TEKST) --- */
.contact-flex { display: block; width: 100%; margin: 40px 0; clear: both; }
.contact-info { width: 45%; float: left; text-align: left; }
.contact-map { width: 50%; float: right; }
.contact-map iframe { width: 100%; height: 400px; border-radius: 8px; border: 1px solid #ddd; }
.contact-flex:after { content: ""; display: table; clear: both; }

.contact-form-box { background: #f9f9f9; padding: 40px; border-radius: 12px; border: 1px solid #eee; margin-top: 40px; clear: both; text-align: left; }
.form-input { width: 100%; padding: 12px; margin: 10px 0 20px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; }

/* --- PRODUCT GRID (3 NAAST ELKAAR) --- */
.product-grid { text-align: center; padding: 30px 0; }
.product-card { display: inline-block; vertical-align: top; width: 30%; margin: 1%; background: #fff; border: 1px solid #eee; border-radius: 8px; overflow: hidden; text-align: center; }
.img-container { height: 230px; background: #f9f9f9; overflow: hidden; }
.img-container img { width: 100%; height: 100%; object-fit: cover; }

/* --- ADMIN DASHBOARD --- */
.admin-card { background: #ffffff; border: 1px solid #ddd; padding: 25px; border-radius: 10px; margin-bottom: 20px; text-align: left; }
.admin-stats { display: block; width: 100%; margin-bottom: 30px; }
.stat-box { display: inline-block; width: 31%; margin: 1%; background: #1B244F; color: #fff; padding: 20px; border-radius: 8px; text-align: center; }
.admin-table { width: 100%; border-collapse: collapse; background: #fff; margin-top: 20px; }
.admin-table th { background: #1B244F; color: #fff; padding: 12px; text-align: left; }
.admin-table td { padding: 12px; border-bottom: 1px solid #eee; }

/* --- FOOTER --- */
footer { background: #1B244F; color: #D1D5DB; padding: 40px 0; border-top: 5px solid #D1D5DB; margin-top: 40px; clear: both; }

/* MOBIEL */
@media (max-width: 850px) {
    .site-logo, .main-nav { float: none; text-align: center; }
    .contact-info, .contact-map, .product-card, .stat-box { width: 100%; float: none; margin: 10px 0; }
}