/*
 * Refinamento — Radio Tocoista
 * ============================
 * Camada de acabamento por cima do tema News247 (style.css + responsive.css).
 * Carrega-se DEPOIS deles e ganha por ordem de cascata, sem uma unica linha
 * tocada nos 3000 do ficheiro do tema: se algum dia isto atrapalhar, tira-se o
 * <link> e o site volta exactamente ao que era.
 *
 * O que NAO muda: o verde da marca (#048909), o preto (#1c1c1c), o logotipo,
 * a estrutura das paginas e os nomes das classes. O que muda e a tipografia,
 * o ritmo do espaco, o desenho dos cartoes e os estados de interaccao — que e
 * onde estava a diferenca entre "um tema comprado" e "um jornal".
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
   --verde: #048909;
   --verde-escuro: #036b07;
   --verde-claro: #eaf6ea;
   --tinta: #14161a;
   --tinta-media: #4a5058;
   --tinta-fraca: #868d96;
   --linha: #e7e9ec;
   --fundo-suave: #f6f7f9;

   --raio: 12px;
   --raio-pequeno: 8px;
   --sombra: 0 1px 2px rgba(20, 22, 26, .04), 0 4px 16px rgba(20, 22, 26, .06);
   --sombra-alta: 0 2px 4px rgba(20, 22, 26, .06), 0 12px 32px rgba(20, 22, 26, .12);
   --transicao: 220ms cubic-bezier(.2, .6, .3, 1);

   --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ==================================================================
   1. Tipografia
   ------------------------------------------------------------------
   O tema vinha a 14px/24px em Open Sans e Arimo — a medida de 2016.
   Num portal de noticias o texto e o produto: sobe para 16px, com a
   entrelinha em unidades relativas para nao partir quando um titulo
   passa a duas linhas.
   ================================================================== */

body,
p,
h1, h2, h3, h4, h5, h6,
.btn,
input,
select,
textarea,
button {
   font-family: var(--sans);
}

