/* ==========================================================================
   OTN theme: Contact page layout (DESIGN.md 8.9), ported from the mockups'
   assets/css/pages/contact.css.
   The sub-menu, page head, social list and form fields come from
   components.css and blocks.css.
   ========================================================================== */

/* Details | form: stacked on phones (details first, as in the source);
   from 900px two columns, 5fr 7fr, 48px apart */
.otn-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--otn-space-7);
  padding-bottom: var(--otn-section-y);
}

.otn-contact > * {
  min-width: 0;
}

@media (min-width: 900px) {
  .otn-contact {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
}

/* "Visit, call or email" and "Send a message": H2s in h3 size
   (Sherman Sans Bold, as written, no capitals) */
.otn-contact__heading,
:root .otn-contact .otn-contact__heading {
  margin: 0 0 var(--otn-space-4);
  color: var(--otn-text);
  font-family: var(--otn-font-sans);
  font-size: var(--otn-fs-h3);
  font-weight: var(--otn-fw-bold);
  line-height: var(--otn-lh-h3);
  letter-spacing: 0;
  text-transform: none;
}

/* Phone and email links (otn-settings' otn/contact-details): underlined
   and on their own lines, each a 44px-tall target on phones, 32px from
   600px (as the footer's) */
.otn-contact :is(.otn-contact__address, address) a {
  display: inline-flex;
  align-items: center;
  min-height: var(--otn-tap-min);
}

@media (min-width: 600px) {
  .otn-contact :is(.otn-contact__address, address) a {
    min-height: 2rem;
  }
}

/* "Follow OTN" (an H3 styled as a kicker), 32px under the address */
.otn-contact__follow,
:root .otn-contact .otn-contact__follow {
  margin-top: var(--otn-space-6);
}

/* Social links: the link colour and underlined like the phone and email
   above (the base link style); the footer keeps its own list style */
.otn-contact a.otn-social__item {
  color: var(--otn-link);
}

.otn-contact a.otn-social__item:hover {
  color: var(--otn-link-hover);
}

/* "Pitching a show? Use the pitch form", 24px under the form */
.otn-contact__pitch,
:root p.otn-contact__pitch {
  margin-top: var(--otn-space-5);
}