/* 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 {
  background: 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;
}

/* Reverse Colours */

.clr--reverse--green {
  background: var(--green-lt);
}

/* Dev helper */
/* .clr--reverse .region {
  border: 1px solid var(--nearwhite);
}
.clr--reverse .block,
.block--reverse .block {
  border: 1px dashed var(--nearwhite);
} */


.clr--reverse,
.block--reverse {
  background: var(--green);
  color: var(--nearwhite);
}
.clr--reverse .region {
  background: unset;
}

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

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

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

.clr--reverse a:link.is-active,
.clr--reverse 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 {
  background: var(--grey-xlt);
  border: none;
  border-radius: var(--spc-xsm);
}

.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);
}