/* Load Solas fonts before any rules so browsers apply them */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,700;1,400&family=Montserrat:ital,wght@0,400;0,700;0,900;1,700&display=swap');

:root {
  --solas-font-body: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  --solas-font-heading: 'Montserrat', 'Open Sans', Arial, sans-serif;

  --solas-brand: #06535e;
  --solas-brand-dark: #043d44;
  --solas-brand-light: #dfeff0;
  --solas-brand-contrast: #ffffff;

  --solas-text: #06535e;
  --solas-muted: #3f6f74;
  --solas-bg: #f5f5f1;
  --solas-panel: #ffffff;
  --solas-border: #dfe3e5;

  --solas-link: #06535e;
  --solas-link-hover: #043d44;

  --solas-btn-bg: #39def7;
  --solas-btn-bg-hover: #06535e;
  --solas-btn-text: #06535e;
  --solas-btn-text-hover: #39def7;
  --solas-btn-radius: 5px;
  --solas-btn-padding-y: 12px;
  --solas-btn-padding-x: 18px;

  --solas-field-border: #06535e;
  --solas-field-border-focus: #39def7;
  --solas-field-bg: #ffffff;

  /* Keep label and field/value text the same visual size so labels don't look smaller */
  --solas-label-font-size: 15px;
  --solas-field-font-size: 16px;
  --solas-heading-font-size: 1.5em;

  --solas-body-font-weight: 300;
  --solas-label-font-weight: 800;
  --solas-heading-font-weight: 700;
  --solas-button-font-weight: 900;
}

/* Style updates from Charles de Bueger */

/* Real styling for the donor-facing CiviCRM forms.
   Cap the overall width and add side padding so the form isn't edge-to-edge
   on narrow screens and doesn't stretch too wide on large ones. */
#crm-container.crm-public {
  background: #ffffff;
  color: var(--solas-text);
  font-family: 'Open Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: var(--solas-body-font-weight);
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

#crm-container.crm-public *,
#crm-container.crm-public *::before,
#crm-container.crm-public *::after {
  box-sizing: border-box;
}

/* Stop individual controls/tables/embeds from being wider than the
   container, even if Civi renders them with a fixed pixel width. */
#crm-container.crm-public input,
#crm-container.crm-public select,
#crm-container.crm-public textarea,
#crm-container.crm-public .crm-form-text,
#crm-container.crm-public .select2-container,
#crm-container.crm-public table,
#crm-container.crm-public img,
#crm-container.crm-public iframe {
  max-width: 100%;
}

/* Civi's grid helper classes (six/eight/twelve etc.) and the wrappers around
   name/address/phone/country fields often carry a fixed pixel width from the
   theme. Cap them too, since max-width on the input alone doesn't help if its
   *wrapper* is the one forcing the overflow. */
#crm-container.crm-public .crm-section .content>*,
#crm-container.crm-public .crm-section .content div,
#crm-container.crm-public [class~='six'],
#crm-container.crm-public [class~='eight'],
#crm-container.crm-public [class~='nine'],
#crm-container.crm-public [class~='twelve'] {
  max-width: 100%;
}

#crm-container.crm-public p,
#crm-container.crm-public li,
#crm-container.crm-public td,
#crm-container.crm-public th,
#crm-container.crm-public span,
#crm-container.crm-public div,
#crm-container.crm-public .description,
#crm-container.crm-public .crm-section .content,
#crm-container.crm-public .crm-form-block,
#crm-container.crm-public .crm-form-block-content {
  color: var(--solas-text);
  font-weight: var(--solas-body-font-weight);
}

#crm-container.crm-public .crm-form-block,
#crm-container.crm-public .crm-section,
#crm-container.crm-public .crm-container {
  background: transparent;
}

#crm-container.crm-public h1,
#crm-container.crm-public h2,
#crm-container.crm-public h3,
#crm-container.crm-public fieldset legend {
  font-family: 'Montserrat', 'Open Sans', Arial, sans-serif;
  color: var(--solas-brand);
}

#crm-container.crm-public .crm-section .label,
#crm-container.crm-public .form-layout label,
#crm-container.crm-public .form-item label,
#crm-container.crm-public .crm-form-block label {
  color: var(--solas-text);
  font-weight: var(--solas-label-font-weight);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-family: var(--solas-font-heading);
  font-size: var(--solas-label-font-size);
}

