/* ==========================================================================
   Contact — premium two-column page: intro + WPForms form (id 2318)
   ========================================================================== */

/* The section owns its vertical rhythm — drop Storefront's content-wrapper margin. */
.page-id-1004 #primary,
.page-id-1004 #main { margin-bottom: 0; }

.jl-contact {
  max-width: 1063px;
  margin: 0 auto;
  padding: 1.5em 2.618em 3em;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}

/* --- Intro column --- */
.jl-contact__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--jl-bordeaux);
}
.jl-contact__title {
  margin: 0 0 18px;
  font-family: var(--jl-serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--jl-ink);
}
.jl-contact__title em { color: var(--jl-bordeaux); font-style: italic; white-space: nowrap; }
.jl-contact__lead {
  max-width: 42ch;
  margin: 0 0 28px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--jl-text-70);
}
.jl-contact__points { margin: 0; padding: 0; list-style: none; }
.jl-contact__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--jl-ink);
  border-top: 1px solid var(--jl-line);
}
.jl-contact__points li:last-child { border-bottom: 1px solid var(--jl-line); }

/* --- Form panel --- */
.jl-contact__panel {
  background: var(--jl-cream-tint);
  border: 1px solid var(--jl-line);
  border-radius: var(--jl-r-media);
  box-shadow: 0 18px 40px rgba(27, 21, 18, .08);
  padding: 36px 34px;
}
.jl-contact__panel .wpforms-container { margin: 0; }
/* drop the form's default bottom margin so the panel padding is even top/bottom */
.jl-contact__panel .wpforms-form { margin-bottom: 0; }
/* the name field is a <fieldset>; Storefront gives fieldsets a grey fill +
   border — strip it so the subfields sit flat on the panel */
.jl-contact__panel .wpforms-form fieldset {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
/* labels + submit polish (fields themselves come from forms.css) */
.jl-contact__panel .wpforms-field-label {
  font-family: var(--jl-sans);
  font-weight: 600;
  font-size: 13px;
  color: var(--jl-ink);
  background: transparent; /* the name field's label is a <legend>, which Storefront tints */
  padding: 0;
  margin-left: 0; /* the name <legend> has a -13px left margin (fieldset offset); align it */
}
.jl-contact__panel .wpforms-field-sublabel { color: var(--jl-text-50); font-weight: 400; }
/* breathing room around the Turnstile widget between the message field and submit.
   WPForms ships .wpforms-container .wpforms-recaptcha-container .wpforms-turnstile
   at 0-3-0; add a 4th class (.wpforms-container) to out-specify it, per our CSS rule
   of winning on specificity over !important. */
.jl-contact__panel .wpforms-container .wpforms-recaptcha-container .wpforms-turnstile { padding: 10px 0 15px; }
/* The Turnstile widget is a fixed-width (~300px) Cloudflare iframe that overflows a
   narrow panel — scale it to fit the available width, but cap at its native 300px so
   it never scales up past 1. The width caps the box so no empty space trails to its right. */
.jl-contact__panel .wpforms-recaptcha-container.wpforms-is-turnstile {
  transform: scale(min(1, calc((100vw - 140px) / 300px)));
  width: min(300px, calc(100vw - 140px));
  transform-origin: left;
}
.jl-contact__panel .wpforms-submit { width: 100%; }
/* WPForms' AJAX loader is an <img> sibling after the full-width submit button,
   so by default it wraps onto its own line below it, left-aligned. Pin it over
   the button's right edge so it reads as a loading state inside the button. */
.jl-contact__panel .wpforms-submit-container { position: relative; }
.jl-contact__panel .wpforms-submit-spinner {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 22px;
  height: 22px;
  margin: 0;
  transform: translateY(-50%);
}

/* The page's own H1 ("Contact") is redundant with the intro title. */
.page-id-1004 .entry-title { display: none; }

@media (max-width: 880px) {
  .jl-contact {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 2em 1.5em 3em;
  }
  .jl-contact__panel { padding: 26px 22px; }
}