/**
 * Custom Site Search v2
 *
 * Most of the panel is already styled by the utility bar snippet, whose CSS
 * this markup deliberately matches class for class. That stylesheet is scoped
 * to #pogo-utility-bar, and the panel is moved inside the bar on init so those
 * rules apply.
 *
 * This file only covers what the snippet does not know about: the two result
 * types it never had, promotional blocks, and the arrival highlight for deep
 * links. Everything here is scoped the same way, so nothing leaks into the FAQ
 * page's separate search.
 *
 * If a rule here fights the snippet, the snippet is the one to change: keeping
 * the panel's appearance in one file is worth more than winning a specificity
 * argument.
 */

/* =====================================================================
   Result types

   The snippet only ever produced one kind of result. Ours are page, faq
   and heading, distinguished by a modifier on the li:

     .pogo-search-result--page
     .pogo-search-result--faq
     .pogo-search-result--heading

   A heading result is styled like a page result on purpose. The
   distinction is internal, and a visitor has no use for it: a heading
   is labelled by the page it lives on, exactly like a page result.
   ===================================================================== */

#pogo-utility-bar .pogo-search-result--faq {
}

#pogo-utility-bar .pogo-search-result--heading {
}

/* =====================================================================
   Special Results

   Administrator-authored HTML, rendered above the result list when the
   query matches a trigger term. The markup inside is arbitrary, so give
   the wrapper its own visual treatment rather than styling its
   contents.

   The container is always present and empty until something matches,
   so anything with visible padding or a border needs the :empty guard
   below or the panel will carry a blank gap.
   ===================================================================== */

#pogo-utility-bar .pogo-search-special {
    margin: 0 24px 14px;
}

#pogo-utility-bar .pogo-search-special:empty {
    margin: 0;
}

#pogo-utility-bar .pogo-search-special__item {
}

@media (max-width: 782px) {
    #pogo-utility-bar .pogo-search-special {
        margin-right: 16px;
        margin-left: 16px;
    }
}

/* =====================================================================
   Deep link arrival

   When a visitor clicks an FAQ or heading result, the element they land
   on carries this class for three seconds. The duration is
   CONFIG.deepLink.highlightMs in search-v2.js; keep any animation
   within it.

   This is the one rule that cannot be scoped to the utility bar: the
   target is a heading or FAQ in the page content, nowhere near the
   search. It also has to survive the theme's own styling.
   ===================================================================== */

.pogo-search-target {
    border-radius: 6px;
    outline: 3px solid rgba(101, 232, 37, 0.9);
    outline-offset: 5px;
    animation: pogo-search-target-arrival 3s ease-out;
}

