/* from core - so it doesn't override components in sections  */
.banner a, .banner, .colourbox.blue > *, .colourbox.dark-grey > *, .colourbox.red > *,
.colourbox.blue a, .colourbox.dark-grey a, .colourbox.red a, 
section.blue > *, section.dark-grey > *, section.red > *,
section.blue a, section.dark-grey a, section.red a {
	 color: #FFF;
}

/* Styling for individual components + customizations */

/* LINKS & BUTTONS */
 a, button {
	 -webkit-transition: all 0.2s ease-out;
	 transition: all 0.2s ease-out;
}
 a.button {
	 display: inline-block;
	 letter-spacing: normal;
	 align-self: flex-start;
	/* fixes button spanning fw of container */
}
 button {
	 cursor: pointer;
	 font-size: 1rem;
	/* letter-spacing: 0.025em;*/
}
 a.button, button {
	 padding: var(--size-3);
	 background-color: #fff;
	 color: var(--qu-blue);
	 font-weight: var(--font-weight-5);
	 text-decoration: none;
	 border: 2px solid var(--qu-blue);
	 border-radius: var(--radius-2);
	 line-height: var(--font-lineheight-1);
}
 a.button:hover, button:hover {
	 background-color: #e5e8ebbb;
	 transition: all 0.2s ease-in-out;
	/* previously commented out? */
}
 a.button.rounded, button.rounded {
	/* Not really using */
	 border-radius: var(--radius-3);
}
/* Colour variants */
 a.button.primary, a.button.blue, button.blue {
	 background-color: var(--qu-blue);
	 color: #fff;
	 border: none;
}
 a.button.primary:hover, a.button.blue:hover, button.blue:hover {
	 background-color: var(--link-primary);
}
 a.button.secondary, a.button.gold, button.gold {
	 background-color: var(--qu-gold);
	 border: none;
}
 a.button.secondary:hover a.button.gold:hover, button.gold:hover {
	 background-color: #fbd35f;
}
 a.button.red, button.red {
	 border-color: var(--qu-red);
	 color: var(--qu-red);
}
 a.button.red:hover, button.red:hover {
	 background-color: #f8e6eabb;
	 border-color: var(--qu-red);
}
 a.button.inverted, button.inverted {
	 background: transparent;
	 border-color: #fff;
	 color: #fff;
}
 a.button.inverted:hover, button.inverted:hover {
	 background: #fff2;
	 border-color: #fff;
}
 a.button.cta, button.cta {
	 border: none;
	 background-color: var(--qu-red);
	 color: #fff;
}
 a.button.cta:hover, button.cta:hover {
	 background-color: var(--sl-color-red-600);
}
 a.button.grey, button.grey {
	/* use on gold backgrounds */
	 background-color: var(--light-grey);
	 border-color: var(--dark-grey);
	 color: var(--darkest-grey);
}
 a.button.grey:hover, button.grey:hover {
	 background-color: var(--grey);
	 color: var(--qu-blue);
}

a.button.dark-grey, button.dark-grey,
sl-button[variant="neutral"]::part(base) {
    border-color: var(--darkest-grey);
    background-color: var(--darkest-grey);
    color: #FFF;
}
a.button.dark-grey:hover, button.dark-grey:hover,
sl-button[variant="neutral"]::part(base):hover {
	 background-color: var(--darkest-grey);
}

/* Other variants */
a.button.small, button.small {
    font-size: small;
    padding: var(--sl-spacing-small);
    border-width: 1.5px;
}
a.button.icon-prefix .fa-regular, a.button.icon-prefix .fa-solid {
    margin-right: 5px;
}
a.button.icon-suffix .fa-regular, a.button.icon-suffix .fa-solid {
    margin-left: 5px;
}

/* Shoelace overrides for buttons */

 sl-button {
	 margin-bottom: 1rem; /* need to rethink this! */
}

 sl-button[variant="primary"]::part(base) {
	 background-color: var(--qu-blue);
	 color: #fff;
}
sl-button[variant="neutral"] {
    background-color: rgb(137 131 126); /* --sl-color-neutral-600 not working */
}
.button.arrow sl-icon {
	 font-size: 1.5rem;
	 vertical-align: sub;
}

.button-group { width: fit-content; }
.button-group.stack .button {
	 border-radius: 0;
	 border-bottom: 0;
	 width: 100%;
}
.button-group.stack sl-button {
  margin-bottom: 0;
}
.button-group.stack sl-button::part(base) {
  border-radius: 0;
}

