/**
 * Coming Soon — styles for the form drop-in ([coming_soon_form]).
 *
 * The tiles are NOT styled here. They live in the Bricks template
 * (bricks-template-exports/authored/template-coming-soon.json) so the client can restyle
 * them in the builder. This file covers only what the plugin renders: the #interest-form
 * wrapper, the click-to-form flash, and the Gravity Forms theme alignment.
 *
 * The Gravity Forms rules follow the site's contact form (form 7 in #global-form-modal,
 * styled by css/shadowbox.scss under .standalone-form-container): 14px/500 upper-case labels,
 * underline-only inputs, 20px square checkboxes, small grey helper text, an orange upper-case
 * submit. Three type roles only — label 14/500, text 14/400, small 13/400 — so the form reads
 * like the rest of the site's forms rather than like a default Gravity Forms install.
 * Scoped to .thrive-cs-form; nothing here leaks.
 */

.thrive-cs-form {
  --cs-green:  var(--thrive-green, #173F35);
  --cs-orange: var(--thrive-orange, #FF6A39);
  --cs-body:   var(--sans-serif, 'Inter', system-ui, -apple-system, sans-serif);

  --cs-ink:    var(--cs-green);   /* labels, values, choices */
  --cs-muted:  #5F6B68;           /* sub-labels, descriptions */
  --cs-rule:   #B9B5A6;           /* the input underline */
  --cs-error:  #C02B0A;

  --cs-label:  14px;
  --cs-text:   14px;
  --cs-small:  13px;

  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  border-radius: 5px;
  font-family: var(--cs-body);
  font-size: var(--cs-text);
  color: var(--cs-ink);

  /* Where a tile click lands. The sticky header (and the hashbar when one is up) would
     otherwise cover the top of the form. */
  scroll-margin-top: calc(var(--hashbar-announcement-h, 0px) + 120px);
}

/* A tile with "Hide this tile" on. The template's own rule targets `--hidden-1`, which is what
   the ACF UI stores; a value written by the REST/MCP path arrives as a boolean and Bricks prints
   it as `True`. Both mean hidden. */
.thrive-cs-tile--hidden-1,
.thrive-cs-tile--hidden-True,
.thrive-cs-tile--hidden-true { display: none !important; }

/* The tile button. Bricks' "primary" theme style draws a 1px orange border, which on a solid
   green fill reads as a stray outline; the fill defines the shape. 44px is the tap-target floor
   the accessibility audit holds the site to. */
.thrive-cs-cta.bricks-button {
  border-color: transparent !important;
  min-height: 44px;
}

.thrive-cs-form:focus { outline: none; }
.thrive-cs-form:focus-visible { outline: 3px solid var(--cs-orange); outline-offset: 6px; }

/* Brief highlight after a tile click, so people see where they landed. */
.thrive-cs-form.is-flash { animation: thriveCsFlash 1.6s ease-out 1; }
@keyframes thriveCsFlash {
  from { box-shadow: 0 0 0 0 rgba(255, 106, 57, .55); }
  to   { box-shadow: 0 0 0 18px rgba(255, 106, 57, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .thrive-cs-form.is-flash { animation: none; }
}

/* Editor-only notice when no form resolved (visitors get nothing). */
.thrive-cs-form--missing {
  padding: 18px 20px;
  border: 1px dashed var(--cs-rule);
  background: #F1F1EC;
  color: var(--cs-green);
  font-size: 14px;
  line-height: 1.5;
}
.thrive-cs-form--missing code { font-size: 13px; }

/* ---------- Gravity Forms theme alignment (matches the site's contact form) ---------- */

/* Orbital's accent is GF blue (#204ce5) — it paints the Select All button, the check marks and
   focus rings. Re-point the theme's own variables at brand green so every control follows.
   Gravity Forms prints each form's palette in an inline style block keyed on the wrapper's ID
   (#gform_wrapper_10[data-form-index="0"].gform-theme), which outranks any class selector, so
   the variables are declared !important; that is the only way a stylesheet wins here. The check
   mark itself reads --gf-color-in-ctrl-primary, not --gf-color-primary. */
.thrive-cs-form .gform-theme--orbital,
.thrive-cs-form .gform_wrapper {
  --gf-color-primary: #173F35 !important;
  --gf-color-primary-rgb: 23, 63, 53 !important;
  --gf-color-primary-contrast: #FCFBF5 !important;
  --gf-color-primary-contrast-rgb: 252, 251, 245 !important;
  --gf-color-primary-darker: #0E2A23 !important;
  --gf-color-primary-lighter: #83B585 !important;
  --gf-color-in-ctrl-primary: #173F35 !important;
  --gf-color-in-ctrl-primary-rgb: 23, 63, 53 !important;
  --gf-color-in-ctrl-primary-contrast: #FCFBF5 !important;
  --gf-color-in-ctrl-primary-contrast-rgb: 252, 251, 245 !important;
  --gf-color-in-ctrl-primary-darker: #0E2A23 !important;
  --gf-color-in-ctrl-primary-lighter: #83B585 !important;
  --gf-ctrl-choice-check-color: #173F35 !important;
  --gf-ctrl-border-radius: 0 !important;
  --gf-ctrl-btn-border-radius: 4px !important;
  --gf-font-size-primary: var(--cs-text) !important;
  --gf-font-size-secondary: var(--cs-small) !important;
}

.thrive-cs-form .gform_required_legend { display: none; }

/* Field rhythm: the contact form's 20px row gap. */
.thrive-cs-form .gform_fields { row-gap: 20px !important; }
.thrive-cs-form .gfield_checkbox { margin-block: 8px 0 !important; }

/* ----- Labels: 14/500 upper-case, the site's form label voice ----- */
.thrive-cs-form .gfield_label,
.thrive-cs-form .gform-field-label:not(.gform-field-label--type-sub):not(.gform-field-label--type-inline) {
  font-family: var(--cs-body) !important;
  font-size: var(--cs-label) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  color: var(--cs-ink) !important;
  margin-bottom: 4px !important;
}

/* Sub-labels (First / Last under Name) and helper text: small, quiet. */
.thrive-cs-form .gform-field-label--type-sub,
.thrive-cs-form .gfield_description {
  font-family: var(--cs-body) !important;
  font-size: var(--cs-small) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cs-muted) !important;
  opacity: 1 !important;
}
.thrive-cs-form .gform-field-label--type-sub { padding-top: 4px !important; }
.thrive-cs-form .gfield_description { padding-top: 6px !important; }

/* Required marker: plain red, no pill. With the form set to "asterisk" this is a `*`; with
   "text" it reads "(Required)" at small-text size — both sit on the same baseline as the label. */
.thrive-cs-form .gfield_required,
.thrive-cs-form .gfield_required .gfield_required_text,
.thrive-cs-form .gfield_required .gfield_required_asterisk,
.thrive-cs-form .gfield_required_custom {
  position: static !important;
  top: auto !important;
  display: inline !important;
  padding: 0 !important;
  margin-left: 2px !important;
  background: none !important;
  border-radius: 0 !important;
  font-family: var(--cs-body) !important;
  font-size: inherit !important;
  font-weight: 500 !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  line-height: inherit !important;
  color: var(--cs-error) !important;
}
.thrive-cs-form .gfield_required .gfield_required_text { font-size: 11px !important; }

/* ----- Inputs and the select: underline only, 38px tall, 14/400 ----- */
.thrive-cs-form .gform-theme--framework input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.thrive-cs-form .gform-theme--framework select,
.thrive-cs-form .gform-theme--framework textarea {
  font-family: var(--cs-body) !important;
  font-size: var(--cs-text) !important;
  font-weight: 400 !important;
  color: var(--cs-ink) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cs-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 38px !important;
  transition: border-color .18s ease;
}
.thrive-cs-form .gform-theme--framework input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.thrive-cs-form .gform-theme--framework select {
  height: 38px !important;
  line-height: 38px !important;
}
.thrive-cs-form .gform-theme--framework select { padding-right: 28px !important; } /* keeps room for the chevron */
.thrive-cs-form .gform-theme--framework textarea { padding: 10px 0 !important; line-height: 1.5 !important; }
.thrive-cs-form .gform-theme--framework input::placeholder,
.thrive-cs-form .gform-theme--framework textarea::placeholder { color: var(--cs-muted); opacity: 1; }

.thrive-cs-form .gform-theme--framework input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus,
.thrive-cs-form .gform-theme--framework select:focus,
.thrive-cs-form .gform-theme--framework textarea:focus {
  border-bottom-color: var(--cs-orange) !important;
  box-shadow: none !important;
  outline: none !important;
}
.thrive-cs-form .gform-theme--framework input:focus-visible,
.thrive-cs-form .gform-theme--framework select:focus-visible,
.thrive-cs-form .gform-theme--framework textarea:focus-visible {
  outline: 2px solid var(--cs-orange) !important;
  outline-offset: 2px !important;
}

/* iOS zooms into any field under 16px on focus; the site's forms accept that, but on the
   phone width the fields are the whole screen, so hold them at 16px there. */
@media (max-width: 767px) {
  .thrive-cs-form .gform-theme--framework input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
  .thrive-cs-form .gform-theme--framework select,
  .thrive-cs-form .gform-theme--framework textarea { font-size: 16px !important; }
}

/* ----- Checkboxes: 20px square, 2px radius, green check -----
   The theme's global `#brx-content .gform-theme--framework input` rule gives every input
   8px 14px of padding; on a 20px border-box that forces the box to 30px wide, so the padding
   has to be zeroed here explicitly. */
.thrive-cs-form .gform-theme--framework input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  flex: 0 0 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--cs-ink) !important;
  border-radius: 2px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}
.thrive-cs-form .gform-theme--framework input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--cs-orange) !important;
  outline-offset: 2px !important;
}
.thrive-cs-form .gchoice { align-items: flex-start; }
.thrive-cs-form .gchoice label,
.thrive-cs-form .gform-field-label--type-inline,
.thrive-cs-form .gfield_consent_label {
  font-family: var(--cs-body) !important;
  font-size: var(--cs-text) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--cs-ink) !important;
  padding-top: 1px !important;
}

