/*
 * Restyles Simply Static Pro's Fuse search widget (.ssp-search, generated
 * by simply-static-pro/src/search/class-ssp-search-shortcode.php and
 * injected in place of .ssp-search-target — see resources/views/partials/
 * header.blade.php) to look like the theme's original #searchform.
 *
 * Most of the look (absolute position, width, slide-in-on-.active
 * transform/opacity, input font/color/padding) comes for free from the
 * existing generic `.header__search form` / `.header__search form input`
 * rules in resources/assets/styles/default/partials/header.pcss — those
 * select on bare tag names scoped under .header__search, not on
 * #searchform specifically, so they already apply to the Fuse widget's
 * markup too. This file only re-asserts what the plugin's own bundled
 * ssp-search.css (loaded first, see app/setup.php) fights at higher
 * specificity (form width, flex vertical-centering breaking the
 * height:100% cascade), and adds fresh styling for the autocomplete
 * dropdown, which has no equivalent in the original design.
 *
 * Deliberately a plain enqueued stylesheet, not part of the webpack
 * dist/ bundle: this is a small, targeted override, not a theme feature
 * that belongs in the compiled/versioned asset pipeline.
 */

/* The native WP search form stays in the DOM (theme's own JS reads
   this.searchForm via #searchform/.searchform and must never get null),
   but is visually replaced by the Fuse widget below. */
#searchform.searchform {
    display: none;
}

/* Plugin's ssp-search.css sets `.ssp-search .search-form{width:auto}`
   (specificity 0,2,0), beating the theme's `.header__search form{width:
   350px}` (0,1,1). Re-assert the theme's intended widths at higher
   specificity, same breakpoints as header.pcss's --desktop-viewport /
   --phone-viewport / --small-viewport custom media. */
.header__search .ssp-search .search-form {
    width: 350px;
}
@media (max-width: 1024px) {
    .header__search .ssp-search .search-form {
        width: 300px;
    }
}
@media (max-width: 520px) {
    .header__search .ssp-search .search-form {
        width: 200px;
    }
}
@media (max-width: 350px) {
    .header__search .ssp-search .search-form {
        width: 165px;
    }
}

/* Plugin's `.form-row{align-items:center}` stops the input from
   stretching to the form's full height (the theme's design relies on
   the input filling 100% height of the 30-50px header search slot). */
.header__search .ssp-search .form-row,
.header__search .ssp-search .search-input-container {
    height: 100%;
    align-items: stretch;
}

/* Matches the original input[type="submit"]{display:none} — Simply
   Static's search_show_submit option is off, so there's normally no
   button here at all, but keep this in case it's ever turned on. */
.header__search .ssp-search .search-submit {
    display: none;
}

/* Autocomplete dropdown: position/show-hide toggle already handled by
   the plugin's own CSS; this just reskins it to match the theme rather
   than its default `var(--wp--preset--color--base)` (a block-theme
   preset color this classic theme never defines, so it renders
   transparent) and adds list styling matching .header__sub's look. */
.header__search .ssp-search .search-input-container .search-auto-complete {
    background: var(--color-white);
    border: none;
    box-shadow: 0 5px 8px -1px rgba(0, 0, 0, 0.16);
    padding: 10px 0;
}
.header__search .search-auto-complete ul {
    padding: 0 20px;
    margin: 0;
}
.header__search .search-auto-complete li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 0.9rem;
}
.header__search .search-auto-complete li:last-child {
    border-bottom: none;
}
/* Same global li::before decorative bar as the full results page (see
   the .ssp-results li.auto-complete-item::before rule further down for
   the full story) — pre-existing here too, not new: this dropdown had
   no rule suppressing it before today, it just went unnoticed until the
   full-page results made the same bar obvious enough to trace back. */
.header__search .search-auto-complete li.auto-complete-item::before {
    display: none;
}
.header__search .search-auto-complete a {
    color: var(--color-black);
}
.header__search .search-auto-complete a:hover {
    color: var(--color-lightblue);
}

/* Simply Static's separate "searched for" results block isn't used by
   this header instant-search widget, only the autocomplete dropdown. */
.header__search .ssp-search .result {
    display: none;
}

/* ------------------------------------------------------------------ *
 * Full results page (/__qs/, body.search per search.blade.php). Turns
 * out there is no separate full-page widget instance: on submit/on-load
 * sspInjectIntoSearchPage() checks for an existing .ssp-search first and,
 * finding the header's own instance already in the DOM, reuses it rather
 * than injecting a second one into <main> — confirmed by inspecting the
 * live DOM tree here (.header__search > .ssp-search > .result), not
 * assumed from reading the JS alone. Two consequences:
 *
 *  1. The header's own `.header__search .ssp-search .result{display:
 *     none}` two rules up ALSO hides results on this page — it has to,
 *     since that same rule is what keeps the header dropdown from
 *     showing a second, redundant "full results" block on every other
 *     page. Re-enabled specifically for body.search below.
 *  2. `.header__search` itself is `position:absolute; top:0; width:80px`
 *     (it's sized/positioned to be a header icon slot) — no theme CSS
 *     ever needed it to hold a full results list before. Widened/moved
 *     in place below rather than un-anchored: an earlier attempt set it
 *     to position:static so .result could escape upward to a full-width
 *     positioning context, but that pulls .header__search INTO the
 *     header's flex row as a sized item, and it was wide enough to wrap
 *     the nav links onto a second line (confirmed by comparing
 *     screenshots before/after — regression, not present on any other
 *     page). Staying position:absolute keeps it out of that flex flow
 *     exactly like before; only its own box (top/left/right/width) grows
 *     to span full-width-below-the-header, so .result inside it can stay
 *     plain position:static and just fill it.
 * ------------------------------------------------------------------ */
