/* variables */

:root {
  /* colours */

  --orange: #e1ad12;
  --orange2: #ffc300;
  /* --green: #224d07; */
  --green: #0e6d2a;
  --lightgreen: #d2ebad;
  --white: #f5f5f5;
  /* --white: #FBF7F7; */
  --true-white: #fff;
  --black: #222;
  /* --black: #000; */
  --bronze: #af861c;
  --blue1: #16cdd3;
  --blue2: #248185;
  --pastel-01: #fdf9ec;
  --pastel-02: #fcf3d9;
  --text-muted: #6c757d;
  --black00: rgba(0, 0, 0, 0);
  --black01: rgba(0, 0, 0, 0.05);
  --black02: rgba(0, 0, 0, 0.15);
  --black03: rgba(0, 0, 0, 0.25);
  --black04: rgba(0, 0, 0, 0.35);
  --black05: rgba(0, 0, 0, 0.5);
  --black06: rgba(0, 0, 0, 0.6);
  --black07: rgba(0, 0, 0, 0.7);
  --black08: rgba(0, 0, 0, 0.8);
  --black09: rgba(0, 0, 0, 0.9);
  /*  */
  --white00: rgba(255, 255, 255, 0);
  --white01: rgba(255, 255, 255, 0.05);
  --white02: rgba(255, 255, 255, 0.15);
  --white03: rgba(255, 255, 255, 0.25);
  --white04: rgba(255, 255, 255, 0.35);
  --white05: rgba(255, 255, 255, 0.5);
  --white06: rgba(255, 255, 255, 0.6);
  --white07: rgba(255, 255, 255, 0.7);
  --white08: rgba(255, 255, 255, 0.8);
  --white09: rgba(255, 255, 255, 0.9);

  /* fonts */

  --primaryFont: 'Karla', sans-serif;
  /* --primaryFont: 'Manrope', sans-serif; */
  --headingFont: 'Poppins', sans-serif;
  --secondaryFont: 'Manrope', sans-serif;
  --mottoFont: 'Times New Roman', serif;

  /* transition */

  --transition: 0.3s ease;
  --transition2: 0.5s ease;

  /* design attributes */

  --borderRadius: 16px;

  /* icons (used with css content) */
  --faArrowUp: '\f062';
  --faArrowDown: '\f063';
  --faArrowLeft: '\f060';
  --faArrowRight: '\f061';
  --faChevronUp: '\f077';
  --faChevronDown: '\f078';
  --faChevronLeft: '\f053';
  --faChevronRight: '\f054';
  --faPencil: '\f040';
}

/* html and body */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(100px + 1.05rem);
  /* color-scheme: light dark; */
}

body {
  --pageBackdropColour: #ebece0;
  position: relative;

  background-color: var(--pageBackdropColour);

  color: var(--black);
  font-size: 16px;
  font-weight: 400;
  font-family: var(--primaryFont);
  letter-spacing: calc(-0.02rem + 0.025em);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body[data-dark-mode='true'] {
  --pageBackdropColour: #111;
  color: var(--white);
}

::selection {
  background-color: var(--green);
  color: var(--white);
}

@media (prefers-reduced-motion) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}

/* page top button */

#pageTopBtn {
  --dim: 70px;
  position: fixed;
  inset: auto var(--right, -5rem) var(--bottom, 2.5rem) auto;
  height: var(--dim);
  width: var(--dim);
  z-index: 50;
  transition: var(--transition2);
  box-shadow: 0 0 0 0.5rem var(--pageBackdropColour), 0 9px 6px var(--black04);
}

#pageTopBtn.visible {
  --right: 1.75rem;
}

@media screen and (min-width: 992px) {
  #pageTopBtn {
    --dim: 45px;
  }
}

/* text */

/* --fonts */

.primary-font {
  font-family: var(--primaryFont);
}
.secondary-font {
  font-family: var(--secondaryFont);
}
.heading-font {
  font-family: var(--headingFont);
}
.motto-font {
  font-family: var(--mottoFont);
}

/* --headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--headingFont);
  margin: 0;
}

h1,
h2 {
  font-weight: 600;
}

h1,
.looks-like-an-h1 {
  font-size: clamp(calc(2.2rem + 2px), calc(2.75rem + 0.25vw), 3.5rem);
  letter-spacing: -0.045em;
}

h1 {
  color: var(--green);
}

h2,
.looks-like-an-h2 {
  font-size: clamp(calc(1.75rem - 2px), calc(2rem + 0.25vw), 2.25rem);
  letter-spacing: -1.8px;
}

.looks-like-an-h2.secondary-font,
h2.secondary-font {
  letter-spacing: -0.5px;
}

/* --general */

p,
li {
  letter-spacing: 0;
  line-height: 1.5;
}

strong:not(.secondary-font),
b:not(.secondary-font) {
  font-weight: 600;
}

strong:not(.secondary-font),
b:not(.secondary-font),
.font-weight-medium:not(.secondary-font),
.font-weight-bold:not(.secondary-font),
.font-weight-xbold:not(.secondary-font) {
  letter-spacing: -0.55px;
}

