/* ---------- Contact page (Plan 009, refined in 009B/009C) ----------
   Loaded only on the Contact Page Template (see inc/enqueue.php). Extends
   the existing token/global/component system — every colour, space,
   radius and font below is a var(--ga-*) already defined in tokens.css;
   no parallel design system, no parallel container token. Only the
   approved palette (Forge Black, Warm Cream, Cream 2, Dark Oak, Arc Gold)
   is used. No fixed viewport widths anywhere below — every measurement is
   a relative unit (rem/em/%/fr) or an existing token.

   Plan 009C: the first 009B composition was rejected on real staging for
   excessive height/gaps, weak left/right balance and a generic
   administrative-form appearance. This pass deliberately continues the
   dark hero surface into this section (rather than the sitewide
   "dark hero / light body" default) so hero → Contact reads as one
   composed conversion experience, with the light Cream 2 form panel
   providing the contrast — and tightens spacing throughout. */

/* ---------- Section + two-column composition ---------- */

.ga-contact-columns {
  /* Overrides global.css's .section padding-block (var(--ga-space-6),
     7rem) — same specificity, later in the cascade (forms.css loads
     after global.css), deliberately more compact for this page. */
  padding-block: var(--ga-space-5);
  background: var(--ga-oak);
  color: var(--ga-surface-dark-text);
}

.ga-contact-columns-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ga-space-4);
}

@media (min-width: 64em) {
  .ga-contact-columns-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--ga-space-4);
    align-items: start;
  }
}

.ga-contact-info .entry-content:empty {
  display: none;
}

/* ---------- Left editorial column, styled for the dark surface ----------
   the_content() is the only source of copy here; these rules only ever
   change colour/scale for whatever the Page already contains — no text
   is added, removed or reordered. */

.ga-contact-info .entry-content {
  color: var(--ga-surface-dark-text);
}

.ga-contact-info .entry-content h1,
.ga-contact-info .entry-content h2,
.ga-contact-info .entry-content h3,
.ga-contact-info .entry-content h4,
.ga-contact-info .entry-content h5,
.ga-contact-info .entry-content h6 {
  color: var(--ga-surface-dark-text);
}

/* Contact still carries the "Technical Register" numbered-heading marker
   from content.css (:is(.page-template-contact, ...) .entry-content
   h2::before), coloured var(--ga-oak) for the sitewide light body — that
   would be invisible on this section's dark background, so it is
   recoloured Arc Gold here specifically. */
.ga-contact-info .entry-content h2::before {
  color: var(--ga-gold);
}

.ga-contact-info .entry-content h2 {
  font-size: var(--ga-text-xl);
}

.ga-contact-info .entry-content p,
.ga-contact-info .entry-content li {
  color: var(--ga-surface-dark-muted);
}

.ga-contact-info .entry-content a {
  color: var(--ga-surface-dark-text);
}

.ga-contact-info .entry-content blockquote,
.ga-contact-info .entry-content figcaption {
  color: var(--ga-surface-dark-muted);
}

/* Defensive: if the Page's own content happens to use either sitewide
   utility class (.lead, .eyebrow — both default to a dark-surface muted
   colour meant for a light background), keep them legible here too,
   without requiring the section itself to carry the .surface-dark
   utility class (it uses its own background/colour above instead, since
   this is not a full "surface" — the form panel beside it stays light). */
.ga-contact-info .lead,
.ga-contact-info .eyebrow {
  color: var(--ga-surface-dark-muted);
}

/* ---------- Form panel ---------- */

.ga-contact-form-panel {
  background: var(--ga-cream-2);
  border: var(--ga-border-width) solid var(--ga-border);
  border-block-start: var(--ga-rule-width) solid var(--ga-gold);
  padding: var(--ga-space-3);
}

@media (min-width: 48em) {
  .ga-contact-form-panel {
    padding: var(--ga-space-4);
  }
}

/* "Project brief" presentation header (Plan 009C) — visible on the
   ordinary/error form states only; the success state
   (.ga-contact-success) is its own self-contained heading/text pair and
   does not repeat this header. */
.ga-contact-form-header {
  margin-block-end: var(--ga-space-3);
}

.ga-contact-form-header h2 {
  margin: 0 0 var(--ga-space-1);
  font-size: var(--ga-text-xl);
}

.ga-contact-form-intro {
  margin: 0;
  color: var(--ga-muted);
  font-size: var(--ga-text-sm);
}

.ga-contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-2);
}

.ga-contact-form-row {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-1);
}

/* Name/Company, Email/Telephone and Service needed/Starting point: side
   by side once there is room, stacked below it — never a fixed pixel
   width, always a fluid grid. Every pair shares this one class; no field
   markup or validation is duplicated to achieve the pairing. */
.ga-contact-form-row-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ga-space-2);
}

