/* ==============================================
   UTILITIES — u-* prefix only
   ============================================== */

/* --- Text Alignment --- */
.u-center {
  text-align: center;
}

.u-left {
  text-align: left;
}

.u-right {
  text-align: right;
}

/* --- Text Colors --- */
.u-text-white {
  color: var(--color-white);
}

.u-text-accent {
  color: var(--color-accent-light);
}

.u-muted {
  color: var(--color-text-muted);
}

/* --- Text Sizes --- */
.u-text-xs {
  font-size: var(--font-size-xs);
}

.u-text-sm {
  font-size: var(--font-size-sm);
}

.u-text-lg {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-relaxed);
}

.u-text-xl {
  font-size: var(--font-size-xl);
}

/* --- Backgrounds --- */
.u-bg-light {
  background-color: var(--color-bg-light);
}

.u-bg-dark {
  background-color: var(--color-bg-dark);
}

.u-bg-white {
  background-color: var(--color-white);
}

/* --- Margin Bottom (8px scale) --- */
.u-mb-0 {
  margin-bottom: 0;
}

.u-mb-8 {
  margin-bottom: 0.5rem; /* 8px */
}

.u-mb-16 {
  margin-bottom: 1rem; /* 16px */
}

.u-mb-24 {
  margin-bottom: 1.5rem; /* 24px */
}

.u-mb-32 {
  margin-bottom: 2rem; /* 32px */
}

.u-mb-48 {
  margin-bottom: 3rem; /* 48px */
}

.u-mt-8 {
  margin-top: var(--space-8);
}

/* --- Display --- */
.u-hidden {
  display: none;
}

/* SEO heading — visible to crawlers, subtle visually */
.seo-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal, 400);
  color: var(--color-text-muted, #999);
  text-align: center;
  padding: var(--space-6) 0 0;
  margin: 0;
}

.is-hidden {
  display: none;
}

.u-block {
  display: block;
}

.u-inline-block {
  display: inline-block;
}

.u-flex {
  display: flex;
}

/* --- Visually Hidden (Accessible) --- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Font Weight --- */
.u-bold {
  font-weight: var(--font-weight-bold);
}

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

/* --- Width --- */
.u-full-width {
  width: 100%;
}

/* === Responsive Utilities === */
@media (max-width: 767px) {
  html .u-hidden-mobile { display: none; }
  .u-center-mobile { text-align: center; }
  .u-block-mobile { display: block; width: 100%; }
  .u-text-sm-mobile { font-size: var(--font-size-sm); }
}

@media (max-width: 1023px) {
  html .u-hidden-tablet { display: none; }
}

@media (min-width: 1024px) {
  html .u-hidden-desktop { display: none; }
}

/* --- Clickable data-href elements --- */
[data-href] {
  cursor: pointer;
}