//
// Typography
// --------------------------------------------------
//
// Credit: Modified based on Typebase.less v0.1.0 | MIT License

// Typesetting variables.
$baseFontSize:       22; // in pixels. This would result in 22px on desktop
$baseLineHeight:     1.5; // how large the line height is as a multiple of font size - 33px
$leading:            $baseLineHeight * 1rem;
// Rate of growth for headings
$scale:              1.333;

// Common font size based on 1.333 ratio - modularscale.com
$font-XXS:           0.563rem;
$font-XS:            0.75rem;
$font-S:             1rem;
$font-M:             1.333rem;
$font-L:             1.777rem;
$font-XL:            2.369rem;
$font-XXL:           3.157rem;
$font-XXXL:          4.209rem;
$font-XXXXL:         5.61rem;

// Font type
$body-primary-font: 'Source Serif Pro', serif;
$title-primary-font: 'PT Sans', sans-serif;
$title-secondary-font: 'Roboto', sans-serif;

/* Setup */

html {
  /* Change default typefaces here */
  font-family: $body-primary-font;
  font-size: $baseFontSize / 16 * 100%; // 14px
  font-weight: 400;
  color: $text-color;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1;
  -webkit-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern";
  -moz-font-feature-settings: "kern=1";
  // -webkit-text-size-adjust: auto
  // -moz-text-size-adjust: auto
  // -ms-text-size-adjust: auto
  // -o-text-size-adjust: auto
  // text-size-adjust: auto
}
/* Copy & Lists */

p {
  line-height: $leading;
  letter-spacing: .01rem;
  margin-top: $leading;
  margin-bottom: 0;
}

p.u--startsWithDoubleQuote {
  text-indent: -0.43em;
}

ul,
ol {
  margin-top: $leading;
  margin-bottom: $leading;
  padding-left: 22px;

  li {
    line-height: $leading;
  }
  ul,
  ol {
    margin-top: 0;
    margin-bottom: 0;
  }
}

blockquote {
  line-height: $leading;
  font-style: italic;
  padding-left: 25px;
  margin-left: -29px;
  border-left: 4px solid $black;

  @media (max-width: $screen-xs-max) {
    padding-left: 15px;
    margin-left: -19px;
  }

  &.u--startsWithDoubleQuote {
    text-indent: -0.40em;
  }

  &.largeQuote {
    line-height: 1.4;
    text-align: center;
    font-size: $font-L;
    margin: $leading -160px 0;
    padding-left: 0;
    border-left: 0;

    @media (max-width: $screen-xs-max) {
      margin: $leading 0 0;
      font-size: $font-M;
      padding-left: 0;
    }

    a {
      background-position: 0 42px;
    }
  }
}
/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  /* Change heading typefaces here */
  font-family: $title-primary-font;
  margin-top: $leading;
  margin-bottom: 0;
  line-height: $leading;
  letter-spacing: -0.02em;
}
h1 {
  font-size: 3 * $scale * 1rem;
  line-height: 3 * $leading;
  margin-top: 2 * $leading;
}
h2 {
  font-family: $title-secondary-font;
  font-size: 2 * $scale * 1rem;
  line-height: 2 * $leading;
  margin-top: 2 * $leading;
  font-weight: 300;
}
h3 {
  /* font-size: 1.33 * $scale * 1rem;
  line-height: 1.34 * $leading;
  margin-top: 1.33 * $leading; */
  font-size: $font-L;
  line-height: 2.18rem;
  margin-top: 1.7rem;
}
h4 {
  font-size: 1 * $scale * 1rem;
}
h5 {
  font-size: 0.8 * $scale * 1rem;
}
h6 {
  font-size: 0.7 * $scale * 1rem;
}

// Link style inspired by Medium.com

a {
	color: $link-color;
	text-decoration: none;
	background-image: linear-gradient(to bottom, rgba($link-color,0) 75%, rgba($link-color,0.8) 75%);
  background-repeat: repeat-x;
  background-position: 0 22px;
  background-size: 2px 2px;

	&:hover {
		color: $link-hover-color;
	}
}

/* Tables */

table {
  margin-top: $leading;
  border-spacing: 0px;
  border-collapse: collapse;
}
td,
th {
  padding: 0;
  line-height: $baseLineHeight * $baseFontSize - 0px;
}
/* Code blocks */

code {
  // Forces text to constrain to the line-height. Not ideal, but works.
  vertical-align: bottom;
  vertical-align: bottom;
  background: #272822;
  color: #f8f8f2;
  text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  font-family: Consolas, Monaco, 'Andale Mono', monospace;
  /* padding: 3px; */
  /* margin: .5em 0; */
  overflow: auto;
  border-radius: 0.3em;
  font-size: 0.8em;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 2px;
  padding-top: 2px;
}

hr {
  border-color: #d5d5d5;
  padding: 0;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  margin: $leading 0;
}

/* Leading paragraph text */

.lead {
  font-size: $scale * 1rem;
}
/* Hug a the block above you */

.hug {
  margin-top: 0;
}

.container--content {
  max-width: 700px; // limit to 65-90 characters per line
}

.is-darkBackgrounded,
.is-darkBackgrounded a,
.is-darkBackgrounded a:hover,
.is-darkBackgrounded a:visited {
  color: #fff;
}