/**
 * MyBGC global search box.
 *
 * Self-contained port of the Hub theme's search block styling (green pill,
 * click-to-expand-left, no page load) so the same look and behaviour work on
 * all three sites without depending on any one theme.
 * Adapted from bgccyh2022/css/components/search.css.
 *
 * Classes: .bgc-search (pill) · .bgc-search__input · .bgc-search__submit
 *  - .expanded    → toggled by search-box.js on empty click (collapsible pill)
 *  - .is-open     → always-open variant (used on the results page)
 *  - .bgc-search--sub → sub-sites (BGCU, Programs): flat corners, no curve
 *
 * Child selectors are prefixed with `.bgc-search` so they out-specify the
 * theme's own `input[type="search"]` / `.form-submit` rules.
 */

/* ===== Desktop (>= 900px): collapsible green pill ===== */
@media screen and (min-width: 900px) {
  .bgc-search {
    background: #66CC00 url("../images/magnify-glass--white.svg") no-repeat 25px center;
    border-radius: 0 0 0 60px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    line-height: 1.2;
    height: 39px;
    padding: 5px 25px 7px 60px;
  }

  /* Sub-sites (BGCU, Programs): same green box, rounded corners, and a border
     matching the background so it just softens the edge; plus spacing from the
     block on its right. The spacing goes on the block WRAPPER (the flex item). */
  .bgc-search--sub {
    border-radius: 15px;
    border: 1px solid #66CC00;
  }
  .block-bgc-global-search-box:has(> .bgc-search--sub) {
    margin-right: 20px;
  }

  /* Hub only: pull the block under the one on its right so the green background
     overlaps it with no seam — the original theme's -40px tuck. The margin goes
     on the block WRAPPER (the flex item in the header row); the extra right
     padding on the pill keeps "Search" clear of the overlapping block. Scoped to
     the Hub via the pill's non-"--sub" class (sub-sites keep their own layout). */
  .bgc-search:not(.bgc-search--sub) { padding-right: 50px; }
  .block-bgc-global-search-box:has(> .bgc-search:not(.bgc-search--sub)) {
    margin-right: -40px;
  }

  .bgc-search .bgc-search__form {
    align-items: center;
    display: flex;
    margin: 0;
    padding: 0;
  }

  .bgc-search .bgc-search__input {
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.4);
    border: 0 none;
    border-radius: 6px;
    box-shadow: none;
    box-sizing: border-box;
    color: #003B4A;
    height: 28px;
    min-width: 0;
    outline: none;
    padding: 0;
    transition-duration: 0.3s;
    transition-property: border, margin, padding, width;
    width: 0;
  }

  .bgc-search .bgc-search__input::placeholder { color: #003B4A; opacity: 0.7; }
  .bgc-search .bgc-search__input::-webkit-search-decoration,
  .bgc-search .bgc-search__input::-webkit-search-cancel-button { display: none; }

  .bgc-search.expanded .bgc-search__input,
  .bgc-search.is-open .bgc-search__input {
    border: 1px solid #FFFFFF;
    margin-right: 10px;
    padding: 0 0.6em;
    width: 230px;
  }

  .bgc-search .bgc-search__submit {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0 none;
    box-shadow: none;
    color: #FFFFFF;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: normal;
    line-height: normal;
    margin: 1px 0 0 0;
    padding: 0;
    text-transform: none;
    white-space: nowrap;
  }

  .bgc-search .bgc-search__submit:hover { text-decoration: underline; }

  .bgc-search.expanded .bgc-search__submit,
  .bgc-search.is-open .bgc-search__submit { margin-top: 0; }
}

/* ===== Mobile (< 900px): full-width bar ===== */
@media screen and (max-width: 899px) {
  .bgc-search {
    box-sizing: border-box;
    padding: 0 10px;
    width: 100%;
  }

  .bgc-search .bgc-search__form {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 0;
    padding: 0;
  }

  .bgc-search .bgc-search__input {
    appearance: none;
    -webkit-appearance: none;
    background: #fff url("../images/magnify-glass--navy.svg") no-repeat right 10px center;
    border: 2px solid #003B4A;
    box-sizing: border-box;
    color: #003B4A;
    height: 48px;
    min-width: 0;
    padding: 0 40px 0 12px;
    width: 100%;
  }

  .bgc-search .bgc-search__submit {
    align-items: center;
    appearance: none;
    -webkit-appearance: none;
    background: #003B4A;
    border: 0 none;
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-family: "Poppins", sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    height: 48px;
    justify-content: center;
    padding: 0 18px;
    text-transform: capitalize;
    white-space: nowrap;
  }
}

/* Visually-hidden label (accessible name for the input). */
.bgc-search .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}