/* tema-bebrazil.css (BLOG)
 *
 * Camada de MARCA sobre o blog_premium.css, que e identico ao da Blumar.
 * Carregar SEMPRE depois dele (o navegacao.php faz isso quando BLOG_TEMA_CSS
 * esta definido no config_blog.php). Aqui entram tokens + os poucos overrides
 * de chrome que o premium fixa em hex (header, hero, footer).
 *
 * Paleta do Be Brazil (mesma do tema do banco de imagens, 07/08/2026):
 *   teal #027083 (chrome)  |  turquesa #25cbd3 (destaque)  |  laranja #ff9600
 * O laranja NAO muda: ja e o mesmo token do blog premium. Coincidencia da marca.
 */
:root {
    --bb-navy:      #027083;
    --bb-navy-deep: #01505f;
    --bb-ink:       #1f3a42;
    --bb-dim:       #3d7f8c;
    --bb-faint:     #8fb6bd;
    --bb-border:    rgba(2, 112, 131, .16);
    --bb-bg:        #f1f6f7;
    --bb-shadow-sm: 0 1px 3px rgba(1,80,95,.07), 0 4px 14px rgba(1,80,95,.06);
    --bb-shadow-lg: 0 12px 34px rgba(1,80,95,.16);
}

/* Chrome teal: o premium fixa o gradiente navy em hex, entao o override e aqui.
   Borda do topo em turquesa (mesma decisao do Image Bank do Be). */
.bb-site-header {
    background: linear-gradient(135deg, #01505f 0%, #027083 100%);
    border-top-color: #25cbd3;
}

/* Logo do Be (be_brazil_logo_branco.png, 192x77) e mais alta/estreita que o
   svg da Blumar e ficava pequena nos 34px do premium. */
.bb-site-logo img { height: 46px; }

/* Hero das categorias: teal -> turquesa (o premium fixa laranja em hex).
   Scrims radiais mantidos, so trocando o navy por teal profundo. */
.bb-hero {
    background:
        radial-gradient(900px 320px at 85% -40%, rgba(255,255,255,.28), transparent 60%),
        radial-gradient(700px 300px at 8% 120%, rgba(1,80,95,.30), transparent 62%),
        linear-gradient(155deg, #027083 0%, #0a6d7e 55%, #25cbd3 100%);
}

/* O <em> do titulo do hero usa --bb-navy-deep, que no tema teal e quase a cor
   onde o gradiente comeca -> sumia. Laranja contrasta e amarra com os botoes.
   (Mesma armadilha do Image Bank: texto escuro sobre hero escuro.) */
.bb-hero-title em { color: var(--bb-orange); }

/* Faixa navy do rodape vira teal profundo. */
.bb-site-footer .blumar_info { background: #01505f; }

/* Faixa de selos do rodape: o bege era pros logos da BLUMAR (JPGs bege).
   Os selos do Be tem fundo BRANCO -> no bege viravam caixas brancas.
   Faixa branca = selo funde com o fundo. */
.bb-site-footer .blumar_logos { background: #fff; }

/* Tile do autor: o logo_bebrazil.jpg e LARGO e o object-fit:cover do premium
   cortava a marca ("BRAZ..."). Contain + respiro mostra o logo inteiro. */
.bb-author-logo {
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--bb-border);
    padding: 6px;
    box-sizing: border-box;
}