/* From Bootstrap */

.hstack {
	 display: flex;
	 flex-direction: row;
	 align-items: center;
	 align-self: stretch;
}
 .vstack {
	 display: flex;
	 flex: 1 1 auto;
	 flex-direction: column;
	 align-self: stretch;
}
 .button-group.stack .button:last-child {
	 border-bottom: 2px solid;
}
 .button-group.stack.centered .button {
	 text-align: center;
}

/* Special link/text styles (uses Font Awesome) */

 a.icon-prefix::before, a.icon-suffix::after {
	 display: inline-flex;
	 /*text-rendering: auto;*/
}
 a.icon-prefix.solid::before, a.icon-suffix.solid::after {
     font-weight: 700;
 }
 a.icon-prefix::before {
	 margin-right: 5px;
}
 a.icon-suffix::after {
	 margin-left: 5px;
	 margin-right: 3px;
}

/* Specific icon symbols */
a.icon-suffix.details::after {
    font: var(--fa-font-regular);
    content: "\f061";
}

a.external::after {
	font: var(--fa-font-solid);
	content: "\f08e";
	font-size: .8em;
	opacity: .85;
}
 a.download::after {
	 font: var(--fa-font-solid);
	 content: "\f56d";
}
a.drawer::after, a.open::after {
	 font: var(--fa-font-light);
	 content: "\f33b";
}
a.pdf::before {
    font: var(--fa-font-sharp-light);
    content: "\f1c1";
}

a.excel::before {
	 font: var(--fa-font-solid);
	 content: "\f1c3";
}
 a.email::before {
	 font: var(--fa-font-solid);
	 content: "\40";
}
a.website::before,
a.web::before {            /* globe icon */
    font: var(--fa-font-solid);
	content: "\f0ac";
}
 *.phone::before {              /* not necessarily a link */
	 font: var(--fa-font-solid);
	 content: "\f095";
}
a.map::before {     /* map icon */
    font: var(--fa-font-solid);
	content: "\f279";
}
*.address::before, *.mail::before {     /* envelope icon */
    font: var(--fa-font-solid);
	content: "\f0e0";
}
*.location::before {        /* map pin icon */
    font: var(--fa-font-solid);
	 content: "\f3c5";
}
 a.video::before {
	 font: var(--fa-font-solid);
	 content: "\f03d";
}

/*a.icon-prefix:hover, a.icon-prefix:active, 
a.icon-suffix:hover, a.icon-suffix:active {  - doesn't work w/all button colours
	 color: var(--link-primary);
}*/

a.tapered {
	/* experimental - may move elsewhere if used on something other than links */
	 background-image: linear-gradient(179deg, rgb(254, 97, 158) 0%, rgb(254, 97, 158) 50%, transparent 54%, transparent 100%);
}

/* Misc custom elements */
 .callout {
	 background-color: #fff;
	 display: inline-flex;
	 align-items: flex-start;
	/* this mokes this component hard to work with */
	 padding: var(--size-4) var(--size-6);
	 border-radius: var(--radius-3);
	 border: 1px var(--dark-grey) solid;
	 box-shadow: var(--shadow-4);
	 margin-bottom: 1rem;
}
 .callout.blue, .callout.red, .callout.dark-grey, 
 .callout.blue a:not(.button), .callout.red a:not(.button), .callout.dark-grey a:not(.button) {
	 border: none;
	 color: #fff;
}
 .callout a:hover {
	 text-decoration: none;
}
 .callout.blue {
	 background-color: var(--qu-blue);
}
 .callout.red {
	 background-color: var(--qu-red);
}
 .callout.dark-grey {
	 background-color: var(--darkest-grey);
}
 .callout p {
	 margin-top: 0.25rem;
	 font-weight: var(--font-weight-5);
	 letter-spacing: var(--font-letterspacing-1);
}
 .callout .title {
	 margin: 0;
	 font-size: var(--font-size-3);
	 font-weight: var(--font-weight-6);
}
 .callout .inner-content.smaller p:not(.title) {
	 font-size: 0.9rem;
}
 .callout .inner-content .stat {
	 font-size: var(--font-size-3);
}
 .callout-lg {
	/* this is actually on a <p> */
	 font-size: var(--font-size-fluid-1);
	 font-weight: var(--font-weight-5);
	 line-height: var(--font-lineheight-4);
	 margin: 0;
}
 .callout .icon {
	 margin-inline-end: 1rem;
}
 .button-bar {
	 padding-top: 1.5rem;
}
 .icon-bar {
	 padding: var(--size-5);
}
 .icon-col {
	 text-align: center;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
}
 .icon-col sl-icon {
	 margin: 0 auto;
}
 .icon-col .icon-md, .icon-col .icon-lg, .icon-col .icon-xl, .icon-col .icon-xxl {
	 line-height: initial;
	 display: block;
	 margin-bottom: 0.5rem;
}
 .icon.lg {
	/* where is this being used? */
	 font-size: 2rem;
}
 .icon-md {
	 font-size: var(--font-size-5);
}
 .icon-lg {
	 font-size: var(--font-size-fluid-2);
}
 .icon-xl {
	 font-size: var(--font-size-fluid-3);
}
 .icon-xxl {
	 font-size: 5.5rem;
}
 .icon-huge {
	 font-size: 8rem;
}
/* Featured sections - generally for FEATURE region */

