/*
Theme Name: Astra Child Institucional
Theme URI: https://example.com/
Description: Tema filho do Astra com layout institucional.
Author: TI
Version: 1.0.0
Template: astra
Text Domain: astra-child-institucional
*/

:root{
  --ac-primary:#0F4593;
  --ac-bg:#F4F6F9;
  --ac-card:#FFFFFF;
  --ac-am:#EDB163;
  --ac-text:#1B2430;
  --ac-muted:#5B6776;
  --ac-border:#E3E8EF;
  --ac-radius:14px;
}

body{ color:var(--ac-text); }

.ac-wrap{
  max-width:1200px;
  margin:0 auto;
  padding:0 16px;
}

/* HERO full width (serve pro single e pro archive) */
.ac-hero{
  background:var(--ac-bg);
  border:1px solid var(--ac-border);
  border-radius:var(--ac-radius);
  padding:20px;
  margin:16px 0 18px;
}
.ac-hero-title{
  margin:0 0 10px;
  font-size:65px;
  line-height:1.12;
  letter-spacing:-0.02em;
}

}
.ac-hero-lead{
  margin:0 0 12px;
  font-size:16px;
  line-height:1.7;
  color:var(--ac-muted);
}
.ac-hero-meta{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  color:var(--ac-muted);
  font-size:13px;
}
.ac-meta{ color:var(--ac-muted); font-size:13px; }
.ac-meta-sep{ opacity:.6; }
.ac-meta-cat{ font-weight:600; }

/* Layout conteúdo + sidebar */
.ac-layout{
  display:grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap:24px;
  align-items:start;
}
@media (max-width:920px){
  .ac-layout{ grid-template-columns:1fr; }
  .ac-main{ order:1; }
  .ac-sidebar{ order:2; position:static; }
}

/* Featured no topo do corpo (single) */
.ac-featured{ margin:0 0 18px; }
.ac-featured-img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--ac-radius);
}

/* BLOG/ARQUIVOS - 1 coluna de notícias */
.ac-news-list{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.ac-news-item{
  background:var(--ac-card);
  border:1px solid var(--ac-border);
  border-radius:var(--ac-radius);
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.ac-news-link{
  display:block;
  color:inherit;
  text-decoration:none !important;
}

/* Imagem padronizada */
.ac-news-media{
  width:100%;
  aspect-ratio:16/9;
  background:#E9EEF6;
  overflow:hidden;
}
.ac-news-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.ac-news-img--placeholder{
  width:100%;
  height:100%;
  background:linear-gradient(135deg, rgba(15,69,147,.10), rgba(15,69,147,.02));
}

/* Texto do card */
.ac-news-body{
  padding:16px 16px 16px;
}
.ac-news-title{
  margin:0 0 8px;
  font-size:24px;
  line-height:1.2;
  letter-spacing:-0.01em;
}
.ac-news-lead{
  margin:0 0 12px;
  font-size:15px;
  line-height:1.6;
  color:var(--ac-muted);
}
.ac-news-meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:12px;
}
.ac-chip{
  background:rgba(15,69,147,.12);
  color:#0B3775;
  border:1px solid rgba(15,69,147,.20);
  padding:6px 10px;
  border-radius:999px;
  font-weight:600;
  font-size:12px;
}
.ac-news-cta{
  font-weight:600;
  color:var(--ac-primary);
}

/* Paginação */
.ac-pagination{ margin:20px 0 10px; }
.ac-pagination .page-numbers{
  border-radius:10px;
  border:1px solid var(--ac-border);
  background:var(--ac-bg);
  color:var(--ac-primary);
  padding:10px 12px;
}

.ac-pagination .page-numbers:hover{
  color:var(--ac-am);
}
.ac-pagination .current{
  background:var(--ac-primary);
  color:#fff;
  border-color:var(--ac-primary);
}

/* Sidebar */
.ac-sidebar{
  position:sticky;
  top:20px;
}
.ac-widget{
  background:var(--ac-card);
  border:1px solid var(--ac-border);
  border-radius:var(--ac-radius);
  padding:14px;
  margin-bottom:14px;
}
.ac-widget-title{
  margin:0 0 10px;
  font-size:24px;
}
.ac-ulist,
.ac-olist{
  margin:0;
  padding-left:18px;
}
.ac-ulist li,
.ac-olist li{
  margin:8px 0;
}
.ac-ulist a,
.ac-olist a{
  color:var(--ac-text);
  text-decoration:none;
}
.ac-ulist a:hover,
.ac-olist a:hover{
  text-decoration:underline;
}
.ac-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ac-tag{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--ac-border);
  background:var(--ac-bg);
  color:var(--ac-text);
  text-decoration:none;
  font-size:13px;
}
.ac-muted{ color:var(--ac-muted); margin:0; }

/* Leitura do conteúdo */
.single .entry-content{
  font-size:18px;
  line-height:1.8;
}
.single .entry-content p{ margin-bottom:1.1em; }

