/* ==========================================================
   OPERÁRIO-AM — DARK THEME (Preto/Branco/Vermelho)
   ========================================================== */

/* Tokens */
:root{
  --op-bg: #0b0d10;        /* fundo */
  --op-surface: #11151b;   /* cards/painéis */
  --op-surface-2: #151b23;
  --op-text: #f3f6fb;      /* branco */
  --op-muted: rgba(243,246,251,.72);
  --op-border: rgba(255,255,255,.10);

  --op-red: #f40004;       /* vermelho */
  --op-red-2: #ff3b3b;     /* hover */
  --op-black: #000;
  --op-white: #fff;

  --op-radius: 18px;
  --op-radius-sm: 14px;
  --op-shadow: 0 14px 34px rgba(0,0,0,.40);
  --op-shadow-soft: 0 10px 22px rgba(0,0,0,.28);
}

/* Base */
html, body{
  background: var(--op-bg) !important;
  color: var(--op-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p, li{ color: var(--op-muted); }
a{ color: inherit; }
a:hover{ color: var(--op-red); }
img{ max-width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* O seu HTML usa ".site-main ... light" — vamos neutralizar isso */
.site-main.light,
.site-main.hfeed.light{
  background: transparent !important;
  color: var(--op-text) !important;
}

/* Containers: mais respiro */
.container{ padding-left: 16px; padding-right: 16px; }
.page-wrapper{ padding-top: 16px; }

/* ==========================================================
   HEADER / NAV
   ========================================================== */
.header-wrapper.before-sticky,
#masthead.site-header{
  background: rgba(11,13,16,.78) !important;
  border-bottom: 1px solid var(--op-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

#logo img.header_logo{
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.35));
}

/* Menu links */
.header-nav .nav-top-link{
  color: var(--op-text) !important;
  padding: 10px 12px !important;
  border-radius: 999px;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.header-nav .nav-top-link:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
  color: var(--op-white) !important;
}

/* Dropdown (painel moderno) */
.nav-dropdown{
  background: rgba(17,21,27,.96) !important;
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius);
  box-shadow: var(--op-shadow);
  padding: 10px;
}
.nav-dropdown a{
  color: var(--op-text) !important;
  border-radius: 12px;
  padding: 10px 12px !important;
  display: block;
}
.nav-dropdown a:hover{
  background: rgba(255,255,255,.06) !important;
  color: var(--op-white) !important;
}

/* Mobile menu (Magnific Popup) */
#jPanelMenu{
  background: var(--op-surface) !important;
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius);
}
#jPanelMenu .mobile-sidebar{ padding: 16px; }
#jPanelMenu .mobile-main-menu a{
  color: var(--op-text) !important;
  padding: 12px 10px;
  border-radius: 12px;
  display: block;
}
#jPanelMenu .mobile-main-menu a:hover{
  background: rgba(255,255,255,.06);
}

/* Ícone hambúrguer */
.mobile-menu a.off-canvas-overlay{
  color: var(--op-text) !important;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--op-border);
  border-radius: 12px;
  padding: 10px 12px;
}

/* ==========================================================
   HERO / SLIDER / BANNERS
   ========================================================== */
.ux_banner-grid-new .column-inner{
  border-radius: var(--op-radius);
}

/* arredondar e dar "peso" */
.ux_banner{
  border-radius: var(--op-radius) !important;
  overflow: hidden;
  box-shadow: var(--op-shadow-soft);
  border: 1px solid rgba(255,255,255,.08);
}

/* Overlay escuro consistente em todas as imagens do banner */
.ux_banner .banner-bg{
  position: relative;
}
.ux_banner .banner-bg:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}

/* Reduzir "glow" e deixar navegação mais clean */
.ux-slider-wrapper .flickity-page-dots .dot{
  opacity: .45;
}
.ux-slider-wrapper .flickity-page-dots .dot.is-selected{
  opacity: 1;
}

/* hover_fade mais suave */
.ux_banner.hover_fade:hover{
  transform: translateY(-2px);
  transition: transform .18s ease;
}

/* ==========================================================
   CARDS (featured-box) - os 3 blocos abaixo do banner
   ========================================================== */
.featured-box{
  background: var(--op-surface) !important;
  border: 1px solid var(--op-border);
  border-radius: var(--op-radius);
  box-shadow: var(--op-shadow-soft);
  overflow: hidden;
}
.featured-box .box-inner{ padding: 14px 14px 16px; }
.featured-box .featured-img img{
  border-radius: var(--op-radius-sm);
}
.featured-box h4{
  color: var(--op-white);
  margin-top: 12px;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}
