/* --- Contact Page Specific Styles --- */

/* Contact Hero Section */
.contact-hero {
    background: linear-gradient((54deg, #eef2f340 0%, #d0ffd16e 100%)); /* Subtle light grey gradient */
    /* Or use a solid color: background-color: #f8f9fa; */
    color: #333; /* Darker text color for contrast */
    padding: 5rem 2rem; /* Adjust padding as needed */
    text-align: center;
    position: relative; /* Keep for potential future pseudo-elements */
    overflow: hidden; /* Keep if using pseudo-elements */
}

/* Reset text styles previously used for canvas overlay */
.contact-hero h1,
.contact-hero p {
    /* Remove positioning and z-index */
    /* position: relative; */
    /* z-index: 1; */
    /* Reset color and text-shadow */
    color: inherit; /* Inherit from .contact-hero */
    text-shadow: none; /* Remove green glow */
}

.contact-hero h1 {
    font-size: 2.8rem; /* Adjust size if needed */
    /* font-size: var(--fz-3xl); */
    margin-bottom: 1rem;
    font-weight: 700;
    color: #1a1a2e; /* Specific darker color for heading */
}

.contact-hero p {
    font-size: 1.39rem; /* Adjust size if needed */
    /* font-size: var(--fz-lg); */
    max-width: 800px; /* Slightly adjust max-width if needed */
    margin: 0 auto 1.5rem auto; /* Add some bottom margin */
    line-height: 1.7;
    color: #555; /* Slightly lighter dark grey for paragraph */
}

/* Contact Content Section (Info + Form/Map) */
.contact-content {
    padding: 4rem 2rem;
    margin: 0 auto; /* Center the content */
    opacity: 0;
    animation: fadeInSlideUp 0.7s ease-out forwards;
    animation-delay: 0.4s;
}

/* Contact Info Styling */
.contact-info {
    margin-bottom: 3rem; /* Add space below info */
    max-width: 800px; /* Optional: Limit width */
    margin-left: auto;
    margin-right: auto;
    text-align: center; /* Center info block */
}

.contact-info h2 {
    font-size: var(--fz-2xl);
    margin-bottom: 1.5rem;
    color: var(--clr-heading);
}

.contact-info p {
    margin-bottom: 2rem;
    line-height: 1.7;
    color: var(--clr-text);
}

.contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block; /* Allow centering */
    text-align: left; /* Align text left within the list */
}

.contact-info li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    font-size: var(--fz-md);
    color: var(--clr-text);
}

.contact-info li svg {
    width: 24px;
    height: 24px;
    fill: var(--clr-accent);
    margin-right: 1rem;
    margin-top: 0.1em; /* Adjust vertical alignment slightly */
    flex-shrink: 0;
    border: 1px solid var(--clr-accent);
    border-radius: 4px;
    padding: 3px;
    box-sizing: border-box;
}

.contact-info li span {
    font-weight: 600;
    margin-right: 0.5rem;
    color: var(--clr-heading);
}

.contact-info li a {
    color: var(--clr-accent);
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info li a:hover {
    color: #3a7bd5; /* Darker accent */
    text-decoration: underline;
}

/* New Wrapper for Map and Form */
.map-form-wrapper {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    gap: .5rem; /* Space between map and form */
    align-items: flex-start; /* Align items to the top */
}

.map-container,
.contact-form-container {
    flex: 1; /* Each takes up half the space */
    min-width: 350px; /* Adjust minimum width before wrapping */
}

/* Map Container Styling */
.map-container h2 {
    font-size: var(--fz-xl); /* Slightly smaller than form h2 */
    margin-bottom: 1.5rem;
    color: var(--clr-heading);
}

.map-container iframe {
    display: block; /* Remove extra space */
    width: 100%; /* Make iframe fill container */
    height: 500px; /* Adjust height to better match form */
    border-radius: 8px; /* Optional: match form radius */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Optional: match form shadow */
}

/* Contact Form Styling */
.contact-form-container {
    background-color: #fff;
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Apply Flexbox to the form itself */
#contact-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem; /* Adjust gap between items as needed */
}

.contact-form-container h2 {
    font-size: var(--fz-2xl);
    margin-bottom: 1.5rem;
    color: var(--clr-heading);
    width: 100%; /* Ensure heading takes full width */
}

.form-group {
    margin-bottom: 0; /* Remove bottom margin as gap handles spacing */
    flex: 1 1 calc(50% - 0.75rem); /* Grow, shrink, basis ~50% minus half the gap */
    min-width: calc(50% - 0.75rem); /* Ensure wrapping */
}

/* Make specific items span full width */
.form-group.full-width, /* Add class="full-width" to textarea and button parent div */
#contact-form .form-group:has(textarea), /* Target group containing textarea */
#contact-form .form-group:has(.g-recaptcha), /* Target group containing reCAPTCHA */
#contact-form .form-group:has(button) { /* Target group containing button (if wrapped) */
    flex-basis: 100%;
    min-width: 100%;
}

