/* Responsive design improvements for all screen sizes */

/* Mobile-first approach - styles for mobile devices */
@media (max-width: 575.98px) {
    /* Navigation improvements */
    .navbar-brand {
        font-size: 1rem;
    }
    
    /* Hero section adjustments */
    .display-5 {
        font-size: 1.75rem;
    }
    
    .lead {
        font-size: 1rem;
        line-height: 1.4;
    }
    
    /* Button improvements */
    .btn-lg {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
    }
    
    /* Card spacing */
    .card-body {
        padding: 1rem;
    }
    
    /* Table responsiveness */
    .table-responsive {
        font-size: 0.875rem;
    }
    
    /* Code blocks */
    pre {
        font-size: 0.75rem;
        overflow-x: auto;
        white-space: pre-wrap;
        word-wrap: break-word;
    }
    
    /* Footer adjustments */
    footer p {
        font-size: 0.875rem;
    }
}

/* Tablet improvements */
@media (min-width: 576px) and (max-width: 991.98px) {
    .display-5 {
        font-size: 2.25rem;
    }
    
    .lead {
        font-size: 1.125rem;
    }
    
    .card-body {
        padding: 1.25rem;
    }
}

/* Desktop improvements */
@media (min-width: 992px) {
    .display-5 {
        font-size: 2.5rem;
    }
    
    .container {
        max-width: 1200px;
    }
}

/* General responsive improvements */
.table-responsive {
    border: none;
}

.table-responsive table {
    margin-bottom: 0;
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Improve form controls on mobile */
@media (max-width: 575.98px) {
    .form-control {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Better spacing for cards on mobile */
@media (max-width: 575.98px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .g-3 > * {
        padding: 0.5rem;
    }
    
    .g-4 > * {
        padding: 0.75rem;
    }
}

/* Improve pricing card layout */
@media (max-width: 767.98px) {
    .pricing-card-popular .position-absolute {
        position: relative !important;
        transform: none !important;
        top: auto !important;
        left: auto !important;
        margin-bottom: 0.5rem;
    }
}

/* Better alert spacing on mobile */
@media (max-width: 575.98px) {
    .alert {
        padding: 0.75rem;
        font-size: 0.875rem;
    }
}

/* Improve navigation on mobile */
@media (max-width: 991.98px) {
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
    }
}