/* ============================================================
   search-popup.css — results panel inside the existing header search popup.

   The template ships .search-popup with a centred form and nothing else. This file only styles the
   results area underneath it. It does not touch .search-popup, .color-layer, .close-search or the
   form, so the existing open/close behaviour and the app.js overlay a11y wiring are untouched.

   The popup sits over a dark colour layer, so the panel is a SOLID white sheet and every card is
   solid too - no translucency, so the text is readable whatever is behind the overlay.

   Written with logical properties (margin-inline, padding-inline, inset-inline, text-align:start)
   so the whole panel mirrors in Arabic without a separate RTL block.
   ============================================================ */

.search-results {
    --search-ink: #111d42;
    --search-ink-soft: #4a5568;
    --search-accent: #0c5a7d;
    --search-surface: #ffffff;
    --search-card: #f7f9fc;
    --search-line: #e3e9f2;

    position: relative;
    z-index: 2;
    width: min(720px, calc(100vw - 32px));
    margin-inline: auto;
    margin-top: 24px;
    text-align: start;
}

/* The white sheet. Only drawn once there is something to show, so an untouched popup looks exactly
   as it did before this feature existed.

   The message guard is a POSITIVE list of the states that actually have something to display
   (loading / results / empty / error / hint), not ":not([data-state=idle])". The negative form
   used to match an element with NO data-state attribute at all just as eagerly as one genuinely
   mid-search - #SiteSearchMessage carries no attribute at all until the first call to
   setSearchMessage() in ClsSearchInformation.js, so the sheet (background/shadow/padding) was
   drawn the instant the popup opened, before any input or search, with nothing inside it. The
   markup now also sets data-state="idle" explicitly from the start (belt and suspenders), but the
   selector below no longer depends on that alone. */
    .search-results:has(.search-results_list:not(:empty)),
    .search-results:has(.search-results_message:is([data-state="loading"], [data-state="results"], [data-state="empty"], [data-state="error"], [data-state="hint"])) {
        background: var(--search-surface);
        border-radius: 16px;
        box-shadow: 0 24px 60px rgba(3, 12, 35, .35);
        padding: 14px;
        margin-top: 6%;
    }

/* Fallback for browsers without :has() - the sheet is drawn whenever the JS marks the panel active.
   The JS sets no such class, so this is purely a progressive-enhancement guard; the rule above is
   what runs in every browser this site supports. */
.search-results.is-active {
    background: var(--search-surface);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(3, 12, 35, .35);
    padding: 14px;
}

/* ---- status line: loading / empty / error / hint ---------------------------------------------- */

.search-results_message {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--search-ink-soft);
    padding: 12px 6px;
    margin: 0;
}

    .search-results_message[data-state="idle"],
    .search-results_message[data-state="results"],
    .search-results_message:empty {
        display: none;
    }

    /* Dot marker, replaced by a spinner while loading. */
    .search-results_message::before {
        content: "";
        flex: 0 0 auto;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: currentColor;
        opacity: .55;
    }

    .search-results_message[data-state="loading"] {
        color: var(--search-accent);
    }

        .search-results_message[data-state="loading"]::before {
            background: none;
            border: 2px solid currentColor;
            border-top-color: transparent;
            opacity: 1;
            animation: search-spin .7s linear infinite;
        }

    .search-results_message[data-state="error"] {
        color: #b42318;
    }

    .search-results_message[data-state="empty"],
    .search-results_message[data-state="hint"] {
        color: var(--search-ink-soft);
    }

@keyframes search-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .search-results_message[data-state="loading"]::before {
        animation: none;
    }
}

/* ---- result cards ----------------------------------------------------------------------------- */

.search-results_list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: min(52vh, 440px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

    .search-results_list:not(:empty) {
        padding-inline-end: 4px;
    }

.search-results_item + .search-results_item {
    margin-top: 8px;
}

.search-results_link {
    display: block;
    position: relative;
    background: var(--search-card);
    border: 1px solid var(--search-line);
    border-radius: 12px;
    padding: 14px 16px;
    padding-inline-end: 44px;
    text-decoration: none;
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

    .search-results_link:hover,
    .search-results_link:focus-visible {
        background: #fff;
        border-color: var(--search-accent);
        transform: translateY(-1px);
        text-decoration: none;
    }

    .search-results_link:focus-visible {
        outline: 2px solid var(--search-accent);
        outline-offset: 2px;
    }

.search-results_badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--search-accent);
    background: rgba(12, 90, 125, .10);
    border-radius: 999px;
    padding: 3px 10px;
    margin-bottom: 8px;
}

.search-results_title {
    display: block;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--search-ink);
    margin-bottom: 4px;
    /* Long single-word titles and URLs must not push the card wider than the panel. */
    overflow-wrap: anywhere;
}

.search-results_brief {
    display: block;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--search-ink-soft);
    overflow-wrap: anywhere;
    /* Keep a card to three lines so ten results stay scannable. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Admin-supplied text that may be Arabic or English whichever way the page flows. */
    unicode-bidi: plaintext;
}

/* Chevron. inset-inline-end puts it on the trailing edge in both directions, and the rotation flips
   it in the RTL rule below.

   The two borders are deliberately PHYSICAL (top + right), not logical: the arrow is drawn as the
   corner of a square, so which two edges are drawn has to stay fixed while only the rotation
   changes. With border-inline-end the corner itself moved in Arabic as well, and the arrow came out
   pointing down instead of towards the start of the line. */
.search-results_go {
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    border-top: 2px solid var(--search-accent);
    border-right: 2px solid var(--search-accent);
    transform: rotate(45deg);
    opacity: .55;
    transition: opacity .18s ease;
}

.search-results_link:hover .search-results_go {
    opacity: 1;
}

[dir="rtl"] .search-results_go {
    transform: rotate(-135deg);
}

.search-highlight {
    background: #fff3c4;
    box-shadow: 0 0 0 1px #ffe27a inset;
    border-radius: 3px;
    padding: 0 2px;
    color: inherit;
}

/* ---- load more -------------------------------------------------------------------------------- */

.search-results_more {
    display: block;
    margin-inline: auto;
    margin-top: 12px;
}

    .search-results_more[hidden] {
        display: none;
    }

/* ---- responsive ------------------------------------------------------------------------------- */

@media (max-width: 767px) {
    /* The wider gutter is deliberate. At narrow widths the template's own .search-popup is wider
       than the viewport and sits slightly off its left edge - its own form is clipped by ~19px
       there, which predates this feature. Sizing against 100vw and leaving 24px each side keeps the
       results panel fully on screen despite that inherited offset, without touching .search-popup
       and changing the popup's layout for everything else. */
    .search-results {
        width: calc(100vw - 48px);
        margin-top: 16px;
    }

    .search-results_list {
        max-height: 58vh;
    }
}

@media (max-width: 575px) {
    .search-results:has(.search-results_list:not(:empty)),
    .search-results:has(.search-results_message:not([data-state="idle"])),
    .search-results.is-active {
        border-radius: 12px;
        padding: 90px 0 0 0;
    }

    .search-results_link {
        padding: 12px 13px;
        padding-inline-end: 34px;
    }

    .search-results_title {
        font-size: 15.5px;
    }

    .search-results_brief {
        font-size: 13.5px;
        -webkit-line-clamp: 2;
    }

    .search-results_go {
        inset-inline-end: 12px;
    }

    .search-results_message {
        font-size: 14px;
        padding: 10px 4px;
    }
}