/* --font weights */

.font-weight-thin {
  font-weight: 100;
}
.font-weight-xlight {
  font-weight: 200;
}
.font-weight-light {
  font-weight: 300;
}
.font-weight-normal {
  font-weight: 400;
}
.font-weight-medium {
  font-weight: 500;
}
.font-weight-sbold {
  font-weight: 600;
}
.font-weight-bold {
  font-weight: 700;
}
.font-weight-xbold {
  font-weight: 800;
}

/* --line heights */

.line-height-0 {
  line-height: 0;
}
.line-height-1 {
  line-height: 0.25;
}
.line-height-2 {
  line-height: 0.5;
}
.line-height--2 {
  line-height: 0.75;
}
.line-height-3 {
  line-height: 1;
}
.line-height--3 {
  line-height: 1.25;
}
.line-height-4 {
  line-height: 1.5;
}
.line-height--4 {
  line-height: 1.75;
}
.line-height-5 {
  list-style: 2;
}

/* --font styling */

.italic {
  font-style: italic;
}
.underline {
  text-decoration: underline;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}
.text-transform-0 {
  text-transform: none;
}
.text-justify {
  text-align: justify;
}

/* --colours */

.col-white {
  color: var(--white);
}
.col-black {
  color: var(--black);
}
.col-green {
  color: var(--green);
}
.col-lightgreen {
  color: var(--lightgreen);
}
.col-orange {
  color: var(--orange);
}
.col-orange2 {
  color: var(--orange2);
}
.col-bronze {
  color: var(--bronze);
}
.col-blue1 {
  color: var(--blue1);
}
.col-blue2 {
  color: var(--blue2);
}

body[data-dark-mode='true'] .text-muted {
  color: var(--textMuteCol, #9fa6ac) !important;
}

.note-with-an-asterisk {
  position: relative;
}

.note-with-an-asterisk::before {
  content: '*';
  display: inline-block;
  position: absolute;
  inset: var(--top, 50%) auto auto var(--left, -1ch);
  translate: 0 calc(-50% + 3px);
  line-height: inherit;
  font-weight: 600;
}

/* layout */

#pageContainerInt {
  position: relative;
  scroll-snap-type: y proximity;
}

/* body[data-dark-mode='true'] #pageContainerInt {
  background-color: var(--black);
} */

.after-banner {
  border-radius: var(--borderRadius);
  background-color: var(--pageContainerBg, var(--true-white));
}

body[data-dark-mode='true'] .after-banner {
  --pageContainerBg: transparent;
}

/* --dividers */

hr.divider {
  display: block;
  background-color: var(--dividerBg, var(--black));
  height: 1px;
  opacity: 0.25;
  margin: 2vh 0;
  line-height: 0;
}

/* --dividers naturally inherit bg from their parent's text colour */
/* --this is set via inline styling, hence the use of ! important should you want to manually change them */
hr.divider.black {
  --dividerBg: var(--black) !important;
}
hr.divider.white {
  --dividerBg: var(--white) !important;
}
hr.divider.green {
  --dividerBg: var(--green) !important;
}
hr.divider.bronze {
  --dividerBg: var(--bronze) !important;
}
hr.divider.lightgreen {
  --dividerBg: var(--lightgreen) !important;
}
hr.divider.orange {
  --dividerBg: var(--orange) !important;
}
hr.divider.orange2 {
  --dividerBg: var(--orange2) !important;
}
hr.divider.blue1 {
  --dividerBg: var(--blue1) !important;
}
hr.divider.blue2 {
  --dividerBg: var(--blue2) !important;
}

/* imagery, videos, svgs */

img,
video,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img {
  user-select: none;
  pointer-events: none;
  object-fit: var(--fit, cover);
  object-position: var(--posX, center) var(--posY, center);
}

/* headers, banners */

.banner {
  margin-top: -2vh;
}

.banner h1 {
  line-height: 1;
}

/* --page navigation */

@media screen and (min-width: 1200px) {
  #pageNavigation {
    position: absolute;
    inset: 0 calc(100% + 0.25rem) 0 auto;
  }
  .page-nav--int {
    position: sticky;
    top: var(--top, 20vh);
  }
}

#togglePageNav {
  background-color: transparent;
  font-size: 1.1rem;
  color: var(--black05);
  border-radius: var(--borderRadius);
}

#togglePageNav:not(:focus) {
  box-shadow: none;
}

#togglePageNav:focus {
  background-color: var(--black01);
  box-shadow: none;
}

#togglePageNav::after {
  filter: brightness(0) opacity(0.65);
}

#pageNavList .nav-link {
  padding: 0;
  font-size: 1rem;
  letter-spacing: 0.25px;
  transition: var(--transition);
}

#pageNavList .nav-link:hover {
  text-decoration: underline;
}

@media screen and (max-width: 1199px) {
  .page-nav--int {
    background-color: var(--true-white);
    border-radius: var(--borderRadius);
    padding: 0.5rem 1rem;
  }

  #pageNavList li {
    padding-inline-start: 0.75rem;
  }
}

