/*
 * 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;
}