/**
 * Utilities — Almutaheda Pack
 *
 * Focus states, screen-reader helpers, and reduced-motion handling.
 * These rules override component styles and must be loaded last.
 */

/* ─── Global focus reset ──────────────────────────────────────────── */

/*
 * Remove the default browser focus outline so we can apply
 * our own design-system focus ring consistently.
 * IMPORTANT: We only suppress it when :focus-visible is supported,
 * so keyboard users always get a visible indicator.
 */
:focus:not(:focus-visible) {
	outline: none;
}

/* ─── Global focus-visible ring ───────────────────────────────────── */

/*
 * Applied to every interactive element that does not already
 * define its own :focus-visible rule in its component file.
 * Component-level rules take precedence via specificity.
 */
:focus-visible {
	outline:        var(--alm-focus-ring-width) solid var(--alm-focus-ring-color);
	outline-offset: var(--alm-focus-ring-offset);
}

/*
 * High-contrast mode: replace colored ring with a forced keyword
 * so the indicator remains visible regardless of custom colors.
 */
@media (forced-colors: active) {
	:focus-visible {
		outline: 3px solid ButtonText;
	}
}

/* ─── Skip-to-content link ────────────────────────────────────────── */

.alm-skip-link {
	position:         absolute;
	inset-block-start: -100%;
	inset-inline-start: var(--alm-space-4);
	z-index:          var(--alm-z-toast);
	padding:          var(--alm-space-3) var(--alm-space-6);
	background:       var(--alm-color-navy-primary);
	color:            var(--alm-color-white);
	font-weight:      var(--alm-weight-semibold);
	border-radius:    var(--alm-radius-md);
	text-decoration:  none;
	transition:       inset-block-start var(--alm-duration-fast);
}

.alm-skip-link:focus {
	inset-block-start: var(--alm-space-4);
}

/* ─── Screen-reader only ──────────────────────────────────────────── */

/*
 * Visually hides an element while keeping it accessible
 * to screen readers and in the DOM for keyboard navigation.
 * Do not use `display: none` or `visibility: hidden` for this.
 */
.alm-sr-only {
	position:    absolute;
	width:       1px;
	height:      1px;
	padding:     0;
	margin:      -1px;
	overflow:    hidden;
	clip:        rect(0, 0, 0, 0);
	white-space: nowrap;
	border:      0;
}

/*
 * Reverses alm-sr-only on focus — useful for skip links and
 * description text that should become visible when focused.
 */
.alm-sr-only--focusable:focus,
.alm-sr-only--focusable:focus-within {
	position:    static;
	width:       auto;
	height:      auto;
	padding:     0;
	margin:      0;
	overflow:    visible;
	clip:        auto;
	white-space: normal;
}

/* ─── Visually hidden heading (for section landmarks) ─────────────── */

.alm-visually-hidden {
	clip:        rect(0 0 0 0);
	clip-path:   inset(50%);
	height:      1px;
	overflow:    hidden;
	position:    absolute;
	white-space: nowrap;
	width:       1px;
}

/* ─── Reduced-motion handling ──────────────────────────────────────── */

/*
 * Disable all non-essential animations and transitions
 * when the user has requested reduced motion via OS settings.
 * Exceptions: progress indicators that are necessary for
 * communicating state (e.g., loading spinners).
 */
@media (prefers-reduced-motion: reduce) {

	/* Blanket suppression */
	*,
	*::before,
	*::after {
		animation-duration:        0.01ms !important;
		animation-iteration-count: 1      !important;
		transition-duration:       0.01ms !important;
		scroll-behavior:           auto   !important;
	}

	/* Keep loading spinners just barely visible */
	.alm-btn[data-loading="true"]::after {
		animation-duration: 1s !important;
	}

	/* Keep shimmer skeleton loaders barely visible */
	.alm-card--skeleton .alm-card__media,
	.alm-card--skeleton .alm-card__title,
	.alm-card--skeleton .alm-card__text {
		animation: none !important;
		background: #E5E7EB !important;
	}
}

