/*
Theme Name: RetroTube Child - EbonyTrans Layout Fixes
Theme URI: https://www.ebonytrans.com/
Description: Child theme for RetroTube. Homepage full-width videos plus XVideos-style single video layout, ad-only video sidebar, full-width related videos, comments below related videos, and editable single video sidebar ad widgets.
Author: EbonyTrans.com
Template: retrotube
Version: 1.7.0
Text Domain: retrotube-child-ebonytrans
*/

/* ==========================================================
   HOMEPAGE ONLY: remove the main homepage ad/sidebar column.
   This does not remove the single video/player sidebar.
   ========================================================== */
body.home #sidebar,
body.front-page #sidebar {
    display: none !important;
}

body.home .content-area,
body.home .content-area.with-sidebar-right,
body.home .content-area.with-sidebar-left,
body.front-page .content-area,
body.front-page .content-area.with-sidebar-right,
body.front-page .content-area.with-sidebar-left {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

body.home .site-main,
body.home .site-main.with-sidebar-right,
body.home .site-main.with-sidebar-left,
body.front-page .site-main,
body.front-page .site-main.with-sidebar-right,
body.front-page .site-main.with-sidebar-left {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

@media only screen and (min-width: 1024px) {
    body.home .thumb-block,
    body.front-page .thumb-block {
        width: 25%;
    }
}

/* ==========================================================
   SINGLE VIDEO PAGE: player/content left + real sidebar right.
   Related videos are output below both columns and go full-width.
   ========================================================== */
@media only screen and (min-width: 992px) {
    body.single .et-single-top-row,
    body.single-post .et-single-top-row {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important;
        gap: 24px !important;
        width: 100% !important;
        clear: both !important;
        box-sizing: border-box !important;
    }

    body.single .et-single-top-row #primary.content-area,
    body.single-post .et-single-top-row #primary.content-area {
        float: none !important;
        margin: 0 !important;
        width: auto !important;
        max-width: none !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.single .et-single-top-row #main.site-main,
    body.single-post .et-single-top-row #main.site-main,
    body.single .et-single-top-row #main.site-main.with-sidebar-right,
    body.single-post .et-single-top-row #main.site-main.with-sidebar-right {
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.single .et-single-top-row article,
    body.single-post .et-single-top-row article,
    body.single .et-single-top-row .entry-header,
    body.single-post .et-single-top-row .entry-header,
    body.single .et-single-top-row .video-player,
    body.single-post .et-single-top-row .video-player,
    body.single .et-single-top-row .responsive-player,
    body.single-post .et-single-top-row .responsive-player {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.single .et-single-top-row #sidebar.widget-area,
    body.single-post .et-single-top-row #sidebar.widget-area {
        float: none !important;
        margin: 0 !important;
        width: 306px !important;
        max-width: 306px !important;
        flex: 0 0 306px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    body.single .et-single-top-row #sidebar.et-player-height-matched,
    body.single-post .et-single-top-row #sidebar.et-player-height-matched {
        overflow: hidden !important;
    }

    body.single .et-single-related-row,
    body.single-post .et-single-related-row {
        width: 100% !important;
        max-width: 100% !important;
        clear: both !important;
        margin-top: 20px !important;
        box-sizing: border-box !important;
    }

    body.single .et-single-related-row .under-video-block,
    body.single-post .et-single-related-row .under-video-block {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    body.single .et-single-related-row .under-video-block > div:not(.clear):not(.show-more-related),
    body.single-post .et-single-related-row .under-video-block > div:not(.clear):not(.show-more-related) {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.single .et-single-related-row .thumb-block,
    body.single-post .et-single-related-row .thumb-block {
        float: none !important;
        flex: 0 0 calc(20% - 8px) !important;
        width: calc(20% - 8px) !important;
        max-width: calc(20% - 8px) !important;
        margin: 0 !important;
        padding: 5px !important;
        box-sizing: border-box !important;
    }
}

@media only screen and (max-width: 991px) {
    body.single .et-single-top-row,
    body.single-post .et-single-top-row {
        display: block !important;
    }

    body.single .et-single-top-row #primary.content-area,
    body.single-post .et-single-top-row #primary.content-area,
    body.single .et-single-top-row #sidebar.widget-area,
    body.single-post .et-single-top-row #sidebar.widget-area,
    body.single .et-single-related-row,
    body.single-post .et-single-related-row {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}


/* ==========================================================
   V4: Related videos sit below player/sidebar. Comments are back
   and are placed below Related videos. Single video sidebar uses
   ad blocks only.
   ========================================================== */
@media only screen and (min-width: 992px) {
    body.single .et-single-top-row,
    body.single-post .et-single-top-row {
        margin-bottom: 16px !important;
    }

    body.single .et-single-related-row,
    body.single-post .et-single-related-row {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        clear: both !important;
        margin-top: 0 !important;
    }

    body.single .et-single-related-row .widget-title,
    body.single-post .et-single-related-row .widget-title {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.single .et-single-related-row .videos-list,
    body.single-post .et-single-related-row .videos-list {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 12px !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.single .et-single-related-row .videos-list .thumb-block,
    body.single-post .et-single-related-row .videos-list .thumb-block {
        flex: 0 0 calc(20% - 10px) !important;
        width: calc(20% - 10px) !important;
        max-width: calc(20% - 10px) !important;
    }
}


/* V4 sidebar ad-only single page layout */
body.single .et-single-top-row #sidebar .et-sidebar-ad,
body.single-post .et-single-top-row #sidebar .et-sidebar-ad {
    display: block !important;
    width: 100% !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

body.single .et-single-top-row #sidebar .et-sidebar-ad img,
body.single-post .et-single-top-row #sidebar .et-sidebar-ad img,
body.single .et-single-top-row #sidebar .et-sidebar-ad iframe,
body.single-post .et-single-top-row #sidebar .et-sidebar-ad iframe {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    height: auto !important;
    margin: 0 auto !important;
}

body.single .et-single-comments-row,
body.single-post .et-single-comments-row {
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 18px !important;
    box-sizing: border-box !important;
}

body.single .et-single-comments-row #comments,
body.single-post .et-single-comments-row #comments,
body.single .et-single-comments-row .comments-area,
body.single-post .et-single-comments-row .comments-area {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media only screen and (min-width: 992px) {
    body.single .et-single-comments-row #comments,
    body.single-post .et-single-comments-row #comments,
    body.single .et-single-comments-row .comments-area,
    body.single-post .et-single-comments-row .comments-area {
        max-width: calc(100% - 330px) !important;
    }
}

/* ==========================================================
   V5: stretch the last single-video sidebar ad container down
   so the ad column finishes level with the left video/content row.
   ========================================================== */
@media only screen and (min-width: 992px) {
    body.single .et-single-top-row #sidebar.widget-area,
    body.single-post .et-single-top-row #sidebar.widget-area {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        overflow: hidden !important;
    }

    body.single .et-single-top-row #sidebar .et-sidebar-ad,
    body.single-post .et-single-top-row #sidebar .et-sidebar-ad {
        flex: 0 0 auto !important;
    }

    body.single .et-single-top-row #sidebar .et-sidebar-ad-extra-2,
    body.single-post .et-single-top-row #sidebar .et-sidebar-ad-extra-2 {
        flex: 1 1 auto !important;
        min-height: 250px !important;
        margin-bottom: 0 !important;
        overflow: hidden !important;
        background: #000 !important;
    }

    body.single .et-single-top-row #sidebar .et-sidebar-ad-extra-2 img,
    body.single-post .et-single-top-row #sidebar .et-sidebar-ad-extra-2 img,
    body.single .et-single-top-row #sidebar .et-sidebar-ad-extra-2 iframe,
    body.single-post .et-single-top-row #sidebar .et-sidebar-ad-extra-2 iframe {
        height: 100% !important;
        min-height: 100% !important;
        object-fit: cover !important;
    }
}


/* V6: make Custom HTML widgets fill each single-video ad box cleanly */
body.single .et-single-top-row #sidebar .et-sidebar-ad .widget,
body.single-post .et-single-top-row #sidebar .et-sidebar-ad .widget,
body.single .et-single-top-row #sidebar .et-sidebar-ad .textwidget,
body.single-post .et-single-top-row #sidebar .et-sidebar-ad .textwidget,
body.single .et-single-top-row #sidebar .et-sidebar-ad .custom-html-widget,
body.single-post .et-single-top-row #sidebar .et-sidebar-ad .custom-html-widget {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}


/* Editable header 468x60 ad widget */
.et-header-ad-widget {
    min-width: 468px;
    min-height: 60px;
}
.et-header-ad-widget img,
.et-header-ad-widget iframe {
    max-width: 100%;
}
@media only screen and (max-width: 767px) {
    .et-header-ad-widget {
        min-width: 0;
        width: 100%;
        text-align: center;
        margin-top: 12px;
    }
}