/**
 * Archive/Search — FJPN Site
 *
 * Adapta as páginas de LISTAGEM de posts do tema pai (BigHearts) ao design
 * novo do site — mesma linguagem visual dos cards de "Notícias" da home
 * (assets/css/sections/... ainda não existe um noticias.css: a seção da home
 * usa um widget Elementor próprio, não esta marcação de blog nativa do WP).
 *
 * Cobre os templates nativos do tema pai (SOMENTE LEITURA, não editados):
 *   - wp-content/themes/bighearts/archive.php  → category/tag/date archives
 *   - wp-content/themes/bighearts/search.php   → resultados de busca
 *   - templates/post/posts-list.php + post-standard.php → grade de posts
 *   - core/class/theme-helper.php::pagination() → <ul class="wgl-pagination">
 *   - core/class/single-post.php → render_featured()/render_post_meta()/
 *     render_post_cats()/render_excerpt() — geram as classes internas do card
 *
 * ESCOPO: todo seletor é prefixado com `body.archive`/`body.search` (classes
 * que o WordPress core sempre adiciona via body_class() nesses templates —
 * category/tag/date archives ganham `archive` mesmo sem category.php próprio).
 * Isso evita vazar estilo pra single.php, páginas e outros widgets de blog
 * (ex.: "últimos posts" no footer, que reaproveitam as MESMAS classes
 * .blog-post/.blog-post_title/.wgl-pagination em outro contexto).
 *
 * ESPECIFICIDADE: o tema pai não usa IDs nem `!important` nas regras de
 * listagem (confirmado em css/main.css e css/pluggable/page-404.css) — a
 * única exceção é `.bighearts_404__button .wgl-button { padding: ... !important; }`
 * (page-404.css:128), por isso o padding desse botão específico não é
 * sobrescrito aqui (ver seção 6). Em todo o resto, prefixar com
 * `body.archive`/`body.search` já garante specificity igual ou maior que a
 * do tema pai, e o child carrega DEPOIS (functions.php), então nem isso seria
 * estritamente necessário — mas é mantido para não vazar escopo.
 */

/* ==========================================================
 * 1. FUNDO E RESPIRO GERAL DA PÁGINA
 * SOFT (--fjpn-bg-soft) é o mesmo fundo da seção Notícias na home
 * (secoes-design.md §10: "fundo SOFT") — cria a mesma moldura visual
 * por trás da grade de cards.
 * ========================================================== */

body.archive,
body.search {
  background: var(--fjpn-bg-soft);
}

/* #main-content é o id fixo emitido tanto por archive.php quanto search.php
   (BigHearts::get_sidebar_data() + wgl_col-N calculado por eles). Não mexemos
   em .wgl-container (largura/breakpoints) porque ele é usado em TODO o site,
   inclusive fora do escopo desta tarefa (single.php, page.php etc.). */
body.archive #main-content,
body.search #main-content {
  padding-top: var(--fjpn-space-section-py-sm);
  padding-bottom: var(--fjpn-space-section-py-md);
}

/* ==========================================================
 * 2. CABEÇALHO DO ARQUIVO
 * archive.php só renderiza .archive__heading quando existe termo de
 * taxonomia (category/tag) — arquivos por data/autor ficam sem título,
 * comportamento herdado do tema pai, fora do alcance de um arquivo CSS.
 * ========================================================== */

body.archive .archive__heading {
  margin-bottom: var(--fjpn-space-section-py-sm);
  text-align: center;
}

/* Barrinha divisória laranja — mesmo padrão do .fjpn-section-divider usado
   em toda a home (Eyebrow), centralizada porque o cabeçalho aqui é centrado. */
body.archive .archive__heading::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto var(--fjpn-gap-icon-text);
  background: var(--fjpn-divider);
  border-radius: var(--fjpn-radius-full);
}

body.archive .archive__tax_title {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-lg);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-tight);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
  margin: 0;
}

body.archive .archive__tax_description {
  margin-top: var(--fjpn-gap-icon-text);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body-lg);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-text-muted);
}

