@charset "UTF-8";

//
// Local Footer
//
// Local footer element to support (above) the global footer.
//
// Markup: templates/components/local-footer/local-footer.twig
//
// Style guide: Identity.Local Footer
//

// Global styles for the local footer.
// ------------------------------------------------
.su-local-footer {
  background-color: $su-color-foggy-light;

  a {
    font-weight: $su-font-regular;
  }

  ul {
    @include list-unstyled;

    > li {
      @include margin(null null 7px null);
    }
  }

  // Signup form tweaks.
  // ------------------------------------------------
  .su-signup-form {
    p {
      font-size: 17px;
    }
  }
}

// Header section for the lockup and weblogin link.
// ------------------------------------------------
.su-local-footer__header {
  position: relative;

  // Lockup placement.
  .su-lockup {
    @include grid-media-between('xs', 'md') {
      @include responsive-spacing('margin-bottom', 2);
    }

    @include grid-media('lg') {
      float: left;
    }
  }

  // Weblogin button.
  .su-link--internal {
    @include button-primary;
    @include box-shadow('shallow');
    @include padding(1rem 1.2rem 1.3rem 2rem);
    border-radius: 7px;

    @include grid-media-between('xs', 'md') {
      @include responsive-spacing('margin-bottom', 1);
      width: auto;
    }

    @include grid-media('lg') {
      float: right;
    }

    &::after {
      background-color: $su-color-white;
    }

    &:hover {
      @include box-shadow('shallow');
    }
  }
}

// Main container styles and spacing.
// ------------------------------------------------
.su-local-footer__columns,
.su-local-footer__header {
  @include centered-column;
  @include responsive-grid-gap;
  @include responsive-spacing('padding-top', 3);
  clear: both;
}

