/* Specifieke CSS voor de contactpagina */

/* --- Contact Formulier Sectie --- */
.contact-form-section {
    background-color: var(--background);
    padding-top: var(--spacing-lg); /* Minder padding op mobiel */
    padding-bottom: var(--spacing-lg); /* Minder padding op mobiel */
}

.contact-form-wrapper {
    max-width: 700px; /* Max breedte van het formulier */
    margin: 0 auto; /* Centreer het formulier */
    padding: var(--spacing-md); /* Kleinere padding op mobiel */
    border-radius: 0.75rem; /* Afgeronde hoeken (van .card) */
    box-shadow: var(--shadow-soft); /* Zachte schaduw (van .card) */
    background-color: var(--background); /* Witte achtergrond (van .card) */
    border: 1px solid var(--border-color); /* Rand (van .card) */
}

.contact-form .form-group {
    margin-bottom: var(--spacing-md); /* Ruimte tussen formuliergroepen */
}

.contact-form label {
    display: block; /* Zorgt dat label op een nieuwe regel komt */
    font-size: var(--font-size-base);
    font-weight: 600; /* Semi-bold label */
    color: var(--foreground);
    margin-bottom: var(--spacing-xs); /* Ruimte tussen label en input */
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%; /* Volledige breedte */
    padding: var(--spacing-sm);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: var(--font-size-base);
    color: var(--foreground);
    background-color: var(--background);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form textarea:focus {
    outline: none; /* Verwijder standaard outline */
    border-color: var(--primary-color); /* Primaire kleur bij focus */
    box-shadow: 0 0 0 3px rgba(0, 128, 128, 0.2); /* Subtiele focus ring, aangepast om var te gebruiken */
}

.contact-form textarea {
    resize: vertical; /* Alleen verticaal resizen toestaan */
    min-height: 120px; /* Minimale hoogte voor textarea */
}

/* --- Contact Info Sectie --- */
.contact-info-section {
    background-color: var(--primary-5); /* Licht primaire achtergrond */
    padding-top: var(--spacing-lg); /* Minder padding op mobiel */
    padding-bottom: var(--spacing-lg); /* Minder padding op mobiel */
}

.contact-details {
    display: flex;
    flex-direction: column; /* Standaard onder elkaar op mobiel */
    align-items: center;
    gap: var(--spacing-lg); /* Ruimte tussen contact items */
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm); /* Ruimte tussen icoon en link/tekst */
    font-size: var(--font-size-base); /* Standaard iets kleinere tekst op mobiel */
    font-weight: 600;
    color: var(--foreground);
    text-align: left; /* Zorg dat tekst binnen item links uitlijnt */
}

.contact-icon {
    font-size: var(--font-size-h3); /* Iets kleinere iconen op mobiel */
    color: var(--primary-color);
    flex-shrink: 0; /* Voorkom dat icoon krimpt */
}

.contact-link,
.contact-text { /* Ook voor de platte tekst van het adres */
    color: var(--foreground); /* Link kleur is donker */
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-link:hover {
    color: var(--primary-color); /* Primaire kleur bij hover */
}


/* --- Responsive aanpassingen voor contact details --- */

/* Medium screens (md: in Tailwind) - min-width: 768px */
@media (min-width: 768px) {
    .contact-form-section,
    .contact-info-section {
        padding-top: var(--spacing-xl); /* Meer padding op medium schermen */
        padding-bottom: var(--spacing-xl);
    }

    .contact-form-wrapper {
        padding: var(--spacing-lg); /* Meer padding op medium schermen */
    }

    .contact-details {
        flex-direction: row; /* Naast elkaar op grotere schermen */
        justify-content: center;
        gap: var(--spacing-xxl); /* Meer ruimte tussen items */
    }

    .contact-item {
        font-size: var(--font-size-h3); /* Grotere tekst op medium schermen */
    }

    .contact-icon {
        font-size: var(--font-size-h2); /* Grotere iconen op medium schermen */
    }
    
    .contact-details {
        flex-direction: row; 
        justify-content: center;
        gap: var(--spacing-xxl); 
    }

    .contact-item {
        font-size: var(--font-size-h3); 
    }

    .contact-icon {
        font-size: var(--font-size-h2); 
    }
    
    /* --> VOEG DIT TOE <-- */
    .contact-link {
        white-space: nowrap; /* Zorgt ervoor dat de link op één regel blijft */
    }
}
}

/* Large screens (lg: in Tailwind) - min-width: 1024px */
@media (min-width: 1024px) {
    .contact-form-section,
    .contact-info-section {
        padding-top: var(--spacing-xxl); /* Volledige padding op grote schermen */
        padding-bottom: var(--spacing-xxl);
    }

    /* Eventuele verdere aanpassingen voor zeer grote schermen */
}