/* stylelint-disable declaration-property-unit-allowed-list, no-descending-specificity */
// Typography
//
// Everything around fonts, font size definitions and typeset
// presets. No modular scale, but a sophisticated viewport
// based responsive mixin can be found in _helpers.scss

// Set root size for rems
:root {
  font-size: 62.5%;
}

// Start typography settings
body {
  color: var(--color-paragraph);
  font-family: var(--font-paragraph);
  font-size: var(--font-size-default);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-weight: var(--font-weight-paragraphs);
  text-rendering: geometricPrecision;
}

// Defaults
html,
.editor-styles-wrapper {
  p,
  dd,
  dt,
  figcaption,
  hr,
  small,
  ol,
  ul,
  li,
  blockquote,
  kbd,
  pre,
  samp,
  code,
  th,
  td,
  table,
  tr,
  %default {
    font-size: var(--font-size-paragraphs);
    line-height: var(--line-height-paragraphs);
  }

  // Heading defaults
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    color: var(--color-heading);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-headings);
    margin-bottom: var(--margin-between-paragraphs);
    margin-top: var(--margin-between-paragraphs);
  }

  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: var(--line-height-headings);
  }

  // Define heading scales
  // Current: Perfect fourth: https://type-scale.com/
  h1 {
    font-size: var(--font-size-h1);
  }

  h2 {
    font-size: var(--font-size-h2);
  }

  h3 {
    font-size: var(--font-size-h3);
  }

  h4 {
    font-size: var(--font-size-h4);
  }

  h5 {
    font-size: var(--font-size-h5);
  }

  h6 {
    font-size: var(--font-size-h6);
  }

  h1:first-child,
  h2:first-child,
  h3:first-child,
  h4:first-child,
  h5:first-child,
  h6:first-child {
    margin-top: 0;
  }

  // Lists
  ul {
    list-style: disc outside;
    padding-left: 1.9rem;

    li {
      padding-left: 0;
    }
  }

  ol {
    padding-left: 1.9rem;
  }

  // Bold.
  b,
  strong {
    font-weight: var(--font-weight-bold);
  }

  // Italic.
  em,
  i {
    font-style: italic;
  }

  // Inline small text.
  small {
    font-size: .87em;
  }

  // Default paragraphs
  p {
    margin-bottom: 2.9rem;
    margin-top: 2.9rem;
  }

  // Quotes.
  blockquote {
    border: 0 none;
    clear: both;
    margin: 0;
    padding-bottom: 3rem;
    position: relative;

    p {
      color: var(--color-blockquote);
      font-style: italic;
      margin-bottom: 0;
      overflow: visible;
      position: relative;
    }

    @media (min-width: $container-ipad) {
      margin-top: 4rem;
      padding-bottom: 4rem;
    }

    &::before {
      content: '';
      display: block;
      height: 4px;
      left: 0;
      max-width: 147px;
      position: absolute;
      top: 0;

      @media (min-width: $container-mobile) {
        width: 30%;
      }
    }
  }

  cite {
    display: block;
    font-style: italic;
  }

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

  // images
  img {
    height: auto;
    max-width: 100%;
    vertical-align: middle;
  }

  // Figures and captions
  figure {
    margin-bottom: 1rem;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    position: relative;
  }

  // Figcaption.
  figcaption {
    font-style: normal;
    font-weight: var(--font-weight-paragraphs);
    margin-top: 0;
  }

  kbd,
  pre,
  samp {
    font-family: var(--font-monospace);
  }

  // Code block.
  code {
    background-color: var(--color-background-code-inline);
    border-radius: .3rem;
    color: var(--color-code-block);
    font-family: var(--font-monospace);
    font-size: inherit; // normalize.css sets this as 1em by default
    padding: .37rem .5rem;

    pre & {
      display: inline-block;
      padding: 1.15rem 1rem .85rem;
    }
  }

  // Preformatted text.
  pre {
    border-radius: .3rem;
    display: block;
    margin-bottom: 2rem;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
  }
}