/* Base Styles */

html {
  font-size: $font-size-base;
}

body {
  color: $text-color;
  font-family: $font-family-base;
  font-size: $font-size-base * 1.125;
  font-weight: 400;
  line-height: 1.7;
}

::-moz-selection {
  background: $text-selection-color;
}

::selection {
  background: $text-selection-color;
}

p {
  margin-bottom: 30px;

  &.lead {
    color: $lead-color;
    font-size: 1.5rem;
    font-weight: 400;
  }

  & ~ ul,
  & ~ ol {
    margin-bottom: 30px;
    margin-top: -25px;
  }
}

a {
  color: $link-color;
  text-decoration: $link-decoration;

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

strong {
  font-weight: 500;
}

small {
  font-size: 1rem;
  line-height: 1.5;
}

hr {
  margin-bottom: 35px;
}

#panel {
  section:first-of-type {
    margin-top: 2rem;
  }
}

/* Header Styles */

$default-font-size: 16;

h1 {
  .subtitle {
    font-size: 18px; // Fallback in pixels
    font-size: (18 / $default-font-size) + rem;
    font-weight: $rubik-regular;

    @include breakpoint(xs) {
      font-size: 16px; // Fallback in pixels
      font-size: (16 / $default-font-size) + rem;
    }
  }
}

@for $i from 1 through length($headings) {
  $heading: nth($headings, $i);

  h#{$i},
  .h#{$i} {
    color: $headings-color;
    font-weight: nth($heading, 5);
    margin-bottom: 10px;

    @include breakpoint(xs) {
      font-size: nth($heading, 2) + px; // Fallback in pixels
      font-size: (nth($heading, 2) / $default-font-size) + rem;
      line-height: nth($heading, 4) + px;
    }
    @include breakpoint(sm) {
      font-size: nth($heading, 2) + px; // Fallback in pixels
      font-size: (nth($heading, 2) / $default-font-size) + rem;
      line-height: nth($heading, 4) + px;
    }
    @include breakpoint(md) {
      font-size: nth($heading, 1) + px; // Fallback in pixels
      font-size: (nth($heading, 1) / $default-font-size) + rem;
      line-height: nth($heading, 3) + px;
    }
  }
}

.content-page h1 {
  .subtitle {
    font-size: 24px; // Fallback in pixels
    font-size: (24 / $default-font-size) + rem;
    font-weight: $rubik-light;

    @include breakpoint(xs) {
      font-size: 20px; // Fallback in pixels
      font-size: (20 / $default-font-size) + rem;
    }
  }
}

@for $i from 1 through length($content-headings) {
  $heading: nth($content-headings, $i);

  .content-page h#{$i},
  .content-page .h#{$i} {
    color: $headings-color-content;
    font-size: nth($heading, 1) + px; // Fallback in pixels
    font-size: (nth($heading, 1) / $default-font-size) + rem;
    font-weight: nth($heading, 4);
    line-height: 1.2;
    margin-bottom: 10px;
    text-transform: nth($heading, 5);
    @include breakpoint(xs) {
      font-size: nth($heading, 3) + px; // Fallback in pixels
      font-size: (nth($heading, 3) / $default-font-size) + rem;
    }
    @include breakpoint(sm) {
      font-size: nth($heading, 2) + px; // Fallback in pixels
      font-size: (nth($heading, 2) / $default-font-size) + rem;
    }
    @include breakpoint(md) {
      font-size: nth($heading, 1) + px; // Fallback in pixels
      font-size: (nth($heading, 1) / $default-font-size) + rem;
    }
  }
}