/************************
 Bootstrap 3 compatibility
 The theme CSS was written against Bootstrap 3. These rules restore the
 Bootstrap 3 behaviour it relies on, so the site looks the same on
 Bootstrap 5. Loads before style.css so the theme CSS still wins.
 Remove rules from here as the CSS is rewritten for Bootstrap 5.
************************/

/* Container widths, done the Bootstrap 3 way.
   - Bootstrap 3 sized .container with a fixed width and stopped at 1170px.
     Bootstrap 5 uses max-width and goes up to 1320px.
   - The theme CSS makes some containers full width with
     "width: 100% !important" (.region-content, .region-pre-footer and
     others). That only works against a width, not a max-width, so without
     this those regions stop short and the section background shows beside
     them. */
.container {
  max-width: none;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 576px) {
  .container { max-width: none; }
}
@media (min-width: 768px) {
  .container { width: 750px; max-width: none; }
}
@media (min-width: 992px) {
  .container { width: 970px; max-width: none; }
}
@media (min-width: 1200px) {
  .container { width: 1170px; max-width: none; }
}
@media (min-width: 1400px) {
  .container { max-width: none; }
}

/* Header: Bootstrap 5 makes .navbar and its .container flex rows, which put
   the top menu, logo and Mega Menu side by side. Bootstrap 3 stacked them
   as blocks: top menu row, then logo and menu. */
#navbar.navbar {
  display: block;
  padding: 0;
}

#navbar.navbar > .navbar-header.container {
  display: block;
}

/* Bootstrap 5 only shows .navbar-collapse inside .navbar-expand-*; keep it
   visible on desktop as Bootstrap 3 did from 768px. */
@media (min-width: 768px) {
  #navbar-collapse.collapse {
    display: block !important;
  }
  #navbar .navbar-toggler {
    display: none;
  }
}

/* Bootstrap 5 underlines links by default; Bootstrap 3 did not. */
a {
  text-decoration: none;
}

/* Bootstrap 5 lists inside menus and blocks keep their bullets unless told
   otherwise; Bootstrap 3 navs removed them. */
.region-top-menu ul,
.region-navigation ul {
  list-style: none;
}

/* Grid columns, done the Bootstrap 3 way.
   - Bootstrap 3 gave every col-* class 15px padding on each side, wherever
     it was used. That padding is what spaces out items that use column
     classes outside a .row, such as the masonry views (newspubs) and items
     that style-overrides.js adds col-* classes to.
   - Bootstrap 5 only pads columns that sit directly inside a .row, with a
     12px gutter. Match Bootstrap 3's 30px gutter there too.
   - Bootstrap 5 has no col-xs-*; it is plain col-* now. Define the xs widths
     so markup and views config that still use them keep working. They are
     wrapped in :where() so they carry no specificity, and the col-sm/md/lg
     widths (from Bootstrap's own CSS, loaded earlier) still win at larger
     screen sizes, as in Bootstrap 3. */
.row {
  --bs-gutter-x: 30px;
}

[class*="col-xs-"],
[class*="col-sm-"],
[class*="col-md-"],
[class*="col-lg-"] {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}

:where(.col-xs-1) { flex: 0 0 auto; width: 8.33333%; }
:where(.col-xs-2) { flex: 0 0 auto; width: 16.6667%; }
:where(.col-xs-3) { flex: 0 0 auto; width: 25%; }
:where(.col-xs-4) { flex: 0 0 auto; width: 33.3333%; }
:where(.col-xs-5) { flex: 0 0 auto; width: 41.6667%; }
:where(.col-xs-6) { flex: 0 0 auto; width: 50%; }
:where(.col-xs-7) { flex: 0 0 auto; width: 58.3333%; }
:where(.col-xs-8) { flex: 0 0 auto; width: 66.6667%; }
:where(.col-xs-9) { flex: 0 0 auto; width: 75%; }
:where(.col-xs-10) { flex: 0 0 auto; width: 83.3333%; }
:where(.col-xs-11) { flex: 0 0 auto; width: 91.6667%; }
:where(.col-xs-12) { flex: 0 0 auto; width: 100%; }

