/**
 * Telnep — estilos complementares (animações e utilitários carregados
 * depois do style.css principal via wp_enqueue_style).
 */

.scorm-link { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
.scorm-link:hover { color: #7ce7f2; }
.no-underline { text-decoration: none; }

.pillar-line { position: relative; }
.pillar-line::before {
  content: "";
  position: absolute;
  top: 52px;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(63, 216, 232, 0.4), transparent);
  display: none;
}
@media (min-width: 1024px) {
  .pillar-line::before { display: block; }
}

.tone-green { --tone: var(--green); }
.tone-red { --tone: var(--red); }
.tone-yellow { --tone: var(--yellow); }
.tone-tag { color: var(--tone); }
.tone-icon { background: color-mix(in srgb, var(--tone) 14%, transparent); color: var(--tone); }
.tone-num { color: var(--tone); }
.tone-pill { color: var(--tone); background: color-mix(in srgb, var(--tone) 14%, transparent); }

/* Fallback para navegadores sem color-mix. */
@supports not (color: color-mix(in srgb, red 10%, transparent)) {
  .tone-icon, .tone-pill { background: rgba(255, 255, 255, 0.08); }
}

.equipment-grid img { border-radius: 12px; border: 1px solid var(--border); }

/* Ícone alinhado ao texto */
.icon-inline {
	width: 20px;
	height: 20px;
	vertical-align: -3px;
	margin-right: 8px;
	color: var(--accent);
}

/* Paginação interna de páginas divididas */
.page-links {
	margin-top: 24px;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	font-size: 0.9rem;
}

.page-links a {
	padding: 4px 10px;
	border: 1px solid var(--border);
	border-radius: 8px;
}