/* WhetGuide site search (2026-11-14). Header box on every page + /search/ results page.
   Light components (white field, white dropdown and result cards, dark text) on the site's existing header. */
.gs-vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.gtop nav,.top nav{margin-left:auto}
.gsearch{position:relative;flex:0 1 15.5rem;min-width:0;display:flex;align-items:center;margin-left:1.25rem}
.gsearch .gs-in{width:100%;min-width:0;height:2.4rem;padding:0 2.6rem 0 .85rem;border:1px solid rgba(255,255,255,.55);border-radius:6px;background:#fff;color:#15171B;
  font:400 .95rem/1 'IBM Plex Sans',system-ui,sans-serif;box-shadow:0 1px 2px rgba(0,0,0,.18);-webkit-appearance:none;appearance:none}
.gsearch .gs-in::placeholder{color:#5B626C;opacity:1}
.gsearch .gs-in::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.gsearch .gs-in:focus{outline:none;border-color:#C9A46A;box-shadow:0 0 0 3px rgba(201,164,106,.45)}
.gsearch .gs-btn{position:absolute;right:.2rem;top:50%;transform:translateY(-50%);width:2.1rem;height:2.1rem;display:grid;place-items:center;border:0;border-radius:5px;background:transparent;color:#2A2E35;cursor:pointer}
.gsearch .gs-btn:hover,.gsearch .gs-btn:focus-visible{background:#C9A46A;color:#15171B;outline:none}

/* dropdown */
.gs-pop{position:absolute;right:0;top:calc(100% + .45rem);z-index:50;width:min(29rem,calc(100vw - 2.2rem));background:#fff;color:#15171B;border:1px solid #DCD8D0;border-radius:10px;
  box-shadow:0 18px 40px rgba(10,12,16,.35);overflow:hidden;font:400 .95rem/1.35 'IBM Plex Sans',system-ui,sans-serif;text-align:left}
.gs-pop[hidden]{display:none}
.gs-list{list-style:none;margin:0;padding:.35rem;max-height:min(70vh,30rem);overflow-y:auto}
.gs-opt{margin:0;border-radius:7px}
.gs-opt a{display:flex;gap:.75rem;align-items:center;padding:.5rem .55rem;color:#15171B;text-decoration:none;border-radius:7px}
.gs-opt[aria-selected="true"] a,.gs-opt a:hover{background:#F3EEE4}
.gs-opt[aria-selected="true"] a{box-shadow:inset 3px 0 0 #A07A3A}
.gs-th{flex:0 0 auto;width:3.6rem;height:2.4rem;border-radius:5px;object-fit:cover;background:#ECE8E0}
.gs-ph{display:grid;place-items:center;color:#7A5A22;font:800 .8rem/1 'Big Shoulders Display',Impact,sans-serif;text-transform:uppercase;letter-spacing:.04em}
.gs-tx{min-width:0;display:flex;flex-direction:column;gap:.12rem}
.gs-t{font-weight:600;font-size:.95rem;line-height:1.3;color:#15171B}
.gs-s{font:500 .7rem/1.2 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6B5020}
.gs-t mark,.sr-item mark{background:#F6E2B8;color:inherit;border-radius:2px;padding:0 1px}
.gs-all a{justify-content:space-between;font-weight:600;color:#6B5020;border-top:1px solid #ECE8E0;border-radius:0 0 7px 7px;margin-top:.2rem}
.gs-empty{padding:.9rem 1rem;color:#3F4650;font-size:.92rem}
.gs-empty a{color:#6B5020;font-weight:600}

@media (max-width:1000px){
  .gsearch{flex:1 1 auto;max-width:17rem}
}
@media (max-width:640px){
  .gtop,.top{gap:.75rem}
  .gsearch{max-width:none;margin-left:.5rem;position:static}   /* dropdown anchors to the (positioned) header instead */
  .gsearch .gs-in{font-size:16px;height:2.35rem}   /* 16px stops iOS zooming into the field */
  .gsearch .gs-btn{position:relative;right:auto;top:auto;transform:none;flex:0 0 auto;margin-left:-2.3rem}   /* form is static here, so keep the icon in flow inside the field */
  .gs-pop{left:.75rem;right:.75rem;top:calc(100% - .35rem);width:auto}
}

/* /search/ results page: a light panel between the site's header and footer */
.srch{background:#F7F5F0;color:#15171B;min-height:60vh;padding:clamp(2rem,5vw,3.5rem) clamp(1.1rem,4vw,3.5rem) 4rem}
.srch-in{max-width:52rem;margin:0 auto}
.srch h1{font:900 clamp(2.2rem,5vw,3.4rem)/1 'Big Shoulders Display',Impact,sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:0 0 1.1rem;color:#15171B}
.sr-form{display:flex;gap:.5rem;margin:0 0 .9rem}
.sr-form input{flex:1 1 auto;min-width:0;height:3rem;padding:0 1rem;border:1px solid #BDB6A8;border-radius:8px;background:#fff;color:#15171B;font:400 1.05rem/1 'IBM Plex Sans',system-ui,sans-serif;-webkit-appearance:none;appearance:none}
.sr-form input:focus{outline:none;border-color:#A07A3A;box-shadow:0 0 0 3px rgba(201,164,106,.4)}
.sr-form button{flex:0 0 auto;height:3rem;padding:0 1.3rem;border:0;border-radius:8px;background:#C9A46A;color:#15171B;font:600 1rem/1 'IBM Plex Sans',system-ui,sans-serif;cursor:pointer}
.sr-form button:hover,.sr-form button:focus-visible{background:#B48C4E;outline:none}
.sr-status{color:#3F4650;font-size:.95rem;margin:0 0 1.2rem;min-height:1.4em}
.sr-list{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.sr-item{display:flex;gap:1rem;align-items:flex-start;padding:1rem;background:#fff;border:1px solid #E2DDD3;border-radius:10px;color:#15171B;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.sr-item:hover,.sr-item:focus-visible{border-color:#C9A46A;box-shadow:0 4px 14px rgba(21,23,27,.08);outline:none}
.sr-item img,.sr-item .gs-ph{flex:0 0 auto;width:8rem;height:5.33rem;border-radius:6px;object-fit:cover;background:#ECE8E0}
.sr-body{min-width:0}
.sr-sec{font:500 .72rem/1.2 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#6B5020}
.sr-item h2{font:600 1.15rem/1.3 'IBM Plex Sans',system-ui,sans-serif;margin:.25rem 0 .35rem;color:#15171B}
.sr-item p{margin:0;color:#3F4650;font-size:.95rem;line-height:1.5}
.sr-hint{color:#3F4650}
.sr-hint a,.srch .sr-links a{color:#6B5020;font-weight:600}
.sr-links{display:flex;flex-wrap:wrap;gap:.5rem 1.2rem;margin-top:.6rem}
@media (max-width:640px){
  .sr-item{gap:.75rem;padding:.8rem}
  .sr-item img,.sr-item .gs-ph{width:5.2rem;height:3.5rem}
  .sr-item h2{font-size:1.02rem}
}
@media (prefers-reduced-motion:reduce){.sr-item{transition:none}}