/* Visual aids for dev */
/* .region--footer-top > div:not(.block--reverse),
.region--footer-bottom > div:not(.block--reverse) {
  background: var(--white);
} */

/* through line 79 goes into css/theme/cke5.css */

/* Text colours */

body {
  color: var(--text-clr);
}

/* Links */

a:link,
a:visited { 
  text-decoration: none;
  color: var(--blue);
}

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

a:active,
a:focus {
  box-shadow: 0 0 3px 0;
  border-radius: var(--spc-xsm);
}

.long-form a:link,
.long-form a:visited {
  padding: 0;
  text-decoration: underline;
  text-decoration-color: var(--blue);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
}

.long-form a:hover {
  color: hsl(from var(--blue) h s 33%);
  text-decoration-color: hsl(from var(--blue) h s 33%);
  text-decoration-style: wavy;
  background: transparent;
}

/* links that wrap images */
a:has(img) {
  display: block;
  line-height: 1;
}
/* a:has(img)::after {
  all: unset;
} */
a:has(img):hover {
  background: none;
}

/*** Sitelogo A href has a weird few pixels under it. Set the height to the height of the image *for now* ***/
a.site-logo {
  height: 50px;
}

/*** Regions ***/

/* Dev helper */
/* .region {
  border: 1px solid var(--xdk);
} */

/*** Blocks ***/

/* Dev helper */
/* .block {
  border: 1px dashed var(--xdk);
} */

/* Reverse Colours */

.clr-rvs .region {
  background: unset;
}

.clr-rvs--green,
.blk-rvs--green {
  background: var(--green);
  color: var(--nearwhite);
}

.clr-rvs--green-lt,
.blk-rvs--green-lt {
  background: var(--green-lt);
}

.clr-rvs--blue,
.blk-rvs--blue {
  background: var(--blue);
  color: var(--nearwhite);
}

.clr-rvs--dark,
.blk-rvs--dark {
  background: var(--xdk);
  color: var(--nearwhite);
}

.blk-rvs h1,
.blk-rvs h2,
.blk-rvs h3,
.blk-rvs h4,
.blk-rvs h5,
.blk-rvs h6,
.blk-rvs h7,
.clr-rvs h1,
.clr-rvs h2,
.clr-rvs h3,
.clr-rvs h4,
.clr-rvs h5,
.clr-rvs h6,
.clr-rvs h7  {
  color: var(--nearwhite);
}

.clr-rvs a:link,
.clr-rvs a:visited {
  color: var(--nearwhite);
}

.clr-rvs a:hover {
  text-decoration: underline;
  text-decoration-thickness: 4px;
  text-decoration-color: var(--nearwhite);
  background: unset;
}

.clr-rvs a:link.is-active,
.clr-rvs a:visited.is-active {
  color: var(--nearwhite);
  font-weight: 700;
}

/* Tags in a Node */

.field--name-field-tags {
  margin-block: var(--spc-lg);
}

.field--name-field-tags .field__items {
  display: flex;
  flex-flow: row wrap;
  gap: var(--spc);  
}

.field--name-field-tags .field__item a {
  text-decoration: none;
  color: var(--white);
  background: var(--xdk);
  font-weight: 600;
  text-transform: uppercase;
  border-radius: var(--spc-xsm);
  padding: var(--spc-xsm) var(--spc-sm);
  display: inline;
  transition: 0.2s;
}

.field--name-field-tags .field__item a:hover {
  color: var(--green);
  background: var(--green-lt);
  text-decoration: none;
}

/* Forms */

.form-item input,
.form-item textarea,
.form-item select {
  border: 1px solid var(--green-lt);
  border-radius: var(--spc-xsm);
}
.form-item input,
.form-item textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.form-composite > .fieldset-wrapper > .description,
.form-item .description {
  color: var(--xdk);
}

.form-actions .button {
  color: var(--white);
  background: var(--green);
  border: 1px solid var(--green);
  border-radius: var(--spc-xsm);
  transition: 0.2s;
}

.form-actions .button:hover {
  color: var(--white);
  background: var(--green-lt);
  border: 1px solid var(--green-lt);
}

