/* ==========================================================================
   PESQUISA GLOBAL DO SITE
   Painel sobreposto aberto pela lupa da navbar, e a pagina /pesquisa.html.
   Ambos partilham as classes .pb-res-* dos resultados: e o mesmo JS que
   desenha os dois sitios (ver js/pesquisa.js).

   Nota sobre as cores: o laranja da marca (#FF7900) sobre branco tem um
   contraste de 2,63:1, abaixo dos 4,5:1 exigidos pelas WCAG AA para texto
   normal. Aqui usa-se #B35400 (5,02:1) no TEXTO, e o #FF7900 fica reservado
   para elementos decorativos (barras, icones grandes, fundos), onde o
   requisito nao se aplica. O mesmo para os cinzentos: #888/#999 nao passavam.
   ========================================================================== */

:root {
    --pb-laranja: #FF7900;        /* decorativo */
    --pb-laranja-texto: #B35400;  /* texto: 5.02:1 sobre branco */
    --pb-cinza-texto: #6E6E6E;    /* 5.10:1 sobre branco */
    --pb-escuro: #343a40;
}

/* --- 1. Botao da lupa ---------------------------------------------------- */

/* Fica FORA da <ul class="navbar-nav">, como ultimo filho do contentor da
   navbar. Entre 992px e ~1155px o menu transborda e e cortado sem barra de
   deslocamento; dentro do <ul>, a lupa era a primeira coisa a desaparecer e
   nao havia forma de chegar a pesquisa nessas larguras. O flex-shrink:0
   garante que ela nunca encolhe nem sai do ecra. */
