@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400..700&display=swap');

/*
 * STRH / Strong Richmond Hill — CiviCRM public registration styling v1
 * Intended for the public CiviCRM contribution-page form(s), not the admin UI.
 * No JavaScript. No payment-field hiding, positioning, or Stripe iframe changes.
 * Designed against conventional CiviCRM 'crm-public' + contribution-form classes.
 * TEST ON THE ACTUAL FORM before enabling live registrations.
 */

/* Design tokens — all scoped to the public contribution form */
.crm-container.crm-public .crm-contribution-main-form-block {
  color-scheme: light;
  --strh-ink: #18312b;
  --strh-muted: #4f685c;
  --strh-forest: #123c32;
  --strh-lime: #9abe35;
  --strh-cream: #f8f8f1;
  --strh-line: #dce4d7;
  color: var(--strh-ink);
  background: #ffffff;
  border: 1px solid var(--strh-line);
  border-radius: 18px;
  box-shadow: 0 15px 42px rgba(27, 53, 36, .08);
  margin: 22px auto 48px;
  padding: clamp(20px, 4vw, 44px);
  max-width: 770px;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

/* Set the background only on pages that actually contain the CiviCRM public contribution form. */
body:has(.crm-container.crm-public .crm-contribution-main-form-block) {
  background: #f8f8f1;
}

/* Site-wide CiviCRM heading stays legible when public forms use an admin dark theme. */
.crm-container.crm-public .crm-contribution-main-form-block h1,
.crm-container.crm-public .crm-contribution-main-form-block h2,
.crm-container.crm-public .crm-contribution-main-form-block h3,
.crm-container.crm-public .crm-contribution-main-form-block legend {
  color: #18312b;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.crm-container.crm-public .crm-contribution-main-form-block h1,
.crm-container.crm-public .crm-contribution-main-form-block h2 {
  font-family: Georgia, "Times New Roman", serif;
}

/* Headings, membership option groups and supporter profile are visually separated. */
.crm-container.crm-public .crm-contribution-main-form-block fieldset {
  border: 1px solid #dce4d7;
  background: #ffffff;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 19px 0;
  min-width: 0;
}

.crm-container.crm-public .crm-contribution-main-form-block fieldset legend {
  padding: 0 8px;
  font-size: 1.12rem;
  font-weight: 750;
}

/* CiviCRM often floats labels left and fields right: use a simple stacked layout. */
.crm-container.crm-public .crm-contribution-main-form-block .crm-section {
  clear: both;
  margin: 0 0 16px;
}

.crm-container.crm-public .crm-contribution-main-form-block .crm-section > .label {
  float: none;
  display: block;
  width: auto;
  min-width: 0;
  margin: 0 0 5px;
  padding: 0;
  text-align: left;
  font-size: .91rem;
  color: #29493c;
  font-weight: 650;
}

.crm-container.crm-public .crm-contribution-main-form-block .crm-section > .content {
  float: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #18312b;
}

/* Form controls: avoid overriding the securely hosted Stripe iframe. */
.crm-container.crm-public .crm-contribution-main-form-block input[type="text"],
.crm-container.crm-public .crm-contribution-main-form-block input[type="email"],
.crm-container.crm-public .crm-contribution-main-form-block input[type="tel"],
.crm-container.crm-public .crm-contribution-main-form-block input[type="number"],
.crm-container.crm-public .crm-contribution-main-form-block select,
.crm-container.crm-public .crm-contribution-main-form-block textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #b5c6b7;
  border-radius: 9px;
  color: #18312b;
  font: inherit;
  box-shadow: none;
}

.crm-container.crm-public .crm-contribution-main-form-block input[type="text"],
.crm-container.crm-public .crm-contribution-main-form-block input[type="email"],
.crm-container.crm-public .crm-contribution-main-form-block input[type="tel"] {
  width: min(100%, 470px);
}

.crm-container.crm-public .crm-contribution-main-form-block input:focus-visible,
.crm-container.crm-public .crm-contribution-main-form-block select:focus-visible,
.crm-container.crm-public .crm-contribution-main-form-block button:focus-visible,
.crm-container.crm-public .crm-contribution-main-form-block a:focus-visible {
  outline: 3px solid #9abe35;
  outline-offset: 2px;
}

.crm-container.crm-public .crm-contribution-main-form-block input[type="checkbox"],
.crm-container.crm-public .crm-contribution-main-form-block input[type="radio"] {
  accent-color: #6e971f;
  width: 17px;
  height: 17px;
  vertical-align: middle;
}


/* Preserve contrast even when the administration interface uses dark mode. */
.crm-container.crm-public .crm-contribution-main-form-block p,
.crm-container.crm-public .crm-contribution-main-form-block label,
.crm-container.crm-public .crm-contribution-main-form-block .content {
  color: #18312b;
}

/* Buttons that CiviCRM itself renders. No dynamic price/text changes. */
.crm-container.crm-public .crm-contribution-main-form-block .crm-button,
.crm-container.crm-public .crm-contribution-main-form-block button[type="submit"],
.crm-container.crm-public .crm-contribution-main-form-block input[type="submit"] {
  background: #9abe35;
  color: #15301f;
  border: 1px solid #9abe35;
  border-radius: 9px;
  font-size: .98rem;
  font-weight: 750;
  min-height: 46px;
  padding: 10px 20px;
  box-shadow: none;
  cursor: pointer;
}

.crm-container.crm-public .crm-contribution-main-form-block .crm-button:hover,
.crm-container.crm-public .crm-contribution-main-form-block button[type="submit"]:hover,
.crm-container.crm-public .crm-contribution-main-form-block input[type="submit"]:hover {
  background: #c0d85d;
  border-color: #c0d85d;
}

/* Form alerts and helpful copy stay readable. */
.crm-container.crm-public .crm-contribution-main-form-block .description,
.crm-container.crm-public .crm-contribution-main-form-block .help,
.crm-container.crm-public .crm-contribution-main-form-block .crm-form-help {
  color: #53685f;
  font-size: .91rem;
  line-height: 1.55;
}

.crm-container.crm-public .crm-contribution-main-form-block .crm-error,
.crm-container.crm-public .crm-contribution-main-form-block .error {
  color: #a32323;
}

@media (max-width: 720px) {
  .crm-container.crm-public .crm-contribution-main-form-block {
    margin: 12px 10px 30px;
    padding: 22px 16px;
    border-radius: 14px;
  }

  .crm-container.crm-public .crm-contribution-main-form-block fieldset {
    padding: 14px 12px;
  }

  .crm-container.crm-public .crm-contribution-main-form-block input[type="text"],
  .crm-container.crm-public .crm-contribution-main-form-block input[type="email"],
  .crm-container.crm-public .crm-contribution-main-form-block input[type="tel"] {
    width: 100%;
  }
}

/* --- V2 refinements, Oct 19 2026: outer canvas & profile guidance --- */
html:has(.crm-container.crm-public .crm-contribution-main-form-block),
body:has(.crm-container.crm-public .crm-contribution-main-form-block) {
  background: #f6f8f3 !important;
}

/* CiviCRM Standalone dark skins sometimes colour the full public container. */
.crm-container.crm-public:has(.crm-contribution-main-form-block),
.crm-container.crm-public:has(.crm-contribution-main-form-block) #crm-main-content-wrapper {
  background: transparent !important;
}
.crm-container.crm-public:has(.crm-contribution-main-form-block) h1,
.crm-container.crm-public:has(.crm-contribution-main-form-block) .crm-title {
  color: #18312b !important;
}

