/* ==========================================================================
   ANewLog — Contact page body (Phase D3)
   Ported from REFERENCE/APPROVED-PROTOTYPE/contact.html's inline <style>
   block plus the shared .field/input/textarea/select rules in
   css/style.css (lines 436-451 there) -- those were never ported to
   global.css in Phase B/C since no multi-field form existed yet. Enqueued
   only on the Contact page (functions.php: is_page('contact') gate).
   Depends on design-tokens.css/global.css/chrome.css already being enqueued
   (.page-hero, .eyebrow, .lede, .hairline, .section--dark, .mono-label,
   .btn are already ported there from Phase B/C).
   ========================================================================== */

/* ------------------------------- Layout ------------------------------------ */
.section--no-top{ padding-top: 0; }
/* Matches the prototype's inline style="max-width:14ch" on the H1 -- moved
   to CSS since a hand-written inline style not declared as a block
   attribute trips Gutenberg's block-validation diff (confirmed live). */
#contact-heading{ max-width: 14ch; }

.contact-grid{ display: grid; gap: var(--sp-6); align-items: start; }
@media (min-width: 900px){ .contact-grid{ grid-template-columns: 1.2fr 0.8fr; gap: var(--sp-7); } }

.uppercase-label{ text-transform: uppercase; letter-spacing: 0.1em; }

/* --------------------------- Contact-side dark panel ------------------------ */
/* .contact-side supplies box shape only; the charcoal background, white text,
   and dark-hairline/mono-label color treatment all come from also carrying
   .section--dark (global.css) -- the same descendant rules About/Security's
   own dark sections already rely on, reused here rather than redefined. */
.contact-side{
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.contact-side .hairline{ margin-block: var(--sp-4); }
/* Astra's own `.ast-single-post .entry-content a` rule (specificity 0,2,1)
   force-underlines links inside block content and outranks a plain
   `.contact-email` class (0,1,0) -- confirmed live. `.contact-side
   a.contact-email` ties Astra's specificity (0,2,1) and wins on load order
   (this stylesheet loads after Astra's), the same resolution approach
   already used sitewide for other Astra-vs-block-content collisions. */
.contact-side a.contact-email{
  display: block;
  margin-top: var(--sp-2);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--anl-white);
  text-decoration: none;
  word-break: break-word;
}
.contact-side a.contact-email:hover{ color: var(--anl-light-blue); }
.contact-side-note{ color: #C3CBCF; font-size: 0.9375rem; }

/* --------------------------- Contact form (Spectra) -------------------------- */
/* Spectra's uagb/forms block generates its own markup/classes at save time
   (static-save, no PHP render function) -- these target that generated
   output directly, scoped under .contact-form (this block's own Additional
   CSS Class) so nothing here can leak onto Home's unrelated Early Access
   form. Reproduces the approved prototype's .field/input/textarea/select
   treatment (border color, focus state, radius) against Spectra's actual
   DOM shape instead of the prototype's own hand-authored .field markup,
   the same porting approach already used for chrome.css's block-authored
   buttons and home.css's .email-capture field. */
.contact-form .uagb-forms-field-set{ margin-bottom: var(--sp-3); }
.contact-form .uagb-forms-input-label{
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-strong);
  margin-bottom: 0.5rem;
}
.contact-form .uagb-forms-input{
  width: 100%;
  border: 1.5px solid var(--anl-input-inactive);
  background: var(--anl-white);
  border-radius: var(--radius-sm);
  padding: 0.85em 1em;
  color: var(--ink-strong);
  font: inherit;
  transition: border-color var(--dur-fast) var(--ease-out);
}
/* Spectra generates its own per-block CSS file (uag-css-{id}.css) with a
   `.uagb-block-{id} .uagb-forms-main-form .uagb-forms-input` base-state rule
   of equal specificity (0,3,0) to this :focus rule -- confirmed live that
   without !important, that base rule's border-color wins the tie by load
   order even while focused, leaving no visible focus indicator at all
   (WCAG 2.4.7). Same !important-for-third-party-collision pattern already
   used in home.css's .email-capture button. */
.contact-form .uagb-forms-input:focus{
  border-color: var(--anl-blue) !important;
  outline: none;
}
.contact-form textarea.uagb-forms-input{ resize: vertical; min-height: 140px; }

/* Submit button: guarantee the exact brand blue/charcoal pairing (WCAG AA,
   same note as chrome.css's .btn-primary) rather than relying on Astra's
   own compat styling of .wp-block-button__link, which only coincidentally
   approximates it. */
.contact-form .uagb-forms-main-submit-button.wp-block-button__link{
  background: var(--anl-cta);
  color: var(--anl-charcoal);
}
.contact-form .uagb-forms-main-submit-button.wp-block-button__link:hover{
  background: #22B3F3;
}

/* Success/failure message text -- Spectra suffixes these classes with the
   block's own random id, so a stable-prefix attribute selector is used
   instead of a fixed class name. */
.contact-form [class*="uagb-forms-success-message-"] span{
  color: var(--anl-blue);
  font-weight: 600;
}
.contact-form [class*="uagb-forms-failed-message-"] span{
  color: var(--anl-red);
  font-weight: 600;
}