/* ==========================================================================
   Public forms
   --------------------------------------------------------------------------
   The membership, volunteer, madressa and youth pages were built before the
   redesign and carry their own inline styling. Rather than rewrite all that
   markup, these rules restyle the classes they already use.

   Every selector is prefixed with `body` so it outranks the leftover inline
   <style> blocks on those pages, which load after the main stylesheet.
   ========================================================================== */

/* --- The white panel a form sits in ---------------------------------- */
body .form-container {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin: 0 auto 2rem;
  max-width: 820px;
}

@media (max-width: 640px) {
  body .form-container { padding: 1.25rem; margin-inline: 0; }
}

/* --- Labels ---------------------------------------------------------- */
body .form-label {
  display: block;
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .85rem;
  letter-spacing: .01em;
  margin-bottom: .4rem;
}

/* --- Inputs ---------------------------------------------------------- */
body .form-input,
body input[type="text"].form-input,
body input[type="email"].form-input,
body input[type="tel"].form-input,
body input[type="date"].form-input,
body input[type="number"].form-input,
body select.form-input,
body textarea.form-input {
  width: 100%;
  padding: .8rem .95rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  transition: border-color .18s, box-shadow .18s;
  box-sizing: border-box;
}

body .form-input:focus {
  outline: none;
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(26, 122, 84, .15);
}

body .form-input::placeholder { color: #9AA8A0; }
body .form-input:disabled,
body .form-input[readonly] {
  background: var(--mist);
  color: var(--muted);
  cursor: not-allowed;
}

body textarea.form-input { min-height: 130px; resize: vertical; }

/* Catch the youth page, which uses raw utility classes rather than .form-input */
body .section input[type="text"],
body .section input[type="email"],
body .section input[type="tel"],
body .section input[type="number"],
body .section input[type="date"],
body .section select,
body .section textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: .8rem .95rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
}
body .section input:focus,
body .section select:focus,
body .section textarea:focus {
  outline: none;
  border-color: var(--jade);
  box-shadow: 0 0 0 3px rgba(26, 122, 84, .15);
}
/* ...but not the checkboxes and radios, which need their own size */
body .section input[type="checkbox"],
body .section input[type="radio"] {
  width: 18px; height: 18px; padding: 0;
  accent-color: var(--emerald);
  flex: none;
}

body .section label.block,
body .section label.font-medium {
  display: block;
  color: var(--ink);
  font-weight: 600;
  font-size: .85rem;
  margin-bottom: .4rem;
}

/* --- Checkboxes and radios ------------------------------------------- */
body .form-checkbox {
  width: 18px; height: 18px;
  accent-color: var(--emerald);
  flex: none;
  margin-top: .15rem;
}

body .checkbox-label,
body .radio-label {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .8rem 1rem;
  margin-bottom: .6rem;
  background: var(--parchment);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: .93rem;
  line-height: 1.5;
  color: var(--body);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}

body .checkbox-label:hover,
body .radio-label:hover {
  background: var(--mist);
  border-color: var(--jade);
}

body .radio-label { display: inline-flex; margin-right: .6rem; }

/* --- Buttons --------------------------------------------------------- */
body .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--emerald);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  padding: .85rem 1.9rem;
  border: 2px solid var(--emerald);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, border-color .2s, transform .1s;
}
body .btn-primary:hover { background: var(--jade); border-color: var(--jade); }
body .btn-primary:active { transform: translateY(1px); }

body .btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: transparent;
  color: var(--emerald);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  padding: .85rem 1.9rem;
  border: 2px solid var(--emerald);
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, color .2s;
}
body .btn-secondary:hover { background: var(--emerald); color: #fff; }

/* The youth page submit button uses utility classes */
body .section button[type="submit"]:not(.btn):not(.btn-primary):not(.btn-secondary) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--emerald);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .98rem;
  padding: .85rem 1.9rem;
  border: 2px solid var(--emerald);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s;
}
body .section button[type="submit"]:not(.btn):not(.btn-primary):not(.btn-secondary):hover {
  background: var(--jade);
}

/* --- Section headings inside forms ----------------------------------- */
body .form-container h2,
body .form-container h3 {
  color: var(--emerald);
  border-bottom: 2px solid var(--brass);
  padding-bottom: .5rem;
  margin-bottom: 1.25rem;
}

/* --- Spacing --------------------------------------------------------- */
body .form-container .space-y-6 > * + * { margin-top: 1.5rem; }
body .form-container .space-y-4 > * + * { margin-top: 1.1rem; }

/* --- Alerts on the public pages -------------------------------------- */
body .alert-success,
body .alert-error {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  padding: .9rem 1.1rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-size: .93rem;
  border: 1px solid transparent;
}
body .alert-success { background: #E7F5EC; border-color: #A9D8BC; color: #17603A; }
body .alert-error   { background: #FBEAEA; border-color: #E5B4B4; color: #8C2222; }

/* --- Tables inside forms (family member rows, etc.) ------------------ */
body .form-container table { width: 100%; border-collapse: collapse; }
body .form-container table th {
  background: var(--emerald);
  color: #fff;
  text-align: left;
  padding: .7rem .9rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
body .form-container table td {
  padding: .7rem .9rem;
  border-top: 1px solid var(--line);
}