/**
 * Happy Cappy — site search overlay + results page.
 * File: assets/css/hc-search.css  (CHILD theme)
 *
 * Command-palette overlay opened from the header search icon, plus the
 * categorized /?s= results page (search.php). Uses the shared design tokens
 * (tokens.css). Loaded site-wide with the chrome. Dark-mode omitted (matches
 * the other chrome CSS).
 */

/* Scroll lock while the overlay is open (compensate for the scrollbar). */
html.search-open{overflow:hidden}
html.search-open body{padding-right:var(--sbw,0)}

/* ---- Overlay --------------------------------------------------------- */
.hc-search svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.hc-search-scrim{position:fixed;inset:0;background:rgba(16,58,69,.46);z-index:1200;animation:hcSearchFade .16s ease}
.hc-search{position:fixed;top:7vh;left:50%;transform:translateX(-50%);width:min(640px,calc(100% - 32px));max-height:76vh;display:flex;flex-direction:column;background:var(--surf);border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:1201;overflow:hidden;font-family:var(--font-body);animation:hcSearchPop .17s ease}
/* The [hidden] attribute must win over the display above, or the overlay shows
   on page load (a class selector out-specifies the bare [hidden] UA rule). */
.hc-search[hidden],.hc-search-scrim[hidden]{display:none}

@keyframes hcSearchFade{from{opacity:0}to{opacity:1}}
@keyframes hcSearchPop{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}

.hc-search-form{display:flex;align-items:center;gap:10px;padding:14px 14px;border-bottom:1px solid var(--line);margin:0}
.hc-search-field{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:11px;background:var(--card-2);border:1.5px solid transparent;border-radius:13px;padding:11px 14px;transition:border-color .15s,background .15s,box-shadow .15s}
.hc-search-field:focus-within{background:var(--surf);border-color:var(--teal);box-shadow:0 0 0 3px rgba(47,111,168,.13)}
.hc-search-ico{width:20px;height:20px;color:var(--teal);flex:0 0 auto}
/* Beat the parent theme's global input[type=search] rule (border/padding/bg). */
.hc-search-field input.hc-search-input{flex:1 1 auto;min-width:0;width:auto;border:0!important;outline:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;margin:0!important;height:auto!important;min-height:0!important;border-radius:0!important;font-family:var(--font-body);font-size:16px;color:var(--ink);line-height:1.4}
.hc-search-input::placeholder{color:var(--muted)}
/* Hide the browser's native search clear (×) so only our styled clear shows. */
.hc-search-input::-webkit-search-cancel-button,.hc-search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.hc-search-clear{width:26px;height:26px;padding:0;border:0;border-radius:50%;background:var(--card-2);color:var(--teal-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto}
.hc-search-clear svg{width:14px;height:14px}
.hc-search-close{border:1px solid var(--line);background:transparent;color:var(--muted);font-size:11px;font-family:var(--font-body);letter-spacing:.04em;padding:4px 8px;border-radius:8px;cursor:pointer;flex:0 0 auto}
.hc-search-close:hover{color:var(--teal-ink);border-color:var(--muted)}

.hc-search-body{overflow-y:auto;padding:12px 12px 14px}
.hc-search.is-loading .hc-search-body{opacity:.6}

.hc-search-eyebrow,.hc-sr-label{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding:6px 6px 8px;font-weight:600}
.hc-search-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px 4px}
.hc-search-chip{border:1px solid var(--line);background:var(--surf);color:var(--teal-ink);font-family:var(--font-body);font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer;transition:background .14s,border-color .14s}
.hc-search-chip:hover{background:var(--card-2);border-color:var(--teal)}

.hc-sr-row{display:flex;align-items:center;gap:12px;padding:9px 8px;border-radius:var(--radius-sm);text-decoration:none;color:var(--ink)}
.hc-sr-row:hover,.hc-sr-row.is-active{background:var(--card-2)}

/* Products: 2-up cards (matches the design mockup). minmax(0,1fr) lets the
   columns shrink below the title's min-content so long titles clamp instead of
   forcing the grid wider than the panel (which caused a horizontal scrollbar). */
.hc-sr-prodgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin:2px 0 8px}
.hc-sr-prod{border:1px solid var(--line);border-radius:12px;padding:10px}
.hc-sr-prod:hover,.hc-sr-prod.is-active{background:var(--card-2);border-color:var(--teal)}
/* Product title: wrap to at most 2 lines, then ellipsis. */
.hc-sr-prod .hc-sr-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hc-sr-thumb{width:44px;height:44px;flex:0 0 auto;border-radius:10px;background:var(--card-2);overflow:hidden;display:flex;align-items:center;justify-content:center}
.hc-sr-thumb img{width:100%;height:100%;object-fit:cover}

/* Guides/articles: plain leading icon (products use their thumbnail). */
.hc-sr-content{align-items:flex-start}
.hc-sr-ic{flex:0 0 auto;color:var(--muted);display:flex;align-items:center;padding-top:1px}
.hc-sr-ic svg{width:19px;height:19px}
.hc-sr-text{min-width:0;display:flex;flex-direction:column;gap:2px}
.hc-sr-title{font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-sr-price{font-size:13px;color:var(--teal);font-family:var(--font-display)}
.hc-sr-meta{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hc-sr-all{display:block;text-align:center;font-size:13.5px;font-weight:600;color:var(--teal);text-decoration:none;padding:12px;margin-top:6px;border-top:1px solid var(--line)}
.hc-sr-all::after{content:"→";margin-left:8px;display:inline-block}
.hc-sr-all:hover,.hc-sr-all.is-active{color:var(--accent)}

.hc-search-msg{padding:22px 10px;text-align:center;color:var(--muted);font-size:14px}

@media(max-width:560px){
	.hc-search{top:0;width:100%;max-height:100vh;height:100vh;border-radius:0;border:0}
	.hc-sr-prodgrid{grid-template-columns:minmax(0,1fr)}
}

/* Results page (search.php) styles live in hc-search-results.css, loaded only
   on is_search() — kept out of this site-wide chrome bundle. */