@media screen and (min-width: 1200px) {
  #togglePageNav {
    margin-left: 1.1rem;
  }

  #togglePageNav span {
    margin-left: auto;
  }

  #togglePageNav::after {
    margin-left: 1ch;
  }

  .page-nav--int {
    width: calc(10vw + 5rem);
  }

  #pageNavList {
    list-style-type: none;
    padding: 0;
  }

  #pageNavList {
    max-height: 50vh;
    overflow-y: auto;
    text-align: right;
  }

  #pageNavList .nav-link {
    width: fit-content;
    padding: 0 0.5rem 0.1rem 0.5rem;
    margin-left: auto;
    border-radius: calc(var(--borderRadius) * 0.6);
  }
}

/* --page highlights */

.page-highlights--int {
  display: flex;
  gap: 1rem;
  flex-direction: column;
}

.phi--btn-wrapper .btn {
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .phi--btn-wrapper .btn .fa {
    display: none;
  }
}

.phi--btn-wrapper {
  gap: 0.75rem 0.5rem;
}

@media screen and (min-width: 1200px) {
  #pageHighlights {
    position: absolute;
    inset: 0 auto 0 calc(100% + 0.25rem);
  }

  .page-highlights--int {
    position: sticky;
    top: var(--top, 20vh);
    min-width: var(--minWidth, calc(200px + 2.5vw));
  }

  .phi--btn-wrapper .btn {
    font-size: 0.85rem;
    width: 100%;
  }
}

/* --cards */

.card {
  background-color: transparent;
  border: none;
}

.card-body {
  padding: unset;
}

.card .card-image {
  display: block;
  aspect-ratio: 3/2;
  border-radius: var(--borderRadius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--black01);
  translate: var(--transX, 0) var(--transY, 0);
  transition: translate var(--transition), box-shadow var(--transition);
  background: url('/assets/img/misc/tree-smallest.jpg') no-repeat 0 / cover;
}

.card.circle-image .card-image {
  display: block;
  --dim: clamp(calc(125px + 1vmax), calc(150px + 0.25rem), 12vw);
  aspect-ratio: 1/1;
  width: var(--dim);
  border-radius: 50%;
  margin-inline: auto;
}

.card .card-img-top {
  border-radius: 0;
  border: none;
  width: 100%;
  height: 100%;
  object-fit: var(--fit, cover);
  object-position: var(--posX, center) var(--posY, center);
  scale: var(--scale, 1);
  transition: scale var(--transition2);
}

.card .card-img-top.object-fit-contain {
  object-fit: contain;
}

.card a.card-image:hover .card-img-top {
  scale: var(--scaleHover, 1.06);
}

.card a.card-image:hover {
  --transY: -0.3rem;
  box-shadow: 0 0.5rem 1.25rem 1px var(--black02);
}

.card .card-title {
  font-family: var(--secondaryFont);
  font-size: calc(1.25rem - 0.25vmin);
  letter-spacing: -0.275px;
}

.card.circle-image .card-title {
  text-align: center;
}

.card-text {
  line-height: 1.3;
  font-size: 0.95rem;
}

.card.card.circle-image .card-text {
  width: calc(50% + 5vh);
  margin-inline: auto;
  text-align: center;
}

/* 
.card.circle-image .card-text {
  text-align: justify;
} */
/* 
@media screen and (min-width: 768px) {
  .card.card.circle-image .card-text {
    width: calc(50% + 5vh);
    margin-inline: auto;
    text-align: center;
  }
} */

.card .btn {
  margin-top: 1rem;
  width: 100%;
  font-weight: 500;
}

/* card with div inside .card-image, that fades away on hover */

.card-image-with-float .card-image {
  position: relative;
}

.card-image-with-float .card-image--float {
  --cardImgFloatBg: var(--pageBackdropColour);
  --cardImgFloatCol: var(--black);
  --offset: 0.5rem;
  position: absolute;
  inset: var(--top, auto) var(--right, var(--offset))
    var(--bottom, var(--offset)) var(--left, auto);
  z-index: 3;
  font-size: 0.775rem;
  background-color: var(--cardImgFloatBg);
  color: var(--cardImgFloatCol);
}

/* for gallery cards */
.card-image-with-float .card-image :not(time).card-image--float {
  --left: var(--offset);
  --right: auto;
}

body[data-dark-mode='true'] .card-image-with-float .card-image--float {
  --cardImgFloatBg: var(--black);
  --cardImgFloatCol: var(--white);
}

