/* ------------------------------------------------------------------
   header-footer.css
   (Keep header/footer related styles isolated and scoped)
   ------------------------------------------------------------------ */

.site-header{
  align-self: stretch;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  gap: .75rem;
}

.site-header__nav{ display:flex; gap:.5rem; align-items:center; }
.site-header__nav a{ color:var(--link); text-decoration:none; }
.site-header__lang{ margin-left:auto; }

.home-btn{
  text-decoration: none;
  color: var(--link);
  font-weight: 600;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 14px;
}
.home-btn:hover{ background: var(--link); color: var(--bg); }

/* page header (hero area inside article) — visual centered block */
.page-header{
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.page-title{ font-size: clamp(1.5rem,3vw,2rem); margin: 0 0 20px 0; text-align:center; width:100%; }
.subtitle{ text-align:center; width:100%; max-width:600px; margin:0 auto; }

/* back-to-top button / site footer styles */
.site-footer {
  background: var(--footer-bg, #f6f6f6);
  padding: 18px 0;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.site-footer .footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 16px;
}

/* back-to-top button */
.to-top {
  position: fixed;
  right: 1rem;
  bottom: 1.5rem;
  display: none;               /* hidden until scrolled */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: var(--card, #fff);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  z-index: 1200;
  cursor: pointer;
  font-weight: 600;
  font-size: 18px;
  transition: transform .18s ease, opacity .18s ease;
  opacity: 0;
  will-change: transform, opacity;
}

/* visible state */
.to-top.show {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

/* hover/focus */
.to-top:focus,
.to-top:hover {
  transform: translateY(-3px);
  outline: none;
  box-shadow: 0 10px 26px rgba(0,0,0,0.12);
}

/* reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .to-top { transition: none; }
}

/* search SPA nicer result cards */
.spa-results { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.spa-card { background:#fff; border:1px solid #eef0f2; padding:14px; border-radius:10px; box-shadow:0 2px 6px rgba(16,24,40,0.04); transition:transform .08s ease, box-shadow .08s ease; text-decoration:none; color:inherit; display:block; }
.spa-card:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(16,24,40,0.08); }
.spa-card .head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.spa-card .title { font-size:1.06rem; font-weight:700; color:#0b5250; margin:0 0 6px 0; text-decoration:none; }
.spa-card .meta { color:#6b7280; font-size:0.88rem; white-space:nowrap; }
.spa-card .score { background:#eef7f6; color:#0f766e; padding:4px 8px; border-radius:999px; font-weight:600; font-size:0.82rem; margin-left:8px; }
.spa-card .snippet { color:#222; margin-top:8px; line-height:1.6; max-height:6.6rem; overflow:hidden; text-overflow:ellipsis }
.spa-summary { color:#6b7280; margin-bottom:8px; font-size:0.98rem }
.spa-pager { display:flex; gap:8px; align-items:center; margin-top:14px; }
.spa-btn { padding:8px 10px; border-radius:8px; border:1px solid #e8eaec; background:#fff; color:#111; text-decoration:none; }
.spa-btn.primary { background:#0f766e; color:#fff; border:0; }
@media (max-width:680px) {
  .spa-card .head { flex-direction:column; align-items:stretch; gap:8px; }
  .spa-card .meta { text-align:right; }
}

/* make wrapper a positioning context */
.search-wrapper { position: relative; }

/* suggestions box: hidden by default, will be shown by JS (suggestionsEl.hidden = false) */
#suggestions {
  position: absolute;
  top: calc(100% + 8px); /* fallback when JS not run */
  left: 0;
  min-width: 240px;
  max-width: 100%;
  width: auto;
  max-height: 360px;
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16,24,40,0.08);
  z-index: 9999;
  box-sizing: border-box;
  display: none; /* JS will show (set display/block or hidden=false) */
}

/* show when not hidden (for progressive enhancement) */
#suggestions[aria-hidden="false"],
#suggestions[role="listbox"]:not([hidden]) {
  display: block;
}

/* item */
.suggestion-item { padding: 10px 12px; cursor: pointer; }
.suggestion-item:hover, .suggestion-item.active { background: #f6fbfa; }