.pb-lupa {
    flex: 0 0 auto;
    margin-left: auto;
    /* Folga da margem direita do contentor. A da esquerda vai no
       .navbar-collapse: aqui um margin-left fixo anularia o auto acima. */
    margin-right: .25rem;
    background: none;
    border: 0;
    /* Branco explicito, nao "inherit": a navbar e rgb(26,26,26) mas nao declara
       cor de texto, por isso o inherit chegava aqui como o cinzento-escuro por
       omissao do Bootstrap (rgb(33,37,41)) - 1,03:1 sobre o fundo, ou seja,
       invisivel. Branco da 17,4:1. */
    color: #fff;
    font-size: 1.25rem;
    line-height: 1;
    /* 44x44: o alvo minimo confortavel das WCAG (2.5.8 pede 24, recomenda 44) */
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.pb-lupa:hover {
    background-color: rgba(255, 121, 0, .15);
    color: var(--pb-laranja);
}

/* Sem isto, a lupa continuava a ser empurrada para fora do ecra entre 992px e
   ~1200px. O menu (.navbar-collapse) tem min-width:auto por omissao, o que num
   contentor flex significa "nunca encolher abaixo do meu conteudo": sendo mais
   largo do que o espaco disponivel, empurrava tudo o que vinha a seguir.
   Com min-width:0 passa a poder encolher e a lupa cabe sempre.

   NAO acrescentar overflow:hidden aqui: os mega-menus sao filhos absolutos
   deste elemento e ficariam cortados.

   Nota: o menu em si continua a transbordar nessa faixa de larguras (o ultimo
   item fica cortado). E anterior a pesquisa - ja acontecia com o botao
   "Marcacoes" - e resolve-se noutro sitio, passando a navbar para
   navbar-expand-xl. Aqui so se garante que a pesquisa esta sempre acessivel. */
.navbar-container > .navbar-collapse {
    min-width: 0;
    /* Espacamento entre o ultimo item do menu e a lupa. Vai no vizinho, e nao
       num margin-left da lupa, porque esse tem de ficar auto (e o que a empurra
       para a direita quando sobra espaco na barra). */
    margin-right: .5rem;
}

/* Mesma convencao de foco do resto do site (ver custom.css, :focus-visible). */
.pb-lupa:focus-visible,
.pb-pesquisa-fechar:focus-visible,
.pb-pesquisa-input:focus-visible,
.pb-res-item:focus-visible {
    outline: 2px solid var(--pb-laranja);
    outline-offset: 2px;
}

/* No telemovel a lupa da navbar desaparece: a pesquisa passa a viver DENTRO do
   menu, como primeiro item (.pb-lupa-menu). Assim o cabecalho pequeno fica so
   com o logotipo e o botao do menu, sem tres coisas a disputar a mesma barra.

   A excepcao sao as paginas de menu simplificado (jante.php, kit-suplente.php,
   guia-roda-suplente.php), que NAO tem offcanvas: nessas nao ha menu onde por
   a entrada, por isso a lupa da navbar fica visivel sempre. */
@media (max-width: 991.98px) {
    .pb-lupa {
        display: none;
    }
    .pb-lupa.pb-lupa-sempre,
    .pb-lupa.pb-lupa-menu {
        display: inline-flex;
    }
    .pb-lupa.pb-lupa-sempre {
        margin-left: auto;
        margin-right: 4px;
    }
    .navbar-container > .navbar-toggler {
        order: 1;
    }
}

/* --- 1b. Entrada da pesquisa dentro do menu movel ------------------------ */

/* Ocupa a largura toda e leva texto, nao so o icone: no telemovel e o unico
   ponto de entrada da pesquisa, e um icone sozinho no meio de um menu de
   texto passaria despercebido. */
.pb-lupa-menu {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    height: auto;
    margin: 0 0 4px;
    padding: 14px 16px;
    border-radius: 10px;
    /* O menu movel e BRANCO e os seus itens sao quase pretos (rgb(26,26,26)).
       A primeira versao desta entrada tinha texto branco - assumi um menu
       escuro sem verificar, e o resultado era ilegivel. Segue-se agora a
       convencao do proprio menu. */
    background: rgba(255, 121, 0, .12);
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
}

.pb-lupa-menu:hover,
.pb-lupa-menu:focus-visible {
    background: rgba(255, 121, 0, .22);
    color: #1a1a1a;
}

/* Um tom abaixo do --pb-laranja-texto: sobre o fundo alaranjado desta entrada
   (e sobretudo no estado hover, mais carregado) o #B35400 caia para 4,05:1.
   O #9C4A00 fica em 5,50 e 5,00 nos dois estados. */
.pb-lupa-menu .bi {
    color: #9C4A00;
    font-size: 1.15rem;
}

/* No ecra grande o menu movel nao existe; esta entrada nunca deve aparecer. */
@media (min-width: 992px) {
    .pb-lupa-menu {
        display: none;
    }
}

/* --- 2. Painel sobreposto ------------------------------------------------ */

.pb-pesquisa {
    position: fixed;
    inset: 0;
    z-index: 1080;             /* acima da navbar fixed-top (1030) */
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 12vh 16px 16px;
    background: rgba(0, 0, 0, .55);
    /* NAO acrescentar backdrop-filter aqui. Foi tentado e, com a navbar
       fixed-top e o painel por cima dela, houve navegadores a compor a
       pagina INTEIRA em branco. O escurecimento com rgba chega. */
    opacity: 0;
    visibility: hidden;
    /* Sem isto, o painel invisivel continua a apanhar os cliques da pagina
       durante os 180ms da transicao para hidden — a "visibility" so muda no
       fim. Um clique logo a seguir a fechar nao fazia nada. */
    pointer-events: none;
    /* A visibilidade NAO se interpola: comuta de uma vez, e o atraso e que
       decide quando.
         - a fechar: 0.18s de atraso, para o painel so desaparecer depois de a
           opacidade ter acabado de esmorecer
         - a abrir  (regra .aberto): sem atraso, comuta imediatamente
       Antes estava "visibility .18s ease" nos dois sentidos, e o Chrome
       mantinha o painel `hidden` durante toda a transicao de abertura. O
       efeito pratico era grave: `input.focus()` falhava porque nao se pode
       focar um elemento invisivel, e no telemovel o teclado nunca abria. */
    transition: opacity .18s ease, visibility 0s linear .18s;
}

.pb-pesquisa.aberto {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .18s ease, visibility 0s linear 0s;
}

.pb-pesquisa-caixa {
    width: 100%;
    max-width: 680px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
    overflow: hidden;
    transform: translateY(-12px);
    transition: transform .18s ease;
    display: flex;
    flex-direction: column;
    max-height: 76vh;
}

.pb-pesquisa.aberto .pb-pesquisa-caixa { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    .pb-pesquisa,
    .pb-pesquisa-caixa {
        transition: none;
    }
    .pb-pesquisa-caixa { transform: none; }
}

.pb-pesquisa-topo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #eee;
    flex: 0 0 auto;
}

.pb-pesquisa-topo > .bi-search { color: var(--pb-laranja); font-size: 1.2rem; }

.pb-pesquisa-input {
    flex: 1 1 auto;
    border: 0;
    outline: 0;
    font-size: 1.05rem;
    color: var(--pb-escuro);
    background: transparent;
    min-width: 0;
}

.pb-pesquisa-fechar {
    background: none;
    border: 0;
    color: var(--pb-cinza-texto);
    font-size: 1rem;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
}