@media (hover: hover) {
  .card-image-with-float .card-image:hover .card-image--float {
    --bottom: -2rem;
  }

  .card-image-with-float:has(.card-img-top:not(.main)) .card-img-top {
    position: absolute;
    inset: 0 0 auto 0;
  }

  .card-image-with-float:has(.card-img-top:not(.main)) .card-img-top.main {
    z-index: 3;
  }

  .card-image-with-float:has(.card-img-top:not(.main)) .card-img-top.main,
  .card-image-with-float:has(.card-img-top:not(.main))
    .card-img-top:not(.main) {
    transition: opacity var(--transition2), scale 0.75s ease;
  }

  .card-image-with-float:has(.card-img-top:not(.main))
    .card-image:hover
    .card-img-top.main,
  .card-image-with-float:has(.card-img-top:not(.main))
    .card-image:not(:hover)
    .card-img-top:not(.main) {
    opacity: 0;
  }

  .card-image-with-float:has(.card-img-top:not(.main))
    .card-image:hover
    .card-img-top:not(.main) {
    z-index: 3;
    opacity: 1;
  }
}

/* card aesthetics for scholarships */

body:not([data-dark-mode='true']) [data-scholarship='scholarship'] .card-image {
  --ribbonBg: var(--pageBackdropColour);
  --ribbonColour: var(--black);
  position: relative;
  border-top-left-radius: 0;
  box-shadow: none;
}

[data-scholarship='scholarship'] .card-image::before {
  /* content: '★ Scholarship'; */
  content: 'Scholarship';
  position: absolute;
  z-index: 5;
  inset: 0 auto auto 0;
  color: var(--ribbonColour);
  background-color: var(--ribbonBg);
  padding: 0 0.75rem 0.4rem 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  font-family: var(--secondaryFont);
  border-radius: 0 0 calc(var(--borderRadius) * 0.5) 0;
  box-shadow: 0 0 10px var(--black03);
}

/* links and buttons */

a:not(.btn) {
  /* --bronze: #795E19; */
  /* --bronze: #835E00; */
  color: var(--bronze);
  transition: color var(--transition);
  text-decoration-skip-ink: auto;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-shadow: 0 0 0px var(--orange);
}

#siteNav a,
.card-tags span a,
a.tag {
  text-shadow: none;
}

a:not(.btn):not(:hover) {
  text-decoration: none;
}

a:not(.btn):hover {
  color: var(--green);
}

body[data-dark-mode='true'] a:not(.btn) {
  color: var(--orange2);
}

button {
  border: unset;
  background-color: unset;
  font-family: inherit;
}

.btn,
button {
  display: block;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
  padding: 0.75rem 1rem;
  font-family: var(--secondaryFont);
  line-height: 1;
  width: fit-content;
  border-radius: calc(var(--borderRadius) * 0.6);
  border-width: 2px;
}

button[disabled],
.btn[disabled] {
  --bg: lightgrey;
  background-color: var(--bg);
  border-color: var(--bg);
  color: var(--text-muted);
}

.btn-primary {
  background-color: var(--orange2);
  border-color: var(--orange2);
}

.btn-primary,
.btn-primary:hover,
.btn-primary.dark:hover {
  color: var(--black);
}

.btn-primary.dark {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--orange2);
}

.btn-primary:hover,
.btn-primary.dark:hover {
  background-color: var(--orange);
  border-color: var(--orange);
}

.btn-secondary {
  background-color: var(--lightgreen);
  border-color: var(--lightgreen);
}

.btn-secondary,
.btn-secondary:hover {
  color: var(--black);
}

body:not([data-dark-mode='true']) .btn-secondary:hover {
  background-color: var(--black01);
  border-color: var(--black01);
}

.btn-tertiary {
  border-color: var(--black);
}

.btn-tertiary:hover {
  border-color: var(--black05);
  color: var(--black05);
}

body[data-dark-mode='true'] .btn-tertiary {
  --black: lightgrey;
  background-color: var(--black);
}

body[data-dark-mode='true'] .btn-secondary:hover {
  background-color: var(--lightgreen);
  border-color: var(--lightgreen);
  filter: saturate(0.8) brightness(0.9);
  transition: var(--transition);
}

/* accordion button */

#pageContainerInt .accordion-button::after {
  filter: brightness(0);
}

body[data-dark-mode='true'] #pageContainerInt .accordion-button::after {
  filter: brightness(0) invert(1);
}

/* switch button */

.switch-button {
  --dim: 45px;
  --colour: var(--black04);
  display: block;
  width: calc(var(--dim) * 0.75);
  height: calc(var(--dim) * 0.4);
  border: 2px solid var(--colour);
  padding: 0;
  border-radius: 0.75em;
  position: relative;
  transition: var(--transition);
}

.switch-button::before {
  content: '';
  display: block;
  position: absolute;
  inset: 50% auto auto calc(var(--dim) * 0.075);
  translate: 0 -50.125%;
  height: calc(var(--dim) * 0.2);
  width: calc(var(--dim) * 0.2);
  background-color: var(--colour);
  border-radius: 50%;
  transition: inherit;
}

.switch-button.active {
  --colour: var(--white);
}

.switch-button.active::before {
  translate: calc(var(--dim) * 0.325) -50.125%;
}

/* forms */

.form-control:focus {
  box-shadow: inset 0 0 0 2px var(--boxShadowFocusColour, var(--black));
  outline-color: transparent;
}

input::placeholder,
.form-control::placeholder {
  opacity: 0.6;
}

/* --query form layout */

