/* ============================================================
   ZOHO CONTACT INTEGRATION TEST — test-only styling
   Used by: src/zoho-contact-integration-test.njk only. Not linked
   from any production page. Do not use as a reference for the real
   Contact Us component (css/contact.css) — this file exists purely
   to make the Zoho Long Form embed visually match it for this test.

============================================================ */

/* -------- Hide Zoho's decorative duplicate text --------


/* Presentation-only Zoho text duplicated by the CAGO interface.
  The email now has its own .sr-only label in the markup. */
.zoho-contact #SIGNUP_HEADING,
.zoho-contact #SIGNUP_DESCRIPTION,
.zoho-contact div[name="SIGNUP_FORM_LABEL"],
.zoho-contact #REQUIRED_FIELD_TEXT {
  display: none;
}

/* Remove Zoho's unused space above the email field */
.zoho-contact #SIGNUP_PAGE > div:first-of-type,
.zoho-contact #SIGNUP_PAGE > br {
  display: none;
}

.zoho-contact #signupMainDiv {
  margin: 0;
  padding: 0;
}

/* Integration layout: Zoho has more elements than the original
   CAGO form, so grid areas place them in the required order. */
.zoho-contact .zct-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "email submit"
    "status status"
    "consent consent"
    "error error";
  width: 100%;
  align-items: stretch;
  margin-bottom: var(--space-4);
}

/* .zct-email-cell and .zct-submit-cell are independent grid items,
   placed side by side purely via grid-template-areas above — CSS
   Grid's explicit named-area placement doesn't depend on DOM/source
   order, so the two can sit visually adjacent while living far apart
   in the markup (source order is now email, consent, submit, matching
   reading/tab order). An earlier step wrapped both in a shared
   .zct-input-group flex container (grid-area: inputgroup) to support
   a combined :focus-within ring; that ring has since been fully
   removed in favor of independent :focus-visible rules on each
   control, so the wrapper's only remaining job — keeping the two
   side by side — is now handled directly by these two grid-area
   assignments instead, and the wrapper itself was removed. */
.zoho-contact .zct-email-cell {
  grid-area: email;
  min-width: 0;
}

.zoho-contact .zct-submit-cell {
  grid-area: submit;
}

.zoho-contact #cago-waitlist-status {
  grid-area: status;
}

.zoho-contact #errorMsgDiv {
  display: none;
  grid-area: error;
}

.zoho-contact .zct-consent-cell {
  grid-area: consent;

  /* Same outer spacing as .contact-consent */
  margin: var(--space-3) 0 0;

  /* Same internal layout as .contact-consent__control */
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-3);
  min-height: var(--space-7);
  padding-block: var(--space-2);

  /* Neutralizes Zoho's own inline style="border: 1px solid red;",
     applied to this row on validation failure. !important is
     required only because it's an inline style (highest specificity
     short of !important) — CAGO's own error messaging (#cago-
     waitlist-status) is untouched and still the sole error signal. */
  border: none !important;
}

/* Same checkbox styling as the original Contact form */
.zoho-contact
  .zct-consent-cell
  input[name="PRIVACY_POLICY"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.125rem 0 0;
  border: 1px solid var(--color-cream);
  border-radius: 0;
  background-color: var(--color-cream);
  cursor: pointer;
  position: relative;
}

/* Same consent typography as the original Contact form */
.zoho-contact .zct-consent-cell > label {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-regular);
  line-height: 1.4;
  color: var(--text-color-inverse);
  text-align: left;
}

/* Keep the Privacy Policy the same size as the sentence */
.zoho-contact .zct-consent-cell a {
  display: inline-block;
  margin-top: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-label-tight);
  color: var(--text-color-inverse);
  text-decoration: underline;
}

.zoho-contact
  .zct-consent-cell
  input[name="PRIVACY_POLICY"]:checked {
  background-color: var(--color-red);
  border-color: var(--color-red);
}

.zoho-contact
  .zct-consent-cell
  input[name="PRIVACY_POLICY"]:checked::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 10px;
  border: solid var(--color-cream);
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

.zoho-contact
  .zct-consent-cell
  input[name="PRIVACY_POLICY"]:focus-visible {
  outline: 1px solid var(--color-cream);
  outline-offset: 2px;
}

@media (max-width: 768px) {
  .zoho-contact .zct-consent-cell > label {
    font-size: 13px;
  }
}

/* Zoho generates an empty placeholder inside this wrapper.
   Prevent it from becoming an unnamed grid item. */
.zoho-contact .zct-layout > div:empty {
  display: none;
}

.zoho-contact .zcinputbox {
  height: 100%;
}

.zoho-contact input[name="CONTACT_EMAIL"] {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background: var(--color-red);
  /* !important neutralizes Zoho's own inline border-color/style/
     width, applied to this input during invalid-email validation.
     Background and CAGO's error message/aria-invalid are untouched —
     this only removes the extra Zoho-drawn border box. */
  border: none !important;
  padding: 0.85rem 1rem;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  color: var(--text-color-inverse);
  outline: none;
}

