/* ---------------------------------------------------------------
   Sidebar search input
--------------------------------------------------------------- */

.wiki-search {
    flex-shrink: 0;
    padding: calc(0.6 * var(--behnke-basic)) var(--behnke-basic) 0;
}

/* Header search — mobile only */

.wiki-search--header {
    display: none;
    padding: 0;
    flex: 1;
    min-width: 0;
    margin: 0 8px;
}

.wiki-search--header .wiki-search-input {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.82rem;
}

.wiki-search--header .wiki-search-input:focus {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 700px) {
    .wiki-search--header {
        display: flex;
        align-items: center;
    }

    /* Hide sidebar search on mobile — sidebar is not accessible. The home
       hero search stays visible: it lives in the main content, not the
       sidebar, and is the primary entry point on the landing page. */
    .wiki-search:not(.wiki-search--header):not(.wiki-search--hero) {
        display: none;
    }
}

.wiki-search-input {
    width: 100%;
    box-sizing: border-box;
    padding: calc(0.4 * var(--behnke-basic)) calc(0.6 * var(--behnke-basic));
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: calc(0.4 * var(--behnke-basic));
    color: #fff;
    font-size: var(--behnke-normal-font-size, 0.875rem);
    outline: none;
    transition: background 0.15s, border-color 0.15s;
    -webkit-appearance: none;
    appearance: none;
}

.wiki-search-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.wiki-search-input:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

.wiki-search-input::-webkit-search-cancel-button {
    filter: invert(1) opacity(0.6);
    cursor: pointer;
}

/* ---------------------------------------------------------------
   Hero search — rendered on the home page via %SEARCH_HERO%.
   Sits in the main content area (light background) so the
   palette flips compared to the sidebar input.
--------------------------------------------------------------- */

.wiki-search--hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: calc(0.4 * var(--behnke-basic));
    /* Fixed 80 % width on the home page — consistent regardless of
       viewport, so the input doesn't jump between small (max-width
       cap) and large (full container) sizes when the window grows. */
    width: 80%;
    max-width: none;
    /* Bottom margin kept tight so the downloads strip sits right below
       the search — visually pairing them as the "find / get" block. */
    margin: calc(1.5 * var(--behnke-basic)) auto calc(0.4 * var(--behnke-basic));
    padding: 0;
    text-align: center;
}

.wiki-search-hero__slogan {
    font-size: clamp(1.3rem, 2.2vw, 1.8rem);
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
}

.wiki-search-hero__sub {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.35;
    margin-bottom: calc(0.6 * var(--behnke-basic));
}

/* Light-theme override of the input — sidebar/header inputs are
   white-on-dark; on the home page we need the inverse. */
.wiki-search-hero__input {
    padding: calc(0.9 * var(--behnke-basic)) calc(1.2 * var(--behnke-basic));
    font-size: 1.05rem;
    background: #fff;
    border: 1px solid #ccc;
    color: #1a1a1a;
    border-radius: calc(0.6 * var(--behnke-basic));
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.wiki-search-hero__input::placeholder {
    color: #888;
}

.wiki-search-hero__input:focus {
    background: #fff;
    border-color: var(--behnke-design, #0066cc);
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.18);
}

/* Popular-pages chips — appear below the hero input on focus.
   Subtle by design: small label, low-contrast chips, no border around
   the container so the suggestions feel like part of the input rather
   than a separate widget. */
.wiki-search-hero__popular {
    margin-top: calc(0.6 * var(--behnke-basic));
    text-align: center;
}

.wiki-search-hero__popular-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: calc(0.35 * var(--behnke-basic));
}

.wiki-search-hero__popular-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(0.3 * var(--behnke-basic)) calc(0.4 * var(--behnke-basic));
}