/* Limpeza de metas que sobram */
.single-post .entry-meta,
.single-post .entry-meta *{
  display:none !important;
}
/* SINGLE: imagem destacada padronizada (16:9) na coluna do conteúdo */
.ac-layout--single .ac-main .ac-featured{
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--ac-radius);
  background: #E9EEF6;
  margin: 0 0 18px;
}

.ac-layout--single .ac-main .ac-featured-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   PATCH MOBILE – arrumar layout geral
========================= */

/* 1) Escala de título MAIS suave (sem salto 80px -> 28px) */
.ac-hero-title{
  font-size: 54px;  /* desktop mais controlado */
  line-height: 1.06;
}

@media (max-width: 1200px){
  .ac-hero-title{ font-size: 44px; }
}
@media (max-width: 920px){
  .ac-hero-title{ font-size: 32px; }
}
@media (max-width: 620px){
  .ac-hero-title{
    font-size: 24px;   /* mobile legível e ainda grande */
    line-height: 1.12;
    letter-spacing: -0.01em;
  }
  .single .entry-content > p{
    font-size: 14px;
  }
}

/* 2) Mobile: evitar “padding duplo” e deixar tudo alinhado */
@media (max-width: 620px){
  .ac-wrap{
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Astra às vezes adiciona padding no container interno */
  .ast-container,
  .site-content .ast-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Hero e cards com respiro correto */
  .ac-hero{
    padding: 16px;
    margin: 10px 0 14px;
  }
}

/* 3) Layout: grid vira 1 coluna sem “efeito estranho” */
@media (max-width: 920px){
  .ac-layout{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* garante ordem correta */
  .ac-main{ order: 1; }
  .ac-sidebar{ order: 2; }
}

/* 4) Cards no mobile: aumentar padding e evitar texto colado */
@media (max-width: 620px){
  .ac-news-body{
    padding: 18px 16px 18px;
  }

  .ac-news-title{
    font-size: 22px;
    line-height: 1.18;
    margin-bottom: 10px;
  }

  .ac-news-lead{
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 14px;
  }

  .ac-news-meta{
    margin-bottom: 0;
  }
}

/* 5) Featured do single: garantir 16:9 SEM esticar fora do mobile */
@media (max-width: 620px){
  .ac-layout--single .ac-main .ac-featured{
    aspect-ratio: 16/9;
    margin-bottom: 14px;
  }
}

/* 6) Sidebar no mobile: tirar sticky e ajustar espaçamento */
@media (max-width: 920px){
  .ac-sidebar{
    position: static;
    top: auto;
  }
}
@media (max-width: 620px){
  .ac-widget{
    padding: 16px;
  }
  .ac-widget-title{
    font-size: 20px;
    font-weight: 700;
  }
}

/* ===== FIX: imagens gigantes no mobile ===== */

/* 1) Garante que NENHUMA imagem estoure o container */
.ac-news-img,
.ac-featured-img,
.ac-related-img,
img {
  max-width: 100% !important;
  height: auto;
}

/* 2) BLOG/CARDS: quem manda é o wrapper 16:9 */
.ac-news-media{
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}

/* força a imagem a obedecer o wrapper (não “auto”) */
.ac-news-media > img.ac-news-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 3) SINGLE: mesma lógica (wrapper manda) */
.ac-layout--single .ac-main .ac-featured{
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: var(--ac-radius);
  background: #E9EEF6;
}

/* força a imagem a obedecer o wrapper */
.ac-layout--single .ac-main .ac-featured > img.ac-featured-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.ac-news-media img,
.ac-featured img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.ac-related{
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ac-border);
}
.ac-related-title{
  margin: 0 0 14px;
  font-size: 22px;
  letter-spacing: -0.01em;
}
.ac-related-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 920px){
  .ac-related-grid{ grid-template-columns: 1fr; }
}
.ac-related-card{
  background: var(--ac-card);
  border: 1px solid var(--ac-border);
  border-radius: var(--ac-radius);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}
.ac-related-link{
  display: block;
  color: inherit;
  text-decoration: none !important;
}
.ac-related-media{
  width: 100%;
  aspect-ratio: 16/9;
  background: #E9EEF6;
  overflow: hidden;
}
.ac-related-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ac-related-img--placeholder{
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(15,69,147,.10), rgba(15,69,147,.02));
}
.ac-related-body{ padding: 12px 12px 14px; }
.ac-related-meta{
  font-size: 12px;
  color: var(--ac-muted);
  margin-bottom: 6px;
}
.ac-related-name{
  color:var(--ac-primary);
  font-size: 16px;
  line-height: 1.25;
  font-weight: 600;
}
/* =========================
   MAIS LIDAS (com miniatura)
========================= */

.ac-popular-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.ac-popular-item{
  margin-bottom: 12px;
}

