.header__search--container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  grid-area: search;

  .search-modal__form[results=true] {
    .search__input.field__input {
      padding: 1.5rem 1.5rem 1.5rem 5rem;

      & ~ .field__label {
        display: none;
      }
    }
  }

  .search-modal__content {
    width: 100%;
  }
  form.search {
    color: #333;

    .field {

      &:focus {
        outline: 2px solid var(--color-badge-foreground);
      }

      &, &::before, &::after {
        box-shadow: none !important;
      }

      .search__button {
        left: var(--inputs-border-width);
        top: var(--inputs-border-width);
      }
      

      label {
        display: inline-block;
        max-width: calc(100% - 3rem);
        padding-left: 3rem;
        color: #888;
        white-space: nowrap;
        overflow: hidden;
      }

      .search__input.field__input {
        padding-left: 5rem;
        margin: 0;
        border-radius: 4.5rem;
        border: 2px solid rgb(var(--color-background));
        background-color: #fff;
        color: #121212;
        font-size: 1.2em;

        &::selection {
          background-color: #ebebeb;
        }
        &::-moz-selection { /* Code for Firefox */
          background-color: #ebebeb;
        }
      }

      /* Styling when search box is clicked and user is going to type something */
      .search__input.field__input {
        &:not([value=""]),
        &:focus {
          padding: 1.5rem 1.5rem 1.5rem 5rem;

          & ~ .field__label {
            display: none;
          }
        }
      }


      .icon-search, .icon-close {
        color: rgb(var(--color-background));
        background-color: transparent
      }
      .icon-search {
        position: relative;
        left: 5px;
        bottom: -3px;
        font-size: 28px;
      }
      .icon-close {
        
      }
      .reset__button {
        right: var(--inputs-border-width);
        top: var(--inputs-border-width);
      }
    }    
  }

  .header__contact-info {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-evenly;
    gap: 20px;
    width: 100%;
    padding-top: 6px;
    font-size: 1em;

    a {
        text-decoration: none;
        color: #fff;
        transition:  0.3s linear;
        white-space: nowrap;
       
        span {
          border-bottom: 1px solid transparent;
          transition: border-bottom 0.3s ease;
        }

        &:hover {
          span {
            border-bottom: 1px solid #fff;
          }
        }

      i {
        position: relative;
        top: 1px;
        right: 0;
        display: inline-block;
        margin-right: 5px;
        color: var(--color-foreground);
      }
    }

    @media screen and (max-width: 600px) {
      gap: 5px;

      a {
        flex: 1 1 33.33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        gap: 2px;
        text-align: center;
        line-height: 1.1;

        i {
          top: 0;
          margin-right: 0;
        }
      }
    }
  }

}


.reset__button:not(:focus-visible)::after {
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.08);
  display: block;
  height: calc(100% - 1.6rem);
  content: '';
  position: absolute;
  right: 0;
}

.reset__button:not(:focus)::after {
  border-right: 0.1rem solid rgba(var(--color-foreground), 0.08);
  display: block;
  height: calc(100% - 1.8rem);
  content: '';
  position: absolute;
  right: 0;
}

.search__button:focus-visible,
.reset__button:focus-visible {
  background-color: rgb(var(--color-background));
  z-index: 4;
}

.search__button:focus,
.reset__button:focus {
  background-color: rgb(var(--color-background));
  z-index: 4;
}

.search__button:not(:focus-visible):not(.focused),
.reset__button:not(:focus-visible):not(.focused) {
  box-shadow: inherit;
  background-color: inherit;
}

.search__button:hover .icon,
.reset__button:hover .icon {
  transform: scale(1.07);
}

.reset__button .icon.icon-close {
  height: 28px;
  width: 28px;
  stroke-width: 0.1rem;
}

/* Remove extra spacing for search inputs in Safari */
input::-webkit-search-decoration {
  -webkit-appearance: none;
}

.template-search__results {
  position: relative;
}




p[role=status] {
  display: block;
  max-width: 50%;
  margin: 10rem auto;
}