/* Theme Name: Theme-Rnews
   Theme URI: https://rnews.com.br/
   Author: Célio Ricardo
   Author URI: https://rnews.com.br/
   Description: Tema leve otimizado para CWV e mobile.
   Version: 1.2
   Text Domain: Theme-Rnews */

/* Reset bsico para performance */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Montserrat, Roboto, sans-serif;
  font-size: 16px; /* Fixo para predictibilidade */
  line-height: 1.6;
  color: #333;
  background: #fff;
  max-width: 100%; /* Mobile-first: fluido */
  margin: 0 auto;
}
.top-line{
    min-height: 9px !important;
    background-color: #1d51ed;
}
/* sublinhado da mesma cor no hover/foco */
.menu a[class*="cat--"]:hover,
.menu a[class*="cat--"]:focus {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Conteúdo principal - Mobile-first */
/*main {
  padding: 1rem;
}
*/
article {
  margin-bottom: 2rem;
}

h2 {
  font-size: 1.2rem; /* Pequeno em mobile */
}

img {
  max-width: 100%;
  height: auto; /* Evita CLS: height auto com width 100% */
  display: block; /* Remove espaos extras */
}
/* Otimizaço CLS: Reserve espao para imagens */
/* Thumbnails otimizados para CLS */
/* Imagens com reserva para CLS */
.post-thumbnail {
  width: 100%;
  aspect-ratio: 16/9;
  background: #eee;
}

.post-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
/* Garante que a figura inline respeite o ratio reservado pelas dimensões */
.post-inline-figure { 
  margin: 16px 0; 
}
.post-inline-figure .post-thumbnail {
  display:block;
  width:100%;
  height:auto;
  /* browsers usam width/height para reservar espaço; este aspect-ratio é só fallback */
  aspect-ratio:auto;
}
/*IMAGE SINGLE*/
/* Wrapper da imagem inline */
.rn-inline-thumb{
  margin: 1rem 0;
}

/* CLS-safe: não force altura fixa; deixe width/height do <img> fazerem o reserve */
.rn-inline-thumb-img{
  display: block;
  width: 100%;
  height: auto; /* não sobrescreva os atributos nativos */
}

/* Media queries para desktop (mobile-first) */
@media (min-width: 768px) {
  h2 {
    font-size: 1.8rem;
  }
  main {
    padding: 2rem;
  }
.code-block .joinads .placeholderAd{min-height:250px}
  }
/*CONTENT-WRAPPER*/
/* Content-Wrapper otimizado para CLS */
.content-wrapper {
  display: flex;
  flex-direction: column; /* Stack em mobile, previne shifts horizontais */
  padding: 1rem; /* Fixo para consistência */
  box-sizing: border-box; /* Inclui padding no cálculo */
}

@media (min-width: 768px) {
  .content-wrapper {
    flex-direction: row; /* Side-by-side em desktop */
    min-height: 70vh;
  }
}

/* Ttulos e Contedo com Line-Height Fixo para Evitar Text Shifts */
h1,
h2,
.entry-content {
  line-height: 1.5; /* Fixo para prever altura */
  word-break: break-word; /* Evita overflows em títulos longos */
  /*hyphens: auto; /* Quebra automtica em mobile */
}

.post-title {
  min-height: 2em; /* Reserva para ttulos multi-linha */
  margin-bottom: 0rem;
  font-size: 2.5rem;
}

aside#sidebar-1 {
  display: none; /* Oculta em mobile para performance */
  padding: 1rem;
  background: #f8f8f8;
}

.widget {
  margin-bottom: 1rem;
}

/* Main otimizado para CLS */
/* Main com reserva agressiva para CLS */
main#primary.site-main {
min-height:auto;contain:content;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 2rem 1rem;
}

article {
  min-height: 300px; /* Reserva por post para evitar jumps */
}

@media (min-width: 768px) {
  main#primary.site-main {
    min-height: 80vh;
    contain: layout; /* Isola shifts internos */
    padding: 0rem 1rem;
  }
}

/* Desktop: Mostra sidebar ao lado */
@media (min-width: 768px) {
    .content-wrapper {
        display: flex;
        grid-column-gap: 12px;
        grid-row-gap: 30px;
        justify-content: center;
        align-items: stretch;
        width: 1200px;
        margin-left: auto;
        margin-right: auto;
        display: flex;
        position: relative;
    }
  main {
    flex: 3;
    margin-right: 2rem;
  }
  main.content-wrapper {
      margin-right: 0rem;
  }
  aside#sidebar-1 {
    display: block;
    flex: 1;
  }
}

/* Desktop ajustes */
@media (min-width: 768px) {
  .site-branding {
    text-align: left;
  }
}

.content-wrapper{min-height:auto}

/* Headings com font-size explcito para evitar APIs obsoletas */
h1,
h2,
h3,
h4,
h5,
h6 {
  /*font-size: 1.5rem;Tamanho base em mobile (ajuste conforme design) */
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 1rem;
}

h1 {
  font-size: 2rem; /* Maior para títulos principais */
}

h2 {
  font-size: 1.8rem;
}

h3 {
  font-size: 1.3rem;
}

h4 {
  font-size: 1.4rem;
}

/* Media query para desktop: Aumenta tamanhos */
@media (min-width: 768px) {
  h1 {
    font-size: 2.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.8rem;
  }
  h4 {
    font-size: 1.6rem;
  }
}

/* Especfico para headings em sees (para resolver o aviso) */
article h1,
aside h1,
nav h1,
section h1 {
  font-size: inherit; /* Ou defina explicitamente, ex: 2rem - herda do pai se precisar */
}

/* Seo de Posts Relacionados - Mobile-First */
.related-posts {
  display: flex;
  flex-direction: column; /* Stack vertical em mobile */
  margin-top: 2rem;
  padding: 1rem;
  background: #f8f8f8; /* Fundo leve, similar  imagem */
  border-top: 1px solid #ddd;
}

.previous-article,
.next-article {
  flex: 1;
  margin-bottom: 1rem;
}

.previous-article h4,
.next-article h4 {
  font-size: 1rem;
  color: #f5a623; /* Cor laranja similar  "PREVIOUS ARTICLE" na imagem */
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.previous-article a,
.next-article a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.previous-article p,
.next-article p {
  color: #666;
}

/* Desktop: Side-by-Side */
@media (min-width: 768px) {
  .related-posts {
    flex-direction: row;
    justify-content: space-between;
  }
  .previous-article {
    margin-right: 1rem;
  }
  .next-article {
    margin-left: 1rem;
  }
}

/* Seço de Tags - Mobile-First */
.post-tags {
  margin-top: 2rem;
  padding: 1rem;
  min-height: 150px; /* Para blocos dinâmicos */
}

.post-tags h4 {
  font-size: 1rem;
  margin-bottom: 0.9rem;
  color: #333;
}

.tags-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap; /* Wrap em mobile */
  gap: 0.5rem;
}

.tag-link {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: #e0e0e0; /* Cinza claro, similar aos botes na imagem */
  border-radius: 20px; /* Arredondado */
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  transition: background 0.3s ease; /* Hover suave, sem impacto em CLS */
}

.tag-link:hover {
  background: #ccc;
}
.entry-content ul.tags-list {
    margin-top: 0em;
    margin-bottom: 1.5em;
    font-size: 1.2rem;
}
.entry-content ul.tags-list li {
    padding: 7px 7px 7px 0px;
    margin: 0 0 7px 0;
}
/* Desktop: Mais espaado */
@media (min-width: 768px) {
  .tags-list {
    flex-wrap: nowrap; /* Horizontal sem wrap */
  }
}

/*MEIO DE ARTIGO*/
/* Seo de Artigos Relacionados - Mobile-First */
/* ===== Bloco "Veja também" (inline, após 3º parágrafo) ===== */
.related-block { margin: 1.5rem 0; min-height: 150px; /* Para blocos dinmicos */}
.related-note { text-align: center; font-size: 13px; color: rgba(16,18,21,.6); margin-bottom: .5rem; }

