/* Shared form-field styling -- labels, help text, inputs, textareas,
   selects, checkboxes and the submit button -- for every FormSubmit-
   backed form on this site (contact now; movement-school, application
   and the 6 offer copies reuse this in later Phase 5/6 steps, per the
   plan's "no build step, so form behaviour lives in one shared file").
   Loaded on every page that has a form, after site.css.

   Values below are the LIVE site's own computed styles (Playwright,
   1440px viewport, WEBDRIVER_SPOOF init script, against
   https://www.ronanlewins.ie/contact, read-only, no submit) -- not
   screenshots (2026-09-17 checkpoint lesson). See
   reference/forms-contract.md for the capture notes and raw values.

   Fill colour: the live input's OWN background is transparent -- the
   visible peach fill is a separate absolutely-positioned sibling span
   (".form-input-effects-border", Squarespace's focus-ring layering
   technique) with background rgba(252,238,220,0.8), going to full
   opacity rgb(252,238,220) on focus. That colour is exactly this site's
   own --hero-cream token (site.css) at 80%/100% opacity -- so here it's
   simply the input's own background-color, visually identical, without
   reproducing the extra layered span.

   Field-to-field spacing (Phase 5 consolidation fix, 17.09.26): the
   values below were 32px/8px/120px -- WRONG, measured against nothing
   live. Corrected here against a fresh live Playwright computed-style +
   getBoundingClientRect probe of THREE live forms (contact,
   bray-movement-school, bray-new-student-application-form), both
   375/1440, read-only, no submit: every live `.field-list` child (each
   field's own wrapper) sits exactly **20px** below the one before it
   (`getBoundingClientRect` gap, confirmed identical at both widths --
   this is NOT a per-breakpoint value, the old 32px was simply wrong at
   every width, not just phone as the application-page builder assumed).
   The application-page builder's own workaround (cutting that page's
   OWN section padding to ~0 to compensate for this shared file's
   over-tall fields) is removed in that page's own CSS -- fixing the
   true cause here instead of compensating for it downstream. */

.rl-field-group {
  border: none;
  margin: 0 0 20px;
  padding: 0;
}
.rl-group-label {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-navy);
  padding: 0;
  margin: 0 0 12px;
}

.rl-field {
  margin: 0 0 20px;
}
/* No :last-child override: live does NOT zero the last field's own
   margin-bottom before its Submit button -- the gap from the last
   field to the button (also live-measured at 20px, both breakpoints)
   IS that field's own margin-bottom, collapsing straight through to
   the button below (which carries no margin-top of its own -- see
   .rl-submit at the end of this file). A `:last-child` rule here would
   be dead code anyway on every form this site has: a submit `<button>`
   always follows the last `.rl-field`, so `.rl-field:last-child` can
   never actually match. */

.rl-name-row {
  display: flex;
  gap: 10px; /* live-measured: First Name / Last Name inputs sit exactly 10px apart, both breakpoints (was 20px) */
}
.rl-name-row .rl-field {
  flex: 1 1 0;
  min-width: 0;
  margin-bottom: 0;
}

.rl-label {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--text-navy);
  margin: 0; /* live: 0 gap from the label's own bottom edge to the input below it (getBoundingClientRect delta = 0, both breakpoints) -- was 8px */
}
.rl-required {
  font-size: 15.0256px; /* live measured: mobile 15.0256px, desktop 14.272px -- see override below */
  font-weight: 400;
  color: var(--text-navy);
  margin-left: 4px;
}
.rl-help {
  font-size: 15.0256px;
  line-height: 22.5384px;
  color: var(--text-navy);
  margin: 0 0 4px; /* live measured: 4px gap from help text to the input below it, both breakpoints -- was 8px */
}
@media (min-width: 800px) {
  .rl-required { font-size: 14.272px; }
  .rl-help { font-size: 14.272px; line-height: 21.408px; }
}

.rl-input,
.rl-select,
.rl-textarea {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-navy);
  background-color: rgba(252, 238, 220, 0.8);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 5px 10px;
}
.rl-textarea {
  min-height: 100px;
  height: 100px; /* live measured: rendered textarea height is 100px, both breakpoints -- was 120px */
  resize: vertical;
  font-family: inherit;
}
.rl-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  color: rgba(52, 52, 68, 0.55);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23343444' d='M4 6l4 4 4-4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px;
}
/* Placeholder-grey text until a real option is picked: works because the
   placeholder <option> is empty-value + disabled + hidden, so the select
   stays :invalid (native "required" semantics) until a real option is
   chosen -- a standard technique, not a departure from native validation. */
.rl-select:valid {
  color: var(--text-navy);
}

.rl-input:focus,
.rl-select:focus,
.rl-textarea:focus {
  outline: none;
  background-color: rgb(252, 238, 220);
  border-color: var(--text-navy);
}
/* No pre-emptive red-border styling: these fields carry no `placeholder`
   attribute, so `:not(:placeholder-shown)` can never exclude an
   untouched empty field (that pseudo-class only ever applies to a field
   that HAS a placeholder) -- an early version of this rule lit every
   required field red before the visitor had touched anything, which the
   live site never does. The browser's own native validation bubble
   (triggered by reportValidity() on an invalid submit) is the only
   error affordance here, matching the live form -- see forms-contract.md. */

.rl-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rl-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 2px 0 0;
  border: 1.5px solid var(--text-navy);
  border-radius: 5px;
  background-color: rgba(252, 238, 220, 0.8);
  cursor: pointer;
  position: relative;
}
.rl-checkbox:checked {
  background-color: var(--text-navy);
}
.rl-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rl-checkbox-label {
  font-family: var(--font-body);
  font-size: 15.0256px; /* live measured: same two-tier scale as .rl-required/.rl-help -- see override below. Was a flat 16px. */
  color: var(--text-navy);
  cursor: pointer;
}
@media (min-width: 800px) {
  .rl-checkbox-label { font-size: 14.272px; }
}

/* Honeypot -- visually hidden but NOT display:none (bots skip
   display:none fields more often than they skip an off-screen one).
   tabindex="-1" + aria-hidden keep it out of keyboard/AT navigation. */
.rl-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rl-submit {
  font-weight: 700; /* live: submit button is bold, unlike the site's other .btn instances (400) */
  /* No margin-top: live's own gap from the last field to the button
     (20px, measured both breakpoints) IS the last field's own
     margin-bottom (.rl-field, above) collapsing through -- adding a
     SECOND 20px here on top of that would double it. Was 8px (also
     wrong, just a smaller wrong number). */
}