// @file
// Styles for Footer Layout.

@use '../../01-core' as *;

.uw-footer {
  background-color: #000;
  padding: 0;
  width: 100%;
  &__wrapper {
    @include uw-contained-width();
    padding: var(--size-2);
    text-size-adjust: none;
    @media(min-width: $screen-sm) {
      display: grid;
      grid-template-columns: 50% 50%;
    }
    @media(min-width: $screen-md) {
      grid-template-columns: 12.25rem auto 12rem;
    }
    @media(min-width: $screen-lg) {
      grid-template-columns: 25% auto 17rem;
    }
    @media(min-width: $screen-xl) {
      padding: var(--size-2) 0;
    }
  }
  &__address {
    font-family: var(--font-systemmedium);
    font-size: var(--font-size-00);
    -webkit-font-smoothing: antialiased;
    grid-column: 1 / 3;
    grid-row: 1 / 2;
    margin-left: auto;
    margin-right: auto;
    padding: var(--size-1) 0 var(--size-4);
    text-align: center;
    @media(min-width: $screen-md) {
      font-size: var(--font-size-000);
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      margin: 0;
      padding: 0;
      text-align: left;
    }
    @media(min-width: $screen-lg) {
      font-size: var(--font-size-00);
    }
  }
  &__menu {
    -webkit-font-smoothing: antialiased;
    grid-column: 1 / 3;
    padding-bottom: var(--size-1);
    @media(min-width: $screen-sm) {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }
    @media(min-width: $screen-md) {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
    }
  }
  &__social {
    grid-column: 1 / 3;
    grid-row: 3 / 4;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    @media(min-width: $screen-sm) {
      grid-column: 2 / 3;
      grid-row: 2 / 3;
    }
    @media(min-width: $screen-md) {
      grid-column: 3 / 4;
      grid-row: 1 / 2;
      margin: 0;
      padding-left: var(--size-1);
      text-align: left;
    }
  }
  &__social-directory {
    text-align: center;
    @media(min-width: $screen-md) {
      text-align: right;
    }

    a {
      font-family: var(--font-system);
      font-size: var(--font-size-000);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }
  }
  &__territorial {
    a{
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
    grid-column: 1 / 4;
    grid-row: 4 / 5;
    @media(min-width: $screen-md) {
      grid-row: 3 / 4;
    }
  }
}