/* 768px = --fjpn-breakpoint-md. Custom properties não resolvem dentro da
   condição do @media (mesma limitação documentada em base.css), por isso o
   valor é literal aqui — não é uma cor/medida nova, é o token --fjpn-text-heading-lg-md. */
@media (min-width: 768px) {
  body.archive .archive__tax_title {
    font-size: var(--fjpn-text-heading-lg-md);
  }
}

/* Cabeçalho da página de busca. Evitamos depender do seletor
   `header.searсh-header` do tema pai: a classe usa um "с" cirílico
   (U+0441) em vez do "c" latino — bug de homóglifo no código-fonte do
   BigHearts (search.php e page-404.css usam o mesmo caractere errado de
   forma consistente, então FUNCIONA, mas é frágil de reproduzir aqui sem
   risco de erro de digitação/encoding). `.page-title` (h1) é filho direto
   e não depende do homóglifo — mesmo resultado visual, seletor confiável. */
body.search .page-title {
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-lg);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: var(--fjpn-leading-tight);
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
  text-align: center;
  margin-bottom: var(--fjpn-space-section-py-sm);
}

body.search .page-title::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto var(--fjpn-gap-icon-text);
  background: var(--fjpn-divider);
  border-radius: var(--fjpn-radius-full);
}

@media (min-width: 768px) {
  body.search .page-title {
    font-size: var(--fjpn-text-heading-lg-md);
  }
}

/* O termo buscado ("<span>{{query}}</span>") ganha o azul institucional —
   mesmo tratamento que o nome do fundador recebe no título da seção Sobre. */
body.search .page-title span {
  color: var(--fjpn-blue-primary);
}

/* ==========================================================
 * 3. GRADE DE CARDS
 * Container real: .blog-posts.blog-posts-list > .container-grid.row
 * (templates/post/posts-list.php). O tema pai usa um grid bootstrap-like
 * (float + wgl_col-N conforme a opção "blog_list_columns" do Customizer).
 * Substituímos por CSS Grid 1→2→3 colunas — a MESMA cadência da grade de
 * Notícias da home (secoes-design.md §10: "md:grid-cols-3") — independente
 * de qual coluna esteja configurada no admin, pra garantir a mesma
 * respiração visual sempre. [class*="wgl_col-"] cobre wgl_col-12/6/4/3,
 * qualquer que seja a configuração.
 * ========================================================== */

body.archive .blog-posts-list .container-grid.row,
body.search .blog-posts-list .container-grid.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fjpn-gap-grid);
  margin: 0;
}

body.archive .blog-posts-list [class*="wgl_col-"].item,
body.search .blog-posts-list [class*="wgl_col-"].item {
  width: auto;
  padding: 0;
  float: none;
  margin-bottom: 0;
}