// The resposive behaviour for all contents using grid-area
// --------------------------------------------------------
.su-local-footer__columns {
  @include responsive-spacing('padding-bottom', 3);
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
  "A B"
  "C C";

  @include grid-media('md') {
    @include display-grid;
  }

  @include grid-media('lg') {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
    "A B C"
    "A B C";
  }

  @include grid-media('xl') {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "A B B C";
  }

  // Styles for all the cells.
  // ------------------------------------------------
  .su-local-footer__cell1,
  .su-local-footer__cell2,
  .su-local-footer__cell3 {
    vertical-align: top;
  }

  // Specific to cell1 styles and structure.
  // ------------------------------------------------
  .su-local-footer__cell1 {
    grid-area: A;
  }

  // Specific to cell2 styles and structure.
  // ------------------------------------------------
  .su-local-footer__cell2 {
    grid-area: B;

    @include grid-media-between('xs', 'md') {
      @include responsive-spacing('padding-top', 3);
      @include responsive-spacing('padding-bottom', 1);
    }

    @include grid-media-only('md') {
      grid-area: C;
    }

    // Handle the list of navs with a bit of padding and sizing
    // to get faux columns.
    nav {
      vertical-align: top;

      @include grid-media-only('md') {
        display: inline-block;

        $_gap: map-get($su-grid-gutters, 'md') / 2;
        min-width: calc(49% - #{$_gap});
        max-width: calc(49% - #{$_gap});

        &:last-of-type {
          @include margin(null null null $_gap);
        }

        &:first-of-type {
          @include margin(null $_gap null null);
        }
      }

      @include grid-media('xl') {
        display: inline-block;
        $_gap: map-get($su-grid-gutters, 'xl') / 2;
        min-width: calc(49% - #{$_gap});
        max-width: calc(49% - #{$_gap});

        &:last-of-type {
          @include margin(null null null $_gap);
        }

        &:first-of-type {
          @include margin(null $_gap null null);
        }
      }

      @include grid-media('2xl') {
        $_gap: map-get($su-grid-gutters, '2xl') / 2;
        min-width: calc(49% - #{$_gap});
        max-width: calc(49% - #{$_gap});

        &:last-of-type {
          @include margin(null null null $_gap);
        }

        &:first-of-type {
          @include margin(null $_gap null null);
        }
      }

      &:first-of-type {
        @include responsive-spacing('padding-bottom', 1);
      }
    }
  }

  // IE 11 FIXES FOR GRID
  // ------------------------------------------------
  > .su-local-footer__cell2 {
    // Fun fix for ie and the autoprefixer.
    // It gets confused sometimes.
    @include grid-media('lg') {
      -ms-grid-column-span: 2;
    }
  }

  // Specific to cell3 styles and structure.
  // ------------------------------------------------
  .su-local-footer__cell3 {
    grid-area: C;

    @include grid-media-only('md') {
      grid-area: B;
    }
  }

  // IE 11 FIXES FOR GRID
  // ------------------------------------------------
  > .su-local-footer__cell3 {
    // Fun fix for ie and the autoprefixer.
    // It gets confused sometimes.
    @include grid-media("lg") {
      -ms-grid-row: 1;
      -ms-grid-column: 3;
    }

    @include grid-media("xl") {
      -ms-grid-row: 1;
      -ms-grid-column: 4;
    }
  }
}


// List heading element styles.
// ------------------------------------------------
.su-local-footer__list-heading {
  font-size: 18px;
  line-height: 140%;
}

// Common styles for address and links.
// ------------------------------------------------
.su-local-footer__address,
.su-local-footer__action-links {
  @include responsive-spacing('padding-bottom', 3);
  font-size: 16px;
}

// Address tag formatting and styles.
// ------------------------------------------------
.su-local-footer__address {
  line-height: 140%;
}

// Styling for the action links section.
// ------------------------------------------------
.su-local-footer__action-links {
  a {
    @include link-icon(arrow-right, 0.8em, right, -0.18em);
    font-weight: $su-font-semi-bold;
  }
}

// Styles for the nav list links.
// ------------------------------------------------

.su-local-footer__primary-links,
.su-local-footer__secondary-links {
  ul {
    li {
      font-size: 16px;
    }
  }
}

// Styles for the social links.
// ------------------------------------------------
.su-local-footer__social-links {
  @include list-horizontal;

  li {
    @include padding(null 18px null null);

    &:last-child {
      @include padding(null 0 null null);
    }
  }

  i {
    font-size: 2.5rem;

    // FA is included as a vendor dependency but the class styles are not
    // included so we have to use the mixins and font declarations here.
    &::before {
      @include fa-icon;
      color: $su-color-black;
      font-family: 'Font Awesome 5 Brands';
      transition: color 0.25s ease-out;
    }
  }

  a {
    text-decoration: none;

    span {
      @include sr-only;
    }
  }

  // Font Awesome icons for specific selectors.
  // ------------------------------------------------
  .su-local-footer__social-facebook {
    i {
      &::before {
        content: fa-content($fa-var-facebook-f);
      }
    }

    &:hover,
    &:focus {
      i {
        &::before {
          color: color('Facebook', $su-social-brands);
        }
      }
    }
  }

  .su-local-footer__social-linkedin {
    i {
      &::before {
        content: fa-content($fa-var-linkedin-in);
      }
    }

    &:hover,
    &:focus {
      i {
        &::before {
          color: color('LinkedIn', $su-social-brands);
        }
      }
    }
  }

  .su-local-footer__social-twitter {
    i {
      &::before {
        content: fa-content($fa-var-twitter);
      }
    }

    &:hover,
    &:focus {
      i {
        &::before {
          color: color('Twitter', $su-social-brands);
        }
      }
    }
  }

  .su-local-footer__social-instagram {
    i {
      &::before {
        content: fa-content($fa-var-instagram);
      }
    }

    &:hover,
    &:focus {
      i {
        &::before {
          color: color('Instagram', $su-social-brands);
        }
      }
    }
  }

  .su-local-footer__social-youtube {
    i {
      &::before {
        content: fa-content($fa-var-youtube);
      }
    }

    &:hover,
    &:focus {
      i {
        &::before {
          color: color('YouTube', $su-social-brands);
        }
      }
    }
  }
}
