/**
 * SEPARATORS.CSS
 * Componentes relacionados
 */

/* ============================================
   SEPARADORES E ELEMENTOS DECORATIVOS
   ============================================ */

.separator {
  width: 100%;
  height: var(--border-thin);
  background-color: var(--hairline);
  margin: var(--space-lg) 0;
  border: none;
}

.separator--thick {
  height: var(--border-medium);
  background-color: var(--accent-2);
}

.separator--ornament {
  text-align: center;
  border: none;
  height: auto;
  margin: var(--space-sm) 0;
  color: var(--site-title);
  font-size: var(--text-xs);
  letter-spacing: 0.5em;
}

.separator--ornament::before {
  content: "✦ ✦ ✦";
}

/* Separador pulp (irregular, não certinho) */
.separator--pulp {
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0%,
    var(--border) 20%,
    var(--border) 80%,
    transparent 100%
  );
  position: relative;
}

.separator--pulp::after {
  content: "▪";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--bg);
  padding: 0 var(--space-sm);
  color: var(--site-title);
  font-size: var(--text-xs);
}