@charset "UTF-8";
 @import url("fonts.css");
 @import url("brand.css");
 @import url("flexboxgrid.min.css");
 @import url("helpers.css");
 @import url("grids.css");
 @import url("layout.css");
 @import url("components.css");
 @import url("props/op-supports.css");
 @import url("props/op-sizes.css");
 @import url("props/op-shadows.css");
 @import url("props/op-borders.css");
 @import url("props/op-fonts.css");

/** Hide Shoelace elements until they are registered **/
sl-visually-hidden:not(:defined) { visibility: hidden; }
section.featured sl-visually-hidden h2 { color: var(--light-grey); }
sl-icon:not(:defined) { visibility: hidden; }
sl-drawer:not(:defined) { visibility: hidden; }
sl-button:not(:defined) { visibility: hidden; }
sl-carousel:not(:defined) { visibility: hidden; }
sl-breadcrumb:not(:defined) { visibility: hidden; }
sl-accordion:not(:defined) { visibility: hidden; }
sl-tab-group:not(:defined) { visibility: hidden; }
sl-tag:not(:defined) { visibility: hidden; }

/* Brand fonts and fallbacks */
 :root {
	 --font-sans: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Ubuntu, Cantarell, sans-serif;
	 --sl-font-sans: var(--font-sans);
	 --font-serif: Volkhov, 'Gill Sans', Georgia, Times, Palatino, ui-serif, serif;
	 --font-accent: 'gotham_ssm', Montserrat, 'Segoe UI', Verdana, sans-serif;
	 --font-accent-setting: "ss01"; /* Q variant */;
	 --shadow-chonk: 2px 2px 2px rgba(0, 0, 0, 0.7);
}

