/* ==========================================================================
   Bootstrap 5 compatibility shim for the customer-facing site.
   Loads AFTER Bootstrap 5 and BEFORE the theme CSS files.

   Purpose: the client asked for a Bootstrap-version upgrade with NO visual
   change. Bootstrap 5's base styles (root font-size, container widths,
   headings, links, form controls) differ from the Bootstrap 3 this theme
   was built against, so this file re-applies the old Bootstrap 3 values on
   top of Bootstrap 5. Values below were read directly out of the previous
   theme/css/bootstrap.min.css (v3.3.7) — do not "clean these up" to modern
   defaults without checking a screenshot diff first (see
   tools/visual-regression/).
   ========================================================================== */

/* BS3's whole px scale assumed a 10px root (its own rem usage was minimal,
   but this keeps BS5's rem-based spacing/utilities scaling down to match
   BS3-era values instead of modern 16px-root sizing). */
html {
  font-size: 10px;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
}

/* BS5 underlines links by default; BS3 only underlined on hover. */
a {
  color: #337ab7;
  text-decoration: none;
}
a:hover,
a:focus {
  color: #23527c;
  text-decoration: underline;
}

h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 {
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1, .h1, h2, .h2, h3, .h3 { margin-top: 20px; margin-bottom: 10px; }
h4, .h4, h5, .h5, h6, .h6 { margin-top: 10px; margin-bottom: 10px; }
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 18px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }

p {
  margin: 0 0 10px;
}

small, .small {
  font-size: 85%;
}

label {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  font-weight: 700;
}

hr {
  box-sizing: content-box;
  height: 0;
}

/* BS5 added a 1320px tier at 1400px+ and shifted container widths down
   (540/720/960/1140). Pin back to BS3's three tiers only. */
.container {
  width: auto;
}
@media (min-width: 768px) {
  .container { width: 750px; }
}
@media (min-width: 992px) {
  .container { width: 970px; }
}
@media (min-width: 1200px) {
  .container { width: 1170px; }
}
@media (min-width: 1400px) {
  .container { width: 1170px; }
}

/* BS3-sized form controls and buttons (BS5's are taller/larger by default).
   Scoped narrowly since only a handful of customer views use these classes. */
.form-control {
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

.btn {
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  border-radius: 4px;
}

.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}