.query-form label {
  margin-bottom: 0.5rem;
}

.query-form label.required::after {
  content: '*';
  font-weight: 600;
  margin-left: 3px;
}

.form-control {
  border-radius: 0;
  font-size: 0.85rem;
  padding: 0.5em 0.75em;
  border: none;
  border-bottom: 1px solid var(--black03);
  background-color: var(--white);
  transition: var(--transition);
}

select.form-control {
    -webkit-appearance: auto;
    appearance: auto;
    padding: .5rem .75rem .5rem .25rem;
}

.form-control:focus {
  border-color: var(--black);
  box-shadow: inset 6px 0 0 0 var(--black);
  padding-left: 1em;
}

body[data-dark-mode='true'] .form-control:focus {
  box-shadow: inset 6px 0 0 0 var(--black05);
  background-color: #444;
}

body[data-dark-mode='true'] .form-control:focus,
body[data-dark-mode='true'] .form-control:focus::placeholder {
  color: var(--white);
}

body[data-dark-mode='true']
  input[type='search' i]::-webkit-search-cancel-button {
  filter: brightness(0) invert(1);
}

@media screen and (max-width: 991px) {
  #ask-a-question input[type='submit'] {
    width: 100%;
  }
}

/* --modals */

.modal .modal-title {
  font-size: 1.5rem;
}

.modal input[type='submit'] {
  width: 100%;
}

/* --owl carousel restyling */

#pageContainerInt .owl-carousel .owl-nav,
#pageContainerInt .owl-carousel .owl-dots {
  width: fit-content;
  margin: 0.25rem auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

#pageContainerInt .owl-nav button,
#pageContainerInt .owl-carousel button.owl-dot {
  --dim: 0.825rem;
  width: var(--dim);
  height: var(--dim);
  border-radius: 50%;
  background-color: var(--green);
  transition: var(--transition);
}

#pageContainerInt .owl-carousel button.owl-dot:not(.active) {
  opacity: 0.4;
}

#pageContainerInt .owl-nav button {
  --dim: calc(2rem + 5px);
  background-color: var(--lightgreen);
  color: var(--black);
}

#pageContainerInt .owl-nav button > span {
  display: inline-block;
  font-family: var(--secondaryFont);
  font-weight: 700;
  font-size: 1.3125em;
  margin-top: -1px;
}

#pageContainerInt .owl-nav button:hover {
  background-color: var(--bronze);
}

/* bs carousel indicators and buttons */

.carousel-indicators {
  --dim: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  background-color: var(--bg, var(--black07));
  width: var(--width, fit-content);
  padding: 0.75rem 1rem;
  margin-inline: auto;
  border-radius: var(--borderRadius);
}

.carousel-indicators [data-bs-target] {
  width: var(--dim);
  height: var(--dim);
  border-radius: 50%;
  margin: 0;
  border: none;
}

@media screen and (max-width: 991px) {
  .carousel-indicators {
    --dim: 1.75rem;
    gap: 1rem;
    --width: calc(100% - 2rem);
  }
}

.carousel button[class*='carousel-control'] {
  --dim: 60px;
  --iconCenterOffset: 2px;
  background-color: var(--black07);
  opacity: 1;
  transition: var(--transition);
  width: var(--dim);
  height: var(--dim);
  top: var(--top, 50%);
  translate: 0 var(--transY, -50%);
  border-radius: var(--borderRadius);
}

.carousel button.carousel-control-prev span {
  margin-left: calc(var(--iconCenterOffset) * -1);
}

.carousel button.carousel-control-next span {
  margin-left: var(--iconCenterOffset);
}

.carousel button[class*='carousel-control']:hover {
  background-color: var(--orange2);
}

.carousel
  button[class*='carousel-control']:hover
  span[class*='carousel-control'] {
  filter: invert(1);
}

/* -- breadcrumb navigation */

#pageBreadcrumb ul {
  font-size: 0.75rem;
  text-transform: uppercase;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem calc(0.75rem + 3px);
}

#pageBreadcrumb a {
  font-family: var(--secondaryFont);
  letter-spacing: 0.875px;
  margin-right: 0.5rem;
}

/* utilities */

.text-wrap-balance {
  text-wrap: balance;
}

/* --box shadows and borders */

.box-shadow-0 {
  box-shadow: none;
}
.box-shadow--0 {
  box-shadow: none !important;
}
.box-shadow-outline-1 {
  box-shadow: 0 0 0 1px var(--black01);
}

.border-0 {
  border: none;
}
.border--0 {
  border: none !important;
}

/* --object fit */

.object-fit-cover {
  object-fit: cover;
}
.object-fit-contain {
  object-fit: contain;
}

/* --width */

.width-fit-content {
  width: fit-content;
}

