/**
 * accredify-contact.css
 *
 * Palette approximated from the Accredify.me "Modules" page:
 *   - Dark navy hero:      #0e1b2c
 *   - Blue banner/accent:  #1c4d78 -> #235f92 (gradient)
 *   - Bright action blue:  #1e78d1 (Continue-style buttons)
 *   - Card surface:        #ffffff
 *   - Body text on dark:   #eef3f8
 *   - Body text on light:  #33414f
 *
 * Fonts follow the existing Accredify learner-facing convention:
 * DM Serif Display for headings, Lato for body copy. Both are already
 * loaded site-wide via Google Fonts elsewhere in xtrax; this file does
 * not re-import them, only references the family names.
 */

/* ── Hero strip ─────────────────────────────────────────────────────────── */

.accredify-contact-hero {
  /*background: linear-gradient(135deg, #0e1b2c 0%, #16283f 55%, #1c4d78 100%); */
  background: linear-gradient(to right, #5192e1a6 0%, #23ced5 51%, #5192e1 100%) !important;
  padding: 64px 32px 56px;
  text-align: center;
}

.accredify-contact-hero__content {
  max-width: 720px;
  margin: 0 auto;
}

.accredify-contact-hero__eyebrow {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 2.25rem;
  line-height: 1.2;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}

.accredify-contact-hero__tagline {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 1.05rem;
  color: #b9cbe0;
  margin: 0;
}

/* ── Page content wrapper ──────────────────────────────────────────────── */

.accredify-contact-page-content {
  background: #f4f7fa;
  padding: 48px 24px 72px;
}

/* ── Two-column contact layout ─────────────────────────────────────────── */

.accredify-contact-layout {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: start;
  box-sizing: border-box;
}

/* Grid items default to min-width: auto, which means an un-shrinkable child
   (here, the Cloudflare Turnstile widget — its iframe renders at a fixed
   ~300px regardless of container width) can force the item wider than its
   track. On a narrow phone that pushes the whole grid wider than the
   viewport, and since the two stacked items no longer share identical
   effective bounds once that happens, the form card visibly drifts off to
   one side instead of lining up under the text above it. min-width: 0
   is the standard fix — it lets the item shrink to its track's actual
   width and forces its content (the Turnstile widget included) to wrap
   inside that width instead of pushing the item outward. */
.accredify-contact-left,
.accredify-contact-right {
  min-width: 0;
  box-sizing: border-box;
}

@media (max-width: 860px) {
  .accredify-contact-layout {
    grid-template-columns: 1fr;
  }

  /* On desktop the left column sits in its own grid track with a 40px gap
     to the card on the right, so its padding-left: 0 (see
     .accredify-contact-left below) doesn't matter — the grid gap does the
     spacing. Once the layout collapses to a single column here, that 0px
     left/right padding makes the heading and contact details hug the page
     edge, while the form card below still has its own 32px internal
     padding — so the two stacked panels no longer line up on the left.
     Give the left column the same horizontal inset as the form card so
     both panels start flush against the same edge. */
  .accredify-contact-left {
    padding: 8px 32px 24px;
  }
}

/* ── Left column: contact details ──────────────────────────────────────── */

.accredify-contact-left {
  padding: 8px 8px 8px 0;
}

.accredify-contact-left h1 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.85rem;
  line-height: 1.3;
  color: #16283f;
  margin: 0 0 16px;
}

.accredify-contact-description {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 1rem;
  color: #4d5b6a;
  line-height: 1.6;
  margin: 0 0 32px;
}

.accredify-contact-details {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.accredify-contact-item h3 {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1c4d78;
  margin: 0 0 4px;
}

.accredify-contact-item p {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 0.98rem;
  color: #33414f;
  margin: 0;
  line-height: 1.5;
}

/* ── Right column: form card ───────────────────────────────────────────── */

.accredify-contact-right {
  width: 100%;
}

.accredify-contact-form-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 36px 32px;
  box-shadow: 0 6px 24px rgba(14, 27, 44, 0.10);
  border-top: 4px solid #1c4d78;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* ── Form fields ────────────────────────────────────────────────────────── */

.accredify-contact-form-card .form-item {
  margin-bottom: 20px;
}

.accredify-contact-form-card label {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #16283f;
  margin-bottom: 6px;
  display: inline-block;
}

.accredify-contact-form-card input[type="text"],
.accredify-contact-form-card input[type="email"],
.accredify-contact-form-card input[type="tel"],
.accredify-contact-form-card textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 0.98rem;
  color: #33414f;
  background: #f7f9fb;
  border: 1px solid #d7e0e9;
  border-radius: 6px;
  padding: 11px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.accredify-contact-form-card input[type="text"]:focus,
.accredify-contact-form-card input[type="email"]:focus,
.accredify-contact-form-card input[type="tel"]:focus,
.accredify-contact-form-card textarea:focus {
  outline: none;
  border-color: #1e78d1;
  box-shadow: 0 0 0 3px rgba(30, 120, 209, 0.15);
  background: #ffffff;
}

.accredify-contact-form-card textarea {
  min-height: 130px;
  resize: vertical;
}

/* Turnstile widget spacing */
.accredify-contact-form-card .cf-turnstile {
  margin: 4px 0 20px;
  max-width: 100%;
  overflow: hidden;
}

/* ── Submit button — matches the "Continue" button styling on Modules ──── */

.accredify-submit-btn {
  font-family: 'Lato', Arial, sans-serif;
  font-size: 0.98rem;
  font-weight: 700;
  color: #ffffff;
  background: #1e78d1;
  border: none;
  border-radius: 6px;
  padding: 13px 28px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.accredify-submit-btn:hover {
  background: #1a68b8;
}

.accredify-submit-btn:active {
  transform: translateY(1px);
}

/* ── Form error / status messages ──────────────────────────────────────── */

.accredify-contact-form-card .messages--error,
.accredify-contact-page-content .messages--error {
  font-family: 'Lato', Arial, sans-serif;
  background: #fdecea;
  border-left: 4px solid #c0392b;
  color: #7a2c22;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 0.92rem;
}

.accredify-contact-form-card .messages--status,
.accredify-contact-page-content .messages--status {
  font-family: 'Lato', Arial, sans-serif;
  background: #eaf6ec;
  border-left: 4px solid #2e7d46;
  color: #1e5631;
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 20px;
  font-size: 0.92rem;
}