.relbox { background: #F4F4F4; border-radius: 12px; padding: 7px; box-shadow: 0 2px 4px rgba(0,0,0,.10); }
.relbox ul{margin-left: 0 !important;}
.relbox-title { margin: 0 0 12px; text-align: center; font: 700 20px/1.4 system-ui,-apple-system,"Segoe UI",Roboto; color: #3b3b3b; }

.rel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.rel-item { background: #fff; border-radius: 12px; padding: 10px 8px; }

.rel-item .rel-link{
  display: flex;
  align-items: center;
  justify-content: space-between; /* texto à esquerda, imagem  direita */
  gap: 12px;
  text-decoration: none; /* opcional */
}

.rel-item .rel-title{
  flex: 1 1 auto;
  line-height: 1.3;
}
.rel-item .rel-img{
  order: 2;                 /* garante imagem  direita */
  width: 80px;
  height: 80px;
  min-width: 80px;
  object-fit: cover;
  border-radius: 8px;       /* opcional */
  display: block;
}

@media (min-width: 768px) {
  .relbox { padding: 18px; }
  .rel-item .rel-link{ gap: 14px; }
  .rel-item .rel-img{
    width: 100px;
    height: 100px;
    min-width: 100px;
    border-radius: 10px;
    margin-left: 1px;
  }
  .rel-item .rel-title{
  font-size: 1.2rem;
  }
}
/*FIM RELATED ARTICLES*/

/* Estilo para a div com os botes */
.center {text-align: center;}
.social-buttons {
    /* margin-top: 20px; */
    /* text-align: center; */
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.social-buttons p {
  font-size: 18px;
  margin-bottom: 10px;
}

/* Estilo para os botes */
.btn-social {
  display: inline-block;
  padding: 10px 20px;
  margin: 5px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.btn-social.facebook {
  background-color: #3b5998;
}

.btn-social.insta {
  background-color: #9b0b8d;
}
.entry-content .social-buttons a {
  text-decoration: none;
  color: #ffffff;
}
.entry-content .social-buttons a:hover {
  text-decoration: none;
  color: #ffffff;
}
/* Efeito de hover para os botes */
.btn-social:hover {
  opacity: 0.8;
}

.social-buttons a:hover {
  text-decoration: none;
  color: #fdfdfd;
}

/* Bloco de Autor - Mobile-First */
.author-box {
  display: flex;
  align-items: flex-start;
}

.author-avatar {
  margin-right: 1rem;
}
.author-info .img-autor{ width:50px; height:50px; }
.author-info {
  flex: 1;
}

.author-name {
  font-size: 1.2rem;
  color: #ff0000; /* Vermelho como no print */
  margin-bottom: 0.5rem;
}

.author-bio {
  font-size: 0.9rem;
  color: #333;
  margin-bottom: 1rem;
}

.author-social {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
}

.social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  background: #ff0000; /* Vermelho como no print */
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}

.social-icon:hover {
  background: #cc0000;
}

/* Desktop: Mais espaado */
@media (min-width: 768px) {
  .author-name {
    font-size: 1.5rem;
  }
}

/*CLS ENTRIES*/
/* Entry-Content otimizado para CLS - Mobile-First */
.entry-content {
  min-height: 50vh; /* Reserva espao baseado em contedo mdio - ajuste para 60vh se posts longos */
  line-height: 1.6 !important; /* Fixo para evitar reflow de texto */
  word-break: break-word; /* Quebra linhas longas */
  box-sizing: border-box;
}

.entry-content p{
  margin-bottom:1rem;
  letter-spacing:1px;
  font-size:1.1rem;
  line-height:30px;
}
.entry-content ol, .entry-content ul{margin-left: 1.2rem;margin-top: calc(.5rem * (1 - 1));margin-bottom: calc(.5rem * 1);}
.entry-content ol li, .entry-content ul li{margin-bottom: 1rem;letter-spacing: 1px;font-size: 1.1rem;line-height: 23px;}
.entry-content img{
  display:block;
  max-width:100%;
  height:auto;
  margin-bottom:1rem;   /* sem min-height aqui */
}

.entry-content img {
  border-radius: 7px;
}

.entry-content iframe {
  /*aspect-ratio: 16/9;  Para embeds/vdeos */
  display:block;
  max-width:100%;
  margin-bottom:1rem;   /* sem min-height aqui */
}/* Desktop ajustes */

@media (min-width: 768px) {
  .entry-content {
    min-height: 60vh;
    padding: 2rem 0rem;
  }
}

/*POST IMAGE HOME*/
/* Imagens em Posts - Visibilidade e CLS */
.post-image {
  display: block !important; /* Fora exibio, sobrepe hides */
  max-width: 100%;
  height: auto;
  aspect-ratio: 16/9; /* Reserva espao */
  margin-bottom: 1rem;
  opacity: 1; /* Evita fade-in hides */
}

article {
  margin-bottom: 2rem;
}

article a img {
  transition: none; /* Sem animaçes que possam hide */
}

/* Mobile/Desktop */
@media (min-width: 768px) {
  .post-image {
    width: 110px; /* Tamanho do HTML */
    height: 76px;
  }
}

/* Forar exibio de imagens */
img.wp-post-image,
img.post-image {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/*MENU*/
/* ===== Header RNEWS (mobile-first, sem JS, anti-CLS) ===== */
/* A11y util */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Container (mantm seu padro) */
.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 16px;
}

/* Header base */
.site-header {
  position: relative;
  color: #000;
  padding: 0;
}

.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
}

/* Botões de ícone (hamburguer/lupa) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: #fff;
}

.icon-btn svg rect,
.icon-btn svg circle,
.icon-btn svg line {
  stroke: currentColor;
  fill: currentColor;
}

.icon-btn--menu {
  order: 0;
}

/* ====== LINKS CENTRAIS ENTRE LOGO E LUPA ====== */
.header-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0 auto;
}

.header-links .header-link {
  font-weight: 600;
  color: #1d4ed8; /* azul principal */
  text-decoration: none;
  font-size: 15px;
  transition: color 0.3s ease;
}

.header-links .header-link:hover {
  color: #ef4444; /* vermelho no hover */
}

/* Responsivo — esconde em telas pequenas */
@media (max-width: 768px) {
  .header-links {
    display: none;
  }
}


.icon-btn--search {
  order: 2;
}
.icon-btn--search {
  background: none;
  border: none;
  color: #555;          /* cor padro */
  cursor: pointer;
  transition: color 0.2s;
}

.icon-btn--search:hover {
  color: #124e9c;       /* cor ao passar o mouse */
}
/* Logo (usa width/height do HTML para travar CLS) */
.brand {
  display: flex;
  align-items: center;
  justify-content: center;
  order: 1;
  margin-inline: auto;
}

.custom-logo-link{display:inline-block;width:187px;height:40px}
.custom-logo-link img{display:block;width:100%;height:100%;aspect-ratio:187/40;object-fit:contain}
.custom-logo {
  height: auto;
  max-height: 40px;
  width: auto;
}

/* Toggles (sem JS) */
.nav-toggle,
.search-toggle {
  position: absolute;
  left: -9999px;
  opacity: 0;
}

/* Drawer (menu mobile) */
.drawer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
}

.drawer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.drawer .menu {
  list-style: none;
  margin: 48px 0 16px;
  padding: 0;
}

.drawer .menu > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0px 0 0 15px;
}

.drawer .menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px;
  color: #fff;
  text-decoration: none;
}

.drawer__social {
  margin-top: auto;
  display: flex;
  gap: 12px;
}

.social-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #191919;
  color: #fff;
}

/* Abrir/fechar o drawer */
.nav-toggle:checked ~ .drawer {
  pointer-events: auto;
}

.nav-toggle:checked ~ .drawer::before {
  opacity: 1;
}

.nav-toggle:checked ~ .drawer .drawer__inner {
  transform: translateX(0);
}
/* Botão de fechar (X) */
/* Botão de fechar (X) centralizado no quadrado azul */
.drawer__close {
  position: absolute;
  top: 4px;
  right: 12px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #367ff1;
  display: flex;
  align-items: center;      /* centraliza vertical */
  justify-content: center;  /* centraliza horizontal */
  cursor: pointer;
  font-size: 24px;
  line-height: 1;           /* evita o X “descer” */
  color: #ffffff;           /* X branco */
  font-weight: 700;
}

/* Se ainda existir <span> dentro, some com ele pra não atrapalhar */
.drawer__close span,
.drawer__close span::before,
.drawer__close span::after {
  display: none !important;
}

/* Lista do menu mobile */
.drawer .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cada item */
.drawer .menu > li {
  border-bottom: 1px solid #f2f2f2;
}

/* Links principais */
.drawer .menu a {
  display: block;
  padding: 0.85rem 0;
  font-size: 1.05rem;
  font-weight: 500;
  color: #111111;
  text-decoration: none;
  letter-spacing: 0.01em;
}

/* Hover/focus com destaque em azul do RNEWS */
.drawer .menu a:hover,
.drawer .menu a:focus {
  color: #367ff1;
}

/* Submenu (se tiver) */
.drawer .menu .sub-menu {
  padding-left: 0.75rem;
  border-left: 2px solid #e5e5e5;
  margin-top: 0.25rem;
}

/* Ajuste para desktop manter o menu normal */
@media (min-width: 992px) {
  .drawer__inner {
    position: static;
    height: auto;
    width: auto;
    max-width: none;
    transform: none;
    box-shadow: none;
    overflow: visible;
    padding: 0;
  }
}

/*BARRA BUSCA*/
/* Wrapper da barra de busca */
/* ===== Barra de busca expansvel (acima do menu) ===== */
.searchbar {
  position: relative;
  max-height: 0;               /* recolhida por padro */
  overflow: hidden;
  background: #f9f9f9;            /* fundo claro, como no print 2 */
  transition: max-height .25s ease;
  border-top: 1px solid #eee;  /* opcional */
  border-bottom: 1px solid #eee;
  /* NÃO usar margin-top aqui; ela vem logo aps o header-bar */
}

/* quando a lupa estiver marcada, expande */
.search-toggle:checked ~ .searchbar {
  /* sua .search-field tem padding-top/bottom de 40px (80px de altura),
     mais paddings do container; dar uma folga confortvel: */
  max-height: 140px;           /* ajuste fino se quiser 120~160 */
}

/* layout interno */
.searchbar .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
}

/* form */
.searchbar .search-form {
  width: 80%;
  max-width: 920px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto;
}

/* campo de texto (mantendo seu visual atual) */
.searchbar .search-form .search-field {
  flex: 1;
  min-height: 44px;
  padding: 20px 15px 20px 14px;
  font-size: 30px;
  color: #000;
  border: none;               /* evita borda ao focar */
  border-radius: 0;
}

.searchbar .search-form .search-field::placeholder {
  color: #555;
}

/* boto */
.searchbar .search-form .search-submit {
    border: 1px solid #ababab;
    color: #5c5c5c;
    letter-spacing: .5px;
    background-color: transparent;
    border-radius: 4px;
    height: 44px;
    padding: 0 10px;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
}
.searchbar .search-form .search-submit:hover {
  opacity: .9;
  background: #06347a;
  color: #fff;
}

