/* ============================================================
   Site search overlay
   Uses only the existing theme palette:
     #023047 deep navy · #219ebc medium blue · #8ecae6 light blue
     #ffb703 gold · #012535 panel navy · #fff white
   ============================================================ */

/* ── Overlay backdrop ───────────────────────────────────────── */
.site-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;                 /* above the fixed navbar */
  display: none;
  justify-content: center;
  align-items: flex-start;
  padding: 12vh 1rem 1rem;
  background: rgba(2, 24, 38, 0.55);
  backdrop-filter: blur(2px);
}

.site-search-overlay.open {
  display: flex;
  animation: ssFade 0.16s ease;
}

@keyframes ssFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Panel ──────────────────────────────────────────────────── */
.ss-panel {
  width: 100%;
  max-width: 620px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 0 24px 60px rgba(2, 48, 71, 0.35);
  overflow: hidden;
  font-family: "Calibri", "Candara", "Segoe UI", Arial, sans-serif;
  animation: ssRise 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ssRise { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* ── Input row ──────────────────────────────────────────────── */
.ss-input-wrap {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid rgba(2, 48, 71, 0.1);
}

.ss-input-icon {
  color: #219ebc;
  font-size: 1rem;
  flex-shrink: 0;
}

.ss-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 1.1rem;
  color: #023047;
}

.ss-input::placeholder { color: #9bb3c0; }

.ss-close {
  flex-shrink: 0;
  border: 1px solid rgba(2, 48, 71, 0.18);
  background: transparent;
  color: #6c7a83;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.ss-close:hover { color: #fb8500; border-color: #fb8500; }

/* ── Results ────────────────────────────────────────────────── */
.ss-results {
  max-height: 56vh;
  overflow-y: auto;
}

.ss-hint {
  padding: 1.1rem 1.2rem;
  color: #8a99a3;
  font-size: 0.9rem;
}

.ss-result {
  display: block;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
  border-bottom: 1px solid rgba(2, 48, 71, 0.06);
  transition: background 0.12s ease;
}

.ss-result:last-child { border-bottom: none; }

.ss-result:hover,
.ss-result:focus {
  background: rgba(142, 202, 230, 0.16);
}

.ss-result-page {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #219ebc;
  margin-bottom: 0.15rem;
}

.ss-result-title {
  display: block;
  font-size: 0.98rem;
  font-weight: 600;
  color: #023047;
  line-height: 1.25;
}

.ss-result-snippet {
  display: block;
  font-size: 0.82rem;
  color: #5a6b74;
  line-height: 1.5;
  margin-top: 0.2rem;
}

.ss-result mark {
  background: rgba(255, 183, 3, 0.4);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}