/* From Foundation */



/* from Flexboxgrid/Bootstrap */

/*@media (prefers-reduced-motion: reduce) { }*/

/* Visibility classes */

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  -webkit-clip-path: inset(50%);
  clip-path: inset(50%);
  white-space: nowrap !important;
  border: 0 !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Display/layout classes */

.d-none {  /* .d-none already in flexboxgrid? */
    display: none !important;
}
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline !important; }
.d-grid { display: grid !important; }
.d-flex { display: flex !important; }

@media (min-width: 48rem) {
.d-sm-none { display: none !important; }
.d-sm-block { display: block !important; }
.d-sm-flex { display: flex !important; }
.d-sm-grid { display: grid !important; }
}
@media (min-width: 64rem) {
.d-md-none { display: none !important; }
.d-md-block { display: block !important;}
.d-md-flex { display: flex !important; }
.d-md-grid { display: grid !important; }
}

@media (min-width: 80rem) {
.d-lg-none { display: none !important; }
.d-lg-block { display: block !important; }
.d-lg-flex { display: flex !important; }
.d-lg-grid { display: grid !important; }
}
@media (min-width: 90rem) {
.d-xl-none { display: none !important; }
.d-xl-block { display: block !important; }
.d-xl-flex { display: flex !important; }
.d-xl-grid { display: grid !important; }
}
@media (min-width: 120rem) {
.d-xxl-none { display: none !important; }
.d-xxl-block { display: block !important; }
.d-xxl-flex { display: flex !important; }
.d-xxl-grid { display: grid !important; }
}

.order-1 { order: 1 !important; }

/*.order-12 { order: 12; } -> not actually defined in Bootstrap? */

/* Utility classes */

.center {
	 box-sizing: content-box;
	 margin-inline: 0 auto;
	/* max-inline-size: var(--measure);
	 will automagically center elements at a given size */
}
 .left {
	 float: left !important;
	 margin-right: 1rem;
}
 .right {
	 float: right !important;
	 margin-left: 1rem;
}
 .clearfix {
	/*temporary, will be taken care of with Postcss (Autoprefixer?) */
	 overflow: auto;
}
.clear-bottom {
    margin-bottom: 0;
}
.space-evenly { /* only works */
    justify-content: space-evenly; 
    
}

 .dev {
	/* for troubleshooting */
	 outline: 1px dotted var(--sl-color-purple-700);
	 background: var(--lightest-grey);
}
 .note {
	 color: var(--sl-color-purple-700);
	 font-style: italic;
}
 .highlight {
	 background: yellow;
}
.invert {  
    /* use to switch colours on dark backgrouns (and vice versa) 
    not to be confused with a.inverted which is used on links & buttons specifically */
    filter: invert(1);
}
.screenshot {
    border: 1px solid #555;
    box-shadow: 1px 5px 8px #aaa;
}
 .grid-demo .dev {
	 padding: 1rem;
}
 .text-center {
	 text-align: center;
}
 .text-right {
	 text-align: right;
}
.text-left {
    text-align: left;
} 
.text-small { font-size: 0.8rem; }

/* font-colour overrides (for icon fonts, etc.) */

.text-white, .font-white, .font-inverted { color: #FFF; }
.text-blue, .font-blue { color: var(--qu-blue); }
.text-lightest-grey, .font-lightest-grey { color: var(--lightest-grey); }
.text-grey, .font-grey { color: var(--grey); }
.text-darkest-grey, .font-darkest-grey { color: var(--darkest-grey); }

/* USE SPARINGLY */
.text-red, .font-red { color: var(--qu-red); }
.text-gold, .font-gold { color: var(--qu-gold); }

 .indent { margin-left: var(--size-5); }

/* help with spacing between sections, colourboxes, etc. */

.margin-top { margin-top: 1.5rem; }
.margin-bottom { margin-bottom: 1.5rem; }