/* Keep the existing Profile help / privacy notice readable in dark-mode skins.
   Text should separately be updated in the CiviCRM Profile settings. */
.crm-container.crm-public .crm-contribution-main-form-block .crm-profile .messages,
.crm-container.crm-public .crm-contribution-main-form-block .crm-profile .crm-form-help {
  background: #edf5e7 !important;
  border-color: #c8dcb9 !important;
  color: #18312b !important;
}
.crm-container.crm-public .crm-contribution-main-form-block .crm-profile .messages :is(p, strong, span, div),
.crm-container.crm-public .crm-contribution-main-form-block .crm-profile .crm-form-help :is(p, strong, span, div) {
  color: #18312b !important;
}


/* STRH — Centre the public contribution page title */
.crm-container.crm-public:has(.crm-contribution-main-form-block) h1 {
  max-width: 770px;
  margin: 24px auto 18px !important;
  padding: 0 16px;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.25;
  color: #18312b !important;
}



/* STRH TYPOGRAPHY — Source Sans 3 */

body:has(.crm-container.crm-public),
.crm-container.crm-public,
.crm-container.crm-public input,
.crm-container.crm-public select,
.crm-container.crm-public textarea,
.crm-container.crm-public button {
  font-family: 'Source Sans 3', Arial, sans-serif !important;
}

