/************************
 Overrides
 Rules moved from the "load styles last" custom block.
 This file loads after every other theme stylesheet (weight 100 in
 tdhcore5.libraries.yml), so it keeps the same "wins last" behaviour
 without needing a block.

 Clean-up applied during the move (no visual change intended):
 - Removed the Roboto @import and the UniversCondensedBold / UniversBody
   @font-face rules: every font-family that used them was commented out,
   so they were downloading fonts nothing used.
 - Removed rules that only contained commented-out declarations.
 - Merged duplicate rules (h1.page-header x3, the yellow block x2,
   .mobile mega menu links x2), keeping the values that won before.
 - Dropped declarations that a later !important rule always overrode.
 - "section.block-views" becomes ".block-views": Bootstrap 3 wrapped blocks
   in <section>, Bootstrap5 uses <div>.
************************/

/* ---------- Base ---------- */

html body {
  font-size: 17px;
  color: #000;
  text-shadow: none;
  font-weight: 400;
  line-height: 160% !important;
  max-width: 1900px !important;
  margin: 0 auto !important;
}

html body a,
a:visited {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

html body a:hover {
  color: #577590;
  text-decoration: none;
}

h1, h2, h3, h4, h5 {
  color: #000;
}

html .region-content .block-views h2,
html h2,
.block-block-content7942b144-135d-4179-aca5-09e6edc98bd6 h2 {
  font-weight: normal;
  color: #000;
}

svg.ext {
  display: none;
}

/* ---------- Header ---------- */

html header {
  position: unset !important;
  top: unset !important;
  z-index: 30;
  width: 100%;
  background-color: white;
  padding-top: 5px;
  height: 80px;
  max-width: 1900px !important;
}

html .mobile header {
  /* Was "height: auto important;" (missing "!"), so browsers ignored it and
     the mobile header stayed 80px high, too short for the top menu plus the
     logo. Fixed: the mobile header now grows with its content. */
  height: auto !important;
  padding-bottom: 30px !important;
}

/* The block styles hid every top menu link on mobile except the fifth.
   The menu has three links, so nothing showed. Removed: all top menu links
   (careers, contact us, search) now show on mobile. */

.mobile #block-topmenu .field--type-text-with-summary {
  margin-left: 0% !important;
  margin-right: 8% !important;
}

#block-tdhcore-socialside img {
  width: 22px !important;
}

/* The block body uses Bootstrap 5 classes (d-flex flex-column). Under
   Bootstrap 3 they did nothing and the icons sat in a line; under
   Bootstrap 5 flex-column stacks them. Put them back in a row. Bootstrap's
   utility classes use !important, so this has to as well. */
#block-tdhcore-socialside .social-icon {
  flex-direction: row !important;
  justify-content: center;
  gap: 1.5rem;
}

#block-addtoanybuttons {
  display: none;
}

/* ---------- Mega Menu ---------- */

html .we-mega-menu-submenu {
  border-bottom: none !important;
}

.we-mega-menu-submenu {
  width: unset !important;
}

@media only screen and (min-width: 970px) {
  .we-mega-menu-submenu {
    box-shadow: none !important;
    border: none;
    padding-top: 0;
    padding-bottom: 2em;
    margin-left: -2px;
    margin-right: unset;
  }
}

.mobile .we-mega-menu-submenu .we-mega-menu-li a {
  background: none !important;
  color: #fff !important;
  font-weight: 300 !important;
}

/* ---------- Page titles ---------- */

html h1.page-header {
  font-size: 4em;
  color: #000;
  font-weight: normal;
  border-bottom: none;
}

html .mobile h1.page-header {
  font-size: 2em;
  margin-top: 2em;
  margin-bottom: 2em;
}

h1.page-header.header-banner,
.page-node-type-programme h1.page-header.header-banner {
  color: #fff;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 7%;
  padding-right: 7%;
  padding-top: 2em;
  padding-bottom: 6em;
  font-size: 4em;
}

.mobile h1.page-header.header-banner,
.page-node-type-programme.mobile h1.page-header.header-banner {
  color: #fff;
  font-size: 3em;
}

/* ---------- Layout ---------- */

