/* Bootstrap 4 behaviours that Bootstrap 5 dropped, for every page that now runs on a Bootstrap 5 build: the app shell
   (base.html), the legal pages and the account pages. Link it straight after the Bootstrap stylesheet. What only the app
   shell needs (Cosmo 4 sizes, .form-inline, tables, switches) stays in main.css. */

/* Bootstrap 4's reboot put 0.5rem under every <label>. Bootstrap 5 leaves that to .form-label, so the hand-written
   labels (the report filters, the legacy account pages) sat tight against their field. The classes after it are the
   ones Bootstrap 4 reset again; .form-inline's own reset is in main.css, which loads later. */
label {
    margin-bottom: .5rem;
}

.form-check-label,
.col-form-label,
.col-form-label-sm,
.col-form-label-lg,
.input-group-text,
.btn {
    margin-bottom: 0;
}

/* Bootstrap 4 padded every .col-* by 15px a side wherever it sat. Bootstrap 5 only pads the direct children of a .row, so
   a column inside any other wrapper (a page's <main class="col-md-12">, a form's .col-xl-8) lost its inset and sat flush
   against whatever is beside it. `where` keeps the specificity at zero: like Bootstrap 4's rule, it still loses to
   .form-control, .btn, .card-body, the p-* utilities and any project rule. */
:where(:not(.row) > :is(.col, [class^="col-"], [class*=" col-"]):not(.col-form-label, .col-form-label-sm, .col-form-label-lg)) {
    padding-right: .9375rem;
    padding-left: .9375rem;
}

/* Bootstrap 4 left links plain and underlined them on hover; Bootstrap 5.3 underlines every link all the time.
   The component rules below are the ones Bootstrap 4 kept free of the hover underline. */
a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

a:not([href]),
a:not([href]):hover,
.btn:hover,
.btn-group > .btn:hover,
.nav-link:hover,
.nav-link:focus,
.dropdown-item:hover,
.dropdown-item:focus,
.navbar-brand:hover,
.navbar-brand:focus,
.card-link:hover,
.page-link:hover,
a.badge:hover,
a.badge:focus,
.list-group-item-action:hover,
.list-group-item-action:focus {
    text-decoration: none;
}

.btn-link {
    text-decoration: none;
}

.btn-link:hover,
.btn-link:focus {
    text-decoration: underline;
}

/* Bootstrap 5 added an xxl breakpoint that grows .container to 1320px from 1400px; Bootstrap 4 stopped at 1140px, so the
   public legal pages were 180px wider on a large monitor. */
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl {
        max-width: 1140px;
    }
}