/* ============================================================================
   VMM — Search
   1) Live autocomplete dropdown under the navbar search (global)
   2) The dedicated search results page (search.php)
   Faithful to the Vespers tokens in main.css.
   ========================================================================== */

/* ── 1. Live navbar dropdown ───────────────────────────────────────────── */
.search{position:relative;}

.vmm-ac{
  position:absolute; top:calc(100% + 12px); right:0;
  width:min(400px,92vw);
  background:var(--surface); color:var(--fg1);
  border:1px solid var(--border); border-radius:16px;
  box-shadow:var(--shadow-lg);
  overflow:hidden; z-index:140;
  opacity:0; visibility:hidden; transform:translateY(-8px) scale(.985);
  transform-origin:top right;
  transition:opacity .26s var(--ease), transform .32s var(--ease), visibility .26s;
}
.vmm-ac.open{opacity:1; visibility:visible; transform:none;}
.vmm-ac::before{ /* gilt hairline along the top */
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, transparent, var(--gilt-500), transparent);
  opacity:.9;
}

.vmm-ac-list{list-style:none; margin:0; padding:6px; max-height:min(68vh,460px); overflow-y:auto; overscroll-behavior:contain;}

.vmm-ac-item{
  display:flex; gap:13px; align-items:center;
  padding:10px 12px; border-radius:11px;
  text-decoration:none; color:inherit; cursor:pointer;
  transition:background-color .16s var(--ease);
}
.vmm-ac-item + .vmm-ac-item{margin-top:2px;}
.vmm-ac-item:hover,
.vmm-ac-item.is-active{background:var(--surface-warm);}
.vmm-ac-item.is-active{box-shadow:inset 0 0 0 1px var(--hairline-gold);}

.vmm-ac-thumb{
  width:48px; height:48px; flex:0 0 auto; border-radius:10px; overflow:hidden;
  background:var(--surface-sunken); display:grid; place-items:center; color:var(--gilt-700);
}
.vmm-ac-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

