<h1>Heading mega</h1>

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

<p class="coop-intro-text">Intro paragraph</p>

<p>Paragraph</p>

                            

                            @import "@coopdigital/foundations-vars";
@import "_fonts.css";

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
p,
address,
.coop-h1,
.coop-h2,
.coop-h3,
.coop-h4,
.coop-h5,
.coop-h6 {
  font-family: var(--font-family);
  font-weight: normal;
  margin-top: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.coop-h1,
.coop-h2,
.coop-h3,
.coop-h4,
.coop-h5,
.coop-h6 {
  font-weight: bold;
}

p {
  font-size: var(--type-base--body);
  margin-bottom: var(--spacing-base--1-4);

  &:last-child {
    margin-bottom: var(--spacing-medium--1-2);
  }

  @media (--mq-medium) {
    font-size: var(--type-medium--body);
    margin-bottom: var(--spacing-medium--1-4);
  }
}

ul,
ol {
  font-size: var(--type-base--body);
  margin-bottom: var(--spacing-base--1-4);

  @media (--mq-medium) {
    font-size: var(--type-medium--body);
    margin-bottom: var(--spacing-medium--1-4);
  }
}

.coop-h-mega {
  font-weight: bold;
  font-size: var(--type-base--h-mega);
  line-height: 1.385;
  margin-bottom: var(--spacing-base--1-2);
  padding-top: var(--spacing-base--1-2);

  @media (--mq-medium) {
    font-size: var(--type-medium--h-mega);
    margin-bottom: var(--spacing-medium--1-2);
    padding-top: var(--spacing-medium--1-2);
  }
}

h1,
.coop-h1 {
  font-size: var(--type-base--h1);
  line-height: 1.4;
  margin-bottom: var(--spacing-base--1-2);

  @media (--mq-medium) {
    font-size: var(--type-medium--h1);
    margin-bottom: var(--spacing-medium--1-2);
  }
}

h2,
.coop-h2 {
  font-size: var(--type-base--h2);
  line-height: 1.55;
  margin-bottom: var(--spacing-base--1-2);

  @media (--mq-medium) {
    font-size: var(--type-medium--h2);
    margin-bottom: var(--spacing-medium--1-2);
  }
}

h3,
.coop-h3 {
  font-size: var(--type-base--h3);
  line-height: 1.455;
  padding-top: var(--spacing-base--1-8);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h3);
    padding-top: var(--spacing-medium--1-8);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

h4,
.coop-h4 {
  font-size: var(--type-base--h4);
  line-height: 1.455;
  padding-top: var(--spacing-base--1-8);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h4);
    padding-top: var(--spacing-medium--1-8);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

h5,
.coop-h5 {
  font-size: var(--type-base--h5);
  line-height: 1.455;
  padding-top: var(--spacing-base--1-8);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h5);
    padding-top: var(--spacing-medium--1-8);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

h6,
.coop-h6 {
  font-size: var(--type-base--h6);
  line-height: 1.5;
  padding-top: var(--spacing-base--1-4);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--h6);
    padding-top: var(--spacing-medium--1-4);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

small,
.coop-smallprint {
  line-height: 1.25;
  font-size: var(--type-base--small);
  padding-top: var(--spacing-base--1-4);
  margin-bottom: var(--spacing-base--1-8);

  @media (--mq-medium) {
    font-size: var(--type-medium--small);
    padding-top: var(--spacing-medium--1-4);
    margin-bottom: var(--spacing-medium--1-8);
  }
}

hr,
.coop-hr {
  display: block;
  margin: 2rem 0 3rem;
  border-style: solid;
  border-color: var(--color-grey-mid);
  border-width: 0 0 1px;
  height: 0;
  color: var(--color-grey-mid);

  &.dashed {
    border-style: dashed;
  }
}

.coop-regular {
  font-weight: normal;
  font-style: normal;
}

.coop-italic,
.coop-em {
  font-weight: normal;
  font-style: italic;
}

.coop-bold,
.coop-strong {
  font-weight: bold;
  font-style: normal;
}

.coop-medium {
  font-weight: 500;
  font-style: normal;
}

.coop-bold-italic {
  font-family: bold;
  font-style: italic;
}

blockquote,
.coop-blockquote {
  margin-bottom: var(--spacing-base--1-2);
  margin-left: var(--spacing-base--1-4);
  padding-left: var(--spacing-base--1-4);

  &:before,
  &:after {
    content: '';
    display: block;
    width: 45px;
    height: 6px;
    margin-top: var(--spacing-base--1-4);
    margin-right: 0;
    margin-bottom: var(--spacing-base--1-4);
    margin-left: var(--spacing-base--1-4);
    background: var(--color-grey-light);
  }

  @media (--mq-medium) {
    margin-left: var(--spacing-base--1-2);
  }

  p {
    margin-bottom: var(--spacing-base--1-4);
    font-style: normal;
    font-weight: normal;
    text-indent: -0.25rem;

    &.alpha,
    &.beta {
      font-style: normal;
      font-weight: normal;
    }
  }

  cite {
    font-size: var(--type-base--body);
    font-style: normal;
    margin-top: var(--spacing-base--1-4);
  }
}

cite,
.coop-blockquote__cite {
  display: block;
  font-size: 0.75rem;
}


del,
.coop-line-through {
  text-decoration: line-through;
}

address {
  font-weight: normal;
  font-style: normal;
}

.coop-intro-text {
  font-size: var(--type-base--lead);
  line-height: 1.6;
  margin-bottom: var(--spacing-base--1-8);
}

p + ul {
  margin-top: calc(-1 * var(--spacing-base--1-8));

  @media (--mq-medium) {
     margin-top: calc(-1 * var(--spacing-medium--1-8));
  }
}

dl,
.coop-definition-list {
  font-size: 1rem;
  line-height: 1.6;
  margin-top: 0;
  margin-bottom: var(--spacing-base--1-2);

  dt {
    font-family: var(--font-family);
    font-weight: bold;
    margin-bottom: 0;
  }

  dd {
    font-family: var(--font-family);
    margin: 0 0 var(--spacing-base--1-4);
  }
}

.coop-undecorated-list,
.coop-list-bare {
  list-style-type: none;
  padding: 0;
}

.coop-list-inline {
  list-style-type: none;
  padding: 0;

  li {
    display: inline-block;
  }
}

/* ===================================
 * Links - Co-op Front-end Foundations
 * =================================== */

a {
  color: var(--color-link);
  border-bottom: 0.05em solid var(--color-link);
  text-decoration: none;

  &:hover {
    color: var(--color-link--hover);
    border: 0;
  }

  &:active,
  &:focus {
    transition: none;
    outline: 2px dotted var(--color-link--focus);
    outline-offset: 3px;
  }
}

.link-white {
  color: var(--color-white);
  border-bottom: 0.05em solid var(--color-white);
  text-decoration: none;

  &:hover {
    color: var(--color-white);
    border: 0;
  }

  &:active,
  &:focus {
    transition: none;
    outline: 2px dotted var(--color-white);
    outline-offset: 3px;
  }
}

.link-black {
  color: var(--color-black);
    border-bottom: 0.05em solid var(--color-black);
    text-decoration: none;

    &:hover {
      color: var(--color-black);
      border: 0;
    }

    &:active,
    &:focus {
      transition: none;
      outline: 2px dotted var(--color-black);
      outline-offset: 3px;
    }
}