/* website.css - Geoptimaliseerde Versie */

/* --- 1. Kleuren en variabelen --- */
:root {
    --webius-primary: #008cba; /* Helder Blauw */
    --webius-secondary: #173f5f; /* Donker Marine Blauw */
    --webius-accent: #f6e35e; /* Helder Geel (als accent) */
    --webius-text-dark: #333333;
    --webius-text-light: #6c757d;
    --webius-bg-light: #f8f9fa;
    --webius-border: #dee2e6;
    --webius-shadow-primary: 0 10px 30px rgba(0, 140, 186, 0.2);
}

/* --- 2. Tailwind Overrides voor Typografie --- */

.font-inter {
    font-family: 'Inter', sans-serif;
}

/* --- 3. Header & Gradiënt Styling --- */

/* Titel Gradiënt */
.text-gradient-webius {
    background-image: linear-gradient(to right, var(--webius-primary), var(--webius-secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* Bewegende Gradiënt Keyframes */
@keyframes moving-split-color {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.header-section {
    /* De achtergrondgradiënt als subtiele animatie behouden */
    background-image: linear-gradient(to right, var(--webius-secondary) 0%, var(--webius-primary) 100%); 
    background-size: 200% 100%;
    animation: moving-split-color 25s ease-in-out infinite; 
    animation-direction: alternate; 
    position: relative;
    box-shadow: inset 0 0 70px rgba(0, 0, 0, 0.2); 
    /* Zorg dat de sectie zelf onder de fixed navigatie start: pt-32 in HTML is nu cruciaal */
}

/* --- 4. Button Styling: Gebruikerservaring (UX) geoptimaliseerd --- */

.button-webius-primary {
    background: linear-gradient(to right, var(--webius-primary), var(--webius-secondary));
    color: white;
    font-weight: 700;
    padding: 0.875rem 2.5rem;
    border-radius: 9999px; 
    box-shadow: 0 4px 10px rgba(0, 140, 186, 0.3);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, filter 0.2s;
    display: inline-block;
    text-align: center;
    border: none;
    cursor: pointer;
}
.button-webius-primary:hover {
    transform: translateY(-2px); 
    box-shadow: 0 8px 15px rgba(0, 140, 186, 0.5);
    filter: brightness(1.05); 
}

.button-webius-secondary-accent {
    background-color: var(--webius-accent);
    color: var(--webius-secondary); 
    border: 2px solid var(--webius-accent); 
    font-weight: 700;
    padding: 0.875rem 2.5rem;
    border-radius: 9999px;
    box-shadow: 0 4px 10px rgba(246, 227, 94, 0.5);
    transition: background-color 0.2s, box-shadow 0.2s, color 0.2s;
    cursor: pointer;
}
.button-webius-secondary-accent:hover {
    background-color: #f7e97d; 
    box-shadow: 0 6px 20px rgba(246, 227, 94, 0.7);
    color: var(--webius-secondary);
}


/* --- 5. Card Styling: Clean en Responsief --- */

.card-craftsmanship, .service-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 2px solid var(--webius-border);
    background-color: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.card-craftsmanship:hover, .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15); /* Zwaardere schaduw bij hover */
    border-color: var(--webius-primary); /* Visuele feedback bij hover */
}


/* --- 6. Form Styling --- */

.form-input-webius {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--webius-border);
    border-radius: 0.375rem; /* rounded-md */
    background-color: white;
    color: var(--webius-text-dark);
    transition: border-color 0.3s, box-shadow 0.3s;
}
.form-input-webius:focus {
    border-color: var(--webius-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 140, 186, 0.2);
}