/* ===== Navbar search ===== */
.nav-search { display: flex; align-items: center; gap: 6px; }

.nav-search__toggle {
    background: none; border: 0; padding: 0; cursor: pointer;
    display: inline-flex; align-items: center; line-height: 0;
}

/* campo começa fechado e "cresce" na horizontal */
.nav-search__field {
    position: relative; display: flex; align-items: center;
    width: 0; opacity: 0; overflow: hidden;
    transition: width .28s ease, opacity .2s ease;
}
.nav-search.open .nav-search__field { width: 220px; opacity: 1; }

.nav-search__input {
    width: 100%; box-sizing: border-box; height: 42px;
    padding: 0 28px 0 10px; border-radius: 999px;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    color: var(--color-text-primary, inherit);
    font: inherit; font-size: 18px; outline: none;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 999px;

    box-shadow: inset 0 0px 10px rgba(0, 0, 0, 0.1);
}

.nav-search__input::placeholder {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.5s ease;
}

.nav-search__input:focus {
    border-color: rgba(255, 255, 255, 0.4);
}

html.light .nav-search__input:focus {
    border-color: rgba(0, 0, 0, 0.2);
}

html.light .nav-search__input {
    background: rgba(255, 255, 255, 0.25);
    /* color: #222; */
    border-color: rgba(255, 255, 255, 0.2);
    color: black;
}

html.light .nav-search__input::placeholder {
    color: rgba(0, 0, 0, 0.8);
}



/* .nav-search__input:focus { border-color: rgba(255,255,255,.5); } */
.nav-search__clear {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    display: none; background: none; border: 0; cursor: pointer;
    font-size: 16px; padding: 2px 4px;
    color: rgba(255, 255, 255, 0.7);
}

.nav-search__clear:hover {
    color: white;
}

html.light .nav-search__clear {
    filter: invert(1);
}

html.dark .nav-search__clear {
    filter: invert(0);
}

/* resultados: fora da navbar (evita backdrop-filter quebrar position:fixed) */
.nav-search__results { position: fixed; z-index: 1100; }
.nav-search__results:empty { display: none; }

/* lista com título + subtítulo pequeno */
.search-results-item__sub {
    display: block; font-size: 12px; opacity: .65; margin-top: 1px;
    text-transform: lowercase;
}
.search-results-item--page, .search-results-item--item, .search-results-item--creature,
.search-results-item--character { cursor: pointer; }
.search-results-item.is-active { background: rgba(255,255,255,.12); border-radius: 8px; }
.search-results-item__img { image-rendering: pixelated; }

/* mobile: se não couber, esconde os outros ícones e o campo ocupa a navbar */
@media (max-width: 560px) {
    .navbar.search-open .navbar-inner > a { display: none; }
    .nav-search.open .nav-search__field { width: min(62vw, 260px); }
}


.nav-search__input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}