/* Visual aids for dev */
/* .region--footer-top > div:not(.blk-rvs),
.region--footer-bottom > div:not(.blk-rvs) {
  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 {
  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;
}
/* a:has(img)::after {
  all: unset;
} */
a:has(img):hover {
  background: transparent;
}

/* Blockquotes */

blockquote:before,
blockquote:after,
blockquote p:first-child:before,
blockquote p:last-child:after {
  border-color: var(--blue);
}

/* Reverse Colours */

.clr-rvs .region,
.clr--light .region {
  background: unset;
  padding-block: var(--spc);
}

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

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

.clr--light,
.blk--light {
  background: var(--blue-xxxlt);
}

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

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

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

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

/* Tags in a Node */

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

.field--name-field-tags .field__item {
  border-radius: var(--spc-xsm);
  padding: var(--spc-sm);  
}

.field--name-field-tags .field__item {
  background: var(--grey-lt);
}

.field--name-field-tags .field__item a {
  color: var(--white);
  font-weight: 600;
  text-transform: uppercase;
  display: inline;
}

.field--name-field-tags .field__item a:hover {
  color: var(--grey-dk);
}

/* Forms */

.form-item input {
  padding: var(--spc-sm);
  font-size: var(--fs-md);
}

.form-item input,
.form-item textarea,
.form-item select {
  border: 1px solid var(--blue);
  border-radius: var(--spc-sm);
}

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

.form-actions .button {
  color: var(--white);
  background: var(--blue);
  border: none;
  border-radius: var(--spc-sm);
  padding: var(--spc-sm);
  font-size: var(--fs-md);
  text-transform: uppercase;
  transition: 0.2s;
}

.form-actions .button:hover {
  color: var(--blue);
  background: var(--blue-xxlt);
}

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

/* Webform overrides */
.progress-step.is-active .progress-marker::before,
.webform-progress-tracker .progress-step.is-active:hover .progress-marker::before {
  background-color: var(--blue-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(--grey);
}

/* ARTICLES */

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

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

/*** News ***/

.field--name-field-news-publish-date {
  color: var(--grey);
}
.page-node-type-news .field--name-field-news-publish-date {
  border-block-color: var(--grey-lt);
  margin-block-end: var(--spc);
}

/* Colour palettes for samples*/

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

.blue {
  background: var(--blue);
  color: var(--white);
}
.blue-xxlt {
  background: var(--blue-xxlt);
  color: var(--grey-xdk);
}
.grey {
  background: var(--grey);
  color: var(--white);
}
.grey-dk {
  background: var(--grey-dk);
  color: var(--white);
}
.reddish {
  background: var(--reddish);
  color: var(--white);
}

.blue-xxxdk {
  background: var(--blue-xxxdk);
  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-base {
  background: var(--blue-base);
  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);
}
.blue-xxxlt {
  background: var(--blue-xxxlt);
  color: var(--xdk);
}

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

.church-year-blue {
  background: var(--church-year-blue);
  color: var(--white);
}
.church-year-green {
  background: var(--church-year-green);
  color: var(--white);
}
.church-year-purple {
  background: var(--church-year-purple);
  color: var(--white);
}
.church-year-red {
  background: var(--church-year-red);
  color: var(--white);
}
.church-year-white {
  background: var(--church-year-white);
  color: var(--xdk);
}