/* =========================================================
   ALPEKIN UTILITIES LAYER
   ---------------------------------------------------------
   Purpose:
   Small helper classes for repetitive low-level needs.

   Rules:
   - Keep utilities restrained.
   - Prefer layout/components first.
   - Use utilities for small adjustments only.
   ========================================================= */


/* Accessibility helpers. */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
}

.visually-hidden:focus {
  position: fixed !important;
  z-index: var(--z-toast);
  inset-block-start: var(--space-3);
  inset-inline-start: var(--space-3);
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: var(--space-3) var(--space-4) !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  background: var(--surface-clean);
  color: var(--text-strong);
  white-space: normal !important;
}


/* Display helpers. */
.hidden {
  display: none !important;
}

.block {
  display: block !important;
}

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

.flex {
  display: flex !important;
}

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

.grid {
  display: grid !important;
}


/* Alignment helpers. */
.items-center {
  align-items: center !important;
}

.justify-center {
  justify-content: center !important;
}

.justify-between {
  justify-content: space-between !important;
}


/* Text alignment.
   Prefer start/end for multilingual layouts. */
.text-start {
  text-align: start !important;
}

.text-end {
  text-align: end !important;
}

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


/* Text color helpers. */
.text-muted {
  color: var(--text-muted-dark) !important;
}

/* Background helpers. */
.bg-paper {
  background: var(--surface-paper) !important;
}

.bg-clean {
  background: var(--surface-clean) !important;
}

.bg-dark {
  background: var(--surface) !important;
  color: var(--text) !important;
}


/* Size helpers. */
.w-full {
  width: 100% !important;
}

.h-full {
  height: 100% !important;
}

.max-prose {
  max-width: var(--content-measure) !important;
}

.mx-auto {
  margin-inline: auto !important;
}


/* Margin helpers using logical block direction. */
.mt-0 { margin-block-start: var(--space-0) !important; }
.mt-1 { margin-block-start: var(--space-1) !important; }
.mt-2 { margin-block-start: var(--space-2) !important; }
.mt-3 { margin-block-start: var(--space-3) !important; }
.mt-4 { margin-block-start: var(--space-4) !important; }
.mt-5 { margin-block-start: var(--space-5) !important; }
.mt-6 { margin-block-start: var(--space-6) !important; }
.mt-7 { margin-block-start: var(--space-7) !important; }
.mt-8 { margin-block-start: var(--space-8) !important; }

.mb-0 { margin-block-end: var(--space-0) !important; }
.mb-1 { margin-block-end: var(--space-1) !important; }
.mb-2 { margin-block-end: var(--space-2) !important; }
.mb-3 { margin-block-end: var(--space-3) !important; }
.mb-4 { margin-block-end: var(--space-4) !important; }
.mb-5 { margin-block-end: var(--space-5) !important; }
.mb-6 { margin-block-end: var(--space-6) !important; }
.mb-7 { margin-block-end: var(--space-7) !important; }
.mb-8 { margin-block-end: var(--space-8) !important; }


/* Padding helpers using logical block direction. */
.pt-0 { padding-block-start: var(--space-0) !important; }
.pt-1 { padding-block-start: var(--space-1) !important; }
.pt-2 { padding-block-start: var(--space-2) !important; }
.pt-3 { padding-block-start: var(--space-3) !important; }
.pt-4 { padding-block-start: var(--space-4) !important; }
.pt-5 { padding-block-start: var(--space-5) !important; }
.pt-6 { padding-block-start: var(--space-6) !important; }
.pt-7 { padding-block-start: var(--space-7) !important; }
.pt-8 { padding-block-start: var(--space-8) !important; }

.pb-0 { padding-block-end: var(--space-0) !important; }
.pb-1 { padding-block-end: var(--space-1) !important; }
.pb-2 { padding-block-end: var(--space-2) !important; }
.pb-3 { padding-block-end: var(--space-3) !important; }
.pb-4 { padding-block-end: var(--space-4) !important; }
.pb-5 { padding-block-end: var(--space-5) !important; }
.pb-6 { padding-block-end: var(--space-6) !important; }
.pb-7 { padding-block-end: var(--space-7) !important; }
.pb-8 { padding-block-end: var(--space-8) !important; }


/* Gap helpers. */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }
.gap-5 { gap: var(--space-5) !important; }
.gap-6 { gap: var(--space-6) !important; }
.gap-7 { gap: var(--space-7) !important; }
.gap-8 { gap: var(--space-8) !important; }


/* Shape helpers. */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }
.rounded-pill { border-radius: var(--radius-pill) !important; }


/* Border and elevation helpers. */
.border {
  border: var(--border-width) solid var(--border-dark) !important;
}

.border-gold {
  border-color: var(--border-gold-soft) !important;
}

.shadow-sm { box-shadow: var(--elevation-sm) !important; }
.shadow-md { box-shadow: var(--elevation-md) !important; }
.shadow-lg { box-shadow: var(--elevation-lg) !important; }


/* State helpers. */
.no-scroll {
  overflow: hidden !important;
}