/* boto fechar dentro da barra */
.searchbar__close {
    cursor: pointer;
    color: #5c5c5c;
    background: #fff;
    user-select: none;
    border: 1px solid #ababab;
    border-radius: 4px;
    width: 50px;
    height: 44px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 39px;
}
/*.searchbar__close {
  font-size: 20px;
  font-weight: bold;
  cursor: pointer;
  color: #333;
  background-color: transparent;
  border: none;
  padding: 0;
  margin-left: 16px;
}*/
.searchbar__close:hover { background: #333; color: #fff; }
.search-field {
    color: #000;
    border-style: none;
    border-top-width: 1px;
    border-top-color: #000;
    border-left-width: 1px;
    border-left-color: #000;
    border-right-width: 1px;
    border-right-color: #000;
    border-radius: 0;
    margin-bottom: 0;
    padding: 40px 30px 40px 0;
    font-size: 30px;
}

input:-webkit-autofill {
  box-shadow: 0 0 0px 1000px #fff inset; /* cor de fundo que voc quiser */
  -webkit-text-fill-color: #000;         /* cor do texto */
  transition: background-color 5000s ease-in-out 0s;
}


input:focus {
  outline: none;
  border: none; /* Ou defina um estilo de borda diferente se necessário */
}
input:focus {
  caret-color: #3b3b3b; /* Cor do cursor */
  animation: blinkCaret 1s step-end infinite; /* Cria o efeito de piscar */
}

@keyframes blinkCaret {
  50% {
    caret-color: transparent;
  }
}
.searchfield {
  flex: 1;
  min-height: 44px;
  border: 1px solid #2a2a2a;
  background: #121212;
  color: #fff;
  border-radius: 8px;
  padding: 0 12px;
}

.searchsubmit {
  min-height: 44px;
  min-width: 44px;
  border: none;
  border-radius: 8px;
  background: #1f1f1f;
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
/* responsivo */
@media (max-width: 420px) {
  .searchbar .search-form { width: 100%; }
    .searchbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 2px;
  }
    /* Ajustes do campo de pesquisa */
  .searchbar .search-form .search-field {
    flex: 1;
    padding: 10px;
    font-size: 18px; /* Aumenta o tamanho da fonte para mobile */
  }
    /* Fechar com maior visibilidade */
  .searchbar__close {
    font-size: 24px;
    margin: 1px 1px 1px 5px;
  }
}
/* DESKTOP (a partir de 768px) */
@media (min-width: 768px) {
  /* Para desktop, mantenha layout flexvel e expandido */
  .searchbar .container {
    justify-content: center; /* Centraliza no desktop */
    gap: 16px;
    padding: 20px 40px;
  }

  .searchbar .search-form .search-field {
        flex: 2;
        font-size: 24px;
        text-transform: uppercase;
    }

  .searchbar .search-submit {
    padding: 15px 30px;
    font-size: 20px;
  }

  /* Ajuste o boto de fechar para o desktop */
  .searchbar__close {
    font-size: 26px;
  }
}
/* Submenus simples (sem JS) */
.menu .sub-menu {
  display: none;
  padding-left: 14px;
}

.menu li:focus-within > .sub-menu,
.menu li:hover > .sub-menu {
  display: block;
}
/* ===== Dropdown sem quebrar o layout (desktop) ===== */
@media (min-width: 980px) {
  /* cada item pai vira um ncora para posicionar o submenu */
  .drawer .menu > li {
    position: relative;
  }

  /* submenu sobreposto (fora do fluxo) */
  .drawer .menu > li .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;                /* só aparece no hover/focus */
    min-width: 240px;
    background: #fff;             /* ajuste se seu header for escuro */
    color: #111;
    border: 1px solid #e9e9e9;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    padding: 8px 0;
    margin: 0;                    /* override de quaisquer margens */
    white-space: nowrap;          /* evita quebra de linha dos itens */
    z-index: 2000;                /* fica sobre o contedo */
  }

  /* itens do submenu */
  .drawer .menu > li .sub-menu > li {
    list-style: none;
    border-bottom: 1px solid #f2f2f2;
  }
  .drawer .menu > li .sub-menu > li:last-child {
    border-bottom: 0;
  }
  .drawer .menu > li .sub-menu a {
    display: block;
    padding: 10px 16px;
    text-decoration: none;
    color: inherit;               /* herda cor (ou defina a sua) */
  }
  .drawer .menu > li .sub-menu a:hover {
    background: #f7f7f7;
  }

  /* mostrar submenu no hover/teclado */
  .drawer .menu > li:hover > .sub-menu,
  .drawer .menu > li:focus-within > .sub-menu {
    display: block;
  }

  /* garante que nada do header crie empurrão por z-index */
  .site-header { position: relative; z-index: 100;}
  .drawer__inner { position: relative; z-index: 110; }
  
   .drawer__inner {
    display: flex;           /* já está, mas garantimos */
    justify-content: center; /* centro horizontal */
  }

  /* centraliza a distribuio dos itens do menu */
  .drawer .menu {
    display: flex;           /* j está */
    gap: 28px;               /* mantém o seu espaçamento */
    justify-content: center; /* itens no centro */
  }
  .drawer .menu {
    max-width: 1100px;
    margin-inline: auto; /* ajuda quando o menu ganha largura prpria */
  }
}


/* Desktop */
@media (min-width: 980px) {
  .header-bar {
    min-height: 56px;
  }
  .icon-btn--menu {
    display: none;
  }
  .brand {
    order: 0;
    margin: 0;
  }
  .icon-btn--search {
    order: 2;
    margin-left: auto;
  }
  /* Menu horizontal no desktop */
  .drawer {
    position: static;
    background: #fbfbfb;
    pointer-events: auto;
    border-bottom: 1px solid #e5e5e5;
  }
  .drawer::before {
    display: none;
  }
  .drawer__inner {
    position: static;
    height: auto;
    width: auto;
    transform: none;
    background: transparent;
    padding: 0;
    flex-direction: row;
  }
  .drawer .menu {
    display: flex;
    gap: 28px;
    margin: 0;
    padding: 0;
  }
  .drawer .menu > li {
    border: none;
  }
  .drawer .menu a {
        padding: 4px 0;
        color: #ffffff;
        font-size: 17px;
        letter-spacing: 0.03em;
  }
  .drawer .menu a:hover {
    opacity: 1;
  }
  .nav-toggle {
    display: none;
  }
}

/* Paleta */
.site-header {
  background: #fff;
}

.icon-btn {
  color: #000;
}

/*HOME*/
/* ===== Grade da Home (mobile-first, anti-CLS) ===== */
.posts-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 1rem 1rem 0;
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.post-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #eee;
  border-radius: 10px;
  overflow: hidden;
}

.post-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumb-placeholder {
  display: block;
  width: 100%;
  height: 100%;
}

/* Ttulo com clamp (evita jumps) */
.post-card__title {
  margin: 0;
  line-height: 1.35;
  font-size: 1.125rem;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.post-card__title a {
  color: #111;
  text-decoration: none;
}

.post-card__title a:hover {
  text-decoration: underline;
}

.post-card__meta {
  font-size: 0.875rem;
  color: #666;
}

/* Grid responsivo */
@media (min-width: 640px) {
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 980px) {
  .posts-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Paginaço nativa do WP */
.navigation.pagination {
  margin: 24px 0;
  padding: 0 1rem;
}

.navigation.pagination .nav-links {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  background: #fff;
}

.page-numbers.current {
  background: #000;
  color: #fff;
  border-color: #000;
}

.page-numbers:hover {
  border-color: #aaa;
}

/* ===== Primeira Dobra: 4 ltimos de cuidados-pessoais ===== */
.first-fold {
  padding: 12px 0;
  background: #fff;
}

.ff-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.ff-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ff-card__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
  background: #eee;
  border-radius: 12px;
  overflow: hidden;
}

.ff-card__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ff-card__title {
  margin: 0;
  line-height: 1.35;
  font-size: 1.125rem;
  min-height: 2.7em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ff-card__title a {
  color: #111;
  text-decoration: none;
}

.ff-card__title a:hover {
  text-decoration: underline;
}

/* Desktop: 4 colunas e separador da dobra */
@media (min-width: 980px) {
  .first-fold {
    padding: 16px 0 8px;
    border-bottom: 1px solid #eee;
    margin-bottom: 12px;
  }
  .ff-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
}

/* Tablet: 2 colunas */
@media (min-width: 640px) and (max-width: 979.98px) {
  .ff-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/*ARTIGO*/
/* Estilo para a descrio abaixo do ttulo */
/*Anuncios Join*/
/* --- Container principal dos anúncios --- */
.ad-site{
    width: 100%;
    min-height: 250px;
    display: block;
    margin: 20px 0;
    text-align: center;
    padding: 0;
}
.ad-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 16px auto;
  width: 100%;
  text-align: center;
  position: relative;
}
  .code-block .joinads .placeholderAd::before{
    content:"";display:block;width:100%;height:100%;
    background:#f3f4f6;
    background-image:linear-gradient(90deg,#f3f4f6 0,#ececec 50%,#f3f4f6 100%);
    background-size:200% 100%;
    animation:rnShimmer 1.2s infinite linear
  }
  @keyframes rnShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .code-block .joinads .placeholderAd.is-filled::before{display:none}
.code-block .joinads{display:block}
.code-block .joinads .placeholderAd{display:block;width:100%;margin:0 auto}
/* --- Verso específica do bloco abaixo do título --- */
.ad-slot-top { 
  width: min(100%, 336px);
  height: 250px;          /* altura fixa */
  margin: 16px auto;
  display: flex; 
  align-items: center; 
  justify-content: center;
}

.ad-slot-top iframe { 
  width: 100%; 
  height: 100%; 
  display: block; 
}
/* Opcional: para anncios responsivos, você pode ajustar a altura em telas menores */
@media (max-width: 767px) {
 .ad-slot-top {
   min-height: 250px;   /*Ajuste do tamanho mnimo, compatvel com a regra anterior */
   height: 250px;     /*Garante que a altura seja fixada para 280px, sem encolher */
  }
}

.ad-slot-top:empty::before { content:""; display:block; width:100%; height:100%;}

/*Fim anuncios artigo*/

.post-description {
    margin-top: 10px;
    margin-bottom: 20px;
    font-size: 1.5rem;
    line-height: 2rem;
}
.entry-content ul {
    margin-top: 1.0em;
    margin-bottom: 0.5em;
    font-size: 1.2rem;
}
.entry-content ul li {
    padding: 12px 7px 12px 12px;
    margin: 0 0 7px 0;
}
.entry-content a {
  color: #3a62a4;
  font-weight: 500;
  text-decoration: none; /* remove o sublinhado, se no quiser */
}

.entry-content a:hover {
  color: #d33;
}

/*META*/
/* Estilos para o autor e meta informaes */
/* Container principal */
.post-meta {
  display: flex;
  align-items: center;
  gap: 10px; /* Espao entre foto e texto */
  flex-wrap: wrap; /* Permite quebra no mobile */
}
.post-meta .rn-cat-label .badge {
    padding: 1.0em 2em;
    border-radius: 5px;
}
/* Bloco do autor */
.author-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto; /* não estica */
}

/* Foto do autor */
.img-autor img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

/* Texto (nome + datas) */
.post-info-text {
  display: flex;
  flex-direction: row; /* Desktop lado a lado */
  align-items: center;
  gap: 15px;
  font-size: 14px;
  color: #464b59;
}

/* Nome do autor */
.autor-name {
  font-weight: 600;
}

/* Datas */
.post-dates {
  display: flex;
  flex-direction: row;
  gap: 15px;
  font-size: 13px;
  color: #666;
}

.post-dates p {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
}

/* MOBILE */
/* MOBILE (at 768px)  avatar à esquerda, textos  direita em coluna */
@media (max-width: 768px){

  .post-meta{
    display:flex;
    flex-direction: row !important;   /* mantm em LINHA no mobile */
    align-items: flex-start;
    gap: 10px;
  }

  /* avatar NO estica */
  .post-meta > .author-info{
    flex: 0 0 auto !important;
    margin:0 !important; padding:0 !important;
  }
  .author-info .img-autor img{
    width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
  }

  /* bloco de textos ocupa o restante, em COLUNA */
  .post-meta > .post-info-text{
    flex: 1 1 auto !important;
    min-width: 0;
    display:flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin:0 !important;
  }

  /* Nome do autor (opcional: esconder "Publicado por:" no mobile) */
  .autor-name p{ margin:0; font-weight:600; line-height:1.2; }
  .autor-name p strong{ display:none; }  /* remova esta linha se quiser manter o rtulo */

  /* Datas: uma por linha, coladas ao nome */
  .post-dates{ display:block; margin:0; }
  .post-dates p{
    display:flex; align-items:center; gap:6px;
    margin:0; line-height:1.25; font-size:13px; color:#5E6472;
  }
  .post-dates p + p{ margin-top:4px; }
  .post-dates svg{ width:16px; height:16px; transform:translateY(1px); flex:0 0 16px; }
}



/*MOBILE GERAL*/
@media (max-width: 768px) {
    .content-wrapper {
        padding: 0rem;
    }
    main#primary.site-main {
        padding: 0px;
    }
    .post-title {
    font-size: 1.4rem;
    }
    h2 {
        font-size: 1.4rem;
   }
    h3 {
        font-size: 1.2rem;
   }
   .entry-content ul {
        margin-left: 0.25rem;
    }
    .entry-content .relbox ul{
        margin-left: 0;
    }
    .rel-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;   /* nmero de linhas permitido */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* adiciona os "..." no final */
    max-height: 4.5em;       /* ~3 linhas (ajuste conforme font-size/line-height) */
    line-height: 1.5em;      /* altura da linha */
    }
}
/*ARTIGOS RELACIONADOS FIM ARTIGO*/
/* bloco */
.related-articles {
  margin-top: 2.5rem;
  border-top: 2px solid #111;
  padding-top: 1.25rem;
}
.ra-title {
  text-align: center;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: 1rem;
}

