/*
 * Fase 1 — base visual da Fundação BB no conteúdo do site público do Transforma!
 * Referência: Figma "Novo Portal Fundação Banco do Brasil" e tema WordPress FBB.
 *
 * Só aparência global (fontes, cores, botões, campos, cards, paginação).
 * Nenhuma página muda de estrutura. Carregado depois de css/custom.css e
 * vendor/fbb/fbb-layout.css (que já traz as @font-face e as variáveis --fbb-*).
 *
 * Regras de cor usam :where() para ficar com especificidade baixa: classes
 * utilitárias já usadas nas views (.text-white, .text-dark, .text-warning...)
 * continuam vencendo — por exemplo, títulos brancos sobre fotos.
 */

:root {
    --fbb-site-bg: #ffffff;
    --fbb-site-bg-soft: #f4f4f8;   /* cinza claro das seções do portal */
    --fbb-site-text: #212227;
    --fbb-site-muted: #585b65;
    --fbb-site-line: #dbdde2;
    --fbb-radius: 8px;
}

/* ---------- Tipografia ---------- */

html body {
    font-family: "BBTextRegular", Arial, sans-serif;
    color: var(--fbb-site-text);
    background-color: var(--fbb-site-bg);
}
body main :where(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .display-5) {
    font-family: "BBTitleBold", Arial, sans-serif;
    font-weight: 700;
}
/* "body main h2" (0,0,2) vence o "h2 { color }" do Bootstrap 5 (0,0,1) mesmo que o
   CSS do Vite seja aplicado depois deste arquivo; classes como .text-white /
   .text-dark (0,1,0) continuam vencendo. */
body main :where(h2, .display-5) {
    color: var(--fbb-blue);
}
/* títulos dentro de blocos com texto branco (ex.: nome da TS sobre a foto,
   em socialtecnology/_content/_section_detail_header) continuam brancos */
body main :where(.text-white, .card-img-overlay, .bg-dark, .bg-darksome) :where(h1, h2, h3, h4, h5, .display-5) {
    color: inherit;
}
body main :where(b, strong, .font-weight-bold) {
    font-family: "BBTextBold", Arial, sans-serif;
}
/* títulos de seção ("Busque por tema", "Tecnologias Sociais Mais Visualizadas"...)
   no tamanho do portal ("Destaques", "Notícias da Fundação BB") */
body main .display-5 {
    font-size: 2rem;
    line-height: 1.2;
}
@media (max-width: 767.98px) {
    body main .display-5 {
        font-size: 1.6rem;
    }
}

/* ---------- Links ---------- */

body main a {
    color: var(--fbb-blue);
}
body main a:hover,
body main a:focus {
    color: var(--fbb-blue-dark);
}
body .summary-text .read-more a {
    color: var(--fbb-blue);
}

/* ---------- Botões ---------- */

body .btn {
    border-radius: 5px;
    font-family: "BBTextMedium", Arial, sans-serif;
}
body .btn-primary,
body .btn-primary:focus {
    color: #ffffff;
    background-color: var(--fbb-blue);
    border-color: var(--fbb-blue);
}
body .btn-primary:hover,
body .btn-primary:active,
body .btn-primary.active {
    color: #ffffff;
    background-color: var(--fbb-blue-dark);
    border-color: var(--fbb-blue-dark);
}
body .btn-outline-primary {
    color: var(--fbb-blue);
    border-color: var(--fbb-blue);
    background-color: transparent;
}
body .btn-outline-primary:hover,
body .btn-outline-primary:active {
    color: #ffffff;
    background-color: var(--fbb-blue);
    border-color: var(--fbb-blue);
}
body .bg-primary {
    background-color: var(--fbb-blue) !important;
}
body .text-primary {
    color: var(--fbb-blue) !important;
}

/* ---------- Campos de formulário ---------- */

body main .form-control {
    border-radius: 5px;
    border-color: var(--fbb-site-line);
}
body main .form-control:focus {
    border-color: var(--fbb-blue);
    box-shadow: 0 0 0 2px rgba(70, 94, 255, 0.15) !important;
}

/* ---------- Seções e cards ---------- */

