/* The search (src/js/search.js): the bar the magnifier opens, the results under it while typing,
   the field on the home page, and the results page. Colours and type follow the home page (home.css). */
:root{--s-cream:#FBF4E8;--s-plum:#4B2E45;--s-rose:#E9C9C1;--s-line:rgba(75,46,69,.22);--s-serif:'Lora',Georgia,serif;--s-sans:'Montserrat',Arial,sans-serif}

/* ---------- the bar (opens over the header) ---------- */
.searchbar{position:fixed;top:0;left:0;right:0;z-index:200;background:var(--s-cream);box-shadow:0 10px 40px rgba(40,20,30,.28);
  padding:22px max(20px,calc((100% - 860px)/2)) 20px;font-family:var(--s-sans);color:var(--s-plum)}
.searchbar[hidden]{display:none}
.searchbar__box{display:flex;align-items:center;gap:12px;border-bottom:2px solid var(--s-plum);padding:4px 2px 10px}
.searchbar__icon,.searchbar__clear svg,.searchbar__back svg{width:26px;height:26px;fill:var(--s-plum);flex:none}
.searchbar__box input,.h2-search input,.sr-field input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--s-plum);
  font:500 24px/1.3 var(--s-serif);-webkit-appearance:none;appearance:none;padding:0}
.searchbar__box input::placeholder,.h2-search input::placeholder,.sr-field input::placeholder{color:rgba(75,46,69,.5);opacity:1}
.searchbar input::-webkit-search-cancel-button,.h2-search input::-webkit-search-cancel-button,.sr-field input::-webkit-search-cancel-button{display:none}
.searchbar__clear,.searchbar__back{border:0;background:none;cursor:pointer;padding:6px;border-radius:50%;line-height:0;flex:none}
.searchbar__clear:hover,.searchbar__back:hover{background:var(--s-rose)}
.searchbar__clear{display:none}
body.search-open #content::after{content:"";position:fixed;inset:0;background:rgba(40,20,30,.5);z-index:150}

/* ---------- results while typing ---------- */
.sr-panel[hidden]{display:none}
.searchbar .sr-panel{margin-top:10px;max-height:calc(100vh - 130px);overflow:auto}
.sr-row{display:flex;align-items:center;gap:16px;padding:8px;border-radius:10px;text-decoration:none;color:var(--s-plum)}
.sr-row img,.sr-row .sr-nophoto{width:62px;height:62px;object-fit:cover;border-radius:6px;background:var(--s-rose);flex:none;display:block}
.sr-row__text{min-width:0;text-align:left}
.sr-row b{display:block;font:500 19px/1.25 var(--s-serif);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-row small{display:block;margin-top:3px;font:500 14px/1.3 var(--s-sans);color:#6b5560}
.sr-row:hover,.sr-row.is-active,.sr-all:hover,.sr-all.is-active{background:var(--s-rose)}
.sr-panel mark,.sr-card mark{background:none;color:#B4532F;font-weight:inherit}
.sr-all{display:block;margin-top:6px;padding:12px 8px;border-top:1px solid var(--s-line);border-radius:0 0 10px 10px;text-decoration:none;
  font:500 15px/1.3 var(--s-sans);color:var(--s-plum);text-align:left}
.sr-none{padding:16px 8px;font:500 16px/1.5 var(--s-sans);color:var(--s-plum);text-align:left}

/* ---------- the field on the home page ---------- */
.h2 .h2-search{position:relative;display:flex;align-items:center;gap:12px;max-width:560px;margin:30px auto 0;padding:13px 22px;
  background:#fff;border:1.5px solid var(--s-plum);border-radius:999px;text-align:left}
.h2-search:focus-within{box-shadow:0 0 0 4px rgba(75,46,69,.14)}
.h2-search svg{width:24px;height:24px;fill:var(--s-plum);flex:none}
.h2-search input{font-size:19px}
.h2-search .sr-panel{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:20;background:var(--s-cream);border:1px solid var(--s-line);
  border-radius:16px;box-shadow:0 18px 50px rgba(40,20,30,.25);padding:8px;max-height:min(70vh,520px);overflow:auto}

/* ---------- the results page ---------- */
body.search-page{background:var(--s-cream)}
body.search-page .fktJzd,body.search-page .UtePc{background:var(--s-cream)}
body.search-page #site-header .zDUgLc{opacity:1}
.search-results{padding:112px max(20px,calc((100% - 1180px)/2)) 80px;font-family:var(--s-sans);color:var(--s-plum);min-height:70vh}
.sr-field{display:flex;align-items:center;gap:14px;border-bottom:2px solid var(--s-plum);padding:0 2px 12px;max-width:760px}
.sr-field svg{width:30px;height:30px;fill:var(--s-plum);flex:none}
.sr-field input{font-size:clamp(26px,3.4vw,44px)}
.sr-headline{margin:22px 0 0;font:500 16px/1.4 var(--s-sans);color:#6b5560;min-height:22px}
.sr-filters{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 30px}
.sr-filters button{border:1.5px solid var(--s-plum);background:none;color:var(--s-plum);border-radius:999px;padding:8px 16px;cursor:pointer;font:500 15px/1.2 var(--s-sans)}
.sr-filters button span{opacity:.6;margin-left:4px}
.sr-filters button.is-on{background:var(--s-plum);color:var(--s-cream)}
.sr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 18px}
.sr-card{display:block;text-decoration:none;color:var(--s-plum);min-width:0}
.sr-card img,.sr-card .sr-nophoto{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:var(--s-rose)}
.sr-card b{display:block;margin-top:12px;font:500 20px/1.2 var(--s-serif)}
.sr-card small{display:block;margin-top:6px;font:500 14px/1.3 var(--s-sans);color:#6b5560}
.sr-card__snip{display:block;margin-top:8px;font:400 14px/1.45 var(--s-sans);color:#4a3a44}
.sr-card:hover b{text-decoration:underline;text-underline-offset:3px}
.sr-none--page{grid-column:1/-1;padding:30px 0;font-size:19px}

@media (max-width:900px){.sr-grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:640px){
  .searchbar{padding:14px 14px 12px}
  .searchbar__box input{font-size:20px}
  .sr-row b{font-size:17px;white-space:normal}
  .sr-row img,.sr-row .sr-nophoto{width:54px;height:54px}
  .h2 .h2-search{padding:11px 18px;margin-top:24px}
  .h2-search input{font-size:17px}
  .search-results{padding-top:92px}
  .sr-grid{grid-template-columns:repeat(2,1fr);gap:24px 12px}
  .sr-card b{font-size:17px}
}