/* grid */
.ra-grid {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;           /* Mobile: 1 col */
  gap: 22px;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .ra-grid { grid-template-columns: repeat(2, 1fr); }  /* Tablet: 2 */
}
@media (min-width: 1024px) {
  .ra-grid { grid-template-columns: repeat(4, 1fr); }  /* Desktop: 4 */
}

/* card */
.ra-card { display: block; }
.ra-link {
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  gap: .5rem;
  text-decoration: none;
  color: inherit;
}

/* mdia 16:9 com cover */
.ra-media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
  background: #f3f4f6;
}
.ra-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* meta */
.ra-cat {
  color: #0a8a4b;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.ra-post-title {
  font-weight: 700;
  line-height: 1.25;
  font-size: 1.05rem;
}
@media (min-width: 768px) {
    .ra-post-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.65em * 2);
    }
}
.ra-excerpt {
  color: #6b7280;
  font-size: .95rem;
  line-height: 1.35;
  margin: 0;
}

/* foco/hover acessvel */
.ra-link:focus-visible { outline: 2px solid #111; outline-offset: 2px; }
.ra-link:hover .ra-post-title { text-decoration: underline; }


/*FIM ARTIGO*/


/* Sidebar se adapta ao seu layout existente */
/*SIDEBAR*/
/* Aspect-ratio helpers para reservar espao (anti-CLS) */
.aspect{position:relative;display:block;width:100%}
.aspect > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.aspect-16x9{aspect-ratio:16/9}

/* Sidebar bloco */
.sb-least-viewed{display:block}
.sb-featured {
    display: block;
    margin-bottom: 20px;
    background: #ffffff;
    border-radius: 3px;
    padding: 4px;
}
.sb-featured .sb-featured-body{padding-top:10px}
.sb-badge{
  display:inline-block;background:#f6c31a;color:#111;
  font-size:.72rem;line-height:1;padding:6px 8px;border-radius:3px;font-weight:700
}

.sb-title{font-size:1.2rem;line-height:1.25;margin:.5rem 0 .35rem}
.sb-title a{color:#111;text-decoration:none}
.sb-title a:hover{text-decoration:underline}

.sb-meta{font-size:.82rem;color:#666;display:flex;align-items:center;gap:.35rem}
.sb-meta .sb-comments::before{content:" "; opacity:.7}
.sb-dot{opacity:.8}

.sb-excerpt{font-size:.95rem;color:#444;margin:.6rem 0 0}

/* Lista menor */
article.sb-item{
    min-height: 0px;
    margin-bottom: 0rem;
}
.sb-item {
    background: #ffffff;
    padding: 11px 4px;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 12px;
    align-items: center;
    border-radius: 7px;
}
.sb-item{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.sb-thumb{width:96px}
.sb-item-title{font-size:.98rem;line-height:1.25;margin:0}
.sb-item-title a{color:#111;text-decoration:none}
.sb-item-title a:hover{text-decoration:underline}
.sb-item-date{font-size:.8rem;color:#777;display:block;margin-top:.25rem}

/* Responsivo (ajusta tipografia em telas maiores) */
@media (min-width: 768px){
  .sb-title{font-size:1.35rem}
}
/*ADS*/
@media (min-width:1024px){ .site-content, .content-area { overflow: visible; } }

/* Sidebar sticky  apenas desktop */
@media (min-width: 1024px) {
  /* garante que o continer da sidebar no corte o sticky */
  #sidebar-1 { overflow: visible; }

  /* o bloco do anncio que deve grudar */
  #sidebar-1 .sb-ads {
    position: sticky;
    top: 40px;              /* ajuste conforme seu header fixo */
  }

  /* tamanho base do anncio */
  #sidebar-1 .sb-ads .adsbygoogle {
    display: block;
    width: 100%;
    min-height: 336px;      /* ajuste ao formato usado */
  }
}
/*FIM SIDEBAR*/

/*INDEX*/
/* ===== Primeira dobra: layout 3 colunas desktop / 1 coluna mobile ===== */
.container { max-width: 1200px; margin: 0 auto; padding: 16px; }
.grid { display: grid; gap: 24px; }

@media (max-width: 1023px){
  .fold10-grid { grid-template-columns: 1fr; }
}

/* Aspect ratios sem JS */
.ratio-16x9 { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }
.ratio-1x1  { aspect-ratio: 1 / 1;  width: 100%; object-fit: cover; }
.thumb { display:block; border-radius: 6px; }

/* Cards */
.card { position: relative; overflow: hidden; border-radius: 8px; background: #fff; }
.card .media img { display:block; }
.card-md .meta { padding: 12px 4px; }
.card-md .title-sm {font-size: clamp(18px, 1.2vw, 20px); line-height: 1.25; margin: 6px 0; }
.card-md .excerpt { font-size: 14px; color: #4a4a4a; margin: 0; }
article.card-md {
    margin-bottom: 0rem;
}
/* Hero principal */
.hero { position: relative; color: #fff; }
.hero .overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(12px, 2.5vw, 24px);
    background: linear-gradient(to top, rgb(0 0 0 / 85%), rgba(0, 0, 0, 0) 55%);
}
.title-hero { font-size: clamp(20px, 2.6vw, 20px); line-height: 1.12; margin: 6px 0 6px; }
.excerpt-lg { font-size: clamp(14px, 1.6vw, 16px); opacity: .9; margin: 0; }

/* Hero secundrio */
.hero-sub { position: relative; margin-top: 24px; color: #fff; }
.hero-sub .overlay {
  position: absolute; inset: 0; display:flex; flex-direction: column; justify-content:flex-end;
  padding: clamp(12px, 2.2vw, 20px);
  background: linear-gradient(to top, rgb(0 0 0 / 85%), rgba(0, 0, 0, 0) 55%);
}
.title-hero-sub { font-size: clamp(20px, 2.6vw, 20px); line-height: 1.16; margin: 6px 0 6px; }
.title-hero-sub { display: inline-block;}
.excerpt-md { font-size: clamp(14px, 1.5vw, 16px); opacity:.9; margin: 0; }

/* Lista lateral (mini) */
.mini { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid rgba(0,0,0,.08); margin-bottom: 16px; }
.mini:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.mini .thumb-wrap { display:block; }
.mini-meta .title-mini { font-size: 14px; line-height: 1.35; margin: 2px 0; }
.meta-row { font-size: 12px; color: #666; display:flex; align-items:center; gap:6px; }
/* Limita título a 4 linhas no desktop */
@media (min-width: 768px) {
  .meta .title-sm {display: -webkit-box;
    -webkit-line-clamp: 3;   /* mximo de 4 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.35em * 4); /* 4 linhas baseado no line-height */
  }
  .mini-meta .title-mini {
    display: -webkit-box;
    -webkit-line-clamp: 4;   /* mximo de 4 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.35em * 4); /* 4 linhas baseado no line-height */
  }
  .card-md .excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;   /* mximo de 4 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.45em * 2); /* 4 linhas baseado no line-height */
}
}

/* Badge de categoria */
.badge {
  display:inline-block; font: 700 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.02em; color:#1e7e34; /* verde */
  background: #eaf8ee; border-radius: 4px; padding: 6px 8px; margin-bottom: 0px;
}
/*  Categoria (badge) s do tamanho do texto  */
.badge,
a.badge {
  display: inline-block !important;   /* sai do block */
  width: auto !important;             /* nada de 100% */
  max-width: 100%;
  padding: .35rem .6rem;
  line-height: 1.1;
  border-radius: .5rem;
  background: rgba(241,255,245,.96);  /* verde clarinho do exemplo */
  color: #166534;                     /* verde do texto */
  font-weight: 700;
  text-transform: none;               /* mantm como est (remova se quiser caps) */
  box-shadow: 0 0 0 1px rgba(22,101,52,.10) inset; /* opcional */
}

/* Evita que algum grid/overlay force stretch */
.card .badge,
.hero .badge,
.mini .badge {
  align-self: flex-start;             /* no estica na coluna */
}

/* Se houver link interno, garante comportamento inline */
.badge > a { display: inline; width: auto !important; }

.index article {
    min-height: 0px;
}

/* Links */
.title-hero a, .title-hero-sub a, .title-sm a, .title-mini a { color: inherit; text-decoration: none; }
.title-hero a:hover, .title-hero-sub a:hover, .title-sm a:hover, .title-mini a:hover { text-decoration: underline; }
/*SEGUNDA DOBRA*/
/* ===== Seo abaixo da primeira dobra (4 cards) ===== */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  align-items: start;
}
@media (max-width: 1199px){
  .grid-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px){
  .grid-4 { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 639px){
  .grid-4 { grid-template-columns: 1fr; gap: 20px; }
}

.card-quad { background:#fff; border-radius:8px; overflow:hidden; }
.card-quad .meta { padding: 12px 4px; }
.title-quad { font-size: clamp(18px, 2.1vw, 22px); line-height:1.3; margin: 6px 0 4px; }
.title-quad a{ 
    color: inherit;
    text-decoration: none;
}
.title-quad a:hover{ 
    text-decoration: underline;
}
.excerpt-quad { font-size: 14px; color:#60626a; margin: 0; }
.ratio-16x9 { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; display:block; border-radius: 6px; }

/* aproveita a badge j usada no topo */
.badge {
  display:inline-block; font: 700 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.02em; color:#1e7e34; background:#eaf8ee; border-radius:4px; padding:6px 8px; margin-bottom:8px;
}
@media (min-width: 768px) {
    .meta .title-quad {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.35em * 3);
    }
    .excerpt-quad {
         display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.95em * 3);
    }
}
/*QUARTA DOBRA*/
/* main.css */

/* PERF-PATCH: reserva de espao para anncios (evita CLS) */
.ads-slot{ display:block; min-height:280px; }
@media (min-width:768px){ .ads-slot{ min-height:250px; } }


/* PERF-PATCH: Floating Ad (CSS-only, sem JS) */
.floating-ad { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; }
.floating-ad details { width: 100%; background: #fff; border-top: 1px solid rgba(0,0,0,.08); box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
.floating-ad summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 0px 12px; cursor: pointer; user-select: none; }
.floating-ad summary::-webkit-details-marker { display: none; }
.floating-ad .fad-inner { padding: 8px 12px; }
.floating-ad .fad-label { font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; opacity: .7; margin-bottom: 6px; }
.floating-ad .fad-slot { min-height: 130px; display: block; }
@media (max-width: 767px){ .floating-ad .fad-slot { min-height: 280px; } }

/* Estado colapsado: mantm uma barra fina de 44px sem causar CLS */
.floating-ad details:not([open]) { overflow: hidden; }
.floating-ad details:not([open]) .fad-inner { display: none; }

/* cone seta rotaciona conforme estado */
.floating-ad summary .icon { transition: transform .2s ease; }
.floating-ad details[open] summary .icon { transform: rotate(0deg); }
.floating-ad details:not([open]) summary .icon { transform: rotate(180deg); }

/*4bloco*/
/* ===== 3 bloco: lista horizontal (4 itens) ===== */
.rows4-wrap { display: grid; gap: 28px; }
.row-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 20px;
  align-items: start;
  padding: 0 0 24px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
.row-card:last-child { border-bottom: 0; padding-bottom: 0; }
.row-media { display:block; }
.row-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display:block; }

.row-meta .badge {
  display:inline-block; font: 700 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.02em; color:#ffffff; background:#eaf8ee; border-radius:4px; padding:6px 8px; margin-bottom:8px;
}
.row-title { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.28; margin: 4px 0 6px; }
.row-title a { color: inherit; text-decoration: none; }
.row-title a:hover { text-decoration: underline; }
.row-excerpt { font-size: 15px; color:#60626a; margin: 0; }

/* responsivo */
@media (max-width: 1023px){
  .row-card { grid-template-columns: 1fr; gap: 12px; }
}
@media (min-width: 768px) {
    .row-title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-height: calc(1.65em * 2);
    }
}
/*QUINTO BLOCO*/
/* ====== AJUSTE DE ALTURA BLOCO 5 (alinhado com a coluna direita) ====== */
.block5-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:28px;
  align-items:stretch;            /* <- faz as colunas terem a mesma altura */
}
@media (max-width:1023px){
  .block5-grid{ grid-template-columns:1fr; }
}

/* Coluna esquerda precisa se esticar 100% */
.b5-left{ display:grid; grid-template-rows: 1fr; }
.b5-feature{ position:relative; border-radius:8px; overflow:hidden; height:100%; }
.b5-feature .media{ display:block; height:100%; }
.b5-feature .thumb{
  width:100%;
  height:100%;                   /* <- em vez de travar por aspect-ratio */
  object-fit:cover;              /* preenche sem distorcer */
  display:block;
}
.b5-feature .overlay.soft{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:clamp(12px,2.2vw,15px);
  background:linear-gradient(to top, rgb(0 0 0 / 99%), rgba(0, 0, 0, 0) 100%);
  color:#fff;
}
.b5-title{ font-size: clamp(22px, 3.2vw, 19px); line-height:1.78; margin:-4px 0; }
.b5-excerpt{ font-size:clamp(14px,1.6vw,16px); opacity:.92; margin:0; }

/* Coluna direita: 2x2 com linhas de mesma altura */
.b5-right{}
.b5-sidegrid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;            /* <- todas as 4 clulas com a mesma altura */
  gap:22px;
}
@media (max-width:1023px){
  .b5-sidegrid{ grid-template-columns:1fr; grid-auto-rows:auto; gap:16px; }
}

.b5-card{ display:flex; flex-direction:column; }
.b5-card .media{ display:block; }
.b5-card .thumb{
  width:100%;
  aspect-ratio:16/9;             /* para os cards pode manter 16:9 */
  object-fit:cover;
  border-radius:6px;
  display:block;
}
.b5-card .meta{ padding:10px 2px; display:flex; flex-direction:column; }
.b5-card-title{ font-size:clamp(16px,2.1vw,20px); line-height:1.34; margin:4px 0 0; }

/* badge reaproveitada */
.badge{
  display:inline-block; font:700 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.02em; color:#1e7e34; background:#eaf8ee; border-radius:4px; padding:6px 8px; margin-bottom:8px;
}
.b5-title a,.b5-card-title a{ color:inherit; text-decoration:none; }
.b5-title a:hover,.b5-card-title a:hover{ text-decoration:underline; }
.b5-card-title{
  display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden;
}
/* ===== Lateral 2x2 ===== */
.sidegrid4-wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
}
.sidegrid2-wrap{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:20px;
  place-items: center;
}
.sidegrid2-wrap article{
  margin-bottom: 0;  
}
@media (max-width: 1023px){
  .sidegrid4-wrap{ grid-template-columns:1fr; }
  .sidegrid2-wrap{ grid-template-columns:1fr; }
}

.sidegrid4-item{ display:flex; flex-direction:column; }
.sidegrid4-item .thumb{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
  display:block;
}
.sidegrid4-item .meta{ padding:10px 2px; }
.sidegrid4-title{ font-size:clamp(16px, 2vw, 20px); line-height:1.34; margin:4px 0 0; }
.sidegrid4-title a{ color:inherit; text-decoration:none; }
.sidegrid4-title a:hover{ text-decoration:underline; }

.badge{
  display:inline-block; font:700 12px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  letter-spacing:.02em; color:#ffffff; background:#eaf8ee; border-radius:4px; padding:6px 8px; margin-bottom:0px;
}
/*FOOTER*/
/* ===== Footer ===== */
.site-footer{
  background:#ebebeb; /* cor de base (ajuste à sua paleta) */
  color:#fff;
  margin-top: clamp(24px, 6vw, 64px);
  padding: clamp(24px, 5vw, 56px) 0;
}
.site-footer a{ color:#162664; text-decoration:none; }
.site-footer a:hover{ text-decoration:underline; }

.foot-top{
  text-align:center;
  max-width: 1100px;
}
.site-footer .brand img{ height:40px; width:auto; }
.site-footer .site-name{ font-weight:700; font-size:22px; }

.foot-lead{
  margin: 14px auto 0;
  max-width: 820px;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  opacity: .95;
  color:#162664;
}

.foot-sep{
  border:0; height:1px;
  background: rgba(255,255,255,.25);
  margin: clamp(22px, 4vw, 36px) 0;
}

.foot-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: start;
  max-width: 1100px;
}
@media (max-width: 900px){
  .foot-grid{ grid-template-columns: 1fr; }
}

.foot-col{}
.foot-title{
  font-weight:700;
  font-size: clamp(16px, 1.6vw, 20px);
  margin: 0 0 10px;
  opacity: .9;
  color: #162664;
}

.foot-menu{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:10px;
}
.foot-menu li a{
  display:inline-block;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height:1.5;
  opacity:.95;
}

.foot-social li a{
  display:flex; align-items:center; gap:10px;
}

/* Bottom bar */
.foot-bottom{
  margin-top: clamp(20px, 4vw, 36px);
  border-top: 1px solid rgba(255,255,255,.2);
  padding-top: clamp(12px, 2vw, 18px);
  display:flex; justify-content:space-between; gap:16px; align-items:center;
  font-size: 14px;
  max-width: 1100px;
}
.foot-bottom .copy{color:#162664;}
@media (max-width: 700px){
  .foot-bottom{ flex-direction:column; text-align:center; }
}

/* Container utilitrio (se ainda no existir) */
.container{ width: min(1200px, 100%); margin-inline:auto; }
/* cones sociais (usa currentColor) */
.foot-social li a{
  display:flex; align-items:center; gap:10px;
  font-size: clamp(14px, 1.4vw, 16px);
}
.foot-social .social-ico{
  width: 22px; height: 22px;
  flex: 0 0 22px;
  fill: currentColor;
  opacity: .95;
}
.foot-social li a:hover .social-ico{ opacity: 1; }
.foot-social .label{ line-height:1.2; }
.index section .card {
    border-radius: 0 !important;
}
/*CATEGORY*/
.category .content-wrapper, .search .content-wrapper, .author .content-wrapper{
    padding: 0rem;
}
.category main#primary.site-main, .search main#primary.site-main, .author main#primary.site-main{
    padding: 2rem 0rem;
}

/**/
/* abaixo da dobra */
.related-articles,
.comments-area,
.sidebar,
.site-footer{
  content-visibility: auto;
  contain-intrinsic-size: 1px 800px; /* reserva mínima p/ evitar CLS */
}

@media (min-width: 768px) {
    .category .content-wrapper, .search .content-wrapper, .author .content-wrapper{
        width: 1200px;
    }
    .category main, .search main, .author main{
        margin-right: 0rem;
    }
}

/* =====Anti CLS Estilo Visual - Bloco Meta e Compartilhamento ===== */

.post-meta {
  font-size: 0.95rem;
  line-height: 1.4;
  color: #333;
  margin: 1.5rem 0;
}

.post-meta .autor-name strong,
.post-meta .post-dates strong {
  color: #111;
  font-weight: 600;
}

.post-meta .autor-name p,
.post-meta .post-dates p {
  margin: 0 0 4px;
}

/* Badge de categoria */
.rn-cat-label .badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  border-radius: 4px;
  line-height: 1.2;
}

/* Lista de botes */
.rn-share-list {
  gap: 12px;
}

.rn-share-btn {
  background: #d62828; /* cor base dos ícones */
  color: #fff;
  transition: background 0.25s ease, transform 0.2s ease;
}

.rn-share-btn:hover {
  background: #9c1e1e;
  transform: translateY(-2px);
}

.rn-share-btn svg {
  fill: #fff;
}
.rn-share-btn svg {display:block;width:22px;height:22px;flex:0 0 auto}

/* Responsividade */
@media (max-width:640px){
    .post-meta {margin: 1rem 0;font-size: 0.9rem; grid-template-columns: 50px 1fr; min-height:0 }
    .code-block .joinads{display:block}
    .code-block .joinads .placeholderAd{
      display:block;width:100%;margin:0 auto;min-height:280px /* 336x280 */
    }
  .rn-share-block {
    gap: 10px;
    flex-direction: row;
    flex-wrap: wrap;
  }
}
/*BANNERS*/
/* banner centrado e responsivo */
.custom-banner-article{
  width:100%;
  margin: 16px auto;               /* espao acima/abaixo */
  display:flex;                     /* centraliza horizontalmente */
  justify-content:center;
  align-items: center;
}

.custom-banner-article a{
  display:block;
  max-width:780px;                  /* largura máxima do criativo */
  width:100%;                       /* ocupa 100% até o limite */
}

.custom-banner-article img{
  display:block;
  width:100%;
  height:auto;                      /* mantm proporção */
  border-radius:5px;
  /* opcional: reforça a proporção mesmo sem height (fallback moderno) */
  aspect-ratio: 970 / 250;
}
.custom-banner{
  width:100%;
  margin: 16px auto;               /* espao acima/abaixo */
  display:flex;                     /* centraliza horizontalmente */
  justify-content:center;
}

.custom-banner a{
  display:block;
  max-width:780px;                  /* largura máxima do criativo */
  width:100%;                       /* ocupa 100% até o limite */
}

.custom-banner img{
  display:block;
  width:100%;
  height:auto;                      /* mantém proporção */
  border-radius:5px;
  /* opcional: refora a proporção mesmo sem height (fallback moderno) */
  aspect-ratio: 970 / 250;
}

/* opcional: em desktop, se quiser um respiro extra */
@media (min-width: 992px){
  .custom-banner{ margin: 22px auto; }
  .custom-banner-article{ margin: 22px auto; }
}
@media (min-width: 768px) {
  .sidegrid2-wrap .sidegrid4-title {display: -webkit-box;
    -webkit-line-clamp: 2;   /* mximo de 4 linhas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(1.35em * 2); /* 4 linhas baseado no line-height */
  }
}

/* ===== BREADCRUMB ===== */
.bc { margin: 10px 0 18px; }

.bc .rank-math-breadcrumbs{
  margin:0;
  padding:8px 12px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:14px;
  line-height:1.2;
  color:#475569;                    /* slate-600 */
}

.bc .rank-math-breadcrumbs a{
  color:#1d4ed8;                    /* azul */
  font-weight:600;
  text-decoration:none;
}

.bc .rank-math-breadcrumbs a:hover{
  text-decoration:underline;
}

/* Escondo o separador que o plugin imprime e crio o meu via :before */
.bc .rank-math-breadcrumbs .separator{
  display:none;
}

/* Setinha entre os itens (inclusive funciona quando vierem spans) */
.bc .rank-math-breadcrumbs > * + *::before{
  content:"";
  color:#94a3b8;                    /* slate-400 */
  margin:0 2px;
  display:inline-block;
}

/* Último item mais forte e sem link cor forte */
.bc .rank-math-breadcrumbs .last{
  color:#0f172a;                    /* slate-900 */
  font-weight:700;
}

/* Ajustes finos para telas pequenas */
@media (max-width:480px){
  .bc .rank-math-breadcrumbs{
    padding:6px 10px;
    font-size:13px;
    gap:6px;
  }
}

/* MOBILE-FIRST: empilha na ordem da DOM (hero 1º) */
.fold10-grid {
  display: grid;
  gap: 24px;
}

/* Desktop: volta para 3 colunas com o hero no meio */
@media (min-width: 1024px) {
  .fold10-grid {
    grid-template-columns: 1fr 1.4fr 0.9fr; /* esq - centro (maior) - dir */
    align-items: start;
  }
  .col-left   { grid-column: 1; }
  .col-center { grid-column: 2; }
  .col-right  { grid-column: 3; }
}

/* Evitar CLS: mini “container estvel pro thumb */
.thumb.ratio-16x9 { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; height: auto; display: block; }

/* Se tiver overlay, deixa pointer-events s nos links */
.card.hero .overlay { pointer-events: none; }
.card.hero .overlay a { pointer-events: auto; }
/* Evita que cards laterais rendereizem antes de entrarem na tela (mobile) */
@media (max-width: 767px){
  .cv-defer{
    content-visibility: auto;
    /* Reserva de tamanho para evitar CLS (16:9 ~ 202 x 360 é um bom chute para os seus cards) */
    contain-intrinsic-size: 202px 360px;
  }
  /* Garante proporão correta das thumbs */
  .cv-defer .ratio-16x9{
    aspect-ratio: 16/9;
    height: auto;
  }
}
/*CITAÃO*/
.wp-block-quote {
    background: #f7f7f7;
    padding: 10px;
    overflow-wrap: break-word;
    border-left: .25em solid;
    margin: 0 0 1.75em;
    padding-left: 1em;
}
.instagram-media { margin: 16px auto !important; max-width: 540px; }

/* ======== PRIMEIRA DOBRA (fold10) ======== */
.fold10-grid{
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(0,1fr) minmax(0,1fr); /* HERO maior  esquerda */
  gap: 32px;
  align-items: start;
}

/* Mapeia cada coluna explicitamente (evita reorder acidental) */
.fold10-grid .col-center{ grid-column:1; }
.fold10-grid .col-left  { grid-column:2; }
.fold10-grid .col-right { grid-column:3; }

/* Tablet: HERO na primeira linha; abaixo, duas colunas com left/right */
@media (max-width: 1024px){
  .fold10-grid{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    grid-auto-rows: auto;
    row-gap: 28px;
  }
  .fold10-grid .col-center{ grid-column: 1 / -1; } /* ocupa 2 colunas */
  .fold10-grid .col-left  { grid-column: 1; }
  .fold10-grid .col-right { grid-column: 2; }
}

/* Mobile: uma coluna na ordem do HTML (HERO -> left -> right) */
@media (max-width: 768px){
  .fold10-grid{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .fold10-grid .col-center,
  .fold10-grid .col-left,
  .fold10-grid .col-right{ grid-column: 1; }
}
@media (min-width:1024px){
  .col-center .hero-sub { margin-top: 60px; }
}
/**/
/* ===== TÍTULOS DE SEÇÃO DA RECEITA (ex.: Para o creme) ===== */
.rn-recipe-subheading {
    position: relative;
    margin: 28px 0 12px;
    padding-left: 14px;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
    color: #1f2933; /* cinza escuro elegante */
}

/* Barra lateral laranja (identidade RNEWS Sabores) */
.rn-recipe-subheading::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 4px;
    height: 100%;
    background: #ff7a1a;
    border-radius: 2px;
}

/* Ajuste fino quando o título vem logo no início */
.rn-recipe-subheading:first-child {
    margin-top: 0;
}

/* ===== LISTAS DE INGREDIENTES ===== */
.rn-recipe-ingredients-list {
    margin: 0 0 18px;
    padding-left: 20px;
}

.rn-recipe-ingredients-list li {
    margin: 6px 0;
    line-height: 1.5;
}

/* ===== LISTAS DE PASSOS ===== */
.rn-recipe-steps {
    margin: 0 0 18px;
    padding-left: 22px;
}

.rn-recipe-steps li {
    margin: 8px 0;
    line-height: 1.55;
}


.recipes-index h2{
    color: #ffffff;
}
.recipes-index .wp-post-image{
    border-radius: 0 0 6px 6px;
}
/*ALTERAÇO LAYOUT PG RECEITA*/
/* ===== Abas de Receita (Resumo / Ingredientes / Preparo) ===== */
.rn-recipe-tabs{
  position: sticky;
  top: 0px;                 /* ajuste p/ seu header */
  z-index: 20;
  background: #fff;
  border-bottom: 1px solid #eee;
  margin: 12px 0 16px;
}
.rn-recipe-tabs__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 5px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.rtab{
  display:inline-block;
  padding: 10px 14px;
  border-radius: 20px;
  background: #f3f4f6;
  color:#5b5f6a;
  text-decoration: none;
  font-weight: 600;
  transition: background .2s ease, color .2s ease;
}
.rtab:hover{ background:#e8e9ee; color:#111; }
.rtab.is-active{
  background: #7c2d9c;          /* roxo semelhante do seu print */
  color: #fff;
}

/* Mobile: ocupa toda a largura e permite quebra */
@media (max-width: 768px){
  .rn-recipe-tabs{ top: 0px; }
  .rn-recipe-tabs__inner{ flex-wrap: wrap; gap: 8px; }
  .rtab{ padding: 9px 9px; }
}
/* ====== Single de Receita ====== */
.recipe-hero { margin: 12px 0 24px; }
.recipe-hero-img { width: 100%; height: auto; border-radius: 14px; display: block; }

.rn-recipe-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin: 8px 0 24px;
}
.rn-recipe-summary .card {
  background: #f5f6f7;
  border-radius: 9px;
  padding: 9px 20px;
}
.rn-recipe-summary .card span {
  display:block; color:#8a8f98; font-size:.95rem; margin-bottom:6px;
}
.rn-recipe-summary .card strong {
  font-size: 1.2rem; font-weight: 700; color:#16181d;
}

.rn-recipe-keywords { margin: 18px 0 6px; display:flex; flex-wrap:wrap; gap:10px; }
.rn-recipe-keywords .chip {
  background:#e9eaed; color:#333; padding:8px 14px; border-radius:10px;
  font-size:.92rem; line-height:1; display:inline-block;
}
/*INFORMAÇÕES ADICIONAIS RECEITAS*/
/* Bloco "Informações adicionais" da receita */
.rn-recipe-extra-info {
    margin: 24px 0 32px;
}

.rn-recipe-extra-info__inner {
    display: flex;
    align-items: stretch;
    background: #f7f7f7;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}

/* Faixa laranja lateral */
.rn-recipe-extra-info__icon {
    background: #ff7a2a;
    padding: 24px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Círculo branco com ícone */
.rn-recipe-extra-info__bulb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #fff;
    font-size: 26px;
}

/* Conteúdo de texto */
.rn-recipe-extra-info__content {
    padding: 20px 24px 22px;
    flex: 1;
}

.rn-recipe-extra-info__title {
    margin: 0 0 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ff7a2a; /* mesma cor do destaque de receitas */
}

.rn-recipe-extra-info__text p {
    margin: 0 0 10px;
    line-height: 1.6;
}

.rn-recipe-extra-info__text p:last-child {
    margin-bottom: 0;
}

/* Mobile: empilha melhor */
@media (max-width: 768px) {
    .rn-recipe-extra-info__inner {
        border-radius: 14px;
    }

    .rn-recipe-extra-info__icon {
        padding: 16px 10px;
    }

    .rn-recipe-extra-info__bulb {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .rn-recipe-extra-info__content {
        padding: 16px 16px 18px;
    }
}
/*COMENTÁRIOS RECEITA*/
/* Wrapper geral */
.rn-recipe-reviews-wrapper {
    background: #fff7ef;
    border-radius: 16px;
    padding: 24px 24px 28px;
    margin-top: 32px;
}

/* Títulos */
.rn-recipe-review-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 4px;
    text-align: center;
    color: #8b4513;
}

.rn-recipe-review-subtitle {
    text-align: center;
    margin: 0 0 24px;
    color: #b4713c;
}

/* Layout do formulário */
.rn-recipe-review-form {
    background: #fdeede;
    border-radius: 14px;
    padding: 20px 20px 24px;
    margin-bottom: 28px;
}

.rn-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.rn-form-block {
    flex: 1 1 100%;
}

.rn-form-label-big {
    font-weight: 700;
    text-transform: lowercase;
    color: #a0522d;
    margin-bottom: 8px;
}

/* Campos nome/email lado a lado em telas grandes */
.rn-form-field {
    margin-bottom: 12px;
}

.rn-field-half {
    width: 100%;
}

@media (min-width: 640px) {
    .rn-field-half {
        width: calc(50% - 8px);
        display: inline-block;
    }
}

.rn-form-field label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 4px;
    color: #7a4a24;
}

.rn-form-field input,
.rn-form-block textarea {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #f0d3b8;
    padding: 10px 12px;
    font-size: 0.95rem;
    box-sizing: border-box;
}

.rn-form-block textarea {
    min-height: 120px;
    resize: vertical;
}

/* Estrelas (rating) */
.rn-rating-stars-group {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.rn-rating-stars-group input[type="radio"] {
    display: none;
}

.rn-rating-stars-group label {
    font-size: 1.6rem;
    cursor: pointer;
    color: #e6d2bf;
    transition: transform 0.15s ease, color 0.15s ease;
}

.rn-rating-stars-group label:hover,
.rn-rating-stars-group label:hover ~ label {
    color: #ff9b5a;
    transform: scale(1.05);
}

/* Quando selecionado */
.rn-rating-stars-group input[type="radio"]:checked ~ label {
    color: #ff7a30;
}

/* Ajuda */
.rn-help-text {
    font-size: 0.8rem;
    color: #8c6b4a;
    margin-top: 6px;
}

/* Botões */
.rn-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 12px;
}

.rn-btn {
    border-radius: 999px;
    padding: 8px 22px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.95rem;
}

.rn-btn-primary {
    background: #ff4e33;
    color: #fff;
}

.rn-btn-secondary {
    background: #ff9b8a;
    color: #fff;
}

/* Lista de avaliaões */
.rn-recipe-review-list-section {
    margin-top: 8px;
}

.rn-recipe-review-list-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 12px;
    color: #8b4513;
}

.rn-recipe-review-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rn-recipe-review-item {
    margin-bottom: 16px;
}

.rn-recipe-review-card {
    background: #fffdf8;
    border-radius: 14px;
    padding: 14px 16px;
    border: 1px solid #f3e0cf;
}

.rn-recipe-review-header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
}

.rn-recipe-review-avatar img {
    border-radius: 50%;
}

.rn-recipe-review-author {
    display: block;
    font-weight: 700;
    color: #80401f;
}

.rn-recipe-review-stars .star {
    font-size: 1rem;
    color: #e2d2c3;
}

.rn-recipe-review-stars .star.filled {
    color: #ff9b5a;
}

.rn-recipe-review-date {
    font-size: 0.8rem;
    color: #9b7c5c;
}

.rn-recipe-review-content {
    font-size: 0.95rem;
    color: #62422a;
    margin-top: 4px;
}
/*RECEITAS HOME*/
/* ====== Bloco "Receitas relacionadas para você" ====== */

.rn-recipes-related {
    background-color: #f8f8f8;
    margin: 0 auto;
}

.rn-recipes-related__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.rn-recipes-related__title {
    text-align: center;
    font-size: 1.6rem;
    font-weight: 700;
    color: #e53935;
    margin: 0 0 2rem;
}

/* GRID RESPONSIVO – 2 colunas no mobile, 4 no desktop */

.rn-recipes-related__grid {
    display: grid;
    gap: 1.2rem;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 colunas por padrão */
}

/* Telas MUITO estreitas (tipo 320px) – cai pra 1 coluna pra no apertar demais */
@media (max-width: 360px) {
    .rn-recipes-related__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Desktop: 4 colunas, estilo vitrine */
@media (min-width: 1024px) {
    .rn-recipes-related__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


/* ====== CARTÃO GOURMET PRO ====== */

.rn-recipe-card--gourmet {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3/4;          /* formato card de receita */
    border-radius: 24px;
    overflow: hidden;
    background-color: #ccc;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.30);
    transform: translateY(0);
    transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
}

.rn-recipe-card--gourmet:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35);
}

.rn-recipe-card__link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Imagem de fundo */

.rn-recipe-card__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.03);
    transition: transform 0.4s ease-out;
}

