/* ==========================================================================
   Utility Classes
   ========================================================================== */

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

.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;
}

/* --- Skip navigation link --- */

.ca-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 1000;
  padding: var(--space-3) var(--space-6);
  background: var(--color-action);
  color: var(--color-white);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  transition: top var(--transition-fast);
}

.ca-skip-link:focus {
  top: 0;
}

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

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

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

.text-white      { color: var(--color-white); }
.text-secondary  { color: var(--color-text-secondary); }
.text-action     { color: var(--color-action); }
.text-accent     { color: var(--color-accent); }

/* --- Font weight --- */

.font-medium   { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold     { font-weight: var(--font-weight-bold); }

/* --- Font size --- */

.text-sm   { font-size: var(--font-size-sm); }
.text-lg   { font-size: var(--font-size-lg); }
.text-xl   { font-size: var(--font-size-xl); }

/* --- Margin top --- */

.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

/* --- Margin bottom --- */

.mb-2  { margin-bottom: var(--space-2); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }

/* --- Width --- */

.w-full { width: 100%; }

/* --- Display --- */

.block        { display: block; }
.inline-block { display: inline-block; }
.hidden       { display: none; }

@media (max-width: 768px) {
  .hide-mobile { display: none; }
}

@media (min-width: 769px) {
  .hide-desktop { display: none; }
}