/* Contact page fixes (aesthetic review findings 4 and 20).
   Loaded after css/style.css and css/page-hero.css by pages/contact.html only. */

/* Finding 4: css/style.css 5364 to 5380 colours every .form-checkbox label and its links white for the dark
   education form on the pledge page, so on this white card the consent sentence was invisible and the
   wrapping label pushed it under the box. Scoped to .contact-form so the education form is unchanged.
   --text-primary on white is 14.7:1. */
.contact-form .form-checkbox label {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    color: var(--text-primary);
}

.contact-form .form-checkbox label a {
    color: var(--text-primary);
}

/* .contact-form input (style.css 1527) also pads and borders the checkbox; give it a plain fixed box. */
.contact-form .form-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    padding: 0;
    margin-top: 0.2rem;
}

/* Finding 20: style.css 7302 and 7340 give every a and * word-break: break-word under 768px, which lets a flex
   item shrink to one letter, so the social buttons tore inside LinkedIn, Instagram and YouTube. Keep each
   label on one line at every width. */
.contact-info .social-link {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

@media (max-width: 599.98px) {
    /* .form-row is a fixed two column grid (style.css 3874) with no mobile rule. One column; the field
       spacing then comes from .form-group alone. */
    .contact-form .form-row {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0;
    }

    /* Two flex:1 nowrap buttons in a row clipped Book Consultation (style.css 1554 to 1565). */
    .contact-form .form-actions {
        flex-direction: column;
    }

    .contact-form .form-actions .btn-primary,
    .contact-form .form-actions .btn-secondary {
        flex: none;
        width: 100%;
        min-height: 44px;
    }

    /* 3rem card padding left about 250px of text on a 375px screen. */
    .contact-form,
    .contact-info,
    .contact-faq {
        padding: 1.25rem;
    }

    .contact-info .social-links {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .contact-info .social-link {
        min-height: 44px;
    }
}