/*
 * Paleta de cores como variáveis CSS (formato "R G B" para uso com
 * Tailwind via rgb(var(--x) / <alpha-value>)). O modo claro é o padrão;
 * definir data-theme="dark" no <html> troca para o modo escuro tático.
 * A troca em tempo real é feita por js/theme.js.
 */

:root,
[data-theme='light'] {
  color-scheme: light;

  --color-base: 247 245 239;
  --color-panel: 255 255 255;
  --color-border: 224 219 201;

  --color-olive: 75 83 32;
  --color-olive-light: 91 104 43;
  --color-olive-dark: 52 59 22;

  --color-brass: 156 100 30;
  --color-ember: 168 58 22;
  --color-bone: 27 29 21;
}

[data-theme='dark'] {
  color-scheme: dark;

  --color-base: 13 15 11;
  --color-panel: 21 23 15;
  --color-border: 42 45 33;

  --color-olive: 75 83 32;
  --color-olive-light: 107 122 51;
  --color-olive-dark: 52 59 22;

  --color-brass: 201 138 60;
  --color-ember: 212 87 42;
  --color-bone: 242 237 225;
}

/* Evita "flash" de cor ao trocar de tema. */
body {
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ============================================================
   DIAGRAMAÇÃO DE MATÉRIAS E IMAGENS (Corpo do Artigo / WYSIWYG)
   ============================================================ */
.post-content,
.wysiwyg-content {
  line-height: 1.8;
}

.post-content::after,
.wysiwyg-content::after {
  content: '';
  display: table;
  clear: both;
}

.post-figure {
  margin: 1.75rem 0;
  display: block;
  position: relative;
  max-width: 100%;
  transition: width 0.15s ease;
}

.post-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  border: 1px solid rgb(var(--color-border));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.post-figure figcaption {
  font-size: 0.8125rem;
  line-height: 1.4;
  color: rgb(var(--color-bone) / 0.65);
  margin-top: 0.5rem;
  font-style: italic;
  text-align: center;
}

/* Tamanhos pré-definidos */
.post-figure.size-25 {
  width: 25%;
}
.post-figure.size-50 {
  width: 50%;
}
.post-figure.size-75 {
  width: 75%;
}
.post-figure.size-100 {
  width: 100%;
}

/* Alinhamento Centralizado */
.post-figure.align-center {
  margin-left: auto;
  margin-right: auto;
  clear: both;
}

/* Alinhamento à Esquerda (com texto contornando) */
.post-figure.align-left {
  float: left;
  margin: 0.5rem 1.75rem 1.25rem 0;
  clear: left;
}

.post-figure.align-left:not([style*="width"]):not(.size-25):not(.size-50):not(.size-75):not(.size-100) {
  width: 48%;
}

/* Alinhamento à Direita (com texto contornando) */
.post-figure.align-right {
  float: right;
  margin: 0.5rem 0 1.25rem 1.75rem;
  clear: right;
}

.post-figure.align-right:not([style*="width"]):not(.size-25):not(.size-50):not(.size-75):not(.size-100) {
  width: 48%;
}

/* Em telas pequenas, quebra automática para 100% */
@media (max-width: 640px) {
  .post-figure.align-left,
  .post-figure.align-right,
  .post-figure.align-center,
  .post-figure[style*="width"] {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1.5rem 0 !important;
    clear: both !important;
  }
}

/* Estilos de tipografia editorial do artigo */
.post-content h2,
.wysiwyg-content h2 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  color: rgb(var(--color-bone));
  clear: both;
}

.post-content h3,
.wysiwyg-content h3 {
  font-family: 'Oswald', sans-serif;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  color: rgb(var(--color-bone) / 0.9);
}

.post-content p,
.wysiwyg-content p {
  margin-bottom: 1.25rem;
}

.post-content blockquote,
.wysiwyg-content blockquote {
  border-left: 3px solid rgb(var(--color-olive-light));
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: rgb(var(--color-bone) / 0.8);
  font-style: italic;
  background: rgb(var(--color-panel) / 0.4);
  padding: 0.75rem 1rem;
  border-radius: 0 0.375rem 0.375rem 0;
}

.post-content ul,
.wysiwyg-content ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.post-content ol,
.wysiwyg-content ol {
  list-style-type: decimal;
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.post-content a,
.wysiwyg-content a {
  color: rgb(var(--color-olive-light));
  text-decoration: underline;
  text-underline-offset: 3px;
}

.post-content a:hover,
.wysiwyg-content a:hover {
  color: rgb(var(--color-brass));
}

/* Tabelas editoriais do artigo */
.post-content table,
.wysiwyg-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.9rem;
  border: 1px solid rgb(var(--color-border));
  border-radius: 0.5rem;
  overflow: hidden;
}

.post-content thead,
.wysiwyg-content thead {
  background: rgb(var(--color-olive-dark) / 0.7);
}

.post-content th,
.wysiwyg-content th {
  font-family: 'Oswald', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.8rem;
  padding: 0.75rem 1rem;
  text-align: left;
  color: rgb(var(--color-bone));
  border-bottom: 2px solid rgb(var(--color-olive-light) / 0.5);
}

.post-content td,
.wysiwyg-content td {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid rgb(var(--color-border));
  color: rgb(var(--color-bone) / 0.85);
}

.post-content tbody tr:nth-child(even),
.wysiwyg-content tbody tr:nth-child(even) {
  background: rgb(var(--color-panel) / 0.3);
}

.post-content tbody tr:hover,
.wysiwyg-content tbody tr:hover {
  background: rgb(var(--color-olive) / 0.1);
}

