/* Reset en Basis */
:root {
    /* Light Mode Defaults */
    --primary-color: #007bff; --secondary-color: #6c757d;
    --gradient-start: #0d47a1; --gradient-end: #42a5f5;
    --button-bg: #007bff; --button-text: #ffffff;
    --text-dark: #333333; --text-light: #ffffff;
    --section-bg-light: #f8f9fa; --section-bg-medium: #e9ecef;
    --footer-bg: #212529; --icon-color: #007bff;

    --body-bg: #ffffff;
    --card-bg: #ffffff;
    --text-primary: var(--text-dark);
    --text-secondary: #555;
    --border-color: #dee2e6;
    --footer-text: #adb5bd;
    --footer-link-hover: var(--text-light);
    --hero-text-bg: #ffffff; /* Default for light mode */
    --navbar-bg: #ffffff;
    --navbar-border: #e9ecef;
    --navbar-shadow: rgba(0,0,0,0.08);
    --modal-bg: #ffffff; /* Mobile nav background */
    --blockquote-border: var(--secondary-color);
    --link-color: var(--primary-color);
    --link-hover-color: color-mix(in srgb, var(--primary-color) 80%, black);
}

body {
    margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-primary); /* Use variable */
    background-color: var(--body-bg); /* Use variable */
    line-height: 1.6; font-size: 16px;
    display: flex; flex-direction: column; min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth theme transition */
}
main { flex-grow: 1; }
.container { max-width: 1140px; margin: 0 auto; padding: 0 15px; }
h1, h2, h3, h4, h5, h6 { margin-top: 0; line-height: 1.3; font-weight: 600; color: var(--text-primary); /* Use variable */ }
h1 { font-size: 2.6rem; margin-bottom: 0.5rem; }
h2 { font-size: 2rem; margin-bottom: 1.5rem; }
h3 { font-size: 1.3rem; margin-bottom: 0.8rem; }
section {
    padding: 60px 0; border-bottom: 1px solid var(--border-color); /* Use variable */
    background-color: transparent; /* Default section bg, override inline */
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
#models, #contact, #trivia { background-color: var(--section-bg-light); } /* Apply specific section BGs */
#tech-specs { background-color: var(--section-bg-medium); }

section:last-of-type, main section:last-of-type { border-bottom: none; }
a { color: var(--link-color); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: var(--link-hover-color); }
img { max-width: 100%; height: auto; display: block; border-radius: 4px; }
.text-center { text-align: center; }
.lead { font-size: 1.2rem; font-weight: 300; margin-bottom: 1.5rem; }
.intro-text { max-width: 700px; margin-left: auto; margin-right: auto; margin-bottom: 2.5rem; color: var(--text-secondary); font-size: 1.1rem; line-height: 1.7; }
p strong, li strong { font-weight: 600; color: var(--text-primary); }
p em, li em { font-style: italic; color: var(--text-secondary); }

/* Navbar */
.navbar {
    padding: 0.8rem 0; background-color: var(--navbar-bg);
    box-shadow: 0 1px 3px var(--navbar-shadow);
    position: sticky; top: 0; z-index: 1000;
    border-bottom: 1px solid var(--navbar-border);
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.navbar .container { display: flex; justify-content: space-between; align-items: center; }
.navbar .logo { max-height: 45px; width: auto; }
.navbar .logo-link:hover { opacity: 0.8; }
.navbar .logo-text { font-size: 1.5rem; font-weight: bold; color: var(--text-primary); }
.desktop-nav {}
.desktop-nav ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; /* Vertically align with logo/flags */ }
.desktop-nav li { margin-left: 28px; }
.desktop-nav a { color: var(--text-primary); font-weight: 500; padding: 5px 0; position: relative; }
.desktop-nav a::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 2px; background-color: var(--primary-color); transition: width 0.3s ease; }
.desktop-nav a:hover::after { width: 100%; }
.navbar-toggler { display: none; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-primary); margin-left: 15px; /* Space from flags */ }
.navbar-toggler svg { width: 30px; height: 30px; vertical-align: middle; }

/* Language Switcher */
.language-switcher { margin-left: auto; /* Pushes to the right before toggler */ padding-left: 20px; }
.language-switcher a {
    display: inline-block; margin-left: 10px; text-decoration: none; font-size: 1.4rem; /* Adjust size */
    opacity: 0.6; transition: opacity 0.2s ease;
}
.language-switcher a:hover { opacity: 1; }
.language-switcher a.active { opacity: 1; transform: scale(1.1); /* Slightly larger active flag */ cursor: default; }


