/**
 * Smart Fit - Breadcrumb (rebranding)
 * -----------------------------------------------------------------------------
 * Depende de assets/css/brand.css (tokens).
 *
 * O breadcrumb e gerado pelo All in One SEO (aioseo_breadcrumbs()) e aparece em
 * single.php, single-colunistas.php, archive.php e search.php. Este arquivo
 * padroniza os quatro de uma vez.
 *
 * O QUE ESTAVA ERRADO
 * O CSS antigo puxava o bloco com `margin-top: -34px` acima de 768px. O valor
 * servia para o header anterior, mais baixo; com o header novo de 141px a margem
 * negativa jogava o breadcrumb 34px para dentro da barra preta, e o texto, quase
 * preto (#111) em 16px centralizado, sumia no fundo escuro.
 *
 * DECISOES DESTA VERSAO
 *   - Sem margem negativa. O breadcrumb nao deve depender da altura do header,
 *     senao qualquer ajuste de header quebra ele de novo.
 *   - Alinhado a esquerda, como no mockup do slide 7 do deck, em vez de
 *     centralizado. Breadcrumb centralizado e incomum e dificulta a leitura.
 *   - 12px em cinza #707070, que da 4,95:1 sobre branco e passa a WCAG AA.
 *     Antes eram 16px em #111, com peso visual de titulo.
 *   - Uma linha so, com reticencias. O titulo do post e longo e antes ocupava
 *     tres linhas; ele aparece completo no <h1> logo abaixo, entao truncar aqui
 *     nao esconde informacao.
 *   - O separador continua sendo o "»" que o AIOSEO gera e que o deck usa. Ele e
 *     configurado no painel do plugin, cujo valor vive no banco e nao viaja no
 *     deploy - por isso nao dependemos dele: apenas estilizamos o que vier.
 */

.page-meta-breadcrumbs {
  /* Espaço próprio, medido a partir do fim do header e não sobrepondo ele. */
  margin: 20px 0 24px;
  padding: 0;
  display: block;
  text-align: left;
}

.aioseo-breadcrumbs {
  display: block;
  max-width: 100%;
  /* Uma linha, truncando com reticências quando o título é longo. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--sf-font-text, sans-serif);
  font-size: var(--sf-fs-caption, 0.75rem);
  font-weight: var(--sf-fw-medium, 500);
  line-height: 1.4;
  /* #707070 sobre branco = 4,95:1, aprovado para texto de 12px. */
  color: var(--sf-gray-700, #707070);
}

/**
 * O seletor duplicado (.aioseo-breadcrumbs a, duas vezes) e a cor #111 vinham do
 * style.css legado. Aqui a especificidade e igual, mas este arquivo carrega
 * depois, entao vence.
 */
.aioseo-breadcrumbs a {
  color: var(--sf-gray-700, #707070);
  text-decoration: none;
  transition: color var(--sf-transition, 0.2s ease);
}

.aioseo-breadcrumbs a:hover,
.aioseo-breadcrumbs a:focus-visible {
  color: var(--sf-black, #000);
  text-decoration: underline;
}

.aioseo-breadcrumbs a:focus-visible {
  outline: 2px solid var(--sf-black, #000);
  outline-offset: 2px;
}

/* O separador fica mais leve que os rótulos, para não competir com eles. */
.aioseo-breadcrumb-separator {
  margin: 0 6px;
  color: var(--sf-gray-400, #b3b3b3);
}

/**
 * Último item: é a página atual, não é link. Ganha um pouco mais de peso para
 * indicar onde a pessoa está.
 */
.aioseo-breadcrumbs .aioseo-breadcrumb:last-child {
  font-weight: var(--sf-fw-bold, 700);
  color: var(--sf-gray-800, #1a1a1a);
}

@media (min-width: 768px) {
  .page-meta-breadcrumbs {
    margin: 24px 0 32px;
  }
}