body main .bg-light {
    background-color: var(--fbb-site-bg-soft) !important;
}
body main .card {
    border-radius: var(--fbb-radius);
}
body .card .card-link {
    border-radius: var(--fbb-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
body .card .card-link:hover {
    box-shadow: 0 0 0 3px var(--fbb-blue);
}

/* ---------- Paginação ---------- */

body .page-item .page-link {
    color: var(--fbb-blue);
}
body .page-item.active .page-link {
    color: #ffffff;
    background-color: var(--fbb-blue);
    border-color: var(--fbb-blue);
}
body .page-item .page-link:hover {
    color: var(--fbb-blue-dark);
    background-color: #ebf2ff;
}
body .page-item:first-child .page-link {
    border-radius: 5px 0 0 5px;
}
body .page-item:last-child .page-link {
    border-radius: 0 5px 5px 0;
}

/* ---------- Seções coloridas -> azul do portal ----------
 * O custom.css dá uma cor por seção (.red-sec, .orange-sec, .purple-sec,
 * .lime-sec, .blue-sec, .dark-blue-sec...) com !important. Decisão do gestor
 * (29/10/2026): no site público, tudo no azul do portal.
 * "main ..." tem especificidade maior que as regras originais e vence o !important delas.
 */
body main :is(.red-sec, .dark-blue-sec, .orange-sec, .purple-sec, .lime-sec, .blue-sec, .dark-sec, .acqua-green-sec) .h1,
body main :is(h5.cm-r, h5.cm-db, h5.cm-o, h5.cm-p, h5.cm-l, h5.cm-b),
body main .ts-public-detail .titleAlter {
    color: var(--fbb-blue) !important;
    border-color: var(--fbb-blue) !important;
}
body main :is(.red-sec, .dark-blue-sec, .orange-sec, .purple-sec, .lime-sec, .blue-sec) .btn-add-item-form-list {
    color: var(--fbb-blue);
    border-color: var(--fbb-blue);
}
body main :is(.red-sec, .dark-blue-sec, .orange-sec, .purple-sec, .lime-sec, .blue-sec) .btn-add-item-form-list:hover {
    color: #ffffff;
    background-color: var(--fbb-blue);
}
body main :is(.red-sec, .dark-blue-sec, .orange-sec, .purple-sec, .lime-sec, .blue-sec) :is(.list-group .list-group-item:hover, .form-group.form-list:hover) {
    background-color: #ebf2ff;
}
body main :is(.purple-sec .fa-download, .lime-sec .fa-map-marked-alt) {
    color: var(--fbb-blue);
}
/* títulos dessas seções no tamanho dos títulos de seção do portal */
body main :is(.red-sec, .dark-blue-sec, .orange-sec, .purple-sec, .lime-sec, .blue-sec, .dark-sec) .h1,
body main .ts-public-detail .titleAlter {
    font-size: 2rem;
}

/* =====================================================================
 * Fase 2 — Home (home.blade.php)
 * Regras presas aos IDs das seções da home (#socialtecnologies-horizontal,
 * #search-themes, #modules), com !important onde o custom.css/Bootstrap
 * disputam. Não dependem de <main>: a lista do blog da home tem um </div>
 * sobrando que faz o navegador fechar o <main> antes dessas seções.
 * Referência: home do Figma do portal (títulos azuis, cards brancos
 * arredondados, sombra leve, cantos 8px).
 * ===================================================================== */

/* títulos de seção */
body :is(#socialtecnologies-horizontal, #search-themes, #modules) h2,
body :is(#socialtecnologies-horizontal, #search-themes, #modules) h2 > a {
    font-family: "BBTitleBold", Arial, sans-serif !important;
    font-size: 2rem !important;
    line-height: 1.2 !important;
    color: var(--fbb-blue) !important;
    text-decoration: none;
}
@media (max-width: 767.98px) {
    body :is(#socialtecnologies-horizontal, #search-themes, #modules) h2 {
        font-size: 1.6rem !important;
    }
}
body :is(#socialtecnologies-horizontal, #search-themes, #modules) {
    font-family: "BBTextRegular", Arial, sans-serif;
}
body #socialtecnologies-horizontal .text-dark-blue {
    font-family: "BBTitleBold", Arial, sans-serif;
    color: var(--fbb-blue-dark);
}

/* Blog: itens como cards brancos */
body #socialtecnologies-horizontal .socialtecnology-feature {
    align-items: stretch;
    margin-left: 0 !important;
    padding: 0 !important;
    background: #ffffff;
    border-radius: var(--fbb-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
body #socialtecnologies-horizontal .socialtecnology-feature:hover {
    box-shadow: 0 0 0 2px var(--fbb-blue);
}
body #socialtecnologies-horizontal .socialtecnology-feature img {
    height: 100%;
    min-height: 110px;
    box-shadow: none !important;
}
body #socialtecnologies-horizontal .socialtecnology-feature .col {
    padding: 0.75rem 1rem !important;
}
body #socialtecnologies-horizontal .socialtecnology-feature h4 a {
    font-family: "BBTextBold", Arial, sans-serif;
    color: var(--fbb-site-text) !important;
}
body #socialtecnologies-horizontal .socialtecnology-feature:hover h4 a {
    color: var(--fbb-blue) !important;
}
/* "VER MAIS" como o botão pequeno contornado do portal ("LER NOTÍCIA") */
body #socialtecnologies-horizontal .socialtecnology-feature .text-uppercase a {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    font-family: "BBTextBold", Arial, sans-serif;
    color: var(--fbb-blue) !important;
    border: 1px solid var(--fbb-blue);
    border-radius: 3px;
    text-decoration: none;
}
body #socialtecnologies-horizontal .socialtecnology-feature .text-uppercase a:hover {
    color: #ffffff !important;
    background: var(--fbb-blue);
}