@media (hover: hover) {
    .rn-recipe-card--gourmet:hover .rn-recipe-card__bg {
        transform: scale(1.08);
    }
}

/* Overlay com degrad */

.rn-recipe-card__overlay {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 1.2rem 1.3rem 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    font-family: inherit;
}

.rn-recipe-card__overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.25) 42%,
        rgba(0, 0, 0, 0.80) 100%
    );
    z-index: -1;
}

/* Badge de categoria no topo */

.rn-recipe-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(4px);
    margin-bottom: 0.7rem;
}

/* Título */

.rn-recipe-card__title {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.35;
    font-weight: 700;
}

/* Rodapé – infos + CTA */

.rn-recipe-card__footer {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.86rem;
}

.rn-recipe-card__infos {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.rn-recipe-card__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

/* CTA */

.rn-recipe-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    font-size: 0.82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(3px);
}

@media (hover: hover) {
    .rn-recipe-card--gourmet:hover .rn-recipe-card__cta {
        background: #ff7043;
        border-color: #ff7043;
    }
}

/* ===== ÍCONES (relógio + porções) desenhados em CSS ===== */

.rn-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #fff;
    position: relative;
}

/* Relgio */

.rn-icon--clock::before,
.rn-icon--clock::after {
    content: "";
    position: absolute;
    background-color: #fff;
    border-radius: 2px;
    left: 50%;
    top: 50%;
    transform-origin: center bottom;
}

