/* The newsletter sign-up forms with Cloudflare Turnstile, loaded wherever either renders
   (src/newsletter.php). Plain CSS on purpose: the footer is on legacy pages too, whose
   Tailwind build (v3/build/index.css) is not rebuilt for this. */

/* ==== Form 3 (Keep Me Informed) on Resources and articles ===========================
   The theme's legacy CSS (src/index.css, #gform_3 { display: flex } from 768px) puts the
   fields and the footer side by side. The old reCAPTCHA sat inside the fields; Turnstile
   sits in the footer next to Submit, which squeezed the fields to a sliver. So the form
   wraps: fields take a full row, then the footer row holds Turnstile and Submit.
   Search and category pages lay form 3 out on their own (theme src/css/search-results.css). */
#gform_wrapper_3 #gform_3 { flex-wrap: wrap; }
#gform_wrapper_3 #gform_3 .gform_body { flex: 1 1 100%; align-self: auto; }
#gform_wrapper_3 #gform_3 .gform_footer {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
}
#gform_wrapper_3 #gform_3 .gform_footer .ca-turnstile { min-height: 65px; }
#gform_wrapper_3 #gform_3 .gform_footer .gform_button { margin-left: auto; }

/* The required-fields line is filtered to nothing (src/newsletter.php), but Gravity Forms
   still prints its empty paragraph inside the form heading. */
#gform_wrapper_3 .gform_required_legend:empty,
#gform_wrapper_11 .gform_required_legend:empty { display: none; }
#gform_wrapper_3 .gform_heading:has(> .gform_required_legend:empty:only-child),
#gform_wrapper_11 .gform_heading:has(> .gform_required_legend:empty:only-child) { display: none; }

/* ==== Form 11 (footer Stay Informed), styled like the Keep Me Informed card ==========
   A slightly wider last column on desktop, so the Turnstile widget (300px at least) fits.
   The two !important below answer the legacy theme build (theme build/index.css, loaded on
   Elementor pages), which forces .lg:grid-cols-4 and #gform_submit_button_11 { width: 7rem }
   with !important. */
@media (min-width: 1024px) {
  #ca-footer-grid { grid-template-columns: 1fr 1fr 1fr 1.25fr !important; }
}
#ca-footer-newsletter #gform_wrapper_11 { margin: 0; font-family: 'Outfit', sans-serif; color: #334155; }
#ca-footer-newsletter #gform_wrapper_11 .gform_fields { display: grid; grid-template-columns: 1fr; row-gap: 12px; }
#ca-footer-newsletter #gform_wrapper_11 .gfield { grid-column: 1 / -1; margin: 0; padding: 0; }
#ca-footer-newsletter #gform_wrapper_11 .gfield_label { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: #334155; }
#ca-footer-newsletter #gform_wrapper_11 .gfield_required { display: none; }
#ca-footer-newsletter #gform_wrapper_11 input[type="email"],
#ca-footer-newsletter #gform_wrapper_11 select {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 14px;
  border: 1px solid #cbd5e1; border-radius: 10px; background-color: #fff;
  font-family: 'Outfit', sans-serif; font-size: 16px; color: #1e293b;
}
#ca-footer-newsletter #gform_wrapper_11 input[type="email"]::placeholder { color: #94a3b8; }
#ca-footer-newsletter #gform_wrapper_11 input[type="email"]:focus,
#ca-footer-newsletter #gform_wrapper_11 select:focus { outline: none; border-color: #009999; box-shadow: 0 0 0 3px rgba(0, 153, 153, .2); }
#ca-footer-newsletter #gform_wrapper_11 #gform_11 .gform_footer {
  margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; gap: 12px;
}
#ca-footer-newsletter #gform_wrapper_11 .ca-turnstile:not(:empty) { min-height: 65px; }
#ca-footer-newsletter #gform_wrapper_11 #gform_11 .gform_button {
  width: 100% !important; height: 44px; margin: 0; border: 0; border-radius: 10px; background: #FFA500;
  font-family: 'Outfit', sans-serif; font-size: 16px; font-weight: 600; color: #fff; cursor: pointer;
  transition: background-color .15s;
}
#ca-footer-newsletter #gform_wrapper_11 #gform_11 .gform_button:hover { background: #e69500; }
#ca-footer-newsletter #gform_wrapper_11 .gfield_validation_message,
#ca-footer-newsletter #gform_wrapper_11 .gform_validation_errors { font-size: 13px; }
#ca-footer-newsletter .gform_confirmation_message { font-family: 'Outfit', sans-serif; font-size: 15px; color: #334155; }