/* ============================================================================
   SIRO Utility Classes — token-backed atomic helpers.

   Purpose: an escape hatch for editors who need a common style applied to
   an Elementor widget via "Advanced → CSS Classes" without writing custom CSS.
   Used SPARINGLY. Component-level styles belong in siro-site-kit widget CSS,
   document-level resets belong in overrides.css.

   Each utility:
     - is prefixed `siro-u-` (no global namespace pollution)
     - maps to a single declaration (one purpose, one rule)
     - consumes a token from tokens.css where applicable (no hardcoded values)
     - is single-class (no compound selectors, no specificity creep)

   Enqueue: after siro-overrides so utility class wins normal-cascade contests
   without needing !important.
   ============================================================================ */

/* ---- Text alignment ------------------------------------------------------ */
.siro-u-text-left   { text-align: left; }
.siro-u-text-center { text-align: center; }
.siro-u-text-right  { text-align: right; }
.siro-u-text-balance { text-wrap: balance; } /* Modern browsers — graceful degradation */

/* ---- Text color (token-bound) -------------------------------------------- */
.siro-u-text-primary { color: var(--siro-color-primary); }
.siro-u-text-accent  { color: var(--siro-color-accent); }
.siro-u-text-muted   { color: var(--siro-text-muted); }
.siro-u-text-inverse { color: var(--siro-text-inverse); }

/* ---- Text transforms ----------------------------------------------------- */
.siro-u-uppercase     { text-transform: uppercase; }
.siro-u-tracking-wide { letter-spacing: 0.05em; } /* recurring 5x in widget CSS */
.siro-u-no-underline  { text-decoration: none; }   /* recurring 7x in widget CSS */

/* ---- Display ------------------------------------------------------------- */
.siro-u-block       { display: block; }
.siro-u-flex        { display: flex; }
.siro-u-inline-flex { display: inline-flex; }
.siro-u-grid        { display: grid; }

/* ---- Flex axis + alignment ---------------------------------------------- */
.siro-u-flex-col        { flex-direction: column; }
.siro-u-flex-row        { flex-direction: row; }
.siro-u-items-center    { align-items: center; }
.siro-u-items-start     { align-items: flex-start; }
.siro-u-justify-center  { justify-content: center; }
.siro-u-justify-between { justify-content: space-between; }

/* ---- Spacing (margin, gap) — token-bound to scale steps ----------------- */
.siro-u-mt-2 { margin-top: var(--siro-space-2); }   /* 8px */
.siro-u-mt-4 { margin-top: var(--siro-space-4); }   /* 16px */
.siro-u-mt-6 { margin-top: var(--siro-space-6); }   /* 24px */
.siro-u-mt-8 { margin-top: var(--siro-space-8); }   /* 32px */
.siro-u-mb-2 { margin-bottom: var(--siro-space-2); }
.siro-u-mb-4 { margin-bottom: var(--siro-space-4); }
.siro-u-mb-6 { margin-bottom: var(--siro-space-6); }
.siro-u-mb-8 { margin-bottom: var(--siro-space-8); }
.siro-u-gap-2 { gap: var(--siro-space-2); }
.siro-u-gap-4 { gap: var(--siro-space-4); }
.siro-u-gap-6 { gap: var(--siro-space-6); }

/* ---- Visual / border ----------------------------------------------------- */
.siro-u-rounded-sm { border-radius: var(--siro-radius-sm); }
.siro-u-rounded-md { border-radius: var(--siro-radius-md); }
.siro-u-rounded-lg { border-radius: var(--siro-radius-lg); }
.siro-u-overflow-hidden { overflow: hidden; }

/* ---- Accessibility ------------------------------------------------------- */
.siro-u-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;
}