/*
 * SOS Neurocirurgia — complementos para o WordPress
 * Recursos que o HTML estático não tinha (paginação, busca real, conteúdo vindo
 * do editor) e os estilos que estavam inline no design. Usa os mesmos tokens.
 */

/* ---------- Acessibilidade ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important}
.screen-reader-text:focus{background:#fff;clip:auto!important;clip-path:none;color:var(--navy);display:block;font-weight:700;height:auto;left:8px;padding:10px 16px;top:8px;width:auto;z-index:100000;border-radius:8px}
.admin-bar header.site-header{top:32px}
@media(max-width:782px){.admin-bar header.site-header{top:46px}}

/* ---------- Estilos que eram inline no design ---------- */
.sec-tight{padding-top:0}
#comparar .head .lead{max-width:720px;margin:14px auto 0}
.plus-cta{text-align:center;margin-top:36px}
.blog-more{margin-top:24px}
.foot-tagline{color:var(--muted);font-size:15px;max-width:320px}
.art-hero h1{margin-top:14px}

/* ---------- Menus vindos do painel ---------- */
.pill-nav{display:flex;align-items:center}
.menu li,.mobile-menu li,.fgrid li{list-style:none}
.mobile-menu{list-style:none;margin:0;padding:0}

/* ---------- Comparativo: largura das colunas conforme a quantidade de cursos ---------- */
@media(min-width:900px){.cmp thead th:not(.corner),.cmp tbody td,.cmp tfoot td:not(:first-child){width:calc((100% - 180px)/var(--cmp-cols,5))}}

/* ---------- Cards de artigo ---------- */
.post .ph{display:grid;place-items:center;width:100%;height:100%;background:radial-gradient(70% 60% at 100% 100%,rgba(248,72,95,.45),transparent 60%),radial-gradient(70% 60% at 0% 0%,rgba(66,134,211,.5),transparent 60%),linear-gradient(160deg,#14296E,#07122A)}
.post .thumb{position:relative}.post .thumb .rimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}.post .ph img{width:64px;height:64px;object-fit:contain;opacity:.9}
.post .thumb .ph img{width:64px!important;height:64px!important;object-fit:contain;transform:none!important}
.post .post-t{font-family:var(--titulo);font-weight:700;font-size:18px;line-height:1.3;letter-spacing:0;margin:0 20px 22px;color:var(--navy)}
.post .label{color:var(--lbl)}
.post .post-ex{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:-10px 20px 14px;font-size:14.5px;line-height:1.55;color:var(--muted)}
.post .post-date{display:block;margin:auto 20px 20px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted2)}
.post .thumb img{aspect-ratio:3/2}
.post .thumb .ph{display:grid}

/* ---------- Busca (mecanismo de busca do WordPress) ---------- */
.bsearch{display:block}
.bsearch input{padding-right:58px}
.bsearch input::-webkit-search-cancel-button{cursor:pointer}
/* a pedido: sem fundo/círculo, só o ícone de lupa na cor do placeholder (#757575, tom cinza
   padrão do navegador pra input::placeholder aqui — não é var(--muted)/--muted2, que são
   acinzentados puxando pro navy). Sem efeito de hover/focus — cor fixa sempre.
   Sem a regra de :hover/:focus abaixo, o reset.css do Hello Elementor vaza de novo no hover/focus
   (mesmo padrão do .burger/.chip/.share-circle): button:hover,button:focus dele tem
   background-color:#CC3366 + color:#fff + border-radius:3px, tudo com especificidade maior que o
   nosso seletor de 1 classe só em repouso — virava um quadrado rosa sólido com a lupa branca em vez
   de continuar transparente/cinza. As regras abaixo reafirmam o estado de repouso no hover/focus. */
