/* Variables */

/* Typography - Foundation overrides */
button,
input{
  font-family: inherit;
}

@mixin heading($heading){
  line-height: 1.2;
  font-size: map-get(map-get(map-get($header-styles, small), $heading), 'font-size') / 16 + em;

  @include breakpoint(medium){
    font-size: map-get(map-get(map-get($header-styles, medium), $heading), 'font-size') / 16 + em;
  }
}

.heading1{
  font-weight: 600;

  @include heading(h1);

  line-height: 1.1;
}

.heading2{
  @include heading(h2);
}

.heading3{
  @include heading(h3);
}

.heading4{
  @include heading(h4);
}

.heading5{
  @include heading(h5);
}

.heading6{
  text-transform: uppercase;
  letter-spacing: .03em;
  font-weight: 600;

  @include heading(h6);
}

.heading-small{
  font-size: 1rem;
}

hr{
  width: 50%;

  &.reset{
    width: 100%;
  }
}

/* New typographic styles */

.section-heading{
  position: relative;
  margin-bottom: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1.125em;
  letter-spacing: .05em;

  &::before{
    content: "";
    display: inline-block;
    width: 4px;
    height: .8em;
    background-color: $primary;
    margin-right: .5rem;
    margin-bottom: -.1rem;
  }

  &.collapse{
    margin: 0;
  }
}

.mini-title{
  color: $muted;
  text-transform: uppercase;
  font-size: .9rem;
  letter-spacing: .01em;
  font-weight: 600;
  margin-bottom: 0;

  &__strong{
    color: $body-font-color;
    font-size: 1.2rem;
    font-weight: 800;
  }

  &__strong--highlight{
    font-size: 1.4rem;
  }
}

.page-title{
  margin-bottom: 3rem;
}

.text-highlight{
  margin-bottom: 0;
  color: $white;
  text-shadow: 0 0 10px rgba(black, .8);

  &.heading1{
    font-weight: 800;
  }

  > a{
    color: inherit;

    &:hover{
      color: $primary;
    }
  }
}

.text-large{
  font-size: 130%;
}

.text-medium{
  font-size: 90%;
  color: $muted;
}

.text-small{
  font-size: 80%;
  color: $muted;
}

.text-uppercase{
  text-transform: uppercase;
}

.text-lowercase{
  text-transform: lowercase;
}

.text-ellipsis{
  @include ellipsis();
}

.text-compact{
  line-height: 1;
}

.word-wrapper{
  display: inline-block;
}

/* HTML inline text elements. Modifiers color text */
a,
abbr,
acronym,
b,
bdo,
big,
br,
button,
cite,
code,
dfn,
em,
i,
img,
input,
kbd,
label,
map,
object,
q,
samp,
script,
select,
small,
span,
strong,
sub,
sup,
textarea,
time,
tt,
var{
  @include modifiers(color, (muted: $muted));
}