/* 768px = --fjpn-breakpoint-md */
@media (min-width: 768px) {
  body.archive .blog-posts-list .container-grid.row,
  body.search .blog-posts-list .container-grid.row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 1024px = --fjpn-breakpoint-lg */
@media (min-width: 1024px) {
  body.archive .blog-posts-list .container-grid.row,
  body.search .blog-posts-list .container-grid.row {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Card — .blog-post_wrapper é o elemento que hoje recebe padding/box-shadow
   fixos do tema pai (main.css: padding 30px 30px 0 30px, box-shadow rgba
   preta). Substituímos pelo card branco com sombra azul (--fjpn-shadow-card)
   e hover de elevação — o mesmo comportamento de .fjpn-card-lift em
   base.css, reproduzido aqui porque não dá pra aplicar a classe utilitária
   numa marcação que não controlamos. */
body.archive .blog-posts-list .blog-post,
body.search .blog-posts-list .blog-post {
  margin-bottom: 0;
}

body.archive .blog-posts-list .blog-post_wrapper,
body.search .blog-posts-list .blog-post_wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 0;
  background: var(--fjpn-white);
  border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  border-radius: var(--fjpn-radius-3xl);
  box-shadow: var(--fjpn-shadow-card);
  overflow: hidden;
  transition:
    transform var(--fjpn-duration-base) var(--fjpn-ease-default),
    box-shadow var(--fjpn-duration-shadow) var(--fjpn-ease-simple);
}

body.archive .blog-posts-list .blog-post_wrapper:hover,
body.search .blog-posts-list .blog-post_wrapper:hover {
  transform: translateY(-5px);
  box-shadow: var(--fjpn-shadow-card-hover);
}

/* Imagem — full-bleed no topo do card, mesma altura fixa da imagem de card
   de Programas (--fjpn-card-image-height), reaproveitada por não existir
   token dedicado pra Notícias no design original. */
body.archive .blog-posts-list .blog-post_media,
body.search .blog-posts-list .blog-post_media {
  position: relative;
  margin-bottom: 0;
}

body.archive .blog-posts-list .blog-post_media_part,
body.search .blog-posts-list .blog-post_media_part {
  border-radius: 0;
  height: var(--fjpn-card-image-height);
  overflow: hidden;
  background: var(--fjpn-slate-100);
}

body.archive .blog-posts-list .blog-post_media_part img,
body.search .blog-posts-list .blog-post_media_part img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Badge de categoria sobreposto à imagem — mesmo padrão da home
   (Programas/Notícias: "badge de categoria sobreposto"). .post_categories
   já nasce dentro de .blog-post_media (position:relative do tema pai),
   então dá pra posicionar em absolute sem marcação extra. */
body.archive .blog-posts-list .blog-post_media .post_categories,
body.search .blog-posts-list .blog-post_media .post_categories {
  position: absolute;
  z-index: 2;
  top: var(--fjpn-gap-icon-text-lg);
  left: var(--fjpn-gap-icon-text-lg);
  margin-bottom: 0;
}

body.archive .blog-posts-list .post_categories a,
body.search .blog-posts-list .post_categories a {
  border: none;
  border-radius: var(--fjpn-radius-xl);
  padding: 0.25rem var(--fjpn-gap-icon-text-lg);
  background: var(--fjpn-blue-primary);
  color: var(--fjpn-white);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  font-weight: var(--fjpn-weight-bold);
  transition: background var(--fjpn-duration-background) var(--fjpn-ease-simple);
}

body.archive .blog-posts-list .post_categories a:hover,
body.search .blog-posts-list .post_categories a:hover {
  background: var(--fjpn-blue-dark);
}

/* Conteúdo do card */
body.archive .blog-posts-list .blog-post_content,
body.search .blog-posts-list .blog-post_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: var(--fjpn-padding-card);
}

/* Data — primeiro .meta-data do card (render_post_meta($meta_data_date),
   chamado antes do título em post-standard.php). O segundo .meta-data
   (autor/comentários, fim do card) herda o mesmo estilo — ver §3.1. */
body.archive .blog-posts-list .blog-post_content .meta-data,
body.search .blog-posts-list .blog-post_content .meta-data {
  display: flex;
  align-items: center;
  gap: var(--fjpn-gap-medium);
  margin-bottom: var(--fjpn-gap-icon-text);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-small);
  color: var(--fjpn-text-muted);
}

body.archive .blog-posts-list .blog-post_content .post_date,
body.search .blog-posts-list .blog-post_content .post_date {
  color: inherit;
}

/* Título — usamos a escala "sm" do componente Heading (base.css
   .fjpn-heading-sm): os títulos de Notícias são manchetes completas
   ("Fundação lança novo programa..."), não rótulos curtos como o de
   Programas (--fjpn-text-card-title, 14px) — heading-sm é a opção mais
   próxima da hierarquia visual do design original pra esse tipo de texto. */
body.archive .blog-posts-list .blog-post_title,
body.search .blog-posts-list .blog-post_title {
  margin: 0 0 var(--fjpn-gap-icon-text);
  line-height: var(--fjpn-leading-snug);
  clear: none;
}

body.archive .blog-posts-list .blog-post_title > a,
body.search .blog-posts-list .blog-post_title > a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-sm);
  font-weight: var(--fjpn-weight-extrabold);
  line-height: inherit;
  letter-spacing: var(--fjpn-tracking-tight);
  color: var(--fjpn-text-primary);
  transition: color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

