/* =============================================
   EDITORIAL TYPOGRAPHY SYSTEM v2.0
   Highlights | Pullquotes | Dividers | Alerts
   Kicker | Endmark | Disclaimer
   Para uso dentro de .article-content
============================================= */


/* =============================================
   1. SKEWED HIGHLIGHTS (<mark>)
   Cores de marca-texto de papelaria neon
   Classes: mark-yellow | mark-green
            mark-pink   | mark-blue
============================================= */

.article-content mark {
  --mark-skew: 0.25em;
  --mark-height: 1em;
  --mark-overlap: 0.3em;

  margin-inline: calc(var(--mark-overlap) * -1);
  padding-inline: var(--mark-overlap);

  background-color: transparent;
  background-image:
    linear-gradient(to bottom right, transparent 50%, var(--mark-color) 50%),
    linear-gradient(var(--mark-color), var(--mark-color)),
    linear-gradient(to top left, transparent 50%, var(--mark-color) 50%);
  background-size:
    var(--mark-skew) var(--mark-height),
    calc(100% - var(--mark-skew) * 2 + 1px) var(--mark-height),
    var(--mark-skew) var(--mark-height);
  background-position:
    left center,
    center,
    right center;
  background-repeat: no-repeat;
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* Amarelo Neon */
.article-content mark.mark-yellow {
  --mark-color: rgba(255, 234, 0, 0.45);
}
body.dark-mode .article-content mark.mark-yellow {
  --mark-color: rgba(255, 234, 0, 0.3);
}

/* Verde Neon */
.article-content mark.mark-green {
  --mark-color: rgba(0, 255, 106, 0.35);
}
body.dark-mode .article-content mark.mark-green {
  --mark-color: rgba(0, 255, 106, 0.25);
}

/* Rosa Neon */
.article-content mark.mark-pink {
  --mark-color: rgba(255, 50, 150, 0.30);
}
body.dark-mode .article-content mark.mark-pink {
  --mark-color: rgba(255, 50, 150, 0.22);
}

/* Azul Neon */
.article-content mark.mark-blue {
  --mark-color: rgba(0, 180, 255, 0.35);
}
body.dark-mode .article-content mark.mark-blue {
  --mark-color: rgba(0, 180, 255, 0.25);
}


/* =============================================
   2. PULLQUOTES
   Aspas coloridas + texto preto ao lado
   Classes: pullquote-emerald | pullquote-sunset
            pullquote-violet  | pullquote-blue
            pullquote-solid (tudo preto)
============================================= */

/* --- Layout: aspas grandes à esquerda, texto ao lado --- */
.article-content .pullquote {
  position: relative;
  margin: 48px 0;
  padding: 0 0 0 64px;
  border: none;
  background: transparent;
  font-family: var(--font-family-heading);
  font-size: 1.35rem;
  line-height: 1.5;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

/* Aspas decorativas à esquerda */
.article-content .pullquote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -6px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 5rem;
  line-height: 1;
  font-weight: 700;
}

.article-content .pullquote::after {
  display: none;
}

.article-content .pullquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--font-family-body);
  font-size: 0.8rem;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Aspas coloridas — texto sempre preto */