/* Busque por tema: blocos arredondados com espaço entre eles */
body #search-themes .search-theme-panel {
    border-radius: var(--fbb-radius) !important;
}
body #search-themes .row.no-gutters > [class*="col-"] {
    padding: 0.4rem !important;
}
body #search-themes .card-title-theme {
    font-family: "BBTitleBold", Arial, sans-serif;
}

/* Mais visualizadas: cards horizontais */
body #modules .blog-summary {
    margin-bottom: 1rem;
    padding: 0 !important;
    background: #ffffff;
    border: 0 !important;
    border-radius: var(--fbb-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
body #modules .blog-summary:hover {
    box-shadow: 0 0 0 2px var(--fbb-blue);
}
body #modules .blog-summary > [class*="col-"]:first-child > a {
    height: 100%;
    border-radius: 0 !important;
}
body #modules .blog-summary img {
    height: 100%;
    min-height: 130px;
}
body #modules .blog-summary h4 a {
    font-family: "BBTitleBold", Arial, sans-serif;
    font-size: 1.25rem;
    color: var(--fbb-site-text) !important;
}
body #modules .blog-summary:hover h4 a {
    color: var(--fbb-blue) !important;
}
body #modules .blog-summary .estilizacao_tag_code,
body #modules .blog-summary .text-secondary {
    font-family: "BBTextRegular", Arial, sans-serif;
    color: var(--fbb-site-muted) !important;
}
/* agenda (coluna da direita) */
body #modules .event-schedule-summary h5 a {
    color: var(--fbb-blue);
}
/* foto encostada na borda do card e títulos sem sublinhado */
body :is(#socialtecnologies-horizontal .socialtecnology-feature, #modules .blog-summary) > [class*="col-"]:first-child {
    padding: 0 !important;
}
body :is(#socialtecnologies-horizontal, #modules) :is(h4, p) a {
    text-decoration: none !important;
}

/* ---------- Home: ajustes ---------- */

/* estrela de recomendações (★ N) sobre a foto, no canto inferior esquerdo */
body #modules .blog-summary .image-tag {
    position: absolute;
    left: 0.5rem;
    bottom: 0.5rem;
    padding: 0.1rem 0.5rem;
    font-size: 0.8rem;
    background: rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    line-height: 1.4;
}
/* temas com a mesma altura, independente da proporção da foto */
body #search-themes .search-theme-panel {
    height: 210px;
}
body #search-themes .search-theme-panel img {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
}

/* =====================================================================
 * Fase 2 — Busca / listagens (search.blade.php e telas com
 * .module-index-page-header-img: blog, eventos, temas)
 * ===================================================================== */

