/**
 * ============================================================================
 * UECF.NET SEARCH ENGINE — STYLES
 * ============================================================================
 * Mobile-first.  Touch targets are >= 44px, the results panel scrolls inside
 * itself rather than the page, and every interactive element has a visible
 * focus ring.  Drops into any UECF page alongside search-engine.js.
 * ============================================================================
 */

:root {
  --uecf-search-ink: #101B31;
  --uecf-search-ink-soft: #2C3E60;
  --uecf-search-gold: #C79A3D;
  --uecf-search-gold-soft: #E4C685;
  --uecf-search-cream: #FAF6EC;
  --uecf-search-cream-dim: #F0E7D5;
  --uecf-search-line: #E2D8C0;
  --uecf-search-maroon: #8B3A42;
  --uecf-search-teal: #2F5D62;
  --uecf-search-radius: 999px;
  --uecf-search-font: "Source Sans 3", system-ui, -apple-system, sans-serif;
  --uecf-search-te: "Noto Sans Telugu", "Source Sans 3", sans-serif;
}

.uecf-search-host,
.uecf-search-root {
  width: 100%;
  max-width: 680px;
  margin: 20px 0 18px;
  font-family: var(--uecf-search-font);
  position: relative;
  z-index: 40;
}

.hero .uecf-search-host { margin: 18px 0 8px; }

.uecf-search {
  position: relative;
  /* How tall the dropdown may grow. search-ui.js overwrites this inline with
     the real space between the field and the bottom edge of the *visible*
     viewport, so an on-screen keyboard can never leave the panel running off
     the screen (or, once the browser scrolls the caret back into view, sitting
     on top of the input). These are the no-JS / desktop fallbacks. */
  --uecf-search-avail: min(72vh, 640px);
}

.uecf-search--sticky.is-elevated .uecf-search__field {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
}

.uecf-search__label--sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- field --- */

.uecf-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(250, 246, 236, 0.98);
  border: 2px solid rgba(228, 198, 133, 0.55);
  border-radius: var(--uecf-search-radius);
  padding: 5px 8px 5px 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.uecf-search.is-open .uecf-search__field,
.uecf-search__field:focus-within {
  border-color: var(--uecf-search-gold);
  box-shadow: 0 10px 30px rgba(199, 154, 61, 0.28);
}

.uecf-search__icon {
  color: var(--uecf-search-ink-soft);
  font-size: 1.25rem;
  line-height: 1;
  flex: none;
}

.uecf-search__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 1rem;          /* 16px keeps iOS from zooming on focus */
  color: var(--uecf-search-ink);
  padding: 12px 0;
  min-height: 44px;
  appearance: none;
}

.uecf-search__input::placeholder { color: rgba(44, 62, 96, 0.6); }
.uecf-search__input:focus { outline: none; }
.uecf-search__input::-webkit-search-cancel-button { display: none; }

.uecf-search__clear {
  flex: none;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(16, 27, 49, 0.07);
  color: var(--uecf-search-ink-soft);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.uecf-search__clear:hover { background: rgba(16, 27, 49, 0.14); }

.uecf-search__spinner {
  flex: none;
  width: 20px; height: 20px;
  border: 2px solid rgba(199, 154, 61, 0.35);
  border-top-color: var(--uecf-search-gold);
  border-radius: 50%;
  animation: uecf-search-spin 0.7s linear infinite;
}
@keyframes uecf-search-spin { to { transform: rotate(360deg); } }

.uecf-search__hint {
  margin: 8px 4px 0;
  font-size: 0.82rem;
  color: rgba(228, 198, 133, 0.9);
}
.uecf-search-root:not(.on-dark) .uecf-search__hint { color: var(--uecf-search-ink-soft); }
.hero .uecf-search__hint { color: rgba(228, 198, 133, 0.9); }

.uecf-search__status {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ---------------------------------------------------------------- panel --- */

.uecf-search__panel {
  position: absolute;
  top: calc(100% + 12px);
  left: 0; right: 0;
  background: var(--uecf-search-cream);
  border: 1px solid var(--uecf-search-line);
  border-top: 3px solid var(--uecf-search-gold);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  max-height: var(--uecf-search-avail, min(72vh, 640px));
  overflow-y: auto;
  /* When the panel is re-measured against a keyboard the browser's scroll
     anchoring would otherwise keep the old offset, opening the list already
     scrolled with the sticky chip bar over a half-cut first card. */
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 60;
}
.uecf-search__panel[hidden] { display: none; }

/* ------------------------------------------------------- facets & filters -- */

.uecf-search__facets {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--uecf-search-line);
  position: sticky;
  top: 0;
  background: var(--uecf-search-cream);
  z-index: 2;
}
.uecf-search__facets:empty { display: none; }

.uecf-search__facet {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--uecf-search-line);
  border-radius: var(--uecf-search-radius);
  background: #fff;
  color: var(--uecf-search-ink-soft);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.uecf-search__facet:hover { border-color: var(--uecf-search-gold); }
.uecf-search__facet.is-active {
  background: var(--uecf-search-ink);
  border-color: var(--uecf-search-ink);
  color: var(--uecf-search-cream);
}
.uecf-search__facet-count {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--uecf-search-radius);
  background: rgba(16, 27, 49, 0.08);
}
.uecf-search__facet.is-active .uecf-search__facet-count {
  background: rgba(228, 198, 133, 0.25);
  color: var(--uecf-search-gold-soft);
}

