/* YouLoveShop: compact mobile category control in Cyberwire header search.
   Does not alter category values, search logic, or desktop presentation.
   Native <select> remains fully interactive for touch, keyboard, and screen readers.
   Scoped to the responsive header at widths <= 767px only. */
@media screen and (max-width: 767px) {
  html.responsive #top .search_form {
    width: 100% !important;
    min-width: 0 !important;
    table-layout: fixed !important;
  }

  html.responsive #top .search_form .search-cat {
    position: relative !important;
    display: table-cell !important;
    box-sizing: border-box !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;
    padding: 0 !important;
    border-right: 1px solid #ededed !important;
    vertical-align: middle !important;
  }

  /* Light circular background; non-interactive so native select receives taps. */
  html.responsive #top .search_form .search-cat::before {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 39px;
    height: 39px;
    top: 4px;
    left: 5px;
    background: #eeeeee;
    border-radius: 50%;
    box-sizing: border-box;
  }

  /* Override the original triangle placement, centering it in the circle. */
  html.responsive #top .search_form .search-cat::after {
    content: '';
    position: absolute !important;
    z-index: 1;
    pointer-events: none;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    top: 21px !important;
    left: 20px !important;
    right: auto !important;
    margin: 0 !important;
    border-top: 6px solid #5e6772 !important;
    border-right: 5px solid transparent !important;
    border-left: 5px solid transparent !important;
    border-bottom: 0 !important;
  }

  /* Keep the original select and all options; visually show only the circle. */
  html.responsive #top .search_form .search-cat select {
    position: absolute !important;
    z-index: 2 !important;
    top: 0 !important;
    left: 0 !important;
    width: 50px !important;
    min-width: 50px !important;
    max-width: 50px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    opacity: 0 !important;
    cursor: pointer !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  html.responsive #top .search_form .search-cat:focus-within::before {
    box-shadow: 0 0 0 2px #0088cc;
  }

  /* Give the keyword field the width freed by the original long category label. */
  html.responsive #top .search_form .inner {
    width: auto !important;
    min-width: 0 !important;
  }
  html.responsive #top .search_form .inner input {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    padding-left: 12px !important;
    padding-right: 8px !important;
  }
}

/* YLS v1.1.0 - keep the original search icon anchored at the far right on phones.
   Cyberwire's table layout could leave the search button in an anonymous cell.
   Use flex ONLY on the mobile search bar; native category <select> still works. */
@media screen and (max-width: 767px) {
  html.responsive #top .search_form {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  html.responsive #top .search_form .search-cat {
    display: block !important;
    flex: 0 0 50px !important;
    width: 50px !important;
  }
  html.responsive #top .search_form .inner {
    display: block !important;
    flex: 1 1 0% !important;
    width: 0 !important;
    min-width: 0 !important;
  }
  html.responsive #top .search_form > .button-search,
  html.responsive #top .search_form > .button-search2 {
    display: block !important;
    position: relative !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    margin: 2px !important;
    margin-left: auto !important;
    float: none !important;
  }
}

/* YLS v1.5: show the selected search category below the bar on mobile.
   An ordinary floated row avoids overlays and makes room for long names.
   It is hidden for the default (all categories) selection and on desktop. */
#top .yls-mobile-selected-category { display: none !important; }

@media screen and (max-width: 767px) {
  html.responsive #top .yls-mobile-selected-category:not([hidden]) {
    display: flex !important;
    clear: both !important;
    float: left !important;
    box-sizing: border-box !important;
    align-items: center;
    gap: 9px;
    width: 100% !important;
    min-width: 0;
    margin: 8px 0 0 !important;
    padding: 7px 10px;
    border: 1px solid #cfe7f6;
    border-radius: 10px;
    background: #f2faff;
    color: #184f77;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.45;
  }
  html.responsive #top .yls-mobile-selected-category[hidden] {
    display: none !important;
  }
  html.responsive #top .yls-mobile-selected-category-check {
    display: inline-flex;
    flex: 0 0 23px;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    color: #1676ac;
    background: #dceffa;
    border-radius: 50%;
    font-size: 14px;
    font-weight: 700;
  }
  html.responsive #top .yls-mobile-selected-category-copy {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
  }
  html.responsive #top .yls-mobile-selected-category-caption {
    display: block;
    color: #52778e;
    font-size: 11px;
    line-height: 1.2;
  }
  html.responsive #top .yls-mobile-selected-category-name {
    display: block;
    color: #174766;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
}


/* YLS v1.6 - Explicit category view button. Use the same search logic as
   the magnifier without changing search routes, sorting, or desktop layout. */
@media screen and (max-width: 767px) {
  html.responsive #top .yls-mobile-selected-category-view {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 4px;
    max-width: 44%;
    min-height: 36px;
    margin: 0 0 0 auto;
    padding: 7px 11px;
    border: 0;
    border-radius: 20px;
    background: #0088cc;
    color: #fff;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  html.responsive #top .yls-mobile-selected-category-view:hover,
  html.responsive #top .yls-mobile-selected-category-view:active { background: #006da5; }
  html.responsive #top .yls-mobile-selected-category-view:focus-visible {
    outline: 2px solid #005b89;
    outline-offset: 2px;
  }
  html.responsive #top .yls-mobile-selected-category-view-arrow { font-size: 14px; }
}