/* faixa do título: compacta, título azul no tamanho do portal */
body .module-index-page-header-img {
    height: auto !important;
    min-height: 0;
    padding: 2.5rem 0 1rem;
    background-color: var(--fbb-site-bg-soft);
    background-size: cover;
    background-position: center;
}
body .module-index-page-header-img .module-index-page-header-img-text {
    background: none !important;
}
body .module-index-page-header-img h1 {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-family: "BBTitleBold", Arial, sans-serif;
    font-size: 2.25rem !important;
    line-height: 1.2;
    color: var(--fbb-blue) !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
}
@media (max-width: 767.98px) {
    body .module-index-page-header-img h1 {
        font-size: 1.6rem !important;
    }
}

/* caixa do filtro */
body .filter-results {
    border: 1px solid var(--fbb-site-line);
    border-radius: var(--fbb-radius) !important;
    overflow: hidden;
}
body .filter-results .card-header {
    background: var(--fbb-blue);
    border: 0;
}
body .filter-results .filter-header,
body .filter-results .filter-header:hover {
    padding: 0.75rem 1rem !important;
    font-family: "BBTextBold", Arial, sans-serif;
    color: #ffffff !important;
    text-decoration: none;
}

/* filtro A-Z */
body .letters-pagination .page-link {
    font-family: "BBTextMedium", Arial, sans-serif;
    color: var(--fbb-blue);
    border-radius: 4px !important;
}
body .letters-pagination .page-item.active .page-link {
    color: #ffffff;
    background: var(--fbb-blue);
}

/* resultados em cards horizontais */
body .socialtecnology-summary {
    margin-top: 1rem !important;
    padding: 0 !important;
    background: #ffffff;
    border: 0 !important;
    border-radius: var(--fbb-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
body .socialtecnology-summary:hover {
    box-shadow: 0 0 0 2px var(--fbb-blue);
}
body .socialtecnology-summary .socialtecnology-img {
    height: 100%;
    min-height: 180px;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body .socialtecnology-summary .flex-column {
    padding: 1rem 1.25rem !important;
}
body .socialtecnology-summary h4 a {
    font-family: "BBTitleBold", Arial, sans-serif;
    color: var(--fbb-site-text) !important;
    text-decoration: none;
}
body .socialtecnology-summary:hover h4 a {
    color: var(--fbb-blue) !important;
}
body .socialtecnology-summary h6 {
    font-family: "BBTextMedium", Arial, sans-serif;
    color: var(--fbb-site-muted);
}
/* "VER MAIS" como botão pequeno contornado */
body .socialtecnology-summary .justify-content-between > .font-weight-bold a {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    color: var(--fbb-blue) !important;
    border: 1px solid var(--fbb-blue);
    border-radius: 3px;
    text-decoration: none;
}
body .socialtecnology-summary .justify-content-between > .font-weight-bold a:hover {
    color: #ffffff !important;
    background: var(--fbb-blue);
}

/* =====================================================================
 * Fase 2 — Prêmios (awards.blade.php, award.blade.php, category.blade.php)
 * ===================================================================== */

/* lista de prêmios: cada item vira um card */
body .titulo-premiacao {
    font-family: "BBTitleBold", Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--fbb-blue);
}
body #modules a > .row:has(.titulo-premiacao) {
    margin: 0 0 1rem 0;
    padding: 1rem;
    background: #ffffff;
    border-radius: var(--fbb-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    transition: box-shadow 0.2s ease;
}
body #modules a:hover > .row:has(.titulo-premiacao) {
    box-shadow: 0 0 0 2px var(--fbb-blue);
}
body #modules a > .row:has(.titulo-premiacao) + hr,
body #modules a:has(.titulo-premiacao) + hr {
    display: none;
}
body .bg-img {
    border-radius: 6px;
}
/* caixa de datas e situação das inscrições */
body :is(#modules, .titulo-premio ~ *, main) .alert-dark {
    width: auto !important;
    color: var(--fbb-site-text) !important;
    background: #ebf2ff;
    border: 0;
    border-left: 4px solid var(--fbb-blue);
    border-radius: 6px;
}
body #modules .alert-danger {
    color: var(--fbb-site-muted);
    background: var(--fbb-site-bg-soft);
    border: 1px solid var(--fbb-site-line);
    border-radius: 6px;
    text-align: center;
}
body #modules .alert-success {
    color: #ffffff;
    background: var(--fbb-blue);
    border: 0;
    border-radius: 6px;
    text-align: center;
}

