/* 0.3 - Typography
 * This part of the (s)css handle everything related to the typography
 * like paragraphs, blockquote, etc.
**/

/* 2.2 - Global Typography */

@mixin paragraph() {
  padding:0;
  padding-bottom: $lineheight;
  margin: 0;
}

html, body {
	font-family: $basefont;
	text-align: left;
  font-size:  $fontsize;
	line-height: $lineheight;
	color: getFontColor();
  font-weight: $fontweight_base;
}

strong {
	font-weight: $fontweight_bold;
}

em {
  font-style: italic;
  font-weight: $fontweight_base;
}

a, a:visited, mark {
  text-decoration: none;
  padding: 0.05rem 0.25rem;
  border-radius: 0.1rem;
}

a, a:visited {
  @include background-color($color-link);
  outline-color: $color-link;
  &:hover, &:active {
    color: $color-link;
    background-color: transparent;
  }
}

a:focus-visible, input:focus-visible {
  outline-style: dashed;
  outline-width: 2px;
  outline-offset: 1px;
}

mark {
  background-color: lighten($color-mark, 30%);
  color: inherit;
}

p, ul, ol {
  @include paragraph();
  &:last-child {
    padding-bottom:0;
  }
}

ul, ol {
  list-style: disc;
  ul, ol {
    padding-bottom:0;
    margin:0;
  }
  li {
    margin:0;
    margin-left: $lineheight;
    line-height: $lineheight;
  }
}

::selection, ::-moz-selection {
  @include background-color($color-selection);
}

/* 2.3 - Titles */

@mixin newTitle($size, $weight) {
  $lineNumber: ceil($size / 1.5);
  font-size: $size * 1rem;
  line-height: $lineNumber  * $lineheight;
  font-weight: $weight;
}

h1, h2, h3, h4, h5, h6, h7 {
  font-family: $basefont;
  text-align: left;
	font-size: 1em;
	padding:0;
	margin:0;
	font-weight: $fontweight_base;
  padding-bottom: $lineheight;
}

sup, sub {
  & > a {
    color: $color-link;
    background-color:transparent;
    &:hover, &:focus, &:active {
      color: darken($color-link, 10%);
    }
  }
}

.main-title {
  font-family: $titlefont;
  @include newTitle(3.815, $fontweight_hyper);
}

h1, .title-1 {
  font-family: $titlefont;
  @include newTitle(2.441, $fontweight_hyper);
  color: $color-primary;
}

h2, .title-2 {
  @include newTitle(2.441, $fontweight_big);
}

h3, .title-3 {
  @include newTitle(1.953, $fontweight_bold);
}

h4, .title-4 {
  @include newTitle(1.563, $fontweight_hyper);
}

h5, .title-5 {
  @include newTitle(1.25, $fontweight_bold);
}

h6, .title-6 {
  @include newTitle(1, $fontweight_hyper);
}

/* 2.4 - hr */

hr {
	border: 0px solid rgba(1, 1, 1, 0.15);
	border-bottom: 1px;
	margin: 1.5em;
}

/* 2.5 - Wells and quotes */

@mixin well() {
  border: 0;
  border-radius: $well-radius;

  margin: 0 0 $lineheight 0;
  padding: $lineheight 1rem $lineheight 1rem;

  max-width: 100%;
  font-style: italic;
  @include background-color($color-background-alt);
  box-shadow: $narrow-shadow;
}

blockquote, .quote {
  &:before {
    content:"";
  }
}

blockquote, .quote, .well, pre, .pre, .well-pre {
  @include well();
}

code {
  background:transparent;
  color: $color-danger;
}

.small-text {
  font-size: 0.9em;
}

/* 2.6 - Special styling */

.time {
	font-style: italic;
	text-align: right;
	width: 100%;
	display: block;
}