/* CALIBRE Play - Contact (/contact/). Template: parent page-contact.php, wrapped by the
   child page-contact.php (adds the "Quick answers" links under the form). The form, ids
   and script are the parent's, unchanged. */

html body .wrap { width: 100%; max-width: 720px; padding: 30px 22px 96px; }
html body .wrap a.back {
  display: inline-flex; align-items: center; min-height: 44px; color: var(--play-muted); font-size: 14px; font-weight: 600; text-decoration: none;
}
html body .wrap a.back:hover { color: var(--play-ink); }
html body .wrap > h1 { font-size: clamp(34px, 6.4vw, 54px); line-height: 1.04; margin: 4px 0 12px; }
html body .wrap > .sub { color: var(--play-muted); font-size: 17px; line-height: 1.55; margin: 0 0 24px; max-width: 52ch; }

/* the form panel */
html body .wrap > .card {
  background: var(--play-card); border: 1px solid var(--play-line); border-radius: 20px; padding: 24px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .45);
}
html body .card label {
  display: block; margin: 0 0 7px; font: 800 12px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--play-muted);
}
html body .card .field { margin-bottom: 18px; }
html body .card .row { gap: 0 16px; }
html body .card input, html body .card textarea {
  width: 100%; padding: 13px 14px; min-height: 50px; font: 500 16px/1.4 var(--f-body); color: var(--play-ink);
  background: var(--play-card-2); border: 1.5px solid var(--play-line); border-radius: 12px; outline: none;
}
html body .card textarea { min-height: 150px; resize: vertical; }
html body .card input::placeholder, html body .card textarea::placeholder { color: #8f92b8; opacity: 1; }   /* 4.7:1 on the input fill */
html body .card input:focus, html body .card textarea:focus {
  outline: none; border-color: var(--play-water); box-shadow: 0 0 0 3px rgba(111, 157, 224, .28);
}
html body .card button#send {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; border-radius: 12px; cursor: pointer;
  background: var(--play-fire); color: var(--play-on); font: 800 16px/1 var(--f-body); border: 2px solid rgba(0, 0, 0, .25); box-shadow: var(--play-shadow);
}
html body .card button#send:hover { background: #f18566; }
html body .card button#send:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
html body .card button#send:disabled { opacity: .6; transform: none; }
html body .card .msg.err {
  color: var(--play-ink); font-size: 15px; border-radius: 12px; padding: 12px 14px;
  background: color-mix(in srgb, var(--play-fire) 16%, var(--play-card)); border: 1px solid color-mix(in srgb, var(--play-fire) 60%, var(--play-card));
}
/* sent */
html body .card #ok { padding: 14px 0 6px; }
html body .card #ok .tick {
  width: 56px; height: 56px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; font-size: 28px; font-weight: 800;
  color: var(--play-grass); border: 2px solid var(--play-grass); background: color-mix(in srgb, var(--play-grass) 16%, var(--play-card));
}
html body .card #ok h3 { font: 400 24px/1.15 var(--f-display) !important; color: var(--play-ink); margin: 14px 0 8px !important; }
html body .card #ok .sub { color: var(--play-muted); font-size: 15.5px; line-height: 1.55; }

/* under the form */
html body .wrap > .other { margin: 22px 0 0; font-size: 15px; color: var(--play-muted); }
html body .wrap > .other a { color: var(--play-fire-ink); font-weight: 700; }
html body .ct-quick { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--play-line); }
html body .ct-quick p { margin: 0 0 10px; font: 800 12px/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--play-muted); }
html body .ct-quick ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
html body .ct-quick a {
  --tone: var(--play-water); display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px;
  font-weight: 700; font-size: 14.5px; color: var(--play-ink); text-decoration: none;
  background: color-mix(in srgb, var(--tone) 12%, var(--play-card)); border: 1.5px solid color-mix(in srgb, var(--tone) 55%, var(--play-card));
}
html body .ct-quick li:nth-child(2) a { --tone: var(--play-grass); }
html body .ct-quick li:nth-child(3) a { --tone: var(--play-psychic); }
html body .ct-quick a:hover { color: #fff; background: color-mix(in srgb, var(--tone) 22%, var(--play-card)); }

@media (max-width: 480px) {
  html body .wrap { padding-top: 18px; }
  html body .wrap > .card { padding: 18px 16px; }
  html body .card .row > .field { min-width: 100%; }
  html body .card button#send { width: 100%; }
}