/* Add asterisk to labels for required fields */
.form-group:has(input[required]) > label::after,
.form-group:has(textarea[required]) > label::after {
    content: " *"; /* Add space before asterisk */
    color: #d9534f; /* Red color for emphasis, adjust as needed */
    margin-left: 3px;
    font-weight: bold; /* Make asterisk bold */
    display: inline; /* Ensure it stays on the same line */
}

/* If button is not wrapped in a form-group, style it directly */
#contact-form .cta-button {
    flex-basis: 100%; /* Make button take full width */
    margin-top: 1.5rem; /* Add margin if needed */
    width: 100%;
    padding: 15px;
    font-size: var(--fz-lg);
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    font-size: var(--fz-sm);
    color: var(--clr-heading);
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1.5px solid #dce1e6;
    border-radius: 6px;
    font-size: var(--fz-md);
    font-family: inherit;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="tel"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(77, 139, 248, 0.2); /* Focus ring */
}

.form-group textarea {
    resize: vertical; /* Allow vertical resize */
    min-height: 120px;
}

/* Style the submit button (inherits .cta-button) */
#contact-form .cta-button {
    width: 100%;
    padding: 15px;
    font-size: var(--fz-lg);
}

/* Form Status Message Area */
#form-status {
    margin-top: 1.5rem;
    padding: 1rem;
    border-radius: 6px;
    text-align: center;
    font-weight: 500;
    display: none; /* Hidden by default */
}

#form-status.success {
    background-color: #e6f9f0;
    color: #008a4c;
    border: 1px solid #a3e6c8;
    display: block;
}

#form-status.error {
    background-color: #fdecea;
    color: #c81e1e;
    border: 1px solid #f8c0c0;
    display: block;
}

/* Responsive Adjustments for Contact Page */
@media (max-width: 800px) {
    .contact-hero {
        padding: 3rem 1rem;
    }

    /* Adjust font sizes for mobile (using professional colors) */
    .contact-hero h1 {
        font-size: 2rem; /* Adjusted mobile size */
        /* text-shadow: none; */ /* Ensure shadow is removed */
    }

    .contact-hero p {
        font-size: 1rem; /* Adjusted mobile size */
        line-height: 1.6;
    }

    .contact-content {
        padding: 3rem 1rem;
    }

    .map-form-wrapper {
        gap: 2rem; /* Reduce gap */
    }

    .map-container,
    .contact-form-container {
        min-width: unset; /* Allow full width when stacking */
        flex-basis: 100%;
    }

    .map-container {
        order: 2; /* Optional: Move map below form on mobile */
    }

    .contact-form-container {
        order: 1; /* Optional: Move form above map on mobile */
        padding: 1.5rem;
    }

    .map-container iframe {
        height: 350px; /* Adjust height for mobile */
    }

    /* Stack form elements on smaller screens */
    .form-group {
        flex-basis: 100%;
        min-width: 100%;
    }
    #contact-form {
        gap: 1rem; /* Adjust gap for stacked layout */
    }
}