.crm-container.crm-public {
  font-size: 16px;
  line-height: 1.55;
}

body:has(.crm-container.crm-public) h1 {
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.crm-container.crm-public h2,
.crm-container.crm-public legend,
.crm-container.crm-public .crm-title {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.crm-container.crm-public .crm-section .label {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.crm-container.crm-public button,
.crm-container.crm-public .crm-submit-buttons {
  font-weight: 700;
  letter-spacing: 0.005em;
}


/* ================================================================
 * STRH CiviEvent — consolidated public registration styling
 * Covers: first registrant, additional participants, review and
 * thank-you screens. Built from the 2026-10-20 uploaded live CSS.
 * All contribution/membership rules above this block are unchanged.
 * No changes to form actions, validation, data, emails or payments.
 * ================================================================ */

/* Keep one list of CiviEvent form wrappers; do not target admin screens. */
html:has(.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block, .crm-event-thankyou-form-block)),
body:has(.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block, .crm-event-thankyou-form-block)) {
  background: #f6f8f3 !important;
  color-scheme: light;
}

.crm-container.crm-public:has(:is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block, .crm-event-thankyou-form-block)),
.crm-container.crm-public:has(:is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block, .crm-event-thankyou-form-block)) #crm-main-content-wrapper {
  background: transparent !important;
  color: #18312b !important;
  color-scheme: light;
}

/* The outer titles sit OUTSIDE the individual form cards in CiviCRM. */
.crm-container.crm-public:has(:is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block, .crm-event-thankyou-form-block)) h1 {
  max-width: 770px;
  margin: 24px auto 18px !important;
  padding: 0 16px;
  box-sizing: border-box;
  text-align: center;
  font-size: clamp(1.6rem, 3vw, 2rem);
  line-height: 1.25;
  color: #18312b !important;
}

/* First page, review and final thank-you card. */
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) {
  --strh-ink: #18312b;
  --strh-lime: #9abe35;
  color-scheme: light;
  color: #18312b !important;
  background: #fff !important;
  border: 1px solid #dce4d7 !important;
  border-radius: 18px;
  box-shadow: 0 15px 42px rgba(27, 53, 36, .08);
  box-sizing: border-box;
  max-width: 770px;
  margin: 22px auto 48px;
  padding: clamp(20px, 4vw, 44px);
  font-size: 16px;
  line-height: 1.6;
}

/* Second and later attendees: form fields and navigation are siblings,
   so the whole form must be the card (not the button wrapper alone). */
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) {
  color-scheme: light;
  color: #18312b !important;
  background: #fff !important;
  border: 1px solid #dce4d7 !important;
  border-radius: 18px !important;
  box-shadow: 0 15px 42px rgba(27, 53, 36, .08);
  box-sizing: border-box;
  max-width: 770px;
  width: calc(100% - 24px);
  margin: 18px auto 48px !important;
  padding: clamp(20px, 4vw, 40px) !important;
  font-size: 16px;
  line-height: 1.6;
}
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) .crm-event-additionalparticipant-form-block {
  background: transparent !important;
  color: #18312b !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Make dark standalone-theme subsections light across EVERY form stage. */
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block)
  :is(.crm-group, .crm-profile, .crm-profile-wrapper, .crm-form-block, .crm-block, fieldset),
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block)
  :is(.crm-group, .crm-profile, .crm-profile-wrapper, .crm-profile-form-block, .crm-form-block, .crm-block, fieldset, table, tbody, tr, td, th),