@keyframes pogo-search-target-arrival {
    0%, 30% {
        background-color: rgba(101, 232, 37, 0.22);
        box-shadow: 0 0 0 10px rgba(101, 232, 37, 0.16);
    }

    100% {
        background-color: transparent;
        box-shadow: 0 0 0 0 rgba(101, 232, 37, 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .pogo-search-target {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================================================
   Embedded widget

   The [pogo_search] shortcode, for the dedicated search page. Same
   input, results and behaviour as the panel; no overlay, no heading,
   no close button.

   Its markup uses the same class names as the panel, but none of the
   panel's styling reaches it: that stylesheet lives in the utility bar
   snippet and every rule there is scoped to #pogo-utility-bar, on
   purpose, so the FAQ page's own search stays untouched.

   So these rules restate the shared pieces, scoped here instead. That
   duplication is real and worth naming: a change to the panel's input
   or result styling has to be made twice, in two files.

   The clean fix, when there is time, is to move the panel CSS out of
   the snippet and into this file, scoped to both wrappers at once:

       .pogo-search-panel .pogo-search-input,
       .pogo-search-embedded .pogo-search-input { ... }

   That is a bigger change than it looks, because the snippet also
   carries the design tokens below, so it was not worth doing on the
   same pass as building the widget.
   ===================================================================== */

.pogo-search-embedded {
    --pogo-blue: #1737df;
    --pogo-green: #65e825;
    --pogo-text: #272934;
    --pogo-muted: #666b79;
    --pogo-border: #e3e5ec;

    color: var(--pogo-text);
}

.pogo-search-embedded *,
.pogo-search-embedded *::before,
.pogo-search-embedded *::after {
    box-sizing: border-box;
}

.pogo-search-embedded [hidden] {
    display: none !important;
}

.pogo-search-embedded .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Form */

.pogo-search-embedded .pogo-search-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
}

.pogo-search-embedded .pogo-search-input-wrap {
    position: relative;
    min-width: 0;
    padding-left: 57px;
    background: linear-gradient(90deg, #1737df, transparent);
    border-radius: 50px;
}

.pogo-search-embedded .pogo-search-input-wrap::before {
    content: "";
    height: 45px;
    aspect-ratio: 1;
    position: absolute;
    left: 9px;
    top: 5px;
    bottom: 0;
    background-image: url(../images/Frame.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.pogo-search-embedded .pogo-search-input {
    min-width: 0;
    height: 54px;
    color: var(--pogo-text);
    appearance: none;
    width: 100%;
    border: 1px solid #d6d6d6;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 18px;
    font-family: 'Outfit', sans-serif;
    line-height: 1.2;
    outline: none;
}

.pogo-search-embedded .pogo-search-input:focus {
    border-color: var(--pogo-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 55, 223, 0.12);
}

.pogo-search-embedded .pogo-search-input::-webkit-search-cancel-button {
    display: none;
}

.pogo-search-embedded .pogo-search-clear {
    position: absolute;
    top: 50%;
    right: 9px;
    display: grid;
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #e02b2b;
    background: transparent;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    transform: translateY(-50%);
}

.pogo-search-embedded .pogo-search-clear:hover {
    color: var(--pogo-blue);
    background: #f1f4ff;
}

.pogo-search-embedded .pogo-search-submit {
    height: 50px;
    margin: 0;
    padding: 0 25px;
    border: 0;
    border-radius: 999px;
    color: var(--pogo-blue);
    background: var(--pogo-green);
    cursor: pointer;
    font-size: 14px;
    font-weight: 800;
    white-space: nowrap;
    display: none;
}

.pogo-search-embedded .pogo-search-submit:hover {
    color: #fff;
    background: var(--pogo-blue);
}

/* Status */

.pogo-search-embedded .pogo-search-status {
    min-height: 46px;
    margin: 0 0 14px;
    padding: 13px 15px;
    border-left: 4px solid var(--pogo-green);
    border-radius: 7px;
    color: var(--pogo-muted);
    background: #f5f7ff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.45;
}

/* Special Results */

.pogo-search-embedded .pogo-search-special {
    margin: 0 0 14px;
}

.pogo-search-embedded .pogo-search-special:empty {
    margin: 0;
}

/* Results

   No max-height here. The panel scrolls because it is an overlay with a
   fixed ceiling; a dedicated search page has the whole page to use, and
   trapping the list in its own scroll area would be worse. */

.pogo-search-embedded .pogo-search-list {
    margin: 0;
    padding: 0;
    border: 1px solid #d8ddea;
    border-radius: 10px;
    overflow: hidden;
    list-style: none;
}

.pogo-search-embedded .pogo-search-result {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #d8ddea;
}

.pogo-search-embedded .pogo-search-result:last-child {
    border-bottom: 0;
}

.pogo-search-embedded .pogo-search-result-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 13px 16px 12px;
    color: #171820;
    background: #fff;
    font-size: 16px;
    font-weight: 550;
    line-height: 1.35;
    text-align: left;
    text-decoration: none;
}

.pogo-search-embedded .pogo-search-result-link:hover,
.pogo-search-embedded .pogo-search-result-link:focus {
    color: #171820;
    background: #f4f7ff;
    text-decoration: none;
}

.pogo-search-embedded .pogo-search-result-link:focus-visible {
    outline: 3px solid var(--pogo-green);
    outline-offset: -3px;
}

.pogo-search-embedded .pogo-search-result-title {
    display: block;
}

.pogo-search-embedded .pogo-search-result-context {
    display: block;
    margin-top: 3px;
    color: var(--pogo-muted);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
}

.pogo-search-embedded .pogo-search-result mark {
    color: #2f72ff;
    background: transparent;
    font: inherit;
    font-weight: 800;
}

@media (max-width: 480px) {
    .pogo-search-embedded .pogo-search-form {
        grid-template-columns: minmax(0, 1fr);
    }

    .pogo-search-embedded .pogo-search-submit {
        width: 100%;
    }

    .pogo-search-embedded .pogo-search-result-link {
        font-size: 15px;
    }
}