/**
 * Micro-interações: só as regras de sistema do protótipo (site/ds/ctesi/interacoes.css) que valem para
 * todos os elementos e que o Elementor não consegue pôr de uma vez: cursor, transição base, anel de foco
 * de teclado e movimento reduzido.
 *
 * Os estados de cada elemento ou família (botões, ligações com seta e com filete, ícones, cards, setas,
 * play, …) NÃO ficam aqui: estão nas classes globais do kit (ct-btn, ct-int-*, …) e nos estilos dos
 * elementos, editáveis no Elementor.
 *
 * Especificidade pensada para o Elementor V4:
 *  - ganha a `.elementor .e-*-link-base { all: unset }` (as ligações de parágrafos, títulos e imagens
 *    ficavam sem anel de foco nenhum);
 *  - perde para qualquer `&:focus-visible` ou `& a:focus-visible` escrito numa classe ou num elemento,
 *    para o anel poder passar a branco sobre fotografia ou azul.
 */

/* Tudo o que é clicável diz que é clicável. */
a[href],
button,
[role="button"],
label[for],
summary {
	cursor: pointer;
}

/* Transição base de 120 ms (feedback). `.e-con` é o contentor do Elementor, que traz `transform .4s`:
   quando o contentor é uma ligação ou um botão passa a responder em 120 ms. */
a,
button,
img,
svg,
a.e-con,
button.e-con,
.elementor a[class*="-link-base"] {
	transition-property: box-shadow, transform, opacity, text-decoration-color, outline-offset, filter, background-color, border-color, color;
	transition-duration: 120ms;
	transition-timing-function: ease;
}

/* Foco de teclado: anel escuro de 2 px a 3 px do elemento. */
body :is(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
	outline: 2px solid var(--text-primary, #20282d);
	outline-offset: 3px;
}

/* Cantos do anel: 2 px, só em quem não tem raio próprio (os botões redondos continuam redondos). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.elementor [class*="-link-base"]:focus-visible {
	border-radius: var(--radius-control, 2px);
}

/* Com o rato não há anel. */
*:focus:not(:focus-visible) {
	outline: none;
}

/* Movimento reduzido: sem transições nem deslocações ao passar o rato. */
@media (prefers-reduced-motion: reduce) {
	a,
	button,
	img,
	svg,
	a.e-con,
	button.e-con,
	.elementor [class*="ct-"],
	.elementor [class*="ct-"] :is(img, svg, p, span) {
		transition: none !important;
	}

	.elementor [class*="ct-int-"]:hover,
	.elementor [class*="ct-int-"]:hover :is(img, svg) {
		transform: none !important;
	}
}