/* ── Wyszukiwarka (Pagefind): przycisk w nagłówku + okno ── */
.search-toggle {
    background: none; border: none; color: var(--fg); cursor: pointer;
    width: 20px; height: 20px; padding: 0; position: relative;
    display: flex; align-items: center; justify-content: center;
    animation: text-in 0.8s ease-out 0.15s both;
    transition: color 0.3s ease;
}
.search-toggle:hover, .search-toggle:focus-visible { color: var(--accent); }
.search-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.search-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: flex-start; justify-content: center;
    padding: clamp(64px, 12vh, 140px) 16px 24px;
    font-family: var(--font, 'Jost', 'Futura', sans-serif);
    background: color-mix(in srgb, var(--bg) 0%, transparent);
    -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0);
    opacity: 0; visibility: hidden;
    transition: opacity 0.55s ease-in-out, background-color 0.55s ease-in-out,
                -webkit-backdrop-filter 0.55s ease-in-out, backdrop-filter 0.55s ease-in-out, visibility 0s linear 0.55s;
}
.search-overlay.open {
    opacity: 1; visibility: visible;
    background: color-mix(in srgb, var(--bg) 72%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    transition: opacity 0.8s ease-in-out, background-color 0.8s ease-in-out,
                -webkit-backdrop-filter 0.8s ease-in-out, backdrop-filter 0.8s ease-in-out, visibility 0s;
}
/* okno: jak text-in na stronie (lekkie wyjście z dołu + przenikanie), przy zamykaniu krócej i odwrotnie */
.search-overlay .search-box {
    opacity: 0; transform: translateY(12px);
    transition: opacity 0.45s ease-in-out, transform 0.55s ease-in-out;
}
.search-overlay.open .search-box {
    opacity: 1; transform: translateY(0);
    transition: opacity 0.8s ease-in-out 0.08s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}
html.search-open { overflow: hidden; }

.search-box {
    width: min(680px, 100%); max-height: 100%;
    display: flex; flex-direction: column;
    background: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 16px;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    overflow: hidden;
}
.search-field { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--panel-border); }
.search-field svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--fg-subtle); stroke-width: 2; stroke-linecap: round; }
.search-input {
    flex: 1; min-width: 0; background: none; border: none; outline: none;
    font-family: inherit; font-size: 1.15rem; font-weight: 300; color: var(--fg);
}
.search-input::placeholder { color: var(--fg-subtle); }
.search-input::-webkit-search-cancel-button { display: none; }
.search-close {
    flex: none; background: none; cursor: pointer; color: var(--fg-subtle);
    font-family: inherit; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 4px 8px; border: 1px solid var(--panel-border); border-radius: 999px;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.search-close:hover { color: var(--accent); border-color: var(--accent); }

.search-results { list-style: none; margin: 0; padding: 8px; overflow-y: auto; overscroll-behavior: contain; }
.search-results:empty { display: none; }
.search-results a {
    display: block; text-decoration: none; color: var(--fg);
    padding: 12px 14px; border: 1px solid transparent; border-radius: 12px;
    transition: border-color 0.3s ease;
}
.search-results a:hover, .search-results a.active { border-color: var(--accent); }
.search-results li.in { animation: search-in 0.6s ease-in-out both; }
@keyframes search-in { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
.search-kicker { display: block; font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }
.search-title { display: block; font-size: 1rem; font-weight: 400; line-height: 1.35; }
.search-excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-top: 4px; font-size: 0.86rem; font-weight: 300; line-height: 1.5; color: var(--fg-muted); }
.search-excerpt mark { background: none; color: var(--accent); font-weight: 400; }

.search-status { margin: 0; padding: 14px 20px 16px; font-size: 0.82rem; font-weight: 300; color: var(--fg-subtle); }
.search-status:empty { display: none; }
.search-status a { color: var(--accent); text-decoration: none; }
.search-hint { font-size: 0.68rem; letter-spacing: 0.08em; color: var(--fg-subtle); }
.search-hint kbd { font-family: inherit; padding: 1px 5px; border: 1px solid var(--panel-border); border-radius: 4px; }

@media (max-width: 640px) {
    .search-overlay { padding: 12px 10px; }
    .search-box { max-height: calc(100dvh - 24px); }
    .search-hint { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .search-overlay, .search-overlay.open, .search-overlay .search-box, .search-overlay.open .search-box { transition: none; transform: none; }
    .search-results li.in { animation: none; }
    .search-toggle { animation: none; }
}