/* =========================
   UTILITIES
   Small, single-purpose helper classes
   ========================= */

/* =========================
   DISPLAY
   ========================= */

.u-hidden {
	display: none !important;
}

.u-block {
	display: block !important;
}

.u-inline-block {
	display: inline-block !important;
}

.u-flex {
	display: flex !important;
}

.u-inline-flex {
	display: inline-flex !important;
}

.u-grid {
	display: grid !important;
}

/* =========================
   VISIBILITY
   ========================= */

.u-invisible {
	visibility: hidden !important;
}

.u-visible {
	visibility: visible !important;
}

.u-opacity-0 {
	opacity: 0 !important;
}

.u-opacity-100 {
	opacity: 1 !important;
}

/* =========================
   POSITION
   ========================= */

.u-relative {
	position: relative !important;
}

.u-absolute {
	position: absolute !important;
}

.u-fixed {
	position: fixed !important;
}

/* =========================
   OVERFLOW
   ========================= */

.u-overflow-hidden {
	overflow: hidden !important;
}

.u-overflow-visible {
	overflow: visible !important;
}

.u-overflow-x-hidden {
	overflow-x: hidden !important;
}

.u-overflow-y-hidden {
	overflow-y: hidden !important;
}

/* =========================
   WIDTH / CONTAINMENT
   ========================= */

.u-w-full {
	width: 100% !important;
}

.u-max-w-none {
	max-width: none !important;
}

.u-mx-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================
   TEXT ALIGNMENT
   ========================= */

.u-text-left {
	text-align: left !important;
}

.u-text-center {
	text-align: center !important;
}

.u-text-right {
	text-align: right !important;
}

/* =========================
   TEXT TRANSFORM
   ========================= */

.u-uppercase {
	text-transform: uppercase !important;
}

.u-normal-case {
	text-transform: none !important;
}

/* =========================
   FONT WEIGHT
   ========================= */

.u-fw-400 {
	font-weight: 400 !important;
}

.u-fw-500 {
	font-weight: 500 !important;
}

.u-fw-600 {
	font-weight: 600 !important;
}

.u-fw-700 {
	font-weight: 700 !important;
}

.u-fw-800 {
	font-weight: 800 !important;
}

/* =========================
   COLOR UTILITIES
   ========================= */

.u-text-primary {
	color: var(--rv-text-primary) !important;
}

.u-text-secondary {
	color: var(--rv-text-secondary) !important;
}

.u-text-muted {
	color: var(--rv-text-muted) !important;
}

.u-text-meta {
	color: var(--rv-text-meta) !important;
}

.u-bg-site {
	background-color: var(--rv-bg-site) !important;
}

.u-bg-panel {
	background-color: var(--rv-bg-panel) !important;
}

.u-bg-auth {
	background-color: var(--rv-bg-auth) !important;
}

/* =========================
   BORDER / RADIUS
   ========================= */

.u-radius-sm {
	border-radius: var(--rv-radius-sm) !important;
}

.u-radius-md {
	border-radius: var(--rv-radius-md) !important;
}

.u-radius-lg {
	border-radius: var(--rv-radius-lg) !important;
}

.u-radius-pill {
	border-radius: var(--rv-radius-pill) !important;
}

.u-border-subtle {
	border: 1px solid var(--rv-border-subtle) !important;
}

.u-border-medium {
	border: 1px solid var(--rv-border-medium) !important;
}

.u-border-strong {
	border: 1px solid var(--rv-border-strong) !important;
}

/* =========================
   SHADOWS
   ========================= */

.u-shadow-soft {
	box-shadow: var(--rv-shadow-soft) !important;
}

.u-shadow-elevated {
	box-shadow: var(--rv-shadow-elevated) !important;
}

/* =========================
   INTERACTION
   ========================= */

.u-pointer {
	cursor: pointer !important;
}

.u-no-pointer {
	pointer-events: none !important;
}

.u-pointer-auto {
	pointer-events: auto !important;
}

.u-select-none {
	user-select: none !important;
	-webkit-user-select: none !important;
}

/* =========================
   ACCESSIBILITY
   ========================= */

.u-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* =========================
   RESPONSIVE VISIBILITY
   Keep these here because they are
   generic utility states, not components
   ========================= */

.responsive-block.desktop-only {
	display: block !important;
}

.responsive-block.mobile-only {
	display: none !important;
}

@media (max-width: 768px) {
	.responsive-block.desktop-only {
		display: none !important;
	}

	.responsive-block.mobile-only {
		display: block !important;
	}
}