/* ----------------------------------------------------------- SearchWP Live Ajax Search — header typeahead dropdown. The plugin injects a `.searchwp-live-search-results` element into our `data-swpparentel` containers and positions it with document-relative inline `top/left` + position:absolute (it assumes a mount). That math is wrong inside a positioned parent, so we neutralise its inline positioning (position:static) and let our own containers place the panel: - inline (desktop): an absolutely-positioned dropdown under the input - overlay (mobile): a normal block below the search form panel ----------------------------------------------------------- */ /* Neutralise the plugin's inline positioning in both contexts. */ .pst-live-results .searchwp-live-search-results { position: static !important; inset: auto !important; width: auto !important; max-width: none !important; z-index: auto; } /* The visible panel (shared look). */ .pst-live-results .searchwp-live-search-results { background: var(--wp--preset--color--white); color: var(--wp--preset--color--dark); border-radius: var(--wp--custom--radius--base); box-shadow: var(--wp--custom--shadow--lg); overflow: hidden auto; max-height: min(70vh, 30rem); overscroll-behavior: contain; } /* Focus rings inside the (light) panel — the header's default ring is white. */ .pst-live-results :focus-visible { outline: 2px solid var(--wp--preset--color--logo); outline-offset: -2px; border-radius: var(--wp--custom--radius--sm); } /* ----------------------------------------------------------- Inline (desktop) dropdown ----------------------------------------------------------- */ .site-header__search { position: relative; } .pst-live-results--inline { position: absolute; top: calc(100% + 0.5rem); inset-inline-end: 0; width: min(420px, 92vw); z-index: 101; } /* ----------------------------------------------------------- Overlay (mobile) panel — sits below the search form panel ----------------------------------------------------------- */ .pst-live-results--overlay { margin-block-start: var(--wp--preset--spacing--20); } .pst-live-results--overlay .searchwp-live-search-results { max-height: calc(100dvh - var(--site-header-height) - 9rem); } /* ----------------------------------------------------------- Result rows ----------------------------------------------------------- */ .pst-live-results__list { display: flex; flex-direction: column; padding-block: 0.25rem; } /* Type group */ .pst-live-group + .pst-live-group { border-block-start: 1px solid var(--wp--preset--color--neutral-50); } .pst-live-group__head { margin: 0; padding: 0.6rem 1rem 0.3rem; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--xs, 0.7rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--neutral-600); } /* Compact result row — fixed leading thumb keeps every title aligned. */ .pst-live-result { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 1rem; color: var(--wp--preset--color--dark); text-decoration: none; } .pst-live-result:hover, .pst-live-result.searchwp-live-search-result--focused, .pst-live-result[aria-selected="true"] { background: var(--wp--preset--color--neutral-50); } .pst-live-result__thumb { flex-shrink: 0; width: 34px; height: 34px; border-radius: var(--wp--custom--radius--sm); overflow: hidden; background: var(--wp--preset--color--neutral-50); display: inline-flex; align-items: center; justify-content: center; color: var(--wp--preset--color--neutral-600); } .pst-live-result__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .pst-live-result__title { flex: 1; min-width: 0; font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--sm); font-weight: 600; line-height: 1.3; color: var(--wp--preset--color--dark); /* Single line — keep the dropdown scannable. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pst-live-result__arrow { flex-shrink: 0; color: var(--wp--preset--color--neutral-600); opacity: 0; transition: opacity 0.15s ease; } .pst-live-result:hover .pst-live-result__arrow, .pst-live-result.searchwp-live-search-result--focused .pst-live-result__arrow, .pst-live-result[aria-selected="true"] .pst-live-result__arrow { opacity: 1; color: var(--wp--preset--color--logo); } /* "See all results" footer link. */ .pst-live-results__all { display: block; padding: 0.75rem 1rem; text-align: center; font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--sm); font-weight: 600; color: var(--wp--preset--color--logo); text-decoration: none; border-block-start: 1px solid var(--wp--preset--color--neutral-50); background: var(--wp--preset--color--white); position: sticky; inset-block-end: 0; } .pst-live-results__all:hover { background: var(--wp--preset--color--neutral-50); } /* Empty / no-results / minimum-characters states. */ .pst-live-results .searchwp-live-search-no-results, .pst-live-results .pst-live-results__empty { margin: 0; padding: 1rem; text-align: center; font-size: var(--wp--preset--font-size--sm); color: var(--wp--preset--color--neutral-600); } /* Only the relevant variant is interactive per breakpoint (the inline input is hidden < 1024px, the overlay is hidden >= 1024px). Belt-and-suspenders so a stale panel can never linger in the wrong context. */ @media (max-width: 1023.98px) { .pst-live-results--inline { display: none; } } @media (min-width: 1024px) { .pst-live-results--overlay { display: none; } } @media (prefers-reduced-motion: reduce) { .pst-live-result__arrow { transition: none; } }