.crm-container.crm-public:has(.crm-event-thankyou-form-block)
  :is(.crm-group, .crm-profile, .crm-profile-wrapper, .crm-event-info-form-block, .crm-block) {
  color-scheme: light;
  background: #fff !important;
  color: #18312b !important;
  border-color: #dce4d7 !important;
}

.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) fieldset,
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) fieldset {
  border: 1px solid #dce4d7 !important;
  border-radius: 12px;
  padding: 18px 20px;
  margin: 18px 0;
  min-width: 0;
}

/* Labels, regular copy, event titles and links: dark ink on white. */
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block)
  :is(h2, h3, h4, legend, p, label, .label, .content, strong, span, .crm-title),
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block)
  :is(h2, h3, h4, legend, p, label, .label, .content, strong, span, .crm-title),
.crm-container.crm-public:has(.crm-event-thankyou-form-block)
  :is(.crm-event-info-form-block, .crm-group, .crm-profile)
  :is(h2, h3, h4, p, label, .label, .content, strong, span) {
  color: #18312b !important;
}
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) :is(.description, .help, .crm-form-help),
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) :is(.description, .help, .crm-form-help) {
  color: #4f685c !important;
  line-height: 1.55;
}

/* Use stacked fields, never floated two-column labels that wrap badly. */
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) .crm-section,
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) .crm-section {
  clear: both;
  background: transparent !important;
  margin-bottom: 16px;
}
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) .crm-section > :is(.label, .content),
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) .crm-section > :is(.label, .content) {
  display: block !important;
  float: none !important;
  clear: both !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  background: transparent !important;
  color: #18312b !important;
  overflow-wrap: anywhere;
}
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) .crm-section > .label,
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) .crm-section > .label {
  margin-bottom: 6px !important;
  font-size: .93rem;
  font-weight: 650 !important;
}

/* Input controls; we never touch password fields, payments or Stripe. */
.crm-container.crm-public .crm-event-register-form-block :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea),
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
  box-sizing: border-box;
  width: min(100%, 520px);
  max-width: 100%;
  min-height: 46px;
  background: #fff !important;
  color: #18312b !important;
  border: 1px solid #b5c6b7 !important;
  border-radius: 9px !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
  font: inherit;
}
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) :is(input, select, textarea, button, a):focus-visible,
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) :is(input, select, textarea, button, a):focus-visible {
  outline: 3px solid #9abe35 !important;
  outline-offset: 2px;
}
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) :is(input[type="checkbox"], input[type="radio"]),
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: #6e971f;
}

/* Keep validation readable: red text/borders for real field errors. */
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) :is(.crm-error, .error, .crm-marker, .crm-inline-error),
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) :is(.crm-error, .error, .crm-marker, .crm-inline-error) {
  color: #a32323 !important;
}
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) input.crm-error {
  background: #fff !important;
  color: #18312b !important;
  border: 2px solid #b74343 !important;
}

/* One matching set of navigation buttons for all registration steps. */
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) .crm-submit-buttons :is(.crm-button, button, input[type="submit"], .crm-form-submit),
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) .crm-submit-buttons :is(.crm-button, button, input[type="submit"], .crm-form-submit) {
  background: #9abe35 !important;
  border: 1px solid #9abe35 !important;
  color: #15301f !important;
  border-radius: 9px !important;
  min-height: 46px;
  padding: 10px 16px !important;
  box-shadow: none !important;
  font-size: .98rem;
  font-weight: 750;
  cursor: pointer;
}
.crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) .crm-submit-buttons :is(.crm-button, button, input[type="submit"], .crm-form-submit):hover,
.crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) .crm-submit-buttons :is(.crm-button, button, input[type="submit"], .crm-form-submit):hover {
  background: #c0d85d !important;
  border-color: #c0d85d !important;
}

