/*
 * Site-wide accessibility rules, loaded on every page (includes/assets.php).
 */

/* One clear keyboard focus ring everywhere. Kadence leaves focus to the
   browser default, which is thin and disappears on the black pills and
   inside cards that clip their overflow. :focus-visible keeps it off for
   mouse clicks. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid #5B4FCF !important;
	outline-offset: 2px !important;
}

/* Previews sit inside cards with overflow: hidden, which would clip an
   outside ring, so theirs is drawn inside: white on a violet edge, visible on
   any gradient. */
.gc-preview:focus-visible,
.tg-daily-preview:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: -6px !important;
	box-shadow: inset 0 0 0 6px #5B4FCF !important;
}

/* Links inside running text need more than colour to stand out. */
.tg-guide a,
.tg-guide li a {
	text-decoration-line: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* Scrollable code and tables get focus (a11y.js) so they can be scrolled from
   the keyboard; the ring there sits inside the rounded box. */
pre[tabindex]:focus-visible,
.gs-table-wrap[tabindex]:focus-visible {
	outline-offset: -2px !important;
}

/* Screen-reader-only text, for the live region in a11y.js. */
.tg-sr {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Reduced motion: stop the decorative movement — hero colour fields, the
   brand strip, hover lifts. The previews in the Animated Gradient and
   Gradient Text tools are what those tools make, so they keep moving; each
   can be paused or switched off in the tool. */
@media (prefers-reduced-motion: reduce) {
	*:not(.ag-preview):not(.gt-text),
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}