/* GENERIC STYLES & ELEMENTS */
 * {    /* basically any element will use these styles (unsure if they override imported styles) */
	 box-sizing: border-box;
}

 html {
	 scroll-behavior: smooth;
	 --min-width-block: 20rem;  /* 320px -custom, haven't used yet */
	 --max-width-block: 120rem;
	 --link-primary: var(--sl-color-primary-800); /* not needed? */
	 --font-size-fluid-2: clamp(1.5rem,6vw,2.25rem) /* overrides Open Props variable */
}
 body {
	 width: 100%;
	 margin: 0;
	 overflow-x: hidden;
	 display: flex;    /* so main & aside can be displayed side by each */
	 flex-wrap: wrap;
	 font-family: var(--font-sans);
	 color: var(--off-black, #212121);
	 justify-content: center;
}

/* Text styles - colour, etc. */

a.skip-link { 
    color: revert; 
    width: fit-content;
}
a.skip-link:focus { outline: 2px double blue; }

 h2 {
    font-family: var(--font-accent);
    font-feature-settings: "ss01";
	font-size: var(--font-size-fluid-2);
	font-weight: var(--font-weight-4);
	letter-spacing: 0.0125em;
	margin-bottom: var(--size-5);
}
 h2.serif {
	 font-family: var(--font-serif);
	 color: var(--darkest-grey);
}
 h3 {
	 font-size: var(--font-size-fluid-1);
	 font-weight: var(--font-weight-6);
}
 h4 {
     font-size: var(--font-size-3);
     font-weight: var(--font-weight-6);
}
hr:not(.hp .separator) {
	 width: 100%;
	 border: 1px var(--grey, #D1D3D4) solid !important;
}

p, ol, ul, dl { line-height: 1.6; }

ol, ul {
     padding-left: 2.5em;
     margin-top: 0;
     margin-bottom: 10px;
}
li {
    margin-top: .7rem;
    margin-bottom: .7rem;
}
dt { margin-top: .5rem; }
dd { 
    margin-top: 0.2rem;
    margin-bottom: 0.7rem;
}

blockquote.inverted { color: lightgray; }

blockquote.graphic {
    position:relative;
    padding: 3rem 0 1rem 0;
    font-style: italic;
    font-size:1.2rem;
}
blockquote.graphic:before {
  position: absolute;
  content: "❝";
  font-size: 10rem;
  color:rgba(0,0,0,0.06);
  font-family: "";
  top: -3rem;
  z-index:0;
  font-style:normal;
}
blockquote.inverted:before { color:rgba(255,255,255,0.2); }

img {  /* moved from footer section of layout.css */
     max-width: 100% !important;
     height: auto;
     vertical-align: middle;
     border: 0;
}
svg:not(:root) { overflow: hidden; } /* moved from footer section of layout.css */

/*figure { max-width: min-content; } - not working */
figcaption { font-size: var(--sl-font-size-small); }
figcaption, figcaption p { line-height: 1.45;}

sup, sub { font-size: small; }

/* LINKS (moved buttons to components.css) */
 a {
	font-weight: var(--font-weight-5);
	color: var(--link-primary);	/* = #0253BF NEED TO RETEST */
	 -webkit-transition: .2s color;
	 -moz-transition: .2s color;
	 -o-transition: .2s color;
	 transition: .2s color;
}

/* temp override Bootstrap -- not working
main .fw-container a:not(.button), 
main .hw-container a:not(.button) { text-decoration: underline !important; } */

a:hover { color: var(--qu-blue); }

 a.noline { text-decoration: none; }
 a.noline:hover { text-decoration: underline; }
 a.inverted {
	/* can this be changed to a variable and used for the banners & sections below? */
	 color: #FFF;
}
.colourbox.gold a { color: var(--qu-blue, #002452); }
.colourbox.gold a:hover, .colourbox.gold a:active { color: var(--off-black, #212121); }

/* Misc. generic styles */

address { font-style: normal; }
code, pre { 
    font-size: var(--sl-font-size-medium);
    color: var(--sl-color-indigo-800);
}
pre {
    display: block !important;
    line-height: 1.5;
}

table {
	 background: #FFF;
	 border: solid 1px var(--grey);
	 margin-bottom: 1.25rem;
	 table-layout: auto;
	 border-collapse: collapse;
}
 table caption {
	 background: transparent;
	 margin-bottom: 0.5rem;
	 font-weight: var(--font-weight-5);
	 line-height: 1.6;
	 font-size: var(--font-size-2);
}
table thead, table tfoot {
	 background: var(--sl-color-primary-100);
}
table thead tr th, table thead tr td,
table tfoot tr th, table tfoot tr td {
	 font-weight: bold;
	 padding: var(--size-2);
}

table tr { border-bottom: 1px solid var(--grey);}

table tr th, table tr td {
	 padding: var(--size-3);
	 text-align: left;
}
 table tr.even, table tr.alt, table tr:nth-of-type(even) {
	 background: var(--sl-color-primary-50);
}
 table thead tr th, table tfoot tr th, 
 table tfoot tr td, table tbody tr th, 
 table tbody tr td, table tr td {
	 display: table-cell;
	 line-height: 1.6;
	 border-right: 1px solid var(--grey);
}
table.fw { width: 100%; }

/** Custom **/

.serif { font-family: var(--font-serif); }
.accent { font-family: var(--font-accent); }
.lede { font-size: var(--font-size-3, 1.25rem); }
 .subheader {
	 color: var(--darkest-grey);
	 /*font-size: 0.8em;*/
	 font-size: var(--font-size-fluid-1);
	 line-height: 1.4;
	 font-weight: normal;
}
.text-muted {
/* Bootstrap override */
    color: var(--dark-grey);
}

/* Related to tokens -- move to helpers? */
p.measure { max-inline-size: var(--size-content-3); }
p.measure-wide { max-inline-size: var(--size-content-4); }

.font-fluid-0 { font-size: var(--font-size-fluid-0); }
.font-fluid-1 { font-size: var(--font-size-fluid-1); }
.font-fluid-2 { font-size: var(--font-size-fluid-2); }
.font-fluid-3 { font-size: var(--font-size-fluid-3); }
	 
/* overrides and shims -- nb: overrides img classes in Posts */
/*.hh-news .post-page .wysiwyg img,*/
 .hh-events .content-detail img, 
 .hh-news .post-page .wysiwyg table, 
 .hh-events .content-detail table {
     height: auto !important;
     max-width: 100% !important;
     width:auto !important;
}

/* Footer styles */

 .footer-address {
	 text-align: left;
	 color: var(--lightest-grey);
	 font-size: var(--sl-font-size-small);
	 letter-spacing: var(--font-letterspacing-1);
}
 .footer-address img {
	 margin-left: -24px;
	 margin-bottom: -12px;
}
 .footer-title {
	 font-size: var(--font-size-2);
	 font-weight: var(--font-weight-3);
}
 .footer-address a {
	 color: var(--lightest-grey);
}
 .footer-address a:hover {
	 color: var(--qu-gold);
}
 .social-icons {
	 margin-right: 16px;
	 font-size: var(--font-size-4);
}

/* Yellow Tabs - HH FB */
* {
	 --indicator-color: none;
	 --track-color: none;
}
	
.yellow sl-tab-group {
	 all: unset;
}
 .yellow sl-tab {
	 all: unset;
}
/*#bridge sl-tab[active]::part(base), */
 .yellow sl-tab::part(base) {
	 background: transparent;
}
 .yellow sl-tab{
	 border: 3px solid #fabd0f;
	 width: 100%;
	 text-align: center;
	 line-height: 5px;
}
 .yellow sl-tab:not(:last-child) {
	 border-right: 0;
}
 .yellow sl-tab:active, .yellow sl-tab:focus, .yellow sl-tab:hover, .yellow sl-tab:visited {
	 background-color: #fabd0f;
}
 .yellow sl-tab::part(base):active, .yellow sl-tab::part(base):focus, .yellow sl-tab::part(base):hover, .yellow sl-tab::part(base):visited {
	 color: #cb204a;
	 text-decoration: underline;
}
 .yellow sl-tab:last-of-type  {
	 border-right: 3px;
	 border-right-style: solid;
	 border-color: var(--qu-gold);
}
 .yellow sl-tab-panel{
	 overflow-x: hidden;
}

.grey sl-tab-panel {
    border-top: solid 1px var(--sl-color-neutral-200);
}

.grey sl-tab[active]::part(base) {
    background: var(--sl-color-neutral-200);
    font-size: var(--font-size-fluid-0);
    border-bottom: solid 1px var(--sl-color-primary-600);
}