/* ==========================================================================
   Utility Classes
   Lightweight Tailwind-style helpers using design tokens.
   Use sparingly in PHP templates for quick spacing/layout adjustments.

   Specificity: [class].u-* = (0,2,0) — beats single-class component
   selectors without needing !important.
   ========================================================================== */

/* ---------- Display ---------- */
[class].u-block { display: block; }
[class].u-flex { display: flex; }
[class].u-grid { display: grid; }
[class].u-inline-flex { display: inline-flex; }
[class].u-hidden { display: none; }

/* ---------- Flex ---------- */
[class].u-items-center { align-items: center; }
[class].u-items-start { align-items: flex-start; }
[class].u-items-end { align-items: flex-end; }
[class].u-justify-center { justify-content: center; }
[class].u-justify-between { justify-content: space-between; }
[class].u-justify-start { justify-content: flex-start; }
[class].u-justify-end { justify-content: flex-end; }
[class].u-flex-col { flex-direction: column; }
[class].u-flex-row { flex-direction: row; }
[class].u-flex-wrap { flex-wrap: wrap; }
[class].u-flex-1 { flex: 1; }
[class].u-flex-shrink-0 { flex-shrink: 0; }

/* ---------- Text Alignment ---------- */
[class].u-text-center { text-align: center; }
[class].u-text-left { text-align: left; }
[class].u-text-right { text-align: right; }

/* ---------- Width ---------- */
[class].u-w-full { width: 100%; }
[class].u-max-w-content { max-width: var(--max-content-width); }
[class].u-max-w-container { max-width: var(--max-container-width); }
[class].u-mx-auto { margin-inline: auto; }

/* ---------- Gap ---------- */
[class].u-gap-4 { gap: var(--spacing-4); }
[class].u-gap-8 { gap: var(--spacing-8); }
[class].u-gap-12 { gap: var(--spacing-12); }
[class].u-gap-16 { gap: var(--spacing-16); }
[class].u-gap-24 { gap: var(--spacing-24); }
[class].u-gap-32 { gap: var(--spacing-32); }
[class].u-gap-48 { gap: var(--spacing-48); }
[class].u-gap-64 { gap: var(--spacing-64); }

/* ---------- Margin ---------- */
[class].u-m-0 { margin: 0; }
[class].u-m-auto { margin: auto; }

[class].u-mt-0 { margin-top: 0; }
[class].u-mt-4 { margin-top: var(--spacing-4); }
[class].u-mt-8 { margin-top: var(--spacing-8); }
[class].u-mt-12 { margin-top: var(--spacing-12); }
[class].u-mt-16 { margin-top: var(--spacing-16); }
[class].u-mt-24 { margin-top: var(--spacing-24); }
[class].u-mt-32 { margin-top: var(--spacing-32); }
[class].u-mt-48 { margin-top: var(--spacing-48); }
[class].u-mt-64 { margin-top: var(--spacing-64); }

[class].u-mb-0 { margin-bottom: 0; }
[class].u-mb-4 { margin-bottom: var(--spacing-4); }
[class].u-mb-8 { margin-bottom: var(--spacing-8); }
[class].u-mb-12 { margin-bottom: var(--spacing-12); }
[class].u-mb-16 { margin-bottom: var(--spacing-16); }
[class].u-mb-24 { margin-bottom: var(--spacing-24); }
[class].u-mb-32 { margin-bottom: var(--spacing-32); }
[class].u-mb-48 { margin-bottom: var(--spacing-48); }
[class].u-mb-64 { margin-bottom: var(--spacing-64); }

[class].u-ml-0 { margin-left: 0; }
[class].u-ml-4 { margin-left: var(--spacing-4); }
[class].u-ml-8 { margin-left: var(--spacing-8); }
[class].u-ml-16 { margin-left: var(--spacing-16); }
[class].u-ml-24 { margin-left: var(--spacing-24); }

[class].u-mr-0 { margin-right: 0; }
[class].u-mr-4 { margin-right: var(--spacing-4); }
[class].u-mr-8 { margin-right: var(--spacing-8); }
[class].u-mr-16 { margin-right: var(--spacing-16); }
[class].u-mr-24 { margin-right: var(--spacing-24); }

