/**
 * footer.css
 * - sitewide
 */
footer {
  background: var(--main-green);
  padding: 1rem 0;
  min-height: var(--footer-min-height);
  margin-top: 4rem;

  & #block-sprat-footer > ul {
    display: flex;
    justify-content: center;
    width: auto;
    list-style: none;
    padding-inline-start: 0;
    flex-direction: column;
    align-items: center;
    gap: 1rem;

    & > li {
      font-size: 1.15rem;
      font-weight: var(--font-weight-semibold);

      & > a {
        color: white;
        text-decoration: none;
        padding: 0.25rem;

        &:hover {
          border-bottom: 2px solid white;
        }
      }
    }

    @media (min-width: 992px) {
      flex-direction: row;
      gap: 4rem;
    }
  }

  & #block-sprat-acknowledgement {
    color: white;
    padding: 1.5rem 3rem;
    position: relative;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;

    .footer-logo {
      font-size: 0;
    }

    @media (min-width: 992px) {
      max-width: calc(100% - 400px);
      text-align: left;

      &::before {
        content: '';
        display: block;
        position: absolute;
        width: 125px;
        height: 125px;
        background-image: url('/themes/sprat/images/logos/dcceew-swirl.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        left: -150px;
      }
      /* Requires #block-sprat-acknowledgement to contain:
        <a class="footer-logo" 
           href="https://www.dcceew.gov.au" 
           rel="noopener noreferrer" 
           target="_blank" 
           aria-label="Department of Climate Change, Energy, the Environment and Water">DCCEEW logo</a>
      */
      .footer-logo {
        display: block;
        position: absolute;
        width: 125px;
        height: 125px;
        background-image: url(/themes/sprat/images/logos/dcceew-footer.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        right: -100px;
        top: 1rem;
        font-size: 0;
      }
    }

    @media (min-width: 1580px) {
      max-width: none;
    }
  }
}