/*
 * Global header / search-trigger styles for static pages.
 *
 * Hugo-rendered pages have an integrated ⌘K button in their nav (see
 * layouts/_default/baseof.html — class .search-trigger). The 308 static HTML
 * pages each have their own per-page <nav> and embedded styles; we don't
 * touch their nav (preserve existing visual styling), but we DO add a
 * floating ⌘K trigger so search is reachable from every page.
 *
 * Class names are namespaced (.hp-global-*) so they cannot collide with
 * per-page styles.
 */

#hp-global-search-trigger,
.hp-global-search-trigger {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 9998; /* below the search overlay (9999), above page nav */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem;
  background: rgba(20, 20, 20, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, box-shadow 0.18s, background 0.18s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  line-height: 1;
}

#hp-global-search-trigger:hover,
.hp-global-search-trigger:hover {
  border-color: #22c55e;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
}

#hp-global-search-trigger svg,
.hp-global-search-trigger svg {
  opacity: 0.75;
  flex-shrink: 0;
}

.hp-global-search-trigger-text {
  opacity: 0.85;
}

.hp-global-search-trigger-kbd {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.4rem;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  font-size: 0.7rem;
  font-family: inherit;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
}

/* When the Hugo-rendered nav is on the page, hide our floating trigger
 * (the nav already has its own .search-trigger button). */
nav.nav .search-trigger ~ #hp-global-search-trigger,
nav.nav.nav-container ~ #hp-global-search-trigger {
  display: none;
}

@media (max-width: 640px) {
  .hp-global-search-trigger-text {
    display: none;
  }
  #hp-global-search-trigger,
  .hp-global-search-trigger {
    padding: 0.4rem 0.55rem;
    top: 10px;
    right: 12px;
  }
}

/* Overlay-active state: trigger button hidden so it doesn't peek through the modal */
body:has(.search-overlay.active) #hp-global-search-trigger {
  visibility: hidden;
}

/* =========================================================================
   Research credibility badges — injected post-build by
   scripts/inject-research-badges.py. Sit directly under the page <h1>.
   Two pill types: PubMed citation count (always when N>=1) + clinical-phase
   status (only when slug has an entry in data/clinical-phase.json or the
   page has a <meta name="hp:clinical-phase"> tag).
   Class names are namespaced (.hp-*) to avoid colliding with per-page CSS.
   ========================================================================= */
.hp-research-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.75rem 0 1.25rem;
  align-items: center;
  justify-content: inherit;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.hp-research-badges .hp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(20, 20, 20, 0.55);
  color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.hp-research-badges .hp-badge strong {
  font-weight: 800;
  color: #fff;
}

/* Citation count — neutral / amber accent (matches HP brand) */
.hp-research-badges .hp-badge-papers {
  border-color: rgba(245, 158, 11, 0.35);
  color: rgba(252, 211, 77, 0.95);
  background: rgba(245, 158, 11, 0.10);
}

/* Phase pills — strongest signal first, then progressively softer */
.hp-research-badges .hp-phase-approved {
  border-color: rgba(34, 197, 94, 0.45);
  color: rgba(134, 239, 172, 0.98);
  background: rgba(34, 197, 94, 0.12);
}

.hp-research-badges .hp-phase-3 {
  border-color: rgba(59, 130, 246, 0.45);
  color: rgba(147, 197, 253, 0.98);
  background: rgba(59, 130, 246, 0.12);
}

.hp-research-badges .hp-phase-2 {
  border-color: rgba(168, 85, 247, 0.45);
  color: rgba(216, 180, 254, 0.98);
  background: rgba(168, 85, 247, 0.10);
}

.hp-research-badges .hp-phase-1 {
  border-color: rgba(168, 85, 247, 0.35);
  color: rgba(216, 180, 254, 0.95);
  background: rgba(168, 85, 247, 0.08);
}

.hp-research-badges .hp-phase-preclinical {
  border-color: rgba(148, 163, 184, 0.45);
  color: rgba(203, 213, 225, 0.95);
  background: rgba(100, 116, 139, 0.12);
}

.hp-research-badges .hp-phase-research-chem {
  border-color: rgba(239, 68, 68, 0.40);
  color: rgba(252, 165, 165, 0.95);
  background: rgba(239, 68, 68, 0.10);
}

/* Light-theme override for the Hugo-rendered pages that flip to data-theme="light" */
[data-theme="light"] .hp-research-badges .hp-badge {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(0, 0, 0, 0.12);
  color: rgba(15, 23, 42, 0.85);
}
[data-theme="light"] .hp-research-badges .hp-badge strong {
  color: rgba(15, 23, 42, 0.98);
}

@media (max-width: 480px) {
  .hp-research-badges .hp-badge {
    font-size: 0.72rem;
    padding: 0.25rem 0.55rem;
  }
}