[class].u-my-0 { margin-block: 0; }
[class].u-my-8 { margin-block: var(--spacing-8); }
[class].u-my-16 { margin-block: var(--spacing-16); }
[class].u-my-24 { margin-block: var(--spacing-24); }
[class].u-my-32 { margin-block: var(--spacing-32); }
[class].u-my-48 { margin-block: var(--spacing-48); }

[class].u-mx-0 { margin-inline: 0; }
[class].u-mx-8 { margin-inline: var(--spacing-8); }
[class].u-mx-16 { margin-inline: var(--spacing-16); }
[class].u-mx-24 { margin-inline: var(--spacing-24); }

/* ---------- Padding ---------- */
[class].u-p-0 { padding: 0; }
[class].u-p-8 { padding: var(--spacing-8); }
[class].u-p-12 { padding: var(--spacing-12); }
[class].u-p-16 { padding: var(--spacing-16); }
[class].u-p-24 { padding: var(--spacing-24); }
[class].u-p-32 { padding: var(--spacing-32); }
[class].u-p-48 { padding: var(--spacing-48); }

[class].u-pt-0 { padding-top: 0; }
[class].u-pt-8 { padding-top: var(--spacing-8); }
[class].u-pt-16 { padding-top: var(--spacing-16); }
[class].u-pt-24 { padding-top: var(--spacing-24); }
[class].u-pt-32 { padding-top: var(--spacing-32); }
[class].u-pt-48 { padding-top: var(--spacing-48); }
[class].u-pt-64 { padding-top: var(--spacing-64); }
[class].u-pt-96 { padding-top: var(--spacing-96); }

[class].u-pb-0 { padding-bottom: 0; }
[class].u-pb-8 { padding-bottom: var(--spacing-8); }
[class].u-pb-16 { padding-bottom: var(--spacing-16); }
[class].u-pb-24 { padding-bottom: var(--spacing-24); }
[class].u-pb-32 { padding-bottom: var(--spacing-32); }
[class].u-pb-48 { padding-bottom: var(--spacing-48); }
[class].u-pb-64 { padding-bottom: var(--spacing-64); }
[class].u-pb-96 { padding-bottom: var(--spacing-96); }

[class].u-pl-0 { padding-left: 0; }
[class].u-pl-8 { padding-left: var(--spacing-8); }
[class].u-pl-16 { padding-left: var(--spacing-16); }
[class].u-pl-24 { padding-left: var(--spacing-24); }

[class].u-pr-0 { padding-right: 0; }
[class].u-pr-8 { padding-right: var(--spacing-8); }
[class].u-pr-16 { padding-right: var(--spacing-16); }
[class].u-pr-24 { padding-right: var(--spacing-24); }

[class].u-py-0 { padding-block: 0; }
[class].u-py-8 { padding-block: var(--spacing-8); }
[class].u-py-16 { padding-block: var(--spacing-16); }
[class].u-py-24 { padding-block: var(--spacing-24); }
[class].u-py-32 { padding-block: var(--spacing-32); }
[class].u-py-48 { padding-block: var(--spacing-48); }
[class].u-py-64 { padding-block: var(--spacing-64); }
[class].u-py-96 { padding-block: var(--spacing-96); }
[class].u-py-128 { padding-block: var(--spacing-128); }

[class].u-px-0 { padding-inline: 0; }
[class].u-px-8 { padding-inline: var(--spacing-8); }
[class].u-px-16 { padding-inline: var(--spacing-16); }
[class].u-px-24 { padding-inline: var(--spacing-24); }
[class].u-px-32 { padding-inline: var(--spacing-32); }
[class].u-px-48 { padding-inline: var(--spacing-48); }

/* ---------- Border Radius ---------- */
[class].u-rounded-0 { border-radius: 0; }
[class].u-rounded-4 { border-radius: var(--border-radius-4); }
[class].u-rounded-8 { border-radius: var(--border-radius-8); }
[class].u-rounded-12 { border-radius: var(--border-radius-12); }
[class].u-rounded-16 { border-radius: var(--border-radius-16); }
[class].u-rounded-24 { border-radius: var(--border-radius-24); }
[class].u-rounded-full { border-radius: 9999px; }

/* ---------- Overflow ---------- */
[class].u-overflow-hidden { overflow: hidden; }
[class].u-overflow-auto { overflow: auto; }

/* ---------- Position ---------- */
[class].u-relative { position: relative; }
[class].u-absolute { position: absolute; }
[class].u-sticky { position: sticky; }

/* ---------- Visibility ---------- */
[class].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-width: 0;
}