/* ==========================================================================
   Utilities — Berashith Ministry
   ========================================================================== */

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

/* --- Text colours --------------------------------------------------------- */
.text-gold    { color: var(--color-gold); }
.text-white   { color: var(--color-white); }
.text-muted   { color: var(--color-text-muted); }
.text-light   { color: var(--color-text-light); }

/* --- Font size helpers ---------------------------------------------------- */
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }

/* --- Font weight ---------------------------------------------------------- */
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }

/* --- Display -------------------------------------------------------------- */
.block         { display: block; }
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { display: flex; flex-direction: column; }
.items-center  { align-items: center; }

/* --- Spacing -------------------------------------------------------------- */
.mt-4  { margin-top: var(--sp-4); }
.mt-6  { margin-top: var(--sp-6); }
.mt-8  { margin-top: var(--sp-8); }
.mt-12 { margin-top: var(--sp-12); }
.mb-4  { margin-bottom: var(--sp-4); }
.mb-8  { margin-bottom: var(--sp-8); }

/* --- Width / max-width ---------------------------------------------------- */
.w-full   { width: 100%; }
.max-w-sm { max-width: 400px; margin-inline: auto; }
.max-w-md { max-width: 600px; margin-inline: auto; }
.max-w-lg { max-width: 800px; margin-inline: auto; }

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

/* --- Position ------------------------------------------------------------- */
.relative { position: relative; }

/* --- Gap ------------------------------------------------------------------ */
.gap-4  { gap: var(--sp-4); }
.gap-6  { gap: var(--sp-6); }
.gap-8  { gap: var(--sp-8); }

/* --- Responsive visibility ------------------------------------------------ */
@media (max-width: 640px)  { .hide-mobile  { display: none !important; } }
@media (min-width: 641px)  { .hide-desktop { display: none !important; } }