.uecf-search__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--uecf-search-line);
  background: var(--uecf-search-cream-dim);
}
.uecf-search__filters:empty { display: none; }

.uecf-search__filter { display: inline-flex; align-items: center; gap: 6px; }
.uecf-search__filter-label {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--uecf-search-ink-soft);
}
.uecf-search__select {
  font: inherit;
  font-size: 0.85rem;
  min-height: 36px;
  padding: 4px 8px;
  border: 1px solid var(--uecf-search-line);
  border-radius: 6px;
  background: #fff;
  color: var(--uecf-search-ink);
  max-width: 190px;
}
.uecf-search__reset {
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--uecf-search-line);
  border-radius: var(--uecf-search-radius);
  background: #fff;
  color: var(--uecf-search-maroon);
  cursor: pointer;
}

/* --------------------------------------------------------------- results -- */

.uecf-search__results { padding: 6px; }

.uecf-search__section { padding: 10px 8px 4px; }
.uecf-search__section-title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--uecf-search-ink-soft);
  margin-bottom: 8px;
}
.uecf-search__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.uecf-search__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--uecf-search-line);
  border-radius: var(--uecf-search-radius);
  background: #fff;
  color: var(--uecf-search-ink);
  font: inherit;
  font-size: 0.88rem;
  cursor: pointer;
}
.uecf-search__chip:hover {
  border-color: var(--uecf-search-gold);
  background: rgba(228, 198, 133, 0.14);
}

.uecf-search__card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  border-radius: 10px;
  color: inherit;
  text-decoration: none;
  border: 1px solid transparent;
}
.uecf-search__card:hover,
.uecf-search__card.is-active {
  background: #fff;
  border-color: var(--uecf-search-line);
  text-decoration: none;
}
.uecf-search__card.is-active { box-shadow: inset 3px 0 0 0 var(--uecf-search-gold); }
.uecf-search__card.is-disabled { opacity: 0.6; pointer-events: none; }

.uecf-search__card-icon {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 8px;
  background: var(--uecf-search-teal);
  color: var(--uecf-search-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
}
.uecf-search__thumb {
  flex: none;
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--uecf-search-line);
  background: var(--uecf-search-cream-dim);
}

.uecf-search__card-body { flex: 1; min-width: 0; }

.uecf-search__card-meta {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--uecf-search-maroon);
  margin-bottom: 3px;
}
.uecf-search__card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--uecf-search-ink);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.uecf-search__card-desc {
  font-size: 0.9rem;
  color: var(--uecf-search-ink-soft);
  line-height: 1.5;
  margin-top: 3px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.uecf-search__card-desc[lang="te"] { font-family: var(--uecf-search-te); }
.uecf-search__card-desc--alt {
  color: var(--uecf-search-teal);
  font-style: italic;
  -webkit-line-clamp: 2;
}
.uecf-search__card-byline,
.uecf-search__card-note {
  font-size: 0.78rem;
  color: var(--uecf-search-ink-soft);
  margin-top: 3px;
}
.uecf-search__card-note { color: var(--uecf-search-maroon); }
.uecf-search__card-url {
  font-size: 0.74rem;
  color: rgba(44, 62, 96, 0.65);
  margin-top: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uecf-search__open {
  flex: none;
  align-self: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--uecf-search-maroon);
}

mark.uecf-search-hl {
  background: rgba(199, 154, 61, 0.34);
  color: inherit;
  padding: 0 1px;
  border-radius: 3px;
  font-weight: 700;
}

.uecf-search__empty { padding: 28px 20px; text-align: center; color: var(--uecf-search-ink-soft); }
.uecf-search__empty-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--uecf-search-ink);
  margin-bottom: 6px;
}
.uecf-search__empty .uecf-search__chips { justify-content: center; margin-top: 14px; }