body.search .header__search {
    /* Explicit position:absolute, not left implicit: header.pcss has a
       second .header__search rule under a mobile breakpoint that sets
       position:relative (compact 40x40 icon sizing) — found live, where
       this whole fix fell apart on a 390px viewport, .header__search's
       left/right stayed 0 as set but did nothing, since left/right on a
       position:relative box are offsets from its own normal position,
       not container edges. This selector already outguns that plain
       .header__search rule on specificity for any property listed here,
       so restating position: absolute is enough to win regardless of
       viewport width. */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    /* height, not just width: the same mobile rule that forces
       position:relative (see the note above) also sets a literal
       height:30px (the compact icon button's own height) — max-height
       below only caps a height that would otherwise be *larger*, it
       doesn't stretch one already pinned smaller by an explicit value,
       so without this override the whole results list rendered (and, on
       first inspection, scrolled) inside a 30px-tall window. Confirmed
       via clientHeight, not assumed from reading the rule. */
    height: auto;
    /* .header__search's containing block is HEADER.header (position:
       fixed — a transparent overlay bar, unrelated to this fix), which
       makes THIS box fixed-to-viewport too, same as any position:absolute
       descendant of a position:fixed ancestor. Harmless for the compact
       80px icon slot this rule normally sizes, but the full results list
       inside routinely runs taller than one screen (863px measured
       against an 844px mobile viewport) with nowhere to go — the page's
       own scroll never reaches it, since it never actually moves. Give
       this box its own scroll region instead of assuming it can rely on
       page scroll. 60px is the mobile header's own height plus a little
       slack; the desktop header runs taller, so this only slightly
       undersizes the visible area there — the trade favors never clipping
       results unreachably over pixel-perfect sizing on every breakpoint. */
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
body.search .header__search .ssp-search .result {
    display: block;
    background: var(--color-white);
}
/* The open/close toggle icon: makes sense floating over the header when
   .header__search is the normal 80px collapsed slot, meaningless once
   that box has been widened to hold a full results page above — without
   this it just flows to wherever the results list happens to end and
   sits there as a stray teal square (confirmed live, not assumed). */
body.search .header__search__btn,
body.search .header__search__close {
    display: none;
}

.search .ssp-results {
    max-width: 900px;
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.search .ssp-results h5 {
    font-size: 1.1rem;
    font-weight: normal;
    color: var(--color-black);
    margin: 0 0 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--color-lightblue);
}
.search .ssp-results h5 b {
    color: var(--color-darkblue);
}

.search .ssp-results ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Each result: the <a> is the actual card (full-bleed click target),
   the <li class="auto-complete-item"> inside it is left as plugin-JS
   plumbing, not styled directly, to avoid fighting its dropdown-only
   rules if this same class ever needs distinguishing later. */
.search .ssp-results ul > a {
    display: block;
    text-decoration: none;
    color: inherit;
    background: var(--color-white);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 3px solid var(--color-lightblue);
    border-radius: 2px;
    padding: 16px 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-left-color 0.25s ease;
}
.search .ssp-results ul > a:hover,
.search .ssp-results ul > a:focus-visible {
    transform: translateX(4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-left-color: var(--color-darkblue);
}

.search .ssp-results li.auto-complete-item {
    /* Undo the plugin's own list-item spacing so the <a> above fully
       controls the card's padding/box. */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* The stroke cutting through the first couple letters of every title
   (found by inspecting the page, not a screenshot artifact as first
   guessed): global.pcss styles every <li> with a decorative ::before —
   a small colored bar (top:15px;height:3px;width:20px) standing in for
   a bullet point elsewhere on the site. Nothing here left room for it
   (no padding-left), so it lands straight on top of the text. The card's
   own left accent border already serves as this item's marker. */
.search .ssp-results li.auto-complete-item::before {
    display: none;
}

/* Title: first line of text in the <li>, before the <br> the plugin
   inserts ahead of the excerpt <small>. */
.search .ssp-results li.auto-complete-item {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-black);
}
.search .ssp-results ul > a:hover li.auto-complete-item {
    color: var(--color-darkblue);
}

.search .ssp-results li.auto-complete-item small {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    font-weight: normal;
    color: var(--color-gray);
    line-height: 1.5;
}

/* Search term highlight — see resources/assets/js/ssp-search-highlight.js,
   which wraps matches in these <mark> tags (the plugin doesn't highlight
   anything itself). Tinted with the theme's own lightblue rather than the
   ua-default yellow <mark> background, in both the full results page and
   the header's autocomplete dropdown (same markup, same script). */
.ssp-search-highlight {
    background: rgba(105, 214, 215, 0.4);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* "We couldn't find any matching results." — the plugin's fallback
   <li>, no <a> wrapper in that case. */
.search .ssp-results ul > li {
    padding: 16px 20px;
    background: var(--color-white);
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 2px;
    color: var(--color-gray);
    font-style: italic;
}