// -------------------------- //
// HEADINGS
//
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  line-height: @headings-line-height;
  font-weight: @headings-font-weight;
  color: @gray-darker;
  // TOPLINE
  span:not([class]):not([class=""]) {
    font-size: 16px;
    color: @hwk-blue-light;
    display: block;
    @media (max-width: @screen-xs-max) {
    	font-size: @font-size-xs;
    }
  }

  &.white {
    &, span {
      color: #fff !important;
    }
  }
}

h1, .h1 {
  margin-bottom: 25px;
  span {
    margin-bottom: 15px;
  }
  @media (max-width: @screen-xs-max) {
    font-size: 28px;
    margin-bottom: 15px;
  }
}

h2, .h2 {
  margin-bottom: 20px;
  @media (max-width: @screen-xs-max) {
    font-size: 24px;
    margin-bottom: 10px;
  }
  span {
    margin-bottom: 7px;
  }
}

h3, .h3 {
  margin-bottom: 12px;
  span {
    margin-bottom: 7px;
  }
  @media (max-width: @screen-xs-max) {
    font-size: 22px;
  }
}

h4, .h4 {
  margin-bottom: 12px;
  padding-bottom: 0;
  span:not([class]):not([class=""]) {
    font-size: 14px;
    margin-bottom: 5px;
  }
}

h5, .h5 {
  font-size: @font-size-h5;
  margin: 0;
  padding-bottom: 0;
  color: @text-color;
  span:not([class]):not([class=""]) {
    font-size: @font-size-xs;
  }
}

h6, .h6 {
  font-size: @font-size-h6;
  margin: 0;
  padding-bottom: 0;
  color: @text-color;
  span:not([class]):not([class=""]) {
    font-size: @font-size-xs;
  }
}

//
// LINK common
// define here to overwrite easily
// --------------------------------
a:not(.a-not-common), button.btn-link {
  border-bottom: 1px dotted @text-color;
  color: @link-color;
  &:active,
  &:hover,
  &:focus {
    text-decoration: none;
    background-color: @hwk-blue-light-25;
  }
}

// remove dotted line from known elements
.carousel,
.dropdown,
.listgroup-wrapper,
.navbar-fixed-top,
#nav-level-3,
.panel-heading,
.section-teaser,
.site-footer {
  a {
    border-bottom: unset;
    &:hover,
    &:focus {
      background-color: unset;
    }
  }
}
a.btn {
  border-bottom: unset;
  &:hover,
  &:focus {
    background-color: unset;
  }
}
// --------------------------------

//
// TEXT
// --------------------------
p {
  font-size: @font-size-base-p;
  margin-bottom: 0;
  padding-bottom: (@line-height-computed / 2);
  line-height: 1.5;
  @media (max-width: @screen-xs-max) {
  	 font-size: @font-size-base-p - 2;
  }

  & + p {
    margin-top: 16px;
  }
  .glyphicon {
    top: 5px;
    //line-height: @line-height-p; // causes staircase effect with <br>
  }
}

.small + .small {
  margin-top: 10px;
}

.center {
  text-align: center
}

.lead {
  font-size: @font-size-base-p;
  font-weight: @font-weight-bold;
  line-height: 1.5;
  margin-bottom: 20px;
  @media (max-width: @screen-xs-max) {
    font-size: 18px;
    margin-bottom: 10px;
  }
}

.small, .font-size-small {
  font-size: @font-size-small;
  line-height: 22px;
  .glyphicon {
    line-height: 1.2;
  }
}

.small-xs, .font-size-xs {
  font-size: @font-size-xs;
}
.small-xxs, .font-size-xxs {
  font-size: @font-size-xxs;
}

figure {
  position: relative;
  figcaption {
    margin-top: 5px;
    font-size: @font-size-xs;
    //color: @gray;
  }
}

.note, figcaption {
  font-size: 10px;
  margin-top: 8px;
}

.note {
  color: @gray;

  &.inside {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    color: white;
    width: 100%;
    background: rgba(0, 0, 0, .2);
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
    padding: 30px 20px 10px 20px;
    
    &.right {
      text-align: right;
    }
  }
}

//
// ICONS
// --------------------------
.glyphicon {
  font-family: "HWK IconFont";
  font-size: 24px;
  width: 32px;
  text-align: center;
  display: block;
  text-align: center;
  float: left;
}
.d-block .glyphicon,
.d-block.glyphicon {
  float: none;
}