.article-content .pullquote-emerald::before { color: #10b981; }
.article-content .pullquote-sunset::before  { color: #f97316; }
.article-content .pullquote-violet::before  { color: #8b5cf6; }
.article-content .pullquote-blue::before    { color: #3b82f6; }

/* Dark mode — aspas mantêm cor, texto fica claro */
body.dark-mode .article-content .pullquote {
  color: #e4e6eb;
}
body.dark-mode .article-content .pullquote-emerald::before { color: #6ee7b7; }
body.dark-mode .article-content .pullquote-sunset::before  { color: #fdba74; }
body.dark-mode .article-content .pullquote-violet::before  { color: #c4b5fd; }
body.dark-mode .article-content .pullquote-blue::before    { color: #93c5fd; }

/* Versão sólida — tudo preto */
.article-content .pullquote-solid {
  color: var(--text-primary);
}
.article-content .pullquote-solid::before {
  color: var(--text-primary);
}
body.dark-mode .article-content .pullquote-solid {
  color: #e4e6eb;
}
body.dark-mode .article-content .pullquote-solid::before {
  color: #e4e6eb;
}


/* =============================================
   3. BARRAS DIVISORAS
   Linhas retangulares retas
   Classes: divider | divider-thin | divider-thick
            divider-double
   Cores:   (default preto) | divider-c-gray-800 …
            divider-c-gray-200 | divider-c-emerald …
============================================= */

/* --- Base divider --- */
.article-content .divider {
  --divider-color: #1a1a2e;
  border: none;
  height: 1px;
  margin: 48px 0;
  background: var(--divider-color);
}
body.dark-mode .article-content .divider {
  --divider-color: #e4e6eb;
}

/* Espessuras */
.article-content .divider-thin  { height: 1px; }
.article-content .divider-thick { height: 3px; }

/* Dupla — duas linhas */
.article-content .divider-double {
  height: 0;
  background: none;
  border-top: 1px solid var(--divider-color);
  border-bottom: 3px solid var(--divider-color);
  padding-top: 3px;
}

/* --- Escala de cinzas (divider) --- */
.article-content .divider.divider-c-gray-800 { --divider-color: #424242; }
.article-content .divider.divider-c-gray-700 { --divider-color: #616161; }
.article-content .divider.divider-c-gray-600 { --divider-color: #757575; }
.article-content .divider.divider-c-gray-500 { --divider-color: #9e9e9e; }
.article-content .divider.divider-c-gray-400 { --divider-color: #bdbdbd; }
.article-content .divider.divider-c-gray-300 { --divider-color: #d5d5d5; }
.article-content .divider.divider-c-gray-200 { --divider-color: #e0e0e0; }

/* --- Cores (divider) --- */
.article-content .divider.divider-c-emerald { --divider-color: #10b981; }
.article-content .divider.divider-c-sunset  { --divider-color: #f97316; }
.article-content .divider.divider-c-violet  { --divider-color: #8b5cf6; }
.article-content .divider.divider-c-blue    { --divider-color: #3b82f6; }


/* =============================================
   3b. DIVIDER COM KICKER CENTRALIZADO
   Barra grossa (3px) colada no kicker
   Cor da barra acompanha classe dk-*
============================================= */

.article-content .divider-kicker {
  --dk-color: #1a1a2e;
  display: flex;
  align-items: stretch;
  margin: 48px 0;
  gap: 0;
  height: auto;
  background: none;
  border: none;
}
.article-content .divider-kicker::before,
.article-content .divider-kicker::after {
  content: '';
  flex: 1;
  height: 3px;
  background: var(--dk-color);
  align-self: center;
}
body.dark-mode .article-content .divider-kicker {
  --dk-color: #e4e6eb;
}

/* Kicker sólido dentro do divider — colado na barra */
.article-content .divider-kicker [class*="kicker-solid"] {
  margin: 0;
  white-space: nowrap;
}

/* Kicker frame dentro do divider — colado na barra */
.article-content .divider-kicker [class*="kicker-frame"] {
  margin: 0;
  white-space: nowrap;
  border-width: 3px;
}

/* --- Escala de cinzas (divider-kicker) --- */
.article-content .divider-kicker.dk-gray-800 { --dk-color: #424242; }
.article-content .divider-kicker.dk-gray-700 { --dk-color: #616161; }
.article-content .divider-kicker.dk-gray-600 { --dk-color: #757575; }
.article-content .divider-kicker.dk-gray-500 { --dk-color: #9e9e9e; }
.article-content .divider-kicker.dk-gray-400 { --dk-color: #bdbdbd; }
.article-content .divider-kicker.dk-gray-300 { --dk-color: #d5d5d5; }
.article-content .divider-kicker.dk-gray-200 { --dk-color: #e0e0e0; }

/* --- Cores (divider-kicker) --- */
.article-content .divider-kicker.dk-emerald { --dk-color: #10b981; }
.article-content .divider-kicker.dk-sunset  { --dk-color: #f97316; }
.article-content .divider-kicker.dk-violet  { --dk-color: #8b5cf6; }
.article-content .divider-kicker.dk-blue    { --dk-color: #3b82f6; }

/* --- Kickers cinza (sólido e frame) --- */
.article-content .kicker-solid-gray-800 { background: #424242; }
.article-content .kicker-solid-gray-700 { background: #616161; }
.article-content .kicker-solid-gray-600 { background: #757575; }
.article-content .kicker-solid-gray-500 { background: #9e9e9e; }
.article-content .kicker-solid-gray-400 { background: #bdbdbd; color: #1a1a2e; }
.article-content .kicker-solid-gray-300 { background: #d5d5d5; color: #1a1a2e; }
.article-content .kicker-solid-gray-200 { background: #e0e0e0; color: #1a1a2e; }

.article-content .kicker-frame-gray-800 { color: #424242; }
.article-content .kicker-frame-gray-700 { color: #616161; }
.article-content .kicker-frame-gray-600 { color: #757575; }
.article-content .kicker-frame-gray-500 { color: #9e9e9e; }
.article-content .kicker-frame-gray-400 { color: #bdbdbd; }
.article-content .kicker-frame-gray-300 { color: #d5d5d5; }
.article-content .kicker-frame-gray-200 { color: #e0e0e0; }

/* Dark mode */
body.dark-mode .article-content .divider-kicker.dk-emerald { --dk-color: #6ee7b7; }
body.dark-mode .article-content .divider-kicker.dk-sunset  { --dk-color: #fdba74; }
body.dark-mode .article-content .divider-kicker.dk-violet  { --dk-color: #c4b5fd; }
body.dark-mode .article-content .divider-kicker.dk-blue    { --dk-color: #93c5fd; }


/* =============================================
   4. MINI ALERTAS EDITORIAIS
   Classes: ed-note | ed-note-info
            ed-note-warning | ed-note-important
            ed-note-tip
============================================= */

.article-content .ed-note {
  position: relative;
  margin: 32px 0;
  padding: 16px 20px 16px 48px;
  border-radius: 0;
  font-size: 0.88rem;
  line-height: 1.6;
}

.article-content .ed-note::before {
  position: absolute;
  left: 18px;
  top: 16px;
  font-size: 1.1rem;
  line-height: 1;
}

.article-content .ed-note strong {
  font-weight: 700;
}

.article-content .ed-note p {
  margin: 0;
  font-size: inherit;
}

/* Info — azul */
.article-content .ed-note-info {
  background: rgba(59, 130, 246, 0.08);
  border-left: 3px solid #3b82f6;
  color: #1e40af;
}
.article-content .ed-note-info::before {
  content: 'ℹ';
  color: #3b82f6;
}
body.dark-mode .article-content .ed-note-info {
  background: rgba(59, 130, 246, 0.1);
  color: #93c5fd;
}

/* Warning — laranja */
.article-content .ed-note-warning {
  background: rgba(249, 115, 22, 0.08);
  border-left: 3px solid #f97316;
  color: #c2410c;
}
.article-content .ed-note-warning::before {
  content: '⚠';
  color: #f97316;
}
body.dark-mode .article-content .ed-note-warning {
  background: rgba(249, 115, 22, 0.1);
  color: #fdba74;
}

/* Important — vermelho */
.article-content .ed-note-important {
  background: rgba(239, 68, 68, 0.08);
  border-left: 3px solid #ef4444;
  color: #b91c1c;
}
.article-content .ed-note-important::before {
  content: '✦';
  color: #ef4444;
}
body.dark-mode .article-content .ed-note-important {
  background: rgba(239, 68, 68, 0.1);
  color: #fca5a5;
}

/* Tip — verde */
.article-content .ed-note-tip {
  background: rgba(16, 185, 129, 0.08);
  border-left: 3px solid #10b981;
  color: #065f46;
}
.article-content .ed-note-tip::before {
  content: '✓';
  font-weight: 700;
  color: #10b981;
}
body.dark-mode .article-content .ed-note-tip {
  background: rgba(16, 185, 129, 0.1);
  color: #6ee7b7;
}


/* =============================================
   5. DROP CAP EDITORIAL
   Classe: drop-cap
============================================= */

.article-content .drop-cap::first-letter {
  float: left;
  font-family: var(--font-family-heading);
  font-size: 3.8em;
  line-height: 0.8;
  font-weight: 700;
  margin: 0.05em 0.12em 0 0;
  color: var(--text-primary);
}

body.dark-mode .article-content .drop-cap::first-letter {
  color: #fff;
}


/* =============================================
   6. KICKER (legenda de seção)
   Versões: texto, sólido (fundo cor), moldura
   Classes: kicker | kicker-emerald … kicker-blue
            kicker-solid-emerald … kicker-solid-blue
            kicker-solid-black
            kicker-frame-emerald … kicker-frame-blue
            kicker-frame-black
============================================= */

/* --- Base kicker (texto simples) --- */
.article-content .kicker {
  display: inline-block;
  font-family: var(--font-family-body);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 8px;
  color: var(--text-muted);
}

/* Cores de texto */
.article-content .kicker-emerald { color: #10b981; }
.article-content .kicker-sunset  { color: #f97316; }
.article-content .kicker-violet  { color: #8b5cf6; }
.article-content .kicker-blue    { color: #3b82f6; }

/* --- Sólido: fundo colorido, texto branco --- */
.article-content [class*="kicker-solid"] {
  display: inline-block;
  font-family: var(--font-family-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 12px;
  margin-bottom: 10px;
  color: #fff;
}
.article-content .kicker-solid-black   { background: #1a1a2e; }
.article-content .kicker-solid-emerald { background: #10b981; }
.article-content .kicker-solid-sunset  { background: #f97316; }
.article-content .kicker-solid-violet  { background: #8b5cf6; }
.article-content .kicker-solid-blue    { background: #3b82f6; }

body.dark-mode .article-content .kicker-solid-black { background: #e4e6eb; color: #1a1a2e; }

/* --- Moldura: contorno retangular, texto na cor --- */
.article-content [class*="kicker-frame"] {
  display: inline-block;
  font-family: var(--font-family-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 3px 11px;
  margin-bottom: 10px;
  background: transparent;
  border: 1.5px solid currentColor;
}
.article-content .kicker-frame-black   { color: #1a1a2e; }
.article-content .kicker-frame-emerald { color: #10b981; }
.article-content .kicker-frame-sunset  { color: #f97316; }
.article-content .kicker-frame-violet  { color: #8b5cf6; }
.article-content .kicker-frame-blue    { color: #3b82f6; }

body.dark-mode .article-content .kicker-frame-black { color: #e4e6eb; }


/* =============================================
   7. SEPARADOR DE SEÇÃO (endmark)
   Classe: endmark
============================================= */

.article-content .endmark {
  text-align: center;
  margin: 48px 0 0;
  font-size: 1.5rem;
  color: var(--text-muted);
  letter-spacing: 0.3em;
}
.article-content .endmark::before {
  content: '■';
}


/* =============================================
   8. COLOR LABEL (moldura de fundo)
   Fundo 100% sólido na cor, texto branco na frente
   Classes: color-label | color-label-black
            color-label-emerald | color-label-sunset
            color-label-violet  | color-label-blue
============================================= */

.article-content .color-label {
  display: inline-block;
  padding: 10px 20px;
  font-family: var(--font-family-heading);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  margin: 8px 0;
}
.article-content .color-label-black   { background: #1a1a2e; }
.article-content .color-label-emerald { background: #10b981; }
.article-content .color-label-sunset  { background: #f97316; }
.article-content .color-label-violet  { background: #8b5cf6; }
.article-content .color-label-blue    { background: #3b82f6; }

body.dark-mode .article-content .color-label-black {
  background: #e4e6eb;
  color: #1a1a2e;
}


/* =============================================
   9. DISCLAIMER (nota discreta)
   Classe: disclaimer
============================================= */

.article-content .disclaimer {
  display: block;
  margin: 4px 0 12px;
  padding: 0;
  font-family: var(--font-family-body);
  font-size: 0.7rem;
  line-height: 1.5;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
body.dark-mode .article-content .disclaimer {
  color: #9ca3af;
}


/* =============================================
   10. BRUSH ARROWS (setas estilo marcador)
   Formas: arrow-curve | arrow-loop | arrow-straight
           arrow-down  | arrow-up   | arrow-scribble
   Cores:  (default preto) | arrow-yellow | arrow-green
           arrow-pink | arrow-blue
   Tamanhos: (default md) | arrow-sm | arrow-lg
   Flip:    arrow-flip-x | arrow-flip-y
============================================= */

/* --- Base arrow --- */
.article-content .brush-arrow {
  display: inline-block;
  width: 80px;
  height: 48px;
  vertical-align: middle;
  color: #1a1a2e;
}
body.dark-mode .article-content .brush-arrow {
  color: #e4e6eb;
}

/* Tamanhos */
.article-content .brush-arrow.arrow-sm { width: 48px;  height: 32px; }
.article-content .brush-arrow.arrow-lg { width: 120px; height: 72px; }

/* Flip */
.article-content .brush-arrow.arrow-flip-x { transform: scaleX(-1); }
.article-content .brush-arrow.arrow-flip-y { transform: scaleY(-1); }
.article-content .brush-arrow.arrow-flip-x.arrow-flip-y { transform: scale(-1, -1); }

/* Cores */
.article-content .brush-arrow.arrow-yellow { color: #d4c800; }
.article-content .brush-arrow.arrow-green  { color: #00c853; }
.article-content .brush-arrow.arrow-pink   { color: #e91e7a; }
.article-content .brush-arrow.arrow-blue   { color: #00a0e0; }

body.dark-mode .article-content .brush-arrow.arrow-yellow { color: #ffea00; }
body.dark-mode .article-content .brush-arrow.arrow-green  { color: #00ff6a; }
body.dark-mode .article-content .brush-arrow.arrow-pink   { color: #ff3296; }
body.dark-mode .article-content .brush-arrow.arrow-blue   { color: #00b4ff; }

/* SVG dentro herda a cor */
.article-content .brush-arrow svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}