/* =====================================================================
   SHIM-ME Hub — Contact Form shortcode CSS
   Scoped to #shim-contact-form (the WPBakery row's el_id).
   The developer sets the row to "Stretch row and content" + dark bg;
   this file owns the inner band: optional grid/glow ornament, constrained
   inner container, head (eyebrow + heading + lead), the form panel, the
   skinned Gravity Form, and the contact-details rail.

   Cascade armor: Total injects inline <style> AFTER the plugin stylesheet,
   and Gravity's theme.min.css (.gform_wrapper.gravity-theme …, specificity
   0,3,0) overrides field styling. Both are beaten by leading rules with the
   row id (and chaining .gform_wrapper.gravity-theme for GF) plus !important.
   Tokens only — no hex literals. GF styling stays inside .shim-gf so other
   site forms are untouched.
   ===================================================================== */

#shim-contact-form {
  /* Module-scoped tokens — the global token file has no success/on-red
     colors, so we declare them here in the --shim-* namespace rather than
     hard-coding literals in rules. */
  --shim-success:      #22c55e;
  --shim-success-glow: rgba(34, 197, 94, 0.55);
  --shim-on-red:       #fff;
  /* Soft red for large fill gradients (aside) — matches the contact
     template's rgba(227,29,30,0.15); keeps "all color via tokens" intact. */
  --shim-red-glow-soft: rgba(227, 29, 30, 0.15);

  position: relative;
  padding: 110px 0;
  overflow: hidden;
  color: var(--shim-text);
}
/* No grid and no section-level glow on the form (matches the template) —
   the only red here is the rail gradient inside the panel. */

/* constrained inner container — same pattern as .shim-hero__inner */
#shim-contact-form .shim-contact-form__inner {
  position: relative;
  z-index: 1;
  max-width: var(--shim-container);
  margin: 0 auto;
  padding: 0 var(--shim-gutter);
}

/* ===== HEAD ===== */
/* max-width in px (not ch) so the display heading stays on one line —
   60ch ≈ 534px was too narrow and forced "Tell us about the job." to wrap. */
#shim-contact-form .shim-contact-form__head { margin-bottom: 48px; max-width: 760px; }
body #shim-contact-form .shim-contact-form__heading {
  font-family: var(--shim-display) !important;
  font-weight: 800 !important;
  font-size: clamp(40px, 5.2vw, 76px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.01em !important;
  text-transform: uppercase !important;
  color: var(--shim-text) !important;
  margin: 14px 0 22px;
}
body #shim-contact-form .shim-contact-form__lead {
  font-size: 18px !important;
  line-height: 1.6 !important;
  color: var(--shim-text-dim) !important;
  margin: 0;
}

/* =====================================================
   PANEL — one bordered box, 2-col grid (1.55fr / 1fr)
   ===================================================== */
#shim-contact-form .shim-contact__panel {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  border: 1px solid var(--shim-line);
  background: var(--shim-bg-2);
  border-radius: 3px;
  overflow: hidden;
}

/* split=right → reverse columns (details first, form second) */
#shim-contact-form [data-split="right"] .shim-contact__panel,
#shim-contact-form.shim-scope[data-split="right"] .shim-contact__panel {
  grid-template-columns: 1fr 1.55fr;
}
#shim-contact-form [data-split="right"] .shim-contact__form-col { order: 2; }
#shim-contact-form [data-split="right"] .shim-contact__aside    { order: 1; border-left: 0; border-right: 1px solid var(--shim-line); }

/* split=stacked → single column */
#shim-contact-form [data-split="stacked"] .shim-contact__panel {
  grid-template-columns: 1fr;
}
#shim-contact-form [data-split="stacked"] .shim-contact__aside {
  border-left: 0;
  border-top: 1px solid var(--shim-line);
}

/* ---- Form column ---- */
#shim-contact-form .shim-contact__form-col {
  padding: 44px;
  min-width: 0;
}

#shim-contact-form .shim-contact__step {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  font-family: var(--shim-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--shim-text-dim);
}
#shim-contact-form .shim-contact__step > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--shim-red);
  border-radius: 2px;
  color: var(--shim-red);
  font-size: 12px;
}

