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

:root {
  /* Page-specific colors for Contact Page - your preferred theme */
  --contact-page-bg: #fafafa;
  --contact-form-bg: #ffffff;
  --contact-accent: #B99066;
  --contact-accent-rgb: 185, 144, 102;
  --contact-shadow-light: rgba(0, 0, 0, 0.1);
  --contact-border-light: #e5e7eb;
  --contact-text-primary: #333333;
  --contact-text-secondary: #666666;
}

#contact {
    padding: 40px 0; /* Reduced from 80px */
    background-color: var(--contact-page-bg);
}

#contact-form {
    max-width: 650px;
    margin: 1.5rem auto; /* Reduced top/bottom margin */
    padding: 2rem; /* Reduced from 2.5rem */
    background: var(--contact-form-bg);
    border-radius: 16px;
    box-shadow: 0 8px 30px var(--contact-shadow-light);
    border: 1px solid var(--contact-border-light);
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Reduced from 1.5rem */
}

#contact-form .section-description {
    color: var(--contact-text-secondary);
    margin-bottom: 1rem; /* Reduced from 1.5rem */
    font-size: 1.15rem;
    line-height: 1.6;
    text-align: center;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
}

#contact-form label {
    font-weight: 600;
    color: var(--contact-text-primary);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea {
    padding: 10px 16px; /* Reduced vertical padding */
    border: 1px solid var(--contact-border-light);
    border-radius: 8px;
    font-size: 1rem;
    font-family: var(--font-body), sans-serif;
    background-color: var(--contact-form-bg);
    color: var(--contact-text-primary);
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color: var(--contact-text-secondary);
}

#contact-form input:focus,
#contact-form textarea:focus {
    outline: none;
    border-color: var(--contact-accent);
    box-shadow: 0 0 0 3px rgba(var(--contact-accent-rgb), 0.25);
    background-color: var(--contact-form-bg);
}

#contact-form textarea {
    min-height: 120px; /* Reduced from 150px */
    resize: vertical;
}

#contact-form button[type="submit"] {
    width: 100%;
    margin-top: 0.5rem; /* Reduced from 1rem */
    background-color: var(--contact-accent);
    border-color: var(--contact-accent);
    box-shadow: 0 4px 12px rgba(var(--contact-accent-rgb), 0.3);
    color: white;
}

#contact-form button[type="submit"]:hover {
    background-color: color-mix(in srgb, var(--contact-accent) 90%, black);
    border-color: color-mix(in srgb, var(--contact-accent) 90%, black);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 16px rgba(var(--contact-accent-rgb), 0.4);
}

/* Resume Download Container (if present) */
.resume-download-container {
    text-align: center;
    margin-top: 1.5rem; /* Reduced from 2rem */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Reduced from 15px */
}

.resume-download-container p {
    font-size: 1rem;
    color: var(--contact-text-primary);
    margin-bottom: 0;
}

.resume-download-container .btn.secondary {
    border-color: var(--contact-accent);
    color: var(--contact-accent);
}

.resume-download-container .btn.secondary:hover {
    background-color: var(--contact-accent);
    border-color: var(--contact-accent);
    color: white;
}

/* --- CONTACT PAGE FOOTER STYLES (Specific to this page) --- */
footer .container {
    display: flex; /* Flexbox for single-line layout on desktop */
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px; /* Space between items when they wrap */
}

@media (max-width: 768px) {
    footer .container {
        flex-direction: column; /* Stack footer content on mobile */
        text-align: center;
    }
}


/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
    #contact-form {
        padding: 30px 20px;
        margin-top: 1.5rem;
    }
    #contact-form .section-description {
        font-size: 1rem;
    }
    #contact-form label {
        font-size: 0.9rem;
    }
    #contact-form input[type="text"],
    #contact-form input[type="email"],
    #contact-form textarea {
        font-size: 0.9rem;
        padding: 10px 12px;
    }
    .resume-download-container {
        margin-top: 1rem;
    }
}

@media (max-width: 480px) {
    #contact-form {
        max-width: 100%;
        border-radius: 0;
    }
}