/* ==========================================================================
   MunroSpeakUp theme - strictly monochrome (white / grey / black, no colour).

   IMPORTANT: overriding --bs-primary alone is NOT enough. Bootstrap 5.3 compiles
   its blue (#0d6efd) as literal values inside .btn-primary, .btn-outline-primary
   and the form focus styles - those rules never read --bs-primary. Every one of
   them therefore has to be overridden explicitly further down this file.
   ========================================================================== */

:root {
  /* Greyscale ramp - the only colours used anywhere in the app. */
  --msu-white: #ffffff;
  --msu-grey-50: #fafafa;
  --msu-grey-100: #f5f5f5;
  --msu-grey-200: #ebebeb;
  --msu-grey-300: #e0e0e0;
  --msu-grey-400: #c7c7c7;
  --msu-grey-600: #5f5f5f;
  --msu-grey-800: #333333;
  --msu-grey-900: #1a1a1a;
  --msu-black: #000000;

  /* Bootstrap variables that ARE honoured at runtime. */
  --bs-primary: #1a1a1a;
  --bs-primary-rgb: 26, 26, 26;
  --bs-primary-text-emphasis: #1a1a1a;
  --bs-link-color: #1a1a1a;
  --bs-link-color-rgb: 26, 26, 26;
  --bs-link-hover-color: #000000;
  --bs-link-hover-color-rgb: 0, 0, 0;
  --bs-body-color: #1a1a1a;
  --bs-body-bg: #f5f5f5;
  --bs-border-color: #e0e0e0;
  --bs-secondary-color: #5f5f5f;
  /* Bootstrap's neutral utilities (.bg-light, .text-bg-light, .bg-body-tertiary) ship a faintly blue
     grey. Repointed at the greyscale ramp so those classes can be used freely without going off-theme. */
  --bs-light: #f5f5f5;
  --bs-light-rgb: 245, 245, 245;
  --bs-secondary-bg: #ebebeb;
  --bs-tertiary-bg: #f5f5f5;
  --bs-focus-ring-color: rgba(26, 26, 26, 0.25);
  --bs-font-sans-serif: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --msu-text-muted: #5f5f5f;
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
  background-color: var(--msu-grey-100);
  color: var(--msu-grey-900);
}

/* --------------------------------------------------------------------------
   Bootstrap component overrides - these replace hardcoded blue.
   -------------------------------------------------------------------------- */

.btn-primary {
  --bs-btn-color: var(--msu-white);
  --bs-btn-bg: var(--msu-grey-900);
  --bs-btn-border-color: var(--msu-grey-900);
  --bs-btn-hover-color: var(--msu-white);
  --bs-btn-hover-bg: var(--msu-black);
  --bs-btn-hover-border-color: var(--msu-black);
  --bs-btn-focus-shadow-rgb: 26, 26, 26;
  --bs-btn-active-color: var(--msu-white);
  --bs-btn-active-bg: var(--msu-black);
  --bs-btn-active-border-color: var(--msu-black);
  --bs-btn-disabled-color: var(--msu-white);
  --bs-btn-disabled-bg: var(--msu-grey-400);
  --bs-btn-disabled-border-color: var(--msu-grey-400);
}

.btn-outline-primary {
  --bs-btn-color: var(--msu-grey-900);
  --bs-btn-border-color: var(--msu-grey-400);
  --bs-btn-hover-color: var(--msu-white);
  --bs-btn-hover-bg: var(--msu-grey-800);
  --bs-btn-hover-border-color: var(--msu-grey-800);
  --bs-btn-focus-shadow-rgb: 26, 26, 26;
  --bs-btn-active-color: var(--msu-white);
  --bs-btn-active-bg: var(--msu-grey-900);
  --bs-btn-active-border-color: var(--msu-grey-900);
  --bs-btn-disabled-color: var(--msu-grey-600);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--msu-grey-300);
}