.rn-icon--clock::before {
    width: 2px;
    height: 6px;
    transform: translate(-50%, -80%);
}

.rn-icon--clock::after {
    width: 2px;
    height: 4px;
    transform: translate(-5%, -70%) rotate(90deg);
}

/* Talheres (porões) */

.rn-icon--servings::before,
.rn-icon--servings::after {
    content: "";
    position: absolute;
    background-color: #fff;
    border-radius: 2px;
    top: 3px;
}

.rn-icon--servings::before {
    left: 4px;
    width: 2px;
    height: 11px;
}

.rn-icon--servings::after {
    right: 4px;
    width: 2px;
    height: 11px;
}

/* Mobile tweaks */

@media (max-width: 480px) {
    .rn-recipes-related {
        padding: 2rem 0 2.4rem;
    }

    .rn-recipes-related__title {
        font-size: 1.3rem;
        margin-bottom: 1.6rem;
    }

    .rn-recipe-card--gourmet {
        aspect-ratio: 4/5;
    }
}
/* CORREÇÃO DO EFEITO DE BORDA QUADRADA */

.rn-recipe-card--gourmet,
.rn-recipe-card--gourmet * {
    border-radius: inherit !important;
}

/* Garante que o clip da borda arredondada nunca perca o arredondamento */
.rn-recipe-card--gourmet {
    overflow: hidden !important;
    will-change: transform;
}

