/*
Theme Name: Clarim BH
Author: Clarim BH
Description: Tema do portal de notícias Clarim BH. Home com manchete, destaques, últimas, blocos por editoria, espaços de anúncio, redes sociais e player de áudio opcional.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: clarim-bh
*/

:root {
	--cb-accent: #CB010D;
	--cb-ink: #111111;
	--cb-mute: #5A5A5A;
	--cb-line: #E5E5E5;
	--cb-soft: #F4F4F4;
	--cb-head: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--cb-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--cb-body); color: var(--cb-ink); background: #FFFFFF; font-size: 16px; line-height: 1.45; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--cb-head); margin: 0; }
p { margin: 0; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--cb-ink); outline-offset: 2px; }

.screen-reader-text { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.screen-reader-text:focus { left: 8px; top: 8px; width: auto; height: auto; z-index: 100; background: #FFFFFF; padding: 8px 12px; }

.cb-wrap { max-width: 1216px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }

/* Player */
.cb-player { position: sticky; top: 0; z-index: 50; background: #000000; color: #FFFFFF; }
.admin-bar .cb-player { top: 32px; }
.cb-player-in { min-height: 64px; padding-top: 8px; padding-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; }
.cb-player-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cb-play { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; background: var(--cb-accent); border: 0; color: #FFFFFF; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.cb-ico-pause { display: none; }
.cb-player.is-playing .cb-ico-play { display: none; }
.cb-player.is-playing .cb-ico-pause { display: block; }
.cb-player-txt { display: flex; flex-direction: column; min-width: 0; }
.cb-player-txt strong { font-family: var(--cb-head); font-weight: 700; font-size: 15px; }
.cb-player-txt span { font-size: 13px; color: #D5D5D5; }
.cb-player-extra { display: flex; align-items: center; gap: 16px; }
.cb-vol { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.cb-vol input { width: 120px; accent-color: #FFFFFF; }
.cb-sponsor { font-size: 13px; color: #D5D5D5; padding-left: 16px; border-left: 1px solid #4A4A4A; }
.cb-sponsor strong { color: #FFFFFF; }

/* Barra da marca */
.cb-top { background: var(--cb-accent); color: #FFFFFF; position: relative; }
.cb-top-in { min-height: 64px; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; }
.cb-menu-btn { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #FFFFFF; cursor: pointer; padding: 0; }
.cb-menu-btn:focus-visible, .cb-follow:focus-visible, .cb-wordmark:focus-visible { outline-color: #FFFFFF; }
.cb-brand { display: flex; justify-content: center; }
.cb-brand .custom-logo { max-height: 48px; width: auto; }
.cb-wordmark { display: flex; align-items: center; gap: 6px; color: #FFFFFF; font-family: 'Bebas Neue', 'Archivo', sans-serif; font-size: 42px; line-height: 1; letter-spacing: 0.5px; }
.cb-wordmark:hover { text-decoration: none; }
.cb-wordmark-a { padding-top: 4px; }
.cb-wordmark-b { background: #FFFFFF; color: var(--cb-accent); padding: 4px 6px 0; }
.cb-top-right { display: flex; justify-content: flex-end; }
.cb-follow { min-height: 44px; padding: 0 18px; display: flex; align-items: center; gap: 8px; border: 2px solid #FFFFFF; border-radius: 999px; color: #FFFFFF; font-family: var(--cb-head); font-weight: 700; font-size: 15px; white-space: nowrap; }

.cb-drawer { background: #FFFFFF; color: var(--cb-ink); border-bottom: 1px solid var(--cb-line); }
.cb-drawer-in { padding-top: 16px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 12px; }
.cb-drawer-list, .cb-drawer-list ul { list-style: none; margin: 0; padding: 0; }
.cb-drawer-list { display: flex; flex-wrap: wrap; gap: 0 24px; }
.cb-drawer-list a { display: flex; align-items: center; min-height: 44px; font-family: var(--cb-head); font-weight: 600; }
.cb-drawer-list ul a { font-weight: 500; color: var(--cb-mute); }

.cb-search { display: flex; gap: 8px; max-width: 560px; }
.cb-search input { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid #8A8A8A; border-radius: 6px; }
.cb-search button { min-height: 44px; padding: 0 20px; border: 0; border-radius: 6px; background: var(--cb-accent); color: #FFFFFF; font-family: var(--cb-head); font-weight: 700; cursor: pointer; }

/* Menu de editorias */
.cb-nav { border-bottom: 1px solid var(--cb-line); background: #FFFFFF; }
.cb-nav-list { list-style: none; width: max-content; max-width: 100%; margin: 0 auto; padding: 0 8px; display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; font-family: var(--cb-head); font-weight: 600; font-size: 16px; }
.cb-nav-list a { display: flex; align-items: center; min-height: 56px; padding: 0 12px; }
.cb-nav-list .current-menu-item > a, .cb-nav-list .current-category-ancestor > a { color: var(--cb-accent); }

/* Estrutura */
.cb-main { padding-top: 32px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 32px; }
.cb-cols { display: flex; flex-wrap: wrap; gap: 32px; }
.cb-col-main { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cb-col-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }

.cb-meta { font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 8px; color: var(--cb-mute); }
.cb-meta-cat { font-family: var(--cb-head); font-weight: 700; color: var(--cb-accent); }

.cb-thumb, .cb-hero-img { display: block; aspect-ratio: 3 / 2; border-radius: 6px; overflow: hidden; background: #DDDDDD; }
.cb-thumb img, .cb-hero-img img { width: 100%; height: 100%; object-fit: cover; }

/* Manchete */
.cb-hero { display: flex; flex-wrap: wrap; gap: 20px; }
.cb-hero-txt { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cb-hero-img { flex: 1 1 340px; min-width: 0; }
.cb-hero-title { font-weight: 600; font-size: clamp(26px, 3.2vw, 34px); line-height: 1.18; }
.cb-hero-lead { color: #4A4A4A; }
.cb-bullets { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cb-bullets li { display: flex; gap: 10px; align-items: baseline; }
.cb-bullets li::before { content: ''; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--cb-accent); transform: translateY(-2px); }
.cb-bullets a { padding: 6px 0; }

/* Redes sociais */
.cb-social { background: var(--cb-soft); border-radius: 8px; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cb-social-title { font-family: var(--cb-head); font-weight: 700; font-size: 17px; margin-right: 4px; }
.cb-pill { min-height: 44px; padding: 0 16px; display: inline-flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid #C8C8C8; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--cb-ink); cursor: pointer; }
.cb-pill svg { color: var(--cb-accent); }

/* Cards */
.cb-grid { display: flex; flex-wrap: wrap; gap: 24px 32px; }
.cb-grid-top { padding-top: 20px; border-top: 1px solid var(--cb-line); }
.cb-card { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cb-card-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cb-card-title { font-weight: 600; font-size: 18px; line-height: 1.25; }
.cb-card-title a { display: block; padding: 4px 0; }

/* Últimas */
.cb-latest { border-top: 2px solid var(--cb-accent); padding-top: 12px; }
.cb-sec-title { font-weight: 700; font-size: 18px; color: var(--cb-accent); }
.cb-sec-title a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--cb-accent); }
.cb-latest ol { list-style: none; margin: 4px 0 0; padding: 0; }
.cb-latest li { display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--cb-line); }
.cb-latest-time { flex: 0 0 48px; font-family: var(--cb-head); font-weight: 700; font-size: 14px; color: var(--cb-accent); }
.cb-latest li a { font-family: var(--cb-head); font-weight: 600; font-size: 16px; line-height: 1.3; }
.cb-more-link { display: flex; align-items: center; min-height: 44px; font-family: var(--cb-head); font-weight: 700; font-size: 15px; color: var(--cb-accent); }

/* Seções */
.cb-section { border-top: 2px solid var(--cb-accent); padding-top: 16px; display: flex; flex-direction: column; gap: 20px; }
.cb-feature { display: flex; flex-wrap: wrap; gap: 32px; }
.cb-feature-main { flex: 2 1 440px; min-width: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.cb-feature-img { flex: 1 1 240px; min-width: 0; }
.cb-feature-txt { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cb-feature-txt p { color: #4A4A4A; }
.cb-feature-title { font-weight: 600; font-size: 24px; line-height: 1.2; }
.cb-feature-list { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; }
.cb-feature-list a { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--cb-line); font-family: var(--cb-head); font-weight: 600; font-size: 17px; }
.cb-feature-list a:last-child { border-bottom: 0; }
.cb-feature-list time { font-family: var(--cb-body); font-weight: 400; font-size: 13px; color: var(--cb-mute); }

/* Anúncios */
.cb-ad { display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 100%; overflow: hidden; }
.cb-ad-item { max-width: 100%; }
.cb-ad-label { font-size: 11px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--cb-mute); }
.cb-ad-wide { background: var(--cb-soft); padding: 16px; min-height: 282px; justify-content: center; }
.cb-ad-strip { min-height: 122px; justify-content: center; }
.cb-ad-side { min-height: 282px; }
.cb-ad-empty { min-height: 90px; justify-content: center; background: var(--cb-soft); border: 1px dashed #8A8A8A; color: #4A4A4A; font-size: 14px; text-align: center; padding: 16px; }

/* Listas (editoria, busca, últimas) */
.cb-page-title { font-weight: 700; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; padding-bottom: 12px; border-bottom: 2px solid var(--cb-accent); }
.cb-row { display: flex; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--cb-line); }
.cb-row .cb-thumb { flex: 0 0 240px; align-self: flex-start; }
.cb-row-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cb-row-body p { color: #4A4A4A; }
.cb-row-title { font-weight: 600; font-size: 22px; line-height: 1.2; }
.cb-empty { color: #4A4A4A; }
.navigation.pagination { padding-top: 12px; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.page-numbers { min-width: 44px; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #C8C8C8; border-radius: 6px; font-family: var(--cb-head); font-weight: 600; }
.page-numbers.current { background: var(--cb-accent); border-color: var(--cb-accent); color: #FFFFFF; }

/* Matéria */
.cb-article-head { display: flex; flex-direction: column; gap: 14px; }
.cb-kicker { font-family: var(--cb-head); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--cb-accent); }
.cb-article-title { font-weight: 700; font-size: clamp(28px, 4vw, 42px); line-height: 1.12; }
.cb-article-lead { font-size: 20px; color: #4A4A4A; }
.cb-byline { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--cb-mute); padding-top: 12px; border-top: 1px solid var(--cb-line); }
.cb-byline a { color: var(--cb-ink); font-weight: 600; }
.cb-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cb-share-label { font-size: 14px; color: var(--cb-mute); margin-right: 4px; }
.cb-article-fig { margin: 0; }
.cb-article-fig img { width: 100%; border-radius: 6px; }
.cb-article-fig figcaption, .cb-content figcaption { font-size: 13px; color: var(--cb-mute); padding-top: 6px; }
.cb-content { font-size: 18px; line-height: 1.7; max-width: 720px; }
.cb-content > * { margin: 0 0 1.2em; }
.cb-content h2 { font-size: 26px; line-height: 1.2; margin-top: 1.6em; }
.cb-content h3 { font-size: 21px; line-height: 1.25; margin-top: 1.4em; }
.cb-content a { color: var(--cb-accent); text-decoration: underline; }
.cb-content blockquote { margin-left: 0; margin-right: 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--cb-accent); font-size: 20px; }
.cb-content figure { margin-left: 0; margin-right: 0; }
.cb-content iframe, .cb-content video { max-width: 100%; }
.cb-content table { width: 100%; border-collapse: collapse; font-size: 16px; }
.cb-content th, .cb-content td { border: 1px solid var(--cb-line); padding: 8px 10px; text-align: left; }
.cb-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.cb-tags span { color: var(--cb-mute); }
.cb-tags a { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; background: var(--cb-soft); border-radius: 999px; font-weight: 600; }
.cb-article-page { max-width: 760px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: 20px; }

/* Rodapé */
.cb-footer { border-top: 4px solid var(--cb-accent); background: #FFFFFF; padding-bottom: 24px; }
.cb-footer-in { padding-top: 32px; padding-bottom: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.cb-footer-logo img { height: 56px; width: auto; }
.cb-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 15px; font-weight: 600; }
.cb-footer-menu a { display: flex; align-items: center; min-height: 44px; }
.cb-copy { padding-top: 16px; font-size: 13px; color: var(--cb-mute); }

/* Celular */
@media (max-width: 640px) {
	.cb-player-extra, .cb-follow { display: none; }
	.admin-bar .cb-player { top: 0; }
	.cb-wordmark { font-size: 36px; }
	.cb-hero-img { order: -1; flex-basis: 100%; }
	.cb-card { flex-direction: row; align-items: flex-start; flex-basis: 100%; }
	.cb-card .cb-thumb { flex: 0 0 116px; }
	.cb-row { gap: 12px; }
	.cb-row .cb-thumb { flex: 0 0 116px; }
	.cb-row-title { font-size: 18px; }
	.cb-row-body p { display: none; }
	.cb-content { font-size: 17px; }
	.cb-ad-wide { min-height: 0; }
}

/* Tocando agora: corta títulos longos sem quebrar o player */
.cb-player-main { min-width: 0; }
.cb-player-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: min(420px, 52vw); }

/* Tocando agora: letreiro quando o nome não cabe */
.cb-player-txt span { display: block; }
.cb-player-txt .cb-np-in { display: inline-block; white-space: nowrap; font-style: normal; }
.cb-player-txt .cb-np-in b { font-weight: inherit; }
.cb-player-txt span.is-scrolling { text-overflow: clip; }
.cb-player-txt span.is-scrolling b { padding-right: 48px; }
.cb-player-txt span.is-scrolling .cb-np-in { animation: cb-np-run 20s linear infinite; }
.cb-player-txt span.is-scrolling:hover .cb-np-in { animation-play-state: paused; }
@keyframes cb-np-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Jogos ao vivo: faixa abaixo do menu, só em dia de jogo */
.cb-jogos { background: #F6F6F6; border-bottom: 1px solid var(--cb-line); color: var(--cb-ink); font-family: var(--cb-head); animation: cb-jg-in .45s ease both; }
.cb-jogos-in { display: flex; align-items: center; gap: 16px; min-height: 54px; padding-top: 7px; padding-bottom: 7px; }
.cb-jg-tag { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #555555; }
.cb-jg-tag.is-live { color: var(--cb-accent); }
.cb-jg-tag.is-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cb-accent); animation: cb-jg-pulse 1.4s ease-in-out infinite; }
.cb-jg-games { flex: 0 1 auto; min-width: 0; display: flex; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.cb-jg-games::-webkit-scrollbar { display: none; }
.cb-jg-game { flex: none; display: flex; align-items: center; gap: 9px; background: #FFFFFF; border: 1px solid var(--cb-line); border-radius: 8px; padding: 6px 11px; font-size: 14px; }
.cb-jg-team { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.cb-jg-team img { width: 22px; height: 22px; object-fit: contain; }
.cb-jg-score { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cb-jg-score i { font-style: normal; font-size: 12px; font-weight: 500; color: #777777; margin: 0 5px; }
.cb-jg-st { font-size: 12px; font-weight: 700; color: #555555; background: #EEEEEE; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.cb-jg-game.is-live .cb-jg-st { background: var(--cb-accent); color: #FFFFFF; }
.cb-jg-game.is-goal { animation: cb-jg-goal 1s ease-in-out 6; }
.cb-jg-tick { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; font-family: var(--cb-body); font-size: 14px; color: #333333; }
.cb-jg-run { display: inline-block; white-space: nowrap; font-style: normal; }
.cb-jg-run b { font-weight: 400; }
.cb-jg-tick.is-scrolling b { padding-right: 72px; }
.cb-jg-tick.is-scrolling .cb-jg-run { animation: cb-np-run 30s linear infinite; }
.cb-jg-tick.is-scrolling:hover .cb-jg-run { animation-play-state: paused; }
@keyframes cb-jg-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes cb-jg-goal { 0%, 100% { background: #FFFFFF; border-color: var(--cb-line); } 50% { background: #FFE1E3; border-color: var(--cb-accent); } }
@keyframes cb-jg-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 782px) {
	.cb-jogos-in { flex-wrap: wrap; gap: 6px 12px; }
	.cb-jg-games { flex: 1 1 0; }
	.cb-jg-tick { flex: 1 1 100%; }
	.cb-jg-game { padding: 5px 9px; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
	.cb-jogos, .cb-jg-tag.is-live::before, .cb-jg-game.is-goal { animation: none; }
}