#crm-container.crm-public input[type='text'],
#crm-container.crm-public input[type='email'],
#crm-container.crm-public input[type='password'],
#crm-container.crm-public input[type='number'],
#crm-container.crm-public select,
#crm-container.crm-public textarea,
#crm-container.crm-public .crm-form-text {
  border: none;
  border-bottom: 2px solid var(--solas-field-border);
  background: #ffffff;
  border-radius: 0;
  min-height: 44px;
  padding: 10px 12px;
  font-size: var(--solas-field-font-size);
  color: #1d1d1d;
  box-shadow: none;
}

#crm-container.crm-public input:focus,
#crm-container.crm-public select:focus,
#crm-container.crm-public textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(57, 222, 247, 0.25);
  border-bottom-color: var(--solas-field-border);
}

/* Civi's submit controls vary by page, so style their concrete form locations.
   .crm-button/.button are only styled inside the submit-buttons wrapper, so the
   admin-only "Configure" preview link (also class="button", but outside that
   wrapper) is left with its default Civi styling. */
#crm-container.crm-public #crm-submit-buttons input[type='submit'],
#crm-container.crm-public .crm-submit-buttons input[type='submit'],
#crm-container.crm-public #crm-submit-buttons button[type='submit'],
#crm-container.crm-public .crm-submit-buttons button[type='submit'],
#crm-container.crm-public input.crm-form-submit,
#crm-container.crm-public button.crm-form-submit,
#crm-container.crm-public #crm-submit-buttons .crm-button,
#crm-container.crm-public .crm-submit-buttons .crm-button,
#crm-container.crm-public #crm-submit-buttons .button,
#crm-container.crm-public .crm-submit-buttons .button,
#crm-container.crm-public .crm-form-submit {
  background: var(--solas-btn-bg);
  color: var(--solas-btn-text);
  border: 0;
  border-radius: var(--solas-btn-radius);
  font-family: var(--solas-font-heading);
  font-weight: var(--solas-button-font-weight);
  text-transform: uppercase;
  min-height: 46px;
  padding: var(--solas-btn-padding-y) var(--solas-btn-padding-x);
  box-shadow: none;
}

#crm-container.crm-public #crm-submit-buttons input[type='submit']:hover,
#crm-container.crm-public .crm-submit-buttons input[type='submit']:hover,
#crm-container.crm-public #crm-submit-buttons button[type='submit']:hover,
#crm-container.crm-public .crm-submit-buttons button[type='submit']:hover,
#crm-container.crm-public input.crm-form-submit:hover,
#crm-container.crm-public button.crm-form-submit:hover,
#crm-container.crm-public #crm-submit-buttons .crm-button:hover,
#crm-container.crm-public .crm-submit-buttons .crm-button:hover,
#crm-container.crm-public #crm-submit-buttons .button:hover,
#crm-container.crm-public .crm-submit-buttons .button:hover,
#crm-container.crm-public .crm-form-submit:hover {
  background: var(--solas-btn-bg-hover);
  color: var(--solas-btn-text-hover);
}

/* links (front-end only: scoped to .crm-public so admin screens are untouched).
   Excludes select2's pseudo-link controls and button-styled links, which are
   form controls / buttons rather than navigational links. */
.crm-container.crm-public a:not(.select2-choice, .select2-choice *, .button, .button *),
.crm-container.crm-public a:not(.select2-choice, .select2-choice *, .button, .button *):link,
.crm-container.crm-public a:not(.select2-choice, .select2-choice *, .button, .button *):visited {
  color: inherit;
  text-decoration: underline;
}

/* The theme ships an "a.button" style (used by admin-only links like the
   Configure wrench button shown to logged-in admins) with its own background.
   Strip that background on the front end so those admin links stay neutral. */
#crm-container.crm-public a.button,
#crm-container.crm-public a.button:link,
#crm-container.crm-public a.button:visited,
#crm-container.crm-public a.button:hover,
#crm-container.crm-public a.button:focus {
  background: none;
}

.crm-container.crm-public .help {
  background-color: var(--solas-panel);
  border: 0;
  font-size: inherit;
  color: var(--solas-text);
  font-weight: var(--solas-body-font-weight);
}

.crm-container.crm-public .help,
.crm-container.crm-public .help p {
  margin: 0;
}

/* change the width of the labels and controls in the forms */
@media (min-width: 480px) {
  #crm-container.crm-public .crm-section .content {
    margin-left: 10px;
  }
}

/* The Minetta theme declares button icons with !important, so this is the one
  required !important directive in the stylesheet. */
#crm-container.crm-public button.crm-form-submit i.crm-i,
#crm-container.crm-public .crm-button i.crm-i,
#crm-container.crm-public .crm-form-submit i.crm-i {
  display: none !important;
}

/* Separate the body text from the page title */
#crm-container.crm-public #intro_text.crm-section {
  margin-bottom: 20px;
}

