/* tc-role-search.css — ported from the old theme's assets/css/role-search.min.css.

   The theme's file is Tailwind-compiled and leans on its own custom properties
   (--brand-primary-100, --color-slate-ink, --tw-* shims). Those do not exist under
   Bricks, so each one is resolved to the equivalent tc token with the literal as a
   fallback. Geometry and colours are otherwise verbatim.

   ⚠️ EVERY rem IS RESOLVED TO px AT 16px/rem. Bricks sets `html{font-size:10px}`
   while the old theme's root is 16px, so a copied `1rem` renders at 62.5%. The first
   version of this file kept the theme's rem units and the dropdown came out visibly
   small — title 10px instead of 16, badge 7.5px instead of 12, link padding 7.5px
   instead of 12, dropdown offset 5px instead of 8. User-caught. This is the §5 gotcha
   "never use rem in values copied from the old theme"; do not reintroduce them.

   Production reference (measured 2026-07-31, home page):
     dropdown  absolute, top 100%, mt 8, max-h 400, 1px #CED4DA, white,
               shadow 4px 4px 6px rgba(0,0,0,.08), z-index 100
     link      flex column, padding 12px 26px  (16px at <=768)
     title     16/24, 400, --tc-ink
     badge     12/16, 600, #0457A5
*/

.role-search-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin-top: 8px;
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--tc-gray-300, #CED4DA);
  background-color: #ffffff;
  box-shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.08);
}

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

.role-search-item {
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.role-search-item:last-child {
  border-bottom: none;
}

/* The 16/24 on the link itself is production's, and it matters: the title and badge
   set their own sizes, but the link's line-height feeds the flex column's box, so
   inheriting Bricks' 19px/28.5 body made each item 77.3px against production's 72.8. */
.role-search-link {
  display: flex;
  flex-direction: column;
  padding: 12px 26px;
  font-size: 16px;
  line-height: 24px;
  text-align: left;
  text-decoration: none;
}

.role-search-link:hover {
  background-color: var(--tc-primary-100, #E9F2FB);
}

.role-search-title {
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--tc-ink, #212529);
}

.role-search-category-badge {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  color: var(--tc-primary, #0457A5);
}

.role-search-preview {
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
  margin-top: 4px;
}

.role-search-no-results {
  padding: 16px;
  text-align: center;
  color: #9ca3af;
  font-size: 14px;
}

@media (max-width: 768px) {
  .role-search-link {
    padding: 16px;
  }
}

/* ── the pill's own bits ────────────────────────────────────────────────────
   Bricks wraps shortcode output in its own element div. Production has the input
   wrapper and the clear button as DIRECT flex children of `.cat-search`, so the
   wrapper is set to `display: contents` to take itself out of the flex flow and
   let the real children sit where production's do. */
.tc-role-search-slot {
  display: contents;
}

/* ...and the Bricks element div that wraps the shortcode has to flatten too, or the
   input and the clear button end up nested one level below the pill instead of being
   its flex children. `:has()` keeps this tied to the slot rather than to a Bricks
   element id, which would break if the component is rebuilt. */
.cat-search > .brxe-shortcode,
*:has(> .tc-role-search-slot) {
  display: contents;
}

/* flex, not block: an inline-block input in a block wrapper sits on a line box and
   picks up the baseline descender, which made the pill 50.5px against production's 46. */
.tc-role-search-field {
  flex: 1 1 0%;
  min-width: 0;
  display: flex;
  align-items: center;
}

/* `font: inherit` would pick up Bricks' 19px/28.5 body type and make the pill 50.5px
   tall against production's 46. Production's input is 16/24 Manrope. */
.tc-role-search-field input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: none;
  padding: 0;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  color: var(--tc-gray-700, #495057);
  text-align: start;
}

.tc-role-search-field input:focus {
  outline: none;
  box-shadow: none;
}

.clear-search {
  display: none;
  gap: 6px;
  align-items: center;
  cursor: pointer;
}

.clear-search span {
  font-size: 10px;
}