/*
 * Tarot Arabi — utilities
 *
 * A deliberately small set. Utilities exist for accessibility and text intent
 * only; they are not a spacing/flex framework, because component CSS already
 * covers layout and an unbounded utility layer causes design drift (§64).
 */

/* --------------------------------------------------- Accessibility helpers */

.ta-visually-hidden {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Becomes visible when focused — used for skip links. */
.ta-visually-hidden--focusable:focus-visible,
.ta-visually-hidden--focusable:focus {
	position: static !important;
	inline-size: auto;
	block-size: auto;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
}

.ta-skip-link {
	position: absolute;
	inset-block-start: var(--space-3);
	inset-inline-start: var(--space-3);
	z-index: 100;
	padding-block: var(--space-3);
	padding-inline: var(--space-5);
	border-radius: var(--radius-sm);
	background-color: var(--color-surface);
	box-shadow: var(--shadow-md);
	color: var(--color-green-900);
	font-weight: var(--weight-bold);
	text-decoration: none;
}

.ta-skip-link:not(:focus):not(:focus-visible) {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ------------------------------------------------------------------- Text */

.ta-text-muted {
	color: var(--color-text-muted);
}

.ta-text-small {
	font-size: var(--text-sm);
	line-height: var(--leading-meta);
}

.ta-text-lead {
	font-size: var(--text-body-lg);
	line-height: var(--leading-body);
}

.ta-text-center {
	text-align: center;
}

/* Explicit start alignment, for the rare case a parent centres its children. */
.ta-text-start {
	text-align: start;
}

/* --------------------------------------------------------------- Divider */

.ta-divider {
	margin-block: var(--space-8);
	border: 0;
	border-block-start: var(--border-divider);
}

.ta-divider--accent {
	border-block-start: var(--border-accent);
}

/* --------------------------------------------------------------- Layout */

.ta-full-bleed {
	inline-size: 100%;
}