.btn-outline-secondary {
  --bs-btn-color: var(--msu-grey-800);
  --bs-btn-border-color: var(--msu-grey-400);
  --bs-btn-hover-color: var(--msu-white);
  --bs-btn-hover-bg: var(--msu-grey-800);
  --bs-btn-hover-border-color: var(--msu-grey-800);
  --bs-btn-focus-shadow-rgb: 26, 26, 26;
  --bs-btn-active-color: var(--msu-white);
  --bs-btn-active-bg: var(--msu-grey-900);
  --bs-btn-active-border-color: var(--msu-grey-900);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--msu-grey-600);
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(26, 26, 26, 0.15);
}

.form-check-input:checked {
  background-color: var(--msu-grey-900);
  border-color: var(--msu-grey-900);
}

.form-check-input:focus {
  border-color: var(--msu-grey-600);
  box-shadow: 0 0 0 0.2rem rgba(26, 26, 26, 0.15);
}

.btn:focus-visible,
.btn-check:focus-visible + .btn {
  box-shadow: 0 0 0 0.2rem rgba(26, 26, 26, 0.25);
}

/* Bootstrap hardcodes its blue for the selected dropdown item, and declares it on .dropdown-menu -
   so it has to be overridden there, not on :root, or the component-level value wins. */
.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--msu-grey-900);
  --bs-dropdown-link-active-color: var(--msu-white);
  --bs-dropdown-link-hover-bg: var(--msu-grey-100);
}

/* Searchable country dropdown (built in Concern.cshtml from the plain select).
   The toggle carries .form-select, so it inherits the caret and field styling for free. */
.msu-combo-list {
  max-height: 15rem;
  overflow-y: auto;
}

/* Validation text. Kept monochrome rather than red, so weight and size carry the
   emphasis instead of hue - the message wording states the problem either way. */
.text-danger {
  color: var(--msu-grey-900) !important;
  font-weight: 600;
}

/* The class jQuery validation puts on a field that failed. Without colour to lean on,
   a darker, thicker border is what marks the offending input. */
.input-validation-error {
  border-color: var(--msu-grey-900);
  border-width: 2px;
}

/* --------------------------------------------------------------------------
   Page shell
   -------------------------------------------------------------------------- */

/* One centered column, so every page reads as a single focused form rather than
   a multi-section site. */
.msu-shell {
  max-width: 720px;
  margin: 0 auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.msu-panel {
  background-color: var(--msu-white);
  border: 1px solid var(--msu-grey-300);
  border-radius: 0.5rem;
  padding: 2rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

@media (max-width: 575.98px) {
  .msu-panel {
    padding: 1.5rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
}

.msu-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--msu-text-muted);
  margin-bottom: 0.5rem;
}

.msu-section-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--msu-grey-900);
  border-bottom: 1px solid var(--msu-grey-300);
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

.msu-section-title:not(:first-child) {
  margin-top: 2rem;
}

.msu-footer {
  border-top: 1px solid var(--msu-grey-300);
  color: var(--msu-text-muted);
  font-size: 0.8125rem;
  text-align: center;
  padding: 1.5rem 0 2.5rem;
}

/* ASP.NET Core's validation summary tag helper always renders its element; these two
   classes are what it switches between, so the empty/valid state must stay invisible. */
.validation-summary-valid {
  display: none;
}

/* Monochrome alert: the heavy left bar and bold text do the work colour normally would. */
.validation-summary-errors {
  background-color: var(--msu-grey-100);
  border: 1px solid var(--msu-grey-300);
  border-left: 4px solid var(--msu-grey-900);
  color: var(--msu-grey-900);
  font-weight: 600;
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
}

.validation-summary-errors ul {
  margin-bottom: 0;
  padding-left: 1.1rem;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Spam honeypot field - kept off-screen, never shown to real visitors. */
.msu-honeypot {
  position: absolute;
  left: -10000px;
  top: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}