/* OMH organizational form - brand theme layered over Bootstrap 5.
   Loaded AFTER bootstrap + select2 so these rules win. Palette taken from the
   OMH "MentalHealthCareers" site: aubergine purple, gold accent, lavender bg. */

:root {
  --omh-primary:      #3b2a52;  /* aubergine purple - header / buttons / headings */
  --omh-primary-dark: #2c1f3e;  /* hover */
  --omh-accent:       #e8c24c;  /* gold - accents, "Health" wordmark */
  --omh-text:         #2d2640;
  --omh-muted:        #6b6480;
  --omh-border:       #c7c4d2;
  --omh-bg:           #d9d7e2;  /* lavender page background (footer tone) */
  --omh-radius:       6px;
}

body {
  color: var(--omh-text);
  background: var(--omh-bg);
}

/* --- Header ---------------------------------------------------------- */
.site-header {
  background: var(--omh-primary);
  color: #fff;
  padding: 1.25rem 1rem;
  border-bottom: 4px solid var(--omh-accent);
}
.site-header h1 { margin: 0; font-size: 1.35rem; font-weight: 600; }

/* --- Card layout ----------------------------------------------------- */
.form-card {
  max-width: 760px;
  margin: 1.5rem auto;
  padding: 1.75rem;
  background: #fff;
  border: 1px solid var(--omh-border);
  border-radius: var(--omh-radius);
}
h2 { margin-top: 0; color: var(--omh-primary); }
h3 { color: var(--omh-primary-dark); margin-bottom: .25rem; }
.intro { color: var(--omh-muted); }

/* --- Sections -------------------------------------------------------- */
fieldset {
  border: 1px solid var(--omh-border);
  border-radius: var(--omh-radius);
  padding: 1rem 1.25rem 1.25rem;
}
legend {
  float: none;                 /* override Bootstrap reboot legend width:100% */
  width: auto;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--omh-primary);
  padding: .15rem .55rem;
  border-left: 4px solid var(--omh-accent);
}
.section-help { color: var(--omh-muted); font-size: .9rem; }

/* Gold accent on the organization label, matching the section legends. */
.org-label {
  color: var(--omh-primary);
  font-weight: 600;
  padding: .15rem .55rem;
  border-left: 4px solid var(--omh-accent);
}

/* --- Brand recolor of Bootstrap components -------------------------- */
.btn-primary {
  --bs-btn-bg: var(--omh-primary);
  --bs-btn-border-color: var(--omh-primary);
  --bs-btn-hover-bg: var(--omh-primary-dark);
  --bs-btn-hover-border-color: var(--omh-primary-dark);
  --bs-btn-active-bg: var(--omh-primary-dark);
  --bs-btn-active-border-color: var(--omh-primary-dark);
  --bs-btn-focus-shadow-rgb: 59, 42, 82;
}
.form-control:focus,
.form-select:focus {
  border-color: var(--omh-primary);
  box-shadow: 0 0 0 .25rem rgba(59, 42, 82, .2);
}
.form-check-input:checked {
  background-color: var(--omh-primary);
  border-color: var(--omh-primary);
}
.form-check-input:focus {
  border-color: var(--omh-primary);
  box-shadow: 0 0 0 .25rem rgba(59, 42, 82, .2);
}

/* --- Checkbox grids (professions / populations) --------------------- */
/* Each option is a Bootstrap .form-check; lay them out in responsive columns.
   break-inside keeps a checkbox + its label from splitting across columns. */
.check-grid { columns: 2; column-gap: 2rem; }
.check-grid .form-check { break-inside: avoid; }

/* Agreement Yes/No inline. */
.radio-inline { display: flex; gap: 2rem; }

@media (max-width: 560px) {
  .check-grid { columns: 1; }
  .form-card { margin: 0; border-radius: 0; }
}

/* --- Field validation errors ---------------------------------------- */
/* Django renders field errors as <ul class="errorlist">; make them read as a
   clear danger message rather than plain text. */
.errorlist {
  list-style: none;
  margin: .35rem 0 0;
  padding: 0;
  color: var(--bs-danger, #b00020);
  font-size: .875rem;
  font-weight: 600;
}

/* --- Live character counter ----------------------------------------- */
.charcount {
  font-size: .8rem;
  color: var(--omh-muted);
  text-align: right;
  margin-top: .2rem;
}
.charcount--warn { color: var(--bs-danger, #b00020); font-weight: 600; }

/* --- Logo preview (hidden until a file is chosen) ------------------- */
.logo-preview {
  display: block;
  margin-top: .5rem;
  max-width: 200px;
  max-height: 120px;
  border: 1px solid var(--omh-border);
  border-radius: var(--omh-radius);
  padding: .25rem;
  background: #fff;
}
.logo-preview[hidden] { display: none; }   /* beat any display rule */

/* --- select2 (org typeahead) theming -------------------------------- */
.select2-container { width: 100% !important; }
.select2-container--default .select2-selection--single {
  height: auto;
  min-height: calc(1.5em + .75rem + 2px);   /* match Bootstrap .form-control */
  padding: .375rem .25rem;
  border: 1px solid var(--bs-border-color, var(--omh-border));
  border-radius: var(--bs-border-radius, var(--omh-radius));
}
.select2-container--default .select2-selection--single
  .select2-selection__rendered { line-height: 1.6; padding-left: .5rem; color: var(--omh-text); }
.select2-container--default .select2-selection--single
  .select2-selection__arrow { height: 100%; }
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
  border-color: var(--omh-primary);
  box-shadow: 0 0 0 .25rem rgba(59, 42, 82, .2);
}
.select2-dropdown { border-color: var(--omh-primary); }
.select2-container--default
  .select2-results__option--highlighted[aria-selected] {
  background-color: var(--omh-primary);
}