/* Acessibilidade - Skip links */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.focus\:not-sr-only:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 0.5rem 1rem;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

.header-anchor {
  text-decoration: none!important;
}

h1 > a.header-anchor {
  font-weight: 800;
}

h2 > a.header-anchor {
  font-weight: 700;
}

/* Melhorias para tipografia sans-serif com suporte ao chinês */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif !important;
  line-height: 1.6;
  font-size: 1.125rem; /* Aumenta a fonte base para 18px */
  color: #e5e5e5; /* Força cor branca para modo escuro */
  /* Força sempre mostrar espaço da barra de scroll para evitar deslocamento */
  overflow-y: scroll;
}

html {
  /* Alternativa mais moderna - reserva espaço da barra de scroll */
  scrollbar-gutter: stable;
}

h1, h2, h3, h4, h5, h6 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans SC', 'Source Han Sans SC', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600;
  color: #ffffff; /* Títulos em branco */
}

p {
  margin-bottom: 1rem;
  font-size: 1.125rem; /* 18px */
  color: #e5e5e5; /* Parágrafos em branco suave */
}

/* Menu de navegação */
nav a {
  font-size: 1.125rem; /* 18px */
  font-weight: 500;
  color: #ffffff; /* Links do menu em branco */
  text-decoration: none !important; /* Remove sublinhado da navegação */
}

nav a:hover {
  color: #d1d5db; /* Cor hover mais suave */
  text-decoration: none !important; /* Remove sublinhado no hover */
}

/* Força todos os links a serem brancos */
a {
  color: #ffffff !important;
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}

a:hover {
  color: #d1d5db !important;
  text-decoration: underline;
}

/* Remove sublinhado de títulos de posts na página inicial */
.text-2xl a,
.text-3xl a,
.text-4xl a,
.font-bold a {
  text-decoration: none !important;
}

.text-2xl a:hover,
.text-3xl a:hover,
.text-4xl a:hover,
.font-bold a:hover {
  text-decoration: none !important;
}

/* Remove sublinhado de botões "Leia essa postagem" */
.font-semibold a {
  text-decoration: none !important;
}

.font-semibold a:hover {
  text-decoration: none !important;
}

/* Remove sublinhado de tags */
.bg-gray-700 {
  text-decoration: none !important;
}

/* Classe utilitária para remover sublinhado */
.no-underline {
  text-decoration: none !important;
}

.no-underline:hover {
  text-decoration: none !important;
}

/* Links dentro de posts - força branco sempre com sublinhado */
.prose a,
.prose a:visited,
.prose a:link {
  color: #ffffff !important;
  text-decoration: underline !important;
}

.prose a:hover {
  color: #d1d5db !important;
  text-decoration: underline !important;
}

/* Remove qualquer cor azul do Tailwind */
.prose a:not(.header-anchor) {
  color: #ffffff !important;
}

/* Melhora a legibilidade em modo escuro */
.dark {
  color: #e5e5e5;
}

/* Estilos para os ícones sociais */
nav svg {
  transition: opacity 0.2s ease-in-out;
}

nav svg:hover {
  opacity: 0.7;
}

/* Ajusta largura do conteúdo dos posts para usar toda a largura disponível */
.prose {
  max-width: none !important;
  width: 100%;
}

/* Código inline (crases `código`) */
.inline-code {
  background-color: #374151 !important;
  color: #fbbf24 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: 'Courier New', Consolas, Monaco, monospace !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
  border: 1px solid #4b5563 !important;
}

/* Remove qualquer pseudo-elemento que adicione crases */
code:not(pre code)::before,
code:not(pre code)::after,
.inline-code::before,
.inline-code::after {
  content: none !important;
  display: none !important;
}

/* Força que elementos code inline não tenham decoração de crases */
.prose code:not(pre code)::before,
.prose code:not(pre code)::after {
  content: none !important;
  display: none !important;
}

/* Garante que blocos de código não sejam afetados */
pre code {
  background-color: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
}

/* Quebra de links em mobile - evita overflow horizontal */
a {
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto !important;
}

/* Para URLs muito longas, força quebra mais agressiva */
.prose a[href^="http"],
.prose a[href^="https://"] {
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* Garante que o conteúdo não ultrapasse os limites da tela */
.prose {
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Melhora adicional para dispositivos pequenos */
@media (max-width: 640px) {
  .prose a {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    line-height: 1.5 !important;
  }
  
  /* Garante que nada ultrapasse a largura da tela */
  body, html {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* Otimizações para a imagem de capa - evita recarregamento no mobile */
.blog-header-image {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  /* Força cache da imagem no mobile */
  image-rendering: auto;
  -webkit-user-drag: none;
  user-select: none;
}

/* Botões de paginação */
.paginator-text {
  padding: 0.5rem 1rem;
  border: none;
  background-color: transparent;
  color: #ffffff;
  font-weight: bold;
  transition: color 0.2s;
}

.paginator-text:hover:not(.cursor-not-allowed) {
  color: #d1d5db;
}

.paginator-text.cursor-not-allowed {
  opacity: 0.5;
  color: #6b7280;
}