// Footer Navigation
//
//  - All navigation elements should have a `<nav>` tag.
//  - If you have to use a more generic element such as a `<div>`, add `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
//  - Menus should be labeled according to their individual function. Use can use `class="visuallyhidden">`, `aria-label=""`, or `aria-labelledby=""` to easily add context to the different menus on your site.
//
// <section data-action="aria-toggle" class="atblock"><h3 class="atblock__title"><a href="#navbar-footer_guide">WCAG 2.1 Guidelines</a></h3><div id="navbar-footer_guide" class="atblock__panel guidelines"><p><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-focus-order" target="_blank">2.4.3 Focus Order</a> - If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation, focusable components receive focus in an order that preserves meaning and operability. (Level A)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-mult-loc" target="_blank">2.4.5 Multiple Ways</a> - More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-focus-visible" target="_blank">2.4.7 Focus Visible</a> - Any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible. (Level AA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-location" target="_blank">2.4.8 Location</a> - Information about the user's location within a set of Web pages is available. (Level AAA)<br><br><a href="https://www.w3.org/WAI/WCAG21/quickref/#qr-ensure-compat-rsv" target="_blank">4.1.2 Name, Role, Value</a> - For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)</p></div><div class="markup"></div></section>
//
//
//
// Markup: navigation-footer.twig
//
// Style guide: Navigation.navigation-footer

// Import site utilities.
@import '../../global/utils/init';

.footer {
  @include clearfix;
  float: left;
  clear: both;
  width: 100%;
  background: $color-midnight;
  position: relative;

  input[type='search'] {
    max-width: 60%;
    width: 100%;

    @include breakpoint($bp-md) {
      max-width: 60%;
      width: 100%;
    }
  }

  h2 {
    text-align: left;
    color: $color-white;
    text-transform: uppercase;
  }

  a {
    color: $color-white;
    text-decoration: underline;

    &:hover,
    &:focus {
      color: $color-cherry;
      text-decoration: underline;
    }
  }

  li {
    margin: 0 -18px 10px;
    list-style: none;
    color: $color-white;
  }

  .buttons {
    text-align: center;

    @include breakpoint($bp-md) {
      text-align: left;
    }
  }

  .button {
    @include button;
    width: 175px;
  }

  /* Navigation */
  .navigation {
    display: block;
    float: left;
    text-align: left;
  }

  .navigation__link {
    display: block;
    padding-right: $padding-md;
    line-height: 1;
    padding-bottom: 5px;
  }

  .navigation--social {
    display: block;
    float: none;
    margin: 0 auto 2rem;
    width: 100%;
    text-align: center;

    @include breakpoint($bp-md) {
      float: left;
      margin: 0 auto;
    }

    .navigation__link {
      padding: $padding-sm 0 $padding-sm $padding-xsm;
      margin: 0;
      display: inline-block;
    }

    .navigation__menu {
      @include clearfix;
      margin: 0 auto;
      float: none;

      @include breakpoint($bp-md) {
        float: left;
        padding-left: 0;
      }
    }
  }

  /* Social Icons */
  .icon {
    background-position: center;
    background-size: inherit;
    margin-top: -$padding-sm;
  }

  .first {
    margin-left: 0;
  }

  .last {
    margin-right: 0;
  }
}

/* submit input */
.footer__submit {
  text-align: left;
  padding-bottom: $padding-md;
  width: 100%;
  max-width: 350px;
  position: relative;

  .form-float-label {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .submit-block-form {
    position: relative;
    margin: auto;
    border-radius: $border-rd-sm;
    overflow: hidden;

    @include breakpoint($bp-md) {
      margin: 0;
    }
  }

  .form-text {
    width: 100%;
    padding-right: 11rem;
    border: 1px solid $color-silver;
  }

  .form-actions {
    float: right;
  }

  .form-submit {
    background: $color-cherry;
    color: $color-white;
    border: 0;
    border-radius: 0 $border-rd-sm $border-rd-sm 0;
    position: relative;
    margin-top: -72px;
    float: right;
    margin-right: -10px;
    padding: 1.5rem $padding-md 1.5rem 1.75rem;

    &:hover,
    &:focus,
    &:active {
      border: 0;
    }
  }
}

.footer__top {
  padding: $padding-md;

  @include breakpoint($bp-md) {
    padding: $padding-lg $padding-md;
  }
}

.footer__title,
.block__title {
  color: $color-white !important; // sass-lint:disable-line no-important
}

.block--mailchimp-signup-newsletter-subscribe {
  float: none;

  @include breakpoint($bp-sm) {
    float: right;
    max-width: 275px;
  }

  @include breakpoint($bp-md) {
    max-width: 100%;
  }
}

/* Credits and social */
.footer__credits {
  background: $color-black;
  color: $color-white;
  text-align: center;
  padding: 0;

  @include breakpoint($bp-md) {
    text-align: left;
  }
}

.footer__copyright {
  margin: 0;
  padding: $padding-md $padding-md 0;
  text-align: center;
  margin-bottom: -$padding-sm;

  @include breakpoint($bp-md) {
    padding: $padding-md;
    margin-bottom: 0;
  }
}

.l-region--footer-bottom {
  width: 100%;
}

.footer .l-center {
  @include clearfix;
  padding: 0 $padding-sm $padding-md-lg;
  max-width: 700px;
  margin: 0 auto;

  @include breakpoint($bp-xsm) {
    padding: 0 $padding-md $padding-md-lg;
  }

  @include breakpoint($bp-md) {
    padding: 0 $padding-md-lg;
  }
}

.footer__flex {
  flex-direction: column;
  display: flex;

  @include breakpoint($bp-md) {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

.footer__left {
  width: 100%;
  float: left;
  padding-top: 3rem;

  @include breakpoint($bp-sm) {
    width: 50%;
    padding-right: 0;
  }
}

.footer__right {
  width: 100%;
  max-width: 300px;
  float: left;
  padding-top: 3rem;

  @include breakpoint($bp-sm) {
    width: 50%;
    padding-right: 0;
    float: right;
  }

  ul {
    float: left;
    clear: right;
    position: relative;
    width: 50%;
  }
}

.footer__left-social {
  width: 100%;
  clear: both;
  text-align: center;
  margin: 0 auto;

  @include breakpoint($bp-md) {
    width: 50%;
    padding-right: $padding-md;
  }
}

.footer__right-search {
  width: 100%;
  clear: both;
  margin: 0 auto;
  text-align: center;

  @include breakpoint($bp-md) {
    width: 50%;
    padding-right: 0;
    text-align: left;
  }
}
