/* Sitewide search: header trigger button + modal. Uses the same :root variables every page already defines.
   The trigger stays icon-only at every width — several nav bars on this site already sit close to full width,
   and a text label was enough to push a few of them into a horizontal scroll. */
.search-trigger{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:10px; width:40px; height:40px; padding:0; cursor:pointer; font:inherit; font-size:13px; flex-shrink:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.search-trigger:hover, .search-trigger:focus-visible{ color:var(--text); border-color:var(--legendary); background:var(--legendary-dim); }
.search-trigger svg{ width:16px; height:16px; flex-shrink:0; }
.search-trigger .st-label, .search-trigger .st-kbd{ display:none; }
/* Below the nav's own collapse point there's no room left in the header row (Subscribe + the hamburger already fill it),
   so the icon button hides here and site-search-v1.js puts a matching row inside the hamburger menu instead. */
@media (max-width:860px){ .search-trigger{ display:none; } }
.nav-search-item{
  display:none; align-items:center; justify-content:space-between; gap:10px; width:100%;
  padding:13px 0; border-bottom:1px solid var(--line-soft); background:none; border-left:0; border-right:0; border-top:0;
  color:var(--text); font:inherit; font-size:inherit; text-align:left; cursor:pointer;
}
@media (max-width:860px){ .nav-search-item{ display:flex; } }
.nav-search-item svg{ width:16px; height:16px; flex-shrink:0; color:var(--muted); margin-right:8px; }
.nav-search-item span:first-of-type{ display:flex; align-items:center; flex:1; }

.rn-search-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(10,8,7,0.72); backdrop-filter:blur(3px);
  display:flex; align-items:flex-start; justify-content:center; padding:11vh 16px 16px;
  opacity:0; pointer-events:none; transition:opacity .16s ease;
}
.rn-search-overlay.on{ opacity:1; pointer-events:auto; }
.rn-search-card{
  width:100%; max-width:620px; background:var(--surface); border:1px solid var(--line); border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,0.5); overflow:hidden; transform:translateY(-10px); transition:transform .16s ease;
  display:flex; flex-direction:column; max-height:74vh;
}
.rn-search-overlay.on .rn-search-card{ transform:translateY(0); }
.rn-search-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line); flex-shrink:0; }
.rn-search-head svg{ width:18px; height:18px; color:var(--muted); flex-shrink:0; }
.rn-search-input{
  flex:1; background:transparent; border:0; outline:0; color:var(--text); font:inherit; font-size:16px;
}
.rn-search-input::placeholder{ color:var(--faint); }
.rn-search-close{ background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:8px; padding:4px 8px; font-size:12px; cursor:pointer; flex-shrink:0; }
.rn-search-close:hover{ color:var(--text); border-color:var(--legendary); }
.rn-search-results{ overflow-y:auto; padding:8px; }
.rn-search-empty{ padding:28px 16px; text-align:center; color:var(--muted); font-size:13.5px; }
.rn-search-hint{ padding:14px 16px 4px; color:var(--faint); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; }
.rn-search-row{
  display:flex; align-items:flex-start; gap:12px; padding:11px 10px; border-radius:10px; text-decoration:none; cursor:pointer;
}
.rn-search-row:hover, .rn-search-row.active{ background:var(--surface-2); }
.rn-search-row-body{ min-width:0; flex:1; }
.rn-search-row-title{ color:var(--text); font-size:14px; font-weight:600; margin:0 0 3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rn-search-row-title mark{ background:none; color:var(--legendary-bright); }
.rn-search-row-desc{ color:var(--muted); font-size:12.5px; line-height:1.4; margin:0; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.rn-search-tag{
  flex-shrink:0; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:3px 7px; border-radius:6px; margin-top:1px; white-space:nowrap;
}
.rn-search-tag[data-c="Guide"]{ background:rgba(255,128,0,0.14); color:var(--legendary-bright); }
.rn-search-tag[data-c="Raid guide"]{ background:rgba(255,128,0,0.14); color:var(--legendary-bright); }
.rn-search-tag[data-c="Class guide"]{ background:rgba(255,128,0,0.14); color:var(--legendary-bright); }
.rn-search-tag[data-c="BiS list"]{ background:rgba(177,92,255,0.16); color:var(--epic-bright); }
.rn-search-tag[data-c="Herald of the Titans"]{ background:rgba(177,92,255,0.16); color:var(--epic-bright); }
.rn-search-tag[data-c="Argent Defender"]{ background:rgba(177,92,255,0.16); color:var(--epic-bright); }
.rn-search-tag[data-c="Talent build"]{ background:rgba(47,156,255,0.16); color:var(--rare-bright); }
.rn-search-tag[data-c="Addon"]{ background:rgba(62,217,115,0.16); color:var(--uncommon-bright); }
.rn-search-tag[data-c="Game"]{ background:rgba(244,183,64,0.16); color:var(--gold-bright); }
.rn-search-tag[data-c="Page"]{ background:var(--surface-2); color:var(--muted); }
.rn-search-foot{ display:flex; gap:14px; padding:10px 16px; border-top:1px solid var(--line); color:var(--faint); font-size:11px; flex-shrink:0; }
.rn-search-foot kbd{ border:1px solid var(--line); border-radius:4px; padding:0 5px; margin-right:5px; }
@media (max-width:640px){
  .rn-search-overlay{ padding:0; align-items:stretch; }
  .rn-search-card{ max-width:none; max-height:none; height:100%; border-radius:0; border:0; }
  .rn-search-input{ font-size:16px; }
}