body.archive .blog-posts-list .blog-post_title > a:hover,
body.search .blog-posts-list .blog-post_title > a:hover {
  color: var(--fjpn-blue-primary);
}

/* Resumo — trunca em 3 linhas visualmente (o tema pai só trunca por
   caractere quando a opção "blog_post_listing_content" está ativa no
   Customizer; o line-clamp garante consistência visual independente disso). */
body.archive .blog-posts-list .blog-post_text,
body.search .blog-posts-list .blog-post_text {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: var(--fjpn-gap-medium);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-slate-700);
}

body.archive .blog-posts-list .blog-post_text p,
body.search .blog-posts-list .blog-post_text p {
  margin-bottom: 0;
}

/* Empurra "Ler notícia" e o meta-wrap pro rodapé do card, mesmo com resumos
   de tamanhos diferentes lado a lado (o flex column + flex:1 no
   .blog-post_content acima é o que viabiliza isso). */
body.archive .blog-posts-list .read-more-wrap,
body.search .blog-posts-list .read-more-wrap {
  margin-top: auto;
  padding: 0;
}

/* "Ler notícia →" — link de texto com seta, igual ao padrão da home
   (Programas/Notícias: "Saiba mais →" / "Ler notícia →"), não um botão
   preenchido. */
body.archive .blog-posts-list .button-read-more,
body.search .blog-posts-list .button-read-more {
  display: inline-flex;
  align-items: center;
  gap: var(--fjpn-gap-icon-text);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-button);
  font-weight: var(--fjpn-weight-semibold);
  color: var(--fjpn-blue-primary);
  text-decoration: none;
  transition: color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

body.archive .blog-posts-list .button-read-more::after,
body.search .blog-posts-list .button-read-more::after {
  content: "\2192"; /* → */
  transition: transform var(--fjpn-duration-base) var(--fjpn-ease-simple);
}

body.archive .blog-posts-list .button-read-more:hover,
body.search .blog-posts-list .button-read-more:hover {
  color: var(--fjpn-blue-dark);
}

body.archive .blog-posts-list .button-read-more:hover::after,
body.search .blog-posts-list .button-read-more:hover::after {
  transform: translateX(4px);
}

/* Meta-wrap final (autor/comentários, quando ativos nas opções do tema) */
body.archive .blog-posts-list .blog-post_meta-wrap,
body.search .blog-posts-list .blog-post_meta-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fjpn-gap-medium);
  margin-top: var(--fjpn-gap-medium);
  padding-top: var(--fjpn-gap-medium);
  border-top: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  text-transform: none;
}

/* Foco visível — todo link clicável dentro do card (imagem, título, link de
   categoria, "ler notícia") usa o mesmo anel laranja, consistente com o
   restante do site. */
body.archive .blog-posts-list .blog-post_wrapper a:focus-visible,
body.search .blog-posts-list .blog-post_wrapper a:focus-visible {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-focus);
  outline-offset: 2px;
}

/* ==========================================================
 * 4. PAGINAÇÃO
 * <ul class="wgl-pagination"><li class="page">{{page-numbers}}</li>...
 * gerado por BigHearts::pagination() (core/class/theme-helper.php).
 * O tema pai já entrega alvo de toque de 45×45px (>= 44px do WCAG 2.5.5) —
 * mantido. Cor de hover/current hoje vem de --bighearts-primary-color
 * (Customizer, não remapeada para a marca) — sobrescrita aqui pra bater
 * com o azul institucional em vez de depender de uma opção do admin.
 * ========================================================== */

body.archive .wgl-pagination,
body.search .wgl-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--fjpn-gap-icon-text);
  padding: 0;
  margin: var(--fjpn-gap-medium) 0 0;
}