/* ─── Print utility ───────────────────────────────────────────────── */

@media print {
	.alm-no-print {
		display: none !important;
	}
}

/* ─── Color-scheme aware surfaces ─────────────────────────────────── */

/*
 * Almutaheda Pack is a light-mode brand.
 * We do not implement dark mode at this stage.
 * Explicitly declare light scheme to prevent OS-forced dark-mode artifacts.
 */
:root {
	color-scheme: light;
}

/* ─── Overflow utilities ───────────────────────────────────────────── */

.alm-overflow-hidden { overflow: hidden; }
.alm-overflow-auto   { overflow: auto; }
.alm-truncate {
	overflow:      hidden;
	text-overflow: ellipsis;
	white-space:   nowrap;
}
.alm-line-clamp-2 {
	display:            -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow:           hidden;
}
.alm-line-clamp-3 {
	display:            -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow:           hidden;
}

/* ─── Pointer / cursor utilities ──────────────────────────────────── */

.alm-cursor-pointer  { cursor: pointer; }
.alm-cursor-default  { cursor: default; }
.alm-cursor-not-allowed { cursor: not-allowed; }

/* ─── Width / height utilities ────────────────────────────────────── */

.alm-w-full   { width:  100%; }
.alm-h-full   { height: 100%; }
.alm-min-w-0  { min-width: 0; }

/* ─── Opacity ─────────────────────────────────────────────────────── */

.alm-opacity-0    { opacity: 0; }
.alm-opacity-50   { opacity: 0.5; }
.alm-opacity-100  { opacity: 1; }

/* ─── Divider ─────────────────────────────────────────────────────── */

.alm-divider {
	border:     none;
	border-top: var(--alm-border-standard);
	margin:     0;
}

/* ─── Status alert box ────────────────────────────────────────────── */

.alm-alert {
	display:       flex;
	align-items:   flex-start;
	gap:           var(--alm-space-3);
	padding:       var(--alm-space-4);
	border-radius: var(--alm-radius-md);
	border:        var(--alm-border-width) solid transparent;
	font-size:     var(--alm-text-sm);
	line-height:   var(--alm-leading-normal);
}

.alm-alert--success {
	background-color: var(--alm-color-success-bg);
	border-color:     var(--alm-color-success);
	color:            var(--alm-color-success);
}

.alm-alert--warning {
	background-color: var(--alm-color-warning-bg);
	border-color:     var(--alm-color-warning);
	color:            var(--alm-color-warning);
}

.alm-alert--error {
	background-color: var(--alm-color-error-bg);
	border-color:     var(--alm-color-error);
	color:            var(--alm-color-error);
}

.alm-alert--info {
	background-color: var(--alm-color-info-bg);
	border-color:     var(--alm-color-info);
	color:            var(--alm-color-info);
}

.alm-alert__title {
	font-weight:    var(--alm-weight-semibold);
	margin-block-end: var(--alm-space-1);
}

.alm-alert__body {
	color: var(--alm-color-text-primary);
}


/* ═══════════════════════════════════════════════════════════════════
   BRAND FOUNDATION REFRESH — 2026
   ══════════════════════════════════════════════════════════════════ */

.alm-bg-warm {
	background-color: var(--alm-color-surface-warm);
}

.alm-bg-dark {
	background-color: var(--alm-color-surface-dark);
	color: var(--alm-color-text-inverse);
}

.alm-text-copper {
	color: var(--alm-color-copper-deep);
}

.alm-shadow-soft {
	box-shadow: var(--alm-shadow-md);
}

.alm-reading-width {
	max-width: var(--alm-content-readable);
}

.alm-balance {
	text-wrap: balance;
}

.alm-pretty {
	text-wrap: pretty;
}

.alm-isolate {
	isolation: isolate;
}

@media (max-width: 47.99rem) {
	.alm-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 48rem) {
	.alm-show-mobile-only {
		display: none !important;
	}
}