/* =========================================
   THEME.CSS - Kleuren, typografie en styling
   ========================================= */

:root {
    /* Kleurenpalet gebaseerd op Blauw & Oranje (Corporate / No Bullshit) */
    --color-primary: #0A192F;    /* Diep donkerblauw */
    --color-primary-light: #112240; /* Iets lichter blauw voor vlakken */
    --color-accent: #FF6B00;     /* Scherp, proactief Oranje */
    --color-accent-hover: #E56000;
    
    --color-bg: #F8FAFC;         /* Zeer licht grijs/blauw voor achtergrond */
    --color-text: #334155;       /* Donkergrijs voor leesbaarheid */
    --color-text-light: #64748B;
    --color-white: #FFFFFF;
    
    /* Schaduwen & borders */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
    --border-radius: 4px; /* Strakke hoeken voor een no-bullshit look */
}

/* Typografie (Geen externe fonts, puur system fonts voor maximale performance/geen afhankelijkheden) */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    color: var(--color-primary);
    line-height: 1.2;
    font-weight: 700;
}

h1 { font-size: 3.5rem; margin-bottom: 1.5rem; letter-spacing: -1px; }
h2 { font-size: 2.5rem; margin-bottom: 3rem; text-align: center; }
h3 { font-size: 1.5rem; margin-bottom: 1rem; }
p { margin-bottom: 1rem; }

/* Styling Header */
header {
    background-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: var(--shadow-md);
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--color-white);
    text-decoration: none;
    letter-spacing: 1px;
}

.logo span {
    color: var(--color-accent);
}

.nav-links a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: var(--color-accent);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--color-accent);
    color: var(--color-white);
    text-decoration: none;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn:hover {
    background-color: var(--color-accent-hover);
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
}

/* Sections Styling */
.bg-dark {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.bg-dark h2, .bg-dark h3 {
    color: var(--color-white);
}

/* Cards (Diensten & Portfolio) */
.card {
    background-color: var(--color-white);
    padding: 2.5rem;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-sm);
    border-top: 4px solid var(--color-primary);
    transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-top-color: var(--color-accent);
}

.tag {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--color-bg);
    color: var(--color-text-light);
    font-size: 0.875rem;
    border-radius: 50px;
    margin-bottom: 1rem;
    font-weight: 600;
}

/* Formulier Styling */
.form-group input,
.form-group textarea {
    border: 1px solid #CBD5E1;
    border-radius: var(--border-radius);
    font-family: inherit;
    font-size: 1rem;
    background-color: var(--color-white);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(255, 107, 0, 0.2);
}

/* Footer */
footer {
    background-color: var(--color-primary-light);
    color: var(--color-text-light);
    text-align: center;
}

/* Icon Styles */
.icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    background-color: rgba(255, 107, 0, 0.1);
    color: var(--color-accent);
    border-radius: 50%;
    margin-bottom: 1rem;
}

.icon-wrapper i, .icon-wrapper svg {
    width: 1.5rem;
    height: 1.5rem;
}

/* Card Image */
.card-image {
    margin: -2.5rem -2.5rem 1.5rem -2.5rem;
    border-radius: calc(var(--border-radius) - 2px) calc(var(--border-radius) - 2px) 0 0;
    overflow: hidden;
}
.card-image img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 200px;
}