.pb-pesquisa-fechar:hover { background: #f2f2f2; color: var(--pb-escuro); }

/* --- 3. Zona de resultados ----------------------------------------------- */

.pb-res {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0 12px;
}

/* Na pagina /pesquisa.html os resultados nao vivem dentro do painel, por
   isso nao precisam de scroll proprio nem de altura limitada. */
.pb-res-pagina .pb-res {
    overflow: visible;
    max-height: none;
    padding: 0;
}

.pb-res-titulo {
    font-size: .75rem;
    text-transform: uppercase;
    font-weight: 800;
    color: var(--pb-cinza-texto);
    letter-spacing: .04em;
    padding: 12px 16px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.pb-res-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;
    border-left: 3px solid transparent;
}

.pb-res-item:hover,
.pb-res-item.activo {
    background: #fff8f2;
    border-left-color: var(--pb-laranja);
}

.pb-res-item .bi {
    color: var(--pb-laranja-texto);
    font-size: 1.15rem;
    flex: 0 0 auto;
    margin-top: 2px;
}

.pb-res-corpo { min-width: 0; }

.pb-res-item h4 {
    font-size: .95rem;
    font-weight: 700;
    color: var(--pb-escuro);
    margin: 0 0 2px;
    line-height: 1.3;
}

.pb-res-item p {
    font-size: .85rem;
    color: var(--pb-cinza-texto);
    margin: 0;
    line-height: 1.4;
    /* Duas linhas chegam para dar contexto sem transformar cada resultado
       num paragrafo. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pb-res-item mark {
    background: #ffe9d6;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
    font-weight: 700;
}

/* Respostas directas: destacadas por serem, quase sempre, o que a pessoa
   queria mesmo (uma medida de pneu, a morada, as baterias). */
.pb-res-directo {
    background: #fffaf5;
    border-left-color: var(--pb-laranja);
}

.pb-res-preco {
    font-weight: 800;
    color: var(--pb-laranja-texto);
    white-space: nowrap;
    margin-left: auto;
    padding-left: 12px;
    align-self: center;
}

/* --- 3b. Sugestões ------------------------------------------------------- */

/* Aparecem no topo, antes de tudo: quando existem, é porque a pesquisa como
   foi escrita não deu nada de jeito, e a saída do beco vale mais do que
   qualquer resultado por baixo. */
.pb-sug-linha {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 12px 16px;
    font-size: .92rem;
    color: var(--pb-cinza-texto);
    background: #fff8f2;
    border-bottom: 1px solid #f3e3d5;
}

.pb-sug {
    background: #fff;
    border: 1px solid var(--pb-laranja);
    color: var(--pb-laranja-texto);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.5;
}

.pb-sug:hover {
    background: var(--pb-laranja);
    color: #fff;
}

.pb-sug:focus-visible {
    outline: 2px solid var(--pb-laranja);
    outline-offset: 2px;
}

/* A correcção ortográfica é uma só e é a resposta à pergunta "quis dizer?";
   destaca-se das medidas, que são uma lista de opções equivalentes. */
.pb-sug-forte {
    font-size: .95rem;
}

/* --- 3c. Atalhos (painel ainda sem termo escrito) ------------------------ */

.pb-atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 16px 14px;
}

.pb-atalho {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    border: 1px solid #eee;
    border-radius: 999px;
    background: #fff;
    color: var(--pb-escuro);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
}

.pb-atalho:hover,
.pb-atalho:focus-visible {
    border-color: var(--pb-laranja);
    background: #fff8f2;
    color: var(--pb-escuro);
}

.pb-atalho:focus-visible {
    outline: 2px solid var(--pb-laranja);
    outline-offset: 2px;
}

.pb-atalho .bi {
    color: var(--pb-laranja-texto);
    font-size: 1rem;
}

/* --- 4. Estados ---------------------------------------------------------- */

.pb-res-vazio {
    padding: 28px 16px;
    text-align: center;
    color: var(--pb-cinza-texto);
    font-size: .92rem;
}

.pb-res-vazio .bi {
    display: block;
    font-size: 2rem;
    color: #ccc;
    margin-bottom: 8px;
}

.pb-res-ajuda {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
    font-size: .88rem;
}

.pb-res-ajuda a {
    color: var(--pb-laranja-texto);
    font-weight: 700;
    white-space: nowrap;
}

/* Enquanto a resposta nao chega, os resultados anteriores esmorecem em vez de
   ficarem la como se fossem os certos. Combina com o aria-busy no elemento. */
.pb-res[aria-busy="true"] {
    opacity: .45;
    transition: opacity .12s ease;
}

.pb-res-carregar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 16px;
    color: var(--pb-cinza-texto);
    font-size: .9rem;
}

.pb-res-roda {
    width: 16px;
    height: 16px;
    border: 2px solid #e6e6e6;
    border-top-color: var(--pb-laranja);
    border-radius: 50%;
    animation: pb-rodar .7s linear infinite;
    flex: 0 0 auto;
}

@keyframes pb-rodar { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .pb-res-roda { animation-duration: 2s; }
}

.pb-res-rodape {
    border-top: 1px solid #f0f0f0;
    padding: 10px 16px;
    font-size: .8rem;
    color: var(--pb-cinza-texto);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.pb-res-rodape a { color: var(--pb-laranja-texto); }

.pb-res-rodape kbd {
    background: #f2f2f2;
    border-radius: 4px;
    padding: 1px 5px;
    font-size: .75rem;
    color: #4a4a4a;
}

@media (max-width: 575.98px) {
    .pb-pesquisa { padding: 0; }
    .pb-pesquisa-caixa {
        max-width: none;
        border-radius: 0;
        max-height: 100vh;
        height: 100%;
    }
    .pb-res { flex: 1 1 auto; }
    .pb-res-rodape { display: none; }
}