@media screen and (min-width: 1400px) {
  .width-xxl-fit-content {
    width: fit-content;
  }
  .width-xxl-100 {
    width: 100%;
  }
  .width-xxl-auto {
    width: auto;
  }
}
@media screen and (min-width: 1200px) {
  .width-xl-fit-content {
    width: fit-content;
  }
  .width-xxl-100 {
    width: 100%;
  }
  .width-xxl-auto {
    width: auto;
  }
}
@media screen and (min-width: 992px) {
  .width-lg-fit-content {
    width: fit-content;
  }
}
@media screen and (min-width: 768px) {
  .width-md-fit-content {
    width: fit-content;
  }
}
@media screen and (min-width: 576px) {
  .width-sm-fit-content {
    width: fit-content;
  }
}
@media screen and (max-width: 575px) {
  .width-xs-fit-content {
    width: fit-content;
  }
}

/* --border-radius */

.border-radius-0 {
  border-radius: 0;
}
.border-radius--0 {
  border-radius: 0 !important;
}
.circle {
  border-radius: 50%;
}

.border-radius {
  border-radius: var(--borderRadius);
}

/* background colours */

.bg-true-white {
  background-color: var(--true-white);
}
.bg-black {
  background-color: var(--black);
}
.bg-green {
  background-color: var(--green);
}
.bg-lightgreen {
  background-color: var(--lightgreen);
}
.bg-orange {
  background-color: var(--orange);
}
.bg-orange2 {
  background-color: var(--orange2);
}
.bg-bronze {
  background-color: var(--bronze);
}
.bg-blue1 {
  background-color: var(--blue1);
}
.bg-blue2 {
  background-color: var(--blue2);
}
.bg-pastel-01 {
  background-color: var(--pastel-01);
}
.bg-pastel-02 {
  background-color: var(--pastel-02);
}
.bg-black-01 {
  background-color: var(--black01);
}
.bg-black-02 {
  background-color: var(--black02);
}
.bg-black-03 {
  background-color: var(--black03);
}
.bg-black-04 {
  background-color: var(--black04);
}
.bg-black-05 {
  background-color: var(--black05);
}
.bg-black-06 {
  background-color: var(--black06);
}
.bg-black-07 {
  background-color: var(--black07);
}
.bg-black-08 {
  background-color: var(--black08);
}
.bg-black-09 {
  background-color: var(--black09);
}
.bg-white-01 {
  background-color: var(--white01);
}
.bg-white-02 {
  background-color: var(--white02);
}
.bg-white-03 {
  background-color: var(--white03);
}
.bg-white-04 {
  background-color: var(--white04);
}
.bg-white-05 {
  background-color: var(--white05);
}
.bg-white-06 {
  background-color: var(--white06);
}
.bg-white-07 {
  background-color: var(--white07);
}
.bg-white-08 {
  background-color: var(--white08);
}
.bg-white-09 {
  background-color: var(--white09);
}

/* modals */

.modal,
.modal * {
  transition: var(--transition2);
}

.modal .modal-header,
.modal .modal-footer {
  border: none;
}

.modal .modal-content {
  overflow: visible;
  border: none;
  border-radius: var(--borderRadius);

}

.modal .modal-footer {
  box-shadow: 0 -3px 1rem var(--black02);
}

.modal .modal-header {
  position: relative;
  padding: 0.5rem 1rem;
  box-shadow: 0 3px 1rem var(--black02);
}

.modal .btn-close {
  --dim: 2.5rem;
  position: absolute;
  inset: 0.5rem -2.5rem auto auto;
  width: var(--dim);
  height: var(--dim);
  background-color: var(--white08);
  opacity: 1;
  transition: var(--transition);
  padding: 0;
}

.modal .btn-close:not(:hover) {
  border-radius: var(--borderRadius);
}

.modal .btn-close:hover {
  --dim: 3.25rem;
  background-color: var(--white);
  border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
}

.modal:has(.btn-close:hover) .modal-content {
border-top-right-radius: 0;
}

.modal .modal-lg .btn-close {
  --dim: 3rem;
  inset: 0.5rem -3.5rem auto auto;
}

.modal .modal-lg .btn-close:hover {
  --dim: 4rem;
}

body[data-dark-mode='true'] .modal-content,
body[data-dark-mode='true'] .modal .btn-close {
  background-color: var(--black);
}

body[data-dark-mode='true'] .modal .btn-close {
  color: var(--white);
  transition: var(--transition), box-shadow var(--transition2);
}

body[data-dark-mode='true'] .modal .btn-close:hover {
  box-shadow: inset 2px 0 0 0 var(--white04);
}

body[data-dark-mode='true'] .modal .btn-close::before {
  content: '\f00d';
  font-family: FontAwesome;
  font-size: 1.5rem;
}

body[data-dark-mode='true'] .modal {
  background-color: var(--black07);
  backdrop-filter: blur(0.5rem);
}

/* filter ui */

#filterSection #reset {
  font-weight: 600;
  width: 100%;
}

@media screen and (min-width: 1200px) {
  #filterSection #reset {
    position: absolute;
    inset: auto 0 -3rem 0;
    z-index: 6;
  }
}

#filterSection legend {
  margin-bottom: 0;
}

#filterSection legend .accordion-button {
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.5rem;
  background-color: transparent;
  color: var(--black);
}

body[data-dark-mode='true'] #filterSection legend .accordion-button {
  color: var(--white);
}