// @since 2.0.3
.glyphicon.d-inline-block {
  float: none !important;
}
p .glyphicon.d-inline-block {
  top: 2px;
}

.glyphicon-hero {
  font-size: 32px;
  padding-bottom: 5px;
  float: none;
}
.small .glyphicon {
  font-size: 22px;
  top: 1px;
  width: 30px;
}

//
// BLOCKQUOTES
// --------------------------
blockquote {

  &, &.color-hwk-blue-light, .color-hwk-blue-light {
    --blockquote-color: @hwk-blue-light;
  }

  &.color-hwk-blue-dark, .color-hwk-blue-dark {
    --blockquote-color: @hwk-blue-dark;
  }

  &.color-hwk-red-dark, .color-hwk-red-dark {
    --blockquote-color: @hwk-red-dark;
  }

  &.color-hwk-orange, .color-hwk-orange {
    --blockquote-color: @hwk-orange;
  }

  &.color-hwk-green-dark, .color-hwk-green-dark {
    --blockquote-color: @hwk-green-dark;
  }

  position: relative;
  padding: 0;
  margin: 40px 0;
  border: none;

  &, p {
    font-size: @font-size-large;
    font-style: italic;
    //font-weight: @font-weight-bold;
  }

  footer {
    &::before {
      display: none;
    }
  }

  cite {
    font-size: @font-size-small;
    font-weight: @font-weight-normal;
  }

  // quotes
  &::before, &::after {
    font-weight: @font-weight-normal;
    font-size: 110px;
    position: absolute;
    line-height: 1;
  }

  &::before {
    content: '»';
    top: -40px;
    left: -60px;
  }

  &::after {
    content: '«';
    bottom: 6px;
    right: -44px;
  }

  // colors
  &, p, cite, &::before, &::after {
    // default
    color: @hwk-blue-light;
    color: var(--blockquote-color);
  }

  @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
    margin: 40px;
  }
  @media (max-width: @screen-xs-max) {
    margin: 20px 20px;
    &::before, &::after {
      font-size: 60px;
    }
    &::before {
      top: -20px;
      left: -35px;
    }
    p, & {
      font-size: @font-size-base-p - 2;
    }
    &::after {
      bottom: 20px;
      right: -30px;
    }
  }
}

// icon + text
// handle extrem long text line wrap
// needs <a> to be outside icon:
/*
<p class="icon-text-block">
  <span class="glyphicon glyphicon-xxx"></span>
  <a href="#"><span class="link-text">Linktext</span></a>
</p>
*/
.icon-text-block {
  display: flex;
  .glyphicon {
    flex-basis: 32px;
  }
  .small, &.small {
    .glyphicon {
      flex-basis: 30px;
    }
  }
  a:not(.btn) {
    flex: 1;
    border-bottom: unset;

    &:hover,
    &:focus {
      background-color: unset;
      .link-text {
        text-decoration: none;
        background-color: @hwk-blue-light-25;
      }
    }
    .link-text {
      border-bottom: 1px dotted @text-color;
    }
  }
}


//
// inside CONTENT
// --------------------------
.content {

  ul:not(.nav-tabs):not(.pagination):not(.aria-structure) {
    margin-left: 25px;
    margin-bottom: 22px;
    list-style: none;
    padding: 0;
    color: @hwk-blue-light;

    li {
      position: relative;
      font-size: @font-size-base-p;
      margin-bottom: 12px;
      @media (max-width: @screen-xs-max) {
        font-size: 18px;
      }

      &::before {
        content: '\25A0';
        position: absolute;
        top: -2px;
        left: -20px;
        /* Safari ios only */
        @supports (-webkit-touch-callout: none) {
          font-size: 14px;
          top: 4px;
          left: -22px;
        }
      }

      span {
        color: @text-color;
      }
    }

    &.list-icon-check li,
    li.list-icon-check {
      &::before {
        content: '\E013';
        font-family: @icon-font-name;
        top: 0px;
        left: -25px;
      }
    }
  }
}

// @since 2.0.6
ol {
  padding: 0;
  margin-left: 25px;
  li {
    font-size: @font-size-base-p;
    margin-bottom: 12px;
    @media (max-width: @screen-xs-max) {
      font-size: 18px;
    }
  }
}