html body .main-container {
  padding-top: 0 !important;
}

/* Was 70px, from when the header was fixed over the page. The header now
   takes up its own space, so the padding only left a white gap above the
   homepage banner on mobile. */
html body.path-frontpage.mobile .main-container {
  padding-top: 0 !important;
  clear: both;
}

.region-pre-footer {
  background-image: none !important;
  background: #fff !important;
}

/* Yellow call-out blocks */
.block-block-content7942b144-135d-4179-aca5-09e6edc98bd6 {
  background-image: none !important;
  background-color: #ffbc6b;
  padding-top: 3em;
  margin-top: 4em !important;
  clear: both !important;
  padding-bottom: 4em !important;
  margin-bottom: 4em !important;
}

#block-toticopiiiaudreptullaocopilarieeatatdesimplu {
  background-color: #ffbc6b !important;
  margin-bottom: 2em !important;
  color: #000 !important;
}

/* ---------- Views and listings ---------- */

.region-content .block-views img {
  border-top: none !important;
}

html .views-field-title {
  font-size: 1.5em;
}

.views-field-field-event-start {
  color: #666 !important;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
}

/* ---------- Publications ---------- */

article.publication .file-link a {
  width: auto;
  display: inline-block;
  background-color: #304860 !important;
  color: #fff;
  padding: 0.8em 2em;
  font-weight: 600;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  border-radius: 30px;
}

article.publication .file-link a:hover {
  background-color: #000 !important;
  color: #fff;
}

/* ---------- Homepage slider ---------- */

.slick-slide img {
  filter: brightness(70%);
}

html body .field--name-field-paragraph-slide-header {
  position: absolute !important;
  bottom: 10% !important;
  left: 5% !important;
  top: unset !important;
  font-size: 4.7em !important;
  line-height: 120% !important;
  margin-right: 5% !important;
}

html body.tablet .field--name-field-paragraph-slide-header {
  line-height: 100% !important;
  font-size: 3em !important;
}

html body.mobile .field--name-field-paragraph-slide-header {
  line-height: 100% !important;
  font-size: 2em !important;
}

