/* parity-overrides-p3c.css — the ONLY CSS deltas added by the P3c public-page
   port (/contact-us, /privacy-policy, /blog, /images/explore[/search/*],
   /images/{id}/view). Linked page-scoped from the pages that need it (same
   pattern as parity-overrides-tools.css). Every rule documents WHY it exists;
   nothing here restyles the live design — mandate: zero redesign.

   NOTE: the frozen parity-overrides-auth.css contains the identical reCAPTCHA
   placeholder rules, but that file is linked ONLY by the (auth) route-group
   layout — /contact-us (a main-layout page with the same live reCAPTCHA v2
   widget) needs its own copy. Rules duplicated verbatim from
   parity-overrides-auth.css (P3a), see that file for the derivation. */

/* reCAPTCHA v2 checkbox-widget placeholder (inert phase only).
   Standard widget frame: 304x78 layout box / 76px painted frame, #f9f9f9 bg,
   #d3d3d3 border, radius 3px, checkbox + "I'm not a robot" drawn in CSS so
   the static render matches the live widget's footprint. Everything is
   scoped to .g-recaptcha:empty — when the backend phase loads
   https://www.google.com/recaptcha/api.js (live loads it on /contact-us),
   Google fills the div and all of this stops applying automatically. */
.g-recaptcha:empty {
  box-sizing: border-box;
  width: 304px;
  /* Google's widget occupies a 78px layout box but paints a 76px frame.
     A bottom margin would collapse through the .mb-3 wrapper's own margin,
     so the extra 2px is added as wrapper padding below instead. */
  height: 76px;
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  padding-left: 12px;
}
.g-recaptcha:empty::before {
  /* the checkbox */
  content: "";
  width: 28px;
  height: 28px;
  background: #fff;
  border: 2px solid #c1c1c1;
  border-radius: 2px;
  flex: 0 0 auto;
}
/* Completes the widget's 78px layout box (see height comment above); margin
   on the child would collapse away, padding on the wrapper does not. */
.mb-3:has(> .g-recaptcha:empty) {
  padding-bottom: 2px;
}
.g-recaptcha:empty::after {
  /* the label */
  content: "I'm not a robot";
  margin-left: 12px;
  font-family: Roboto, helvetica, arial, sans-serif;
  font-size: 14px;
  color: #282727;
}