/* error message styling */
#crm-container.crm-public input.crm-inline-error {
  background-color: inherit;
}

/* Fix select2 dropdowns: these are form controls, not navigational links,
   so they shouldn't be underlined (the general link rule above already
   excludes them; this is a plain-language safety net for other select2 markup). */
div.select2-container.crm-select2 a {
  text-decoration: none;
}

/* Match dropdown text styling to Solas body copy, same size as typed field text */
#crm-container.crm-public select,
#crm-container.crm-public select option,
#crm-container.crm-public .select2-container .select2-selection--single,
#crm-container.crm-public .select2-container .select2-selection__rendered,
#crm-container.crm-public .select2-container .select2-results__option,
#crm-container.crm-public .select2-container .select2-choice,
#crm-container.crm-public .select2-container .select2-choice .select2-chosen,
#crm-container.crm-public .select2-results .select2-result-label {
  color: var(--solas-text);
  font-weight: var(--solas-body-font-weight);
  font-size: var(--solas-field-font-size);
}

#crm-container.crm-public .select2-container.crm-select2 .select2-selection--single,
#crm-container.crm-public .select2-container.crm-select2 .select2-choice {
  min-height: 44px;
  border: none;
  border-bottom: 2px solid var(--solas-field-border);
  border-radius: 0;
  background: var(--solas-field-bg);
}

#crm-container.crm-public .select2-container.crm-select2 .select2-selection--single:focus,
#crm-container.crm-public .select2-container.crm-select2 .select2-choice:focus,
#crm-container.crm-public .select2-container.crm-select2.select2-container--focus .select2-selection--single,
#crm-container.crm-public .select2-container.crm-select2.select2-container--open .select2-selection--single {
  box-shadow: 0 0 0 3px rgba(57, 222, 247, 0.25);
  border-bottom-color: var(--solas-field-border);
}

/* Old Select2 (used on country fields) can inherit transparent backgrounds.
   Force an opaque dropdown panel so the lower edge does not look broken. */
#crm-container.crm-public .select2-drop,
.crm-container.crm-public .select2-drop,
.select2-drop.crm-container.crm-public,
#crm-container.crm-public .select2-drop.crm-container,
#crm-container.crm-public .select2-drop.crm-container.crm-public {
  background: #ffffff;
  border: 1px solid var(--solas-field-border);
  border-top: 1px solid var(--solas-field-border);
  border-bottom: 1px solid var(--solas-field-border);
  border-radius: 0 0 4px 4px;
  overflow: hidden;
  box-shadow: 0 1px 0 var(--solas-field-border);
  z-index: 10050;
}

#crm-container.crm-public .select2-search,
.crm-container.crm-public .select2-search {
  background: #ffffff;
  border-bottom: 1px solid var(--solas-border);
}

#crm-container.crm-public .select2-results,
.crm-container.crm-public .select2-results {
  background: #ffffff;
  margin: 0;
  padding: 0;
}

/* Make the fieldset legends look more like H2 from main site (front-end only) */
.crm-container.crm-public fieldset {
  margin-top: 10px;
}

.crm-container.crm-public fieldset legend {
  border-bottom: solid 1px;
  color: inherit;
  font-family: var(--solas-font-heading);
  font-size: var(--solas-heading-font-size);
  width: 100%;
  padding: 5px 0;
  line-height: 1.35;
}

/* move the recaptcha slightly */
#crm-container.crm-public .crm-section.recaptcha-section {
  margin: 20px 0px 20px -16px;
}

/* Update the information pages after unsubscribe (front-end only) */
.crm-container.crm-public .status:has(.msg-text) {
  background-color: inherit;
  border: inherit;
  color: inherit;
  font-weight: inherit;
}

/* Receipt headings use the same light underlined style as the main site.
   Even though the style is called "header-dark", since the main Solas site   doesn't have any dark headings, it just uses this style for the light underlined headings. */
#crm-container.crm-public .header-dark {
  background: transparent;
  border-bottom: solid var(--solas-brand) 1px;
  border-radius: 0;
  color: var(--solas-brand);
  font-family: var(--solas-font-heading);
  font-size: var(--solas-heading-font-size);
  font-weight: var(--solas-heading-font-weight);
  margin-bottom: 30px;
  margin-top: 10px;
  padding-bottom: 5px;
}

/* Legacy recurring-update overrides removed in conservative prune.
   They did not match any of the five target pages and can be restored from git if needed. */

/* Improve spacing and choice controls on contribution forms */
#crm-container.crm-public .crm-section {
  margin-bottom: 18px;
  /* .crm-section is a CSS grid row (label | content | clear) in this theme.
     Some field types get align-items: center from the theme and others get
     start, which misaligns short labels against taller content cells.
     Force one consistent value everywhere. */
  align-items: start;
}

