/*!
 * bs5-compat.css
 * ---------------------------------------------------------------------------
 * Compatibility layer added when upgrading this theme's core library from
 * Bootstrap 4.1.0 -> Bootstrap 5.3.3 (see the ticd-oas project, which went
 * through the same upgrade first, for the reference approach).
 *
 * Bootstrap 5 dropped a few CSS rules that older markup in this codebase
 * still relies on. Rather than hand-edit every view file that uses these
 * classes, we restore just the handful of declarations actually depended
 * on, scoped narrowly so we don't reintroduce other Bootstrap 4 behavior.
 *
 * Load this AFTER bootstrap.min.css and BEFORE style.css/customize.css so
 * theme overrides still win.
 * ---------------------------------------------------------------------------
 */

/* Bootstrap 4 gave every .form-group a bottom margin; Bootstrap 5 removed
   .form-group entirely in favor of utility classes (mb-3, etc). This app
   uses .form-group across hundreds of view files without also adding
   mb-3, so without this rule form fields collapse together with no
   spacing. */
.form-group {
  margin-bottom: 1rem;
}

/* Bootstrap 5 renamed .close to .btn-close and switched to a background-
   image icon with no visible "x" text. This app's modal close buttons
   still use the old <button class="close"><span>&times;</span></button>
   markup, so restore Bootstrap 4's original .close styling. */
.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}
.close:hover {
  color: #000;
  text-decoration: none;
}
.close:not(:disabled):not(.disabled):hover,
.close:not(:disabled):not(.disabled):focus {
  opacity: .75;
}
button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Bootstrap 5 renamed .float-left/.float-right to .float-start/.float-end
   and dropped the old class names entirely. footer.php (and any other view
   still using the old names) silently loses its float with no CSS error,
   which visibly breaks layouts like the footer's two-column line. */
.float-left {
  float: left !important;
}
.float-right {
  float: right !important;
}

/* Bootstrap 5 added a universal ".row > *" rule (padding + max-width:100%)
   that applies to EVERY direct child of .row, not just .col-* elements
   like in Bootstrap 4. This app's header/footer markup nests a fixed-width
   .container directly inside a .row (e.g. <div class="row"><div
   class="container">...), instead of the usual .container > .row > .col.
   Because ".row > *" and ".container" have equal CSS specificity and
   ".row > *" is declared later in bootstrap.min.css, its "max-width:100%"
   silently wins and strips out .container's max-width/centering entirely,
   stretching it edge-to-edge instead of the centered, capped box Bootstrap
   4 produced. It also adds its own left/right padding on top of
   .container's own, doubling it up. Re-declare .container's original
   Bootstrap 4 breakpoints with a more specific ".row > .container"
   selector so it reliably wins, and reset padding back to 15px each side. */
.row > .container,
.row > .container-sm,
.row > .container-md,
.row > .container-lg,
.row > .container-xl,
.row > .container-xxl {
  width: 100%;
  max-width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}
@media (min-width: 576px) {
  .row > .container, .row > .container-sm { max-width: 540px; }
}
@media (min-width: 768px) {
  .row > .container, .row > .container-md, .row > .container-sm { max-width: 720px; }
}
@media (min-width: 992px) {
  .row > .container, .row > .container-lg, .row > .container-md, .row > .container-sm { max-width: 960px; }
}
@media (min-width: 1200px) {
  .row > .container, .row > .container-lg, .row > .container-md, .row > .container-sm, .row > .container-xl {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
  .row > .container, .row > .container-lg, .row > .container-md, .row > .container-sm, .row > .container-xl, .row > .container-xxl {
    max-width: 1140px; /* Bootstrap 4 had no xxl tier; cap at its widest (xl) value */
  }
}

/* Bootstrap 5 changed the base link style from no-underline (Bootstrap 4's
   default) to underline-by-default. This theme's style.css only strips the
   underline on specific scoped selectors (nav links, buttons-as-links,
   etc), not globally, because it never had to under Bootstrap 4. Restore
   the old global default so plain links across the app don't suddenly
   show an underline. Class-scoped rules in style.css/customize.css still
   win over this since they're more specific than a bare `a` selector. */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}