body {
   color: var(--tinta-media);
   font-size: 16px;
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

p {
   font-size: 16px;
   line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
   color: var(--tinta);
   letter-spacing: -.015em;
   line-height: 1.25;
   font-weight: 700;
}

a {
   transition: color var(--transicao);
}

/* Os titulos das noticias sao o que se le primeiro: peso e aperto de
   letra a mais, entrelinha a menos. */
.post-title {
   font-size: 20px;
   line-height: 1.3;
   letter-spacing: -.02em;
   font-weight: 700;
   margin: 14px 0 0;
}

.post-title a {
   color: var(--tinta);
   background-image: linear-gradient(var(--verde), var(--verde));
   background-size: 0 2px;
   background-position: 0 100%;
   background-repeat: no-repeat;
   transition: background-size var(--transicao), color var(--transicao);
}

.post-title a:hover {
   color: var(--verde);
   background-size: 100% 2px;
}

.post-title.title-small {
   font-size: 15px;
   line-height: 1.4;
}

.post-title.title-medium {
   font-size: 17px;
   line-height: 1.35;
}

.post-title.title-large {
   font-size: 22px;
}

.post-title.title-extra-large {
   font-size: 38px;
   line-height: 1.15;
}

/* A meta era uma fila de traços verticais; fica um ponto de separacao,
   que e mais leve e nao se descola quando a linha quebra. */
.post-meta span,
.post-meta a {
   font-size: 13px;
   color: var(--tinta-fraca);
   border-right: 0;
   padding-right: 0;
   margin-right: 14px;
   line-height: 1.5;
   position: relative;
}

.post-meta a {
   color: var(--tinta-media);
   font-weight: 500;
}

.post-meta a:hover {
   color: var(--verde);
}

.post-meta > *:not(:last-child)::after {
   content: '·';
   position: absolute;
   right: -9px;
   color: #c9ced5;
}

/* ==================================================================
   2. Etiqueta de categoria
   ------------------------------------------------------------------
   Era um rectangulo com um triangulo colado por baixo — o detalhe que
   mais datava o tema. Fica uma pastilha.
   ================================================================== */

a.post-cat {
   font-size: 11px;
   letter-spacing: .06em;
   font-weight: 700;
   height: auto;
   line-height: 1;
   padding: 6px 10px;
   border-radius: 100px;
   background: var(--verde);
   transition: background var(--transicao);
}

a.post-cat:hover {
   background: var(--verde-escuro);
   color: #fff;
}

.post-cat:before {
   display: none;
}

/* ==================================================================
   3. Titulos de bloco
   ------------------------------------------------------------------
   Mantem o verde e a barra, perde a lingueta triangular.
   ================================================================== */

.block-title {
   font-size: 13px;
   letter-spacing: .08em;
   border-bottom: 1px solid var(--linha);
   margin: 0 0 28px;
}

.block-title > span {
   height: auto;
   line-height: 1;
   padding: 10px 16px;
   border-radius: var(--raio-pequeno) var(--raio-pequeno) 0 0;
   font-weight: 700;
}

.block-title > span:after {
   display: none;
}

/* ==================================================================
   4. Cartoes de noticia
   ------------------------------------------------------------------
   Cantos, recorte da imagem e um zoom contido. O tema levava o zoom a
   1.15, que corta cabecas em fotos de retrato; 1.05 chega para dar o
   sinal de que a imagem e clicavel.
   ================================================================== */

.post-block-style .post-thumb,
.post-overaly-style .post-thumb,
.post-block-style.post-grid .post-thumb {
   border-radius: var(--raio);
   overflow: hidden;
   background: var(--fundo-suave);
}

.post-block-style .post-thumb img,
.post-overaly-style .post-thumb img {
   transition: transform 500ms cubic-bezier(.2, .6, .3, 1);
   display: block;
   width: 100%;
}

.post-block-style:hover .post-thumb img,
.post-overaly-style:hover .post-thumb img {
   transform: scale(1.05);
}

/* As listas laterais (miniatura quadrada + titulo) ganham um alvo de
   toque inteiro em vez de dois links soltos. */
.post-block-style.post-float {
   align-items: flex-start;
   padding: 10px;
   margin: 0 -10px;
   border-radius: var(--raio-pequeno);
   transition: background var(--transicao);
}

.post-block-style.post-float:hover {
   background: var(--fundo-suave);
}

.post-block-style.post-float .post-thumb {
   border-radius: var(--raio-pequeno);
}

.post-block-style.post-float .post-title {
   margin-top: 0;
}

.list-post > li {
   border-bottom: 1px solid var(--linha);
   padding-bottom: 16px;
   margin-bottom: 16px;
}

.list-post > li:last-child {
   border-bottom: 0;
   padding-bottom: 0;
   margin-bottom: 0;
}

/* Cartao com texto por cima da foto: o degrade sobe mais e o texto
   ganha respiro em baixo. */
.post-overaly-style .post-content {
   padding: 24px 22px 20px;
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .88) 100%);
}