/* Status notice for saved participant or successful registration. */
.crm-container.crm-public:has(:is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block, .crm-event-thankyou-form-block)) .messages.status,
.crm-container.crm-public:has(:is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block, .crm-event-thankyou-form-block)) .messages.success {
  background: #eaf3e5 !important;
  border: 1px solid #bbd4a6 !important;
  border-left: 4px solid #91b832 !important;
  color: #18312b !important;
  border-radius: 9px;
  box-sizing: border-box;
  max-width: 770px;
  margin: 12px auto;
  padding: 12px 15px;
}
.crm-container.crm-public:has(:is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block, .crm-event-thankyou-form-block)) :is(.messages.status, .messages.success) :is(p, li, div, strong, span, a) {
  color: #18312b !important;
}
/* Error notice is deliberately distinct from a success message. */
.crm-container.crm-public:has(:is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block))
  :is(.messages.error, .messages.crm-error, .messages.warning, .crm-error-message) {
  background: #fff3f1 !important;
  border: 1px solid #ecc2bc !important;
  border-left: 4px solid #c84b42 !important;
  color: #8f2222 !important;
  border-radius: 9px !important;
  padding: 12px 16px !important;
  max-width: 770px;
  margin: 12px auto !important;
  box-sizing: border-box;
}
.crm-container.crm-public:has(:is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-additionalparticipant-form-block))
  :is(.messages.error, .messages.crm-error, .messages.warning, .crm-error-message) :is(p, div, ul, li, span, strong, a) {
  color: #8f2222 !important;
}

/* Review and thank-you event-info tables/participant summaries:
   don't inherit the standalone theme's charcoal table backgrounds. */
.crm-container.crm-public :is(.crm-event-confirm-form-block, .crm-event-thankyou-form-block)
  :is(table, thead, tbody, tfoot, tr, th, td),
