@use '../../global/scss/tools' as nsw;

.hero-search {
  position: relative;
  z-index: 1;

  @include nsw.breakpoint('md') {
    padding: nsw.rem(32px) nsw.rem(16px);
  }

  &__form {
    padding: nsw.rem(24px) 0;
    text-align: left;

    .nsw-material-icons { 
      &:first-child {
        margin: 0;
      }
    }
  }

  &__wrapper {
    padding: nsw.rem(32px) nsw.rem(16px);
    background-color: var(--nsw-off-white);
    border-bottom: solid 4px var(--nsw-brand-accent);

    @include nsw.breakpoint('md') {
      border-top-left-radius: var(--nsw-border-radius);
      border-top-right-radius: var(--nsw-border-radius);
      padding: nsw.rem(32px) nsw.rem(80px);
    }
  }

  &__content {    
    max-width: nsw.rem(700px);
    margin: 0 auto;
    text-align: center;

    h1 {
      text-wrap: balance;
    }

    .nsw-intro {
      text-wrap: balance;
    }
  }

  &__suggested {
    ul {
      list-style: none;
      text-align: center;
      margin-top: nsw.rem(-8px);
      padding: 0;
    }

    li {
      margin: nsw.rem(8px) nsw.rem(12px) 0 nsw.rem(12px);
      display: inline-block;
    }

    a:not(.nsw-icon-button) {
      line-height: 1.5;
      padding: nsw.rem(4px) nsw.rem(4px);
    }
  }

  .nsw-container {
    padding: 0;
  }
}