.mobile-nav { display: none; position: fixed; top: 0; right: -300px; width: 300px; max-width: 80%; height: 100%; background-color: var(--modal-bg); box-shadow: -2px 0 5px rgba(0,0,0,0.1); padding: 60px 20px 20px 20px; z-index: 1001; transition: right 0.3s ease-in-out, background-color 0.3s ease; overflow-y: auto; }
.mobile-nav.active { display: block; right: 0; }
.mobile-nav-close { position: absolute; top: 15px; right: 15px; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-primary); }
.mobile-nav-close svg { width: 24px; height: 24px; }
.mobile-nav nav ul { list-style: none; padding: 0; margin: 0; }
.mobile-nav nav li { margin-bottom: 0.5rem; }
.mobile-nav nav a { display: block; padding: 10px; font-size: 1.1rem; color: var(--text-primary); font-weight: 500; border-radius: 4px; }
.mobile-nav nav a:hover { color: var(--primary-color); background-color: rgba(0,0,0,0.05); } /* Subtle hover */
.mobile-nav .mobile-lang-divider { height: 1px; background-color: var(--border-color); margin: 1rem 0; }
.mobile-nav nav a.active { color: var(--primary-color); font-weight: bold; }

body.mobile-nav-open { overflow: hidden; }


/* Knoppen */
.btn { display: inline-block; padding: 10px 25px; border: none; border-radius: 5px; cursor: pointer; font-size: 0.95rem; font-weight: 500; margin: 5px; text-align: center; transition: transform 0.2s ease-out, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); }
.btn-primary { background-color: var(--button-bg); color: var(--button-text); border: 2px solid var(--button-bg); }
.btn-primary:hover { background-color: color-mix(in srgb, var(--button-bg) 85%, black); border-color: color-mix(in srgb, var(--button-bg) 85%, black); }
/* Styling for btn-secondary when used on dark background (overlay hero) */
.btn-secondary { background-color: transparent; color: var(--text-light); border: 2px solid var(--text-light); }
.btn-secondary:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.5); }
/* Styling for btn-secondary when used on light background (imageTopTextBottom hero OR light mode) */
.btn-secondary-on-light { background-color: transparent; color: var(--button-bg); border: 2px solid var(--button-bg); }
.btn-secondary-on-light:hover { background-color: var(--button-bg); color: var(--button-text); border-color: var(--button-bg); }

/* --- HERO LAYOUT STYLING --- */
/* Default: Text Over Image (hero-section) */
.hero-section {
    color: var(--text-light); /* Text color default light */
    position: relative; padding: 120px 0;
    background-size: cover; background-position: center center; background-repeat: no-repeat;
    border-bottom: none;
}
.hero-content { position: relative; z-index: 2; }
.hero-content h1 { color: var(--text-light); text-shadow: 1px 1px 4px rgba(0,0,0,0.5); }
.hero-content .lead { text-shadow: 1px 1px 3px rgba(0,0,0,0.5); color: rgba(255, 255, 255, 0.95); font-size: 1.3rem; }

/* Alternative: Image Top / Text Bottom */
.hero-image-container {
    height: 450px; background-size: cover; background-position: center center;
    background-repeat: no-repeat; display: block;
}
.hero-image-placeholder-color { height: 300px; }
.hero-text-container {
     padding: 60px 0;
     background-color: var(--hero-text-bg); /* Uses variable for light/dark */
     transition: background-color 0.3s ease;
}
.hero-text-container h1 {
    color: var(--text-primary); /* Use theme text color */
    text-shadow: none; margin-bottom: 1rem;
}
.hero-text-container p {
    color: var(--text-primary); /* Use theme text color */
     text-shadow: none; font-size: 1.2rem; font-weight: 300;
     margin-bottom: 2rem; max-width: 750px; margin-left: auto; margin-right: auto;
 }
 /* Button styling already covered by .btn-primary and .btn-secondary-on-light */

/* Development/History/About/Trivia Sectie */
.about-section, .trivia-section {}
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 3rem; }
.feature-box { background-color: var(--card-bg); padding: 2rem; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; display: flex; align-items: flex-start; border: 1px solid var(--border-color); }
.feature-box:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0,0,0,0.07); }
.feature-icon { margin-right: 1rem; margin-bottom: 0; flex-shrink: 0; margin-top: 2px; }
.feature-icon svg { width: 32px; height: 32px; color: var(--primary-color); }
.feature-content {}
.feature-box h3 { color: var(--text-primary); margin:0 0 0.3rem 0; font-size: 1.15rem; }
.feature-box p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.5; margin: 0; }