/* "Select All" on the communities checkbox: a small ghost button in the label voice. */
.thrive-cs-form .gfield_choice_all_toggle,
.thrive-cs-form .gform-theme-button--secondary {
  background: transparent !important;
  color: var(--cs-ink) !important;
  border: 1px solid var(--cs-ink) !important;
  border-radius: 2px !important;
  padding: 6px 12px !important;
  min-height: 0 !important;
  margin-top: 4px !important;
  font-family: var(--cs-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
  line-height: 1.2 !important;
  box-shadow: none !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.thrive-cs-form .gfield_choice_all_toggle:hover,
.thrive-cs-form .gfield_choice_all_toggle:focus-visible {
  background: var(--cs-ink) !important;
  color: #FCFBF5 !important;
}

/* ----- Messages ----- */
.thrive-cs-form .gform-theme--framework .gform_validation_errors {
  background-color: var(--cs-error);
  border: 0;
  font-family: var(--cs-body);
  font-size: var(--cs-text);
  font-weight: 500;
  line-height: 1.3;
}
.thrive-cs-form .gform-theme--framework .gform_validation_errors h2,
.thrive-cs-form .gform-theme--framework .gform_validation_errors a { color: #fff !important; font-size: var(--cs-text) !important; }
.thrive-cs-form .gform-theme--framework .gform_validation_errors .gform-icon--circle-error {
  color: #fff !important;
  border-color: #fff !important;
}
.thrive-cs-form .gform-theme--framework .validation_message,
.thrive-cs-form .gform-theme--framework .gfield_validation_message {
  font-family: var(--cs-body) !important;
  font-size: var(--cs-small) !important;
  font-weight: 400 !important;
  color: var(--cs-error) !important;
  background: none !important;
  border: 0 !important;
  padding: 4px 0 0 !important;
}

.thrive-cs-form .gform_confirmation_message {
  padding-top: 20px;
  font-family: var(--cs-body);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--cs-ink);
  text-align: center;
}
.thrive-cs-form .gform_confirmation_message a { text-decoration: underline; }

/* ----- Submit: the site's orange upper-case form button ----- */
.thrive-cs-form .gform-theme--framework input[type="submit"].gform_button,
.thrive-cs-form .gform_button {
  background-color: var(--cs-orange) !important;
  border: 0 !important;
  color: #fff !important;
  border-radius: 4px !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  font-family: var(--cs-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
  cursor: pointer;
  transition: background-color .18s ease;
}
.thrive-cs-form .gform-theme--framework input[type="submit"].gform_button:hover,
.thrive-cs-form .gform-theme--framework input[type="submit"].gform_button:focus-visible,
.thrive-cs-form .gform_button:hover,
.thrive-cs-form .gform_button:focus-visible {
  background-color: var(--cs-green) !important;
  color: #FCFBF5 !important;
}
.thrive-cs-form .gform_button:focus-visible {
  outline: 2px solid var(--cs-orange) !important;
  outline-offset: 2px !important;
}