/* A imagem ampliada continua seguindo o arredondamento sem “piscar” */
.rn-recipe-card__bg {
    border-radius: inherit !important;
    will-change: transform;
    transform-origin: center center;
}
/* ===== MINI-RÓTULO "NOVA" ===== */

.rn-recipe-card__label-new {
    position: absolute;
    top: 0.85rem;
    right: 0.9rem;
    z-index: 2;
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #fff;
    background: linear-gradient(135deg, #ff7043, #ff9800);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}

/* leve pulso bem discreto no desktop */
@media (hover: hover) {
    .rn-recipe-card__label-new {
        animation: rn-badge-pulse 2.8s infinite ease-in-out;
    }
}

@keyframes rn-badge-pulse {
    0% { transform: scale(1); opacity: 1; }
    60% { transform: scale(1.06); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}
/* ===== Section Heading Premium ===== */

.rn-section-heading {
    text-align: center;
    margin: 0 auto;
    margin-bottom: 15px;
}

.rn-section-heading__title {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    margin: 0.7rem 0 0.4rem;
    color: #d93025;
}

.rn-section-heading__subtitle {
    font-size: 1rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #d93025;
    margin-top: 0.5rem;
    opacity: 0.85;
}

/* Linhas Laterais */

.rn-section-heading__line {
    height: 2px;
    background: #fcc700;
    width: 30%;
    display: inline-block;
    vertical-align: middle;
    margin: 0 1rem;
}

/* Mobile Ajuste */
@media (max-width: 600px) {
    .rn-section-heading__line {
        width: 15%;
        margin: 0 0.5rem;
    }

    .rn-section-heading__title {
        font-size: 1.45rem;
    }

    .rn-section-heading__subtitle {
        font-size: 0.82rem;
    }
}
/*BANNER ENVIE RECEITA*/
/* === Banner Concurso Rnews Sabores – Gourmet Premium === */

.rn-banner-concurso {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #fdd835;
    border-radius: 15px;
    overflow: hidden;
    margin: 1rem 23px;
    max-width: 1200px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.15);
}

/* Lado esquerdo: texto + textura */
.rn-banner-concurso__left {
    position: relative;
    padding: 3rem 2.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rn-banner-concurso__left a{
    color: #fff;
    font-weight: bold;
}
/* Textura suave atrs do texto (só com CSS, sem imagem extra) */
.rn-banner-concurso__left::before {
    content: "";
    position: absolute;
    inset: -10%;
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 255, 255, 0.25), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(255, 152, 0, 0.35), transparent 55%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.12), transparent 60%);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.rn-banner-concurso__title,
.rn-banner-concurso__text,
.rn-banner-concurso__btn {
    position: relative;
    z-index: 1; /* fica acima da textura */
}

/* Título + ícone de troféu */
.rn-banner-concurso__title {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 1rem;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Subtítulo */
.rn-banner-concurso__text {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 1.8rem;
    color: #fffbe6;
}

/* Botão com brilho sutil */
.rn-banner-concurso__btn {
    display: inline-block;
    background: #ff3d00;
    color: #fff;
    padding: 0.9rem 2.2rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
    transition:
        background 0.28s ease,
        transform 0.2s ease,
        box-shadow 0.28s ease,
        border-color 0.28s ease;
}

/* “Sheen” de brilho passando no hover (brilho sutil) */
.rn-banner-concurso__btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent
    );
    opacity: 0;
    transform: skewX(-25deg);
    pointer-events: none;
    transition:
        opacity 0.35s ease,
        transform 0.35s ease;
}

.rn-banner-concurso__btn:hover {
    background: #ff5722;
    border-color: rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
}

/* Lado direito: imagem */
.rn-banner-concurso__right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* MOBILE RESPONSIVO */
@media (max-width: 768px) {
    .rn-banner-concurso {
        grid-template-columns: 1fr;
    }

    .rn-banner-concurso__right {
        order: -1;
        height: 220px;
    }

    .rn-banner-concurso__left {
        padding: 2rem 1.5rem 2.4rem;
        text-align: center;
    }

    .rn-banner-concurso__title {
        font-size: 1.7rem;
        align-items: center;
    }

    .rn-banner-concurso__icon {
        justify-content: center;
    }
}


