/* Margin spacing */
/* Vertical */
.text-formatted [class].margin-v-0,
.margin-v-0[class] {
  margin-top: 0;
  margin-bottom: 0;
}

.text-formatted [class].margin-v-1,
.margin-v-1[class] {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.text-formatted [class].margin-v-2,
[class].margin-v-2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.text-formatted [class].margin-v-3,
[class].margin-v-3 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.text-formatted [class].margin-v-4,
[class].margin-v-4 {
  margin-top: 4rem;
  margin-bottom: 4rem;
}

/* Vertical bottom only */
.text-formatted [class].margin-bottom-0,
[class].margin-bottom-0 {
  margin-bottom: 0;
}

.text-formatted [class].margin-bottom-1,
[class].margin-bottom-1 {
  margin-bottom: 1rem;
}

.text-formatted [class].margin-bottom-2,
[class].margin-bottom-2 {
  margin-bottom: 2rem;
}

.text-formatted [class].margin-bottom-3,
[class].margin-bottom-3 {
  margin-bottom: 3rem;
}

.text-formatted [class].margin-bottom-4,
[class].margin-bottom-4 {
  margin-bottom: 4rem;
}

/* Vertical top only */
.text-formatted [class].margin-top-0,
[class].margin-top-0 {
  margin-top: 0;
}

.text-formatted [class].margin-top-1,
[class].margin-top-1 {
  margin-top: 1rem;
}

.text-formatted [class].margin-top-2,
[class].margin-top-2 {
  margin-top: 2rem;
}

.text-formatted [class].margin-top-3,
[class].margin-top-3 {
  margin-top: 3rem;
}

.text-formatted [class].margin-top-4,
[class].margin-top-4 {
  margin-top: 4rem;
}

/* Horizontal */
.text-formatted .margin-h-0,
.margin-h-0[class] {
  margin-left: 0;
  margin-right: 0;
}

.text-formatted .margin-h-1,
.margin-h-1[class] {
  margin-left: 1rem;
  margin-right: 1rem;
}

.text-formatted .margin-h-2,
.margin-h-2[class] {
  margin-left: 2rem;
  margin-right: 2rem;
}

.text-formatted .margin-h-3,
.margin-h-3[class] {
  margin-left: 3rem;
  margin-right: 3rem;
}

.text-formatted .margin-h-4,
.margin-h-4[class] {
  margin-left: 4rem;
  margin-right: 4rem;
}

/* Padding spacing */
/* Vertical */
.text-formatted .padding-v-0,
.padding-v-0[class] {
  padding-top: 0;
  padding-bottom: 0;
}

.text-formatted .padding-v-1,
.padding-v-1[class] {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.text-formatted .padding-v-2,
.padding-v-2[class] {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.text-formatted .padding-v-3,
.padding-v-3[class] {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.text-formatted .padding-v-4,
.padding-v-4[class] {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Horizontal */
.text-formatted .padding-h-0,
.padding-h-0[class] {
  padding-left: 0;
  padding-right: 0;
}

.text-formatted .padding-h-1,
.padding-h-1[class] {
  padding-left: 1rem;
  padding-right: 1rem;
}

.text-formatted .padding-h-2,
.padding-h-2[class] {
  padding-left: 2rem;
  padding-right: 2rem;
}

.text-formatted .padding-h-3,
.padding-h-3[class] {
  padding-left: 3rem;
  padding-right: 3rem;
}

.text-formatted .padding-h-4,
.padding-h-4[class] {
  padding-left: 4rem;
  padding-right: 4rem;
}

.text-formatted .padding-top-0,
.padding-top-0[class] {
  padding-top: 0;
}

.text-formatted .padding-top-1,
.padding-top-1[class] {
  padding-top: 1rem;
}

.text-formatted .padding-top-2,
.padding-top-2[class] {
  padding-top: 2rem;
}

.text-formatted .padding-top-3,
.padding-top-3[class] {
  padding-top: 3rem;
}

.text-formatted .padding-top-4,
.padding-top-4[class] {
  padding-top: 4rem;
}

.text-formatted .padding-bottom-0,
.padding-bottom-0[class] {
  padding-bottom: 0;
}

.text-formatted .padding-bottom-1,
.padding-bottom-1[class] {
  padding-bottom: 1rem;
}

.text-formatted .padding-bottom-2,
.padding-bottom-2[class] {
  padding-bottom: 2rem;
}

.text-formatted .padding-bottom-3,
.padding-bottom-3[class] {
  padding-bottom: 3rem;
}

.text-formatted .padding-bottom-4,
.padding-bottom-4[class] {
  padding-bottom: 4rem;
}

/* Typography transforms */
.text-formatted .text-uppercase {
  text-transform: uppercase;
}

/* Typography colours */
.text-formatted .text-colour-primary {
  color: var(--rw-primary-color, #1e1e1e);
}

.text-formatted .text-colour-secondary {
  color: var(--rw-secondary-color, #1e1e1e);
}

.text-formatted .text-colour-highlight {
  color: var(--rw-highlight-color, #1e1e1e);
}

.text-formatted .text-colour-white,
.text-colour-white {
  color: #fff;
}

.text-formatted .text-colour-black,
.text-colour-black {
  color: #000;
}

/* Text shadow */
.text-shadow {
  text-shadow: 1px 1px 15px rgba(0,0,0,.9);
}

.text-shadow-border {
  text-shadow: 1px 1px 2px rgba(0,0,0,.9);
}

/* Unordered lists utility classes */
.text-formatted ul.dashed > li::before {
  background-color: transparent;
  border-radius: 0;
  content: "—";
  top: auto;
  left: 0.25rem;
}

/* 
------
Button classes extended 
------
*/
.page-footer a.button {
  color: var(--rw-background-color, #ffffff);
  border-color: var(--rw-background-color, #ffffff);
  background-color: var(--rw-text-color, #00243a);
}

.button.primary.white {
  background-color: #f8f8f8;
  color: #000;
}

.button.primary.white:hover {
  background-color: #fff;
  color: #000;
}

.button[class].hollow.white {
  color: #fff;
  border-color: #FFF;
  background-color: transparent;
}

.button[class].hollow.white:hover {
  background-color: #fff;
  color: #00243a;
}

/* Card type button display */
.button.button-card {
  line-height: 1.25;
  font-size: 1rem;
  padding: 1rem;
  font-weight: 700;
  box-shadow: 0px 1px 1px 1px rgb(0 0 0 / 15%);
  transition: box-shadow 0.2s ease-in;
  border-radius: 6px;
  text-transform: none;
  margin: .5rem 0;
}

.button.button-card:hover {
  box-shadow: 0px 3px 3px 1px rgb(0 0 0 / 15%);
}

.button.button-card > span {
  background-image: -webkit-gradient(linear, left top, right top, from(#fff), to(#fff));
  background-image: linear-gradient(to right, #fff, #fff);
  background-position: 0 100%;
  background-size: 0 2px;
  background-repeat: no-repeat;
  -webkit-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.button.button-card:hover > span {
  background-size: 100% 2px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/* Coloured based of theme paletes | non hollow */
.button:not(.hollow).themed-primary {
  background-color: var(--rw-primary-color, #00243a);
}

.button:not(.hollow).themed-secondary {
  background-color: var(--rw-secondary-color, #003c69);
}

.button:not(.hollow).themed-highlight {
  background-color: var(--rw-highlight-color, #0098db);
}

.button:not(.hollow).themed-text {
  background-color: var(--rw-text-color, #1e1e1e);
}

.button:not(.hollow).themed-link {
  background-color: var(--rw-link-color, #0076d1);
}

/* Coloured based of theme paletes | hollow */
.button.hollow.themed-primary {
  border: 1px solid var(--rw-primary-color, #00243a);
  color: var(--rw-primary-color, #00243a);
}

.button.hollow.themed-secondary {
  border: 1px solid var(--rw-secondary-color, #003c69);
  color: var(--rw-secondary-color, #003c69);
}

.button.hollow.themed-highlight {
  border: 1px solid var(--rw-highlight-color, #0098db);
  color: var(--rw-highlight-color, #0098db);
}

.button.hollow.themed-text {
  border: 1px solid var(--rw-text-color, #1e1e1e);
  color: var(--rw-text-color, #1e1e1e);
}

.button.hollow.themed-link {
  border: 1px solid var(--rw-link-color, #0076d1);
  color: var(--rw-link-color, #0076d1);
}

.button[class].normal {
  text-transform: none;
}

.button[class].no-radius {
  border-radius: 0;
}


/* Colour filters */
.gray-scale {
  filter: grayscale(100%);
}

/* Menu link title base style | Once we can add classes change these */

/* alumni.uct.ac.za donate now menu link */
a[title="Donate now"],
a[title="Gold menu link"] {
  background-color: #c9b882;
}

/* Fade In Banner images */
.fadeInBanners {
  overflow: hidden;
  position: relative;
  aspect-ratio: 3.99145;
}

.fadeInBanners .media--type-image {
  position: absolute;
  top: 0;
  left: 0;
}

.fadeInBanners .media--type-image,
.fadeInBanners .media--type-image img {
  width: 100%;
}

.fadeInBanners.homepage-content__image {
  aspect-ratio: 16/9;
}

/* Contact card aside information */
@media print, screen and (min-width: 64em) { 
  .contact-aside:not(.in-contact-aside) {
    width: 240px;
    float: right;
    margin-left: 1rem;
    margin-top: 0 !important;
    margin-bottom: 1rem;
  }
}

/* Small h2 heading class */
.sml-head h2, 
.sml-head .h2 {
  font-size: 1.125rem
}

/* Layout grid specific utility class to change component elements */

/* Extend background-colour to max site width */
.layout-comp-colour-fullwidth {
  position: relative;
  isolation: isolate;
}

.layout-comp-colour-fullwidth::before {
  display: block;
  content: '';
  position: absolute;
  height: 100%;
  width: 120rem;
  background-color: inherit;
  top: 0;
  bottom: 0;
  left: calc(50% - 60rem);
  z-index: -1;
  background-image: inherit;
  background-size: cover;
  background-position: center center;
}

/* MCR Article banner display mode remove date */
.mcr-no-date footer {display: none;}

/* 
MicroView / MCR: Grid Banner rollover effect   
---
Displaying Title centered only, hover displays summary

*/
.grid-banner-rollover .banner .node__content {
  height: 100%;
}

.grid-banner-rollover .banner .node__meta {
  display: none;
}
.grid-banner-rollover .banner h3.node__title {
  height: 100%;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  overflow: hidden;
  justify-content: center;
  text-align: center;
  align-items: center;
  opacity: 1;
  margin: 0;
}

.grid-banner-rollover .banner:hover .node__title {
  height: 0;
  opacity: 0;
}

.grid-banner-rollover .banner .field--name-body {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: none;
  height: 0;
  text-align: center;
  font-size: 1.2rem;
}

.grid-banner-rollover .banner:hover .field--name-body {
  height: 100%;
  margin: 0;
  max-height: none;
}


/*
Image cover classes 
*/
[class*="img-cover-"] {
  --dimensions: auto;
  --aspect-ratio: auto;
}

[class*="img-cover-"] img {
  object-fit: cover;
  aspect-ratio: var(--aspect-ratio);
  width: var(--dimensions);
  height: var(--dimensions);
}

[class*="aspect-ratio_"]:not(.ratio-width) img {
  height: auto;
}

[class*="aspect-ratio_"].ratio-width img {
  width: auto;
}

.img-cover-100 {
  --dimensions: 100px;
}

.img-cover-200 {
  --dimensions: 200px;
}

.img-cover-300 {
  --dimensions: 300px;
}

.img-cover-400 {
  --dimensions: 400px;
}

.img-cover-500 {
  --dimensions: 500px;
}

.img-cover-600 {
  --dimensions: 600px;
}

.aspect-ratio_25 {
  --aspect-ratio: .25;
}

.aspect-ratio_50 {
  --aspect-ratio: .5;
}

.aspect-ratio_75 {
  --aspect-ratio: .75;
}

.aspect-ratio_half {
  --aspect-ratio: 2;
}

.aspect-ratio_third {
  --aspect-ratio: 3;
}

.aspect-ratio_fourth {
  --aspect-ratio: 4;
}

.aspect-ratio_4-3 {
  --aspect-ratio: 4/3;
}

.aspect-ratio_5-4 {
  --aspect-ratio: 5/4;
}

.aspect-ratio_16-9 {
  --aspect-ratio: 16/9;
}

.aspect-ratio_9-16 {
  --aspect-ratio: 9/16;
}

/* Responsive iframe class based off aspect-ratio */
.video-full_16-10 {
  width: 100%;
  aspect-ratio: 16/10;
  height: auto;
}

.video-full_16-9 {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}

.video-full_5-4 {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}

.video-full_4-3 {
  width: 100%;
  aspect-ratio: 16/9;
  height: auto;
}

/* background colour classes */
.box-grey {
  background-color: #f1f1f1;
}

/* background-image utility classes */
.bg-fixed,
.bg-fixed.layout-comp-colour-fullwidth::before {
  background-attachment: fixed;
}

.bg-repeat,
.bg-repeat.layout-comp-colour-fullwidth::before {
  background-repeat: repeat !important;
  background-size: unset !important;
}

/* 
----
Utility table styles 
----
*/

/* Unstripped table class with light border between rows */
body table.unstriped-table > tbody tr:not(:hover) {
  background-color: transparent;
}

body table.unstriped-table > tbody tr > th,
body table.unstriped-table > tbody tr > td {
  border-bottom: 1px solid hsl(0 0% 20% / .1);
}

/* Group tbody table styles */
.grouped-table {
  font-size:0.875rem
}
.grouped-table tbody:hover td[rowspan],
.grouped-table  tr:hover td,
.grouped-table tbody:hover th[rowspan],
.grouped-table tr:hover th {
  background: #f4f5fd;
}
  
.grouped-table thead > tr:hover th {
  background: #00243a;
}

.grouped-table td, 
.grouped-table th {
  vertical-align: top;
  text-align:left;
}
.grouped-table tr:nth-child(2n) {
  background-color: white;
}
  
.grouped-table tr, 
.grouped-table tr:nth-child(2n) {
  border-bottom: 1px solid #e8e8e8;
}
  
.grouped-table td, 
.grouped-table th {
  border: 0px;
}
.grouped-table tbody > tr:first-of-type {
  border-top:2px solid black;
}

/* Carousel component utility classes */

/* slim-default */
@media print, screen and (min-width: 64em) {
	.slim-default .carousel-slide {
    min-height: 32.875rem;
  }
  
  .slim-default .carousel-slide .node__title {
    font-size: 2rem;
  }
  
  .image-right-text-left .slim-default .album-carousel .slick__arrow {
    left: 60%;
    top: 2rem;
  }
}

/* inline-dl */
.inline-dl dt {
  display: inline;
  font-weight: bold;
}
.inline-dl dd {
  display: inline;
  margin-left: 5px; 
}
.inline-dl dd::after {
  content: "";
  display: block;
  clear: both;
}

/* Utility column styles */
/* li-large-3 li-md-2 li-sm-1 */
.li-sml-1,
.li-med-2,
.li-lrg-2,
.li-lrg-3,
.li-lrg-4  {
  column-gap: 1.25rem;
}

.li-sml-1 {
  columns: 1;
}

@media screen and (min-width: 40em) {
  .li-med-2 {
    columns: 2;
  }
}

@media screen and (min-width: 64rem) {
  .li-lrg-2 {
    columns: 2;
  }
  .li-lrg-3 {
    columns: 3;
  }
  .li-lrg-4 {
    columns: 4;
  }
}