body {
  font-weight: var(--font-weight-light);
}

input[type="submit"],
button {
  transition: var(--transition-time);
}

/*
  I'm putting cta-style-button styling here as it's applied via wysiwyg
  to <a> items.
*/
.cta-style-button,
.media-with-text--featured a.media-with-text__link {
  display: inline-block;
  padding: var(--spacing);
  border: var(--border);
  border-color: var(--color-accent-dark);
  border-radius: var(--border-radius-large);
  text-decoration: none;
}
.cta-style-button:focus,
.media-with-text--featured a.media-with-text__link:focus,
.cta-style-button:hover,
.media-with-text--featured a.media-with-text__link:hover
{
  text-decoration: underline;
}

.lgd-page-section--bg-colour-1 .cta-style-button--light,
.lgd-page-section--bg-colour-2 .cta-style-button--light,
.lgd-page-section--bg-colour-3 .cta-style-button--light,
.cta-style-button--light {
  color: var(--color-accent-dark);
  background-color: var(--color-white);
}
.lgd-page-section--bg-colour-1 .cta-style-button--light:focus,
.lgd-page-section--bg-colour-1 .cta-style-button--light:hover,
.lgd-page-section--bg-colour-2 .cta-style-button--light:focus,
.lgd-page-section--bg-colour-2 .cta-style-button--light:hover,
.lgd-page-section--bg-colour-3 .cta-style-button--light:focus,
.lgd-page-section--bg-colour-3 .cta-style-button--light:hover,
.cta-style-button--light:focus,
.cta-style-button--light:hover {
  color: var(--color-white);
  background-color: var(--color-accent-dark);
}

.lgd-page-section--bg-colour-1 .cta-style-button--dark:focus,
.lgd-page-section--bg-colour-1 .cta-style-button--dark:focus,
.lgd-page-section--bg-colour-2 .cta-style-button--dark:focus,
.lgd-page-section--bg-colour-2 .cta-style-button--dark:hover,
.lgd-page-section--bg-colour-3 .cta-style-button--dark:hover,
.lgd-page-section--bg-colour-3 .cta-style-button--dark:hover,
.media-with-text--featured a.media-with-text__link:hover,
.media-with-text--featured a.media-with-text__link:focus,
.cta-style-button--dark:focus,
.cta-style-button--dark:hover {
  color: var(--color-accent-dark);
  background-color: var(--color-white);
}
.lgd-page-section--bg-colour-1 .cta-style-button--dark,
.lgd-page-section--bg-colour-2 .cta-style-button--dark,
.lgd-page-section--bg-colour-3 .cta-style-button--dark,
.media-with-text--featured a.media-with-text__link,
.cta-style-button--dark {
  color: var(--color-white);
  background-color: var(--color-accent-dark);
}

.field--name-field-media-image img {
  width: 100%;
}

/* Adds a little fix for login button */
.user-login-form .form-submit:hover {
  background-color: var(--color-accent-dark);
}

a:hover {
  color: var(--color-accent);
}

.tablefield-wrapper {
  width: 100%;
  overflow: auto;
  table {
    table-layout: fixed;
  }
}



input[type="submit"]:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 0;
  box-shadow: inset 0 0 0 3px;
  border-color: var(--color-black);
  background-color: var(--color-white);
  color: var(--color-black);
}