/* Search: the panel that opens under the header (.search-panel,
   template-parts/search-panel.php, assets/js/search.js), the topic chips it
   shares with the results page (.search-chip), and the results page's head
   (.search-head, search.php).
   Never a bare .search or .search-results: WordPress puts those classes on
   <body> of the results page.
*/

/* ---- the panel ------------------------------------------------------------------ */
/* It starts at the bottom edge of the nav that opened it (--search-top, set by
   the script), so the header itself stays in place and simply opens up. */
.search-panel{
  --search-top:0px;
  position:fixed; left:0; right:0; top:var(--search-top); bottom:0; z-index:95;   /* under the sticky nav (100) */
}
.search-panel[hidden],
.search-panel [hidden]{ display:none !important; }

.search-panel__scrim{
  position:absolute; inset:0;
  background:rgba(21,19,15,.38);
  opacity:0; transition:opacity .45s var(--ease);
}
.search-panel__sheet{
  position:relative;
  max-height:100%; overflow-y:auto; overscroll-behavior:contain;
  background:var(--white);
  box-shadow:0 1px 0 var(--hair), 0 40px 70px -40px rgba(21,19,15,.35);
  clip-path:inset(0 0 100% 0);                        /* unrolls downwards from the nav */
  transition:clip-path .6s var(--ease-out);
}
/* under the sticky nav the panel takes its paper ground, so the two read as one */
.search-panel[data-anchor="sticky"] .search-panel__sheet{ background:var(--paper); }
.search-panel.is-open .search-panel__scrim{ opacity:1; }
.search-panel.is-open .search-panel__sheet{ clip-path:inset(0 0 -120px 0); }   /* room for the shadow */

.search-panel__inner{
  max-width:1240px; margin:0 auto;
  padding:clamp(26px, 2.6vw, 40px) var(--gutter) clamp(36px, 3.4vw, 56px);
}
.search-panel__inner > *{
  opacity:0; translate:0 -10px;
  transition:opacity .35s var(--ease), translate .6s var(--ease-out);
}
.search-panel.is-open .search-panel__inner > *{ opacity:1; translate:0 0; transition-delay:.14s; }
.search-panel.is-open .search-panel__results{ transition-delay:.22s; }

/* the header opens up: no seam, no reading-progress line between it and the panel */
.is-searching,
.is-searching body{ overflow:hidden; }
.is-searching body{ padding-right:var(--scrollbar-gap, 0px); }
.is-searching .nav{ right:var(--scrollbar-gap, 0px); }
.is-searching .nav.is-stuck,
.is-searching .nav--light{ box-shadow:none; }
.is-searching .nav__progress{ opacity:0; }
[data-search-open][aria-expanded="true"]{ color:var(--label); }
.is-searching .nav [data-search-open] .nav__icon circle,
.is-searching .nav [data-search-open] .nav__icon path{ stroke:var(--label); }

/* ---- the field: one big serif line on an ink rule ----------------------------- */
.search-panel__top{ display:flex; align-items:flex-end; gap:clamp(20px, 2.4vw, 40px); }
.search-panel__form{ flex:1; min-width:0; display:flex; flex-direction:column; gap:20px; }
.search-panel__kicker{ cursor:default; }
.search-panel__field{
  position:relative;
  display:flex; align-items:center; gap:18px;
  padding-bottom:16px; border-bottom:1px solid var(--ink);
}
/* the rule turns gold from the left while the field has focus, and runs while suggestions load */
.search-panel__field::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .7s var(--ease-out);
}
.search-panel__field:focus-within::after{ transform:scaleX(1); }
.search-panel.is-busy .search-panel__field::after{ animation:search-busy 1.1s var(--ease) infinite; }
@keyframes search-busy{
  0%   { transform:scaleX(0); transform-origin:left; }
  50%  { transform:scaleX(1); transform-origin:left; }
  51%  { transform:scaleX(1); transform-origin:right; }
  100% { transform:scaleX(0); transform-origin:right; }
}
.search-panel__glass{ flex:none; display:flex; width:24px; height:24px; color:var(--text); }
.search-panel__glass svg{ width:100%; height:100%; }
.search-panel__input{
  flex:1; min-width:0; margin:0; padding:0; border:0; border-radius:0; background:transparent;
  -webkit-appearance:none; appearance:none; outline:none;
  font:400 clamp(30px, 3.1vw, 48px)/1.15 var(--serif); letter-spacing:-.01em; color:var(--text);
}
.search-panel__input::placeholder{ color:var(--label); opacity:1; }
.search-panel__input::-webkit-search-cancel-button,
.search-panel__input::-webkit-search-decoration{ -webkit-appearance:none; display:none; }
.search-panel__clear{
  flex:none; padding:0; border:0; background:none; cursor:pointer;
  font:500 10px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--label);
  transition:color .3s var(--ease);
}
.search-panel__clear:hover{ color:var(--text); }
.search-panel__submit,
.search-head__submit{
  flex:none; height:44px; padding:0 24px; border:1px solid var(--ink); border-radius:0;
  background:transparent; cursor:pointer;
  font:600 11px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--text);
  transition:background .3s var(--ease), color .3s var(--ease);
}
.search-panel__submit:hover,.search-panel__submit:focus-visible,
.search-head__submit:hover,.search-head__submit:focus-visible{ background:var(--ink); color:var(--white); outline:none; }
.search-panel__close{
  /* level with the Search button: the field's padding plus half the input's
     line box (1.15em at the input's size) less half its own height */
  font-size:clamp(30px, 3.1vw, 48px);
  flex:none; width:44px; height:44px; margin-bottom:calc(16px + (1.15em - 44px) / 2);
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hair); border-radius:0; background:transparent; color:var(--text); cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.search-panel__close svg{ width:16px; height:16px; transition:rotate .5s var(--ease-out); }
.search-panel__close:hover,.search-panel__close:focus-visible{ border-color:var(--ink); background:var(--ink); color:var(--white); outline:none; }
.search-panel__close:hover svg{ rotate:90deg; }