/* Mega Menu's mobile button (<a class="navbar-toggle">) draws its three
   lines with <span class="icon-bar">. Mega Menu only colours them; their
   size came from Bootstrap 3, which Bootstrap 5 does not have, so the
   button was invisible. */
.navbar-toggle {
  position: relative;
  float: right;
  width: auto;
  margin: 8px 15px 8px 0;
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
}

.navbar-toggle .icon-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 1px;
}

.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}

/* Colours from Bootstrap 3's .navbar-default, which the old header had.
   Mega Menu colours the bars white, and on mobile the theme makes the menu
   bar white too, so without this the button would still be invisible. */
header .navbar-toggle {
  border-color: #ddd;
}

header .navbar-toggle .icon-bar {
  background-color: #888;
}

header .navbar-toggle:hover,
header .navbar-toggle:focus {
  background-color: #ddd;
}

/* Bootstrap 3 hid the menu button from 768px up. Bootstrap 5 does not know
   Mega Menu's Bootstrap 3 button, so it showed at every width. style.css
   then forces it back on between 768px and 1000px (!important), exactly as
   on live. */
@media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

/* Bootstrap 3 added a "clearfix" class to every block, so a block always
   grew to contain floated content. Bootstrap 5 blocks have no clearfix, so
   blocks with floats inside collapse. On mobile, the menu block (floated
   logo from style-overrides.js plus the floated menu button) collapsed and
   its orange bottom border ran through the logo. */
.block::after {
  content: "";
  display: table;
  clear: both;
}

/* Paragraph grids. style-overrides.js gives grid items Bootstrap column
   classes (facts col-lg-4, projects col-lg-4, people col-lg-4 col-sm-6,
   3-column text col-sm-4). Bootstrap 3 floated columns, so they sat side by
   side even though Drupal wraps each paragraph in a plain <div>. Bootstrap 5
   only lays columns out side by side as direct children of a flex row.
   - Make each grid's .paragraph__column a wrapping flex row.
   - Make the plain wrapper <div>s transparent to layout (display: contents),
     so the column paragraphs inside them become the row's items. Wrappers
     that carry column classes themselves (the people grid) stay as they are.
   The column classes then give the widths: a third each on desktop, full
   width on mobile, as before. Timeline entries hold their two col-6 fields
   (date, description) directly, so they only need the flex row. */
.paragraph--type--tdh-fact-group > .paragraph__column,
.paragraph--type--tdh-project-grid > .paragraph__column,
.paragraph--type--tdh-person-grid > .paragraph__column,
.paragraph--type--tdh-3-column > .paragraph__column,
.paragraph--type--tdh-timeline > .paragraph__column {
  display: flex;
  flex-wrap: wrap;
}

.paragraph--type--tdh-fact-group > .paragraph__column > div:not([class*="col-"]),
.paragraph--type--tdh-project-grid > .paragraph__column > div:not([class*="col-"]),
.paragraph--type--tdh-person-grid > .paragraph__column > div:not([class*="col-"]),
.paragraph--type--tdh-3-column > .paragraph__column > div:not([class*="col-"]) {
  display: contents;
}

/* Bootstrap 3 tabs (Bootstrap Paragraphs 2.x). Bootstrap 5 puts tab padding
   and borders on .nav-link, which this markup does not have, so the tab
   label had no padding or border. These are Bootstrap 3's tab rules; the
   theme's own colours still apply on top. Limited to tabs inside
   paragraphs: Mega Menu also uses .nav-tabs and must not get them. */
.paragraph .nav-tabs > li {
  margin-bottom: -1px;
}

.paragraph .nav-tabs > li > a {
  display: block;
  position: relative;
  margin-right: 2px;
  padding: 10px 15px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.paragraph .nav-tabs > li > a:hover {
  border-color: #eee #eee #ddd;
}

.paragraph .nav-tabs > li.active > a,
.paragraph .nav-tabs > li.active > a:hover,
.paragraph .nav-tabs > li.active > a:focus {
  border: 1px solid #ddd;
  border-bottom-color: transparent;
  cursor: default;
}

/* Bootstrap 3 shows a fading pane with .in; Bootstrap 5 uses .show, and
   hides .fade panes without it. */
.paragraph .tab-pane.fade.in {
  opacity: 1;
}