/*
 * Bootstrap 5 compatibility layer for the UBC theme.
 *
 * The theme was designed on Bootstrap 4.6. Bootstrap 5 changed a few base
 * metrics and dropped some classes that are still emitted by Drupal or by
 * content stored in the database. These rules restore the Bootstrap 4
 * behaviour so the migration is visually neutral. Loaded right after
 * bootstrap.min.css and before the theme stylesheets, so theme rules win.
 */

/* Grid gutters: the theme's Bootstrap 4 build was customised to 24px gutters,
   which is the Bootstrap 5 default, so no gutter override is needed. */

/* Navbar metrics as in BS4: 1rem horizontal padding, no extra container
   padding while collapsed, and an inline-block brand (BS5 leaves it inline,
   which drops its vertical padding and shrinks the header by 10px). */
.navbar {
  --bs-navbar-padding-x: 1rem;
}
.navbar-brand {
  display: inline-block;
}
@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

/* BS5 adds an xxl breakpoint that widens .container to 1320px at >= 1400px. */
@media (min-width: 1400px) {
  .container {
    max-width: 1140px;
  }
}

/* BS4 gave every <label> a bottom margin; BS5 only styles .form-label. */
label {
  margin-bottom: 0.5rem;
}

/* BS5 .form-control sets appearance:none, which hides the native arrow on
   <select class="form-control"> (Drupal's select template). Keep the arrow;
   theme rules that explicitly set appearance:none still override this. */
select.form-control {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

/* Dropped in BS5 but still present in stored webform/content markup. */
.input-group-append,
.input-group-prepend {
  display: flex;
}

/* Card spacing: BS4 1.25rem, BS5 1rem. */
.card {
  --bs-card-spacer-y: 1.25rem;
  --bs-card-spacer-x: 1.25rem;
  --bs-card-cap-padding-y: 0.75rem;
  --bs-card-cap-padding-x: 1.25rem;
}

/* Badge metrics as in BS4. */
.badge {
  --bs-badge-padding-x: 0.4em;
  --bs-badge-padding-y: 0.25em;
  --bs-badge-border-radius: 0.25rem;
}

/* The theme opens navbar dropdowns on hover by toggling .show itself (no
   Popper). BS5 only positions .dropdown-menu when Popper has stamped
   [data-bs-popper]; restore the BS4 default position for that case. */
.dropdown-menu.show:not([data-bs-popper]) {
  top: 100%;
  left: 0;
  margin-top: 0.125rem;
}

/* Columns outside a .row: BS4 padded every .col-* itself, BS5 only pads
   direct children of .row. Slick wraps slides in .slick-track, so slider
   cards lost their 12px gutter. Zero-specificity so any BS5 rule still wins. */
:where(.col, [class^="col-"], [class*=" col-"]) {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}

/* BS5 reboot indents lists by 2rem; BS4 left the browser default (40px). */
ol,
ul {
  padding-left: 40px;
}

/* BS4 gave .form-control a fixed height; BS5 sizes by content, which makes
   <select> two pixels shorter. */
.form-control {
  height: calc(1.5em + 0.75rem + 2px);
}
textarea.form-control,
select.form-control[multiple],
select.form-control[size] {
  height: auto;
}

/* Drupal core puts .form-select on every <select>; in BS5 that is a styled
   component (chevron image, extra right padding). Neutralise it so selects
   render as plain BS4 .form-control did; theme rules still apply on top. */
select.form-select {
  padding: 0.375rem 0.75rem;
  background-image: none;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
}

/* Children of .row without a column class: BS4 left them content-sized and
   unpadded, BS5 makes them full-width padded columns. Keep BS4 behaviour so
   wrappers such as Drupal's .form-actions or slick's .slick-list lay out as
   before. Same specificity as BS5's `.row > *`, declared later, so it wins. */
.row > :where(:not(.col):not([class^="col-"]):not([class*=" col-"])) {
  flex-shrink: 1;
  width: auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

/* Negative margin utilities are disabled in BS5 builds; only this one is used. */
@media (min-width: 992px) {
  .mx-lg-n1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
  }
}

/* BS5 reboot zeroes table-cell borders (border-width: 0), which removes the
   borders of editor-authored tables that rely on the HTML border="" attribute
   (`revert` cannot bring them back: browsers treat attribute hints as author
   styles). Re-create the browser default for bordered tables, and keep captions
   on top as in BS4. */
table {
  caption-side: top;
}
table[border]:not([border="0"]) th,
table[border]:not([border="0"]) td {
  border-width: 1px;
  border-style: inset;
}