.feature, .feature.colourbox {
	 font-size: var(--font-size-fluid-1);
}
section.feature .colourbox {
    border-radius: 0;
}
 .colourbox {
	/* previously called "panels" */
	 padding: var(--size-5);
	 background-color: var(--light-grey);
	 margin-bottom: var(--size-4);
	 border-radius: var(--sl-border-radius-large);
	/* width: max-content;
	 - doesn't work as expected! */
}
 .colourbox.blue {
	 background-color: var(--qu-blue);
	 color: #fff;
}
 .colourbox.dark-grey {
	 background-color: var(--darkest-grey);
	 color: #fff;
}
 .colourbox.gold {
	/* use sparingly */
	 background-color: var(--qu-gold);
}
 .colourbox.red {
	/* use for CTA */
	 background-color: var(--qu-red);
	 color: #fff;
}
 .colourbox.fw {
	 width: 100%;
}
 .what-is {
	/* Make more generic! Or use callout? */
	 font-size: var(--font-size-5);
}
 .what-is div {
	 font-size: var(--font-size-8);
}
 .what-is p {
	 margin: 0;
}


/* HP features and related links */

.features sl-carousel { height: 350px; }

.endlessgrid article.card {
    display: flex;
    height: 320px;
    justify-content: center;
    /* flex: 1 1 320px;         fallback - w/flex on parent */
}

.features sl-carousel sl-carousel-item .card { height: 320px; }

