/* Home page search (search.js): a plain search field under the home heading, with suggestions below it.
   Colours and fonts come from site-theme.css; post types are marked with the same small square as the lists. */

.site-search { position: relative; }
.site-search-toggle { display: none; }
.site-search-label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.site-search--hero { max-width: 720px; margin: 22px 0 0; text-align: left; z-index: 30; }

.site-search-box { position: relative; }
.site-search-box::before {            /* magnifier */
  content: ""; position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7386' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none; z-index: 2;
}
.site-search-input {
  position: relative; z-index: 1;
  width: 100%; height: 50px;
  padding: 0 52px 0 46px;
  font: inherit; font-size: 1.02rem; color: #13213A;
  background: #FFFFFF;
  border: 1px solid #CFCAC0; border-bottom: 2px solid #13213A;
  border-radius: 3px;
  box-shadow: none;
  transition: border-color .12s, box-shadow .12s;
  -webkit-appearance: none; appearance: none;
}
.site-search-input::placeholder { color: #8A8F9C; }
.site-search-input::-webkit-search-cancel-button { cursor: pointer; }
.site-search-input:hover { border-color: #6B7386; border-bottom-color: #13213A; }
.site-search-input:focus {
  outline: none;
  border-color: #13213A;
  box-shadow: 0 0 0 3px rgba(242, 160, 7, .3);
}
.site-search-kbd {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 2;
  font: 600 .75rem/1 ui-monospace, Consolas, monospace; color: #6B7386;
  border: 1px solid #CFCAC0; border-bottom-width: 2px; border-radius: 3px; padding: 3px 6px;
  pointer-events: none;
}
.site-search-input:focus ~ .site-search-kbd { display: none; }

/* suggestions hang under the field */
.site-search-panel {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #FFFFFF;
  border: 1px solid #CFCAC0; border-top: 2px solid #13213A; border-radius: 0 0 3px 3px;
  box-shadow: 0 10px 24px -12px rgba(19, 33, 58, .25);
  padding: 4px 0 8px;
  max-height: min(70vh, 520px); overflow-y: auto;
}
.site-search-list { list-style: none; margin: 0; padding: 0; }
.site-search-group {
  font: 600 .7rem/1 "Source Sans 3", system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase;
  color: #6B7386; padding: 12px 16px 6px;
}
.site-search-opt {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: baseline;
  padding: 7px 16px; cursor: pointer;
}
.site-search-opt[aria-selected="true"] { background: #F4F2EC; box-shadow: inset 3px 0 0 #F2A007; }
.site-search-ico { width: 7px; height: 7px; margin-top: 1px; background: var(--type-c, #13213A); }
.site-search-ico.is-page { background: none; border: 1px solid #6B7386; width: 7px; height: 7px; }
.site-search-ico.is-all { background: none; }
.site-search-text { display: grid; min-width: 0; }
.site-search-title {
  color: #13213A; font-family: "Source Serif 4", Georgia, serif; font-weight: 600; font-size: 1rem; line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-search-meta {
  color: #6B7386; font-size: .84rem; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.site-search-all .site-search-title { font-family: inherit; font-weight: 600; font-size: .92rem; text-decoration: underline; text-decoration-color: #F2A007; text-underline-offset: 3px; }
.site-search mark { background: none; color: inherit; font-weight: 700; box-shadow: inset 0 -.35em 0 rgba(242, 160, 7, .25); }
.site-search-meta mark { color: #13213A; }
.site-search-status { margin: 0; padding: 6px 16px 0; color: #6B7386; font-size: .85rem; }
.site-search-status:empty { display: none; }

/* the big field replaces the feed's own search field (it drives it) */
.feed-page:has(.site-search) .filters > .filter-search { display: none; }

@media (max-width: 820px) {
  .site-search--hero { margin-top: 18px; }
  .site-search-input { height: 48px; font-size: 1rem; padding-right: 16px; }
  .site-search-kbd { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-search-input { transition: none; }
}

/* the suggestions must paint above the list and the sidebar */
.feed-page > .page-hero:has(.site-search) { z-index: 5; }
/* the focus ring is the focus indicator here */
body .site-search .site-search-input:focus-visible { outline: none; }