#shim-contact-form .shim-contact__footnote {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--shim-text-mute);
}

/* =====================================================
   DETAILS RAIL
   ===================================================== */
/* Large top-right red ellipse fills the whole rail (matches the contact
   template's .spec__aside background — far wider than a small blurred blob). */
#shim-contact-form .shim-contact__aside {
  padding: 44px;
  border-left: 1px solid var(--shim-line);
  background:
    radial-gradient(ellipse at top right, var(--shim-red-glow-soft), transparent 60%),
    var(--shim-bg-3);
  display: flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}
#shim-contact-form [data-glow="off"] .shim-contact__aside {
  background: var(--shim-bg-3);
}
#shim-contact-form .shim-contact__aside > * {
  position: relative;
  z-index: 1;
}
body #shim-contact-form .shim-contact__aside-heading {
  font-family: var(--shim-display) !important;
  font-weight: 800 !important;
  font-size: 26px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.01em !important;
  color: var(--shim-text) !important;
  margin: 0 0 10px;
}
body #shim-contact-form .shim-contact__aside-intro {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--shim-text-dim) !important;
  margin: 0 0 28px;
}

#shim-contact-form .shim-contact__detail {
  padding: 18px 0;
  border-top: 1px solid var(--shim-line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#shim-contact-form .shim-contact__detail:first-of-type { border-top: 0; padding-top: 0; }

body #shim-contact-form .shim-contact__detail-label {
  font-family: var(--shim-mono) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--shim-text-mute) !important;
}
body #shim-contact-form .shim-contact__detail-value {
  font-family: var(--shim-display) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  letter-spacing: -0.01em !important;
  color: var(--shim-text) !important;
  text-decoration: none;
  transition: color .15s ease;
}
body #shim-contact-form a.shim-contact__detail-value:hover { color: var(--shim-red) !important; }
body #shim-contact-form .shim-contact__detail-note {
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--shim-text-dim) !important;
}

/* ---- SLA status line — pinned to the bottom, pulsing green dot ---- */
#shim-contact-form .shim-contact__sla {
  margin-top: auto;
  padding-top: 28px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--shim-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--shim-text-dim);
}
#shim-contact-form .shim-contact__sla-dot {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--shim-success);
  box-shadow: 0 0 0 0 var(--shim-success-glow);
  animation: shim-contact-pulse 2s ease-out infinite;
}
@keyframes shim-contact-pulse {
  0%   { box-shadow: 0 0 0 0 var(--shim-success-glow); }
  70%  { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  #shim-contact-form .shim-contact__sla-dot { animation: none; }
}

/* =====================================================
   GRAVITY FORMS SKIN — scoped to #shim-contact-form .shim-gf ONLY.
   Rules lead with the row id (and chain .gform_wrapper.gravity-theme where
   GF's theme.min.css would otherwise win) + !important. Never reaches a
   .gform_wrapper outside this module.
   ===================================================== */
#shim-contact-form .shim-gf .gform_wrapper { margin: 0; }
#shim-contact-form .shim-gf form { margin: 0; }

/* Kill GF's own heading/legend — our step chip labels the form */
#shim-contact-form .shim-gf .gform_heading { display: none; }
#shim-contact-form .shim-gf .gform_required_legend { display: none; }

/* Field grid — GF 2.5+ ships a 12-col grid */
#shim-contact-form .shim-gf .gform_fields {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#shim-contact-form .shim-gf .gfield { grid-column: 1 / -1; margin: 0; }
#shim-contact-form .shim-gf .gfield--width-half    { grid-column: span 6; }
#shim-contact-form .shim-gf .gfield--width-third   { grid-column: span 4; }
#shim-contact-form .shim-gf .gfield--width-quarter { grid-column: span 3; }

/* Labels — beat gravity-theme's 16px/700/inline-block */
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme .gfield_label,
#shim-contact-form .shim-gf .gfield_label {
  display: block !important;
  font-family: var(--shim-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--shim-text-dim) !important;
  margin: 0 0 10px !important;
}
#shim-contact-form .shim-gf .gfield_required { color: var(--shim-red) !important; border: 0; }
#shim-contact-form .shim-gf .gfield_required .gfield_required_text { display: none; }

