.more-help-section {
  background-color: var(--colour-more-help-background);
  margin: calc(1.1 * (var(--space-lg))) 0 0;
  padding: 0; /* Override for trial - section */
}

.more-help-section-overlay {
  background: transparent url("/images/ecom-assets/bg-more-help-wvb-overlay.svg") no-repeat center / cover;
  display: flex;
  justify-content: center;
}

.more-help-cta-card-container {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: var(--max-width);
  min-width: var(--min-width);
  padding: 0 var(--container-padding) 10vw;
}

.more-help-cta-card {
  max-width: 24rem;
  width: 100%;
  background: var(--colour-brand-teal-100);
  border-radius: var(--space-md);
  padding: calc(1.2 * (var(--space-lg))) var(--space-md);
  border: 7px solid var(--colour-white);
  position: relative;
  top: calc(-1.2 * (var(--space-lg)));

  h2 {
    line-height: 1.1;
    margin-bottom: var(--space-md);
  }

  a {
    color: var(--colour-brand-teal-900);

    &:hover {
      color: var(--colour-brand-teal-900);
    }
  }
}

@media (min-width: 576px) {
  .more-help-section {
    background: var(--colour-more-help-background) url("/images/ecom-assets/bg-more-help-banner.jpg") no-repeat 21% 22% / 132%;
  }

  .more-help-cta-card-container {
    justify-content: start;
  }

  .more-help-cta-card {
    left: 10%;
  }
}

#footer {
  --colour-footer-border: rgba(255,255,255,0.6);

  max-width: var(--max-width);
  /*min-width: var(--min-width);*/
  margin: 0 auto;
  padding: 0 var(--container-padding);
  width: 100%;
  font-size: var(--font-size-sm);

  ul {
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      list-style: none;
      padding-bottom: var(--space-xs);
    }
  }

  a {
    color: var(--colour-white);
    text-decoration: none;

    &:hover {
      text-decoration: underline;
    }
  }

  h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.5;
    margin: 0;
  }

  .footer-links__section {
    border-bottom: 1px solid var(--colour-footer-border);
  }

  #footer-container {
    background: var(--colour-brand-blue-800) url("/images/ecom-assets/bg-footer.jpg") no-repeat center / cover;
    border-radius: 32px 32px 0 0;
    padding: 48px var(--space-lg);
    color: var(--colour-white);

    button[data-bs-toggle="collapse"] {
      --chevron-width: 12px;
      --chevron-offset: 9px;

      background: transparent;
      color: var(--colour-white);
      border: none;
      cursor: pointer;
      position: relative;
      padding: var(--space-sm) calc(var(--chevron-width) + var(--chevron-offset)) var(--space-sm) 0;
      font-size: var(--font-size-lg);

      &::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: var(--chevron-width);
        height: 100%;
        background: url(/images/ecom-assets/arrow-down-white.svg) 50% / var(--chevron-width) no-repeat transparent;
        border: none;
        margin: 0;
        transition: transform var(--default-transition-duration) var(--default-transition-timing-function);
      }

      &[aria-expanded="true"]::after {
        transform: rotate(-180deg);
      }

      &:focus-visible {
        outline: none;
      }
    }

    .footer-links {
      .col {
        border-left: 1px solid hsl(0, 0%, 77%);
        padding: 0 32px;
        display: flex;
        flex-direction: column;
        row-gap: 32px;

        h4 {
          font-weight: 700;
          font-size: var(--font-size-sm);
          line-height: 21px;
          margin: 0 0 16px;
        }

        a {
          font-size: var(--font-size-sm);
          line-height: 20px;
          text-decoration: none;
          color: var(--colour-white);

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .footer-legal {
      display: flex;
      flex-direction: row;
      gap: 32px;

      a {
        font-size: var(--font-size-sm);
        line-height: 20px;
        text-decoration: none;
        color: var(--colour-white);

        &:hover {
          text-decoration: underline;
        }
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: row;
        gap: 32px;

        li {
          list-style: none;
        }
      }
    }
  }
}

@media (min-width: 992px) {

  #footer {

    #footer-container {
      border-radius: 64px 64px 0 0;
      padding: 64px var(--space-lg);
    }

    h4 {
      padding-bottom: var(--space-sm);
    }

    .footer-links__section {
      border-bottom: none;
    }

    .footer-links__column {
      border-left: 1px solid var(--colour-footer-border);
    }

    .vat-info {
      border-top: 1px solid var(--colour-footer-border);
    }
  }
}