/*
Breast Friend Brunch 2026 / Bloomerang Hosted Form Stylesheet
Use for the Breast Friend Brunch registration form.

Upload path in Bloomerang CRM:
Communications > Forms > Form Settings > External CSS Stylesheet

Important:
- Upload the HSCUB logo separately in the Organization Logo area.
- This CSS styles the hosted form itself. It does not embed the flyer or logo images.
- Preview the full form on desktop and mobile after uploading.
*/

/* Brand palette from HSCUB/Breast Friend Brunch materials */
:root {
  --bfb-blue: #0f75bc;
  --bfb-purple: #662d91;
  --bfb-magenta: #ec0082;
  --bfb-navy-purple: #2e3192;
  --bfb-teal: #66bbb8;
  --bfb-brown: #674324;
  --bfb-cream: #fff8ec;
  --bfb-soft-teal: #e8f8f7;
  --bfb-soft-purple: #f4ecfa;
  --bfb-text: #211924;
  --bfb-border: #d8c7e6;
}

/* Overall page */
html,
body {
  background:
    radial-gradient(circle at top left, rgba(236, 0, 130, 0.16), transparent 28%),
    radial-gradient(circle at top right, rgba(102, 187, 184, 0.28), transparent 26%),
    linear-gradient(180deg, var(--bfb-cream) 0%, #ffffff 100%);
  color: var(--bfb-text);
  font-family: Arial, Helvetica, sans-serif;
}

/* Main content/form wrapper.
   These broad selectors are intentional because Bloomerang hosted forms vary in markup. */
main,
.container,
.content,
#content,
.form-container,
.form,
form {
  border-radius: 18px;
}

/* If the form sits inside a white panel, soften it */
.container,
.content,
#content,
.form-container {
  background-color: rgba(255, 255, 255, 0.94);
}

/* Headings */
h1,
h2,
h3,
legend,
.form-title {
  color: var(--bfb-purple);
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Add a little brunch energy to the primary title */
h1,
.form-title {
  border-bottom: 6px solid var(--bfb-teal);
  display: inline-block;
  padding-bottom: 6px;
}

/* Section headings / fieldsets */
fieldset,
.section,
.form-section {
  border-color: var(--bfb-border);
  border-radius: 14px;
}

/* Labels and helper text */
label {
  color: var(--bfb-text);
  font-weight: 700;
}

.help,
.help-text,
.description,
small {
  color: #514756;
}

/* Links */
a {
  color: var(--bfb-purple);
  font-weight: 700;
}

a:hover,
a:focus {
  color: var(--bfb-magenta);
}

/* Text fields, dropdowns, text areas */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
select,
textarea {
  background-color: #ffffff;
  border: 2px solid var(--bfb-border);
  border-radius: 10px;
  color: var(--bfb-text);
  padding: 11px 12px;
}

/* Field focus state */
input:focus,
select:focus,
textarea:focus {
  border-color: var(--bfb-teal);
  box-shadow: 0 0 0 3px rgba(102, 187, 184, 0.28);
  outline: none;
}

/* Primary buttons */
button,
input[type="submit"],
input[type="button"],
.btn,
.button,
.SubmitButton {
  background: var(--bfb-purple);
  border: 2px solid var(--bfb-purple);
  border-radius: 999px;
  color: #ffffff;
  cursor: pointer;
  font-weight: 800;
  letter-spacing: 0.02em;
  padding: 13px 26px;
  text-transform: uppercase;
}

/* Primary button hover/focus */
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="button"]:hover,
input[type="button"]:focus,
.btn:hover,
.btn:focus,
.button:hover,
.button:focus,
.SubmitButton:hover,
.SubmitButton:focus {
  background: var(--bfb-magenta);
  border-color: var(--bfb-magenta);
  color: #ffffff;
}

/* Donation/ticket amount buttons or selectable choices */
.amount,
.amount-button,
.donation-amount,
.ticket,
.ticket-type,
.radio-button,
input[type="radio"] + label,
input[type="checkbox"] + label {
  border-radius: 12px;
}

/* Selected/active states */
.selected,
.active,
.checked,
.amount.selected,
.ticket.selected {
  border-color: var(--bfb-magenta);
  box-shadow: 0 0 0 3px rgba(236, 0, 130, 0.16);
}

/* Checkboxes/radios */
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--bfb-purple);
}

/* Tables, if registration/ticket summary uses one */
table {
  border-color: var(--bfb-border);
}

th {
  background-color: var(--bfb-soft-purple);
  color: var(--bfb-purple);
}

td {
  border-color: var(--bfb-border);
}

/* Contact/sidebar panel */
aside,
.sidebar,
.contact-info,
.organization-info {
  background:
    linear-gradient(180deg, var(--bfb-soft-teal) 0%, #ffffff 100%);
  border-left: 6px solid var(--bfb-magenta);
  border-radius: 14px;
  color: var(--bfb-text);
}

/* Error and required messages */
.error,
.errors,
.validation-summary-errors,
.field-validation-error,
.required {
  color: #9b174f;
  font-weight: 800;
}

/* Confirmation/success messaging */
.success,
.confirmation,
.thank-you {
  background-color: var(--bfb-soft-teal);
  border-left: 6px solid var(--bfb-purple);
  border-radius: 14px;
  color: var(--bfb-text);
}

/* Mobile adjustments */
@media (max-width: 700px) {
  html,
  body {
    background:
      radial-gradient(circle at top left, rgba(236, 0, 130, 0.12), transparent 30%),
      linear-gradient(180deg, var(--bfb-cream) 0%, #ffffff 100%);
  }

  h1,
  .form-title {
    display: block;
  }

  button,
  input[type="submit"],
  input[type="button"],
  .btn,
  .button,
  .SubmitButton {
    width: 100%;
  }
}