/*
 Theme Name:   Zox News Child
 Theme URI: http://themeforest.net/user/mvpthemes
 Template:     zox-news
 Version:      1.0.21
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  zox-news-child
*/

/* START weather widget area customisations */
#top-header-right-widget-area {
    position: relative;
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mvp-fixed #top-header-right-widget-area {
    display: none; /*  Hide weather widget when fixed header is active  */
}

@media (max-width: 1003px) {
    #top-header-right-widget-area {
        display: none; /*  Hide weather widget on small viewports  */
    }
}
/* END weather widget area customisations */

#mvp-main-head-wrap {
    margin-bottom: 10px; /* Add extra spacing below header */
}

/* Hide social sharing bottom toolbar on tablet-size screens (article page) */
#mvp-soc-mob-wrap {
    display: none !important;
}

/* Have mobile menu links clickable for the full width of the menu */
#mvp-fly-menu-wrap ul li.menu-item:not(.menu-item-has-children) a {
    width: 100%;
}

/* 
    WP doesn't properly support .webp & this theme doesn't do anything to work around the problem.
    These bits of css mitigate the issue on the home page.
*/
/* "Trending" .webp desktop */
body.home .mvp-main-box .mvp-feat1-mid-wrap .mvp-feat1-pop-wrap .mvp-feat1-pop-img img.mvp-reg-img {
    width: 400px;
}
/* "Trending" .webp mobile */
body.home .mvp-main-box .mvp-feat1-mid-wrap .mvp-feat1-pop-wrap .mvp-feat1-pop-img img.mvp-mob-img {
    width: 80px;
}
/* "Latest" .webp */
body.home .mvp-main-box .mvp-feat1-right-wrap .mvp-feat1-list-wrap .mvp-feat1-list-img img.size-mvp-small-thumb {
    width: 80px;
}

/* Stop mp3 banner showing above mobile menu */
#mvp-fly-wrap {
    z-index: 1000000;
}
nav.mvp-fly-nav-menu {
    max-height: calc(100% - 152px);
}

/* Adjust link style in footer */
#mvp-foot-bot a {
    color: #fff;
}
#mvp-foot-bot a:hover {
    text-decoration: underline;
}
div#mvp-foot-copy p, div#mvp-foot-copy a {
    color: #ccc;
}
div#mvp-foot-copy a:hover {
    color: #ccc;
    text-decoration: underline;
}

/* Set max height for related post images */
#mvp-related-posts .mvp-related-img {
    max-height: 142px;
    overflow: hidden;
    text-align: center;
}