/*
 Theme Name: YouVideo Child
 Theme URI: http://example.com/
 Description: Child theme for YouVideo
 Author: Your Name
 Author URI: http://example.com/
 Template: youvideo
 Version: 1.0.0
*/

/* Import Parent Theme CSS */
@import url("../youvideo/style.css");

/* Custom CSS starts here */
/* Leave empty or add your own styles below */

@media only screen and (max-width: 768px) {

    /* Post thumbnail */
    .post-thumbnail img {
        width: 100%;
        height: auto;
        max-height: 220px;
        object-fit: cover;
    }

    /* Mobile category list */
    .mobile-category-wrapper {
        margin-top: 10px;
        display: flex;
        justify-content: center;
    }

    .mobile-category-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        max-width: 100%;
    }

    .mobile-category-list a {
        padding: 4px 10px;
        font-size: 13px;
        line-height: 1.4;
        white-space: nowrap;
        border-radius: 4px;
    }

    /* Latest Video list mobile only */
    .mobile-latest-category-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-top: 12px;
    }

    .mobile-latest-category-list .latest-cat-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 45%;  /* two per row */
        text-align: center;
        font-size: 13px;
        text-decoration: none;
    }

    .mobile-latest-category-list .latest-cat-item img {
        width: 100%;
        height: 120px;
        object-fit: cover;
        border-radius: 4px;
        margin-bottom: 4px;
    }

    .mobile-latest-category-list .latest-cat-title {
        display: block;
    }
}

/* ===============================================
1️⃣ Hide desktop site title below category text
2️⃣ Keep mobile category buttons visible
================================================ */

/* Desktop: hide text links below site title */
@media only screen and (min-width: 769px) {
    /* Hide primary nav category list */
    #primary-nav {
        display: none !important;
    }

    /* Hide any mobile-category-wrapper text (just in case) */
    .mobile-category-wrapper {
        display: none !important;
    }
}

/* Mobile: keep category buttons visible */
@media only screen and (max-width: 768px) {
    .mobile-category-wrapper {
        display: block !important; /* show buttons */
        text-align: center;
        margin-top: 12px;
        position: static !important; /* ensure scroll with page */
        z-index: auto !important;
    }

    .mobile-category-list a {
        display: inline-block;
        padding: 6px 12px;
        font-size: 13px;
        line-height: 1.5;
        border-radius: 4px;
        background-color: #f1f1f1;
        color: #333;
        text-decoration: none;
        transition: 0.3s;
    }

    .mobile-category-list a:hover {
        background-color: #ff2b2b;
        color: #fff;
    }
}



.video-player-wrapper video{
display:block;
margin-bottom:4px;
}

.video-meta-container{
display:flex;
align-items:center;
justify-content:flex-start;
gap:15px;
margin-top:4px;
padding-top:0;
}


/* ===============================================
🟢 YouVideo Child Theme - Mobile Adjustments
================================================ */

/* Remove @import if previously used, parent style enqueued in functions.php */

/* Mobile Home Layout Adjustments */
@media only screen and (max-width: 768px) {

    /* Flex container for post thumbnail + category + latest videos */
    body.home {
        display: flex;
        flex-direction: column;
    }

    /* Mobile Category Buttons - stay on top */
    .mobile-category-wrapper {
        order: 1;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
        margin: 10px auto 6px auto;
    }

    .mobile-category-list a {
        display: inline-block;
        padding: 6px 12px;
        font-size: 13px;
        line-height: 1.5;
        border-radius: 4px;
        background-color: #f1f1f1;
        color: #333;
        text-decoration: none;
        transition: 0.3s;
    }

    .mobile-category-list a:hover {
        background-color: #ff2b2b;
        color: #fff;
    }

    /* Latest Video section moves below category, hide title */
    .mobile-latest-category-list,
    .mobile-latest-posts {
        order: 2;
        display: flex !important;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        margin-top: 6px;
    }

    .mobile-latest-category-list .latest-cat-title,
    .mobile-latest-post-title {
        display: none !important; /* Hide “Latest Video” text on mobile home */
    }

    .mobile-latest-posts .latest-post-item {
        width: 45%; /* two per row */
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mobile-latest-posts .latest-post-item img {
        width: 100%;
        height: auto;
        border-radius: 4px;
        margin-bottom: 4px;
    }

    /* Post thumbnails fit mobile */
    .post-thumbnail img {
        width: 100%;
        height: auto;
        max-height: 220px;
        object-fit: cover;
    }

    /* Optional spacing between thumbnail, category buttons, latest posts */
    .post-thumbnail + .mobile-category-wrapper {
        margin-top: 12px;
    }

    .mobile-category-wrapper + .mobile-latest-posts {
        margin-top: 6px;
    }
@media only screen and (max-width: 768px) {

}