.wiki-search-hero__popular-list a {
    display: inline-block;
    padding: calc(0.25 * var(--behnke-basic)) calc(0.8 * var(--behnke-basic));
    background: rgba(0, 102, 204, 0.06);
    color: var(--behnke-design, #0066cc);
    border-radius: 999px;
    text-decoration: none;
    font-size: 0.82rem;
    line-height: 1.4;
    transition: background 0.12s;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wiki-search-hero__popular-list a:hover {
    background: rgba(0, 102, 204, 0.14);
}

/* ---------------------------------------------------------------
   First-visit attention pulse — added by Search.js once per browser
   (localStorage-guarded) so new users notice the search box. The
   amber glow is content-agnostic and works on both the dark sidebar
   and the dark mobile header. Total runtime ~2.7s, then quiet.
--------------------------------------------------------------- */

@keyframes wiki-search-pulse {
    /* Quick bright pop, then a long slow fade — reads as "look here!"
       once, instead of three repeating beats. Colour pulled from the
       Behnke design palette so it harmonises with the rest of the UI
       (links, primary buttons, focus rings). */
    0%   { box-shadow: 0 0 0   0   rgba(0, 102, 204, 0);    }
    15%  { box-shadow: 0 0 22px 6px rgba(0, 102, 204, 0.80); }
    100% { box-shadow: 0 0 0   0   rgba(0, 102, 204, 0);    }
}

.wiki-search--promote .wiki-search-input {
    /* 0.4 s delay lets the page settle. 1.6 s total so the fade
       feels deliberate and the user has time to track where the
       glow is happening. */
    animation: wiki-search-pulse 1.6s ease-out 0.4s 1;
}

@media (prefers-reduced-motion: reduce) {
    .wiki-search--promote .wiki-search-input {
        animation: none;
    }
}

/* ---------------------------------------------------------------
   Search results page (rendered inside .wiki-main)
--------------------------------------------------------------- */

.sr-page {
    padding: calc(2 * var(--behnke-basic)) calc(1.5 * var(--behnke-basic)) calc(1.5 * var(--behnke-basic));
    width: 100%;
    box-sizing: border-box;
}

.sr-heading {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 calc(1.25 * var(--behnke-basic));
    padding-bottom: calc(0.6 * var(--behnke-basic));
    border-bottom: 2px solid #e8e8e8;
    line-height: 1.3;
}

.sr-heading em {
    font-style: normal;
    color: var(--behnke-design, #0066cc);
}

.sr-count {
    font-size: 0.8rem;
    color: #aaa;
    margin: calc(-0.75 * var(--behnke-basic)) 0 calc(0.75 * var(--behnke-basic));
}

/* Result grid */

.sr-grid {
    display: flex;
    flex-direction: column;
    gap: calc(0.5 * var(--behnke-basic));
}

/* Result card */

.sr-card {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(0.75 * var(--behnke-basic));
    padding: calc(0.6 * var(--behnke-basic)) calc(0.9 * var(--behnke-basic));
    border: 1px solid #e8e8e8;
    border-radius: calc(0.5 * var(--behnke-basic));
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    cursor: pointer;
}

.sr-card:hover {
    border-color: var(--behnke-design, #0066cc);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.sr-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: calc(0.15 * var(--behnke-basic));
}

.sr-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-card-path {
    font-size: 0.72rem;
    color: #bbb;
    font-family: monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Icon on manual cards. Reuses the .wiki-icon background-image trick
   so the icon URL travels via a CSS variable; sizing is fixed so the
   card layout stays stable across different icon images. */
.sr-card-icon {
    width: calc(2.4 * var(--behnke-basic));
    height: calc(2.4 * var(--behnke-basic));
    flex-shrink: 0;
    margin-right: 0;
}

/* Manual-page preview snippet — softer than the monospace path so it
   reads as prose rather than a URL. Two-line clamp so the card stays
   the same height regardless of snippet length. */
.sr-card-preview {
    font-size: 0.78rem;
    color: #555;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Empty state */

.sr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(0.5 * var(--behnke-basic));
    padding: calc(3 * var(--behnke-basic)) var(--behnke-basic);
    color: #999;
    text-align: center;
}

.sr-empty-icon {
    font-size: 2.5rem;
    line-height: 1;
}

.sr-empty-text {
    font-size: 1rem;
    font-weight: 500;
    color: #555;
}

.sr-empty-hint {
    font-size: 0.85rem;
}

/* Popular-pages fallback shown under the empty state, so a dead-end
   search still offers somewhere to go. Reuses .sr-grid / .sr-card. */

.sr-empty-popular {
    margin-top: calc(1.25 * var(--behnke-basic));
}

.sr-empty-popular-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    text-align: center;
    margin-bottom: calc(0.6 * var(--behnke-basic));
}

/* ---------------------------------------------------------------
   Troubleshooter hint (German wiki only)
   Shown on the popular-pages view and on a zero-result search.
--------------------------------------------------------------- */

.sr-troubleshoot-hint {
    display: flex;
    align-items: center;
    gap: calc(0.6 * var(--behnke-basic));
    margin: calc(0.75 * var(--behnke-basic)) auto calc(1.25 * var(--behnke-basic));
    max-width: 560px;
    padding: calc(0.7 * var(--behnke-basic)) calc(1 * var(--behnke-basic));
    border: 1px solid color-mix(in srgb, var(--behnke-design, #0066cc) 30%, #e2e6ea);
    border-radius: calc(0.5 * var(--behnke-basic));
    background: color-mix(in srgb, var(--behnke-design, #0066cc) 6%, #fff);
    color: #333;
    text-decoration: none;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

.sr-troubleshoot-hint:hover,
.sr-troubleshoot-hint:focus-visible {
    border-color: var(--behnke-design, #0066cc);
    background: color-mix(in srgb, var(--behnke-design, #0066cc) 12%, #fff);
    transform: translateY(-1px);
}

.sr-troubleshoot-hint__icon {
    font-size: 1.4rem;
    line-height: 1;
    flex: 0 0 auto;
}

.sr-troubleshoot-hint__text {
    flex: 1 1 auto;
}

.sr-troubleshoot-hint__text strong {
    color: var(--behnke-design, #0066cc);
    font-weight: 600;
}

.sr-troubleshoot-hint__arrow {
    flex: 0 0 auto;
    color: var(--behnke-design, #0066cc);
    font-size: 1.1rem;
    transition: transform 0.15s ease;
}

.sr-troubleshoot-hint:hover .sr-troubleshoot-hint__arrow,
.sr-troubleshoot-hint:focus-visible .sr-troubleshoot-hint__arrow {
    transform: translateX(3px);
}

/* Error state */

.sr-error {
    padding: var(--behnke-basic);
    color: #c0392b;
    font-size: 0.875rem;
}

/* ---------------------------------------------------------------
   GitLab extended search results section
--------------------------------------------------------------- */

.sr-gitlab {
    margin-top: calc(0.75 * var(--behnke-basic));
    margin-bottom: calc(1.25 * var(--behnke-basic));
}

.sr-gitlab .search-container {
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    overflow: hidden;
}

.sr-gitlab .search-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #f8f9fa;
    border-bottom: 1px solid #e2e6ea;
    font-weight: 600;
    font-size: .82rem;
    color: #495057;
}

.sr-gitlab .search-header::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23E24329' d='M16 31.4l4.2-13H11.8z'/%3E%3Cpath fill='%23FC6D26' d='M16 31.4L11.8 18.4H3.1z'/%3E%3Cpath fill='%23FCA326' d='M3.1 18.4l-2.5-7.8a.9.9 0 0 1 .3-1l15.1 11z'/%3E%3Cpath fill='%23E24329' d='M3.1 18.4h8.7L8.2 8.3z'/%3E%3Cpath fill='%23FC6D26' d='M16 31.4l4.2-13h8.7z'/%3E%3Cpath fill='%23FCA326' d='M28.9 18.4l2.5-7.8a.9.9 0 0 0-.3-1L16 20.6z'/%3E%3Cpath fill='%23E24329' d='M28.9 18.4h-8.7l3.6-10.1z'/%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
}

.sr-gitlab .search-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sr-gitlab .search-entry {
    border-bottom: 1px solid #f1f3f5;
}

.sr-gitlab .search-entry:last-child {
    border-bottom: none;
}

.sr-gitlab .search-link {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: #212529;
    transition: background .1s;
    cursor: pointer;
}

.sr-gitlab .search-link:hover {
    background: #f8f9fa;
}

.sr-gitlab .search-title {
    font-size: .88rem;
    font-weight: 500;
    color: #212529;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-gitlab .search-subtext {
    font-size: .75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.sr-gitlab .gitlab-milestone {
    color: #1a6bb5;
    font-weight: 500;
}

.sr-gitlab .gitlab-labelcontainer-feature    { color: #1a6bb5; font-weight: 600; }
.sr-gitlab .gitlab-labelcontainer-improvement { color: #1a7a5c; font-weight: 600; }
.sr-gitlab .gitlab-labelcontainer-bug        { color: #c0392b; font-weight: 600; }

/* Milestone filter tags */

.sr-ms-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 14px;
    border-bottom: 1px solid #e2e6ea;
    background: #f8f9fa;
}

.sr-ms-tag {
    padding: 3px 11px;
    border-radius: 20px;
    border: 1px solid #dee2e6;
    background: #fff;
    font-size: .76rem;
    color: #495057;
    cursor: pointer;
    transition: background .1s, border-color .1s, color .1s;
    font-family: inherit;
    line-height: 1.5;
}

.sr-ms-tag:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.sr-ms-tag--active {
    background: var(--behnke-design, #0066cc);
    border-color: var(--behnke-design, #0066cc);
    color: #fff;
}

.sr-ms-tag--active:hover {
    opacity: .88;
}

/* Load-more */

.sr-page-hidden {
    display: none !important;
}

.sr-load-more {
    display: block;
    width: 100%;
    padding: 9px 14px;
    border: none;
    border-top: 1px solid #e2e6ea;
    background: #f8f9fa;
    color: var(--behnke-design, #0066cc);
    font-size: .82rem;
    font-weight: 500;
    font-family: inherit;
    text-align: center;
    cursor: pointer;
    transition: background .1s;
}

.sr-load-more:hover {
    background: #eef0f2;
}

/* When used outside .sr-gitlab (wiki grid) */
.sr-grid + .sr-load-more {
    border: 1px solid #e8e8e8;
    border-top: none;
    border-radius: 0 0 calc(0.5 * var(--behnke-basic)) calc(0.5 * var(--behnke-basic));
    background: #fafafa;
}

/* ---------------------------------------------------------------
   Skeleton loading cards
--------------------------------------------------------------- */

@keyframes sr-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}

.sr-card--skeleton {
    border: 1px solid #eeeeee;
    border-radius: calc(0.5 * var(--behnke-basic));
    padding: calc(0.6 * var(--behnke-basic)) calc(0.9 * var(--behnke-basic));
    display: flex;
    flex-direction: column;
    gap: calc(0.35 * var(--behnke-basic));
    background: #fff;
    pointer-events: none;
}

.sr-skel {
    background: linear-gradient(90deg, #f0f0f0 25%, #e4e4e4 50%, #f0f0f0 75%);
    background-size: 800px 100%;
    animation: sr-shimmer 1.4s infinite linear;
    border-radius: 4px;
}

.sr-skel--title {
    height: 14px;
    width: 80%;
}

.sr-skel--url {
    height: 10px;
    width: 55%;
}

/* ---------------------------------------------------------------
   Matched-term highlighting in result titles & snippets
--------------------------------------------------------------- */

mark.sr-hl {
    background: rgba(255, 206, 0, 0.38);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}

/* ---------------------------------------------------------------
   "Did you mean …?" suggestion (shown on a zero-result query)
--------------------------------------------------------------- */

.sr-didyoumean-wrap {
    font-size: 0.92rem;
    color: #555;
    margin: calc(-0.5 * var(--behnke-basic)) 0 var(--behnke-basic);
}

.sr-didyoumean {
    color: var(--behnke-design, #0066cc);
    font-weight: 600;
    text-decoration: none;
}

.sr-didyoumean:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------
   Title autocomplete dropdown (under the search input)
--------------------------------------------------------------- */

.wiki-search {
    position: relative;
}

.wiki-search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    margin: 2px var(--behnke-basic) 0;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: calc(0.4 * var(--behnke-basic));
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    z-index: 1200;
    overflow: hidden;
    max-height: 60vh;
    overflow-y: auto;
}

/* Header search (mobile) input spans the full container — no side inset. */
.wiki-search--header .wiki-search-suggest {
    margin-left: 0;
    margin-right: 0;
}

.wiki-search-suggest__item {
    display: block;
    padding: 8px 12px;
    font-size: 0.85rem;
    color: #1a1a1a;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid #f1f1f1;
}

.wiki-search-suggest__item:last-child {
    border-bottom: none;
}

.wiki-search-suggest__item:hover,
.wiki-search-suggest__item.is-active {
    background: rgba(0, 102, 204, 0.10);
    color: var(--behnke-design, #0066cc);
}