/* css/contact-page.css */

/* --- Contact Page (contact.html) Specific Styles --- */

/* Styles for the .page-hero-section and .hero-page-subtitle
   can be inherited if they are already in global.css.
   If not, you can copy them from programs-page.css or global.css, for example:
*/
/*
.page-hero-section {
    background-color: var(--background-medium);
    padding-top: calc(var(--header-height) + 40px);
    padding-bottom: 60px;
    text-align: center;
}

.hero-page-subtitle {
    font-size: 1.1rem;
    color: var(--text-color-dark);
    opacity: 0.8;
    max-width: 800px;
    margin: 0 auto 30px auto;
    line-height: 1.7;
}
*/
/* Ensure the above classes are defined either here or in global.css */


/* Contact Details Section */
#contact-details-section .section-title { /* Adjusting existing .section-title if needed for this page */
    margin-bottom: 50px; /* More space after title before cards */
}

.contact-card {
    background-color: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 25px 30px;
    height: 100%; /* Ensure cards in a row have the same height */
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.contact-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.1);
}

.contact-card h3 {
    font-family: var(--font-family-headings);
    font-size: 1.5rem; /* Office title size */
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 600;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    display: inline-block; /* To make border-bottom only as wide as text */
}

.contact-card p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #444;
    margin-bottom: 12px;
}

.contact-card p strong {
    font-weight: 600;
    color: var(--text-color-dark);
    margin-right: 5px;
}

.contact-card a { /* Email and phone links */
    color: var(--secondary-color);
    text-decoration: none;
    word-break: break-all; /* Break long email addresses if needed */
}

.contact-card a:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Email Guidance Section */
#email-guidance-section {
    /* .bg-medium class from global.css should apply */
    padding-top: 60px;
    padding-bottom: 60px;
}

#email-guidance-section .section-title {
    margin-bottom: 30px;
}

#email-guidance-section .lead { /* For introductory paragraphs */
    font-size: 1.1rem;
    color: var(--text-color-dark);
    opacity: 0.9;
    max-width: 750px; /* Limit width for readability */
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}
#email-guidance-section p:not(.lead) {
    font-size: 1rem;
    color: #555;
    margin-bottom: 25px;
}

#email-guidance-section a.font-weight-bold { /* For prominent email links */
    font-weight: 600 !important; /* Overriding global 'a' if needed */
    color: var(--primary-color);
}
#email-guidance-section a.font-weight-bold:hover {
    color: var(--accent-color);
}


/* Optional Map Section Styling */
.map-placeholder {
    width:100%;
    height:400px;
    background-color:#e9ecef; /* Using var(--background-medium) */
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: var(--border-radius);
    text-align: center;
    color: #6c757d; /* Muted text color */
    font-style: italic;
}
.map-placeholder p {
    margin:0;
}

/* Responsive adjustments for Contact Page */
@media (max-width: 991px) { /* Medium devices (tablets) */
    .contact-card {
        margin-bottom: 30px; /* Ensure spacing when cards stack or rearrange */
    }
    /* If you have 3 cards and the last one becomes full width on medium screens: */
    #contact-details-section .col-lg-4.col-md-12.mb-4:last-child .contact-card {
         margin-bottom: 0; /* Remove bottom margin for the last full-width card */
    }
}

@media (max-width: 767px) { /* Small devices (phones) */
    .contact-card {
        padding: 20px;
    }
    .contact-card h3 {
        font-size: 1.3rem;
    }
    #email-guidance-section .lead {
        font-size: 1rem;
    }
    #email-guidance-section {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}