ul.features, ul.items {
	 list-style: none;
	 padding-left: initial;
}
 .card {
	 margin: 0 auto;
	 width: 100%;
	 max-width: 320px;
	 max-height: 300px;
	 padding: 0;
	 position: relative;
	 /*overflow: hidden;*/
	 display: flex;
	 flex-direction: column;
	 cursor: pointer;
	 background-color: var(--grey, #d1d3d4);
	 box-shadow: var(--shadow-4);
}

/*.card:hover, .card:focus-within {*/
/*  outline: .2em solid rgba(0,0,255,.5);*/
/*  box-shadow: 0 0 .9em rgba(0,0,0,.5);*/
/*}*/

.card .image-container { 
    width: 100% !important;
    order: -1;
    position: relative;
    height: 71%;
    overflow: hidden;
    top: 0;
}

.card .image-container img { 
    position: absolute; 
    max-width: 120%; 
    max-height: 200%; 
    height: auto; 
    top: 50%; 
    left: 50%; 
    transform: translateY(-50%) translateX(-50%);
}

.card-title {
	 box-sizing: content-box;
	 display: flex;
	 align-items: center;
	 min-height: 72px;
	 /*min-width: 304px;*/
	 position: relative;
	 z-index: 1;
	 transform: translateY(0px);
	 transition: all 0.35s ease-in-out;
	 transition-delay: 0.1s;
	 background-color: var(--grey, #d1d3d4);
}
 .card h3 {
	 line-height: 1.3;
	 font-size: 1rem;
	 font-weight: 500;
	 margin: 0;
	 padding: 8px;
}
 .card h3 a {
	 text-decoration: none;
	 color: var(--off-black, #212121);
}
 .card.has-desc:hover .card-title {
	 transform: translateY(-60px);
}
 .card h3 a:hover, .card h3 a:focus-within {
     color: var(--qu-blue);
	 text-decoration: underline;
}
 .card-footer {
	 visibility: hidden;
	 position: absolute;
	 width: 100%;
	 min-height: 65px;
	 bottom: 0px;
	 color: #212121;
}
.card-footer.has-desc { visibility: visible; }
 .card p {
	 font-size: 0.9rem;
	 line-height: 1.3;
	 margin: 0;
	 padding: 8px;
}
 .card .cta {
	 font-size: 1.75em;
	 position: absolute;
	 bottom: 0;
	 right: 16px;
}

.card.has-desc:hover .card-footer { 
  visibility: visible;
}

.card.has-desc:hover sl-icon {
	 transform: translateX(4px);
	 transition: all 0.3s ease-in-out;
	 transition-delay: .075s;
}
/* 
.features article:nth-child(odd), .features article:nth-child(odd) .card-title {
    background-color: var(--qu-red); }
.features article:nth-child(odd) a, .features article:nth-child(odd) a:hover,
.features article:nth-child(odd) p, .features article:nth-child(odd) sl-icon-button::part(base) {
	color: #fff; }
.features article:nth-child(even), .features :nth-child(even) .card-title {
    background-color: var(--grey, #d1d3d4); }
*/

/** Cards (Shoelace) **/
    /* not sure any of this works or is being used anywhere */
    
 .card-header [slot="header"] {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
}
 .card-header h3 {
	 margin: 0;
}
 .card-header sl-icon-button {
	 font-size: var(--sl-font-size-medium);
}
 .card-footer [slot="footer"] {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
}
/* Card blocks that don't use card styling */
 .block {
	 max-width: max-content;
	 padding: 1rem;
	 box-shadow: var(--shadow-4);
	 background-color: #fff;
}
 .block article {
    max-width: 320px;
    overflow: hidden;
}
 .block article p {
	 margin-top: 0.5rem;
	 line-height: 1.5;
}
 .block article .lede {
	 margin-top: 0.5rem;
	 margin-bottom: 0.5rem;
	 font-weight: var(--font-weight-6);
}
 .block article .lede a {
	 text-decoration: none;
	 color: var(--link-primary);
}
 .block article .lede a:hover {
	 text-decoration: underline;
}
 .block article .desc {
	 font-size: var(--font-size-fluid-0);
	 color: var(--off-black, #212121);
}
/* Generic card blocks */
 .generic .block h2, .generic .block h3 {
	 margin: 0.25rem 0;
}

/** Homepage components (content area) **/

.program-search .search-container {
    max-width: 1200px;            /* based on mockup */
    height: fit-content;
    padding: 1rem;
    margin: 1rem auto;
    display: flex;
    justify-content: center;
    /*flex: 1 0 100px; z-index: 99;*/
    background-color: var(--grey, #d1d3d4);
    box-shadow: 4px 4px 1px 0px rgba(0, 0, 0, 0.5); /* variable? */
}

.program-search .search-dropdown {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--darkest-grey, #58595b);
}
.program-search label {
    font-size: 1.15rem;
    font-weight: 600;
}
.program-search #searchInput {
  width: 20rem;
  max-width: 70vw;
  padding: .5rem;
  margin: 0 .75rem .75em;
  font-size: 1rem;
  /*display: inline-block;*/
  /*position: relative;
  top: 0; left: 0;*/
  background-image: url('https://master.engineering.queensu.ca/_images/icons/magnifying-glass-solid.svg');
  background-position: 97% 8px;
  background-size: 1.5rem;
  background-repeat: no-repeat;
  border: 2px solid var(--darkest-grey, #58595B);
  margin-top: 10px;
}

.program-search sl-button::part(base):hover,
.program-search sl-button::part(base):active {
	background-color: var(--qu-red);
}

/*.program-search #searchInput:focus { outline: 3px solid blue; }*/

.program-search .search-content {
    display: none;
    position: relative; 
    /*max-height: 50vh;*/
    overflow: scroll;
/*  min-width: 230px; */
    z-index: 99;
    background-color: #FFF;
    text-align: left;
    font-size: .95rem;
  border: 2px solid var(--grey, #D1D3D4);
}

.program-search .search-content a {
  padding: .75rem;
  text-decoration: none;
  display: block;
  /*max-width: 350px;*/
}

.program-search .search-content a:hover { 
    background-color: var(--light-grey, #E6E7E8); }

.program-search .search-container a.details {
  text-transform: uppercase;
	font-family: var(--font-accent);
	 font-feature-settings: "ss01";
	 text-decoration: none;
	 color: var(--darkest-grey);
	 font-weight: var(--font-weight-5);
}

.program-search .search-container a.details:hover { text-decoration: underline; }
.program-search .showResults { display: block; } /* used in script */
.program-search .closeResults { display: none; } /* not yet used - needs work */

.fw.angled .hp-stats { padding-block: 2rem; }

.hp-stats {
    display: grid;
    justify-items: center;
}
.hp-stats .row { margin: 0 auto; }

.hp-programs h2, .hp-stats h2 { 
    font-family: var(--font-accent); 
    font-feature-settings: "ss01";
}

.hp-stats h2 {
	 position: absolute; 
	 font-size: var(--font-size-7);
	 z-index: 2;
	 text-shadow: 3px 3px 2px rgba(0, 0, 0, 1);
}
.hp-programs h2 {
	 color: var(--darkest-grey);
	 text-align: center;
	 margin-bottom: 1rem;
}
.hp-programs .program-block {
	 background: var(--light-grey);
	 max-width: 504px;
	 margin: 0 auto;
}
.hp-programs .program-block figure {
	 position: relative;
	 margin: 0;
}
.hp-programs img {
	 max-width: 504px;
	 height: auto;
}
.hp-programs figcaption {
	 position: absolute;
	 bottom: 4px;
	 background-color: rgba(0, 0, 0, 0.7);
	 width: 100%;
	 padding-inline: 1rem;
}
.hp-programs figcaption h3 {
	 color: #fff;
	 margin-block: 1rem;
}
.hp-programs .program-details {
	 padding-block-end: 1rem;
}
.hp-programs .program-details p {
	 font-size: var(--font-size-3);
	 margin: 0 1rem;
	 line-height: 1.5;
}
.hp-programs .program-details p:not(.degree) {
	 font-size: var(--font-size-2);
	 margin-left: 2rem;
	 margin-top: 7px;
}
.hp-programs .program-details a {
	 text-decoration: none;
	 color: var(--darkest-grey);
}
.hp-programs .program-details a:hover {
	 text-decoration: underline;
	 color: var(--link-primary);
}
.hp-programs .program-details a sl-icon {
	 font-size: 1.25em;
	 position: relative;
	 top: 5px;
	 left: 4px;
}
.hp-stats .lefthalf, .hp-stats .righthalf {
	 max-width: 650px;
	 max-height: 400px;
	 padding-block-start: 9rem;
	 padding-block-end: 6rem;
}
 .hp-stats .lefthalf {
	 background: #00245266 url("https://smithengineering.queensu.ca/_images/bg-stats-left_650x407.jpg");
	 background-blend-mode: overlay;
	 text-align: right;
	 padding-inline-end: 3rem;
}
 .hp-stats .righthalf {
	 background: #b90e3133 url("https://smithengineering.queensu.ca/_images/bg-stats-right_650x407.jpg");
	 background-blend-mode: multiply;
	 padding-inline-start: 3rem;
}
 .hp-stats p {
	 font-family: var(--font-accent);
	 font-feature-settings: "ss01";
	 font-size: var(--font-size-5);
	 text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.8);
	 line-height: var(--font-lineheight-1, 1.25);
	 margin-top: 1.5rem;
}
 .hp-stats .stat {
	 font-family: var(--font-accent);
	 font-feature-settings: "ss01";
	 font-size: var(--font-size-fluid-3);
	 font-weight: var(--font-weight-6);
	 text-shadow: 3px 3px 2px rgba(0, 0, 0, 1);
}
/*.sm-feed-hp { width: 90vw; }*/

/* Events & News blocks (not to be confused with Events/News site styles) */

 .hh-events .related-events .event, .hh-events.hh-events-block .event, .hh-news.hh-news-block .news-feature .post {
	 margin-bottom: 30px;
}
 .hh-news.hh-news-block .news-feature .post {
	 margin-right: 15px;
}
 .hh-news.hh-news-block .news-list .post, 
 .hh-news.hh-news-block .news-link {
	 margin-bottom: 1rem;
}
 .hh-events .related-events .event .title, 
 .hh-events.hh-events-block .event .title, 
 .hh-news.hh-news-block .post .title {
	 font-size: var(--font-size-2);
	 padding-top: 5px;
}
 .hh-news.hh-news-block .news-feature .title {
	 font-size: var(--font-size-4);
	 margin-bottom: 1rem;
}
 .hh-news.hh-news-block .news-feature .summary {
	 font-size: var(--font-size-3);
	 margin-top: 0.5rem;
}
 .hh-events .event .event-image, .hh-news .post .news-image, 
 .hh-news .news-feature .post .news-image {
	 border-radius: 2px;
	 display: block;
	 background-position: center;
	 background-size: cover;
	 aspect-ratio: 3 /2;
}
 .hh-news .details .date {
	 font-size: 0.875rem;
	 margin-bottom: 0.5rem;
}
 .hh-news .details .summary {
	 font-size: var(--font-size-1);
}
 .news-header, .events-header, .social-header {
	 border-bottom: var(--qu-blue) 10px solid;
	 margin-block-end: 1rem;
	 align-items: baseline;
}
 .events-header h2, .news-header h2, .sm-feed-hp h2 {
     font-family: var(--font-accent);
     font-feature-settings: "ss01";
	 margin-bottom: 0.5rem;
	 font-size: var(--font-size-fluid-1);
	 text-transform: uppercase;
}
.events-header h2 { margin-bottom: 1rem; }

h2.social-header { 
    font-size: var(--font-size-fluid-2); 
    padding-bottom: 1rem;
}

.sm-feed-hp .contact-links {
    margin-top: 1rem;
    font-size: var(--font-size-2);
}

 .news-feature h3 {
	/* same as above */
	font-size: var(--font-size-4);
    text-transform: uppercase;
}
 .news-feature .first-sm {
	 padding-left: revert;
	/* fixes alignment of left column */
}
 .news-list .news-link, .events-footer .events-link {
	 text-align: right;
}
 .events-footer .events-link a, .news-list .news-link a {
	 text-transform: uppercase;
	 font-family: var(--font-accent);
	 font-feature-settings: "ss01";
	 text-decoration: none;
	 color: var(--off-black);
}
 .events-footer .events-link a:hover, .news-list .news-link a:hover {
	 text-decoration: underline;
}
 .events-footer .events-link sl-icon, .news-list .news-link sl-icon {
	 position: relative;
	 top: 2px;
}
 .events-footer .events-link a::after {
	 background-color: var(--darkest-grey);
}
 .events-list .col-xs {
	 display: flex;
	 flex-wrap: wrap;
}
 .event-date {
	/*display: inline-block;
	 - might not need, but shd test */
	/*float: left;
	 */
	 flex-basis: 72px;
	 flex-grow: 1;
	 width: 72px;
	 height: 72px;
	 line-height: 1.1;
	 padding-block-start: 8px;
	 margin-right: 10px;
	 background-color: rgba(209, 211, 212, 0.7);
	 box-shadow: 4px 4px 1px 0px rgba(0, 0, 0, 0.5);
	 text-align: center;
	 font-family: var(--font-accent);
	 font-feature-settings: "ss01";
	 text-transform: uppercase;
	 font-size: var(--font-size-4);
	 font-weight: var(--font-weight-5);
}
 .event-date span.num {
	 font-size: var(--font-size-5);
}
 .event-desc {
	 flex-basis: 0;
	 flex-grow: 999;
	 min-inline-size: 50%;
}
 .event-desc p {
	 margin-top: 0;
	 margin-bottom: 4px;
}
 .event-desc a.details {
	 text-transform: uppercase;
	 font-family: var(--font-accent);
	 font-feature-settings: "ss01";
	 text-decoration: none;
	 color: var(--darkest-grey);
	 font-weight: var(--font-weight-5);
}
 .event-link a sl-icon, .event-desc a sl-icon {
	 font-size: 1.5rem;
	 position: relative;
	 top: 4px;
	 left: 4px;
}

/* .event-desc a.details::after {
	 background-color: var(--darkest-grey);
} */ 

/* .events-header .events-link a::after, .event-desc a.details::after {
	 background-repeat: no-repeat;
	 content: "";
	 display: inline-flex;
	 mask-size: cover;
	 margin-left: 5px;
	 width: 30px;
	 height: 20px;
	 mask-image: url('../../_images/icons/arrow-thin-right_u101.svg');
} */
 
 
/* Web Components -- incl. Shoelace */

.sl-aspect-ratio-unset {
    --aspect-ratio: unset; /* for carousels (can't use "--" in formats */
}

.site-links sl-drawer { width: 26rem; }

.site-links sl-drawer::part(header) { font-family: var(--font-serif); }

.site-links sl-drawer::part(close-button) {
    border: 1px solid var(--off-black, #212121);
    padding: 2px;
    -webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;
	max-height: 44px;
    margin: 8px;
}

sl-drawer::part(header-actions) {
    padding: var(--header-spacing); /* overrides 0 for top */
    padding-bottom: 0;
}

.site-links sl-drawer ul { padding-left: 0; }

.site-links sl-drawer li {
    list-style: none;
    /*display: inline-block; - something is messing this up! */
    width: fit-content;
    margin-left: 0px;
    padding: 2px 6px;
    margin: 8px 0;
    border: 1px solid var(--off-black, #212121);
    line-height: 2;
    -webkit-transition: all 0.2s ease-out;
	 transition: all 0.2s ease-out;
	 background-color: #FFF;
}

.site-links sl-drawer li:hover,
.site-links sl-drawer::part(close-button):hover {
  background-color: var(--light-grey);
  box-shadow: 4px 4px 1px 0px rgba(0, 0, 0, 0.25);
}

.site-links sl-drawer li a {
    font-size: 0.9rem;
    color: var(--off-black, #212121);
}

.site-links sl-drawer li sl-icon { 
    -webkit-transition: all 0.2s ease-out;
	 transition: all 0.2s ease-out;
}
.site-links sl-drawer li:hover sl-icon { transform: translateY(-3px); }

nav.breadcrumb { margin: var(--size-3) 0; }

 sl-breadcrumb-item::part(base) {
	 font-size: 0.93rem;
	 letter-spacing: 0.02em;
}
 sl-breadcrumb-item::part(label) {
	 font-family: var(--font-sans);
	 color: var(--link-primary, #0253bf);
	/* may change this back to the default */
}
 sl-breadcrumb-item::part(label):hover {
	 color: var(--qu-blue, #002452);
}
/* customized Shoelace cards - may abandon these (but keep the "alt" customizations) */
 sl-card {
	 max-width: 320px;
	/* SL examples @ 300px */
}
 sl-card::part(body), sl-card::part(footer) {
	 border: none;
	 padding: var(--size-3);
	 background-color: var(--grey);
	 color: var(--off-black);
}
 sl-card::part(body) {
	 padding-bottom: 0;
}
 sl-card::part(footer) {
	 padding-top: var(--size-1);
	 font-size: var(--font-size-2);
}
 sl-card.alt::part(body), sl-card.alt::part(footer), .alt .card-title, .alt .card-footer {
	 background-color: var(--qu-red);
	 color: #fff;
}
/* "details" = accordion styles */
 .details-group-example sl-details:not(:last-of-type) {
	 margin-bottom: var(--sl-spacing-2x-small);
}
 sl-details::part(base) {
	 border-color: var(--sl-color-primary-300);
	 line-height: 1.6rem;
}
 sl-details::part(header) {
	 flex-direction: row-reverse;
	/* this will switch the icon to the left */
	 background: var(--sl-color-primary-200);
}
 sl-details::part(summary-icon) {
	 margin-right: 0.5rem;
}
/* Shoelace tabs */
 sl-tab::part(base) {
	 font-size: 1rem;
	 color: var(--darkest-grey);
	 border-radius: 0;
	 background: var(--sl-color-neutral-100);
}
 sl-tab::part(base):hover {
	 color: var(--link-primary);
}
 sl-tab[active]::part(base) {
	 background: var(--sl-color-neutral-200);
	 font-size: var(--font-size-fluid-0);
}
 sl-tab-panel::part(base) {
	 padding-left: 0.25rem;
	 line-height: 1.5;
}
 sl-tag::part(base) {
	 text-transform: uppercase;
	 background-color: var(--sl-color-primary-100);
	 color: var(--sl-color-primary-800);
	 border-color: var(--sl-color-primary-600);
	 border-radius: var(--radius-1);
	 font-size: var(--sl-font-size-2x-small);
	 letter-spacing: var(--font-letterspacing-1);
	 margin-bottom: 4px;
}
sl-tab-group { 
    max-width: 1400px;
}


/* Table styles */
 th {
	 text-align: left;
}