.crm-container.crm-public:has(.crm-event-thankyou-form-block)
  :is(.crm-event-info-form-block, .event-info, .event_info-section)
  :is(table, thead, tbody, tfoot, tr, th, td) {
  background: #fff !important;
  color: #18312b !important;
  border-color: #dce4d7 !important;
}
.crm-container.crm-public :is(.crm-event-confirm-form-block, .crm-event-thankyou-form-block)
  :is(.crm-event-info-form-block, .event-info, .event_info-section, .crm-profile, .crm-group)
  :is(h2, h3, h4, p, label, .label, .content, strong, span, a) {
  color: #18312b !important;
}
.crm-container.crm-public :is(.crm-event-confirm-form-block, .crm-event-thankyou-form-block)
  :is(.crm-event-info-form-block, .event-info, .event_info-section) a {
  color: #316c26 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Date/location details: no tiny fixed label widths or awkward wrapping. */
.crm-container.crm-public :is(.crm-event-confirm-form-block, .crm-event-thankyou-form-block)
  :is(.crm-event-info-form-block, .event-info, .event_info-section) .crm-section {
  display: block !important;
  margin: 0 !important;
  padding: 10px 6px !important;
  border-bottom: 1px solid #e6ebe2;
  overflow-wrap: anywhere;
}
.crm-container.crm-public :is(.crm-event-confirm-form-block, .crm-event-thankyou-form-block)
  :is(.crm-event-info-form-block, .event-info, .event_info-section) .crm-section > :is(.label, .content) {
  display: block !important;
  float: none !important;
  clear: both !important;
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
  color: #18312b !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Thank You — outer CiviCRM sections can be siblings of the main block.
   Page-wide thank-you selectors below are deliberately NOT applied to the
   membership or earlier registration screens. */
.crm-container.crm-public:has(.crm-event-thankyou-form-block)
  :is(.crm-event-info-form-block, .crm-profile, .crm-group, .crm-block, .crm-section, .crm-form-block) {
  background: #fff !important;
  color: #18312b !important;
  border-color: #dce4d7 !important;
}
.crm-container.crm-public:has(.crm-event-thankyou-form-block)
  :is(.crm-event-info-form-block, .crm-profile, .crm-group, .crm-block)
  :is(h2, h3, h4, p, strong, span, label, .label, .content, a) {
  color: #18312b !important;
}
.crm-container.crm-public:has(.crm-event-thankyou-form-block)
  :is(.crm-event-info-form-block, .crm-profile, .crm-group) :is(table, tr, th, td) {
  background: #fff !important;
  color: #18312b !important;
  border-color: #dce4d7 !important;
}
.crm-container.crm-public:has(.crm-event-thankyou-form-block) a:not(.crm-button) {
  color: #316c26;
}
/* Success and sharing notices receive a calm, readable pale-green treatment. */
.crm-container.crm-public:has(.crm-event-thankyou-form-block)
  :is(.messages.status, .messages.success, .crm-socialnetwork, .crm-social-network, .crm-tell-a-friend) {
  background: #eaf3e5 !important;
  color: #18312b !important;
  border: 1px solid #bbd4a6 !important;
  border-radius: 9px;
  padding: 12px 15px;
}
.crm-container.crm-public:has(.crm-event-thankyou-form-block)
  :is(.crm-socialnetwork, .crm-social-network, .crm-tell-a-friend) :is(h2, h3, p, strong, span, a, div) {
  color: #18312b !important;
}

@media (max-width: 720px) {
  .crm-container.crm-public :is(.crm-event-register-form-block, .crm-event-confirm-form-block, .crm-event-thankyou-form-block) {
    margin: 12px 10px 30px;
    padding: 22px 16px;
    border-radius: 14px;
  }
  .crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block) {
    margin: 12px auto 30px !important;
    padding: 20px 15px !important;
    border-radius: 14px !important;
  }
  .crm-container.crm-public .crm-event-register-form-block :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea),
  .crm-container.crm-public form:has(.crm-event-additionalparticipant-form-block)
    :is(input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea) {
    width: 100%;
  }
  .crm-container.crm-public :is(.crm-event-confirm-form-block, .crm-event-thankyou-form-block) table {
    max-width: 100%;
    width: 100%;
    table-layout: auto;
  }
  .crm-container.crm-public :is(.crm-event-confirm-form-block, .crm-event-thankyou-form-block) td {
    overflow-wrap: anywhere;
  }
}
/* END consolidated STRH CiviEvent styles. */
/*
 * STRH CiviEvent — Thank You screen only (2026-10-20).
 * Append to /var/www/civicrm/strh-form.css; do NOT replace the consolidated CSS.
 * Fixes the completion page's charcoal CiviCRM Standalone theme.
 * No changes to registrations, emails, profiles, membership forms or admin pages.
 *
 * The earlier consolidated file relied on .crm-event-thankyou-form-block,
 * which may be absent from the rendered Thank You page. This patch recognizes
 * either a ThankYou form or the distinctive event-info + calendar/social links.
 * It will affect a page ONLY when at least one of these signals is present.
 * Modern browsers (including Chromebook Chrome) support :has() and CSS nesting.
 */