html body.mobile .paragraph--type--tdh-slide {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 549px) {
  body.mobile .paragraph--type--tdh-slide,
  body.mobile .paragraph--type--tdh-slideshow {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.field--name-field-paragraph-slide-link a.btn-primary {
  border: none !important;
  color: #161311 !important;
  border-radius: 34px !important;
  padding: 10px 30px;
  padding-bottom: 5px !important;
  margin-top: 40px;
  background-color: #fff !important;
  display: inline-block;
  font-size: 1.7em;
  font-weight: 300 !important;
  line-height: 150%;
}

/* Slide with paragraph ID 229 */
.paragraph--id--229 .paragraph--type--tdh-slide {
  color: white;
  text-shadow: none !important;
}

.paragraph--id--229 .field--name-field-paragraph-slide-header {
  position: absolute !important;
  bottom: 30% !important;
  left: 5% !important;
  top: unset !important;
  font-size: 4.7em !important;
  line-height: 120% !important;
  margin-right: 5% !important;
}

html body.mobile .paragraph--id--229 .field--name-field-paragraph-slide-header {
  line-height: 100% !important;
  font-size: 2em !important;
}

.paragraph--id--229 .field--name-field-paragraph-slide-link {
  position: absolute;
  top: unset !important;
  bottom: 10% !important;
  left: 5% !important;
  color: #fff;
  display: inline-block;
}

.paragraph--id--229 .field--name-field-paragraph-slide-link a.btn:hover {
  background-color: #161311 !important;
  color: #fff !important;
}

/* The .slideHead / .slideDesc / .slideLink rules below only apply if the
   slide rewrite in js/style-overrides.js is enabled (it has never run on the
   live site, see the note in that file). Kept so that switching it on looks
   as intended. */
html .slideDesc {
  display: none !important;
}

html body .slideLink {
  position: relative;
  color: #000 !important;
  font-size: 0.5em;
  display: inline-block;
  padding: 10px 30px;
  padding-bottom: 5px !important;
  border: unset !important;
  margin-top: 40px;
  line-height: 150%;
  border-radius: 34px;
  background-color: #fff !important;
}

html body.mobile .slideLink {
  margin-top: 15px !important;
  padding: 5px 20px !important;
}

html body .slideLink a {
  color: #161311 !important;
}

html body .slideLink:hover,
html body .slideLink a:hover,
html body .slideLink:hover a {
  background-color: #161311 !important;
  color: #fff !important;
}

html body.mobile .slideLink a.btn-primary {
  margin-top: 15px !important;
  padding: 5px 20px !important;
  font-size: 0.7em;
}

/* ---------- Circle image style ---------- */

/* Images in the "Circle image" style (circle_i) are cropped square by the
   image style, then made round here. This used to be done by the Imagick
   "rounded corners" effect, which needs the Imagick toolkit, while the
   smart-crop effect in the same style needs GD. CSS does it with either. */
img.image-style-circle-i {
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Homepage banner (slideshow) hidden on mobile, as on live. Uses a media
   query rather than the .mobile class, which style-overrides.js only sets
   when the page loads. 777px matches that class's breakpoint. Delete this
   rule to show the banner on mobile. */
@media (max-width: 777px) {
  .path-frontpage .paragraph--type--tdh-slideshow {
    display: none !important;
  }
}

/* ---------- Staff profile pop-up ---------- */

/* paragraph-styles.css styles the pop-up photo as
   .field--name-field-paragraph-profile-picture (35% column, 220px circle),
   but the photo now comes from the media field
   field--name-field-profile-picture-media, so those rules never applied.
   Bootstrap 5 also gives every image .img-fluid, which style.css sets to
   width: 100%, so the photo filled the pop-up. Same rules, media field. */
.featherlight .field--name-field-profile-picture-media {
  width: 35%;
  margin: 0;
  text-align: center;
}

.featherlight .field--name-field-profile-picture-media img {
  display: block;
  width: auto;
  max-width: 220px;
  height: auto;
  margin: 0 auto;
  padding-top: 1em;
  border-radius: 100%;
}

body.mobile .featherlight .field--name-field-profile-picture-media {
  width: 100%;
}

/* ---------- Cookie banner ---------- */

/* The message and the Accept / No thanks buttons are floated side by side
   inside an inline-block box, so both sat at the top and the shorter
   buttons (31px against the message's 55px) left a gap below them.
   Measured at 1512px. Make the box a flex row instead, so the buttons are
   centred vertically against the message. It keeps its width and stays
   centred in the banner. */
#sliding-popup .popup-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: auto;
  margin-right: auto;
  padding-top: 1em;
  padding-bottom: 1em;
}

#sliding-popup #popup-text,
#sliding-popup #popup-buttons {
  float: none;
  margin-top: 0;
  margin-bottom: 0;
}

#sliding-popup #popup-text {
  flex: 1 1 auto;
}

#sliding-popup #popup-buttons {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

/* Stack the message above the buttons on narrow screens. */
@media (max-width: 767px) {
  #sliding-popup .popup-content {
    flex-direction: column;
    align-items: stretch;
  }

  #sliding-popup #popup-buttons {
    justify-content: center;
    margin-top: 0.5em;
  }
}

/* ---------- View filters ---------- */

/* Exposed filters on one line: Keyword, Year, then the Search button.
   Drupal's .form--inline floats each field but not the button's wrapper
   (.form-actions), so under Bootstrap 5 the button dropped onto its own
   line. A flex row keeps them together and lines the button up with the
   bottom of the inputs. Wraps onto further lines on narrow screens. */
.view-filters .form--inline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 1em;
}

.view-filters .form--inline .form-item,
.view-filters .form--inline .form-actions {
  float: none;
  margin-top: 0;
  margin-bottom: 1em;
}

/* The clearfix ::after would otherwise take up a slot in the row. */
.view-filters .form--inline.clearfix::after {
  display: none;
}

/* ---------- Vacancies ---------- */

/* Each vacancy row has a floated orange label (style.css). Make every row
   contain its label, so a two-line label cannot push into the next row.
   Bootstrap 3 field wrappers did this; Bootstrap 5 ones do not. */
.page-node-type-vacancy .content div.field::after {
  content: "";
  display: table;
  clear: both;
}