@use "fonts";
@use "variables/breakpoints";
@use "variables/colours";
@use "variables/spacing";

.wysiwyg {
  *:first-child {
    margin-top: 0;
  }

  *:last-child {
    margin-bottom: 0;
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: colours.$primary;
  font-weight: 700;
  font-family: fonts.$font;
  line-height: 1.1em;
  margin: 1.5em 0 0.25em;
  padding: 0;

  &.section-title {
    margin-top: 0;
  }

  @media screen {
    .knockout & {
      color: colours.$white;
    }
  }
}

h1 {
  font-size: 1.75em;
  margin-top: 0;
}

h2 { font-size: 1.5em; }
h3 { font-size: 1.25em; }

h4,
h5 { font-size: 1.15em; }

@media (min-width: breakpoints.$screen-sm) {
  h1 { font-size: 2.5em; }
  h2 { font-size: 2em; }
  h3 { font-size: 1.5em; }

  h4,
  h5 {
    font-size: 1.25em;
  }
}

p,
li,
td,
label {
  color: colours.$grey;
  font-family: fonts.$font;
  font-weight: 400;
  line-height: 1.5em;
  margin: 0 0 0.8em;
  padding: 0;

  @media screen {
    .knockout & {
      color: colours.$white;
    }
  }
}

a {
  color: colours.$primary;
  text-decoration: none;
  outline: none;
  transition: all 300ms ease;

  &:hover,
  &:focus {
    color: colours.$primary-dark;
    text-decoration: none;
  }

  @media screen {
    .knockout & {
      color: colours.$white;

      &:hover,
      &:focus {
        color: colours.$primary-light;
      }
    }
  }
}

strong { font-weight: 700; }
small { font-size: 0.8em; }

li {
  margin: 0.125em 0;
  line-height: 1.5em;
}

ul,
ol {
  margin: 0 0 0.7em;
  padding: 0 0 0 1.2em;
  text-align: left;
}

.nolist {
  margin: 0;
  padding: 0;
  text-align: inherit;
  list-style: none;

  li {
    margin: 0;
    padding: 0;
  }
}

hr {
  margin: 1.5em auto 2em;
  height: 0;
  border: 0 solid colours.$grey-light;
  border-width: spacing.$borderThin 0 0;

  @media screen {
    .knockout & {
      border-color: colours.$white;
    }
  }
}

.align {
  &-centre {
    text-align: center;
  }

  &-right {
    text-align: right;
  }
}