/* ============================================================================
   The contact block.

   Used by the Contacts page and by the contact section at the foot of the
   Programs page, so both stay identical and only need fixing in one place.

   Desktop  the details on the left, the message form on the right, the map
            full width beneath them.
   Mobile   the two stack. The long email address is allowed to shrink and
            wrap rather than overflow, and the buttons come down in size.
   ============================================================================ */

.kk-contact__head {
    text-align: center;
    max-width: 740px;
    margin: 0 auto;
    /* the lead in line needs room to breathe before the cards start, and the
       space above is kept tight so the cards finish clear of the bottom edge */
    padding: 18px 20px 28px;
}

.kk-contact__kicker {
    color: rgb(62, 143, 201);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.74rem;
    margin-bottom: 6px;
}

/* These two sit on the theme's own title scale, in the display face, so the
   Contacts page title matches every other page title and the Programs section
   title matches every other section title. The face had looked cramped here
   only because these headings were being drawn at around half the size the
   scale calls for, not because of the face itself. */
.kk-contact__head h1,
.kk-contact__head h2 {
    text-transform: uppercase;
    color: var(--kk-color-title);
}

/* matches .kk-article__title, the page title on History, Programs and the rest */
.kk-contact__head h1 {
    font-size: 40px;
    font-weight: 400;
    line-height: 52px;
}

/* matches .kk-article__title-2, the section title used across the site */
.kk-contact__head h2 {
    font-size: 28px;
    font-weight: 700;
    line-height: 36px;
}

@media only screen and (min-width: 768px) {

    /* The site's page titles run to 60px. This one is held slightly below that
       so the details card and the message form both finish above the fold on a
       laptop screen, which matters more here than matching the scale exactly.
       It is the largest size that still clears it. */
    .kk-contact__head h1 {
        font-size: 44px;
        line-height: 48px;
    }

    .kk-contact__head h2 {
        font-size: 36px;
        line-height: 48px;
    }
}

.kk-contact__head p {
    font-size: 1.05rem;
    margin-top: 4px;
    color: rgb(107, 108, 109);
}

.kk-contact__rule {
    width: 60px;
    height: 4px;
    background: rgb(62, 143, 201);
    border-radius: 2px;
    margin: 10px auto 14px;
}

.kk-contact__wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 26px 42px;
}

.kk-contact__body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    align-items: stretch;
}

.kk-contact__card {
    background: rgb(255, 255, 255);
    border: 1px solid rgb(227, 231, 234);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(1, 50, 90, 0.06);
    display: flex;
    flex-direction: column;
}

/* ------------------------------- details -------------------------------- */

/* The rows spread across the card as before, which is what puts Get Directions
   on the floor of the card, level with Send Message beside it. The extra 6px at
   the foot makes the two buttons land on exactly the same line, since the form
   carries slightly more padding below its button than a row does. The gaps
   between the rows are no longer large, because the card itself is shorter now
   that the form has come down. */
.kk-contact__details {
    padding: 2px 24px 6px;
    justify-content: space-between;
}

.kk-contact__row {
    padding: 14px 2px;
    border-bottom: 1px solid rgb(227, 231, 234);
}

.kk-contact__row:last-child {
    border-bottom: 0;
}


.kk-contact__label {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(62, 143, 201);
    font-weight: 700;
    margin-bottom: 6px;
}

.kk-contact__value {
    color: rgb(51, 67, 85);
    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 10px;
    overflow-wrap: anywhere;
}

.kk-contact__value a {
    color: rgb(51, 67, 85);
    text-decoration: none;
}

/* the value and its button share one line */
.kk-contact__line {
    display: flex;
    align-items: center;
    gap: 16px;
}

.kk-contact__line .kk-contact__value {
    margin-bottom: 0;
}

.kk-contact__btn {
    display: inline-block;
    background: rgb(62, 143, 201);
    color: rgb(255, 255, 255);
    font-weight: 700;
    padding: 9px 22px;
    border-radius: 4px;
    font-size: 0.9rem;
    text-decoration: none;
    flex: 0 0 auto;
}

.kk-contact__btn:hover,
.kk-contact__btn:focus {
    background: rgb(47, 116, 168);
    color: rgb(255, 255, 255);
}

.kk-contact__line .kk-contact__btn {
    min-width: 120px;
    text-align: center;
}

/* -------------------------------- form ---------------------------------- */

.kk-contact__form {
    padding: 16px 22px 20px;
}

/* matches the headings above it, for the same legibility reason */
.kk-contact__form h2 {
    font-family: var(--kk-font-body);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--kk-color-title);
}

.kk-contact__form .kk-contact__rule {
    margin: 8px 0 12px 0;
}

.kk-contact__field {
    margin-bottom: 9px;
}

