/*
 * The Contact page (inc/contact-page.php; Eoghan 11932724). A short introduction, then the contact
 * details beside the enquiry form, so the form is in the first screen on a computer and straight after
 * the phone and email on a phone. Then help for groups, schools, birthdays and existing bookings, the
 * directions for both venues together, and accessibility as its own section.
 */

.bh-contact-page {
    display: grid;
    gap: var(--bh-space-8, 2rem);
    padding-bottom: var(--bh-space-8, 2rem);
}

.bh-contact-page h2 {
    margin: 0 0 0.75rem;
    font-size: var(--bh-text-lg);
}

.bh-contact-page h3 {
    margin: 0 0 0.25rem;
    font-size: var(--bh-text-md);
}

.bh-contact-lead {
    max-width: 52rem;
    margin: 0;
    font-size: var(--bh-text-md);
}

.bh-contact-top {
    display: grid;
    gap: 1.5rem;
    grid-template-areas: "talk" "form" "more";
}

@media (min-width: 992px) {
    .bh-contact-top {
        grid-template-areas: "talk form" "more form";
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        grid-template-rows: auto 1fr;
        align-items: start;
        gap: 1.5rem 2rem;
    }
}

.bh-contact-talk { grid-area: talk; }
.bh-contact-form-col { grid-area: form; }
.bh-contact-more { grid-area: more; }

.bh-contact-card,
.bh-contact-form-col,
.bh-contact-venue,
.bh-contact-access {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--bh-line);
    border-radius: 0.5rem;
    background: var(--bh-white);
    color: var(--bh-navy);
}

.bh-contact-form-col {
    padding: 1.5rem;
    border-color: var(--bh-navy);
    border-width: 2px;
    background: var(--bh-surface-2);
}

.bh-contact-form-col > p {
    margin: 0 0 1rem;
}

.bh-contact-more {
    display: grid;
    gap: 1.5rem;
}

.bh-contact-card ul,
.bh-contact-links {
    margin: 0;
    padding: 0;
    list-style: none;
}

.bh-contact-card li + li,
.bh-contact-links li + li {
    margin-top: 0.5rem;
}

.bh-contact-card .bh-visit-block,
.bh-contact-access .bh-visit-block,
.bh-contact-venue .bh-visit-block {
    max-width: none;
    margin: 0;
}

.bh-contact-card p:last-child {
    margin-bottom: 0;
}

/* The form uses the column it is given, not the reading width it keeps in running text. */
.bh-contact-form-col .bh-contact-embed > .bh-quote-form.bh-contact-form {
    max-width: none;
}

.bh-contact-form-col .bh-quote-form__pair {
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.bh-contact-help {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .bh-contact-help,
    .bh-contact-venues {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bh-contact-where > p {
    max-width: 52rem;
}

.bh-contact-venues {
    display: grid;
    gap: 1.5rem;
    margin: 1rem 0;
}

.bh-contact-venue > p {
    margin: 0 0 0.75rem;
}

.bh-contact-where .bh-visit-camp {
    margin: 0;
}

/* Anchors (#opening-hours, #getting-here, #accessibility, #send-a-message) clear the fixed header. */
.bh-contact-page [id] {
    scroll-margin-top: 7rem;
}