.post-overaly-style .post-title a {
   color: #fff;
   background-image: linear-gradient(#fff, #fff);
}

/* ==================================================================
   5. Topo: player, barra de recentes, cabecalho, menu
   ================================================================== */

.trending-bar {
   background: var(--tinta);
   padding: 12px 0;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.trending-title {
   border-radius: 100px;
   font-size: 10px;
   letter-spacing: .08em;
   padding: 6px 12px;
   font-weight: 700;
}

.trending-slide .post-title.title-small {
   font-size: 14px;
   font-weight: 500;
}

.trending-slide .post-title a {
   background-image: none;
}

.trending-slide .post-title a:hover {
   color: #6fdd74;
}

.top-bar {
   background: #fff;
   border-bottom: 1px solid var(--linha);
   font-size: 13px;
}

.top-bar .ts-date,
.top-bar .top-nav li a {
   color: var(--tinta-fraca);
   font-size: 13px;
}

.top-bar .top-nav li a:hover,
.top-bar .top-social a:hover {
   color: var(--verde);
}

/* O cabecalho era uma faixa de 40px de altura util com um logotipo de
   120px perdido a esquerda e uma coluna direita vazia. Aperta-se, e a
   coluna direita passa a dizer o que a radio e. */
.header {
   padding: 22px 0;
}

.header .logo img {
   width: auto !important;
   max-height: 62px;
}

.header-right {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 10px;
}

.marca-assinatura {
   text-align: right;
   line-height: 1.35;
}

.marca-assinatura strong {
   display: block;
   font-size: 13px;
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--verde);
   font-weight: 700;
}

.marca-assinatura span {
   font-size: 13px;
   color: var(--tinta-fraca);
}

/* Menu colado ao topo ao rolar. O `top` conta os 60px do player, que e
   fixo — sem isso o menu esconde-se por baixo dele. */
.main-nav {
   position: sticky;
   top: 60px;
   z-index: 30;
   background: #fff;
   border-top: 1px solid var(--linha);
   border-bottom: 1px solid var(--linha);
   box-shadow: 0 1px 0 rgba(20, 22, 26, .02);
}

ul.navbar-nav > li > a {
   font-size: 13.5px;
   letter-spacing: .02em;
   line-height: 52px;
   color: var(--tinta);
}

ul.navbar-nav > li > a:hover,
ul.navbar-nav > li.active > a {
   color: var(--verde);
}

.mega-menu-content {
   border: 0;
   border-radius: 0 0 var(--raio) var(--raio);
   box-shadow: var(--sombra-alta);
   padding: 26px;
}

.nav-search #search {
   color: var(--tinta);
   transition: color var(--transicao);
}

.nav-search #search:hover {
   color: var(--verde);
}

.search-block {
   border-radius: var(--raio);
   box-shadow: var(--sombra-alta);
   padding: 14px;
   width: 340px;
}

.search-block .form-control {
   border-radius: var(--raio-pequeno) 0 0 var(--raio-pequeno);
   background: var(--fundo-suave);
}

.search-block .btn {
   border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
}

/* ==================================================================
   6. Destaques
   ================================================================== */

.featured-slider .item {
   min-height: 520px;
   border-radius: var(--raio);
   overflow: hidden;
}

.featured-slider .item:before {
   background: linear-gradient(to bottom, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .25) 45%, rgba(0, 0, 0, .9) 100%);
}

.featured-post .post-content {
   padding: 0 44px 44px;
   max-width: 860px;
}