/* página do prêmio */
body .titulo-premio h1,
body .bg-etapas h1,
body section h1:has(+ .row .card-img-top) {
    font-family: "BBTitleBold", Arial, sans-serif;
    font-weight: 700;
    color: var(--fbb-blue);
}
body .titulo-premio h1 {
    font-size: 2.25rem;
}
body .titulo-premio a {
    color: var(--fbb-blue);
}
/* sem imagem de capa, a área de 600px fica vazia */
body .bg-img-destaque:not(:has(img)) {
    height: 0;
}
body .bg-img-destaque:has(img) {
    height: auto;
    max-height: 480px;
    border-radius: var(--fbb-radius);
}
body .btn-inscricao {
    font-size: 1.25rem;
    padding: 0.75rem 2rem;
}
/* Categorias: fundo cinza claro do portal no lugar do degradê azul */
body .bg-categoria {
    background: var(--fbb-site-bg-soft) !important;
    filter: none;
}
body .bg-categoria h1 {
    font-family: "BBTitleBold", Arial, sans-serif;
    color: var(--fbb-blue);
}
body .bg-categoria .card {
    border: 0;
    border-radius: var(--fbb-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}
body .bg-categoria a:hover .card {
    box-shadow: 0 0 0 2px var(--fbb-blue);
}
body .bg-categoria .card-title {
    font-family: "BBTitleBold", Arial, sans-serif;
    color: var(--fbb-blue);
}
body .bg-categoria .card-text {
    color: var(--fbb-site-muted);
}
body .titulos-video h4 {
    font-family: "BBTitleBold", Arial, sans-serif;
    color: var(--fbb-blue);
}

/* página da categoria: etapas e abas */
body .bg-etapas .nav-pills .nav-link {
    color: var(--fbb-blue);
    border-radius: 5px;
}
body .bg-etapas .nav-pills .nav-link.active {
    color: #ffffff;
    background: var(--fbb-blue);
}
body .bg-col-etapa {
    background: var(--fbb-site-bg-soft);
    border-radius: var(--fbb-radius);
}
body .nav-tabs .nav-link {
    color: var(--fbb-blue);
}
body .nav-tabs .nav-link.active {
    color: var(--fbb-site-text);
    border-top: 3px solid var(--fbb-blue);
}

/* cards que são links inteiros: sem sublinhado */
body #modules a:has(.titulo-premiacao),
body #modules a:has(.titulo-premiacao) *,
body .bg-categoria a,
body .bg-categoria a * {
    text-decoration: none !important;
}
/* título da faixa alinhado ao conteúdo */
@media (min-width: 1200px) {
    body .module-index-page-header-img .container {
        max-width: 1340px;
        margin-left: auto;
        margin-right: auto;
    }
}
body .module-index-page-header-img .container {
    padding-left: 15px;
    padding-right: 15px;
}
/* evita barra de rolagem horizontal causada pela .row dentro da faixa do título */
body .module-index-page-header-img {
    overflow-x: hidden;
}
body .module-index-page-header-img > .row {
    margin-left: 0;
    margin-right: 0;
}

/* ---------- Cabeçalho: logos separados (FBB -> fbb.org.br, Transforma -> início) ---------- */
body .fbb-header .fbb-brand {
    gap: 1rem;
}
body .fbb-header .fbb-logo-fbb img {
    display: block;
    height: 34px;
    width: auto;
}
body .fbb-header .fbb-logo-site {
    padding-left: 1rem;
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}
body .fbb-header .fbb-logo-site img {
    height: 38px;
}
@media (max-width: 575.98px) {
    body .fbb-header .fbb-logo-fbb img { height: 24px; }
    body .fbb-header .fbb-logo-site { padding-left: 0.6rem; }
    body .fbb-header .fbb-logo-site img { height: 28px; }
}
body.fbb-contrast .fbb-header .fbb-logo-fbb img {
    filter: grayscale(1) invert(1) brightness(2);
}