#filterSection legend .accordion-button:hover {
  background-color: var(--black01);
}

#filterSection legend .accordion-button:focus {
  box-shadow: inset 1.1ch 0 0 var(--black), 0 1px 0 var(--black02);
  padding-inline-start: 1.75ch;
}

#filterSection legend:not(:last-of-type) .accordion-button {
  --boxShadowMain: var(--black03);
  box-shadow: inset 0 -1px 0 0 var(--boxShadowMain);
}

#filterSection fieldset {
  background-color: var(--true-white);
  margin-block: 1rem;
  border-radius: var(--borderRadius);
  overflow: hidden;
}

#programmesIndex[data-dark-mode='true'] #filterSection fieldset {
  --true-white: var(--black);
}

#filterSection fieldset .input-group {
  gap: 0.5rem;
  transition: var(--transition);
  padding: 0.25rem 0.5rem;
}

#filterSection .input-group label {
  order: 2;
  font-size: 0.9rem;
  font-family: var(--secondaryFont);
  font-weight: 500;
  letter-spacing: 0.2px;
  flex-grow: 1;
  text-align: left;
}

#filterSection .input-group:has(input:checked) {
  background-color: var(--orange2);
  color: var(--black);
}

#filterSection input[type='date'] {
  display: block;
  width: 100%;
  border-radius: calc(var(--borderRadius) * 0.6);
  border: 1px solid var(--black04);
  padding: 0.5em;
  font-weight: 300;
  font-size: 0.925rem;
}

[data-dark-mode='true'] #filterSection input[type='date'] {
  background-color: var(--black);
  color: var(--white);
  border-color: var(--white04);
}

#currentlySorting {
  display: block;
  transition: var(--transition);
  transition-delay: 0s;
  overflow-y: hidden;
  background-color: var(--orange2);
  color: var(--black);
  font-size: 1.1rem;
  font-family: var(--secondaryFont);
  padding: 0.75em;
  margin: 0 1rem 1rem;
  border-radius: calc(var(--borderRadius) * 0.6);
  line-height: 1;
}

#currentlySorting b {
  font-weight: 700;
}

#currentlySorting:empty {
  clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  margin-block-end: 0;
  padding-block: 0;
}

#currentlySorting:not(:empty) {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

#pageContainerInt:has(.list-for-filtering) h1 {
  transition: var(--transition);
}

#pageContainerInt:has(#currentlySorting:not(:empty)) h1 {
  filter: opacity(0.3);
}

[data-dark-mode='true'] #currentlySorting {
  margin-inline: 0;
  box-shadow: none;
  padding-inline: 0.75em;
  color: var(--black);
  --borderRadius: 0;
}

/* contact bubble section */

.contact-bubble-section .btn-primary {
  --dim: 5rem;
  width: var(--dim);
  height: var(--dim);
  display: grid;
  align-items: center;
  margin-inline: auto;
  transition: background-color var(--transition), box-shadow var(--transition);
}

.contact-bubble-section .btn-primary:hover {
  background-color: var(--black);
  border-color: var(--black);
  color: var(--orange2);
  box-shadow: 0 0 0 0.3rem var(--parentBgColour, var(--pastel-02)),
    0 0 0 0.5rem var(--green);
}

.contact-bubble-section .btn-primary .fa {
  scale: 1;
  rotate: 0deg;
  transition: 1.5s ease, color 0.5s;
}

.contact-bubble-section
  .btn-primary:hover
  .fa:not(
    .fa-envelope,
    .fa-whatsapp,
    .fa-map-marker,
    .fa-credit-card,
    .fa-plus
  ) {
  rotate: calc(360deg + 135deg);
}

.contact-bubble-section .btn-primary:hover .fa-credit-card,
.contact-bubble-section .btn-primary:hover .fa-map-marker {
  rotate: 360deg;
}

.contact-bubble-section .btn-primary:hover .fa:not(.fa-phone) {
  scale: 1.625;
}

.contact-bubble-section .btn-caption {
  font-family: var(--secondaryFont);
}

.contact-bubble-section .btn-caption small {
  letter-spacing: 0.5px;
}

/* pill tags */

.tag-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag-wrapper .tag,
.card-image-with-float .card-image--float {
  display: block;
  font-family: var(--secondaryFont);
  padding: 0.5rem 0.75rem;
  transition: var(--transition);
  border-radius: calc(var(--borderRadius) * 0.6);
}