/* E30 Models Sectie */
.models-section {}
.models-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 3rem; }
.model-card { background-color: var(--card-bg); border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.07); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; border: 1px solid var(--border-color); }
.model-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.model-image { width: 100%; height: 200px; object-fit: cover; display: block; }
.model-image-placeholder { width: 100%; height: 200px; background-color: #ccc; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #fff; font-weight: bold; } /* Placeholder styling needs dark mode review if needed */
.model-info { padding: 1.5rem; }
.model-info h3 { margin-top: 0; margin-bottom: 0.7rem; color: var(--primary-color); }
.model-info p { font-size: 0.95rem; color: var(--text-secondary); margin-bottom: 0; line-height: 1.6; }

/* Tech Specs Sectie */
.tech-specs-section {}
.engines-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 30px; margin-top: 3rem; margin-bottom: 3rem; }
.engine-card {
    display: flex; flex-direction: column; align-items: center;
    background-color: var(--card-bg); border-radius: 6px; box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    overflow: hidden; padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
    text-align: center; border: 1px solid var(--border-color);
}
.engine-card:hover { transform: scale(1.03); box-shadow: 0 6px 15px rgba(0,0,0,0.08); }
.engine-image, .engine-image-placeholder {
    width: 150px; height: 150px; object-fit: cover; border-radius: 50%;
    flex-shrink: 0; margin-bottom: 1rem; border: 3px solid var(--section-bg-medium); /* Use bg color for border */
}
.engine-image-placeholder { background-color: #ddd; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: bold; }
.engine-info h3 { margin: 0 0 0.3rem 0; font-size: 1.1rem; color: var(--primary-color); }
.engine-info p { font-size: 0.9rem; color: var(--text-secondary); margin: 0; line-height: 1.5; }
.tech-highlight {
    background-color: var(--section-bg-light); /* Use var for bg */
    border-left: 4px solid var(--blockquote-border); padding: 1.5rem; margin-top: 2.5rem; border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.tech-highlight h4 { margin: 0 0 0.5rem 0; color: var(--secondary-color); font-size: 1.1rem; }
.tech-highlight p { margin: 0; font-size: 0.95rem; color: var(--text-primary); line-height: 1.7; } /* Text primary */


/* Community/Testimonials Sectie */
.testimonials-section {}
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px; max-width: 900px; margin: 3rem auto 0 auto; }
.testimonial-card { background-color: var(--card-bg); padding: 2.5rem 2rem; border-radius: 8px; border-left: 5px solid var(--blockquote-border); box-shadow: 0 5px 15px rgba(0,0,0,0.06); position: relative; text-align: center; margin-top: 45px; transition: background-color 0.3s ease, border-color 0.3s ease; border: 1px solid var(--border-color); }
.testimonial-avatar, .testimonial-avatar-placeholder { width: 80px; height: 80px; border-radius: 50%; margin: -65px auto 1rem auto; display: flex; align-items: center; justify-content: center; border: 4px solid var(--body-bg); /* Use body-bg for border */ box-shadow: 0 2px 5px rgba(0,0,0,0.2); position: relative; z-index: 1; transition: border-color 0.3s ease;}
.testimonial-avatar { object-fit: cover; background-color: var(--card-bg); /* Match card bg */}
.testimonial-avatar-placeholder { background-color: #bbb; color: #fff; }
.testimonial-avatar-placeholder svg { width: 40px; height: 40px; opacity: 0.7; }
.testimonial-card .quote { font-style: italic; font-size: 1.05rem; margin-bottom: 1rem; line-height: 1.7; color: var(--text-secondary); }
.testimonial-card .author { font-weight: 600; color: var(--text-primary); margin-top: 1.5rem; font-size: 0.9rem; }

/* Contact Sectie */
.contact-section {}
.contact-details { margin-bottom: 2rem; }
.contact-item { margin-bottom: 1rem; font-size: 1.1rem; }
.contact-item .icon { vertical-align: -3px; color: var(--primary-color); margin-right: 8px;}
.contact-item strong { color: var(--text-primary); } /* Make labels primary text */
.contact-item a { font-weight: 500; }
.social-links { margin-top: 2rem; }
.social-icon-link { display: inline-block; color: var(--text-secondary); /* Secondary for less emphasis */ margin: 0 12px; transition: color 0.2s ease, transform 0.2s ease; }
.social-icon-link svg { width: 28px; height: 28px; vertical-align: middle; }
.social-icon-link:hover { color: var(--primary-color); transform: scale(1.1); }

/* Footer */
.footer {
    background-color: var(--footer-bg); color: var(--footer-text);
    padding: 50px 0 20px 0; margin-top: auto; font-size: 0.95rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin-bottom: 30px; }
.footer-column h3 { color: var(--text-light); margin-bottom: 1.2rem; font-size: 1.1rem; font-weight: 500; /* Keep light title */ }
.footer-column p, .footer-column li { margin-bottom: 0.7rem; line-height: 1.6; }
.footer-column ul { list-style: none; padding: 0; margin: 0; }
.footer-column a { color: var(--footer-text); transition: color 0.2s ease; }
.footer-column a:hover { color: var(--footer-link-hover); text-decoration: underline; }
.footer-copyright-inline { display: none; font-size: 0.85rem; color: var(--text-secondary); margin-top: 1rem; } /* Theme color */
.footer-bottom { padding-top: 20px; border-top: 1px solid var(--border-color); /* Use var */ font-size: 0.9rem; color: var(--text-secondary); /* Use var */ transition: border-color 0.3s ease;}

/* SVG Icon Styling */
.icon { color: var(--icon-color); width: 24px; height: 24px; vertical-align: middle; display: inline-block; }
.icon-small { width: 18px; height: 18px; vertical-align: -2px; }
.icon-medium { width: 32px; height: 32px; vertical-align: -4px; }
.icon-large { width: 48px; height: 48px; }
.footer-column li .icon { color: var(--footer-text); margin-right: 6px; vertical-align: -2px; transition: color 0.2s ease; }
.footer-column li a:hover .icon { color: var(--footer-link-hover); }

/* Animatie Classes */
.animate-on-scroll { opacity: 0; transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.animate-on-scroll.fade-in { transform: translateY(0); }
.animate-on-scroll.fade-in-up { transform: translateY(20px); }
.animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); }


/* --- DARK MODEOVERRIDES --- */
@media (prefers-color-scheme: dark) {
    /* :root variables are already defined above */

    a { --link-hover-color: color-mix(in srgb, var(--primary-color) 80%, white); /* Adjust link hover for dark */ }

    /* Specific overrides not covered by vars */
     h1, h2, h3, h4, h5, h6 { /* Ensure headlines use primary text */ color: var(--text-primary); }

     .navbar { box-shadow: 0 1px 3px rgba(255,255,255,0.05); } /* Lighter shadow */
     .navbar-toggler { color: var(--text-primary); }

     .mobile-nav nav a:hover { background-color: rgba(255,255,255,0.05); }

     .model-image-placeholder { background-color: #444; color: #ccc; }

     .engine-image { border-color: var(--section-bg-medium); /* Match dark section bg */ }
     .engine-image-placeholder { background-color: #555; color: #ddd; }

     .tech-highlight { box-shadow: none; } /* Remove subtle shadow if needed */

     .testimonial-card { box-shadow: 0 5px 15px rgba(0,0,0,0.2); } /* Darker shadow */
     .testimonial-avatar-placeholder { background-color: #555; color: #eee; }

     .contact-item a { /* Slightly brighter link in dark */ color: color-mix(in srgb, var(--link-color) 85%, white); }

     .social-icon-link { color: var(--text-secondary); }
     .social-icon-link:hover { color: var(--primary-color); }

     .footer-column h3 { color: #eeeeee; } /* Ensure footer title stays light */

}


/* Media Queries */
@media (max-width: 992px) {
    .container { max-width: 960px; } h1 { font-size: 2.4rem; } h2 { font-size: 1.8rem; }
    .navbar-toggler { display: inline-block; } .desktop-nav { display: none; }
    .language-switcher { display: none; } /* Hide desktop flags on small screens */
    .hero-image-container { height: 350px; }
    .hero-text-container h1 { font-size: 2.2rem; } .hero-text-container p { font-size: 1.1rem;}
}
@media (max-width: 768px) {
    h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.2rem; }
    .container { max-width: 100%; padding: 0 20px; } section { padding: 50px 0; }
    .lead { font-size: 1.1rem; } .intro-text { font-size: 1rem;}
    .features-grid, .models-grid, .engines-grid, .testimonials-grid, .footer-grid { grid-template-columns: 1fr; gap: 25px; }
    .feature-box { flex-direction: column; text-align: center;} .feature-icon {margin: 0 auto 0.8rem auto;}
    .engine-image, .engine-image-placeholder { width: 120px; height: 120px;}
    .footer-grid { text-align: center; } .footer-column { margin-bottom: 20px; }
    .footer-column.about .footer-copyright-inline { display: block; }
    .footer-bottom { display: none; }
    .hero-image-container { height: 300px; }
    .hero-text-container { padding: 40px 0; } .hero-text-container h1 { font-size: 1.9rem; } .hero-text-container p { font-size: 1rem; }
}
@media (max-width: 576px) {
    body { font-size: 15px; } h1 { font-size: 1.8rem; }
    .btn { padding: 10px 20px; font-size: 0.9rem;}
    .hero-section { padding: 80px 0; }
    .models-grid, .engines-grid { gap: 20px; }
    .engines-grid { grid-template-columns: 1fr; }
    .engine-image, .engine-image-placeholder { width: 100px; height: 100px;}
    .social-icon-link svg { width: 24px; height: 24px;}
    .mobile-nav { width: 280px; }
    .hero-image-container { height: 250px; }
}