.featured-box p{ margin: 0; }

/* ==========================================================
   TÍTULOS / SEÇÕES
   ========================================================== */
.section-title{
  color: var(--op-white) !important;
}
.tx-div.small{
  background: linear-gradient(90deg, transparent, var(--op-red), transparent) !important;
  height: 2px;
  opacity: .9;
}

/* ==========================================================
   BOTÕES / LINKS chamativos (CTA vermelho)
   ========================================================== */
a.button, .button, button, input[type="submit"]{
  border-radius: 999px !important;
  border: 1px solid var(--op-border) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--op-text) !important;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
a.button:hover, .button:hover, button:hover, input[type="submit"]:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10) !important;
}

/* (Opcional) se você criar classe .btn-red em algum link */
a.btn-red{
  background: linear-gradient(180deg, var(--op-red), #b80000) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
a.btn-red:hover{
  background: linear-gradient(180deg, var(--op-red-2), var(--op-red)) !important;
}

/* ==========================================================
   FOOTER (padronizar tons do vermelho e organizar)
   ========================================================== */

.footer.footer-2.dark{
  background: #070809 !important;
  border-top: 1px solid var(--op-border);
}
.footer.footer-2.dark .widget-title{
  color: var(--op-white);
}
.absolute-footer.dark{
  background: #2b0000 !important; /* vinho escuro mais moderno */
  border-top: 1px solid rgba(255,255,255,.10);
}
.absolute-footer.dark a{ color: #fff !important; }
.absolute-footer.dark a:hover{ color: var(--op-red-2) !important; }

/* Back to top */
#top-link{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid var(--op-border);
  border-radius: 14px;
}
#top-link:hover{
  background: rgba(255,255,255,.16) !important;
}


/* ==========================================================
   ELENCO — CARDS MODERNOS (Operário dark)
   ========================================================== */

/* "Hero" do elenco (aquela imagem grande do topo) */
img[src*="images/elenco/nossoelenco"]{
  border-radius: var(--op-radius);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--op-shadow);
  overflow: hidden;
}

/* Título ELENCO / COMISSÃO TÉCNICA mais forte */
.entry-header .section-title,
.section-title.clearfix.title_center{
  text-align: center;
  margin: 18px 0 16px;
}
.section-title.clearfix.title_center span{
  display: inline-block;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--op-text);
  letter-spacing: .08em;
  font-weight: 700;
}

/* Card base (vocês usam featured-box como wrapper) */
.featured-box .box-elenco{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)) !important;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--op-radius);
  overflow: hidden;
  box-shadow: var(--op-shadow-soft);
  position: relative;
}

/* imagem do atleta: melhora recorte e dá "punch" */
.featured-box .box-elenco .featured-img{
  position: relative;
  overflow: hidden;
}
.featured-box .box-elenco .featured-img img{
  transform: scale(1.02);
  transition: transform .25s ease;
}
.featured-box .box-elenco:hover .featured-img img{
  transform: scale(1.06);
}

/* overlay sutil na foto (pra combinar no dark) */
.featured-box .box-elenco .featured-img:after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.55));
  pointer-events:none;
}

/* faixa do nome/posição — vira "caption" premium */
.box-elenco-nome{
  padding: 12px 12px 14px;
  background: rgba(11,13,16,.78) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.10);
}

/* Remover dependência de inline color */
.box-elenco-nome h4{
  color: var(--op-white) !important;
  margin: 0 0 4px !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* posição */
.box-elenco-nome p{
  margin: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: 14px;
}

/* "badge" vermelho sutil para a posição (opcional, bonito) */
.box-elenco-nome p{
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.box-elenco-nome p:before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--op-red);
  box-shadow: 0 0 0 4px rgba(244,0,4,.15);
}

/* Ajuste de espaçamento entre cards no grid */
.row.container .columns .column-inner{
  padding: 10px 8px;
}

/* Mobile: mais respiro e cards maiores */
@media (max-width: 768px){
  .row.container{ padding-left: 8px; padding-right: 8px; }
  .row.container .columns .column-inner{ padding: 8px 6px; }
}


/* ==========================================================
   ÚLTIMAS NOTÍCIAS / SLIDER — FIX IMAGEM + DATA SEM HOVER
   Cole este bloco NO FINAL do operario-dark.css
   ========================================================== */

/* Card: permite a data ficar absoluta por cima */
.blog-posts .post-item .inner-wrap,
.blog-posts .post-item .inner {
  position: relative;
}

