/* ==========================
   Contact Page
   ========================== */

.contact-methods {
    margin-bottom: 2.5rem;
}

/* .card is normally a home-page grid item sized by its own column - on
   this page it's centered text/icon content, so it reads better without
   the hover lift the home page cards use for "this leads somewhere new"
   emphasis; a plain link/div here is closer to an info tile. */
.contact-methods .card:hover {
    transform: none;
}

/* Matches .page-block's own width (42rem) instead of the narrower
   default .form-card (480px) - as the last section on a full page,
   next to that wider block above it, the default read as oddly
   cramped rather than intentionally focused. */
.contact-form-card {
    width: min(42rem, 100%);
    margin: 0 auto;
}

/* forms.css only styles .form-card h1 (see meeting_form.html) - this
   page already has one <h1> from page_hero.html, so the form heading
   here is an <h2> to avoid a second one, which left it without the
   margin-bottom .form-subtitle's -1rem top margin is calibrated
   against, and the two overlapped. Same treatment, just matched to
   this heading level instead of changing the shared h1 rule. */
/* .page-cta and .form-submit are shared with other pages (Scholarship,
   Add Event, ...) where they sit left-aligned in a left-aligned block -
   centered here instead, scoped to this wrapper rather than the shared
   classes themselves so those other pages are unaffected. */
.contact-cta-row {
    text-align: center;
}

.contact-form-card h2 {
    margin: 0 0 1.5rem;

    color: var(--color-secondary);
    font-size: 1.75rem;
}

/* Send a Message / Report a Bug - switches what the form below is for.
   Stands in for the <h2> the form card would otherwise have. */
.contact-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;

    margin: 0 0 1.5rem;

    border-bottom: 2px solid rgb(17 52 86 / 10%);
}

.contact-tab {
    display: inline-flex;
    align-items: center;
    gap: .45rem;

    padding: .6rem 1rem;
    margin-bottom: -2px;

    border-bottom: 3px solid transparent;

    color: #64748b;
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none;

    transition: color .2s ease, border-color .2s ease;
}

.contact-tab:hover {
    color: var(--color-secondary);
}

.contact-tab.active {
    border-bottom-color: var(--color-primary);
    color: var(--color-secondary);
}

.contact-tab:focus-visible {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* .form-subtitle's -1rem top margin is set for sitting under a heading;
   under the tabs it would overlap them. */
.contact-tabs + .form-subtitle {
    margin-top: 0;
}

/* Phones: both tabs side by side, sharing the width. */
@media (max-width: 600px) {
    .contact-tabs {
        flex-wrap: nowrap;
        gap: 0;
    }

    .contact-tab {
        flex: 1;
        justify-content: center;
        gap: .35rem;

        padding: .6rem .25rem;

        font-size: .92rem;
        white-space: nowrap;
    }
}