/* assets/css/contact.css */

/*
    This file is for styles specific to the contact.html page.
    Use it for unique form styling, map adjustments, or FAQ animations.
*/

/* Custom focus styles for form inputs */
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: transparent; /* Remove default border */
    box-shadow: 0 0 0 3px rgba(242, 153, 74, 0.5); /* Primary orange ring */
}

/* FAQ Item styling for accordion effect */
.faq-item {
    border: 1px solid var(--color-gray-200);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.faq-item:hover {
    background-color: var(--color-gray-100);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    opacity: 0;
}

.faq-answer.open {
    max-height: 500px; /* Adjust as needed for content length */
    opacity: 1;
}

.faq-icon.rotate {
    transform: rotate(180deg);
}