/* ================================================================
   Circle Ledger — contact.css
   Contact page (contact/index.html) specific styles.
   Loaded with: shared.css
================================================================ */

/* ── Two-column layout ── */
.contact_layout {
    display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--space-12); align-items: flex-start;
}
@media (max-width: 900px) { .contact_layout { grid-template-columns: 1fr; } }

/* ── Contact info list ── */
.contact_info_list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.contact_info_item {
    display: flex; align-items: flex-start; gap: var(--space-4);
    background: var(--surface); border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
    text-decoration: none; transition: box-shadow var(--t), transform var(--t);
}
.contact_info_item:hover { box-shadow: var(--shadow-md); transform: translateY(-0.125rem); }
.contact_info_icon {
    width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md); flex-shrink: 0;
    background: var(--teal-50); color: var(--teal-600);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--icon-lg);
}
.contact_info_text { display: flex; flex-direction: column; gap: var(--space-0-5); }
.contact_info_label { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--slate-400); }
.contact_info_text span:last-child { font-size: var(--text-md); font-weight: 500; color: var(--teal-700); }

/* ── Form card ── */
.contact_form_card {
    background: var(--surface); border: var(--border-thin) solid var(--border);
    border-radius: var(--radius-xl); padding: var(--space-7);
    box-shadow: var(--shadow-sm);
}
@media (max-width: 480px) { .contact_form_card { padding: var(--space-5) var(--space-4); border-radius: var(--radius-lg); } }

/* ── Success state ── */
.contact_success {
    display: none; text-align: center; padding: var(--space-10) var(--space-6);
}
.contact_success.visible { display: block; }
.contact_success_icon {
    width: 4rem; height: 4rem; border-radius: 50%;
    background: var(--green-100); color: var(--green-700);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--icon-3xl); margin: 0 auto var(--space-4);
}
.contact_success_title {
    font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700;
    color: var(--teal-900); letter-spacing: -0.02em; margin-bottom: var(--space-2);
}
.contact_success_sub { font-size: var(--text-md); color: var(--slate-500); line-height: 1.65; }

/* ── Contact page text helpers ── */
.contact_intro_text {
    font-size: var(--text-lg);
    color: var(--slate-500);
    line-height: 1.8;
    margin-bottom: var(--space-2);
}
.contact_form_title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--teal-900);
    margin-bottom: var(--space-5);
    letter-spacing: -0.02em;
}