.kk-contact__field label {
    display: block;
    font-weight: 600;
    color: rgb(51, 67, 85);
    margin-bottom: 5px;
    font-size: 0.88rem;
}

.kk-contact__field input,
.kk-contact__field textarea {
    width: 100%;
    border: 1px solid rgb(227, 231, 234);
    border-radius: 6px;
    padding: 9px 13px;
    font-family: inherit;
    font-size: 1rem;
    color: rgb(51, 67, 85);
    background: rgb(244, 247, 249);
}

/* Short enough that Send Message clears the fold on a laptop screen. It can
   still be dragged taller by anyone writing a long message. */
.kk-contact__field textarea {
    min-height: 64px;
    resize: vertical;
}

.kk-contact__send {
    display: inline-block;
    background: rgb(62, 143, 201);
    color: rgb(255, 255, 255);
    font-weight: 700;
    padding: 11px 26px;
    border-radius: 4px;
    border: 0;
    cursor: pointer;
    font-size: 1rem;
    width: 100%;
    margin-top: auto;
}

.kk-contact__send:hover,
.kk-contact__send:focus {
    background: rgb(47, 116, 168);
}

/* --------------------------------- map ---------------------------------- */

.kk-contact__maplabel {
    padding: 16px 22px 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgb(62, 143, 201);
    font-weight: 700;
}

.kk-contact__map {
    flex: 1;
    min-height: 340px;
}

.kk-contact__map iframe {
    width: 100%;
    height: 100%;
    min-height: 340px;
    border: 0;
    display: block;
}

.kk-contact__mapcard {
    margin-top: 22px;
}

/* -------------------------------- mobile -------------------------------- */

@media only screen and (max-width: 860px) {

    .kk-contact__body {
        grid-template-columns: 1fr;
    }

    .kk-contact__head {
        padding: 26px 20px 22px;
    }

    /* the two headings deliberately carry no size override here, so they
       follow the same scale as every other title on the site */

    .kk-contact__head p {
        font-size: 1rem;
        line-height: 1.55;
    }

    .kk-contact__wrap {
        padding: 0 18px 34px;
    }

    .kk-contact__details {
        padding: 2px 18px;
    }

    /* the email is one long unbreakable word, so it is allowed to shrink and
       wrap here instead of running past the edge of the card */
    .kk-contact__line {
        gap: 12px;
        flex-wrap: wrap;
    }

    .kk-contact__line .kk-contact__value {
        min-width: 0;
        flex: 1 1 auto;
        word-break: break-word;
        font-size: 0.98rem;
    }

    .kk-contact__line .kk-contact__btn,
    .kk-contact__btn {
        min-width: 0;
        padding: 8px 16px;
        font-size: 0.85rem;
    }

    .kk-contact__send {
        font-size: 0.95rem;
        padding: 11px 20px;
    }

    .kk-contact__form {
        padding: 16px 18px 20px;
    }

    .kk-contact__map,
    .kk-contact__map iframe {
        min-height: 260px;
    }
}

/* ============================================================================
   Compact variant: details beside the map, no form.
   Used at the foot of the Programs page.
   ============================================================================ */

.kk-contact__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: stretch;
    max-width: 940px;
    margin: 0 auto;
}

.kk-contact__info {
    background: rgb(244, 247, 249);
    border: 1px solid rgb(227, 231, 234);
    border-radius: 10px;
    padding: 4px 24px;
}

.kk-contact__info .kk-contact__row {
    padding: 15px 0;
}

.kk-contact__phone {
    font-family: "Unica One", "Open Sans", sans-serif;
    font-size: 1.7rem;
    color: rgb(51, 67, 85);
    line-height: 1;
}

.kk-contact__phone a {
    color: rgb(51, 67, 85);
    text-decoration: none;
}

.kk-contact__info .kk-contact__btn {
    margin-top: 9px;
    padding: 8px 20px;
    font-size: 0.88rem;
}

.kk-contact__maplink {
    display: inline-block;
    margin-top: 8px;
    color: rgb(62, 143, 201);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
}

.kk-contact__maplink:hover,
.kk-contact__maplink:focus {
    color: rgb(47, 116, 168);
}

.kk-contact__mapbox {
    border: 1px solid rgb(227, 231, 234);
    border-radius: 10px;
    overflow: hidden;
    min-height: 360px;
    display: flex;
}

.kk-contact__mapbox iframe {
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
    display: block;
}

@media only screen and (max-width: 860px) {

    .kk-contact__grid {
        grid-template-columns: 1fr;
    }

    .kk-contact__info {
        padding: 4px 18px;
    }

    .kk-contact__mapbox,
    .kk-contact__mapbox iframe {
        min-height: 260px;
    }
}