/* ===== Utility Classes ===== */
.text-center {
    text-align: center;
}

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

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

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-lg); }
.mt-3 { margin-top: var(--spacing-xl); }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-lg); }
.mb-3 { margin-bottom: var(--spacing-xl); }
.p-1 { padding: var(--spacing-sm); }
.p-2 { padding: var(--spacing-lg); }
.p-3 { padding: var(--spacing-xl); }

/* Additional utility classes */
.fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.smooth-scroll {
    scroll-behavior: smooth;
}

.responsive-image {
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    display: block;
}

@media (max-width: 640px) {
    .responsive-image {
        border-radius: var(--border-radius);
    }
}

/* ===== Skip Link ===== */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary-color);
    color: var(--text-white);
    padding: 8px;
    text-decoration: none;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
}

.skip-link:focus {
    top: 0;
}