.ac-popular-link{
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.ac-popular-thumb{
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #E9EEF6;
}

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

.ac-popular-thumb--placeholder{
  background: linear-gradient(
    135deg,
    rgba(15,69,147,.12),
    rgba(15,69,147,.04)
  );
}

.ac-popular-text{
  line-height: 1.25;
}

.ac-popular-title{
  font-size: 14px;
  font-weight: 600;
  display: block;
}

/* Hover discreto */
.ac-popular-link:hover .ac-popular-title{
  text-decoration: underline;
}

/* Mobile: deixa um pouco maior */
@media (max-width: 620px){
  .ac-popular-thumb{
    width: 64px;
    height: 64px;
  }
}
/* =========================
   MENU MOBILE – SETA (ASTRA)
========================= */

/* Estado normal (branca) */
.ast-header-break-point 
.ast-mobile-menu-buttons 
.ast-menu-toggle span,
.ast-header-break-point 
.ast-submenu-expanded > .ast-menu-toggle,
.ast-header-break-point 
.ast-submenu-expanded > .ast-menu-toggle svg,
.ast-header-break-point 
.ast-menu-toggle svg{
  color: #ffffff !important;
  fill: #ffffff !important;
}

/* Hover / foco / ativo (amarelo institucional) */
.ast-header-break-point 
.ast-menu-toggle:hover span,
.ast-header-break-point 
.ast-menu-toggle:hover svg,
.ast-header-break-point 
.ast-menu-toggle:focus svg,
.ast-header-break-point 
.ast-menu-toggle:active svg,
.ast-header-break-point 
.ast-submenu-expanded > .ast-menu-toggle:hover svg{
  color: var(--ac-am) !important;
  fill: var(--ac-am) !important;
}
.cky-btn-revisit-wrapper {
  botton:5px !important;
}

.sub-menu .menu-item {
  background: linear-gradient(
    90deg,
    rgba(15, 69, 147, 1) 0%,
    rgba(12, 178, 204, 1) 200%
  ) !important;
}

/* =========================================================
   PATCH MOBILE/TABLET – estabilizar layout (Astra + ac-*)
   Cole no FINAL do style.css
========================================================= */

/* 0) Evita rolagem lateral por overflow bobo */
html, body { overflow-x: hidden; }

/* 1) Ajuste de escala do título (sem salto 80px -> 28px) */
.ac-hero-title{
  /* desktop: ainda grande, mas mais estável */
  font-size: 64px;
  line-height: 1.06;
}

/* tablet */
@media (max-width: 920px){
  .ac-hero-title{
    font-size: 42px;
    line-height: 1.10;
  }
}

/* mobile */
@media (max-width: 620px){
  .ac-hero-title{
    font-size: 34px;      /* mantém grande, mas não quebra tudo */
    line-height: 1.14;
    letter-spacing: -0.01em;
  }
}

/* 2) Corrige “padding duplo” do Astra no mobile/tablet */
@media (max-width: 920px){
  /* Astra coloca padding/estrutura própria, então zeramos o container dele */
  .site-content .ast-container,
  .ast-separate-container #content .ast-container{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Astra também coloca padding no article, isso vira “caixa dentro de caixa” */
  .ast-separate-container .ast-article-post,
  .ast-separate-container .ast-article-single{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 3) Seu wrapper: controla o espaçamento real no mobile */
@media (max-width: 620px){
  .ac-wrap{
    max-width: 100%;
    padding-left: 12px;   /* menor e consistente */
    padding-right: 12px;
  }

  .ac-hero{
    padding: 16px;
    margin: 10px 0 14px;
  }
}

/* 4) Cards do blog: mais respiro e tipografia melhor no mobile */
@media (max-width: 620px){
  .ac-news-body{
    padding: 18px 16px 18px;
  }

  .ac-news-title{
    font-size: 22px;
    line-height: 1.18;
    margin-bottom: 10px;
  }

  .ac-news-lead{
    font-size: 14px;
    line-height: 1.55;
    margin-bottom: 14px;
  }

  .ac-news-meta{
    margin-bottom: 0;
  }
}

/* 5) Imagens do blog (garante que o 16:9 manda mesmo no mobile) */
.ac-news-media{
  aspect-ratio: 16/9;
  overflow: hidden;
}
.ac-news-media > img.ac-news-img,
.ac-news-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 6) Sidebar: tira sticky no mobile/tablet (senão “salta”) */
@media (max-width: 920px){
  .ac-sidebar{
    position: static;
    top: auto;
  }
}

/* 7) Widgets: título muito grande quebra no mobile */
@media (max-width: 620px){
  .ac-widget-title{
    font-size: 20px;   /* você estava com 24px, estoura fácil */
  }
}

/* 8) Paginação: clique confortável no mobile */
@media (max-width: 620px){
  .ac-pagination .page-numbers{
    padding: 10px 11px;
  }
}