/* =========================================================
   GlobeWarn — contact.css

   Two columns on a wide screen: the form, and beside it the addresses and
   the things worth reading before writing. One column on a phone, form
   first, because that is what the page is for.

   Colours are the site's own variables. Every field is 16 px, which is what
   stops iOS zooming the page the moment a finger lands in one.
   ========================================================= */

#contact {
  box-sizing: border-box;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 2rem var(--gutter, 1.1rem) 4rem;
}

#contact *,
#contact *::before,
#contact *::after { box-sizing: border-box; }

/* --- head ---------------------------------------------------------------- */

.contact-back { margin: 0 0 1.4rem; font-size: 0.92rem; }
.contact-back a { color: var(--ink-soft, #55606d); text-decoration: none; }
.contact-back a:hover { color: var(--accent, #D9480F); }

#contact h1 {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.contact-lede {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink-soft, #55606d);
  max-width: 42rem;
}

.contact-head {
  padding-bottom: 1.6rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line, #c9d2dc);
}

/* --- layout -------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: 2.4rem;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 52rem) {
  .contact-grid { grid-template-columns: 1fr; gap: 2rem; }
}

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

.field { margin-bottom: 1.1rem; }

.field-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 34rem) {
  .field-row { grid-template-columns: 1fr; gap: 0; }
}

.field label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.92rem;
  font-weight: 600;
}

.field-note {
  font-weight: 400;
  color: var(--ink-faint, #6b7683);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;             /* 16 px: iOS will not zoom the page */
  line-height: 1.5;
  padding: 0.62rem 0.75rem;
  border: 1px solid var(--line-strong, #8c99a8);
  border-radius: 8px;
  background: var(--surface, #fff);
  color: inherit;
}

.field textarea { resize: vertical; min-height: 9rem; }

.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.85rem center;
  background-size: 0.32rem 0.32rem, 0.32rem 0.32rem;
  background-repeat: no-repeat;
  padding-right: 2.2rem;
}

.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent, #D9480F);
  outline-offset: 1px;
  border-color: transparent;
}

.field-help {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft, #55606d);
  min-height: 1.2em;           /* reserved, so nothing jumps as it changes */
}

/* The honeypot. Off the page rather than display:none, because some bots
   skip anything hidden and fill anything that is not. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- send ---------------------------------------------------------------- */

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.1rem;
  margin-top: 1.4rem;
}

.contact-send {
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  padding: 0.66rem 1.6rem;
  border-radius: 8px;
  border: 1px solid var(--accent, #D9480F);
  background: var(--accent, #D9480F);
  color: var(--accent-ink, #fff);
  cursor: pointer;
}

.contact-send:hover { filter: brightness(1.06); }

.contact-send:focus-visible {
  outline: 2px solid var(--accent, #D9480F);
  outline-offset: 3px;
}

.contact-send[disabled] { opacity: 0.6; cursor: default; }

.contact-privacy {
  flex: 1 1 16rem;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft, #55606d);
}

.contact-privacy a { color: inherit; }

/* --- the answer ---------------------------------------------------------- */

.contact-result {
  margin: 1.2rem 0 0;
  padding: 0.8rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  line-height: 1.55;
  border: 1px solid var(--line, #c9d2dc);
}

.contact-result.is-good {
  border-color: var(--sev-green, #2E8B57);
  background: var(--sev-green-wash, rgba(46, 139, 87, 0.1));
}

.contact-result.is-bad {
  border-color: var(--sev-orange, #F26A1B);
  background: var(--sev-orange-wash, rgba(242, 106, 27, 0.1));
}

/* --- beside it ----------------------------------------------------------- */

.contact-aside {
  padding: 1.3rem 1.4rem 1.5rem;
  border: 1px solid var(--line, #c9d2dc);
  border-radius: 12px;
  background: var(--surface, #fff);
}

.contact-aside h2 {
  margin: 1.6rem 0 0.5rem;
  font-family: var(--font-display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}

.contact-aside h2:first-child { margin-top: 0; }

.contact-aside p {
  margin: 0 0 0.7rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--ink-soft, #55606d);
}

.contact-aside a {
  color: inherit;
  border-bottom: 1px solid var(--line-strong, #8c99a8);
  text-decoration: none;
}

.contact-aside a:hover { border-bottom-color: var(--accent, #D9480F); }

.contact-list {
  margin: 0 0 0.4rem;
  font-size: 0.94rem;
  line-height: 1.5;
}

.contact-list dt {
  margin-top: 0.6rem;
  font-size: 0.86rem;
  color: var(--ink-faint, #6b7683);
}

.contact-list dd { margin: 0.1rem 0 0; }

.contact-who {
  font-size: 0.9rem;
  line-height: 1.65;
}