/* ------------------------------------------------------- grouped overview -- */

.uecf-search__group-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 10px 6px;
  border-bottom: 1px solid var(--uecf-search-line);
  margin-bottom: 4px;
}
.uecf-search__group-head:first-child { padding-top: 8px; }
.uecf-search__group-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--uecf-search-maroon);
}
.uecf-search__group-count {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--uecf-search-radius);
  background: rgba(16, 27, 49, 0.08);
  color: var(--uecf-search-ink-soft);
}
.uecf-search__group-more {
  margin-left: auto;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--uecf-search-teal);
  cursor: pointer;
  padding: 6px 8px;
  min-height: 36px;
  border-radius: 6px;
}
.uecf-search__group-more:hover {
  color: var(--uecf-search-ink);
  background: rgba(47, 93, 98, 0.08);
  text-decoration: underline;
}

/* --------------------------------------------------------------- pager ---- */

.uecf-search__pager {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 14px;
  border-top: 1px solid var(--uecf-search-line);
}
.uecf-search__pager:empty { display: none; }
.uecf-search__pager-info {
  flex: 1;
  font-size: 0.8rem;
  color: var(--uecf-search-ink-soft);
}
.uecf-search__pager-btn {
  min-height: 40px;
  padding: 6px 14px;
  border: 1px solid var(--uecf-search-line);
  border-radius: var(--uecf-search-radius);
  background: #fff;
  color: var(--uecf-search-ink);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.uecf-search__pager-btn[disabled] { opacity: 0.45; cursor: default; }

/* ------------------------------------------------------------ focus ring -- */

.uecf-search__input:focus-visible,
.uecf-search__chip:focus-visible,
.uecf-search__facet:focus-visible,
.uecf-search__card:focus-visible,
.uecf-search__clear:focus-visible,
.uecf-search__select:focus-visible,
.uecf-search__reset:focus-visible,
.uecf-search__pager-btn:focus-visible {
  outline: 3px solid var(--uecf-search-gold);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- mobile -- */

@media (max-width: 640px) {
  .uecf-search-host,
  .uecf-search-root { max-width: none; }

  /* Stay anchored under the field. A bottom-fixed sheet covered the input
     itself, so people could not see what they had typed. */
  .uecf-search { --uecf-search-avail: 62vh; }

  /* Every pixel between the box and the keyboard counts, and the tip line has
     done its job by the time results are on screen. */
  .uecf-search.is-open .uecf-search__hint { display: none; }

  /* search-ui.js adds --tight when the keyboard leaves only a couple of card
     heights. The Language / File type selects would eat that whole strip. */
  .uecf-search--tight .uecf-search__filters { display: none; }
  .uecf-search--tight .uecf-search__card { padding: 10px 10px; }
  .uecf-search--tight .uecf-search__group-head { padding-top: 6px; padding-bottom: 6px; }
  .uecf-search__panel {
    top: calc(100% + 10px);
    border-radius: 12px;
  }
  .uecf-search__card { padding: 12px 10px; }
  .uecf-search__thumb { width: 52px; height: 52px; }
  .uecf-search__open { display: none; }
  .uecf-search__card-url { display: none; }
  .uecf-search__select { max-width: 140px; }
}

@media (prefers-reduced-motion: reduce) {
  .uecf-search__spinner { animation: none; }
  .uecf-search__field { transition: none; }
}

@media (prefers-contrast: more) {
  .uecf-search__card-url,
  .uecf-search__card-desc { color: #1c2b47; }
  mark.uecf-search-hl { background: #ffe08a; }
}