/*
 * Estilos compartilhados do site público, iguais nas páginas Blade (Tailwind via CDN) e nas páginas Vue
 * (Tailwind do Vite).
 *
 * Fica fora das camadas do Tailwind e por isso vence os utilitários dele: as classes de botão não definem
 * display, para que inline-flex, hidden e lg:hidden continuem no elemento. Também não combine estas classes
 * com utilitários de altura, padding, borda, arredondamento, cor ou fonte.
 */

/*
 * Barra de rolagem: toda página reserva à direita o espaço de uma barra padrão, tenha ou não conteúdo para
 * rolar. Sem isso, a largura útil muda entre páginas e o cabeçalho (logo, caixa de busca, links, Entrar) sai
 * do lugar.
 */
html {
    scrollbar-gutter: stable;
}

/* Abaixo de 1024 px quem rola na /busca é o .busca-page, que reserva o próprio espaço (BuscaFiltros.vue) */
@media (max-width: 1023px) {
    html:has(.busca-page) {
        scrollbar-gutter: auto;
    }
}

/*
 * Formato padrão dos botões: arredondamento, altura e tamanho da fonte do Entrar. Só o formato; cada botão
 * mantém as próprias cores (Para você, categorias da home, Cadastre-se).
 */
.site-btn,
.site-btn-shape {
    box-sizing: border-box;
    height: 2.5rem;
    border-radius: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

/* Botão Entrar (cabeçalhos e menu) e botões com a mesma aparência, como o Entrar em contato do perfil */
.site-btn {
    align-items: center;
    justify-content: center;
    padding: 0 calc(1.5rem + 1mm);
    border: 0;
    box-shadow: none;
    background-color: #ffeae0;
    color: #ff5501;
    font-family: Inter, sans-serif;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease;
}

.site-btn:hover {
    background-color: #ffe0d2;
}

/*
 * Botões compactos: arredondamento e fonte do Entrar, com a altura do Seguir (33 px no celular e no tablet em pé,
 * 36 px a partir de 1024 px, um pouco abaixo dos 40 px do Entrar). Usado no Seguir e nos filtros da busca.
 */
.site-btn-compact {
    box-sizing: border-box;
    height: 2.0625rem;
    border-radius: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .site-btn-compact {
        height: 2.25rem;
    }
}

/* Botões redondos de ícone (voltar e opções do perfil): círculo com a mesma altura dos botões compactos */
.site-btn-round {
    box-sizing: border-box;
    width: 2.0625rem;
    height: 2.0625rem;
    border-radius: 9999px;
}

@media (min-width: 1024px) {
    .site-btn-round {
        width: 2.25rem;
        height: 2.25rem;
    }
}