/**
 * JokeTok - Responsive Design Optimization
 * Style optimizations for mobile devices and various screen sizes
 */

/* Small screen devices (phones, less than 768px) */
@media (max-width: 767.98px) {
    /* Global style adjustments */
    body {
        font-size: 14px;
    }
    
    /* Navigation bar optimization */
    .navbar-brand {
        font-size: 1.5rem;
    }
    
    /* Homepage hero section */
    .hero {
        padding: 3rem 0;
        border-radius: 0 0 30px 30px;
    }
    
    .hero h1 {
        font-size: 2.5rem;
    }
    
    /* Joke card optimization */
    .joke-card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .joke-text {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 1rem;
    }
    
    /* Categories page sidebar */
    .category-sidebar {
        position: static;
        width: 100%;
        height: auto;
        margin-bottom: 1.5rem;
    }
    
    .category-content {
        margin-left: 0;
    }
    
    /* Popular jokes page */
    .trending-number {
        width: 30px;
        height: 30px;
        font-size: 1rem;
    }
    
    .trending-badge {
        padding: 0.2rem 0.5rem;
        font-size: 0.7rem;
    }
    
    /* Form element optimization */
    .form-control, .btn {
        font-size: 0.9rem;
        padding: 0.375rem 0.75rem;
    }
}

/* Medium screen devices (tablets, 768px to 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    /* Categories page sidebar */
    .category-sidebar {
        width: 200px;
    }
    
    .category-content {
        margin-left: 220px;
    }
    
    /* Joke card optimization */
    .joke-card {
        padding: 1.75rem;
    }
}

/* Large screen devices (desktops, 992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    /* Possible large screen optimizations */
}

/* Extra large screen devices (large desktops, 1200px and above) */
@media (min-width: 1200px) {
    /* Possible extra large screen optimizations */
    .container {
        max-width: 1140px;
    }
}

/* Dark mode optimization */
@media (prefers-color-scheme: dark) {
    body.dark-mode {
        background-color: var(--dark-color);
        color: var(--light-color);
    }
    
    body.dark-mode .joke-card {
        background-color: #3a3a3a;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }
    
    body.dark-mode .navbar {
        background-color: #1a1a2e;
    }
}

/* Print style optimization */
@media print {
    .navbar, .footer, .joke-actions, .sidebar, .search-box {
        display: none !important;
    }
    
    .joke-card {
        box-shadow: none;
        border: 1px solid #ddd;
        break-inside: avoid;
    }
}