.featured-slider .post-title.title-extra-large a {
   color: #fff;
   background-image: linear-gradient(#fff, #fff);
   text-shadow: 0 2px 20px rgba(0, 0, 0, .45);
}

.featured-slider .post-date {
   color: rgba(255, 255, 255, .85);
}

/* O tema poe os pontos em `top: -67px`, para irem parar ao lado do titulo do
   bloco que costuma estar por cima do carrossel. Nos destaques nao ha titulo
   nenhum por cima — ha a barra de menu, e era la que eles estavam a aparecer.
   Aqui vao para dentro da imagem, ao pe do texto. */
.featured-slider.owl-theme .owl-dots {
   top: auto;
   bottom: 20px;
   right: 30px;
   left: auto;
}

.featured-slider.owl-theme .owl-dots .owl-dot span {
   background: rgba(255, 255, 255, .5);
}

.featured-slider.owl-theme .owl-dots .owl-dot.active span {
   background: #fff;
}

.owl-theme.owl-carousel .owl-dots .owl-dot span {
   border-radius: 100px;
   width: 8px;
   height: 8px;
   transition: width var(--transicao), background var(--transicao);
}

.owl-theme.owl-carousel .owl-dots .owl-dot.active span {
   width: 26px;
   background: var(--verde);
}

.owl-carousel.owl-theme .owl-nav > div {
   border-radius: 100px;
   transition: var(--transicao);
}

/* ==================================================================
   7. Separadores (Sociedade / Igreja / …)
   ================================================================== */

.featured-tab .nav-tabs,
.menu-tab .nav-tabs {
   border-bottom: 0;
}

.featured-tab .nav-tabs > li > a,
.featured-tab .nav-tabs .nav-link {
   font-size: 12px;
   letter-spacing: .06em;
   font-weight: 600;
   color: var(--tinta-fraca);
   padding: 6px 12px;
   border-radius: 100px;
   transition: var(--transicao);
}

.featured-tab .nav-tabs .nav-link:hover {
   color: var(--tinta);
   background: var(--fundo-suave);
}

.featured-tab .nav-tabs .nav-link.active {
   color: var(--verde);
   background: var(--verde-claro);
}

/* O separador activo levava uma lingueta triangular por baixo (uma regra
   `:after` por cada variante de cor do tema). Com a pastilha, sobrava um
   bico solto a meio do ar. */
.featured-tab .nav-tabs > li > a.active:after,
.featured-tab .nav-tabs > li.active > a:after,
.menu-tab .nav-tabs > li > a.active:after,
.menu-tab .nav-tabs > li.active > a:after {
   display: none;
}

/* ==================================================================
   8. Barra lateral
   ================================================================== */

.sidebar .widget {
   margin-bottom: 44px;
}

.sidebar .social-icon li a {
   border-radius: var(--raio-pequeno);
   transition: transform var(--transicao), opacity var(--transicao);
}

.sidebar .social-icon li a:hover {
   transform: translateY(-2px);
   opacity: .9;
}

/* ==================================================================
   9. Noticia
   ------------------------------------------------------------------
   E aqui que a medida do texto conta: 18px, entrelinha larga e uma
   largura de linha que nao obriga a virar a cabeca.
   ================================================================== */

.page-title {
   background: var(--fundo-suave);
   border-bottom: 1px solid var(--linha);
   padding: 16px 0;
}

.breadcrumb {
   background: none;
   padding: 0;
   margin: 0;
   font-size: 13px;
}

.single-post .post-title {
   font-size: 36px;
   line-height: 1.2;
   letter-spacing: -.025em;
   margin-bottom: 16px;
}

.post-title-area {
   margin-bottom: 26px;
}

.post-media.post-featured-image img {
   border-radius: var(--raio);
}

.entry-content {
   font-size: 18px;
   line-height: 1.75;
   color: #2b3038;
}

.entry-content p {
   font-size: 18px;
   line-height: 1.75;
   margin-bottom: 1.35em;
}

.entry-content h2,
.entry-content h3 {
   margin: 1.8em 0 .6em;
}

.entry-content h2 { font-size: 26px; }
.entry-content h3 { font-size: 21px; }

.entry-content img {
   max-width: 100%;
   height: auto;
   border-radius: var(--raio);
   margin: 1em 0;
}

.entry-content a {
   color: var(--verde);
   text-decoration: underline;
   text-underline-offset: 2px;
}

.entry-content blockquote {
   border-left: 3px solid var(--verde);
   background: var(--verde-claro);
   padding: 18px 24px;
   border-radius: 0 var(--raio-pequeno) var(--raio-pequeno) 0;
   font-size: 19px;
   margin: 1.6em 0;
}

/* O fundo colorido esta no <li>, nao no <a> — e por isso que os cantos e o
   espacamento tem de ir tambem ao <li>, senao arredonda-se o que nao se ve. */
.post-social-icons > li {
   border-radius: 100px;
   padding: 9px 16px;
   font-size: 13px;
   font-weight: 600;
   margin-right: 8px;
   margin-bottom: 8px;
   transition: transform var(--transicao), box-shadow var(--transicao);
}

.post-social-icons > li:hover {
   transform: translateY(-2px);
   box-shadow: var(--sombra);
}

.post-social-icons > li.whatsapp {
   background: #25D366;
}

.post-social-icons > li.twitter {
   background: #14171a;
}

.post-social-icons a i {
   border-right: 0;
   padding-right: 4px;
}

.share-items {
   margin-top: 28px;
   padding-top: 22px;
   border-top: 1px solid var(--linha);
}

.post-navigation {
   border-top: 1px solid var(--linha);
   border-bottom: 1px solid var(--linha);
   padding: 22px 0;
   gap: 20px;
}

.post-navigation h3 {
   font-size: 16px;
   line-height: 1.35;
}

.post-navigation a:hover h3 {
   color: var(--verde);
}

/* ==================================================================
   10. Paginacao
   ================================================================== */

.paging .pagination > li > a,
.paging .pagination > li > span {
   border-radius: var(--raio-pequeno);
   border: 1px solid var(--linha);
   margin-right: 6px;
   min-width: 40px;
   height: 40px;
   line-height: 38px;
   text-align: center;
   padding: 0 10px;
   color: var(--tinta-media);
   font-weight: 600;
   transition: var(--transicao);
}

.paging .pagination > li > a:hover {
   border-color: var(--verde);
   color: var(--verde);
   background: var(--verde-claro);
}

.paging .pagination > li.active > a {
   background: var(--verde);
   border-color: var(--verde);
   color: #fff;
}

.paging .page-numbers {
   line-height: 40px;
   top: 0;
   font-size: 13px;
}

/* ==================================================================
   11. Botoes e formularios
   ================================================================== */

.btn-primary,
.btn-dark {
   border-radius: var(--raio-pequeno);
   padding: 12px 22px;
   font-size: 13px;
   letter-spacing: .04em;
   font-weight: 700;
   transition: var(--transicao);
}

.btn-primary:hover {
   background: var(--verde-escuro);
   transform: translateY(-1px);
   box-shadow: 0 6px 16px rgba(4, 137, 9, .25);
}

.form-control {
   border-radius: var(--raio-pequeno);
   border: 1px solid var(--linha);
   font-size: 15px;
   transition: border-color var(--transicao), box-shadow var(--transicao);
}

.form-control:focus {
   border-color: var(--verde);
   box-shadow: 0 0 0 3px rgba(4, 137, 9, .12);
}

/* Um sinal de foco visivel para quem navega por teclado. O tema nao
   tinha nenhum: o `outline: none` do reset apagava-o e nada o repunha. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible {
   outline: 2px solid var(--verde);
   outline-offset: 2px;
   border-radius: 4px;
}

/* ==================================================================
   12. Rodape
   ================================================================== */

.footer {
   background: var(--tinta);
   color: #9aa1ab;
   padding: 62px 0 44px;
}

.footer .widget-title {
   font-size: 13px;
   letter-spacing: .1em;
   margin-bottom: 22px;
   padding-bottom: 12px;
   border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.footer-widget ul li a {
   color: #9aa1ab;
   font-size: 15px;
   transition: color var(--transicao), padding-left var(--transicao);
   display: inline-block;
   padding: 5px 0;
}

.footer-widget ul li a:hover {
   color: #fff;
   padding-left: 4px;
}

/* O nome a esquerda e o numero a direita, como estava. Ao dar `padding` ao
   <a> para aumentar o alvo de toque, o contador colou-se ao nome
   ("Política(97)"), porque deixou de haver o espaco do inline. */
.widget-categories ul li a {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 12px;
}

.widget-categories .catCounter {
   color: #626973;
   font-size: 13px;
   flex: none;
}

.ts-newsletter {
   background-color: #24272c;
   background-image: none;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: var(--raio);
   padding: 28px;
}

.ts-newsletter .newsletter-introtext h4 {
   color: #fff;
   font-size: 18px;
}

.ts-newsletter .newsletter-introtext p {
   color: #9aa1ab;
   font-size: 14px;
}

.ts-newsletter .form-control {
   background: #1a1d21;
   border-color: rgba(255, 255, 255, .12);
   color: #fff;
}

.ts-newsletter .form-control::placeholder {
   color: #6b727c;
}

/* O logotipo do rodape nao tinha limite e desenhava-se a 600px de
   largura — maior do que o do cabecalho e maior do que qualquer coisa
   na pagina. */
.footer-logo img {
   max-width: 190px;
   height: auto;
   margin-bottom: 22px;
}

.footer-info-content p {
   font-size: 15px;
   max-width: 620px;
   margin-left: auto;
   margin-right: auto;
}

.footer-social li a .social-icon {
   border-radius: var(--raio-pequeno);
   transition: var(--transicao);
}

.footer-social li a:hover .social-icon {
   background: var(--verde);
   color: #fff;
}

/* A barra de copyright era um bloco verde de ponta a ponta, a competir
   com tudo o que esta por cima. Fica escura, com o verde no que e link. */
.copyright {
   background: #0e1013;
   color: #7d848e;
   font-size: 13px;
   padding: 18px 0;
   border-top: 1px solid rgba(255, 255, 255, .06);
}

.copyright a,
.copyright .footer-menu ul li a {
   color: #b6bcc4 !important;
}

.copyright a:hover,
.copyright .footer-menu ul li a:hover {
   color: var(--verde) !important;
}

#back-to-top .btn.btn-primary {
   width: 42px;
   height: 42px;
   line-height: 42px;
   border-radius: 100px;
   font-size: 18px;
   box-shadow: var(--sombra-alta);
}

/* ==================================================================
   13. Publicidade
   ------------------------------------------------------------------
   Um slot que nao enche colapsa (o SDK esconde-o), portanto a margem
   nao pode estar no <ins>: ficaria um vazio de 60px sempre que nao
   houvesse anuncio. Fica na seccao, e so quando ela tem conteudo.
   ================================================================== */

.ad-content-area {
   padding: 26px 0;
}

.ad-content-area:not(:has(.hy-ad[data-hy-filled="1"])) {
   padding: 0;
}

/* ==================================================================
   14. Ecras estreitos
   ================================================================== */

@media (max-width: 991px) {
   .main-nav {
      position: static;
   }

   .header {
      padding: 16px 0;
      text-align: center;
   }

   .header-right {
      justify-content: center;
      margin-top: 10px;
   }

   .marca-assinatura {
      text-align: center;
   }

   .featured-slider .item {
      min-height: 340px;
      border-radius: var(--raio-pequeno);
   }

   /* O `height: 500px` do tema e fixo e nao acompanha o item. */
   .featured-post {
      height: 380px;
   }

   .featured-slider.owl-theme .owl-dots {
      right: 16px;
      bottom: 12px;
   }

   .post-title.title-extra-large {
      font-size: 24px;
   }

   .featured-post .post-content {
      padding: 0 20px 24px;
   }

   .single-post .post-title {
      font-size: 27px;
   }

   .entry-content,
   .entry-content p {
      font-size: 17px;
   }

   .navbar-toggler {
      border: 1px solid var(--linha);
      border-radius: var(--raio-pequeno);
      padding: 8px 12px;
      margin: 8px 0;
   }

   .sidebar {
      margin-top: 40px;
   }
}

@media (max-width: 575px) {
   .featured-slider .item {
      min-height: 280px;
   }

   .post-block-style.post-float {
      margin: 0;
   }
}

/* Menos movimento para quem o pediu ao sistema. */
@media (prefers-reduced-motion: reduce) {
   *,
   *::before,
   *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
   }

   .post-block-style:hover .post-thumb img,
   .post-overaly-style:hover .post-thumb img {
      transform: none;
   }
}