/* Negrito estratégico */
.post-content strong,
.wysiwyg-content strong {
  color: rgb(var(--color-bone));
  font-weight: 700;
}

/* Callout / dica (parágrafo que começa com emoji) */
.post-content .callout,
.wysiwyg-content .callout {
  background: rgb(var(--color-olive-dark) / 0.2);
  border: 1px solid rgb(var(--color-olive-light) / 0.3);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  font-size: 0.925rem;
}

/* Responsividade para tabelas */
@media (max-width: 640px) {
  .post-content table,
  .wysiwyg-content table {
    font-size: 0.8rem;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .post-content th,
  .wysiwyg-content th,
  .post-content td,
  .wysiwyg-content td {
    padding: 0.5rem 0.625rem;
    white-space: nowrap;
  }
}

/* WYSIWYG Editor specific styles */
.wysiwyg-content:focus {
  outline: none;
}

.wysiwyg-content [data-selected='true'] {
  position: relative;
}

.wysiwyg-content [data-selected='true'] img {
  outline: 2px solid rgb(var(--color-olive-light));
  box-shadow: 0 0 0 4px rgb(var(--color-olive-light) / 0.25);
}

.wysiwyg-content figcaption[contenteditable='true']:focus {
  outline: 1px dashed rgb(var(--color-olive-light));
  background: rgb(var(--color-base));
}

/* Alças de Redimensionamento Interativo (Drag Handles) */
.post-figure-resizer {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: rgb(var(--color-olive-light));
  border: 2px solid #ffffff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  z-index: 35;
  transition: transform 0.1s ease;
  user-select: none;
}

.post-figure-resizer:hover {
  transform: scale(1.3);
  background-color: rgb(var(--color-brass));
}

.post-figure-resizer.bottom-right {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}

.post-figure-resizer.bottom-left {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}

/* Personalização do Cropper.js para a paleta tática/militar */
.cropper-view-box {
  outline: 2px solid rgb(var(--color-olive-light)) !important;
  outline-color: rgb(var(--color-olive-light)) !important;
}

.cropper-line {
  background-color: rgb(var(--color-olive-light)) !important;
}

.cropper-point {
  background-color: rgb(var(--color-brass)) !important;
  width: 8px !important;
  height: 8px !important;
  opacity: 0.9 !important;
}

.cropper-dashed {
  border-color: rgba(255, 255, 255, 0.4) !important;
}

.cropper-point.point-se {
  width: 12px !important;
  height: 12px !important;
}

/* ============================================================
   PAINEL LATERAL RETRÁTIL (MOBILE DRAWER)
   ============================================================ */
#mobile-drawer {
  will-change: transform;
}

#mobile-drawer.translate-x-0 {
  transform: translateX(0) !important;
}

#mobile-drawer.-translate-x-full {
  transform: translateX(-100%) !important;
}

#mobile-drawer-overlay.opacity-100 {
  opacity: 1 !important;
}

#mobile-drawer-overlay.opacity-0 {
  opacity: 0 !important;
}

#mobile-drawer-overlay.pointer-events-auto {
  pointer-events: auto !important;
}

#mobile-drawer-overlay.pointer-events-none {
  pointer-events: none !important;
}

/* ============================================================
   DIAGRAMAÇÃO JORNALÍSTICA DE CONCURSOS & BOX RESUMO OFICIAL
   ============================================================ */
.lead-text,
.post-content .lead-text,
.wysiwyg-content .lead-text {
  font-size: 1.125rem;
  line-height: 1.75;
  color: rgb(var(--color-bone));
  border-left: 3px solid rgb(var(--color-olive-light));
  padding-left: 1rem;
  margin-bottom: 1.5rem;
}

.concurso-resumo-box {
  background-color: rgb(var(--color-panel) / 0.95);
  border: 1px solid rgb(var(--color-olive-light) / 0.4);
  border-radius: 0.75rem;
  padding: 1.5rem;
  margin: 2rem 0;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
  transition: border-color 0.2s ease;
}

.concurso-resumo-box:hover {
  border-color: rgb(var(--color-olive-light) / 0.7);
}

.concurso-resumo-box a.btn-box-edital {
  text-decoration: none !important;
  color: rgb(var(--color-bone)) !important;
}

.concurso-resumo-box a.btn-box-edital:hover {
  border-color: rgb(var(--color-olive-light));
  color: #ffffff !important;
}

.concurso-resumo-box a.btn-box-inscricao {
  text-decoration: none !important;
  color: #ffffff !important;
}

.concurso-resumo-box a.btn-box-inscricao:hover {
  background-color: rgb(var(--color-olive-light)) !important;
  transform: translateY(-1px);
}

/* ============================================================
   PAINEL DE MODERAÇÃO - RESUMO / LEAD DA HISTÓRIA
   Evita conflito com utilitário text-base e garante legibilidade
   impecável em ambos os modos (claro e escuro).
   ============================================================ */
#insp-lead {
  color: rgb(var(--color-bone) / 0.9) !important;
  white-space: pre-line !important;
  line-height: 1.65;
}

/* ============================================================
   SUBDESTAQUES DA HOME (Cards Secundários)
   Garante adaptação de cores ao tema ativo (claro/escuro),
   contraste WCAG e feedback de hover com a cor ember.
   ============================================================ */
#hero-secondary h3 {
  color: rgb(var(--color-bone));
  transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

#hero-secondary a:hover h3,
#hero-secondary .group:hover h3 {
  color: rgb(var(--color-ember));
}