/* Volunteer page (July 2026 redesign).

   The Fluent Form's role options render as compact name-only pills: each
   checkbox label is "<strong>Role</strong> — commitment — description", so
   the label's font-size is zeroed and only the <strong> title is restored.
   (Screen readers still get the full label text.) The hidden commitment +
   description repeat in the .roles-key side card beside the form — the same
   form-grid layout as the adopt/surrender/fundraising pages.

   Specificity note: this stylesheet loads BEFORE forms-skin.css (see the
   enqueue order in functions.php), so the pill selectors are prefixed with
   .form-main to out-rank forms-skin's equal-specificity rules.

   The prototype's illustrated .role/.roles-grid card styles that used to be
   parked here were dropped with this redesign — see git history if needed. */

.form-grid { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; }

/* --- Role options as pills ---------------------------------------------- */
.form-main .fluentform .frm-fluent-form .rdr-option-cards .ff-el-input--content {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.form-main .fluentform .frm-fluent-form .rdr-option-cards .ff-el-form-check {
  margin: 0;
  border-width: 2px;
  border-radius: 999px;
  padding: 10px 18px;
}
.form-main .fluentform .frm-fluent-form .rdr-option-cards .ff-el-form-check label.ff-el-form-check-label {
  font-size: 0; /* hides the " — commitment — description" tail; see .roles-key */
  align-items: center;
  gap: 8px;
}
.form-main .fluentform .frm-fluent-form .rdr-option-cards .ff-el-form-check label.ff-el-form-check-label strong {
  font-size: 15px;
  font-weight: 800;
}
.form-main .fluentform .frm-fluent-form .rdr-option-cards .ff-el-form-check-input {
  width: 16px; height: 16px; margin-top: 0; border-radius: 50%;
}

/* --- "What the roles involve" side card ---------------------------------- */
.roles-key {
  background: var(--soft-blue); border: 3px solid var(--ink); border-radius: 22px;
  padding: 24px; box-shadow: 6px 6px 0 var(--ink);
  position: sticky; top: 104px; /* clears the sticky nav (~81px) */
}
.roles-key h3 { font-size: 20px; margin-bottom: 14px; }
.roles-key ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.roles-key li { display: flex; gap: 12px; align-items: flex-start; }
/* Icon chips: the prototype role cards' .role-icon, scaled down for the
   sidebar. Each li sets --ic (chip colour) and optionally --is (stroke). */
.roles-key .rk-icon {
  flex: 0 0 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--ic, var(--blue));
  border: 2.5px solid var(--ink); border-radius: 10px;
  box-shadow: 2px 2px 0 var(--ink);
}
.roles-key .rk-icon svg {
  width: 20px; height: 20px;
  stroke: var(--is, var(--paper)); fill: none;
  stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round;
}
/* Hand-placed feel: alternate a slight tilt down the list */
.roles-key li:nth-child(odd)  .rk-icon { transform: rotate(-4deg); }
.roles-key li:nth-child(even) .rk-icon { transform: rotate(3deg); }
.roles-key .rk-body { flex: 1; min-width: 0; }
.roles-key .rk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.roles-key .rk-head strong { font-size: 14px; }
.roles-key .commit {
  font-size: 11px; color: rgba(26,20,16,0.65);
  text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;
  white-space: nowrap;
}
.roles-key p { font-size: 13px; color: rgba(26,20,16,0.7); margin: 2px 0 0; }

@media (max-width: 980px) {
  .form-grid { grid-template-columns: 1fr; }
  .roles-key { position: static; }
}