/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.hello {
    color: red;
}

/* Bullet points para markdown */
.markdown-content ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 1rem;
}

.markdown-content ol {
    list-style-type: decimal;
    list-style-position: inside;
    margin-left: 1rem;
}

.markdown-content li {
    margin-bottom: 0.25rem;
}

/* Custom scrollbar for showcase preview */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Enhanced animations for showcase preview */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(59, 130, 246, 0);
    }
}

.showcase-preview-card {
    animation: fadeInUp 0.3s ease-out;
}

.loading-pulse {
    animation: pulseGlow 2s infinite;
}

/* Border width for loading spinner */
.border-3 {
    border-width: 3px;
}

/* Mobile Navigation Styles */
@media (max-width: 768px) {
    /* Add padding to main content to account for fixed bottom nav */
    body {
        padding-bottom: 5rem;
    }

    main {
        padding-bottom: 1rem;
    }

    /* Ensure all content containers have bottom padding */
    .container,
    .content-wrapper,
    main > div {
        padding-bottom: 1rem;
    }
}

/* Mobile menu modal animation */
[data-mobile-menu-target="content"] {
    transform: translateY(100%);
}

/* Smooth slide animation for mobile menu */
@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(100%);
    }
}