/* assets/css/contact.css
 * Layout for the Contact and support page. Loaded only by contact.html;
 * the form and accordion components themselves live in components.css so
 * other pages can reuse them.
 */

/* ---- Page head ------------------------------------------------------
 * The scene sits in normal flow and sets the band height, so the artwork is
 * never cropped and never has to be measured. The copy is then positioned
 * over it as a fraction of that height, which keeps it sitting where it
 * does in the artwork at any width.
 */

/* Fixed height rather than letting the artwork set it. The scene is pinned
   to the bottom edge: where it is taller than the band the sky crops off the
   top, where it is shorter the band colour carries the difference. */
.contact-hero {
  position: relative;
  overflow: hidden;
  height: var(--hero-h);
  background: var(--band);
  text-align: center;
}

.contact-hero__scene {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.contact-hero__copy {
  position: absolute;
  top: 96px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--hero-w);
  padding-inline: var(--gutter);
}

.contact-hero .eyebrow {
  display: inline-block;
  font-size: 22px;
}

.contact-hero__title {
  /* FACE AND WEIGHT STATED, NOT INHERITED.
     These relied on the global `h1` rule for bold. That holds while the hero
     is an <h1> on a page that loaded base.css in the usual order — and stops
     holding the moment one is rendered from a React page, wrapped in another
     element, or reached with a different stylesheet order. A hero headline
     should not depend on which tag it happens to be in. */
  font-family: var(--font-heading);
  font-weight: 700;

  --hard-shadow-offset: 4px;
  margin-top: 6px;
  font-size: var(--hero);
  line-height: var(--hero-lh);
}

.contact-hero__lead {
  max-width: 620px;
  margin: 12px auto 0;
  font-size: 17.5px;
  line-height: 26px;
}

/* ---- Form and details ----------------------------------------------- */

.contact-main {
  padding-top: 110px;
}

.contact-main__inner {
  display: grid;
  grid-template-columns: 600px 1fr;
  gap: 70px;
  align-items: start;
}

/* Decorated panel. The doodles are positioned as percentages of the panel,
   taken from their offsets in the source artwork, so they hold their
   relationship to each other as the panel resizes. */
.contact-form {
  position: relative;
  overflow: hidden;
  /* Vertical padding is a percentage of the panel width, the same basis the
     doodles scale on, so the envelope at the top and the handwriting at the
     bottom keep their clearance from the fields at any panel size. */
  padding: 24% 10.8%;
  border-radius: 18px;
  background: var(--forest);
}

.contact-form__body {
  position: relative;
  z-index: 1;
}

.doodle {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

.doodle--top {
  top: 0;
  left: 0;
  width: 98%;
}

.doodle--bubble {
  top: 33%;
  left: 0;
  width: 8.7%;
}

.doodle--loop {
  top: 31%;
  right: 1%;
  width: 50%;
}

.doodle--bottom {
  bottom: 0;
  left: 0;
  width: 98%;
}

.contact-details {
  padding-top: 10px;
}

.contact-details__list {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.contact-line {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  align-items: start;
}

.contact-line__icon {
  width: 24px;
  height: 24px;
  color: var(--brand);
}

.contact-line__label {
  display: block;
  font-size: var(--small);
  line-height: var(--small-lh);
  color: var(--ink-soft);
}

.contact-line__value {
  display: block;
  margin-top: 2px;
  font-size: 22px;
  line-height: 30px;
  color: var(--ink);
}

a.contact-line__value:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The footer marks are drawn white for a dark background. This column gets
   its own set drawn in ink, rather than inverting the footer's. */
.contact-details__socials {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 42px;
  color: var(--ink);
}

.contact-details__socials a {
  display: block;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.contact-details__socials a:hover {
  opacity: 0.6;
}

.contact-details__socials img {
  width: 26px;
  height: 26px;
}

.contact-note {
  margin-top: 42px;
  padding: 24px 26px;
  border-radius: var(--radius);
  background: var(--paper);
}

.contact-note__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--body);
  line-height: 22px;
}

.contact-note p {
  margin-top: 8px;
  font-size: 15px;
  line-height: 22px;
  color: var(--ink-soft);
}

/* ---- Support --------------------------------------------------------- */

.support {
  padding-top: 130px;
  padding-bottom: 20px;
}

.support .sec-head {
  gap: 10px;
}

.support__faq {
  max-width: 1081px;
  margin: 60px auto 0;
}

.support__footnote {
  max-width: 1081px;
  margin: 40px auto 0;
  text-align: center;
  color: var(--ink-soft);
}

.support__footnote a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---- Responsive ------------------------------------------------------ */

@media (max-width: 1340px) {
  .contact-main__inner {
    grid-template-columns: 1fr 1fr;
    gap: 44px;
  }

  .contact-form {
    padding: 24% 8%;
  }
}

@media (max-width: 1100px) {
  /* Too short to host the copy over the art, so the two stack. The scene
     crops to its right end, where the signpost names the four sports,
     rather than zooming into the empty middle. */
  .contact-hero {
    display: flex;
    flex-direction: column;
    height: auto;
    padding-top: 56px;
  }

  .contact-hero__copy {
    position: static;
    order: 1;
    width: auto;
    transform: none;
  }

  .contact-hero__scene {
    position: static;
    order: 2;
    width: 100%;
    height: 200px;
    margin-top: 34px;
    object-fit: cover;
    object-position: 86% bottom;
  }

  

  .contact-main {
    padding-top: 64px;
  }

  .contact-main__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .support {
    padding-top: 80px;
  }

  .support__faq {
    margin-top: 40px;
  }
}

@media (max-width: 640px) {
  

  .contact-hero__scene {
    height: 180px;
    object-position: 100% bottom;
  }

  .contact-form {
    padding: 26% 7%;
  }

  .contact-line__value {
    font-size: 19px;
    line-height: 26px;
  }
}