/* Base typography styles */

body {
  -webkit-font-smoothing: antialiased;
}

/* Reset font-size in articles containers. */
@media screen and (min-width: 1200px) {
  main {
    word-wrap: break-word;

    p,
    ul,
    ol,
    dl,
    .ut-copy {
      font-size: 1.125rem;
    }
  }
}

blockquote {
  margin: 3rem 2.5rem;
  padding: 1rem 1.5rem;
  border-left: 5px solid var(--ut-limestone--t60);
  background: var(--ut-shade--t20);
}

blockquote * {
  margin-bottom: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* Headings */
.ut-headline,
.ut-headline--lg,
.ut-headline--xl {
  color: var(--ut-charcoal);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: .5rem;
  padding-bottom: 0;
}

.ut-headline {
  font-size: 1.125rem;

  @media screen and (min-width: 1200px) {
    font-size: 1.25rem;
  }
}

.ut-headline--lg {
  font-size: 1.25rem;

  @media screen and (min-width: 1200px) {
    font-size: 1.5625rem;
  }
}

.ut-headline--xl {
  font-size: 1.5625rem;

  @media screen and (min-width: 1200px) {
    font-size: 2rem;
  }
}

.ut-headline--underline {
  border-bottom: solid 2px var(--ut-bluebonnet);
  margin-bottom: 1.25rem;
  padding-bottom: 0.3rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
.ut-h1,
.ut-h2,
.ut-h3,
.ut-h4,
.ut-h5,
.ut-h6 {
  color: var(--ut-charcoal);
}
h1,
.ut-h1 {
  font-size: 3.0625rem;
  line-height: 1.143;
  font-weight: 600;
}
h2,
.ut-h2 {
  font-size: 2.4375rem;
  line-height: 1.154;
  font-weight: 500;
}
h3,
.ut-h3 {
  font-size: 1.5625rem;
  line-height: 1.25;
  font-weight: 500;
}
h4,
.ut-h4 {
  font-size: 1.25rem;
  line-height: 1.25;
  font-weight: normal;
}
h5,
.ut-h5 {
  font-size: 1rem;
  line-height: 1.5625;
  font-weight: 600;
}
h6,
.ut-h6 {
  font-size: 0.8125rem;
  line-height: 1.385;
  font-weight: 600;
}

/* Lists */

/* Revert-layer is needed to support case-sensitivity. See
https://html.spec.whatwg.org/multipage/semantics-other.html#case-sensitivity-of-selectors */
ol,
ol ol,
ol ol ol,
ol ol ol ol {
  list-style-type: revert-layer;
}
/* Declare format for nested ordered lists */
/* The `not` declarations are necessary to allow overriding defaults (FA #471) */
ol:not([type="a"], [type="A"], [type="i"], [type="I"], [type="1"]) {
  >li {
    list-style-type: decimal;

    >ol:not([type="a"], [type="A"], [type="i"], [type="I"], [type="1"]) {
      >li {
        list-style-type: upper-alpha;

        >ol:not([type="a"], [type="A"], [type="i"], [type="I"], [type="1"]) {
          >li {
            list-style-type: upper-roman;

            >ol:not([type="a"], [type="A"], [type="i"], [type="I"], [type="1"]) {
              >li {
                list-style-type: decimal;

                >ol:not([type="a"], [type="A"], [type="i"], [type="I"], [type="1"]) {
                  >li {
                    list-style-type: lower-alpha;

                    >ol:not([type="a"], [type="A"], [type="i"], [type="I"], [type="1"]) {
                      >li {
                        list-style-type: lower-roman;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/* Tables */
table {
  &.border-1 {

    th,
    td {
      border: 1px solid var(--ut-limestone--t60);
    }
  }

  &.border-2 {

    th,
    td {
      border: 2px solid var(--ut-limestone--t60);
    }
  }

  a {
    overflow-wrap: break-word;

    &:link {
      overflow-wrap: break-word;
    }

    &:visited {
      overflow-wrap: break-word;
    }
  }
}
/* Tablesaw tables. */
/* Add a background color for table headers. */
.tablesaw thead {
  background: var(--ut-charcoal--t20);
}
/* Defaults to no border if border attribute is used. */
table[border].tablesaw {

  th,
  td {
    border: 0;
  }
}
/* Add borders to 640px screen sizes and up. */
@media screen and (min-width: 640px) {
  table[border="1"].tablesaw {

    th,
    td {
      border: solid 1px var(--ut-limestone--t60);
    }
  }

  table[border="2"].tablesaw {

    th,
    td {
      border: solid 2px var(--ut-limestone--t60);
    }
  }
}