body:is(
  :has(form#ThankYou),
  :has(form[name="ThankYou"]),
  :has(#ThankYou),
  :has(.crm-event-thankyou-form-block),
  :has(input[name="_qf_ThankYou_display"]),
  :has(.crm-container a[href*="event/info"]):has(.crm-container a[href*="calendar"]),
  :has(.crm-container a[href*="event/info"]):has(.crm-container a[href*="twitter.com"])
) {
  background: #f6f8f3 !important;
  color-scheme: light;

  /* The successful registration is a DISPLAY page, not always a form-block.
     Make the main CiviCRM container itself the consistent white card. */
  & .crm-container {
    color-scheme: light;
    color: #18312b !important;
    background: #fff !important;
    box-sizing: border-box;
    width: calc(100% - 24px);
    max-width: 770px;
    margin: 24px auto 44px !important;
    padding: clamp(20px, 4vw, 40px) !important;
    border: 1px solid #dce4d7 !important;
    border-radius: 18px !important;
    box-shadow: 0 15px 42px rgba(27, 53, 36, .08);
    font-size: 16px;
    line-height: 1.55;
  }

  /* Clear dark content backgrounds without interfering with social buttons. */
  & .crm-container :is(
    #crm-main-content-wrapper,
    form#ThankYou, form[name="ThankYou"],
    .crm-block, .crm-group, .crm-profile, .crm-profile-wrapper,
    .crm-event-info-form-block, .event-info, .crm-section,
    table, thead, tbody, tfoot, tr, th, td
  ) {
    background-color: #fff !important;
    color: #18312b !important;
    border-color: #dce4d7 !important;
    box-shadow: none;
  }

  /* Title is outside the individual page sections in some CiviCRM themes. */
  & .crm-container :is(h1, h2, h3, h4, legend, .crm-title) {
    color: #18312b !important;
  }
  & h1 {
    color: #18312b !important;
    text-align: center;
  }
  & .crm-container h1 {
    font-size: clamp(1.55rem, 3vw, 2rem);
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    margin: 0 0 24px !important;
  }

  & .crm-container :is(p, li, label, .label, .content, strong, .crm-form-block) {
    color: #18312b !important;
  }
  & .crm-container a:not(.crm-button) {
    color: #316c26 !important;
    text-underline-offset: 2px;
  }

  /* Event Information and Participant 1, 2, ... heading bars. */
  & .crm-container :is(.header-dark, .header-light, .crm-accordion-header, .crm-title) {
    background: #edf4e8 !important;
    color: #18312b !important;
    border: 1px solid #dce4d7 !important;
    border-radius: 8px;
    padding: 10px 13px;
    margin: 16px 0 10px;
    font-weight: 700;
  }

  /* Event title, date, location and participant details: white, readable rows. */
  & .crm-container table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
  }
  & .crm-container :is(th, td) {
    color: #18312b !important;
    background: #fff !important;
    padding: 10px 12px;
    border-bottom: 1px solid #e3e9dd !important;
    vertical-align: top;
    overflow-wrap: anywhere;
  }
  & .crm-container .crm-section {
    clear: both;
    margin: 0 0 12px;
    overflow-wrap: anywhere;
  }
  & .crm-container .crm-section > :is(.label, .content) {
    display: block !important;
    float: none !important;
    clear: both;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: normal !important;
    color: #18312b !important;
  }
  & .crm-container .crm-section > .label {
    font-weight: 700;
    margin-bottom: 3px !important;
  }

  /* Success notice: pale green and dark ink rather than dark green with white. */
  & .crm-container :is(.messages.status, .messages.success, .messages.crm-success) {
    background: #eaf3e5 !important;
    border: 1px solid #bbd4a6 !important;
    border-left: 4px solid #91b832 !important;
    border-radius: 9px;
    padding: 13px 15px;
    color: #18312b !important;
    margin: 12px 0 20px;
  }
  & .crm-container :is(.messages.status, .messages.success, .messages.crm-success) :is(p, div, span, strong, a) {
    color: #18312b !important;
  }

  /* Help spread the word panel; leave share links/buttons functional. */
  & .crm-container :is(
    .crm-socialnetwork, .crm-social-network, .crm-social-network-block,
    .crm-tell-a-friend, [id*="share-block"], [class*="share-block"]
  ) {
    background: #eef5e8 !important;
    color: #18312b !important;
    border: 1px solid #d0e0c2 !important;
    border-radius: 10px;
    padding: 15px !important;
  }
  & .crm-container :is(
    .crm-socialnetwork, .crm-social-network, .crm-social-network-block,
    .crm-tell-a-friend, [id*="share-block"], [class*="share-block"]
  ) :is(h2, h3, p, span, strong, div) {
    color: #18312b !important;
  }

  @media (max-width: 720px) {
    & .crm-container {
      width: calc(100% - 16px);
      margin: 12px auto 24px !important;
      padding: 20px 14px !important;
      border-radius: 14px !important;
    }
    & .crm-container :is(th, td) {
      padding: 8px 6px;
      overflow-wrap: anywhere;
    }
  }
}
/* END STRH Thank You patch. */