/* Frame fixo para imagem (não precisa redimensionar arquivo) */
.blog-posts .post-item .entry-image-attachment {
  height: 180px;
  overflow: hidden;
  border-radius: 14px;
}

/* Imagem sempre preenche sem deformar */
.blog-posts .post-item .entry-image-attachment img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* ==========================================================
   DATA — força aparecer sempre (algum CSS do tema deixa opacity 0)
   ========================================================== */

/* Base: sempre visível */
.blog-posts .post-item .post-date,
.blog-posts .post-item .post-date span {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
}

/* Remove qualquer regra que esconda fora do hover */
.blog-posts .post-item .post-date {
  display: block !important;
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 9999 !important;

  background: rgba(0,0,0,.72) !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;

  line-height: 1.05 !important;
  pointer-events: none; /* não atrapalha clique no card */
}

/* Tipografia da data */
.blog-posts .post-item .post-date .post-date-day {
  display: block !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

.blog-posts .post-item .post-date .post-date-month {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
}

/* Mesmo no hover continua visível (neutraliza regras do tema original) */
.blog-posts .post-item:hover .post-date,
.blog-posts .post-item:hover .post-date span {
  opacity: 1 !important;
  visibility: visible !important;
  color: #fff !important;
}


/* ==========================================================
   FIX DEFINITIVO — Texto editorial em páginas internas
   Fundo claro + texto escuro (ex: manacapuru-historia.php)
   ========================================================== */

/* bloco de texto principal */
.entry-content .txt-noticia-interna,
.entry-content .txt-noticia-interna .textowrap {
  background: transparent !important;
  color: #1a1a1a !important; /* texto escuro legível */
}

/* parágrafos */
.entry-content .txt-noticia-interna p,
.entry-content .txt-noticia-interna li {
  color: #1a1a1a !important;
  line-height: 1.7;
}

/* títulos internos, se houver */
.entry-content .txt-noticia-interna h1,
.entry-content .txt-noticia-interna h2,
.entry-content .txt-noticia-interna h3,
.entry-content .txt-noticia-interna h4 {
  color: #111 !important;
}

/* links dentro do texto */
.entry-content .txt-noticia-interna a {
  color: #b10000 !important;
  text-decoration: underline;
}
.entry-content .txt-noticia-interna a:hover {
  color: #7a0000 !important;
}


/* ==========================================================
   FIX — Título editorial (páginas internas, fundo claro)
   ========================================================== */

/* título principal */
.entry-header .section-title,
.entry-header .section-title span {
  color: #111 !important; /* escuro e legível */
}

/* remove fundo escuro/translúcido herdado do dark */
.entry-header .section-title span {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* reforço visual elegante (opcional) */
.entry-header .section-title {
  margin: 24px 0 18px;
  letter-spacing: 0.08em;
}

/* divisor abaixo do título (se existir) */
.entry-header .tx-div.small {
  background: #b10000 !important;
}


/* ===== Footer logos (somente no footer) ===== */
.footer.footer-2.dark .footer-logos{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 16px;
  align-items: center;
}

.footer.footer-2.dark .footer-logos a{
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.footer.footer-2.dark .footer-logos img{
  display: block;
  width: auto;
  height: auto;
  max-width: 150px; /* controla sem precisar editar imagem */
}

/* Patrocinadores: ligeiramente menor, pra não "estourar" e quebrar */
.footer.footer-2.dark .large-3.columns .footer-logos img{
  max-width: 140px;
}

@media (max-width: 768px){
  .footer.footer-2.dark .footer-logos img{
    max-width: 120px;
  }
}

.footer.footer-2.dark .footer-logos img{
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}

.footer.footer-2.dark .footer-logos a:hover img{
  opacity: 1;
  transform: scale(1.04);
}


/* ======================================================
   FIX SLIDER MOBILE — remove espaço preto
   ====================================================== */

@media (max-width: 768px){

  /* remove altura fixa inline */
  .ux_banner{
    height: auto !important;
    min-height: 0 !important;
  }

  /* usa proporção automática */
  .ux_banner .banner-bg{
    position: relative;
    padding-top: 56%; /* 16:9 responsivo */
  }

  .ux_banner .banner-bg img,
  .ux_banner .banner-bg{
    height: 100% !important;
  }

  /* garante preenchimento total */
  .ux_banner .banner-bg img{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
  }

}

@media (max-width:768px){
  .ux_banner{
    border-radius: 16px !important;
    margin-bottom: 14px;
  }
}