body.archive .wgl-pagination .page .page-numbers,
body.search .wgl-pagination .page .page-numbers {
  border-color: var(--fjpn-slate-200);
  color: var(--fjpn-text-primary);
  font-family: var(--fjpn-font-sans);
  transition:
    background var(--fjpn-duration-background) var(--fjpn-ease-simple),
    border-color var(--fjpn-duration-color) var(--fjpn-ease-simple),
    color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

body.archive .wgl-pagination .page .page-numbers:not(.dots):hover,
body.archive .wgl-pagination .page .page-numbers.current,
body.search .wgl-pagination .page .page-numbers:not(.dots):hover,
body.search .wgl-pagination .page .page-numbers.current {
  background: var(--fjpn-gradient-blue-button);
  border-color: transparent;
  color: var(--fjpn-white);
}

body.archive .wgl-pagination .page .page-numbers.dots,
body.search .wgl-pagination .page .page-numbers.dots {
  border-color: transparent;
  background: transparent;
  color: var(--fjpn-text-muted);
}

/* Foco visível — o item mais fácil de esquecer numa paginação. paginate_links()
   do WordPress gera <a> (navegáveis) e <span class="current"> (não navegável,
   sem foco); focus-visible cobre exatamente os elementos que recebem Tab. */
body.archive .wgl-pagination .page a.page-numbers:focus-visible,
body.search .wgl-pagination .page a.page-numbers:focus-visible {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-focus);
  outline-offset: 2px;
}

/* ==========================================================
 * 5. ESTADO VAZIO — BUSCA SEM RESULTADO
 * search.php SEMPRE renderiza .page_404_wrapper quando have_posts() é falso
 * (reaproveita a marcação/CSS de página 404 — page-404.css é enfileirado
 * tanto em is_404() quanto is_search(), ver core/class/dynamic-styles.php:698).
 * ========================================================== */

body.search .page_404_wrapper {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

body.search .page_404_wrapper .banner_404_title span {
  font-family: var(--fjpn-font-sans);
  font-weight: var(--fjpn-weight-extrabold);
  color: var(--fjpn-text-primary);
}

body.search .page_404_wrapper .banner_404_text {
  font-family: var(--fjpn-font-sans);
  color: var(--fjpn-text-muted);
  line-height: var(--fjpn-leading-relaxed);
}

body.search .page_404_wrapper .search_result_form .search-field {
  border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  border-radius: var(--fjpn-radius-2xl);
  font-family: var(--fjpn-font-sans);
}

body.search .page_404_wrapper .search_result_form .search-field:focus-visible,
body.search .page_404_wrapper .search_result_form .search-form:focus-within {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-focus);
  outline-offset: 2px;
}

/* Botão "TAKE ME HOME" — só cor/forma/sombra. O padding NÃO é sobrescrito:
   page-404.css:128 define `padding: 18px 23px !important` e não vale a pena
   entrar numa guerra de !important por um espaçamento que já é razoável. */
body.search .bighearts_404__button .wgl-button {
  background: var(--fjpn-gradient-blue-button);
  border-color: transparent;
  border-radius: var(--fjpn-radius-2xl);
  color: var(--fjpn-white);
  box-shadow: var(--fjpn-shadow-button-blue);
  transition:
    transform var(--fjpn-duration-base) var(--fjpn-ease-simple),
    box-shadow var(--fjpn-duration-shadow) var(--fjpn-ease-simple);
}

body.search .bighearts_404__button .wgl-button:hover {
  transform: scale(1.05);
  border-color: transparent;
  color: var(--fjpn-white);
}

body.search .bighearts_404__button .wgl-button:focus-visible {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-focus);
  outline-offset: 2px;
}

/* ==========================================================
 * 5.1 ESTADO VAZIO — CATEGORIA/ARQUIVO SEM POST
 * Diferente de search.php, archive.php NÃO tem fallback: quando
 * have_posts() é falso, templates/post/posts-list.php simplesmente não
 * imprime NADA (nem .blog-posts-list, nem mensagem) — só o título da
 * categoria (se houver) fica na página, o resto fica em branco. Não dá
 * pra editar archive.php/posts-list.php (só leitura), então usamos
 * :has() pra detectar em CSS puro a ausência da grade e completar a
 * página com uma mensagem — evita a "página em branco" pedida no
 * critério de aceite sem tocar em PHP. Navegador sem suporte a :has()
 * (raro em 2026) só mantém o comportamento atual do tema — não piora nada.
 * ========================================================== */