@media (min-width: 48em) {
  .ga-contact-form-row-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.ga-contact-form-row label {
  font-family: var(--ga-font-body);
  font-size: var(--ga-text-sm);
  font-weight: 600;
  letter-spacing: var(--ga-tracking-wide);
  color: var(--ga-text);
}

.ga-contact-form-required {
  color: var(--ga-gold);
}

.ga-contact-form-row input[type="text"],
.ga-contact-form-row input[type="email"],
.ga-contact-form-row input[type="tel"],
.ga-contact-form-row select,
.ga-contact-form-row textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.65em var(--ga-space-2);
  font-family: var(--ga-font-body);
  font-size: var(--ga-text-base);
  color: var(--ga-text);
  background: var(--ga-cream);
  border: var(--ga-border-width) solid var(--ga-border);
  border-radius: var(--ga-radius-sm);
  transition: border-color var(--ga-transition-fast);
}

.ga-contact-form-row textarea {
  min-height: 8rem;
  resize: vertical;
}

/* Minimal, self-contained normalisation of the native <select> arrow —
   an inline data-URI chevron, no external asset — so it reads as a
   deliberate control rather than a mismatched browser default. */
.ga-contact-form-row select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-inline-end: calc(var(--ga-space-2) * 2.2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236B675E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ga-space-2) center;
}

.ga-contact-form-row input:focus-visible,
.ga-contact-form-row select:focus-visible,
.ga-contact-form-row textarea:focus-visible {
  border-color: var(--ga-gold);
}

/* "I have files to share" and the privacy acknowledgement: grouped
   together but visually separated from the descriptive fields above by
   a hairline rule, per the approved layout — kept compact. */
.ga-contact-form-secondary {
  display: flex;
  flex-direction: column;
  gap: var(--ga-space-2);
  padding-block-start: var(--ga-space-2);
  border-block-start: var(--ga-border-width) solid var(--ga-border);
}

.ga-contact-form-row-checkbox label {
  display: flex;
  align-items: center;
  gap: var(--ga-space-2);
  min-height: 2.75rem;
  font-size: var(--ga-text-sm);
  font-weight: 400;
  letter-spacing: normal;
}

.ga-contact-form-row-checkbox input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.ga-contact-form-row-checkbox a {
  color: inherit;
  text-decoration-color: var(--ga-gold);
}

.ga-contact-form-help {
  margin: 0.25em 0 0 calc(1.25rem + var(--ga-space-2));
  font-size: var(--ga-text-xs);
  color: var(--ga-muted);
}

/* Honeypot: off-screen, not display:none/visibility:hidden (some bots
   skip those specifically), aria-hidden + tabindex="-1" in the markup so
   assistive tech and keyboard users never encounter it. */
.ga-contact-form-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.ga-contact-form-actions {
  margin-block-start: 0;
}

.ga-contact-form-actions .cta {
  width: 100%;
  justify-content: center;
  min-height: 2.75rem;
}

.ga-contact-form-actions .cta:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ga-contact-form-notice {
  padding: var(--ga-space-2) var(--ga-space-3);
  margin: 0 0 var(--ga-space-3);
  border-radius: var(--ga-radius-sm);
  font-size: var(--ga-text-sm);
  font-weight: 600;
}

.ga-contact-form-notice-success {
  background: rgba(187, 150, 4, 0.1);
  border: var(--ga-border-width) solid var(--ga-gold);
  color: var(--ga-oak);
}

.ga-contact-form-notice-error {
  background: var(--ga-cream);
  border: var(--ga-rule-width) solid var(--ga-oak);
  color: var(--ga-oak);
}

/* ---------- Progressive-enhancement success state (Plan 009B) ---------- */
/* Replaces the <form> element entirely once assets/js/contact-form.js
   confirms a successful submission — never stacked above a still-visible,
   still-fillable form. A brief, subtle fade only; the sitewide
   prefers-reduced-motion rule in global.css already reduces every
   transition/animation duration on this page (including this one) to
   near-zero, so no separate reduced-motion override is needed here. */

.ga-contact-success {
  padding: var(--ga-space-4) 0;
  text-align: center;
  animation: ga-contact-success-fade-in 0.25s ease;
}

.ga-contact-success-heading {
  margin: 0 0 var(--ga-space-2);
}

/* Focus is moved here programmatically on success (see contact-form.js)
   so the state change is announced and visible; :focus (not only
   :focus-visible) guarantees the same gold outline global.css already
   uses sitewide, regardless of how a given browser's :focus-visible
   heuristic treats a script-initiated .focus() call. */
.ga-contact-success-heading:focus {
  outline: 2px solid var(--ga-gold);
  outline-offset: 2px;
}

.ga-contact-success-text {
  margin: 0;
  color: var(--ga-muted);
}

@keyframes ga-contact-success-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}