/* container with grey background */
  .search-container {
    background: #f2f2f2;        /* light grey */
    padding: 12px;

  }

  /* make the form span the full width of its parent */
  #all-search-form {
    width: 100%;
    display: flex;
    gap: 8px;                    /* space between input and button */
    box-sizing: border-box;
  }

  /* input grows to fill available space */
  #all-search-input {
    flex: 1 1 auto;
    min-width: 0;                /* prevent overflow in flex */
    padding: 10px 12px;
    font-size: 16px;
    line-height: 1.2;
    box-sizing: border-box;
  }

  /* button keeps natural size */
  #all-search-form .search-submit {
    flex: 0 0 auto;
    padding: 10px 16px;
    font-size: 16px;
    line-height: 1.2;
    cursor: pointer;
  }

  /* accessibility: visually hide label but keep it for screen readers */
  .visually-hidden {
    position: absolute !important;
    height: 1px; width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
  }

  /* optional: make elements full-width on very narrow screens */
  @media (max-width: 420px) {
    #all-search-form {
      flex-direction: column;
    }
    #all-search-form .search-submit {
      width: 100%;
    }
  }