/* ============================================================
   WellServe — utilities.css
   Single-purpose helper classes. Use these instead of writing
   inline styles or one-off rules for common needs.
   ============================================================ */

/* ---------- Text ---------- */
.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }
.text-muted{ color: var(--color-text-muted); }

/* ---------- Spacing ---------- */
.mt-sm{ margin-top: var(--space-3); }
.mt-md{ margin-top: var(--space-5); }
.mt-lg{ margin-top: var(--space-7); }
.mb-sm{ margin-bottom: var(--space-3); }
.mb-md{ margin-bottom: var(--space-5); }
.mb-lg{ margin-bottom: var(--space-7); }
.mb-0{ margin-bottom: 0; }
.mt-0{ margin-top: 0; }

/* ---------- Flex / layout helpers ---------- */
.flex{ display: flex; }
.flex-center{ display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-wrap{ flex-wrap: wrap; }
.gap-sm{ gap: var(--space-3); }
.gap-md{ gap: var(--space-5); }

/* ---------- Surface / elevation ---------- */
.surface{ background: var(--color-surface); border: 1px solid var(--color-border); }
.rounded{ border-radius: var(--radius); }
.rounded-lg{ border-radius: var(--radius-large); }
.shadow{ box-shadow: var(--shadow); }
.shadow-sm{ box-shadow: var(--shadow-sm); }

/* ---------- Visibility ---------- */
.hide-mobile{ }
.show-mobile{ display: none; }
@media (max-width: 760px){
  .hide-mobile{ display: none !important; }
  .show-mobile{ display: block !important; }
}

/* ---------- Screen-reader only (accessible but visually hidden) ---------- */
.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;
}