/* ===========================================================================
   SUPPORT (/support/) + UPDATE PAYMENT INFORMATION (/update-payment-information/) - 9/18
   ---------------------------------------------------------------------------
   Built by scripts/build-support.py. Support is Get in Touch's layout (loaded
   before this sheet); only the pieces this page adds live here. Tokens only.
   Contrast: white on indigo 8.09 · oat on indigo 7+ · ink on white 13.3.
   =========================================================================== */

/* Get in Touch's two measures (its sheet defines them on .page-contact only). */
.page-support {
  --gt-edge: max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)));
  --gt-step: clamp(40px, 6vw, 88px);
}

.sp-hero__link {
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  overflow-wrap: anywhere;
}

/* INDIGO: the hours line leads, bold; the urgent line's phone number is the door's one link. */
.sp-door-info .gt-door__p { max-width: 32rem; }
.sp-hours { color: var(--white); font-weight: 700; }
.sp-urgent__tel {
  color: var(--white);
  font-weight: 700;
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.sp-urgent__tel:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; border-radius: 2px; }

/* No "Everything else" band follows here (Get in Touch's doors keep a 3x-corner of bottom padding for it to pull up
   over), so the doors close at the ordinary section padding. */
.page-support .sp-door-form .gt-door__inner { padding-bottom: var(--section-pad); }   /* the LAST door only - stacked, the lime door pulls up over the indigo one by its corner, which needs that padding */

/* 🔁 9/21 — NO WHITE CARD, NO GREEN BOX (Brees: "I don’t know if we need a white box here...
   Maybe we remove the green box and just have the form. That way it’s styled like the form on the
   contact page but I don’t think we need to have a box on it.")
   The form now sits straight on sky-soft - the SAME ground the contact form uses on /get-in-touch/
   (Brees, 9/21: "change the oat to light blue"): white pill inputs, nothing framing them.
   ⚠️ SCOPED TO THIS PAGE ON PURPOSE. The lime came from .gt-door--client, which /get-in-touch/ also uses
      for its "Already a client?" door - changing that rule would repaint a door on another page.
   [i] The fill keeps the door’s corner working: it still pulls up over the indigo door above and the
       curve still reveals it. Only the colour changed. */
.page-support .sp-door-form { background-color: var(--sky-soft); }
.sp-door-form .gt-door__inner { align-items: stretch; }
.sp-form {
  width: 100%;
  max-width: 720px;
  background-color: transparent;
  border-radius: 0;
  box-shadow: none;
}
.sp-form__frame { display: block; width: 100%; min-width: 100%; height: 900px; border: 0; }
.sp-form__fallback { margin: 0; padding: var(--s-4) 0; }
.sp-form__fallback a { color: var(--ink); font-weight: 600; }

/* PAYMENT (internal): the plain embed under the legal pages' hero. EmailMeForm does not resize its frame, so it is
   given the form's full height. */
.up-form { padding-block: 0 var(--section-pad); background-color: var(--white); }
.up-form__frame { display: block; width: 100%; max-width: 760px; height: 1060px; border: 0; }
@media (max-width: 699px) { .up-form__frame { height: 1360px; } }
.up-form__fallback { max-width: 760px; margin: var(--s-3) 0 0; color: var(--ink-muted); font-size: var(--fs-small); }
.up-form__fallback a { color: var(--ink); font-weight: 600; }

/* 🔁 9/18 (Brees: "maybe the left indigo side should be thinner so they align (text and form)"). Desktop only:
   the indigo door narrows to 45% ("just a little less narrow" than 40%) so the lime door has room for the form, and the indigo copy drops by the lime
   door's step so the "Office hours" heading starts level with the top of the form card. */
@media (min-width: 900px) {
  .page-support .gt-steps { grid-template-columns: minmax(0, 9fr) minmax(0, 11fr); }
  .page-support .sp-door-info .gt-door__inner { padding-top: calc(var(--section-pad) + 16px + var(--gt-step)); }
  .page-support .sp-door-info .gt-door__p { max-width: 28rem; }
}