.tag-wrapper .tag {
  background-color: var(--tagBg, #dfe0d5);
  color: var(--black);
  font-size: 0.85rem;
  height: 0%;
}

.card .tag-wrapper .tag,
.card-image-with-float .card-image--float {
  line-height: 1;
  letter-spacing: -0.25px;
  font-weight: 600;
}

.tag-wrapper a.tag {
  text-decoration: none;
}

body:not([data-dark-mode='true']) .tag-wrapper a.tag:hover {
  --tagBg: var(--orange2);
}

body[data-dark-mode='true'] .tag-wrapper .tag {
  --tagBg: transparent;
  color: var(--white);
  box-shadow: 0 0 0 1px var(--white);
}

body[data-dark-mode='true'] .tag-wrapper a.tag:hover {
  --white: var(--orange2);
}

/* accordions */

.accordion-wrapper {
  border-radius: calc(var(--borderRadius) * 0.6);
  padding: 0.5rem 1rem;
}

body:not([data-dark-mode]) .accordion-wrapper {
  background-color: var(--true-white);
}

body[data-dark-mode] .accordion-wrapper {
  background-color: var(--black);
}

.accordion-wrapper .accordion-button {
  margin-block-end: 0;
  padding: 0 0 0.1rem 0;
  background-color: transparent;
  cursor: pointer;
  box-shadow: none;
  border-radius: inherit;
  color: inherit;
}

body:not([data-dark-mode]) .accordion-wrapper .accordion-button:hover {
  background-color: var(--bgCol, #efe9e9);
}

body[data-dark-mode] .accordion-wrapper .accordion-button:hover {
  background-color: var(--bgCol, var(--white01));
}

/* group of items -- hover on one -- others fade out */

@media (hover: hover) {
  .fade-members-group {
    --opacity: 0.6;
  }

  .fade-members-group:has(.fade-member:hover) .fade-member:not(:hover) {
    filter: opacity(var(--opacity));
  }

  .fade-members-group .fade-member {
    transition: var(--transition2);
  }
}

/* pseudo class button over image upon hover */

.pseudo-button-item .pbi--wrapper {
  --blurAmt: 0.25rem;
  display: block;
  position: relative;
}

.pseudo-button-item .pbi--wrapper img {
  transition: var(--transition2);
}

.pseudo-button-item .pbi--wrapper::before {
  content: 'Learn More';
  display: block;
  width: fit-content;
  margin-inline: auto;
  position: absolute;
  inset: 50% 0 auto 0;
  translate: 0 -50%;
  padding: 0.5em 0.75em;
  background-color: var(--orange2);
  border: 2px solid var(--black);
  color: var(--black);
  font-weight: 600;
  font-family: var(--secondaryFont);
  border-radius: calc(var(--borderRadius) * 0.6);
  transition: var(--transition2);
  box-shadow: 0 3px 0.75rem var(--black02);
  opacity: 0;
  z-index: 2;
}

.pseudo-button-item .pbi--wrapper:hover img {
  filter: blur(var(--blurAmt));
}

.pseudo-button-item .pbi--wrapper:hover::before {
  opacity: 1;
}

/* custom scrollbars */

* {
  --ff_scrollbarWidth: thin;
  --scrollbarColourThumb: var(--green);
  --scrollbarColourTrack: transparent;
  --ch_scrollbarWidth: 8px;

  /* scrollbar styling firefox */
  scrollbar-width: var(--ff_scrollbarWidth);
  /* scrollbar-height: var(--ff_scrollbarWidth); */
  scrollbar-color: var(--scrollbarColourThumb) var(--scrollbarColourTrack);
}

/* scrollbar styling for chrome, safari and edge */

*::-webkit-scrollbar {
  width: var(--ch_scrollbarWidth);
  height: var(--ch_scrollbarWidth);
  background-color: var(--scrollbarColourTrack);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--scrollbarColourThumb);
  transition: var(--transition);
}

*:hover::-webkit-scrollbar-thumb {
  --scrollbarColourThumb: var(--black);
}

/* section for a sticky item to reside */

.sticky-section {
  position: relative;
}

.sticky-section .sticky--item {
  top: var(--top, calc(150px + 1rem));
  position: sticky;
}

/* aligning some images of main page links */

[data-id='academics-landing'] .card-img-top {
  --posY: 0;
}

[data-id='news-landing'] .card-img-top {
  --posX: 40%;
}

/* fine tuned styling for the 'about' main page link */

[data-id="about"] .card-image {
    background: var(--true-white);
}

[data-id="about"] .card-img-top {
    --fit: contain;
    --scale: .7;
}

[data-id="about"] .card-image:hover .card-img-top {
    --scaleHover: .9;
}

/* index popup */

#indexPopup .modal-content .popup-section:not(:last-of-type) {
  box-shadow: 0 6px 0 var(--black05);
  margin-bottom: 1.5rem;
  padding-bottom: 1.75rem;
}

.popup-section .heading {
  margin-block-end: 1rem;
  font-family: var(--secondaryFont);
}

.popup-section .thumbnail-wrapper {
  display: block;
  box-shadow: 0 0 0 1px var(--black02);
  margin-bottom: 1rem;
  border-radius: var(--borderRadius);
  aspect-ratio: var(--ar, 1/0.75);
  overflow: clip;
}

.popup-section .thumbnail-wrapper img {
  scale: var(--scale, 1);
}

#indexPopup .modal-content {
  max-height: calc(100% - 10vh);
}

#indexPopup .modal-footer .btn {
  font-size: .85rem;
  padding: .6rem .7rem;
  letter-spacing: 0px;
  border-color: var(--black02);
}