.bsearch-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:0;background:transparent;color:#757575;display:grid;place-items:center;cursor:pointer}
.bsearch-btn:hover,.bsearch-btn:focus,.bsearch-btn:focus-visible{background:transparent;color:#757575;border-radius:0}
.bempty.is-visible{display:block}

/* ---------- Filtro por categorias (links) ---------- */
.blog-chips{margin-top:0}
a.chip{display:inline-flex;align-items:center;text-decoration:none}
.chip[aria-current="page"]{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- Paginação ---------- */
.sos-pag{margin-top:40px}
.sos-pag ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.sos-pag li>a,.sos-pag li>span{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(20,41,110,.25);background:#fff;color:var(--navy);font-weight:600;font-size:15px;text-decoration:none;transition:border-color .2s,background .2s,color .2s}
.sos-pag li>a:hover{border-color:var(--navy)}
.sos-pag li>a span{display:inline;border:0;padding:0;min-width:0;min-height:0;background:none}
.sos-pag .prev,.sos-pag .next{gap:6px}
.sos-pag li>.current{background:var(--navy);border-color:var(--navy);color:#fff}
.sos-pag li>.dots{border-color:transparent;background:none;padding:0 4px;min-width:0}

/* ---------- Artigo ---------- */
@media(max-width:1023px){.art-layout{grid-template-columns:minmax(0,1fr)}}
.art-main,.art-side{min-width:0}
a.art-tag{text-decoration:none}
a.art-tag:hover{background:#ff5d72}
.art-cover{margin:0 0 22px}
.art-cover img{height:auto}
.art-meta time{color:inherit}
.side-card .side-title{font-family:var(--titulo);font-size:14.5px;line-height:1.3;letter-spacing:0;color:var(--navy);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.side-card .side-title .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);flex-shrink:0}
.side-item[hidden]{display:none}
.side-item .th{aspect-ratio:1}
.side-all{margin-top:14px}
.nl-card .nl-title{font-family:var(--titulo);font-size:16px;line-height:1.3;letter-spacing:0;margin:0 0 6px;color:#fff}
.nl-embed{text-align:left}
.art-tags{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 0}
.art-tags .tag{text-decoration:none}
.art-tags .tag:hover{border-color:var(--coral);color:var(--coral)}

/* ---------- Texto do artigo vindo do editor (WordPress/Elementor) ---------- */
.prose>*:first-child{margin-top:0}
.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{color:var(--navy);text-wrap:balance}
.prose h3{font-size:21px;margin:32px 0 12px}
.prose h4{font-size:19px;margin:28px 0 10px}
.prose h5,.prose h6{font-size:17px;margin:24px 0 8px}
.prose a{color:var(--navy);font-weight:600;text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:3px}
.prose a:hover{color:var(--coral)}
.prose strong,.prose b{color:var(--navy)}
.prose ol{margin:0 0 22px;padding-left:22px;display:grid;gap:10px}
.prose ol li{padding-left:4px;font-size:17px;line-height:1.6;color:#2B3B6E}
.prose ol li::before{display:none}
.prose li p{margin:0}
.prose img{height:auto;border-radius:16px}
.prose .wp-caption,.prose figure,.prose .wp-block-image,.prose .elementor-widget-image,.prose iframe,.prose video,.prose table{max-width:100%}
.prose .wp-caption img{display:block;margin:0 auto}
.prose pre{max-width:100%;overflow-x:auto}
.prose a{overflow-wrap:anywhere}
.prose figure{margin:28px 0}
.prose figcaption,.prose .wp-caption-text,.prose .wp-element-caption{font-size:13.5px;color:var(--muted2);margin-top:8px;text-align:center}
.prose blockquote{border-left:3px solid var(--coral);padding:4px 0 4px 18px;margin:26px 0;font-family:var(--titulo);font-size:21px;line-height:1.4;color:var(--navy)}
.prose blockquote p{font-size:inherit;color:inherit;line-height:inherit}
.prose table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
.prose th{color:var(--navy);font-weight:700}
.prose hr{border:0;border-top:1px solid var(--line);margin:32px 0}
.prose iframe,.prose video,.prose embed{max-width:100%;border-radius:16px}
.prose .wp-block-embed__wrapper iframe{width:100%;aspect-ratio:16/9;height:auto}
.prose span[style*="font-weight: 400"]{font-weight:inherit!important}
.prose .alignleft{float:left;margin:6px 24px 16px 0;max-width:50%}
.prose .alignright{float:right;margin:6px 0 16px 24px;max-width:50%}
.prose .aligncenter{margin-left:auto;margin-right:auto}
.prose::after{content:"";display:table;clear:both}
/* Elementor no modo "layout do Elementor": blocos de texto herdam a tipografia do tema */
.prose .elementor-widget-text-editor,.prose .elementor-widget-text-editor *{font-family:inherit}
.prose .e-con,.prose .elementor-section{padding-left:0;padding-right:0}
.page-links{margin:24px 0;display:flex;gap:8px;flex-wrap:wrap}

/* ---------- Páginas comuns ---------- */
.page-default .art-top{padding-bottom:8px}
.page-builder{display:block}

/* ---------- Ajustes visuais (QA) ---------- */
/* faixa da lista de espera: próxima da seção SOS+ que ela complementa */
.banner{margin-top:clamp(24px,3vw,40px)}
/* cards ilustrativos do SOS+: altura mínima em vez de fixa (não corta o último item) */
.mini{height:auto;min-height:150px}
/* cabeçalho: o botão nunca encolhe/corta; o menu compacta entre 1024 e 1279px */
.pill .nc-btn{flex-shrink:0}
.pill .logo{flex-shrink:1;min-width:0}
.pill .logo img{max-width:100%}
@media(min-width:1024px) and (max-width:1279px){
  .pill{gap:12px}
  .pill .logo img{width:120px}
  .menu{gap:0}
  .menu a{padding-inline:7px;font-size:13.5px}
  .pill .btn.sm .pc-txt{font-size:14px}
}
/* 1024–1279px: mesmo compactado (bloco acima), o menu de 8 itens + botão não
   cabe com folga nessa faixa, e a logo (único item com flex-shrink/min-width:0)
   acaba sendo espremida até sumir. Mais seguro usar o menu hambúrguer — que já
   funciona bem em telas menores — também nessa faixa, e só mostrar o menu
   horizontal a partir de 1280px, onde cabe com folga (testado). Acima de
   1279px nada muda: a regra @media(min-width:1024px) do main.css continua
   valendo normalmente. */
@media(min-width:1024px) and (max-width:1279px){
  .menu{display:none}
  .pill .btn{display:none}
  .burger{display:inline-block}
  .mobile.open{display:block!important}
}
/* faixa da lista de espera: texto e botão próximos, sem vão enorme em telas largas */
@media(min-width:768px){
  .banner{justify-content:flex-start;gap:40px;width:fit-content;max-width:100%;margin-inline:auto}
}
/* faixa da lista de espera no celular: texto e botão centralizados */
@media(max-width:767px){
  .banner{align-items:center;text-align:center}
}
/* crédito do rodapé: link clicável, mesma cor do texto */
.copy.dev a{color:inherit;text-decoration:underline;text-decoration-color:rgba(232,237,248,.4);text-underline-offset:2px;transition:text-decoration-color .2s}
.copy.dev a:hover,.copy.dev a:focus-visible{text-decoration-color:currentColor}
/* botão flutuante do WhatsApp no celular: centralizado na vertical, como no desktop/tablet */
@media(max-width:767px){
  .wa-side{top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
  .wa-side:hover,.wa-side:focus-visible{transform:translateY(-50%) scale(1.08)!important}
}
/* páginas comuns montadas no Elementor (modelo de página do tema, com
   cabeçalho/rodapé): contém elemento decorativo que eventualmente vaze da
   largura da tela, sem esconder texto nem alterar o conteúdo do Elementor.
   Não se aplica a landing pages no modelo "Elementor Canvas" (sem
   cabeçalho/rodapé do tema) -- essas ficam fora do alcance do tema por
   decisão do próprio Elementor/autor da página. */
.page-builder{overflow-x:hidden;max-width:100vw}

/* ---------- Correções pontuais em 2 landing pages (modelo Elementor
   Canvas, sem cabeçalho/rodapé do tema), escopadas por ID da página --
   não alteram nenhum conteúdo gravado no Elementor, só a apresentação ---------- */

/* Treinamento 2026_2 (page-id-14513): o widget HTML (herói colado com CSS
   próprio) está com "Largura: Inicial" no Elementor para tablet/mobile, então
   não encolhe mesmo tendo breakpoints internos. Força 100% só nesse widget. */
body.page-id-14513 .elementor-element-5dde0d3{width:100%!important;max-width:100%!important}
body.page-id-14513 .elementor-element-b2d0fd4{width:auto!important;max-width:100%!important;left:auto!important;margin-left:0!important}

/* Mentoria Prova Oral 2027 – Lista de espera (page-id-14233): 4 ícones
   decorativos (SVG, sem texto) com posição absoluta calculada para o
   desktop, sem ajuste para tablet (1024px). O overflow precisa ser contido
   no contêiner (não nos ícones -- são eles que estão deslocados). Só essa
   página é afetada; nenhum conteúdo é escondido (são puramente visuais). */
body.page-id-14233 .elementor-14233{overflow-x:hidden}