/* ---------------------------------------------------------------------------
   Site search — the header trigger and its dialog.

   Its own file rather than an addition to main.css: that stylesheet is ~200KB
   and this site is deployed by uploading files by hand, so a change to the
   search box should not mean re-uploading all of it. Loaded by
   components/site-search.php, which is where the markup lives too.
   --------------------------------------------------------------------------- */

:root {
    --ss-red: #ce1212;
    --ss-ink: #212529;
    --ss-muted: #6c757d;
    --ss-line: #e6e6e6;
    --ss-wash: #f7f7f9;
}

/* --- Trigger ------------------------------------------------------------- */

.sitesearch__open {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    margin-right: 14px;
    padding: 7px 15px;
    border: 1.5px solid var(--ss-line);
    border-radius: 999px;
    background: #fff;
    color: var(--ss-ink);
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.sitesearch__open:hover,
.sitesearch__open:focus-visible {
    border-color: var(--ss-red);
    color: var(--ss-red);
}

.sitesearch__open i {
    font-size: 0.9rem;
}

/*
 * The label goes on narrow screens, the icon stays.
 *
 * The theme collapses the nav behind a hamburger at 1279px and the logo eats
 * most of the bar on a phone; a labelled pill there pushes the toggle off the
 * edge.
 */
@media (max-width: 991px) {
    .sitesearch__open-label {
        display: none;
    }

    .sitesearch__open {
        padding: 8px 11px;
        margin-right: 10px;
    }
}

/* --- Dialog -------------------------------------------------------------- */

.sitesearch {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 8vh 16px 16px;
}

.sitesearch[hidden] {
    display: none;
}

body.sitesearch-open {
    overflow: hidden;
}

.sitesearch__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 21, 28, 0.55);
}

.sitesearch__panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 84vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
    overflow: hidden;
    animation: sitesearch-in 0.16s ease-out;
}

@keyframes sitesearch-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.99); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sitesearch__panel { animation: none; }
}

.sitesearch__sronly {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Search bar ---------------------------------------------------------- */

.sitesearch__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--ss-line);
}

.sitesearch__icon {
    color: var(--ss-muted);
    font-size: 1rem;
}

.sitesearch__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    font-size: 1.05rem;
    color: var(--ss-ink);
    background: transparent;
}

.sitesearch__input::placeholder {
    color: #adb5bd;
}

/* The browser's own clear button on type=search duplicates our close button. */
.sitesearch__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.sitesearch__close {
    border: 0;
    background: transparent;
    color: var(--ss-muted);
    font-size: 1.6rem;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.sitesearch__close:hover {
    color: var(--ss-ink);
}

.sitesearch__status {
    margin: 0;
    padding: 9px 16px;
    font-size: 0.78rem;
    color: var(--ss-muted);
    background: var(--ss-wash);
    border-bottom: 1px solid var(--ss-line);
}

/* --- Results ------------------------------------------------------------- */

.sitesearch__results {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
}

.sitesearch__group + .sitesearch__group {
    border-top: 1px solid var(--ss-line);
}

.sitesearch__group-label {
    margin: 0;
    padding: 11px 16px 5px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ss-muted);
}

.sitesearch__hit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 16px;
    text-decoration: none;
    color: inherit;
}

.sitesearch__hit.is-active,
.sitesearch__hit:hover {
    background: var(--ss-wash);
}

.sitesearch__hit.is-active {
    box-shadow: inset 3px 0 0 var(--ss-red);
}

.sitesearch__thumb {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--ss-wash);
}

.sitesearch__thumb--icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ss-muted);
    font-size: 1rem;
}

.sitesearch__hit-text {
    flex: 1;
    min-width: 0;
}

.sitesearch__hit-title {
    display: block;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--ss-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sitesearch__hit-sum {
    display: block;
    font-size: 0.78rem;
    color: var(--ss-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sitesearch__hit-meta {
    flex: 0 0 auto;
    font-size: 0.72rem;
    color: var(--ss-muted);
    white-space: nowrap;
}

.sitesearch__hit mark {
    background: #fff3cd;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* --- Topics -------------------------------------------------------------- */

.sitesearch__topics {
    padding: 4px 16px 12px;
    border-top: 1px solid var(--ss-line);
}

.sitesearch__topic {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 3px 5px 0 0;
    padding: 5px 11px;
    border: 1px solid var(--ss-line);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--ss-ink);
    text-decoration: none;
}

.sitesearch__topic:hover {
    border-color: var(--ss-red);
    color: var(--ss-red);
}

.sitesearch__topic span {
    color: var(--ss-muted);
    font-size: 0.7rem;
}

/* --- Hint ---------------------------------------------------------------- */

.sitesearch__hint {
    margin: 0;
    padding: 8px 16px;
    border-top: 1px solid var(--ss-line);
    background: var(--ss-wash);
    font-size: 0.71rem;
    color: var(--ss-muted);
}

.sitesearch__hint kbd {
    display: inline-block;
    padding: 1px 5px;
    margin: 0 1px;
    border: 1px solid #d5d5dd;
    border-bottom-width: 2px;
    border-radius: 4px;
    background: #fff;
    font-family: inherit;
    font-size: 0.68rem;
    color: var(--ss-ink);
}

/* The hint is keyboard advice; a touch device has no keyboard to give it. */
@media (max-width: 767px) {
    .sitesearch__hint { display: none; }
    .sitesearch { padding-top: 0; }
    .sitesearch__panel { max-height: 100vh; border-radius: 0; }
}