/* ==========================================================================
   Devgun Family Law -- Page: Contact
   No dedicated Figma frame exists; build spec Section 5.5 is the
   sanctioned design source for the contact form (decision D4). This file
   carries: (1) the page layout (standalone 926px measure, matching the
   detail-page standalone convention), (2) the contact-info retheme off
   the legacy DS grays, and (3) the UserForms styling per spec 5.5 --
   labels above fields, 44px min input heights, 8px radius inputs, the
   standard focus ring, Dark Blue pill submit (replacing the legacy
   orange #C75728 submit, X3), and tokenized error/success messaging.

   Placement decision: page-scoped file (page/contact.css) rather than
   chrome/forms.css because the chrome/ layer belongs to another
   workstream this pass. The form rules below are written generically
   against `form.userform` (vendor markup: label.left + .middleColumn +
   nav.Actions input.action) so they can migrate to chrome/forms.css
   verbatim if userforms ever render on other pages.

   Consumes tokens from foundation/tokens.css only, except the two
   validation-danger values: red is deliberately not a brand token; spec
   5.5 prescribes Bootstrap's $danger with a >=4.5:1 text guarantee.
   Declared as local custom properties below (border #DC3545 = Bootstrap
   4.5 $danger, 4.53:1 on white -- passes the 3.0 UI bar with margin;
   message text darkened to #B02A37, 5.72:1 on white -- comfortable 4.5
   normal-text pass).
   Loaded by templates/App/Pages/Layout/ContactPage.ss.
   ========================================================================== */

.contact-main {
  --form-danger-border: #DC3545;
  --form-danger-text: #B02A37;
}

/* ------------------------------------------------------------------ *
 * Layout -- standalone content measure (926px, same as
 * .detail-content--standalone on the practice-area pages). The legacy
 * bare `#main{padding:6rem}` keeps the bottom padding; hero.css zeroes
 * the top (`.hero ~ #main`), so the container carries its own top
 * rhythm.
 * ------------------------------------------------------------------ */

.contact-container {
  width: 100%;
  max-width: 926px;
  margin: 0 auto;
  padding: var(--space-section-y) var(--space-page-gutter) 0;
}

.contact-content {
  margin-bottom: var(--space-section-y);
}

/* ------------------------------------------------------------------ *
 * Lead-in above the info+form card (2026-07-03 form-visibility round).
 * Centered eyebrow + section H2 + one-line support, so the form section
 * announces itself before the card. Strings in the template are DRAFT
 * copy pending client sign-off.
 * ------------------------------------------------------------------ */

.contact-lead {
  text-align: center;
  max-width: 40rem;
  margin: 0 auto var(--space-gap);
}

.contact-lead__eyebrow {
  display: block;
  text-transform: uppercase;
  font-size: var(--fs-body2);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  color: var(--color-blue-canopy);
  margin-bottom: 0.5rem;
}

.contact-lead__heading {
  color: var(--color-text-heading);
  margin-bottom: 0.5rem;
}

.contact-lead__support {
  color: var(--color-text-default);
}

/* ------------------------------------------------------------------ *
 * Info + form card. One tinted surface holds the office info and the
 * form so the form no longer floats invisible on the white page bg
 * (the "form fades in" complaint). Surface is the Lighter Blue card
 * tint -- deliberately the BLUE family so the card cannot blur into
 * the Light GREEN callout band directly below the prose (hue
 * separation, frontend-architect round).
 * DOM: form first (primary action -> first in focus order and first in
 * the mobile stack); desktop grid places info left / form right via
 * explicit placement, independent of DOM order.
 * ------------------------------------------------------------------ */

.contact-info-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-gap);
  background-color: var(--color-bg-card-tint);
  border-radius: var(--radius-card);
  padding: var(--space-page-gutter);
  margin-bottom: var(--space-section-y);
}

@media (min-width: 992px) {
  .contact-info-form {
    grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    padding: var(--space-card);
    column-gap: calc(var(--space-gap) * 1.5);
  }

  .contact-info-form > .contact-info {
    grid-column: 1;
    grid-row: 1;
  }

  .contact-info-form > .contact-form {
    grid-column: 2;
    grid-row: 1;
  }
}

