@import "app.css";
@import "font.css";

@import "libs/fontawesome/css/all.min.css";
/* ===== Tokens de cor / tema ===== */
:root {
    --brand: #536da4;
    --brand-2: #5b8fd8;
    --accent: #a7cef1;
    --cream: #f4f8fb;
    --text: #2e3d4f;
    /* Integração Bootstrap */
    --bs-body-color: var(--text);
    --bs-primary: var(--brand-2);
    --bs-primary-rgb: 91, 143, 216;
    --bs-link-color: var(--brand-2);
    --bs-link-hover-color: var(--brand);
    /* O Bootstrap não usa --bs-link-color diretamente: a regra base do "a" é
       color:rgba(var(--bs-link-color-rgb), var(--bs-link-opacity,1)). Sem essas
       duas linhas, qualquer link "solto" (sem classe própria, ex.: link no meio
       de um parágrafo de artigo) caía no azul padrão do Bootstrap (#0d6efd),
       não na cor da marca. */
    --bs-link-color-rgb: 91, 143, 216;
    --bs-link-hover-color-rgb: 83, 109, 164;
}

/* Rodapé sempre colado no fim da viewport, mesmo em páginas com pouco
   conteúdo (ex.: /blog sem artigos, artigo não encontrado). */
.site-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

    .site-wrapper footer {
        margin-top: auto;
    }

/* ===== Utilitários mínimos ===== */
.text-brand {
    color: var(--brand-2) !important;
}

/* Título principal do blog (H1 da listagem e do artigo): --brand, mais escuro que
   --text-brand (--brand-2), de propósito — a hierarquia do blog é título mais forte
   e subtítulos de seção (.article-body h2/h3, em Artigo.razor.css) mais claros. */
.text-brand-strong {
    color: var(--brand) !important;
}

.text-accent {
    color: var(--accent) !important;
}

.text-cream {
    color: var(--cream) !important;
}

.text-secondary {
    color: var(--text) !important;
}

.bg-cream {
    background-color: var(--cream) !important;
}

.bg-accent {
    background-color: var(--accent) !important;
}

.bg-brand-2 {
    background-color: var(--brand-2) !important;
}

.bg-brand {
    background-color: var(--brand) !important;
}

/* Texto secundário do rodapé sobre bg-brand. Não usar .text-white-50 do Bootstrap
   (rgba branco a 50%) — dá só 2.52:1 de contraste, abaixo do 4.5:1 exigido; 90%
   de opacidade já cobre com folga (4.51:1) e ainda mantém a hierarquia mais suave
   que o link ao lado (esse em branco 100%, via .link-light). */
.footer-muted {
    color: rgba(255, 255, 255, .9) !important;
}

.relative {
    position: relative !important;
    overflow: hidden;
    isolation: isolate;
}

.container {
    z-index: 0;
}

/* Sombra unificada para todos os cards/superfícies elevadas (substitui .shadow-sm padrão do
   Bootstrap, sutil demais sozinha contra fundos claros/brancos — ex.: os cards de "Dúvidas
   frequentes" ficavam sem definição sobre o fundo branco da seção). Um anel de 1px + sombra
   com leve tom da paleta (em vez de preto puro), aplicado a um único ponto (.shadow-sm) para
   que todo elemento com sombra no site — cards, avatar, ícones, accordion — use exatamente o
   mesmo tratamento. */
.shadow-sm {
    box-shadow: 0 0 0 1px rgba(46, 61, 79, .06), 0 .5rem 1rem rgba(46, 61, 79, .08) !important;
}

/* Botão primário no esquema da marca */
.btn-primary {
    --bs-btn-bg: var(--brand-2) !important;
    --bs-btn-border-color: var(--brand-2) !important;
    --bs-btn-hover-bg: var(--brand) !important;
    --bs-btn-hover-border-color: var(--brand) !important;
    --bs-btn-active-bg: var(--brand) !important;
    --bs-btn-active-border-color: var(--brand) !important;
}

/* Altura de alvo de toque (~44px) nos botões .btn-primary fora do CTA grande do hero,
   que já usa .btn-lg e já está conforme. Ex.: "Como chegar". */
.btn-primary:not(.btn-lg) {
    --bs-btn-padding-y: .5625rem;
}

/* Logo do navbar (lockup horizontal oficial) */
.brand-logo-img {
    height: 45px;
    width: auto;
    display: block;
}

/* Abaixo do breakpoint md, encolhe o logo pra caber numa única linha ao lado do
   botão "Agendar" + hambúrguer sem quebrar pra uma segunda linha. */
@media (max-width: 767.98px) {
    .brand-logo-img {
        height: 34px;
    }
}

/* Navbar em fundo escuro (bg-brand): links claros por padrão, brancos no hover/focus
   (em vez do cinza padrão do Bootstrap, que ficaria ilegível sobre o fundo escuro).
   .90 de opacidade (não .85) — é o mínimo pra passar 4.5:1 de contraste AA contra --brand. */
.navbar-nav .nav-link {
    color: rgba(255,255,255,.90);
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #fff;
}

/* Navbar toggler em tom claro, para contraste sobre o fundo escuro do header;
   min-height 44px = alvo de toque recomendado (era ~40px só com o padding padrão do Bootstrap). */
.navbar-toggler {
    border-color: rgba(255,255,255,.35) !important;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* .navbar .container usa flex-nowrap (mantém marca + menu numa única linha no
   desktop). Abaixo do breakpoint md, isso também impedia o .navbar-collapse
   expandido de cair para uma nova linha abaixo da marca/hambúrguer — o menu
   ficava espremido na mesma linha, sobrepondo a barra do logo. Volta ao
   flex-wrap padrão do Bootstrap só no mobile, onde o menu precisa desse espaço. */
@media (max-width: 767.98px) {
    .navbar > .container.flex-nowrap {
        /* !important necessário: .flex-nowrap é o utilitário do próprio Bootstrap
           (flex-wrap:nowrap!important) — só um !important vence outro. */
        flex-wrap: wrap !important;
    }
}

/* Botão "claro" reutilizável — mesmo par cream/brand-2 usado nos ícones sociais.
   Substitui o .btn-light padrão do Bootstrap (cinza) no WhatsApp.
   Texto em --brand (não --brand-2): --brand-2 sobre --cream só dá 3.09:1 de contraste
   (abaixo do 4.5:1 exigido pra texto) — --brand sobre --cream dá 4.81:1.
   Fica em all.css (não preso num <style> de página) porque é usado em Home, Blog e
   Artigo — um <style> dentro de um único .razor só existe no DOM enquanto aquele
   componente estiver renderizado, então o botão ficava sem estilo nenhum sempre que
   /blog ou /blog/{slug} era a primeira página carregada na sessão. */
.btn-cream {
    background-color: var(--cream);
    color: var(--brand);
    border-color: var(--cream);
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Altura de alvo de toque (~44px) fora do .btn-lg, que já tem padding maior por padrão. */
.btn-cream:not(.btn-lg) {
    --bs-btn-padding-y: .5625rem; /* era .375rem/38px */
}

.btn-cream:hover {
    /* --brand (não --brand-2) de propósito: este botão vive dentro de cards
       bg-brand-2 (Home, Blog, Artigo) — se o hover também fosse --brand-2, o
       botão "sumiria" ao se misturar com o fundo do card. */
    background-color: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

.text-whatsapp {
    color: #25d366 !important;
}