/* ---- before anything is typed: recent searches, popular topics ----------------- */
.search-panel__results{ margin-top:clamp(28px, 2.8vw, 44px); }
.search-panel__group + .search-panel__group{ margin-top:clamp(24px, 2.2vw, 34px); }
.search-panel__group-head{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.search-panel__forget{
  padding:0; border:0; background:none; cursor:pointer;
  font:500 10px/1 var(--sans); letter-spacing:.24em; text-transform:uppercase; color:var(--label);
  transition:color .3s var(--ease);
}
.search-panel__forget:hover{ color:var(--text); }

/* topic chips, square as everything else on the site */
.search-chips{ list-style:none; margin:16px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.search-chip{
  display:inline-flex; align-items:center; gap:10px;
  min-height:38px; padding:0 16px;
  border:1px solid var(--hair);
  font:400 14px/1.2 var(--sans); letter-spacing:var(--ls-body); color:var(--text);
  transition:border-color .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.search-chip:hover,.search-chip:focus-visible{ border-color:var(--ink); background:var(--ink); color:var(--white); outline:none; }
.search-chip--recent::before{            /* a small clock: a search already made */
  content:""; flex:none; width:11px; height:11px; border:1px solid currentColor; border-radius:50%;
  background:linear-gradient(currentColor,currentColor) 50% 25% / 1px 35% no-repeat,
             linear-gradient(currentColor,currentColor) 62% 50% / 30% 1px no-repeat;
  opacity:.55;
}
.search-chip__count{ font-size:11px; letter-spacing:.08em; color:var(--label); transition:color .3s var(--ease); }
.search-chip:hover .search-chip__count,.search-chip:focus-visible .search-chip__count{ color:var(--white); }

/* ---- as they type: topics beside stories --------------------------------------- */
.search-panel__live{
  display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 8fr);
  column-gap:clamp(32px, 4.4vw, 80px); row-gap:28px; align-items:start;
}
.search-panel__live.is-single{ grid-template-columns:minmax(0, 1fr); max-width:820px; }
.search-panel__list{ list-style:none; margin:14px 0 0; padding:0; border-top:1px solid var(--hair); }
.search-panel__list li{ border-bottom:1px solid var(--hair); }
.search-panel mark{ background:none; color:inherit; box-shadow:inset 0 -1px 0 var(--gold); }

.search-panel__topic{
  display:flex; align-items:baseline; justify-content:space-between; gap:18px;
  padding:16px 0;
}
.search-panel__topic-name{ font:400 24px/1.15 var(--serif); color:var(--text); transition:color .3s var(--ease); }
.search-panel__topic-meta{ flex:none; font:500 10px/1 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--label); }

.search-panel__story{
  display:grid; grid-template-columns:104px minmax(0, 1fr); gap:20px; align-items:center;
  padding:14px 0;
}
.search-panel__thumb{ display:block; aspect-ratio:4 / 3; overflow:hidden; background:var(--paper-deep); }
.search-panel__thumb img{ width:100%; height:100%; object-fit:cover; transition:scale 1.2s var(--ease-out); }
.search-panel__story-body{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; }
.search-panel__story-title{ font:500 21px/1.2 var(--serif); color:var(--text); transition:color .3s var(--ease); }
.search-panel__story-date{ font:400 12px/1 var(--sans); letter-spacing:.04em; color:var(--label); }
.search-panel__topic:hover .search-panel__topic-name,
.search-panel__story:hover .search-panel__story-title{ color:var(--label); }
.search-panel__story:hover .search-panel__thumb img{ scale:1.05; }
.search-panel__topic:focus-visible,
.search-panel__story:focus-visible{ outline:1px solid var(--gold); outline-offset:6px; }
.search-panel__all{ margin-top:26px; }
.search-panel__empty{
  grid-column:1 / -1; max-width:52ch;
  font:400 var(--fs-body)/var(--lh-body) var(--sans); letter-spacing:var(--ls-body); color:var(--text);
}

/* ---- the results page's head ----------------------------------------------------- */
.search-head{ padding:clamp(24px, 2.6vw, 44px) var(--gutter) 0; }
.search-head__row{
  display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, 460px);
  align-items:end; gap:clamp(28px, 4vw, 80px);
  margin-top:clamp(28px, 3vw, 48px);
}
.search-head__tally{ font:500 10px/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--label); }
.search-head__title{
  margin-top:18px;
  font:400 clamp(40px, 5.4vw, 88px)/1 var(--serif); letter-spacing:-.02em; color:var(--text);
  overflow-wrap:anywhere;
}
.search-head__title em{ font-style:italic; }
.search-head__text{ margin-top:22px; max-width:56ch; font:400 var(--fs-body)/var(--lh-body) var(--sans); letter-spacing:var(--ls-body); color:var(--text); }
.search-head__form{ display:flex; align-items:center; gap:16px; padding-bottom:14px; border-bottom:1px solid var(--ink); }
.search-head__input{
  flex:1; min-width:0; margin:0; padding:0; border:0; border-radius:0; background:transparent;
  -webkit-appearance:none; appearance:none; outline:none;
  font:400 26px/1.2 var(--serif); color:var(--text);
}
.search-head__input::placeholder{ color:var(--label); opacity:1; }
.search-head__input::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }
.search-head__topics{ margin-top:clamp(32px, 3vw, 48px); }

