.search {
  margin: 0 0 50px 0;
  
  @media (min-width: 768px) {
    margin: 0 0 100px 0;
  }
}

.search-title {
  font-family: var(--font-family-sans-serif-heading);
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  margin: 0 0 30px 0;
}

.search-box-input {
  border: 1px solid var(--color-light);
  padding: 7px 5px 7px 30px;
  display: flex;
  gap: 30px;
  align-items: center;
  max-width: 500px;
  border-radius: 15px;

  &:focus-within {
    border: 1px solid var(--color-primary);
  }

  /* The input has no outline of its own, so the pill around it carries the focus ring. */
  &:has(input:focus-visible) {
    outline: 3px solid var(--color-black);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--color-white);
  }

  input {
    flex: 1 1 100%;
    border: none;
    font-family: var(--font-family-sans-serif-heading);
    font-size: var(--font-size-regular-medium);
    outline: none;
  }

  button {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: none;
    background-color: var(--color-purple);
    border-radius: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

    svg {
      path {
        fill: var(--color-white);
      }
    }
  }
}

.search-results-tag {
  margin: 15px 0 0 0;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-regular-medium);
}

.search-results {
  display: flex;
  flex-direction: column;

  @media (min-width: 768px) {
    margin: 50px 0 0 0;
  }
}

.search-result {
  padding: 30px 0; 
  border-bottom: 1px solid var(--color-light);

  .redactor {
    @media (min-width: 992px) {
      max-width: calc(100% / 12 * 10);
    }
  }

  &:hover, &:focus {
    border-bottom: 1px solid var(--color-primary);

    h2 {
      color: var(--color-primary);

      svg {
        display: inline-block;
        margin-left: 10px;
        path {
          fill: var(--color-primary);
        }
      }
    }
  }

  a {
    text-decoration: none;
  }

  h2 {
    font-family: var(--font-family-sans-serif-heading);
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-medium);
    display: flex;
  }

  .redactor {
    margin: 25px 0 0 0;
  }
}