@use "sass:list";
@use "../partials/palette";

header,
footer {
  height: auto;
  width: 100%;
  position: relative;
  display: block;

  ul[class$="--Container"] {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: baseline;

    & > li {
      flex: none;
      align-self: center;
      padding: 0 0 1rem;
    }

    ul[class$="--Navigation"],
    ul[class$="--Links"] {
      padding-top: 1.5rem;
      display: flex;
      flex-flow: row nowrap;
      align-items: baseline;

      li {
        flex: none;
        align-self: center;
        padding-right: 2rem;
        &:last-of-type {
          padding-right: 0;
        }
      }

      a {
        text-decoration: none;
      }
    }
    ul[class$="--Navigation"] {
      justify-content: center;
    }
    ul[class$="--Links"] {
      justify-content: right;
    }
  }
}

#tor_logo {
  margin-top: 1rem;
  display: block;
  img {
    margin: 0 auto 0 0;
    padding: 0;
    display: block;
    max-height: 2rem;
  }
}

header {
  background-color: list.nth(palette.$purple, 8);
  color: palette.$white;
  p,
  a {
    color: palette.$white;
  }
  ul[class$="--Container"] {
    flex-flow: row wrap;

    & > li:first-of-type {
      padding-left: 1.5rem;
    }

    & > li:last-of-type {
      padding-right: 1.5rem;
    }

    ul[class$="--Navigation"] {
      padding-top: 0.75rem;
      a {
        // provide more target to click or tap
        padding: 1rem 0;
        &:hover,
        &:active {
          text-decoration: underline;
        }
      }
    }
    ul[class$="--Links"] {
      padding-top: 1rem;
      li:first-child {
        a {
          // provide more target to click or tap
          padding: 1rem 0;
        }
      }
      a {
        text-decoration: none;
      }
      i.ph-download {
        height: 1rem;
        width: 1.25rem;
        display: inline-block;
        position: relative;
        &::before {
          content: " ";
          width: 1.25rem;
          height: 1.125rem;
          background-image: url("/static/icons/white/download-simple.svg");
          background-position: bottom right;
          background-size: contain;
          background-repeat: no-repeat;
          display: block;
          position: absolute;
          top: 0;
          left: 0;
        }
      }
    }

    .Header--Container-Logo {
      order: 1;
      flex-grow: 1;
    }
    
    .Header--Container-Navigation {
      order: 3;
      flex-grow: 2;
      border-top: 3px solid list.nth(palette.$purple, 3);
      min-height: 88px;
      display: flex;
      flex-flow: row nowrap;
      justify-content: center;
    }
    
    .Header--Container-Links {
      order: 2;
      flex-grow: 1;
    }
  }
}

footer {
  margin-top: 2.5rem;
  & > ul:first-of-type {
    background-color: list.nth(palette.$purple, 7);
  }
  & > ul:last-of-type {
    background-color: list.nth(palette.$purple, 8);
  }
  p,
  a {
    color: palette.$white;
  }

  ul[class$="--Container"] {
    flex-flow: column nowrap;
    padding: 0 2rem 1.5rem;
    & > li {
      padding: 0;
    }

    ul[class$="--Navigation"] {
      a {
        // provide more target to click or tap
        padding: 1rem 0;
        &:hover,
        &:active {
          text-decoration: underline;
        }
      }
    }

    ul[class$="--Links"] {
      li {
        padding-right: 1rem;
      }
      a {
        text-decoration: none;
        & > span {
          overflow: hidden;
          text-indent: -9999px;
          display: inline-block;
        }
      }
    }
  }

  ul[class$="--Trademark"] {
    padding-top: 1.5rem;

    a,
    p {
      display: inline;
      list-style: none;
    }
  }
}

@import "mq/mq-header-footer";
