/* =========================================
   band = a strip or box.
    Can be used as:

    band bg-* where * = white, blue, red, black or grey
========================================= */

/* =========================================
   BAND STRUCTURE
========================================= */

.band {
    padding: 1.5em;
    border: 1px solid var(--band-border-soft);
    box-shadow: 0 8px 24px var(--band-shadow-soft);
}

.band.bg-blue,
.band.bg-red,
.band.bg-black {
    border-top: 3px solid transparent;
    color: var(--text-color-main);
}

.band-top-bottom {
    padding: 2em 0;
}

.band h1 {
    font-weight: bold;
}

.band h2 {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 8px;
}

.band .sub-headline {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 26px;
}

.band.bg-blue {
    background-color: var(--band-bg-blue-soft);
    border-top-color: var(--blue);
    color: var(--text-color-main);
}

.band.bg-red {
    background-color: var(--band-bg-red-soft);
    border-top-color: var(--red);
    color: var(--text-color-main);
}

.band.bg-black {
    background-color: var(--band-bg-black-soft);
    border-top-color: var(--black);
    color: var(--text-color-main);
}

.band.bg-blue a,
.band.bg-red a,
.band.bg-black a {
    color: var(--primary-color-main);
    text-decoration: underline;
}

.band.bg-white a:hover,
.band.bg-white a:active,
.band.bg-grey a:hover,
.band.bg-grey a:active,
.band.bg-black a:hover,
.band.bg-black a:active {
    color: var(--secondary-color-main);
    text-decoration: none;
}

/* =========================================
    Allows background to be changed and
        changes text colours etc to match/contrast

    Example use:
        "bg-*" where "*" = white, blue, red, black or grey
========================================= */

/* keep heading links cleaner */
.bg-blue h1 a,
.bg-blue h2 a,
.bg-blue h3 a,
.bg-blue h4 a,
.bg-blue h5 a,
.bg-blue h6 a,
.bg-red h1 a,
.bg-red h2 a,
.bg-red h3 a,
.bg-red h4 a,
.bg-red h5 a,
.bg-red h6 a,
.bg-black h1 a,
.bg-black h2 a,
.bg-black h3 a,
.bg-black h4 a,
.bg-black h5 a,
.bg-black h6 a {
    color: inherit;
    text-decoration: none;
}

.bg-blue h1 a:hover,
.bg-blue h2 a:hover,
.bg-blue h3 a:hover,
.bg-blue h4 a:hover,
.bg-blue h5 a:hover,
.bg-blue h6 a:hover,
.bg-red h1 a:hover,
.bg-red h2 a:hover,
.bg-red h3 a:hover,
.bg-red h4 a:hover,
.bg-red h5 a:hover,
.bg-red h6 a:hover,
.bg-black h1 a:hover,
.bg-black h2 a:hover,
.bg-black h3 a:hover,
.bg-black h4 a:hover,
.bg-black h5 a:hover,
.bg-black h6 a:hover {
    text-decoration: underline;
}

/* links on light surfaces */
.bg-white a,
.bg-grey a {
    color: var(--secondary-color-main);
    text-decoration: underline;
}

.bg-white a:hover,
.bg-white a:active,
.bg-grey a:hover,
.bg-grey a:active {
    color: var(--primary-color-main);
    text-decoration: none;
}

.bg-opacity {

    background-color:

        color-mix(
            in srgb,
            var(--white),
            transparent 15%
        );
}

.bg-opacity-black {
    color: var(--white);
    background-color: color-mix(in srgb, var(--black), transparent 50%);
}

.bg-opacity-white {
    background-color: color-mix(in srgb, var(--white), transparent 85%);
}

.bg-opacity-blue {
    color: var(--text-color-main);
    background-color: color-mix(in srgb, var(--primary-color-main), transparent 50%);
}

/* =========================================
    
    Allows quick text colour change
        of any element

    Example use:
        "*-text" - example "red-text"

    Needs improvement by adding, for example:
        a.red-text, a.red-text:hover and a.red-text:active etc.
========================================= */

.red-text {
    color: var(--red);
}

.blue-text {
    color: var(--blue) !important;
}

/* =========================================
    
    Bootstrap helper that allows specific
        size text to be aligned.

    See: https://gist.github.com/ohryan/b9593841c024c033783d

========================================= */

@media (min-width: 0px) {
    .text-xs-left { text-align: left; }
    .text-xs-right { text-align: right; }
    .text-xs-center { text-align: center; }
    .text-xs-justify { text-align: justify; }
}

@media (min-width: 768px) {
    .text-sm-left { text-align: left; }
    .text-sm-right { text-align: right; }
    .text-sm-center { text-align: center; }
    .text-sm-justify { text-align: justify; }
}

@media (min-width: 992px) {
    .text-md-left { text-align: left; }
    .text-md-right { text-align: right; }
    .text-md-center { text-align: center; }
    .text-md-justify { text-align: justify; }
}

@media (min-width: 1200px) {
    .text-lg-left { text-align: left; }
    .text-lg-right { text-align: right; }
    .text-lg-center { text-align: center; }
    .text-lg-justify { text-align: justify; }
}

/*
 * Callouts
 *
 * Not quite alerts, but custom and helpful notes for folks reading the docs.
 * Requires a base and modifier class.
 */

/* Common styles for all types */
.bs-callout {
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #ddd;
  border-left-width: 5px;
  /*border-radius: 3px;*/
}

.bs-callout h4 {
  margin-top: 0;
  margin-bottom: 5px;
}

.bs-callout p:last-child {
  margin-bottom: 0;
}

.bs-callout code {
  border-radius: 3px;
}

/* Tighten up space between multiple callouts */
.bs-callout + .bs-callout {
  margin-top: -5px;
}

/* Variations */
.bs-callout-danger {
  border-color: var(--danger-color);
}

.bs-callout-danger h4 {
  color: var(--danger-color);
}

.bs-callout-warning {
  border-left-color: var(--warning-color);
}

.bs-callout-warning h4 {
  color: #aa6708;
}

.bs-callout-info {
  border-left-color: var(--primary-color-main);
  background-color: var(--white);
}

/* When nested in a "band" class, see above */

.band .bs-callout-info {
  border-color: var(--info-color);
  background-color: var(--white);
}

.bs-callout-info h4 {
  color: var(--text-color-paragraph);
}

/* =========================================
Shorten a sentence
========================================= */

.shorten {
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis; /* or "clip" */
}

/* =========================================
Blur helpers
========================================= */

.blur {
    filter: blur(4px);
}

.img-blur {
    -webkit-filter: grayscale(1000%) blur(3px);
}

/* =========================================
Other helpers
========================================= */

.nobr {
    white-space: nowrap;
}

.monospaced {
    font-family: var(--font-mono);
}