.vmm-ac-txt{min-width:0; display:flex; flex-direction:column; gap:2px;}
.vmm-ac-cat{
  font:700 10.5px/1 var(--font-body); letter-spacing:.13em; text-transform:uppercase;
  color:var(--gilt-700);
}
.vmm-ac-title{
  font:600 15px/1.3 var(--font-body); color:var(--fg1);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.vmm-ac-dek{
  font:400 12.5px/1.4 var(--font-body); color:var(--fg3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.vmm-ac-state{padding:18px 16px; text-align:center; font:500 13.5px/1.5 var(--font-body); color:var(--fg3);}
.vmm-ac-state .vmm-ac-spin{
  display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:-3px;
  border:2px solid var(--border-strong); border-top-color:var(--gilt-700); border-radius:50%;
  animation:vmm-ac-spin .7s linear infinite;
}
@keyframes vmm-ac-spin{to{transform:rotate(360deg);}}

.vmm-ac-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 16px; border-top:1px solid var(--border-soft);
  background:var(--surface-warm);
  font:600 13px/1 var(--font-body); color:var(--accent-strong); text-decoration:none;
}
.vmm-ac-foot:hover{color:var(--gilt-800);}
.vmm-ac-foot vm-icon{transition:transform .2s var(--ease);}
.vmm-ac-foot:hover vm-icon{transform:translateX(3px);}

@media (max-width:760px){
  .vmm-ac{position:fixed; left:12px; right:12px; top:auto; width:auto; max-width:none;}
}
@media (prefers-reduced-motion:reduce){
  .vmm-ac{transition:opacity .2s;} .vmm-ac.open{transform:none;}
  .vmm-ac-spin{animation:none;}
}

/* ── 2. Search results page (search.php) ───────────────────────────────── */
.srch-hero{
  background:linear-gradient(180deg, var(--parchment-100), var(--bg));
  border-bottom:1px solid var(--border-soft);
  padding:clamp(104px,13vw,140px) 0 clamp(28px,4vw,44px);
}
.srch-eyebrow{display:inline-flex; align-items:center; gap:8px; color:var(--eyebrow-ink); margin-bottom:18px;}
.srch-eyebrow vm-icon{color:var(--gilt-700);}

.srch-form{
  display:flex; align-items:center; gap:10px; position:relative;
  max-width:680px;
  background:var(--surface); border:1px solid var(--border-strong); border-radius:999px;
  padding:8px 8px 8px 18px; box-shadow:var(--shadow-sm);
  transition:box-shadow .3s var(--ease), border-color .3s;
}
.srch-form:focus-within{border-color:var(--hairline-gold); box-shadow:var(--glow-gold);}
.srch-form-ic{color:var(--gilt-700); flex:0 0 auto;}
.srch-form input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
  font:500 1.05rem/1.4 var(--font-body); color:var(--fg1); padding:8px 4px;
}
.srch-form input::placeholder{color:var(--fg3);}
.srch-form .btn{flex:0 0 auto;}

.srch-count{margin-top:20px; font:500 1rem/1.5 var(--font-body); color:var(--fg2);}
.srch-count strong{color:var(--fg1);} .srch-count em{font-style:italic; color:var(--accent-strong);}

.srch-results{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.srch-card{
  position:relative; display:flex; align-items:center; gap:18px;
  background:var(--surface); border:1px solid var(--border); border-radius:16px;
  padding:16px 18px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.srch-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--hairline-gold);}
.srch-card-link{position:absolute; inset:0; z-index:1; border-radius:inherit;}
.srch-card-link:focus-visible{outline:2px solid var(--gilt-700); outline-offset:3px;}

.srch-thumb{
  width:84px; height:84px; flex:0 0 auto; border-radius:12px; overflow:hidden;
  background:var(--surface-sunken); display:grid; place-items:center; color:var(--gilt-700);
}
.srch-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.srch-thumb--mark{background:linear-gradient(150deg,var(--parchment-200),var(--surface-sunken));}

.srch-card-text{min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:5px;}
.srch-cat{font:700 11px/1 var(--font-body); letter-spacing:.14em; text-transform:uppercase; color:var(--gilt-700);}
.srch-card-title{font:600 1.28rem/1.25 var(--font-display); color:var(--fg1);}
.srch-card-dek{font:400 .94rem/1.5 var(--font-body); color:var(--fg2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.srch-card-go{flex:0 0 auto; color:var(--gilt-700); display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%; background:var(--surface-warm);
  transition:transform .25s var(--ease), background-color .25s;}
.srch-card:hover .srch-card-go{transform:translateX(4px); background:var(--gilt-100);}

@media (max-width:560px){
  .srch-card{gap:14px; padding:14px;}
  .srch-thumb{width:62px; height:62px;}
  .srch-card-go{display:none;}
}

/* empty / prompt state */
.srch-empty{max-width:560px; text-align:center; margin:clamp(20px,5vw,52px) auto;}
.srch-empty-mark{display:inline-grid; place-items:center; width:84px; height:84px; margin-bottom:22px;
  border-radius:50%; color:var(--gilt-700);
  background:radial-gradient(circle at 50% 38%, var(--gilt-100), var(--surface-warm));
  box-shadow:var(--shadow-sm);}
.srch-empty-title{font:600 clamp(1.6rem,3.2vw,2.1rem)/1.18 var(--font-display); color:var(--fg1); margin:0 0 12px;}
.srch-empty-lead{font:400 1.05rem/1.6 var(--font-body); color:var(--fg2); margin:0 0 26px;}
.srch-empty-act{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

/* pagination — lean on the site's pager treatment but ensure spacing */
.srch-pager{margin-top:36px;}
.srch-pager .nav-links{display:flex; gap:8px; flex-wrap:wrap; justify-content:center;}
.srch-pager .page-numbers{
  display:inline-grid; place-items:center; min-width:42px; height:42px; padding:0 12px;
  border:1px solid var(--border); border-radius:11px; background:var(--surface);
  font:600 14px/1 var(--font-body); color:var(--fg1); text-decoration:none;
  transition:border-color .2s, background-color .2s, color .2s;
}
.srch-pager .page-numbers:hover{border-color:var(--hairline-gold); color:var(--accent-strong);}
.srch-pager .page-numbers.current{background:var(--ink-900); color:var(--on-dark-1); border-color:var(--ink-900);}
.srch-pager .page-numbers.dots{border-color:transparent; background:transparent;}