/* Contact page shell. Applies to every /contact/* form so the tab row, hero, and card
   look consistent. Not scoped CSS because the four forms live in separate Razor files
   and scoped CSS only covers one component. */

.contact-page .contact-hero h1 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

.contact-page .contact-form-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.4rem;
    background: #f8f9fa;
    border-radius: 12px;
}

.contact-page .contact-kind {
    flex: 1 1 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.9rem;
    font-weight: 500;
    color: #4b5563;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}

.contact-page .contact-kind:hover {
    background: #fff;
    color: #111827;
}

.contact-page .contact-kind.active {
    background: #fff;
    color: #2563eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.contact-page .contact-kind i {
    font-size: 1.1rem;
}