/* ==========================================================================
   page-contact.css — Contact page only, loaded via is_page('contact') in
   functions.php. Two jobs: (1) lay out the intro + form using existing
   tokens.css primitives (.wrap, .card, section padding), (2) re-skin
   Gravity Forms' Orbital-theme-framework output, which ships with its own
   light-theme assumptions that fight the dark brand palette the same way
   GeneratePress's --base/--contrast system does (see page-specific.css).

   Confirmed failure mode before this file existed: GF's default placeholder
   color is a flat mid-gray (#757575) with no awareness of a dark page
   background (#221410 here) — reads as barely-visible dark-on-dark text.
   Real <label> text is set to --text-strong, which reads fine (15:1) against
   the card's --card background — placeholders and the unstyled grey submit
   button were the failures needing fixing here.
   ========================================================================== */

/* ---- intro ---- */
.contact-hero{padding-bottom:8px;text-align:center}
.contact-hero .wrap{max-width:760px}
.contact-hero h1{font-size:clamp(2rem,4.4vw,2.8rem);font-weight:800;letter-spacing:-.01em;color:var(--text-strong);margin-bottom:16px}
.contact-hero .lead{font-size:1.15rem;color:var(--text)}

/* ---- form card ---- */
.contact-form-sec{padding-top:24px}
.contact-card{max-width:640px;margin:0 auto}

/* Gravity Forms (Orbital theme framework) re-skin, scoped to this page's form only */
.contact-card .gform_wrapper{margin:0}
.contact-card .gform_wrapper form{margin:0}
.contact-card .gfield{margin-bottom:22px}
.contact-card .gfield:last-of-type{margin-bottom:0}
.contact-card .gfield_label{
  display:block;color:var(--text-strong);font-family:var(--head);font-stretch:125%;
  font-weight:600;margin-bottom:8px;
}
/* Selector deliberately has no tag qualifier: GF's "Name" field type is a
   <fieldset>/<legend> group (complex fields need a <legend>, not a <label>,
   per HTML semantics), while every single-input field type (Email, the
   textarea, etc.) uses a plain <label>. A tag-qualified selector like
   "label.gfield_label" silently skips the <legend> case — confirmed 2026-08-31,
   Name's label rendered at GF's own 14px default while Email/Comment sat at
   this rule's 1.1rem, because the selector never matched the <legend> at all.
   !important because GF's Orbital theme-framework CSS sets its own label
   font-size via a selector chain several classes deep that outranks this on
   raw specificity regardless of print order — same fight as gform_button below. */
.contact-card .gform_wrapper .gfield_label{font-size:1.1rem!important}
.contact-card .gfield_required{color:var(--orange-mid);margin-left:3px}

.contact-card .gform_wrapper input[type=text],
.contact-card .gform_wrapper input[type=email],
.contact-card .gform_wrapper input[type=tel],
.contact-card .gform_wrapper textarea{
  width:100%!important;
  background:var(--card)!important;
  color:var(--text-strong)!important;
  border:1px solid var(--line)!important;
  border-radius:8px;
  padding:12px 14px;
  font-family:var(--body);
  font-size:1.1rem;
  transition:border-color .2s, background .2s;
}
.contact-card .gform_wrapper textarea{min-height:150px;resize:vertical}

/* font-size:inherit because GF's Orbital framework sets its own placeholder
   font-size via --gf-ctrl-placeholder-font-size, independent of the input's
   own font-size above — confirmed 2026-08-31, every placeholder sat at GF's
   14px default regardless of the input text rendering at 1.1rem. */
.contact-card .gform_wrapper input::placeholder,
.contact-card .gform_wrapper textarea::placeholder{color:var(--muted)!important;opacity:1;font-size:inherit!important}

.contact-card .gform_wrapper input:focus,
.contact-card .gform_wrapper textarea:focus{
  outline:3px solid var(--orange-mid);outline-offset:2px;
  border-color:var(--orange-mid)!important;background:var(--bg-deep)!important;
}

.contact-card .gform_footer{margin:8px 0 0;padding:0}
/* Sized/colored to match .btn.big — the real primary CTA used in page
   content sitewide ("book a time to talk" on the homepage hero and footer,
   the only .btn usage in any published page). The header nav button
   (.site-head li.btn, .92rem/10px 20px) was checked first and looked
   similar but is a distinct, deliberately-smaller variant scoped to the
   nav bar — wrong reference for a button living in page content. Every
   property here is !important because GF's Orbital theme-framework CSS
   sets essentially the whole box+text appearance (display, font-family,
   font-weight, font-size, padding, border-radius, border, box-shadow — the
   full --gf-local-* chain) on a selector several classes deep that outranks
   this rule on raw specificity regardless of print order; confirmed via
   computed-style diff 2026-08-31 that font-family, font-weight,
   border-radius and box-shadow were all silently losing to GF's defaults
   before this pass. */
.contact-card .gform_button{
  display:inline-block!important;background:var(--orange)!important;color:#fff!important;
  font-family:var(--head)!important;font-stretch:125%;font-weight:700!important;font-size:1.2rem!important;
  padding:16px 34px!important;border-radius:8px!important;border:none!important;box-shadow:none!important;
  cursor:pointer;transition:background .2s, transform .2s;
}
.contact-card .gform_button:hover{background:var(--orange-dark)!important;transform:translateY(-1px)}
.contact-card .gform_button:focus-visible{outline:3px solid var(--orange-mid);outline-offset:2px}

.contact-card .validation_error,
.contact-card .gfield_description.validation_message,
.contact-card .gfield_validation_message{color:var(--orange-mid)!important}

/* GF's default error state is a dark-red label (#790000) on a pale-pink
   tint (rgba(255,223,224,.25)) — tuned for a white page. Composited over
   this page's dark --card background that tint reads as a muted brown, so
   the dark-red label lands at ~1.5:1 contrast: the same dark-on-dark
   failure mode as the placeholder fix above, worse. Drop the tint (the
   orange-mid border below already signals the error) and recolor the label
   to the same orange-mid used for the validation message and top banner. */
.contact-card .gfield_error{background:transparent!important}
.contact-card .gfield_error .gfield_label{color:var(--orange-mid)!important}
.contact-card .gfield_error input,
.contact-card .gfield_error textarea{border-color:var(--orange-mid)!important}

@media(max-width:600px){
  .contact-form-sec{padding-top:8px}
}