.form-actions .button:active {
  color: var(--white);
  background: var(--green-lt);
  border: 1px solid var(--green-lt);
}

/* Webform overrides */
.progress-step.is-active .progress-marker::before,
.webform-progress-tracker .progress-step.is-active:hover .progress-marker::before {
  background-color: var(--green-lt);
}

.webform-progress-tracker .progress-step:not(.is-active) .progress-marker::before, .webform-progress-tracker .progress-step:hover .progress-marker::before, .webform-progress-tracker .progress-step .progress-marker::after {
  background-color: var(--greyish);
}

.webform-options-display-buttons label.webform-options-display-buttons-label {
  color: var(--greyish);
  background: var(--nearwhite);
  border-color: var(--greyish);
}
.webform-options-display-buttons input:hover + label.webform-options-display-buttons-label {
  color: var(--green);
  border-color: var(--green);
}
.webform-options-display-buttons input:checked + label.webform-options-display-buttons-label {
  color: var(--xdk);
  font-weight: 500;
  background: var(--green-lt);
  border-color: var(--green);
}

/* ARTICLES */

/* Article "publish on" field */
.article__meta {
  color: var(--greyish);
  border-block-color: var(--greyish);
  display: flex;
  justify-content: space-between;
}

/* Make byline grey */
.author-byline {
  color: var(--greyish);
}

/* Subheader border and text */
.article__subheader {
  color: var(--blue);
  border-block-color: var(--blue);
}
/* Colour palettes */

.colour-palette {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
}
.colour-palette > div {
  flex: 0 0 128px;
  height: 128px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: var(--fs-md);
  font-weight: 500;
}

.xdk {
  background: var(--xdk);
  color: var(--white);
}
.blue {
  background: var(--blue);
  color: var(--white);
}
.green {
  background: var(--green);
  color: var(--white);
}
.green-lt {
  background: var(--green-lt);
  color: var(--xdk);
}
.nearwhite {
  background: var(--nearwhite);
  color: var(--xdk);
  border: 1px solid var(--xdk);
}
.greyish {
  background: var(--greyish);
  color: var(--xdk);
}
.orange {
  background: var(--orange);
  color: var(--white);
}

.blue-xxdk {
  background: var(--blue-xxdk);
  color: var(--white);
}
.blue-xdk {
  background: var(--blue-xdk);
  color: var(--white);
}

.blue-dk {
  background: var(--blue-dk);
  color: var(--white);
}
.blue-lt {
  background: var(--blue-lt);
  color: var(--xdk);
}
.blue-xlt {
  background: var(--blue-xlt);
  color: var(--xdk);
}
.blue-xxlt {
  background: var(--blue-xxlt);
  color: var(--xdk);
  border: 1px solid var(--blue-xxdk);
}

.green2-xxdk {
  background: var(--green2-xxdk);
  color: var(--white);
}
.green2-xdk {
  background: var(--green2-xdk);
  color: var(--white);
}
.green2-dk {
  background: var(--green2-dk);
  color: var(--white);
}
.green2 {
  background: var(--green2);
  color: var(--white);
}
.green2-lt {
  background: var(--green2-lt);
  color: var(--xdk);
}
.green2-xlt {
  background: var(--green2-xlt);
  color: var(--xdk);
}

.green2-xxlt {
  background: var(--green2-xxlt);
  color: var(--xdk);
  border: 1px solid var(--green2-xxdk);
}
.grey-xxdk {
  background: var(--grey-xxdk);
  color: var(--white);
}
.grey-xdk {
  background: var(--grey-xdk);
  color: var(--white);
}

.grey-dk {
  background: var(--grey-dk);
  color: var(--white);
}
.grey {
  background: var(--grey);
  color: var(--xdk);
}
.grey-lt {
  background: var(--grey-lt);
  color: var(--xdk);
}
.grey-xlt {
  background: var(--grey-xlt);
  color: var(--xdk);
}
.grey-xxlt {
  background: var(--grey-xxlt);
  color: var(--xdk);
  border: 1px solid var(--grey-xxdk);
}

.red-dk {
  background: var(--red-dk);
  color: var(--white);
}