/* ==========================================================================
   UTILITIES — Single-purpose helper classes
   ========================================================================== */

/* ── Text Alignment ──────────────────────────────────────────────────────── */
.text-left    { text-align: left; }
.text-center  { text-align: center; }
.text-right   { text-align: right; }

/* ── Text Colors ─────────────────────────────────────────────────────────── */
.text-primary   { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-accent    { color: var(--color-accent); }
.text-muted     { color: var(--color-text-secondary); }
.text-white     { color: var(--color-text-white); }

/* ── Font Weights ────────────────────────────────────────────────────────── */
.font-light    { font-weight: var(--weight-light); }
.font-regular  { font-weight: var(--weight-regular); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* ── Font Families ───────────────────────────────────────────────────────── */
.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-quran   { font-family: var(--font-quran); }

/* ── Font Sizes ──────────────────────────────────────────────────────────── */
.text-xs  { font-size: var(--text-xs); }
.text-sm  { font-size: var(--text-sm); }
.text-md  { font-size: var(--text-md); }
.text-lg  { font-size: var(--text-lg); }
.text-xl  { font-size: var(--text-xl); }
.text-2xl { font-size: var(--text-2xl); }
.text-3xl { font-size: var(--text-3xl); }

/* ── Spacing Utilities ───────────────────────────────────────────────────── */
.mt-0  { margin-top: 0; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }

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

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

.pt-0  { padding-top: 0; }
.pb-0  { padding-bottom: 0; }
.p-4   { padding: var(--space-4); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }

/* ── Display ─────────────────────────────────────────────────────────────── */
.d-none  { display: none; }
.d-block { display: block; }
.d-flex  { display: flex; }
.d-grid  { display: grid; }

/* ── Responsive Hide/Show ────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .hide-desktop { display: none !important; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hide-tablet { display: none !important; }
}

/* ── Width ───────────────────────────────────────────────────────────────── */
.w-full  { width: 100%; }
.max-w-text { max-width: var(--container-text); }
.max-w-narrow { max-width: var(--container-narrow); }

/* ── Background Colors ───────────────────────────────────────────────────── */
.bg-primary   { background-color: var(--color-primary); }
.bg-dark      { background-color: var(--color-bg-dark); }
.bg-alt       { background-color: var(--color-bg-secondary); }
.bg-white     { background-color: white; }

/* ── Border Radius ───────────────────────────────────────────────────────── */
.rounded     { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-xl  { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ── Shadows ─────────────────────────────────────────────────────────────── */
.shadow    { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ── Overflow ────────────────────────────────────────────────────────────── */
.overflow-hidden { overflow: hidden; }

/* ── Position ────────────────────────────────────────────────────────────── */
.relative { position: relative; }
.absolute { position: absolute; }

/* ── Animation Classes (used by JS IntersectionObserver) ─────────────────── */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

.animate-on-scroll.delay-1 { transition-delay: 100ms; }
.animate-on-scroll.delay-2 { transition-delay: 200ms; }
.animate-on-scroll.delay-3 { transition-delay: 300ms; }
.animate-on-scroll.delay-4 { transition-delay: 400ms; }

/* Fade in from left */
.animate-slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.animate-slide-left.animated {
  opacity: 1;
  transform: translateX(0);
}

/* Fade in from right */
.animate-slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.animate-slide-right.animated {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up */
.animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-spring);
}

.animate-scale.animated {
  opacity: 1;
  transform: scale(1);
}

/* ── Decorative Glow Effect ──────────────────────────────────────────────── */
.glow-primary {
  box-shadow: 0 0 40px hsla(157, 45%, 20%, 0.15),
              0 0 80px hsla(157, 45%, 20%, 0.05);
}

.glow-gold {
  box-shadow: 0 0 40px hsla(38, 45%, 60%, 0.2),
              0 0 80px hsla(38, 45%, 60%, 0.08);
}

/* ── Gradient Text ───────────────────────────────────────────────────────── */
.gradient-text {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── List Styles ─────────────────────────────────────────────────────────── */
.list-check {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.list-check li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.list-check li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: var(--color-text-white);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  border-radius: 50%;
  margin-top: 2px;
}

/* Gold checkmarks variant */
.list-check--gold li::before {
  background: var(--color-secondary);
  color: var(--color-primary-dark);
}

/* ── Glassmorphism Card ──────────────────────────────────────────────────── */
.glass {
  background: hsla(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsla(255, 255, 255, 0.2);
  border-radius: var(--radius-xl);
}