/* ===================================== */
/* === CONTACT PAGE SPECIFIC STYLES === */
/* ===================================== */

/* --- GENERAL STYLES FOR THIS PAGE'S CONTENT --- */
.container { width: 90%; max-width: 1200px; margin-left: auto; margin-right: auto; }
.content-section { padding: clamp(3rem, 8vw, 5rem) 0; }
.required { color: #d5a26f; font-weight: bold; margin-left: 2px; }

/* Page Load Animation */
body.page-contact { opacity: 0; transition: opacity 0.7s ease-out; }
body.page-contact.loaded { opacity: 1; }

/* 1. Contact Hero */
.contact-hero { position: relative; padding-top: 85px; padding-bottom: 120px; min-height: 50vh; display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; background-color: #2c1f1a; background-image: linear-gradient(rgba(35, 20, 15, 0.7), rgba(35, 20, 15, 0.7)), url('placeholder-contact-hero.jpg'); background-size: cover; background-position: center; overflow: hidden; }
.hero-content { position: relative; z-index: 3; }
.hero-content h1 { color: #fff; margin-bottom: 0.5em; text-shadow: 1px 1px 6px rgba(0,0,0,0.3); font-size: clamp(2.5rem, 6vw, 3.2rem); }
.hero-content p { font-size: clamp(1rem, 2.5vw, 1.1rem); color: rgba(255, 255, 255, 0.9); max-width: 600px; margin: 0 auto; font-weight: 300; }
.hero-swoosh { position: absolute; bottom: -1px; left: 0; width: 100%; height: clamp(50px, 10vw, 100px); z-index: 2; pointer-events: none; }
.hero-swoosh svg path { fill: #f8f5f0; }

/* 2. Contact Info & Form Section */
.contact-info-form-section { background-color: #f8f5f0; }
.contact-container { display: flex; gap: clamp(2rem, 6vw, 4rem); flex-wrap: wrap; }

/* Column 1: Details */
.contact-details-wrapper { flex: 1 1 400px; }
.contact-details-wrapper h2 { margin-bottom: 0.75em; font-size: clamp(1.8rem, 5vw, 2.2rem); }
.contact-intro { margin-bottom: 2.5rem; font-size: 1.05rem; color: #444; }
.contact-info-block { margin-bottom: 2.5rem; }
.info-item { display: flex; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.8rem; }
.info-item i { font-size: 1.6rem; color: #d5a26f; margin-top: 0.25em; width: 25px; text-align: center; flex-shrink: 0; }
.info-item h4 { margin-bottom: 0.3em; font-size: 1.1rem; }
.info-item p { margin-bottom: 0.2em; font-size: 0.95rem; color: #555; }
.info-item a { color: #444; font-weight: 500; word-break: break-word; }
.info-item a:hover { color: #d5a26f; }
.hours { font-size: 0.85rem; color: #777; font-style: italic; margin-top: 0.3em; }
.map-link { font-weight: 600; font-size: 0.9rem; display: inline-block; margin-top: 0.5em; border-bottom: 1px solid transparent; transition: border-color 0.3s ease; }
.map-link:hover { border-color: #d5a26f; }
.contact-socials { border-top: 1px solid #eee; padding-top: 2rem; margin-top: 2rem; }
.contact-socials h4 { margin-bottom: 1rem; font-size: 1rem; text-transform: uppercase; letter-spacing: 1px; color: #555; }
.contact-socials .footer-social-links { justify-content: flex-start; } /* Overrides footer center alignment */

/* Column 2: Form */
.contact-form-wrapper { flex: 1 1 500px; background-color: #ffffff; padding: clamp(1.5rem, 5vw, 2.5rem); border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); }
.contact-form-wrapper h2 { margin-bottom: 1.5rem; font-size: clamp(1.8rem, 5vw, 2.2rem); }
.form-group { margin-bottom: 1.5rem; }
.form-group label { display: block; margin-bottom: 0.5em; font-weight: 600; font-size: 0.9rem; color: #444; }
.form-group input[type="text"], .form-group input[type="email"], .form-group input[type="tel"], .form-group textarea { width: 100%; padding: 0.8rem 1rem; border: 1px solid #ddd; border-radius: 4px; font-size: 1rem; font-family: 'Raleway', sans-serif; color: #333; transition: border-color 0.3s ease, box-shadow 0.3s ease; background-color: #fff; }
.form-group input::placeholder, .form-group textarea::placeholder { color: #aaa; opacity: 1; }
.form-group input:focus, .form-group textarea:focus { outline: none; border-color: #d5a26f; box-shadow: 0 0 0 3px rgba(213, 162, 111, 0.15); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-submit-group { text-align: right; margin-top: 2rem; }
.submit-btn { padding: 0.8rem 2rem; font-size: 1rem; border-radius: 4px; background-color: #d5a26f; color: #fff; box-shadow: 0 4px 15px rgba(213, 162, 111, 0.3); transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 0.6em; }
.submit-btn:hover { background-color: #b98242; transform: translateY(-3px); box-shadow: 0 6px 20px rgba(213, 162, 111, 0.4); }
.submit-btn i { font-size: 0.9em; }

/* Form Status Message Styles */
.form-status { margin-top: 15px; padding: 10px 15px; border-radius: 4px; font-size: 0.9em; border: 1px solid transparent; display: none; text-align: center; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; opacity: 0; transform: translateY(10px); }
.form-status.active { display: block; opacity: 1; transform: translateY(0); }
.form-status.success { background-color: #d4edda; color: #155724; border-color: #c3e6cb; }
.form-status.error { background-color: #f8d7da; color: #721c24; border-color: #f5c6cb; }

/* --- ANIMATIONS --- */
.animated { opacity: 0; }
.animated.fadeInUp { animation-name: fadeInUp; }
.animated.fadeInLeft { animation-name: fadeInLeft; }
.animated.fadeInRight { animation-name: fadeInRight; }
.visible { opacity: 1; animation-duration: 0.9s; animation-timing-function: cubic-bezier(0.3, 0.8, 0.2, 1); animation-fill-mode: forwards; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInLeft { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fadeInRight { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* --- MEDIA QUERIES --- */
@media (max-width: 992px) {
    .contact-container { flex-direction: column; gap: 2.5rem; }
}
@media (max-width: 768px) {
    .contact-hero { padding-top: 70px; padding-bottom: 80px; min-height: 40vh; }
}
@media (max-width: 480px) {
    .contact-hero { padding-top: 65px; padding-bottom: 60px; }
    .contact-form-wrapper { padding: 1.5rem 1.25rem; }
    .submit-btn { width: 100%; justify-content: center; }
    .info-item { gap: 1rem; }
    .info-item i { font-size: 1.5rem; }
}