/**
 * Responsive layouts adjusters (responsive.css)
 */

@media (max-width: 991.98px) {
    /* Hide sidebar by default */
    #sidebar {
        transform: translateX(-100%);
        box-shadow: 10px 0 20px rgba(0,0,0,0.5);
    }
    
    #sidebar.show {
        transform: translateX(0);
    }
    
    /* Content takes full screen width */
    #main-content {
        margin-left: 0;
        width: 100%;
        padding-top: var(--header-height);
    }
    
    #header-nav {
        left: 0;
        justify-content: space-between;
    }
    
    .brand-container {
        width: auto;
    }
    
    /* Sidebar toggle button helper class */
    .sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.6);
        z-index: 1020;
        display: none;
    }
    
    .sidebar-overlay.show {
        display: block;
    }
    
    /* Make search bar smaller */
    .search-form {
        max-width: 250px;
    }
}

@media (max-width: 575.98px) {
    /* Mobile search optimizations */
    .search-form {
        max-width: 160px;
    }
    
    .search-input-group {
        padding: 1px 3px 1px 8px;
    }
    
    .search-input-group input {
        font-size: 0.8rem;
    }
    
    #header-nav {
        padding: 0 0.75rem;
    }
    
    /* Mobile list spacing */
    .video-card .card-title {
        font-size: 0.85rem !important;
    }
    
    /* Detail page spacing adjustments */
    .action-bar {
        padding: 0.5rem 0.75rem;
    }
    
    .action-bar button, .action-bar a {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    
    .tab-nav .nav-link {
        padding: 0.5rem 0.75rem;
        font-size: 0.85rem;
    }

    /* Fix detail page meta row wrapping on small screens */
    .detail-meta-row {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 0.5rem !important;
    }

    .detail-meta-info {
        font-size: 0.78rem !important;
    }

    .detail-meta-actions {
        flex-wrap: wrap;
    }

    /* Related video cards should not stretch tall on mobile */
    #video-details-related .col-6 {
        height: auto !important;
    }

    #video-details-related .video-card.card {
        height: auto !important;
    }

    #video-details-related .video-card img {
        max-height: 100px;
        aspect-ratio: 16/9;
    }
}

/* === GLOBAL: Force .text-muted to be readable on dark backgrounds === */
.text-muted {
    color: rgba(185, 185, 185, 0.9) !important;
}

/* Footer links */
footer a.hover-gold {
    color: rgba(185, 185, 185, 0.85);
    text-decoration: none;
}

footer a.hover-gold:hover {
    color: var(--color-gold);
}