/* the grid under it keeps the listing's look, closer to the head */
.archive.archive--search{ padding-top:clamp(20px, 2vw, 32px); }
.archive--search .archive__bar{ margin-top:0; }
/* no results, or nothing searched: the latest stories under their own kicker */
.archive.archive--search-latest{ padding-top:clamp(64px, 6vw, 104px); }
.archive--search-latest .archive__head{ margin-bottom:clamp(32px, 3vw, 48px); padding-bottom:20px; border-bottom:1px solid var(--hair); }
.archive__sort a{ color:var(--label); transition:color .3s var(--ease); }
.archive__sort a:hover,.archive__sort a[aria-current]{ color:var(--text); }
.archive__sort a + a::before{ content:"·"; display:inline-block; margin:0 12px; color:var(--label); }
.subnav__count{ margin-left:8px; color:var(--label); letter-spacing:.08em; }

/* ---- smaller screens ------------------------------------------------------------ */
@media (max-width:720px){
  .search-panel__inner{ padding:22px 22px 36px; }
  .search-panel__top{ align-items:flex-start; gap:16px; }
  .search-panel__form{ gap:16px; }
  .search-panel__field{ gap:12px; padding-bottom:12px; }
  .search-panel__glass{ width:20px; height:20px; }
  .search-panel__input{ font-size:28px; }
  .search-panel__submit{ display:none; }                 /* the keyboard's Search key does it */
  .search-panel__close{ width:40px; height:40px; margin:0; }
  .search-panel__live{ grid-template-columns:minmax(0, 1fr); }
  .search-panel__topic-name{ font-size:21px; }
  .search-panel__story{ grid-template-columns:var(--thumb-w) minmax(0, 1fr); gap:18px; }   /* the compact-list photo size, base.css */
  .search-panel__story-title{ font-size:18px; }

  .search-head__row{ grid-template-columns:minmax(0, 1fr); }
  .archive--search .archive__bar{ flex-direction:column; align-items:stretch; gap:18px; }
  .archive--search .archive__sort{ display:block; order:-1; padding-bottom:0; }
  .archive--search .subnav{ width:100%; }
}