_pageFooter.scss

// @ifdef DEV
@import "dev-imports";
// @endif

.site-footer {
  @extend %grid-row-default;
  position: relative;
  padding: 0 $defaultPadding 160px $defaultPadding;
  background: $darkBackgroundColor;
  min-height: 180px;

  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    @extend %bg-pattern;
  }

  .footer-headline {
    margin: 30px 0 15px 0;
    font-weight: $fontWeightMedium;
    font-size: 18px;
  }

  .icon { @extend %icon-base; }

  .icon:before {
    width: 20px;
    text-align: center;
    display: inline-block;
  }

  a {
    display: block;
    width: 100%;
  }

  ul {
    li {
      display: block;
      background-image: none;
      background-position: 0;
      background-color: transparent;
      padding: 5px 0 10px 0;
    }
  }
}

.nav-footer {
  @extend %inverted-text;

  font-weight:normal;
  font-style:normal;
  speak:none;
  text-decoration:inherit;
  text-transform:none;
  color: $footerTextColor;

  span { margin: 20px 0 0 15px; }

  .social, .additional, .categories { @include col(1); }

  .social {
    padding-bottom: $defaultPadding;
    border-bottom: 1px solid $footerTextColor;

    span { display: none; }

    li {
      float: left;
      @include col(1/4);
      text-align: center;
      position: relative;
      font-size: 1rem;
      padding: $defaultPadding 0;
    }

    li:before {
      content: '|';
      position: absolute;
      left: 0;
    }

    li:first-child:before { content: ''; }
  }

  .categories {
    .categories-list {
      @extend %grid-row-default;

      ul {
        @include col(1);
        padding: 0;

        li {
          border-top: 1px solid $footerTextColor;
          padding: 10px 0;
          font-size: 1rem;

          p {
            position: absolute;
            right: 40px;
            display: inline-block;
          }
        }
      }
    }
  }

  .additional { display: none; }
}

.footer-logo {
  position: relative;
  left:0;
  top: 35px;
  z-index: 1;
  height: 35px;

  img {
    position: absolute;
    right: 5px;
  }
}

/* bottom navigation part */

.footer-main-nav  {
  @include col(1);
  position: relative;
  right: 0;
  color: $footerTextColor;
  z-index: 1;

  .main-list {
    @include col(1);
    font-size: 0.938rem;
    position: absolute;
    right: 0;
    top: 0;
  }

  ul {
    position: absolute;
    right: 0;
    top: 35px;

    li {
      display: inline-block;
      background: $darkBackgroundColor;
      padding: 2px 10px;
      margin: 0 4px;
      text-transform: uppercase;
    }
  }

  .copy,
  .footer-initiative {
    color: $lightTextColor;
  }

  .footer-initiative  { top: 45px; }
  .second-row { top: 80px; }
  .first-row { top: 115px; }
}



@include mq(800px) {
  .site-footer {
    padding: 0 $defaultPadding 50px $defaultPadding;

    &:after {
      height: 70px;
    }
  }

  .nav-footer {
    .social, .additional, .categories { width: colWidth(1/4); }
    .social { border: none; }
    .social span {
      display: inline-block;
      margin: 0 0 0 $defaultPadding;
    }

    .social li {
      width: colWidth(1);
      padding: 10px 0;
      text-align: left;
    }

    .social li:before {
      content: '';
    }

    .categories {
      width: colWidth(2/4);

      .categories-list {
        padding: 0;

        ul {
          width: colWidth(1/3);
          padding: 0;

          li {
            border: none;
            p { display: none; }
          }
        }
      }
    }

    .additional { display: inline-block; }
  }

  .footer-logo {
    top: 0;
    img { position: static; }
  }

  .footer-main-nav {
    .main-list {
      top: 10px;
      padding: 0;
    }

    ul {
      position: static;
      display: inline-block;
    }
  }
}