/*
 * utilities.css - small single-purpose helpers.
 *
 * LAYER 4 of 5. Only utilities that are genuinely needed theme-wide. This is not a utility
 * framework: if a rule belongs to one component, it belongs in that component's file.
 *
 * Every utility here is either an accessibility primitive or an RTL primitive.
 */

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

/*
 * Visually hidden, still announced by screen readers.
 * Used for the skip link and for labels on icon-only controls.
 */
.zahra-visually-hidden {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * Hidden until focused. The skip link uses this: invisible to sighted mouse users,
 * fully visible the moment it receives keyboard focus.
 */
.zahra-visually-hidden--focusable:focus,
.zahra-visually-hidden--focusable:focus-visible {
	position: fixed;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 100000;
	inline-size: auto;
	block-size: auto;
	padding: 12px 16px;
	margin: 0;
	overflow: visible;
	clip-path: none;
	white-space: normal;
	background-color: var(--zahra-color-surface);
	color: var(--zahra-color-ink);
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * RTL / bidi
 * ------------------------------------------------------------------------- */

/*
 * Isolated LTR for a technical identifier inside Arabic text.
 *
 * THE critical bidi rule (docs/04-implementation/RTL.md section 3): apply this to the
 * IDENTIFIER ONLY, never to the whole phrase.
 *
 *   Correct:   طلب <span class="zahra-ltr">#1234</span>
 *   Wrong:     <span dir="ltr">طلب #1234</span>
 *
 * The wrong form reverses the Arabic word relative to the number.
 *
 * Applies to: order number, email, phone, postcode, SKU, EAN, technical dates, counters,
 * and monetary totals in technical context. All render in Mono.
 */
.zahra-ltr {
	direction: ltr;
	unicode-bidi: isolate;
	font-family: var(--zahra-font-mono);
}

/*
 * Isolated LTR that keeps the UI font.
 *
 * Same bidi guarantee as .zahra-ltr, without the Mono face. Use where the approved design
 * isolates a technical value but does NOT render it monospaced.
 *
 * The approved header and footer do exactly that: phone, email and the footer legal block
 * carry `direction: ltr` in the UI sans family, not Mono
 * (screens/01-home-desktop.html, screens/02-home-mobile.html). Where the design and
 * docs/04-implementation/RTL.md section 3 disagree on the face, the approved screens win -
 * they are a higher authority than implementation notes (SOURCE_OF_TRUTH.md).
 */
.zahra-isolate {
	direction: ltr;
	unicode-bidi: isolate;
}