/* FutebolTotal — ajustes sobre o tema Retnews.
   Sem webfont externa: pilha de fontes do sistema (requisito de performance). */
/* Paleta amostrada do logo: teal #029fb2 e navy #0c2240. */
:root{--ft-brand:#029fb2;--ft-brand-dark:#017d8c;--ft-navy:#0c2240;
  --ft-accent:#029fb2;--ft-ink:#0c2240;--ft-muted:#64748b;--ft-line:#e5eaf0}

/* Barras escuras vão para o navy do logo, em vez do preto do template */
.topbar{background-color:var(--ft-navy)!important}
.bg__footer{background-color:var(--ft-navy)!important}
.bg__footer-bottom{background-color:#081729!important}
.navigation-wrap{border-top:3px solid var(--ft-brand)}
a{color:var(--ft-brand)}
a:hover{color:var(--ft-brand-dark)}
.btn-primary:hover{background-color:var(--ft-brand-dark)!important;border-color:var(--ft-brand-dark)!important}
.trending-news .title{color:var(--ft-brand)}
.footer-title{color:#fff}
body,h1,h2,h3,h4,h5,h6,.navbar,button,input,select,textarea{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}
img{max-width:100%;height:auto}
.ft-icon{vertical-align:-2px}
.logo{max-height:60px;width:auto}
.logo-footer{max-height:56px;width:auto}

/* Busca no topo */
.ft-search{display:flex;gap:.4rem;align-items:center}
.ft-search .form-control{min-width:190px;height:38px}
.ft-search .btn{height:38px;display:inline-flex;align-items:center;justify-content:center;padding:0 .9rem}

/* Publicidade */
.ft-ad{margin:1.6rem 0;text-align:center}
.ft-ad__link{display:inline-block;max-width:100%}
.ft-ad__img{max-width:100%;height:auto}
.ft-ad--sidebar .ft-ad__img{width:100%}
.ft-ad__legal{margin:.45rem 0 0;font-size:11px;line-height:1.35;color:var(--ft-muted);text-transform:none;letter-spacing:0}
.ft-footer__legal{margin-top:1rem;font-size:11px;line-height:1.4;opacity:.75}

/* Corpo do artigo */
.wrap__article-detail-content{font-size:1.06rem;line-height:1.75;color:#26364a}
.wrap__article-detail-content p{margin:0 0 1.15rem}
.wrap__article-detail-content h2{font-size:1.6rem;margin:2rem 0 .9rem;font-weight:800;color:var(--ft-ink)}
.wrap__article-detail-content h3{font-size:1.28rem;margin:1.6rem 0 .7rem;font-weight:700;color:var(--ft-ink)}
.wrap__article-detail-content ul,.wrap__article-detail-content ol{margin:0 0 1.2rem 1.15rem}
.wrap__article-detail-content li{margin-bottom:.4rem}
.wrap__article-detail-content a{color:var(--ft-brand);text-decoration:underline;text-underline-offset:3px}
.wrap__article-detail-content a:hover{color:var(--ft-accent)}
.wrap__article-detail-content img{border-radius:10px;margin:1.2rem 0}
.wrap__article-detail-content table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem}
.wrap__article-detail-content th,.wrap__article-detail-content td{border:1px solid var(--ft-line);padding:.6rem .7rem;text-align:left}
.wrap__article-detail-content th{background:#f6f8fa;font-weight:700}
.wrap__article-detail-content details{border:1px solid var(--ft-line);border-radius:10px;padding:.85rem 1rem;margin:.6rem 0;background:#fff}
.wrap__article-detail-content summary{cursor:pointer;font-weight:700;color:var(--ft-ink)}
.wrap__article-detail-content blockquote{border-left:4px solid var(--ft-accent);margin:1.5rem 0;padding:.4rem 0 .4rem 1.1rem;color:#33465c;font-style:italic}
.wrap__article-detail-content figure{margin:1.2rem 0}
.wrap__article-detail-content .entry-content>*:first-child{margin-top:0}

/* Cards */
.article__category a,.card__post__category a{color:inherit}
.wrapper__list__article .badge{background:var(--ft-accent);color:#fff}
.card__post__title h5{line-height:1.35}

/* Página de busca */
.ft-results__item{padding:1rem 0;border-bottom:1px solid var(--ft-line)}
.ft-results__item h5{margin:0 0 .3rem}
.ft-results__meta{font-size:.85rem;color:var(--ft-muted)}
.ft-note{background:#fff8e5;border:1px solid #f2dfa8;border-radius:10px;padding:1rem 1.15rem;margin:1.2rem 0;font-size:.95rem}
/* Campos a preencher nas páginas institucionais */
.ft-fill{background:#fff3cd;border:1px dashed #d9a406;border-radius:4px;padding:1px 6px;color:#7a5b00;font-weight:600;font-size:.92em}

/* ---------------------------------------------------------------- FUNDO
   O template só trazia um placeholder cinza em .bg-news-image. Aqui entra o
   campo desenhado por build/make-bg.mjs. O escurecimento é do CSS, então dá
   para ajustar o contraste sem regerar a imagem. O campo só aparece nas
   laterais, fora da caixa de 1230px do .body-box. */
.bg-news-image{
  background-image:linear-gradient(rgba(8,23,41,.55),rgba(8,23,41,.68)),url(/assets/img/campo-futebol.png);
  background-repeat:no-repeat;background-position:center center;
  background-attachment:fixed;background-size:cover;
}
/* background-attachment:fixed é caro e falha no iOS; no mobile a caixa ocupa
   a largura toda e o campo nem apareceria */
@media (max-width:991.98px){.bg-news-image{background-attachment:scroll}}
.body-box{box-shadow:0 0 60px rgba(0,0,0,.28)}

/* ---------------------------------------------------------------- ÍCONES
   O tema desenhava setas com glifos do FontAwesome (\f104, \f105, \f107…).
   Como a webfont foi removida por performance, esses glifos viravam
   quadradinhos. Redesenhados aqui em CSS puro: zero requisição, zero fonte. */
.breadcrumbs__item:after,
.dropdown-toggle[data-toggle="dropdown"]:after,
.show>.dropdown-toggle[data-toggle="dropdown"]:after,
.slick-prev:before,.slick-next:before,
.hero-carousel .slick-carousel.NextArrow:before,
.hero-carousel .slick-carousel.PrevArrow:before,
.fa-angle-left:before,.fa-angle-right:before{
  content:""!important;font-family:inherit!important;
  display:inline-block;width:.48em;height:.48em;
  border:solid currentColor;border-width:0 2px 2px 0;
  vertical-align:middle;
}
/* direita */
.breadcrumbs__item:after,
.slick-next:before,
.hero-carousel .slick-carousel.NextArrow:before,
.fa-angle-right:before{transform:rotate(-45deg)}
/* esquerda */
.slick-prev:before,
.hero-carousel .slick-carousel.PrevArrow:before,
.fa-angle-left:before{transform:rotate(135deg)}
/* baixo / cima (menus) */
.dropdown-toggle[data-toggle="dropdown"]:after{transform:rotate(45deg);margin-left:.45em;margin-bottom:.15em}
.show>.dropdown-toggle[data-toggle="dropdown"]:after{transform:rotate(-135deg);margin-bottom:0}
.breadcrumbs__item:after{margin:0 10px 2px 6px;opacity:.45}
.fa{display:inline-block;line-height:1}
.slick-prev:before,.slick-next:before{color:#fff;opacity:.9}
/* aspas do blockquote e check do checkbox, também vindos da webfont */
.block-quote::before{content:"\201C"!important;font-family:Georgia,"Times New Roman",serif!important;font-size:46px!important;line-height:1;color:var(--ft-brand)!important}
.checkbox input[type="checkbox"]:checked+label::after{
  content:""!important;font-family:inherit!important;
  width:.32em;height:.62em;border:solid currentColor;border-width:0 2px 2px 0;
  transform:rotate(45deg);display:inline-block;
}

/* ------------------------------------------------------------ MENU MOBILE
   No CSS do template o bloco @media (min-width:992px) fecha cedo, então
   ".navbar-expand-lg .navbar-toggler{display:none}" e
   ".navbar-expand-lg .navbar-collapse{display:flex!important}" acabavam
   valendo em QUALQUER largura: o botão sumia e o menu ficava travado aberto.
   Reposiciona ambos dentro do breakpoint certo. */
@media (max-width:991.98px){
  .navbar-expand-lg .navbar-toggler{display:inline-block!important}
  .navbar-expand-lg .navbar-collapse{display:none!important;flex-basis:100%}
  .navbar-expand-lg .navbar-collapse.show,
  .navbar-expand-lg .navbar-collapse.collapsing{display:block!important}
  .navbar-expand-lg .navbar-nav{flex-direction:column;width:100%}
  .navbar-expand-lg .navbar-nav .nav-link{padding:.6rem 0;border-bottom:1px solid var(--ft-line)}
  .navbar-expand-lg .navbar-nav .dropdown-menu{
    position:static!important;float:none;width:100%;border:0;box-shadow:none;
    padding-left:1rem;margin:0;transform:none!important;
  }
  .navbar .container{flex-wrap:wrap}
  .ft-search{width:100%;margin:.75rem 0}
}
/* o tema não define imagem para o hambúrguer (vinha do FontAwesome/Bootstrap) */
.navbar-toggler{border:1px solid rgba(12,34,64,.2)!important;border-radius:6px;padding:.35rem .6rem}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%230c2240' stroke-width='2.2' stroke-linecap='round' d='M4 7.5h22M4 15h22M4 22.5h22'/%3e%3c/svg%3e");
  background-repeat:no-repeat;background-position:center;background-size:100% 100%;
}

@media (max-width:575px){.ft-search{margin:.6rem 0 .2rem}.ft-search .form-control{min-width:0;flex:1}}
