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

/* ── Display ── */
.hidden         { display: none !important; }
.block          { display: block; }
.inline-block   { display: inline-block; }

/* ── Text alignment ── */
.text-left      { text-align: left; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }

/* ── Text styles ── */
.text-xs        { font-size: var(--text-xs); }
.text-sm        { font-size: var(--text-sm); }
.text-base      { font-size: var(--text-base); }
.text-lg        { font-size: var(--text-lg); }
.text-xl        { font-size: var(--text-xl); }

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

.text-muted     { color: var(--color-gray-500); }
.text-dark      { color: var(--color-black); }
.text-white     { color: var(--color-white); }
.text-teal      { color: var(--color-primary-teal); }
.text-danger    { color: var(--color-danger); }
.text-success   { color: var(--color-success); }

.uppercase      { text-transform: uppercase; }
.tracking-wide  { letter-spacing: 2.5px; }

/* ── Spacing ── */
.mt-0  { margin-top: 0; }
.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); }

.mb-0  { margin-bottom: 0; }
.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); }

.pt-0  { padding-top: 0; }
.pb-0  { padding-bottom: 0; }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }

/* ── Width ── */
.w-full { width: 100%; }
.max-w-narrow { max-width: 600px; }
.max-w-medium { max-width: 800px; }

/* ── Border ── */
.rounded     { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }

/* ── Shadow ── */
.shadow-sm   { box-shadow: var(--shadow-sm); }
.shadow-md   { box-shadow: var(--shadow-md); }
.shadow-lg   { box-shadow: var(--shadow-lg); }

/* ── SR Only (screen reader) ── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ── Backdrop (for sidebar on mobile) ── */
.backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: calc(var(--z-sticky) - 1);
  display: none;
}

.backdrop.is-visible {
  display: block;
}

/* ── Responsive Utilities ── */
@media (max-width: 768px) {
  .hidden-mobile    { display: none !important; }
  .text-center-mobile { text-align: center; }
}

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

/* Prevent horizontal overflow globally */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Touch-friendly tap targets on mobile */
@media (max-width: 768px) {
  a, button, [role="button"], input[type="submit"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Responsive images in content areas */
img {
  max-width: 100%;
  height: auto;
}