/* ============================================
   UTILITY CLASSES
   ============================================ */

/* Spacing */
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.p-xs { padding: var(--space-xs); }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }
.p-xl { padding: var(--space-xl); }

/* Flexbox */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

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

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

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

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

/* Purple Glow */
.glow-purple { box-shadow: var(--glow-purple); }
.glow-gold { box-shadow: var(--glow-gold); }

/* ============================================
   GLOBAL LAYOUT FIXES
   Prevent zoom-related alignment issues
   ============================================ */

/* Prevent horizontal scroll globally */
html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

/* All sections should respect width */
section,
.page {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
}

/* Ensure all grids stay contained */
[class*="grid"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Center all section headers */
.section-header {
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem;
}

/* Subsection titles */
.subsection-title {
    max-width: 100%;
    margin-bottom: 2rem;
}

/* Prevent any element from causing horizontal scroll */
* {
    max-width: 100vw;
}

/* Fix for decorative elements */
*::before,
*::after {
    max-width: 100vw;
}