body.archive #main-content:not(:has(.blog-posts-list)) {
  padding-top: var(--fjpn-space-section-py-sm);
  padding-bottom: var(--fjpn-space-section-py-md);
  text-align: center;
}

body.archive #main-content:not(:has(.blog-posts-list))::before {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0 auto var(--fjpn-gap-medium);
  background: var(--fjpn-divider);
  border-radius: var(--fjpn-radius-full);
}

body.archive #main-content:not(:has(.blog-posts-list))::after {
  content: "Nenhuma notícia encontrada nesta categoria por enquanto. Explore outras editorias ou volte para a página inicial.";
  display: block;
  max-width: 480px;
  margin-inline: auto;
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-body-lg);
  line-height: var(--fjpn-leading-relaxed);
  color: var(--fjpn-text-muted);
}

/* ==========================================================
 * 6. BARRA LATERAL
 * BigHearts::render_sidebar() só imprime .sidebar-container quando há
 * sidebar ativa pra 'blog_list' no Customizer (get_sidebar_data()) — se o
 * cliente não tiver uma configurada, este bloco simplesmente não se aplica
 * a nada. Widget wrapper vem de core/class/theme-support.php::sidebar_register()
 * ("widget bighearts_widget", título em ".title-wrapper > .title" + ".title__line").
 * ========================================================== */

body.archive .sidebar-container,
body.search .sidebar-container {
  padding-top: var(--fjpn-space-section-py-sm);
}

body.archive .sidebar .widget.bighearts_widget,
body.search .sidebar .widget.bighearts_widget {
  margin-bottom: var(--fjpn-space-section-py-sm);
  padding-bottom: var(--fjpn-space-section-py-sm);
  border-bottom: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
}

body.archive .sidebar .widget.bighearts_widget:last-child,
body.search .sidebar .widget.bighearts_widget:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

body.archive .sidebar .title-wrapper .title,
body.search .sidebar .title-wrapper .title {
  display: block;
  margin-bottom: var(--fjpn-gap-medium);
  font-family: var(--fjpn-font-sans);
  font-size: var(--fjpn-text-heading-sm);
  font-weight: var(--fjpn-weight-extrabold);
  color: var(--fjpn-text-primary);
}

/* Linha decorativa que o tema pai já reserva ao lado do título do widget
   (".title__line", sem estilo próprio no main.css) — reaproveitamos o
   mesmo divisor laranja do resto do site em vez de deixá-la sem forma. */
body.archive .sidebar .title-wrapper .title__line,
body.search .sidebar .title-wrapper .title__line {
  display: block;
  width: 32px;
  height: 3px;
  margin-top: var(--fjpn-gap-icon-text);
  background: var(--fjpn-divider);
  border-radius: var(--fjpn-radius-full);
}

body.archive .sidebar a,
body.search .sidebar a {
  color: var(--fjpn-text-muted);
  transition: color var(--fjpn-duration-color) var(--fjpn-ease-simple);
}

body.archive .sidebar a:hover,
body.search .sidebar a:hover {
  color: var(--fjpn-blue-primary);
}

body.archive .sidebar a:focus-visible,
body.search .sidebar a:focus-visible {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-focus);
  outline-offset: 2px;
}

/* Widget de busca na sidebar — mesmo tratamento do formulário de busca do
   estado vazio (§5), pra não ter dois estilos de campo de busca no site. */
body.archive .sidebar .widget_search .search-field,
body.search .sidebar .widget_search .search-field {
  border: var(--fjpn-border-width-default) solid var(--fjpn-slate-200);
  border-radius: var(--fjpn-radius-2xl);
  font-family: var(--fjpn-font-sans);
}

body.archive .sidebar .widget_search .search-field:focus-visible,
body.search .sidebar .widget_search .search-field:focus-visible,
body.archive .sidebar .widget_search .search-form:focus-within,
body.search .sidebar .widget_search .search-form:focus-within {
  outline: var(--fjpn-border-width-outline) solid var(--fjpn-orange-focus);
  outline-offset: 2px;
}