/* ============================================================
   Contact form  (EWW-13)

   Moved out of index.html's inline <style> so the
   homepage and the service landing pages share one copy.
   Colours darkened where needed for WCAG AA (see inline notes).
   Expects the site's :root tokens (--bg2, --border, --navy, --shadow, --teal-text).

   Markup lives in core/templates/core/_contact_form.html
   ============================================================ */

.cform {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: 22px;
  padding: 2.2rem;
  box-shadow: var(--shadow);
}

.form-title { font-size: 1rem; font-weight: 800; color: var(--navy); margin-bottom: 1.4rem; }

.contact-message {
  display: none;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 1rem;
  line-height: 1.5;
}

.contact-message.success {
  display: block;
  background: #e8f8f7;
  color: #0f766e;
  border: 1px solid rgba(15,157,151,0.25);
}

.contact-message.error {
  display: block;
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid rgba(185,28,28,0.2);
}

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

.fgroup { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; }

.fgroup label { font-size: 0.78rem; font-weight: 800; color: var(--navy); }

/* Field border #7d889f: 3.6:1 on the white field and 3.4:1 on the card,
   for WCAG 1.4.11 (3:1). --border (#e2e8f0) was 1.2:1, so fields were
   hard to make out; --border stays as is for the card and other chrome. */
.fgroup input,
.fgroup textarea,
.fgroup select {
  border: 1.5px solid #7d889f;
  border-radius: 12px;
  padding: 0.78rem 0.9rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.86rem;
  color: var(--navy);
  background: #fff;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}

/* Focus ring: solid #0f766e is 5.5:1 on white and 5.2:1 on the card
   (WCAG 1.4.11 needs 3:1); the old 10% teal glow was barely visible.
   outline rather than box-shadow so it survives forced-colors mode. */
.fgroup input:focus,
.fgroup textarea:focus,
.fgroup select:focus {
  border-color: var(--teal-text, #0f766e);
  outline: 2px solid var(--teal-text, #0f766e);
  outline-offset: 1px;
}

.fgroup textarea { resize: vertical; min-height: 105px; }

/* Darker than --accent-gradient: white text was 3.3:1 to 2.2:1 on it,
   on these stops it is 5.5:1 to 4.7:1 (WCAG AA 4.5:1). */
.fsub {
  width: 100%;
  background: linear-gradient(135deg, #0f766e, #0d827b);
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 0.95rem;
  border-radius: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 0.9rem;
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
  box-shadow: 0 10px 26px rgba(15,118,110,0.32);
}

.fsub:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(15,118,110,0.42); }
.fsub:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.fsub:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }

@media (max-width: 760px) {
  .frow { grid-template-columns: 1fr; }
  .cform { padding: 1.6rem; }
}