#crm-container.crm-public .crm-section .label {
  padding-top: 13px;
  margin: 0;
  line-height: 1.3;
}

/* Read-only receipt/profile values are text, not tall input controls. */
#crm-container.crm-public .label-left.crm-profile-view .crm-section .label {
  padding-top: 0;
}

/* Reset any margin/line-height the theme puts on the <label> tag itself
   (as distinct from its wrapping .label div), which was pushing the label
   text down out of line with the input's text baseline. */
#crm-container.crm-public .crm-section .label label {
  margin: 0;
  padding-bottom: 5px;
  line-height: 1.3;
  display: inline-block;
}

#crm-container.crm-public .crm-section .content {
  padding-bottom: 6px;
  text-align: left;
}

/* Some themes centre fixed-width fields inside the content column; force
   them back to the left so they line up under/beside their label. */
#crm-container.crm-public .crm-section .content input[type='text'],
#crm-container.crm-public .crm-section .content input[type='email'],
#crm-container.crm-public .crm-section .content input[type='password'],
#crm-container.crm-public .crm-section .content input[type='number'],
#crm-container.crm-public .crm-section .content select,
#crm-container.crm-public .crm-section .content .crm-form-text,
#crm-container.crm-public .crm-section .content .select2-container {
  display: block;
  margin: 0;
  float: none;
}

#crm-container.crm-public .crm-contribution-main-form-block,
#crm-container.crm-public .crm-block {
  border-radius: 6px;
}

#crm-container.crm-public .crm-section input[type='radio'] {
  accent-color: var(--solas-brand);
  inline-size: 18px;
  block-size: 18px;
  margin-top: 2px;
}

#crm-container.crm-public .crm-section .price-set-option-content,
#crm-container.crm-public .crm-section .content label {
  line-height: 1.45;
}

#crm-container.crm-public .crm-section .content .price-set-row,
#crm-container.crm-public .crm-section .content .crm-radio-wrapper {
  padding: 8px 0;
}

/* The "Other Amount" price field carries its own top padding/min-height from
   Civi core, left over from when it sat inline beside the radio button rows
   above it. That pushes its input down away from the "OTHER AMOUNT" label
   compared to ordinary fields, so reset it to match. */
#crm-container.crm-public .other_amount-section .label,
#crm-container.crm-public .other_amount-section .content {
  margin-top: 0;
  min-height: 0;
}

#crm-container.crm-public .crm-submit-buttons,
#crm-container.crm-public #crm-submit-buttons {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--solas-border);
}

/* Profile and contribution forms use compact submit wrappers.
  Make the shared divider full-width and keep its spacing consistent.
  Scoped to #crm-container.crm-public only, so admin edit screens (which reuse
  the same form classes) are not affected. */
#crm-container.crm-public form.CRM_Profile_Form_Edit .crm-submit-buttons,
#crm-container.crm-public form.CRM_Profile_Form_Edit #crm-submit-buttons,
#crm-container.crm-public form.CRM_Contribute_Form_Contribution .crm-submit-buttons,
#crm-container.crm-public form.CRM_Contribute_Form_Contribution #crm-submit-buttons,
#crm-container.crm-public form.CRM_Contribute_Form_Contribution_Main .crm-submit-buttons,
#crm-container.crm-public form.CRM_Contribute_Form_Contribution_Main #crm-submit-buttons {
  display: flex;
  width: 100%;
  border-top: 1px solid var(--solas-border);
  margin-top: 24px;
  padding-top: 16px;
}

#crm-container.crm-public .crm-section .description,
#crm-container.crm-public .help {
  color: var(--solas-muted);
}

/* Forced-recurring notice ([x] I want to contribute this amount every month).
   Only targets the frozen/non-interactive variant (crm-frozen-field), where the
   is_recur value is already fixed via a hidden input, so hiding it changes
   nothing about what gets submitted. A genuine interactive recurring checkbox
   (no crm-frozen-field) is left alone. */
#crm-container.crm-public .crm-section.is_recur-section:has(.crm-frozen-field) {
  display: none;
}

/* Hide optional QR helper floaters if they are injected into page DOM. */
.open-qr-code,
.open_qr_code,
#open-qr-code,
#open_qr_code,
[aria-label='Open Qr Code'],
[title='Open Qr Code'] {
  display: none;
}

/* QR extension supplies its own button padding, so retain this targeted override. */
.qr_open_popup button,
#qr_open_popup button {
  padding: 2px 10px !important;
}