/* ==========================================================================
   NAHMS theme
   --------------------------------------------------------------------------
   Colours are taken from the North American HMS public website (logo, nav
   bar and phone links). To restyle the site, edit the tokens in section 1
   only; sections 2 and 3 read from them.
   Loaded after bootstrap.min.css and before site.css.
   ========================================================================== */

/* 1. Brand tokens ---------------------------------------------------------- */
:root {
  /* Core palette */
  --nahms-navy: #0b3a63;        /* "North American" wordmark, nav text, headings */
  --nahms-blue: #0b6bb8;        /* "HMS" wordmark - primary actions and links */
  --nahms-blue-dark: #08548f;   /* hover / pressed state of the primary blue */
  --nahms-sky: #2ea3f2;         /* phone-number blue - accents only (too light for body text) */
  --nahms-mist: #dbeef7;        /* nav pill bar background */
  --nahms-mist-dark: #c3e1f0;   /* nav hover / active pill */
  --nahms-gray: #6c7378;        /* secondary text ("Toll Free" label grey) */
  --nahms-band: #ebebeb;        /* light grey band under the site header */

  /* Surfaces and text */
  --nahms-page-bg: #f6f8fa;
  --nahms-surface: #ffffff;
  --nahms-text: #1f2a35;
  --nahms-border: #dde3e8;

  /* Shape and type */
  --nahms-radius: .5rem;
  --nahms-radius-pill: .75rem;
  --nahms-font: "Open Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --nahms-nav-letter-spacing: .02em;
}

/* 2. Bootstrap mapping ----------------------------------------------------- */
:root {
  --bs-primary: var(--nahms-blue);
  --bs-primary-rgb: 11, 107, 184;            /* keep in step with --nahms-blue */
  --bs-primary-text-emphasis: var(--nahms-blue-dark);
  --bs-primary-bg-subtle: var(--nahms-mist);
  --bs-primary-border-subtle: var(--nahms-mist-dark);
  --bs-info: var(--nahms-sky);
  --bs-info-rgb: 46, 163, 242;               /* keep in step with --nahms-sky */

  --bs-body-font-family: var(--nahms-font);
  --bs-body-color: var(--nahms-text);
  --bs-body-bg: var(--nahms-page-bg);
  --bs-secondary-color: var(--nahms-gray);
  --bs-border-color: var(--nahms-border);
  --bs-border-radius: var(--nahms-radius);
  --bs-emphasis-color: var(--nahms-navy);

  --bs-link-color: var(--nahms-blue);
  --bs-link-color-rgb: 11, 107, 184;
  --bs-link-hover-color: var(--nahms-blue-dark);
  --bs-link-hover-color-rgb: 8, 84, 143;

  --bs-focus-ring-color: rgba(46, 163, 242, .35);
}

.btn-primary {
  --bs-btn-bg: var(--nahms-blue);
  --bs-btn-border-color: var(--nahms-blue);
  --bs-btn-hover-bg: var(--nahms-blue-dark);
  --bs-btn-hover-border-color: var(--nahms-blue-dark);
  --bs-btn-active-bg: var(--nahms-blue-dark);
  --bs-btn-active-border-color: var(--nahms-blue-dark);
  --bs-btn-disabled-bg: var(--nahms-blue);
  --bs-btn-disabled-border-color: var(--nahms-blue);
  --bs-btn-focus-shadow-rgb: 46, 163, 242;
}

.btn-outline-primary {
  --bs-btn-color: var(--nahms-blue);
  --bs-btn-border-color: var(--nahms-blue);
  --bs-btn-hover-bg: var(--nahms-blue);
  --bs-btn-hover-border-color: var(--nahms-blue);
  --bs-btn-active-bg: var(--nahms-blue-dark);
  --bs-btn-active-border-color: var(--nahms-blue-dark);
  --bs-btn-disabled-color: var(--nahms-blue);
  --bs-btn-disabled-border-color: var(--nahms-blue);
  --bs-btn-focus-shadow-rgb: 46, 163, 242;
}

.btn-link {
  --bs-btn-color: var(--nahms-blue);
  --bs-btn-hover-color: var(--nahms-blue-dark);
  --bs-btn-active-color: var(--nahms-blue-dark);
}

.dropdown-menu {
  --bs-dropdown-link-active-bg: var(--nahms-blue);
  --bs-dropdown-link-hover-bg: var(--nahms-mist);
  --bs-dropdown-border-color: var(--nahms-border);
}

.nav-pills {
  --bs-nav-pills-link-active-bg: var(--nahms-blue);
}

.pagination {
  --bs-pagination-color: var(--nahms-blue);
  --bs-pagination-active-bg: var(--nahms-blue);
  --bs-pagination-active-border-color: var(--nahms-blue);
}

/* Bootstrap hard-codes its own blue for these */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--nahms-sky);
}

.form-check-input:checked {
  background-color: var(--nahms-blue);
  border-color: var(--nahms-blue);
}

/* 3. Site components ------------------------------------------------------- */
body {
  background-color: var(--bs-body-bg);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--nahms-navy);
  font-weight: 700;
}

/* Header: white strip with the light-blue pill nav bar, as on the NAHMS site */
.nahms-header {
  background: var(--nahms-surface);
  border-bottom: 6px solid var(--nahms-band);
  padding: .75rem 0;
  margin-bottom: 1.25rem;
}

.nahms-header .navbar {
  background: var(--nahms-mist);
  border-radius: var(--nahms-radius-pill);
  padding: .25rem .75rem;
  --bs-navbar-color: var(--nahms-navy);
  --bs-navbar-hover-color: var(--nahms-blue);
  --bs-navbar-active-color: var(--nahms-blue);
  --bs-navbar-brand-color: var(--nahms-navy);
  --bs-navbar-brand-hover-color: var(--nahms-navy);
}

.nahms-header .navbar .nav-link {
  font-weight: 600;
  font-size: .925rem;
  letter-spacing: var(--nahms-nav-letter-spacing);
  border-radius: var(--nahms-radius);
  padding-left: .65rem;
  padding-right: .65rem;
}

.nahms-header .navbar .nav-link:hover,
.nahms-header .navbar .nav-link.show {
  background: var(--nahms-mist-dark);
}

.nahms-header .navbar-text {
  color: var(--nahms-gray);
}

/* Two-tone wordmark: navy "NAHMS", blue "Regulatory" */
.nahms-brand {
  font-size: 1.15rem;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.nahms-brand-primary {
  color: var(--nahms-navy);
  font-weight: 400;
}

.nahms-brand-accent {
  color: var(--nahms-blue);
  font-weight: 700;
}

.card {
  --bs-card-border-color: var(--nahms-border);
  --bs-card-cap-bg: var(--nahms-mist);
  box-shadow: 0 1px 2px rgba(11, 58, 99, .05);
}

.table {
  --bs-table-bg: var(--nahms-surface);
}

.table > thead th {
  color: var(--nahms-navy);
  font-weight: 600;
  border-bottom-color: var(--nahms-mist-dark);
}

.footer {
  background: var(--nahms-surface);
  color: var(--nahms-gray);
}