/* 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);
}

h1, h2, h3, h4, h5, h6, h7 {
  color: var(--grey-xdk);
}

/* Links */

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

a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

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


/* a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .07em;
  height: .1em;
  width: 100%;
  /* background: linear-gradient(110deg, var(--blue-xlt), var(--blue), var(--blue-xdk); */
  /* background: transparent;
  z-index: -1;
  transition: height .25s cubic-bezier(.6,0,.4,1);
} */

article a:link,
form a:link,
p a:link {
  text-decoration-color: var(--blue);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 2px;
}

article a:visited,
form a:visited,
p a:visted {
  color: var(--blue);
}

article a:hover,
form a:hover,
p a:hover {
  color: var(--xdk);
  text-decoration-thickness: 4px;
}

/* a:hover::after {
  background: var(--blue);
  height: .3em;
} */

/* links that wrap images */
a:has(img) {
  display: block;
  line-height: 1;
}
/* a:has(img)::after {
  all: unset;
} */
a:has(img):hover {
  border: 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 */

/* 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);
}

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

/* 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);
}