/*
 * A landing no tema escuro (pedido do dono, 01/10/2026).
 *
 * O visitante escolhe claro, escuro ou automático no botão da barra; o script
 * do <head> (`site/partials/tema-antes-de-pintar`) põe o `data-bs-theme` no
 * <html> antes de pintar, e o Bootstrap escurece sozinho o que é dele. Este
 * arquivo cobre o resto: as cores fixas do `landing.scss` e as variáveis
 * `--landing-*` que as views usam no lugar de `white` e `#eee`.
 *
 * Toda regra de cor começa com [data-bs-theme="dark"]: no claro nenhuma casa,
 * e a landing fica exatamente como era. Mora em `public/assets` para não
 * pedir build do Vite.
 */

/* O botão do tema mostra o estado ATUAL — sol, lua ou meio-círculo — nos dois
   temas, então estas três regras não são do escuro. */
.tema-icone-claro,
.tema-icone-escuro,
.tema-icone-sistema {
    display: none;
}

[data-tema-preferido="claro"] .tema-icone-claro,
[data-tema-preferido="escuro"] .tema-icone-escuro,
[data-tema-preferido="sistema"] .tema-icone-sistema {
    display: inline-block;
}

.botao-tema-landing {
    background: none;
    border: 0;
    line-height: 1;
}

/* Com o botão do tema, os ícones do celular (Bíblia, Hinários, tema e menu)
   passaram de 156 para 208px, e a barra quebrava em duas linhas em 390 e
   414px, onde antes cabia numa. Um pouco menos de respiro entre eles devolve
   a linha única — e 0,5rem é o mínimo: cada ícone fica com 36px de largura,
   o alvo de toque que o projeto adotou (P133). */
@media (max-width: 575.98px) {
    .navbar .d-xl-none > .nav-link,
    .navbar .d-xl-none > .navbar-toggler {
        padding-inline: 0.5rem !important;
    }
}

/* ------------------------------------------------------------------ */
/* A paleta                                                            */
/* ------------------------------------------------------------------ */

[data-bs-theme="dark"] {
    /* `--light` é o fundo das seções alternadas, e `--gray` o texto de apoio. */
    --light: #1a1d20;
    --gray: #adb5bd;

    --landing-fundo: #121416;
    --landing-barra: #16181b;
    --landing-cartao: #24282d;
    --landing-linha: #343a40;
    --landing-destaque: #2b3035;
    --landing-texto: #dee2e6;

    /* O nome e o preço dos planos roxo e vermelho, clareados para o cartão
       escuro (ver a `$paletaDoTexto` do `precos.blade.php`). */
    --plano-roxo-texto: #bb8fce;
    --plano-vermelho-texto: #e57368;
}

[data-bs-theme="dark"] body {
    background-color: var(--landing-fundo);
    color: var(--landing-texto);
}

/* ------------------------------------------------------------------ */
/* Barra                                                               */
/* ------------------------------------------------------------------ */

[data-bs-theme="dark"] .navbar,
[data-bs-theme="dark"] .navbar .container,
[data-bs-theme="dark"] .navbar-collapse {
    background-color: var(--landing-barra);
}

[data-bs-theme="dark"] .navbar {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

[data-bs-theme="dark"] .nav-link {
    color: var(--landing-texto) !important;
}

[data-bs-theme="dark"] .nav-link:hover {
    color: var(--primary) !important;
}

/* ------------------------------------------------------------------ */
/* Seções                                                              */
/* ------------------------------------------------------------------ */

[data-bs-theme="dark"] .hero-section {
    background: linear-gradient(135deg, #16181b 0%, #1f2327 100%);
    color: var(--landing-texto);
}

[data-bs-theme="dark"] .interface-section {
    background-color: var(--landing-fundo);
}

[data-bs-theme="dark"] .feature-card,
[data-bs-theme="dark"] .timeline-card,
[data-bs-theme="dark"] .timeline-marker {
    background: var(--landing-cartao);
}

[data-bs-theme="dark"] .feature-card,
[data-bs-theme="dark"] .timeline-card {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .feature-card:hover,
[data-bs-theme="dark"] .timeline-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
}

/* O rodapé já era escuro (`--dark`), e no escuro ficaria da cor da página. */
[data-bs-theme="dark"] footer {
    background-color: #0c0d0f;
}

/* As tabelas de Suporte e Recursos: o Bootstrap escurece a `.table`, mas o
   fundo da célula vem dele e não do cartão, que é mais claro. */
[data-bs-theme="dark"] #suportes .table,
[data-bs-theme="dark"] #recursos .table {
    --bs-table-bg: transparent;
}