/* "Prefer to talk?" alternative-channel line under the submit. The
   explicit link rule matters: this anchor sits outside .contact-info /
   .typography scopes, so without it the legacy site.css orange `a`
   color leaks through (observed live 2026-07-03). */
.contact-form__alt {
  margin: 1rem 0 0;
  font-size: var(--fs-body2);
  color: var(--color-text-default);
}

.contact-form__alt a {
  color: var(--color-green-forest);
  font-weight: var(--fw-bold);
}

.contact-form__alt a:hover,
.contact-form__alt a:focus-visible {
  color: var(--color-green-forest);
  text-decoration: underline;
}

/* Article-style headings inside the page copy ("Communities Served",
   "Before You Contact Us") render at the content-heading scale (~36/600)
   -- same X1b treatment the detail pages use, not the 50px section H2. */
.contact-content.typography h2 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-h4);
}

/* ------------------------------------------------------------------ *
 * Contact info -- retheme the legacy DS grays (#7f92ac/#264262) to
 * tokens. Structure/copy unchanged from the previous template.
 * ------------------------------------------------------------------ */

.contact-main .contact-info {
  padding-bottom: 0;
}

.contact-main .contact-info h5 {
  color: var(--color-text-heading);
  text-transform: none;
  margin-bottom: 0.75rem;
}

.contact-main .contact-info .contact-line {
  color: var(--color-text-default);
  padding: 0.25rem 0;
}

.contact-main .contact-info .contact-line .icon {
  display: inline-block;
  width: 1.875rem;
  font-size: 1.125rem;
  color: var(--color-blue-dark);
}

.contact-main .contact-info .contact-line.label {
  padding-top: 1rem;
  text-transform: uppercase; /* eyebrow label -- transform allowed (7.3) */
  font-size: var(--fs-body2);
  font-weight: var(--fw-semibold);
  color: var(--color-text-default);
}

/* Phone/email links: bold 18px inline links on white -- Forest Green per
   fix F2 (Canopy on white fails normal-text AA; Forest Green 8.06:1). */
.contact-main .contact-info a {
  color: var(--color-green-forest);
  font-weight: var(--fw-bold);
  font-size: var(--fs-links);
  letter-spacing: 0;
}

.contact-main .contact-info a:hover,
.contact-main .contact-info a:focus-visible {
  color: var(--color-green-forest);
  text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * UserForms -- build spec 5.5. Written against the vendor field-holder
 * markup (EditableFormField_holder.ss): .field > label.left.form-label
 * + .middleColumn > input/textarea/select + span.message. Selectors
 * out-specify the legacy site.css form rules (form input.text 40px,
 * orange submit, orange required marker).
 * ------------------------------------------------------------------ */

form.userform .field {
  margin-bottom: 1.5rem;
}

/* Labels above fields, never placeholder-as-label (5.5 / a11y).
   Semibold + heading green (2026-07-03): on the tinted card the labels
   need to hold their own; Forest Green ties them to the site heading
   color (8.06:1 on white, still >=7:1 on the Lighter Blue tint). */
form.userform label.left,
form.userform legend.left {
  display: block;
  font-family: var(--font-family-base);
  font-size: var(--fs-body1);
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
  margin-bottom: 0.5rem;
  padding: 0;
}

/* Required marker: keep the marker (visible indicator + attr per 5.5),
   recolor off the legacy orange. */
form.userform .requiredField > label.left:after,
form.userform label.required:after {
  color: var(--form-danger-text);
}

form.userform .middleColumn {
  margin: 0;
}

/* Inputs: 8px radius, subtle border, >=44px height, body-1 type. */
form.userform input.text,
form.userform input[type='text'],
form.userform input[type='email'],
form.userform input[type='tel'],
form.userform input[type='number'],
form.userform input[type='date'],
form.userform select.dropdown,
form.userform textarea.textarea {
  display: block;
  width: 100%;
  min-height: 44px;
  height: auto;
  padding: 0.625rem 0.875rem;
  /* 1.5px solid Light Blue (2026-07-03): the old 12%-alpha hairline was
     part of the form-invisibility complaint -- field boundaries read at
     a glance now, and white inputs pop off the tinted card. */
  border: 1.5px solid var(--color-blue-light);
  border-radius: var(--radius-input);
  background-color: var(--color-white);
  color: var(--color-text-default);
  font-family: var(--font-family-base);
  font-size: var(--fs-body1);
  line-height: var(--lh-body1);
  letter-spacing: 0;
}

form.userform textarea.textarea {
  min-height: 8.5rem;
  resize: vertical;
}

/* Focus: border to the action color + the standard ring (5.5). */
form.userform input.text:focus,
form.userform input[type='text']:focus,
form.userform input[type='email']:focus,
form.userform input[type='tel']:focus,
form.userform input[type='number']:focus,
form.userform input[type='date']:focus,
form.userform select.dropdown:focus,
form.userform textarea.textarea:focus {
  outline: none;
  border-color: var(--color-action);
  box-shadow: var(--shadow-focus);
}

/* Error state: red border + inline message (not color alone -- the
   message text carries the meaning; UserForms sets aria-invalid). */
form.userform input.error,
form.userform input.requiredField.error,
form.userform textarea.error,
form.userform textarea.requiredField.error,
form.userform select.error {
  border-color: var(--form-danger-border);
}

form.userform .field .message,
form.userform label.error,
form.userform span.error {
  display: block;
  margin-top: 0.5rem;
  font-size: var(--fs-body2);
  font-weight: var(--fw-medium);
  color: var(--form-danger-text);
}

/* Form-level messages: error/bad = danger; good = confirmation panel. */
form.userform > p.message,
.contact-form p.message {
  display: block;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-input);
  font-size: var(--fs-body1);
  font-weight: var(--fw-medium);
}