/* Inputs / textarea / select — beat gravity-theme's padding:8px */
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme input[type="text"],
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme input[type="email"],
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme input[type="tel"],
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme input[type="url"],
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme input[type="number"],
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme textarea,
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme select {
  width: 100% !important;
  background: var(--shim-bg) !important;
  border: 1px solid var(--shim-line-2) !important;
  border-radius: 2px !important;
  padding: 13px 14px !important;
  font-family: var(--shim-body) !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  color: var(--shim-text) !important;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme textarea {
  min-height: 130px !important;
  resize: vertical;
  line-height: 1.55 !important;
}
#shim-contact-form .shim-gf input::placeholder,
#shim-contact-form .shim-gf textarea::placeholder { color: var(--shim-text-mute) !important; }
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme input:focus,
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme textarea:focus,
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme select:focus {
  border-color: var(--shim-red) !important;
  box-shadow: 0 0 0 3px var(--shim-red-glow) !important;
}

/* select chevron */
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--shim-text-dim) 50%),
    linear-gradient(135deg, var(--shim-text-dim) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% - 2px), calc(100% - 16px) calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 44px !important;
  cursor: pointer;
}
#shim-contact-form .shim-gf select option { background: var(--shim-bg-2); color: var(--shim-text); }

/* Sublabels / descriptions */
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme .gfield_description,
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme .ginput_complex label {
  font-family: var(--shim-mono) !important;
  font-size: 11px !important;
  color: var(--shim-text-mute) !important;
  letter-spacing: 0.04em !important;
  margin: 8px 0 0 !important;
  padding: 0;
}

/* File upload — style the field AND ::file-selector-button explicitly;
   browser defaults never inherit the skin. Covers both the native input
   and GF's drag-drop drop area. */
#shim-contact-form .shim-gf .ginput_container_fileupload { width: 100%; }
#shim-contact-form .shim-gf input[type="file"] {
  width: 100% !important;
  background: var(--shim-bg) !important;
  border: 1px dashed var(--shim-line-2) !important;
  border-radius: 2px !important;
  padding: 12px 14px !important;
  font-family: var(--shim-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  color: var(--shim-text-dim) !important;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
#shim-contact-form .shim-gf input[type="file"]:hover { border-color: var(--shim-red) !important; color: var(--shim-text) !important; }
#shim-contact-form .shim-gf input[type="file"]::file-selector-button {
  margin-right: 14px;
  background: transparent;
  color: var(--shim-text);
  border: 1px solid var(--shim-line-2);
  border-radius: 2px;
  padding: 8px 14px;
  font-family: var(--shim-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
#shim-contact-form .shim-gf input[type="file"]::file-selector-button:hover {
  border-color: var(--shim-red);
  color: var(--shim-red);
}
/* GF 2.5+ drag-drop drop area + its select-files button */
#shim-contact-form .shim-gf .gform_drop_area {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  background: transparent;
  border: 1px dashed var(--shim-line-2);
  border-radius: 2px;
  font-family: var(--shim-mono); font-size: 12px;
  color: var(--shim-text-dim); letter-spacing: 0.04em;
  transition: border-color .15s, color .15s;
}
#shim-contact-form .shim-gf .gform_drop_area:hover { border-color: var(--shim-red); color: var(--shim-text); }
#shim-contact-form .shim-gf .gform_button_select_files {
  background: transparent; color: var(--shim-text);
  border: 1px solid var(--shim-line-2); border-radius: 2px;
  padding: 8px 14px; font-family: var(--shim-mono); font-size: 11px;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer;
  transition: border-color .15s, color .15s;
}
#shim-contact-form .shim-gf .gform_button_select_files:hover { border-color: var(--shim-red); color: var(--shim-red); }

