/* Search results - the theme had no search template, so it had no styles either. */

.stobi-search-form {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
    max-width: 560px;
}
.stobi-search-form input[type="search"] {
    flex: 1 1 auto;
    padding: 10px 14px;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    font-size: 16px;
    min-width: 0;
}
.stobi-search-form input[type="search"]:focus {
    outline: none;
    border-color: #e45635;
}
.stobi-search-form button {
    flex: 0 0 auto;
    padding: 10px 22px;
    border: 0;
    border-radius: 2px;
    background: #e45635;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
}
.stobi-search-form button:hover { background: #c9482a; }

.search-count {
    margin-bottom: 22px;
    color: #666;
    font-size: 15px;
}

.search-results {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}
.search-result {
    display: flex;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid #ececec;
}
.search-result:first-child { border-top: 1px solid #ececec; }

.search-result .sr-thumb {
    flex: 0 0 96px;
    display: block;
}
.search-result .sr-thumb img {
    width: 96px;
    height: 96px;
    object-fit: cover;
    display: block;
}
.search-result .sr-body { flex: 1 1 auto; min-width: 0; }

.search-result .sr-type {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    background: #f4f4f4;
    color: #e45635;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.search-result h2 {
    margin: 0 0 6px;
    font-size: 20px;
    line-height: 1.3;
}
.search-result h2 a { color: #222; text-decoration: none; }
.search-result h2 a:hover { color: #e45635; }
.search-result .sr-date {
    display: block;
    margin-bottom: 6px;
    color: #999;
    font-size: 13px;
}
.search-result p { margin: 0; color: #555; font-size: 15px; }

.pagination .nav-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.pagination .page-numbers {
    padding: 6px 12px;
    border: 1px solid #e0e0e0;
    color: #444;
    text-decoration: none;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: #e45635;
    border-color: #e45635;
    color: #fff;
}

@media (max-width: 575px) {
    .search-result { gap: 12px; }
    .search-result .sr-thumb, .search-result .sr-thumb img { flex-basis: 72px; width: 72px; height: 72px; }
    .search-result h2 { font-size: 17px; }
}

/* --- Magnifier in the header ------------------------------------------- */

.header-search { position: relative; display: inline-flex; align-items: center; margin-left: 18px; }

.header-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #23252f;
    cursor: pointer;
    transition: color .18s ease, background .18s ease;
}
.header-search-toggle:hover,
.header-search.open .header-search-toggle { color: #e45635; background: rgba(228, 86, 53, .08); }

.header-search-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 999;
    display: flex;
    gap: 8px;
    width: 320px;
    max-width: 90vw;
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #e6ded0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .14);
}
/* display, not opacity: the panel sits inside the collapsing navbar, and a
   still-laid-out but invisible box there was swallowing clicks. */
.header-search .header-search-panel { display: none; }
.header-search.open .header-search-panel { display: flex; }

.header-search-panel input[type="search"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 12px;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    font-size: 15px;
}
.header-search-panel input[type="search"]:focus { outline: none; border-color: #e45635; }
.header-search-panel button {
    flex: 0 0 auto;
    padding: 8px 16px;
    border: 0;
    border-radius: 2px;
    background: #e45635;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}
.header-search-panel button:hover { background: #c9482a; }

/* The header shrinks on scroll - keep the icon in step with the logo. */
.header-scroll .header-search-toggle { width: 30px; height: 30px; }

/* Inside the collapsed mobile menu there is nothing to drop out of, so the
   field sits in the flow instead of floating over the page. */
@media screen and (max-width: 992px) {
    .header-search { display: block; margin: 0 0 20px; width: 100%; }
    .header-search-toggle { display: none; }
    .header-search .header-search-panel {
        display: flex;
        position: static;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}