/* =====================================================================
   GOKUDO: search results page (search.php). The same stylesheet also renders
   the category/tag/author/date archives and the blog index, which fall
   through to index.php (see the 'search' and 'archive' contexts in
   inc/assets.php). Banner, footer, wrap, and fonts come from base.css
   (loaded site-wide) plus style.css. gokudo_current_context() in
   inc/assets.php resolves which context is active, not functions.php.
   The banner's search icon is styled in base.css. It links to this page. The
   search field itself lives here, under .gk-sform.
   ===================================================================== */

/* ============ PAGE HEAD (same treatment as terms/sitemap) ============ */
/* Breadcrumb, title, meta come from components.css. search/sitemap/terms run a
   smaller pagehead than cart/checkout/account/products, so padding, .ph-title
   sizing, and .ph-sub spacing are overridden below. */
.pagehead{--ph-title-size:clamp(48px,6.4vw,98px);border-bottom:1px solid var(--line);background:var(--bg);padding:60px 0 44px}
.ph-title{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap}
.ph-title h1{font-family:var(--display);font-weight:900;font-size:var(--ph-title-size);line-height:.84;text-transform:uppercase;letter-spacing:var(--track-lg)}
.ph-title .han{font-family:var(--han);font-size:clamp(26px,3.4vw,44px);color:var(--blue);line-height:1;margin-bottom:6px}
/* Search results also drop the shared .ph-sub max-width, since the summary line
   ("results for <strong>") is short and does not need to wrap at 560px. */
.ph-sub{margin-top:24px;color:var(--faint);font-size:15px;line-height:1.6}
.ph-sub strong{color:var(--ink);font-weight:600}

/* ============ THE FIELD ============ */
/* The site's only search input. The banner icon links here instead of opening an
   overlay. The arrow beside it is set in Manuka, the same treatment the menu panel's
   own search button gets in base.css. */
.gk-sform{max-width:640px;margin-top:32px}
.gk-sform-row{display:flex;align-items:center;gap:16px;border-bottom:2px solid var(--line);transition:border-color .2s}
.gk-sform-row:focus-within{border-bottom-color:var(--blue)}
/* box-shadow:none undoes Kadence's own drop shadow on input. On a boxed field, that
   shadow reads as depth. On this bare underlined field, it is a gray rectangle
   floating behind the text.
   base.css also states this reset centrally, for every control and every interaction
   state. This line stays here too, because a bare underlined input is exactly where
   that shadow reads worst. */
.gk-sform input[type=search]{flex:1;min-width:0;background:transparent;border:none;box-shadow:none;color:var(--ink);font-family:var(--body);font-weight:400;font-size:clamp(20px,2.2vw,26px);line-height:1.3;padding:12px 0;outline:none;-webkit-appearance:none}
.gk-sform input[type=search]::placeholder{color:var(--faint)}
/* The arrow marks its states on the glyph color alone, so all three hold the empty
   ground. base.css says why the states have to be named. */
.gk-sform-go,.gk-sform-go:is(:hover,:focus,:active){background:none;border:none;color:var(--ink);font-family:var(--display);font-size:26px;line-height:1;letter-spacing:var(--track-sm);cursor:pointer;flex:none;transition:color .2s}
.gk-sform-go:hover{color:var(--blue)}
.gk-sform-hint{color:var(--faint);margin-top:16px}
/* Nothing typed yet: the page is the field and nothing follows it. Without this the
   pagehead's closing hairline would land straight on the footer's opening one. */
body.gokudo-search-blank .pagehead{padding-bottom:120px;border-bottom:none}

/* ============ RESULTS ============ */
.sresults{padding:56px 0 110px;background:var(--bg)}
.sres-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.sres-item{border-bottom:1px solid var(--line2)}
.sres-item a{display:flex;align-items:center;gap:24px;padding:26px 4px}
.sres-thumb{flex:none;width:80px;height:64px;background:var(--surface);border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;overflow:hidden}
.sres-thumb img{width:100%;height:100%;object-fit:contain;padding:6px;mix-blend-mode:multiply}
.sres-noimg{font-family:var(--display);font-weight:900;font-size:30px;color:var(--wash-sm)}
.sres-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.sres-kind{font-size:10px;letter-spacing:.16em;color:var(--blue)}
.sres-title{font-family:var(--display);font-weight:900;font-size:clamp(22px,2.6vw,32px);line-height:1;text-transform:uppercase;letter-spacing:var(--track-md);color:var(--ink)}
.sres-price{font-family:var(--label);font-size:13px;color:var(--muted)}
.sres-price del{color:var(--faint);margin-right:6px}
.sres-excerpt{color:var(--muted);font-size:14.5px;line-height:1.6;max-width:640px}
.sres-go{flex:none;color:var(--faint);letter-spacing:.16em;transition:color .2s}
.sres-item a:hover .sres-go{color:var(--blue)}
.sres-go .arr{display:inline-block}

/* ============ EMPTY STATE ============ */
/* The shared shell is .gk-empty in components.css. These are this view's own sizes. */
.sresults .gk-empty{padding:70px 20px 40px;max-width:520px}
.sresults .gk-empty-title{font-size:clamp(30px,4vw,48px)}
.sresults .gk-empty-body{font-size:16px;margin-top:16px;margin-bottom:28px;max-width:420px}
.sresults .gk-empty .btn{padding:16px 26px}

/* ============ PAGINATION (WP the_posts_pagination) ============ */
.sresults .navigation.pagination{margin-top:44px}
.sresults .nav-links{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.sresults .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 12px;border:1px solid var(--line);font-family:var(--label);font-size:12px;letter-spacing:.1em;color:var(--muted);transition:.2s}
.sresults .page-numbers:hover{border-color:var(--ink);color:var(--ink)}
.sresults .page-numbers.current{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}

@media(max-width:560px){
	.gk-sform{margin-top:24px}
	.sres-item a{gap:16px;padding:20px 2px}
	.sres-thumb{width:60px;height:52px}
}