form.userform p.message.bad,
form.userform p.message.error,
form.userform p.message.required,
form.userform p.message.validation,
.contact-form p.message.bad,
.contact-form p.message.error {
  color: var(--form-danger-text);
  border: 1px solid var(--form-danger-border);
  background-color: var(--color-white);
}

form.userform p.message.good,
.contact-form p.message.good {
  color: var(--color-green-forest);
  border: 1px solid var(--color-green-forest);
  background-color: var(--color-green-lighter);
}

/* Hidden empty message placeholder (vendor renders it inline-styled
   display:none with aria-hidden) -- no styling needed, listed here so
   nobody "fixes" its emptiness later. */

/* Checkbox/radio custom controls (vendor + legacy site.css control
   pattern): recolor the legacy orange checked states to the action
   token. Not used by the seeded Name/Email/Phone/Message form but kept
   generic for future fields. */
form.userform .control--checkbox .control__indicator:after {
  border-color: var(--color-action);
}

form.userform .control--radio .control__indicator:after {
  background: var(--color-action);
}

form.userform .control input:checked:focus ~ .control__indicator,
form.userform .control:hover input:not([disabled]):checked ~ .control__indicator {
  border-color: var(--color-action);
}

/* ------------------------------------------------------------------ *
 * Submit -- Dark Blue pill (kills the legacy orange #C75728 square
 * button, X3). Mirrors chrome/buttons.css .btn states: hover Slate
 * #496367 via --color-action-hover (corrected 2026-07-03, PR #13),
 * active Rich Black, disabled per spec 5.1; busy state (5.5 loading)
 * simply rides the disabled styling when JS disables the button.
 * ------------------------------------------------------------------ */

form.userform nav.Actions {
  margin: 0;
  padding: 0;
  border: 0;
}

form.userform input.action {
  display: inline-block;
  height: 60px;
  padding: 0 1.75rem;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--color-action);
  color: var(--color-action-text);
  font-family: var(--font-family-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-links);
  line-height: var(--lh-links);
  letter-spacing: var(--ls-links);
  text-transform: none;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

form.userform input.action:hover,
form.userform input.action:focus {
  background-color: var(--color-action-hover);
  color: var(--color-white);
}

form.userform input.action:active {
  background-color: var(--color-blue-rich-black);
}

form.userform input.action:disabled {
  opacity: 0.65;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  form.userform input.action {
    transition: none;
  }
}

@media (max-width: 575.98px) {
  form.userform input.action {
    height: 52px;
    padding: 0 1.375rem;
  }
}