/* ==========================================================================
   South Bound River Anglers — Contact page
   Loads on top of sbra.css, which supplies the tokens, reset, header, footer
   and the shared interior-page hero.
   ========================================================================== */

:root {
  --contact-bg:   #f7f7f7;   /* light band behind the two columns */
  --form-card:    #1a1a1a;   /* dark form panel                   */
  --field-line:   #d5d5d5;
  --wrap-contact: 1360px;    /* wider than the standard --wrap     */
}

/* ==========================================================================
   Contact band — info column + form card
   ========================================================================== */
.contact {
  background: var(--contact-bg);
  padding-block: clamp(38px, 5vw, 76px);
}
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.62fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(26px, 4vw, 64px);
  width: 100%;
  max-width: var(--wrap-contact);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- left column ---------- */
.contact-heading {
  color: var(--blue);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 700;
  line-height: 1.25;
}
.contact-intro p {
  margin-top: clamp(10px, 1.4vw, 16px);
  font-size: var(--copy-size);
  font-weight: var(--copy-weight);
  line-height: 1.75;
}
.contact-details { margin-top: clamp(26px, 3.4vw, 44px); }
.contact-details .contact-heading { margin-bottom: clamp(14px, 1.8vw, 22px); }

.contact-item + .contact-item { margin-top: clamp(12px, 1.6vw, 18px); }
.contact-item dt {
  color: var(--ink);
  font-size: var(--copy-size-sm);
  font-weight: 700;
}
.contact-item dd {
  margin: 2px 0 0;
  font-size: var(--copy-size-sm);
  font-weight: var(--copy-weight);
}
.contact-item dd a:hover { color: var(--blue); text-decoration: underline; }

.contact-response {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-size: var(--copy-size-sm);
  font-weight: var(--copy-weight);
}

/* ==========================================================================
   Form card
   ========================================================================== */
.contact-form {
  padding: clamp(26px, 3.6vw, 56px);
  background: var(--form-card);
  border-radius: var(--radius-card);
}
.field + .field { margin-top: clamp(10px, 1.3vw, 15px); }

/* The design shows placeholder text only, but a placeholder disappears the
   moment someone types and is not a label. Real labels are kept for screen
   readers and hidden visually instead. */
.field label {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.field input,
.field textarea {
  display: block;
  width: 100%;
  padding: clamp(12px, 1.4vw, 16px) clamp(12px, 1.4vw, 18px);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--copy-size-sm);
  font-weight: var(--copy-weight);
  line-height: 1.5;
  background: var(--white);
  border: 1px solid transparent;
  border-radius: var(--radius);
}
.field textarea { min-height: clamp(110px, 13vw, 150px); resize: vertical; }
.field input::placeholder,
.field textarea::placeholder { color: #6c6c6c; opacity: 1; }
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}
/* Flagged by the browser's own validation once a field has been touched. */
.field input:user-invalid,
.field textarea:user-invalid { border-color: #d9534f; }

/* Spam trap: bots fill hidden fields, humans never see this one. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.contact-submit {
  margin-top: clamp(16px, 2.2vw, 26px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.contact-submit .arrow { transition: transform .2s ease; }
.contact-submit:hover:not(:disabled) .arrow { transform: translateX(3px); }
.contact-submit:disabled { opacity: .6; cursor: progress; }

/* Status line under the button, announced to screen readers via aria-live. */
.form-status {
  margin-top: 14px;
  font-size: var(--copy-size-sm);
  font-weight: var(--copy-weight);
  line-height: 1.6;
}
.form-status:empty { display: none; }
.form-status--ok   { color: #7ddba1; }
.form-status--err  { color: #ff9b96; }

/* ==========================================================================
   Closing banner
   ========================================================================== */
.contact-banner {
  display: block;
  width: calc(100% - (2 * var(--gutter)));
  max-width: var(--wrap-contact);
  margin: clamp(30px, 4vw, 60px) auto clamp(40px, 5vw, 76px);
  overflow: hidden;
  border-radius: var(--radius-card);
}
.contact-banner img { width: 100%; height: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}