/* =============================================
   UTILITIES.CSS — Single-purpose helper classes
   SM Technical Consultancy
   ============================================= */

/* === TEXT ALIGNMENT === */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* === TEXT COLOURS === */
.text-accent { color: var(--color-accent); }
.text-slate  { color: var(--color-slate); }
.text-white  { color: var(--color-white); }
.text-navy   { color: var(--color-navy); }

/* === FONT SIZES === */
.font-xs   { font-size: var(--font-size-xs); }
.font-sm   { font-size: var(--font-size-sm); }
.font-md   { font-size: var(--font-size-md); }
.font-lg   { font-size: var(--font-size-lg); }

/* === FONT WEIGHTS === */
.font-regular   { font-weight: var(--font-weight-regular); }
.font-medium    { font-weight: var(--font-weight-medium); }
.font-semibold  { font-weight: var(--font-weight-semibold); }
.font-bold      { font-weight: var(--font-weight-bold); }

/* === MARGINS === */
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }

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

.mx-auto { margin-left: auto; margin-right: auto; }

/* === DISPLAY === */
.d-flex        { display: flex; }
.d-grid        { display: grid; }
.d-block       { display: block; }
.d-inline      { display: inline; }
.d-none        { display: none; }

/* === FLEX UTILITIES === */
.flex-wrap     { flex-wrap: wrap; }
.align-center  { align-items: center; }
.align-start   { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col      { flex-direction: column; }

/* === GAP === */
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-5  { gap: var(--space-5); }
.gap-6  { gap: var(--space-6); }

/* === MAX WIDTH === */
.max-w-text    { max-width: var(--max-width-text); }
.max-w-content { max-width: var(--max-width-content); }

/* === PADDING === */
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }

/* === BORDER RADIUS === */
.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-pill { border-radius: var(--radius-pill); }

/* === ACCESSIBILITY === */
.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;
}

/* === LINE CLAMPING === */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === SEPARATOR === */
.sep {
  height: 1px;
  background-color: var(--color-border-light);
  margin: var(--space-5) 0;
}

.sep--dark {
  background-color: var(--color-border);
}

/* === WHY LIST === */
.why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.why-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-navy);
  line-height: var(--line-height-body);
}

.why-list li::before {
  content: '✓';
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
  flex-shrink: 0;
}