/* MOBILE RESPONSIVO */
@media (max-width: 768px) {
    .rn-banner-concurso {
        grid-template-columns: 1fr;
    }

    .rn-banner-concurso__right {
        order: -1;
        height: 220px;
    }

    .rn-banner-concurso__left {
        padding: 2rem 1.5rem;
        text-align: center;
    }

    .rn-banner-concurso__title {
        font-size: 1.7rem;
    }
}


/* responsivo */
@media (max-width: 900px){
  .rn-recipe-summary { grid-template-columns: 1fr; }
}
/*CHAMADA GRUPO WHATSAPP*/
/* ================= GROUP SECTION (CLS-SAFE) ================= */
:root{
  --eco-green:#156f27;        /* ttulos / links verdes */
  --eco-green-deep:#0b5a1e;   /* variaço mais escura */
  --eco-emph:#f07f1a;         /* laranja  */
  --eco-cream:#f5e9d3;        /* fundo do card */
  --eco-cream-edge:#e8dac0;   /* borda sutil do card */
  --eco-cta:#ee7d1a;          /* laranja CTA  */
  --eco-text:#1b1f24;
  --eco-radius:20px;
  --eco-radius-lg:26px;
  --eco-max:1180px;           /* largura máxima do conteúdo */
}

/* container principal */
.group-section{
  margin: clamp(16px, 2.2vw, 28px) auto;
  padding-inline: clamp(12px, 2.2vw, 24px);
  max-width: calc(var(--eco-max) + 2*24px);
  color: var(--eco-text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Card bege” com cantos arredondados */
.group-card{
  background: var(--eco-cream);
  border: 1px solid var(--eco-cream-edge);
  border-radius: var(--eco-radius-lg);
  padding: clamp(18px, 3vw, 32px);
  /* espaço previsvel -> sem CLS */
  min-height: 260px;
  box-shadow: 0 0 0 0 rgba(0,0,0,0); /* sem sombras pesadas */
}

/* Icons no topo esquerdo (desktop) ou topo (mobile) */
.group-icons{
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 clamp(10px, 1.4vw, 14px) 0;
  padding: 0;
}
.group-icons .ico{
  width: clamp(28px, 3vw, 36px);
  aspect-ratio: 1 / 1; /* reserva tam. -> CLS zero */
  border-radius: 6px;
  background: #0d5a1e;
  position: relative;
}
.group-icons .ico::after{
  content:"";
  position:absolute; inset: 22% 22%;
  border:2px solid #fff; border-radius:2px;
}
.group-icons .ico-recycle::after{
  inset: 26% 26%;
  border: none;
  background:
    conic-gradient(from 0.25turn at 50% 50%, #fff 0 25%, #0000 0) 50% 20%/56% 56% no-repeat,
    conic-gradient(from 0.59turn at 50% 50%, #fff 0 25%, #0000 0) 18% 58%/56% 56% no-repeat,
    conic-gradient(from -0.08turn at 50% 50%, #fff 0 25%, #0000 0) 82% 58%/56% 56% no-repeat;
}
.group-icons .ico-smile::after{
  inset:auto;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:70%; height:70%;
  border:none;
  background:
    radial-gradient(circle at 35% 35%, #fff 10%, #0000 11%),
    radial-gradient(circle at 65% 35%, #fff 10%, #0000 11%),
    radial-gradient(50% 40% at 50% 70%, #fff 0 60%, #0000 61%);
}
.group-icons .ico-bin::after{
  border:2px solid #fff;
  border-bottom-left-radius: 2px; border-bottom-right-radius: 2px;
  width:56%; height:60%; left:22%; top:20%;
}

/* Grid responsivo: título x texto */
.group-grid{
  display:grid;
  gap: clamp(14px, 2.8vw, 28px);
  align-items: start;
}
@media (max-width: 880px){
  .group-grid{ grid-template-columns: 1fr; }
  .group-title {text-align: center;}
}

/* Ttulo grande com nfase laranja */
.group-title{
  color: var(--eco-green);
  font-weight: 800;
  letter-spacing: .2px;
  line-height: 1.05;
  margin: 0;
  font-size: clamp(24px, 3vw, 30px);
}
.group-title .group-emph{
  color: var(--eco-emph);
  white-space: nowrap;
}

/* Coluna de texto */
.group-text{
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
}
.group-text p{ margin: 0 0 .85em 0; }
.group-text .group-green{ color: var(--eco-green); font-weight: 700; text-align: center;}

/* ================= CTA LARANJA ================= */
.group-cta{
  margin-top: clamp(14px, 2.6vw, 24px);
  background: var(--eco-cta);
  border-radius: var(--eco-radius-lg);
  position: relative;
  overflow: clip;
}

/* Elemento interno em grid: ícone | texto | botão */
.group-cta-inner{
  max-width: var(--eco-max);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 24px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(10px, 2vw, 20px);
  align-items: center;
  min-height: 96px; /* reserva tamanho estvel -> CLS zero */
}
/* texto CTA */
.group-cta-copy{
  color: #fff;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.4;
}
.group-cta-copy p{ margin: 0; }

/* boto CTA */
.group-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 18px;
  background:#fff;
  color: var(--eco-text);
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  min-width: 160px;      /* largura estvel -> CLS zero */
  min-height: 44px;      /* altura estvel -> CLS zero */
  box-shadow: 0 6px 0 rgba(0,0,0,.15);
}
.group-btn:active{ transform: translateY(1px); box-shadow: 0 5px 0 rgba(0,0,0,.15); }

/* Mobile: empilha e centraliza botão */
@media (max-width: 740px){
  .group-cta-inner{
    grid-template-columns: 1fr;
    text-align: center;
    min-height: 220px; /* reserva mais alto no mobile */
  }
  .group-btn{
    margin-inline:auto;
  }
}

/* Acessibilidade: elemento "s para leitores de tela" */
.sr-only{
  position:absolute !important;
  width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
/*SINGLE.PHP IMAGEM DESTAQUE*/
.rn-featured-figure {
  margin: 0;
  padding: 0;
}
.rn-featured-figure .rn-featured-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;   /* reserva o espao e derruba o CLS */
  object-fit: cover;
}
/*PAGE*/
/* Thumb da página (mesma lógica da single) */
.page-thumb { position: relative; width: 100%; overflow: hidden; margin: 12px 0 0; }
.page-thumb.ratio-16x9::before { content:""; display:block; padding-top:56.25%; }
.page-thumb > .thumb { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* Ttulo e container */
.post-title { margin: 16px auto 8px; padding: 0 16px; font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.4rem); line-height: 1.2; }
.entry-content.container {margin: 20px auto 32px; }

/* Share block: esconder a coluna esquerda em PÁGINAS, sem quebrar layout */
.rn-share-left--is-page { width: 0; min-width: 0; display: none; }

/* Paginao interna (<!--nextpage-->) */
.page-pagination { display:flex; gap:8px; margin-top:24px; }
.page-pagination span { padding:6px 10px; border:1px solid #e5e7eb; border-radius:6px; }

/* CLS guard para bloco meta (se ainda não tiver) */
.post-meta { min-height: 64px; }
.post-meta .img-autor { width:50px; height:50px; }
.post-meta .img-autor img { width:50px; height:50px; display:block; }

/*RESUMO*/
.wp-block-rank-math-toc-block{
    background: #F4F4F4;
    margin: 0 0 20px 0;
    padding: 20px;
    border-radius: 8px;
}
.wp-block-rank-math-toc-block h2{
    font-size: 1rem;
}
/* TOC clean e minimalista */
#rank-math-toc {
    border: 1px solid #e6e6e6;
    background: #fafafa;
    padding: 18px 22px;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.45;
}

/* Título do TOC */
#rank-math-toc .rank-math-toc-title {
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 18px;
}

/* Remove bolinhas/nmeros e alinhamento */
#rank-math-toc ul,
#rank-math-toc ol {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Remove marcadores */
#rank-math-toc li::marker {
    content: "" !important;
}

/* Cada item */
#rank-math-toc li {
    margin: 6px 0;
    padding: 0;
}

/* Estilo dos links */
#rank-math-toc a {
    color: #222;
    text-decoration: none;
    transition: 0.15s;
}

/* Hover discreto e elegante */
#rank-math-toc a:hover {
    color: #0072ff;
    text-decoration: underline;
}
/*MENU MOBILE*/
/* ================================
   MENU MOBILE  OFF CANVAS RNEWS
   ================================ */

.drawer {
  position: fixed;
  inset: 0;                 /* top/right/bottom/left: 0 */
  z-index: 9999;
  pointer-events: none;     /* desativa cliques quando fechado */
}

/* Overlay do fundo (parte escura que deixa ver o site atrás) */
.drawer__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: default;
}

/* remove o max-width da .container dentro do drawer */
.drawer .container {
  max-width: none;
  padding: 0;
}

/* Quando o checkbox do menu está ativado */
.nav-toggle:checked ~ .drawer {
  pointer-events: auto;
}

.nav-toggle:checked ~ .drawer .drawer__overlay {
  opacity: 1;
  cursor: pointer; /* mãozinha para indicar que pode clicar e fechar */
}

.nav-toggle:checked ~ .drawer .drawer__inner {
  transform: translateX(0);
}

/* Estilo dos links do menu mobile */
.drawer .menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer .menu > li {
  border-bottom: 1px solid #f0f0f0;
  padding: 0px 0 0 15px;
}

.drawer .menu a {
  display: block;
  padding: 0.75rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: #111111;
  text-decoration: none;
}

.drawer .menu a:hover,
.drawer .menu a:focus {
  color: #367ff1;
}

/* Submenus (se usar depth 2) */
.drawer .menu .sub-menu {
  padding-left: 0.75rem;
  border-left: 2px solid #e5e5e5;
}
.drawer__inner {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 80vw;
  max-width: 320px;
  background: #ffffff;
  box-shadow: 2px 0 15px rgba(0,0,0,0.25);
  transform: translateX(-100%);
  transition: transform 0.25s ease-out;
  /* importante: deixa enxergar o que ultrapassa a borda */
  overflow-y: auto;
  overflow-x: visible !important;
  padding: 1.5rem 1.25rem;
}
/* S aplica esse estilo em telas menores (mobile) */
@media (min-width: 992px) {
  .drawer {
    position: static;
    inset: auto;
    pointer-events: auto;
  }

  .drawer__overlay {
    display: none;
  }

  .drawer__inner {
    position: static;
    height: auto;
    width: auto;
    max-width: none;
    transform: none;
    box-shadow: none;
    overflow: visible;
    padding: 0;
  }
}