/* ============================================================
   ACCA Smart™ — Contact Page Styles
   learn/accasmart/assets/css/contact.css
   ============================================================ */

.contact-hero {
    padding: var(--space-20) 0 var(--space-12);
    background: var(--acca-navy-deepest);
    text-align: center;
}
.contact-hero h1 {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 700;
    color: var(--white);
    margin: var(--space-3) 0 var(--space-5);
}
.contact-hero-sub {
    max-width: 600px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
}

/* Grid */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--space-12);
    padding: var(--space-14) 0;
    align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Form */
.contact-form-wrap h2 { font-size: 1.3rem; font-weight: 600; color: var(--white); margin-bottom: var(--space-2); }
.contact-form-note { color: var(--text-muted); font-size: .9rem; margin-bottom: var(--space-8); }
.contact-form { display: flex; flex-direction: column; gap: var(--space-5); }
.contact-submit { width: 100%; justify-content: center; margin-top: var(--space-2); }

/* Info cards */
.contact-info-wrap { display: flex; flex-direction: column; gap: var(--space-4); }
.contact-info-card {
    background: var(--acca-navy-dark);
    border: 1px solid var(--acca-border);
    border-radius: 10px;
    padding: var(--space-5);
}
.contact-info-card--muted { opacity: .65; }
.contact-info-icon {
    font-size: 1.2rem;
    color: var(--yellow);
    margin-bottom: var(--space-2);
}
.contact-info-card h3 { font-size: .9rem; font-weight: 600; color: var(--white); margin-bottom: var(--space-1); }
.contact-info-card p { color: var(--text-muted); font-size: .88rem; margin: 0; }
.contact-info-card a { color: var(--teal); }
.contact-info-note { display: block; font-size: .75rem; color: var(--text-muted); margin-top: var(--space-1); }

/* Hours */
.contact-hours {
    background: var(--acca-navy-dark);
    border: 1px solid var(--acca-border);
    border-radius: 10px;
    padding: var(--space-5);
}
.contact-hours h3 { font-size: .9rem; font-weight: 600; color: var(--white); margin-bottom: var(--space-4); display: flex; align-items: center; gap: var(--space-2); }
.contact-hours h3 i { color: var(--teal); }
.contact-hours ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.contact-hours li { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; }
.contact-hours li span { color: var(--text-muted); }
.contact-hours li strong { color: var(--white); }
.contact-hours-note { margin-top: var(--space-4); font-size: .78rem; color: var(--text-muted); display: flex; align-items: flex-start; gap: var(--space-2); line-height: 1.5; }
.contact-hours-note i { color: var(--teal); flex-shrink: 0; margin-top: 2px; }

/* Mini FAQ */
.contact-faq { padding: var(--space-12) 0; border-top: 1px solid var(--acca-border); }
.contact-faq h2 { font-size: 1.3rem; font-weight: 600; color: var(--white); margin-bottom: var(--space-8); }
.contact-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
@media (max-width: 768px) { .contact-faq-grid { grid-template-columns: 1fr; } }
.contact-faq-item { background: var(--acca-navy-dark); border: 1px solid var(--acca-border); border-radius: 10px; padding: var(--space-6); }
.contact-faq-item h3 { font-size: .95rem; font-weight: 600; color: var(--white); margin-bottom: var(--space-3); }
.contact-faq-item p { color: var(--text-muted); font-size: .88rem; line-height: 1.6; }

/* CTA strip */
.contact-cta { text-align: center; padding: var(--space-12) 0 var(--space-16); }
.contact-cta p { color: var(--text-muted); margin-bottom: var(--space-6); }
.contact-cta-btns { display: flex; gap: var(--space-4); justify-content: center; flex-wrap: wrap; }