/* Checkboxes / radios */
#shim-contact-form .shim-gf .gfield_checkbox li,
#shim-contact-form .shim-gf .gfield_radio li { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
#shim-contact-form .shim-gf .gfield_checkbox input,
#shim-contact-form .shim-gf .gfield_radio input { width: 18px; height: 18px; accent-color: var(--shim-red); }
#shim-contact-form .shim-gf .gfield_checkbox label,
#shim-contact-form .shim-gf .gfield_radio label {
  font-family: var(--shim-body) !important;
  font-size: 14px !important;
  color: var(--shim-text-dim) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin: 0 !important;
}

/* Validation */
#shim-contact-form .shim-gf .gfield_error .gfield_label { color: var(--shim-red) !important; }
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme .gfield_error input,
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme .gfield_error textarea,
#shim-contact-form .shim-gf .gform_wrapper.gravity-theme .gfield_error select { border-color: var(--shim-red) !important; }
#shim-contact-form .shim-gf .validation_message,
#shim-contact-form .shim-gf .gform_validation_errors {
  font-size: 13px !important;
  color: var(--shim-red) !important;
  margin-top: 6px;
}
#shim-contact-form .shim-gf .gform_validation_errors {
  background: var(--shim-surface);
  border: 1px solid var(--shim-red);
  border-radius: 2px;
  padding: 12px 14px;
  margin-bottom: 18px;
}

/* Submit button — the shim red button language */
#shim-contact-form .shim-gf .gform_footer {
  margin: 32px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--shim-line);
}
#shim-contact-form .shim-gf .gform_footer input[type="submit"],
#shim-contact-form .shim-gf .gform_footer button,
#shim-contact-form .shim-gf .gform_footer .gform_button,
#shim-contact-form .shim-gf .gform_page_footer input[type="submit"] {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  background: var(--shim-red) !important;
  color: var(--shim-on-red) !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
  padding: 16px 30px !important;
  font-family: var(--shim-body) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
#shim-contact-form .shim-gf .gform_footer input[type="submit"]:hover,
#shim-contact-form .shim-gf .gform_footer button:hover,
#shim-contact-form .shim-gf .gform_footer .gform_button:hover {
  background: var(--shim-red-deep) !important;
  transform: translateY(-1px);
}

/* AJAX spinner + confirmation */
#shim-contact-form .shim-gf .gform_ajax_spinner { margin-left: 12px; }
#shim-contact-form .shim-gf .gform_confirmation_message {
  font-family: var(--shim-display) !important;
  font-weight: 700 !important;
  font-size: 22px !important;
  text-transform: uppercase !important;
  color: var(--shim-text) !important;
  padding: 24px 0;
}

/* =====================================================
   ADMIN-ONLY NOTICE (missing / invalid form)
   ===================================================== */
#shim-contact-form .shim-contact__notice,
.shim-contact__notice {
  padding: 22px 0;
}
body .shim-contact__notice p {
  font-family: var(--shim-mono) !important;
  font-size: 13px !important;
  color: var(--shim-text-dim) !important;
  border: 1px dashed var(--shim-red);
  border-radius: 2px;
  padding: 14px 16px;
  margin: 0;
}
body .shim-contact__notice strong { color: var(--shim-red) !important; }

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width: 1024px) {
  #shim-contact-form { padding: 80px 0; }
  #shim-contact-form .shim-contact__panel,
  #shim-contact-form [data-split="right"] .shim-contact__panel {
    grid-template-columns: 1fr;
  }
  #shim-contact-form .shim-contact__aside,
  #shim-contact-form [data-split="right"] .shim-contact__aside {
    border-left: 0;
    border-right: 0;
    border-top: 1px solid var(--shim-line);
    order: 2;
  }
  #shim-contact-form [data-split="right"] .shim-contact__form-col { order: 1; }
}
@media (max-width: 600px) {
  #shim-contact-form .shim-contact-form__inner {
    padding-left: 22px;
    padding-right: 22px;
  }
  #shim-contact-form .shim-contact__form-col,
  #shim-contact-form .shim-contact__aside { padding: 30px 24px; }
  #shim-contact-form .shim-gf .gfield--width-half,
  #shim-contact-form .shim-gf .gfield--width-third,
  #shim-contact-form .shim-gf .gfield--width-quarter { grid-column: 1 / -1; }
}