/* Mexperience Search Results — page chrome
 * Search-specific layout only. Shared pieces live elsewhere:
 *   - card grid + cards + pagination -> mex-cards.css
 *   - the search/filter bar          -> mex-searchbar.css
 */

/* ── Layout Override — full width, no sidebar ── */
.search #main-wrap .mex-search#primary,
.search-results #main-wrap .mex-search#primary,
.search-no-results #main-wrap .mex-search#primary {
    width: 100%;
    max-width: 1200px;
    float: none;
    margin: 0 auto;
    padding: 20px 0 40px;
}

/* Desktop (mouse, >=1200): the masthead chrome already contributes ~10px, so
   5px here lands the site-wide ~15px masthead gap (mobile/touch keep 20px). */
@media screen and (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .search #main-wrap .mex-search#primary,
    .search-results #main-wrap .mex-search#primary,
    .search-no-results #main-wrap .mex-search#primary {
        padding-top: 5px;
    }
}

/* Hide any leftover default search sidebar. */
.search #blog-sidebar,
.search-results #blog-sidebar,
.search-no-results #blog-sidebar {
    display: none;
}

.mex-search,
.mex-search * {
    box-sizing: border-box;
}

/* ── Results Header ── */
.mex-search-header {
    margin-bottom: 24px;
}

.mex-search-header h1 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--mex-ink);
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    line-height: 1.3;
}

.mex-search-header .results-meta {
    font-size: 14px;
    color: var(--mex-grey);
    font-family: 'Open Sans', Arial, sans-serif;
}

.mex-search-header .results-meta strong {
    color: var(--mex-red);
}

/* ── No Results ── */
.mex-search-no-results {
    text-align: center;
    padding: 60px 20px;
    background: var(--mex-stone);
    border-radius: 8px;
    border: 1px solid var(--mex-border);
}

.mex-search-no-results h2 {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 22px;
    color: var(--mex-ink);
    margin: 0 0 12px;
}

/* Empty-query invitation: heading in Open Sans semibold, and a shorter panel
   that hugs the text (the shared no-results panel is 60px tall top/bottom). */
.mex-search-no-results.mex-search-invite {
    padding-top: 26px;
    padding-bottom: 26px;
}

.mex-search-no-results.mex-search-invite h2 {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    margin-bottom: 8px;
}

.mex-search-no-results.mex-search-invite p {
    margin-bottom: 0;
}

.mex-search-no-results p {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 15px;
    color: var(--mex-grey);
    margin: 0 0 20px;
}

.mex-search-no-results .searchform {
    max-width: 420px;
    margin: 0 auto;
    display: flex;
    gap: 8px;
}

.mex-search-no-results .searchform .search-field {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid #d1cfcb;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
}

.mex-search-no-results .searchform .submit {
    padding: 10px 18px;
    background: var(--mex-red);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.mex-search-no-results .searchform .submit:hover {
    background: var(--mex-red-light);
}

/* ── Responsive ── */
/* Side gutters come from #main-wrap alone (16px phone / 24px tablet,
   set globally in mexperience.css) — no extra inset here, so search
   results align with the tag/blog card grids. */

@media screen and (max-width: 600px) {
    .mex-search-header h1 {
        font-size: 20px;
    }
}