/* Cream keyboard-focus indicator on the input itself, unconditional on
   validity — one consistent rule: cream outline = keyboard focus, red
   styling = validation/error state, and the two are independent and
   may coexist. Previously this was aria-invalid-gated (only shown when
   invalid) because a separate .zct-input-group:focus-within rule
   handled the valid case; that wrapper rule is now removed in favor of
   each control owning its own focus indicator, so this rule has to
   cover both valid and invalid focus on its own.
   Inset box-shadow, not outline: an outline draws OUTSIDE the box,
   which collided with the submit button sitting flush against the
   input's right edge (confirmed via screenshot — the ring's right
   side was clipped/hidden behind the button). box-shadow: inset draws
   inside the box instead, so it can never collide with an adjacent
   element regardless of layout. Computed border-radius on this input
   is 0px (verified), so the inset ring renders as a clean sharp
   rectangle with no corner mismatch at the shared edge with the
   button. outline: none is kept explicit here (not just relying on
   the base rule above) since this selector now controls the ring
   directly. */
.zoho-contact
  input[name="CONTACT_EMAIL"]:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--color-cream);
}

.zoho-contact input[name="CONTACT_EMAIL"]::placeholder {
  color: rgba(246, 238, 233, 0.85);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* iOS Safari auto-zooms on focus when an input's font-size computes
   below 16px — var(--text-body) is 14px (tokens.css), so the mobile
   value here is set directly rather than via a token, to avoid
   touching --text-body's desktop value used elsewhere. Placed after
   the base rule above (not inside the earlier @media block) so it
   wins the cascade at this same specificity. */
@media (max-width: 768px) {
  .zoho-contact input[name="CONTACT_EMAIL"] {
    font-size: 16px;
  }
}

/* Uses the original CAGO button values while keeping Zoho’s
   #zcWebOptin as the real clickable control. */
.zoho-contact .zct-submit-cell {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  background: var(--color-red);
  border-left: 1px solid rgba(246, 238, 233, 0.2);
  transition: opacity 200ms ease;
}

.zoho-contact .zct-submit-cell input#zcWebOptin {
  box-sizing: border-box;
  width: calc(18px + 2rem);
  height: 100%;
  background: var(--color-red);
  border: none;
  padding: 0.85rem 1rem;
  color: transparent;
  font-size: 0;
  cursor: pointer;
}

.zoho-contact .zct-submit-cell:hover {
  opacity: 0.8;
}

/* Own explicit cream focus indicator, replacing reliance on the
   (now-removed) wrapper ring and the button's weak native outline. */
.zoho-contact #zcWebOptin:focus-visible {
  outline: 1px solid var(--color-cream);
  outline-offset: 2px;
}

.zoho-contact .zct-arrow-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 12px;
  transform: translate(-50%, -50%);
  color: var(--text-color-inverse);
  pointer-events: none;
}

/* Applied by the success-message bridge (js/zoho-signup-bridge.js) only
   to the specific live Zc_SignupSuccess box it just read from, only
   after capturing its text — never applied globally to all
   [id="Zc_SignupSuccess"] elements. */
.zoho-contact .cago-success-source-hidden {
  visibility: hidden !important;
}

/* ============================================================
   TEMPORARY — VISUAL EXPERIMENT, ZOHO TEST VERSION ONLY.
   Not a committed decision. Scoped to .zoho-contact-test so the
   original Contact Us (css/contact.css, unmodified) is untouched.

   Problem this addresses (desktop/intermediate widths only, >=1025px):
   .contact-grid uses a single shared row (align-items: end) for
   left/cups/right, and .contact-right is bottom-anchored within it.
   When an error/status message adds height, growth has nowhere to go
   but upward, since the bottom is pinned — confirmed via runtime
   measurement to shift email/submit up by ~52-53px, independent of
   the intentional downward-growth behavior already present at
   <=1024px (where .contact-right owns its own auto-sized grid row).

   Fix tested and verified via a prior runtime experiment: switch
   .contact-right to align-self:start (top-anchored within the shared
   row) instead of inheriting align-items:end, and add a margin-top
   equal to the row's existing content-to-position gap — not an
   error-sized reservation, but the MEASURED distance between the
   row's own top and .contact-right's current resting position. This
   reproduces today's exact no-error visual position while letting
   growth extend downward from a now-fixed top, the same principle
   already used at <=1024px.

   144px measured directly (not guessed) at 1028/1100/1280/1440px
   widths — stable across all four, confirmed before writing this.
   1025px lower bound deliberately sits just above the existing
   max-width:1024px breakpoint in contact.css, so the two ranges
   never overlap and <=1024px is provably unaffected. */
@media (min-width: 1025px) {
  .zoho-contact .contact-right {
    align-self: start;
    margin-top: 144px;
  }
}