/*
Theme Name: ExS Video
Text Domain: exs-video
Version: 1.0.1
Template: exs
Requires at least: 5.5
Requires PHP: 5.6
Tested up to: 6.4
Description: Fast and extremely customizable multipurpose child theme for ExS WordPress theme. It will be good for video blogs. ExS video supports comments likes, posts likes and posts views plugins. It is designed to have 100% Google Page and LightHouse speed. It has an extra small size of CSS (70kB) and JS (3kB) assets, 100% SEO optimised and valid code and it is 100% mobile friendly. It also has a WooCommerce and Easy Digital Downloads (EDD) plugin support so it will be perfect solution for your online store and e-commerce business. bbPress extended support makes ExS theme perfect for your forum. BuddyPress and Ultimate member support will help to create your social network with ExS theme. WP Job manager and Simple Job Board support will help you to create your job board. The Events Calendar advanced support will help you to create your events site. LearnPress plugin advanced support will help you to create a online courses and online school site. It has unlimited color options, headers and footers layouts, 15+ blog layouts, separate layouts for each category and many more super useful features that you can set up directly in your Customizer with live preview. ExS News theme has builtin multiple page templates to perfectly work with any page builder such as Elementor, Beaver Builder, WPBackery, Brizy etc. ExS News uses WordPress starter content feature so you can setup your pages immediately after WordPress and theme installation by simply going to Customizer and publishing your changes. Theme Demo: https://demos.exsthemewp.com/child-video/.
Tags: blog, e-commerce, news, custom-background, custom-colors, custom-logo, custom-menu, custom-header, editor-style, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, block-styles, wide-blocks, left-sidebar, right-sidebar, one-column, two-columns, grid-layout, microformats, post-formats, translation-ready
Author: the ExS team
Author URI: https://exsthemewp.com/about/
Theme URI: https://exsthemewp.com/demo/exs-video-wordpress-theme-demo/
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Domain Path: /languages

All files, unless otherwise stated, are released under the GNU General Public
License version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.

*/


/**
 *  UPDATE[PENDING]: stylesheet not responding, require connection
 *   # css partially responsive -> borders ltr-item ':root' and MANY cmds not responding
 *
 */

:root {
    /*--ltr-item-border: 1px solid #bcbcbc;*/
    
    /* Flex */
    --flex: flex;
    
    /* Width */
    --mnw: 100%;
    
    
    /* Controls */
    --unset: unset;
    
    /* DEBUG */
    --red: red;
    --blue: blue;
}

/**
 * @ul/ li
 */
.ul .ltr-element{
    list-style-type: none !important;
}


.ltr-item,
.vh-item{
    border: 1px solid #bcbcbc !important;
}


/**
 * @Images
 */
.post-thumbnail{
    width: 9vw;
}


/**
 * Header, Search(form, field, label)
 */
.header-search {
    border: 1px solid red;
    position: absolute !important;
    top: 0;
    width: 61vw;
}

.header-search .search-form {
    margin: auto;
    }
.header-search .search-form label {
    width: var(--mnw);
    }

.header-search .search-form .search-field {
    min-height: 50%;    
    }
.search-form>button.search-submit {
    padding: unset !important;
    font-size: 0;
    border: 1px solid lime !important;
    transform: translate(1rem,0.3rem);
    transform-origin: center center;
}


/**
 * Header, Top-menu
 */
@media only screen and (min-width: 1200px){
.top-nav{
    border: 1px solid pink;
    position: absolute !important;
    bottom: 0;
    }
.top-nav .top-menu>li>a{
    padding: unset !important;
    }
    
}


/**
 * Header, Topline-Menu
 */
.topline-nav {
    position: relative; /* Anchor for absolute-positioned dropdown 
    display: inline-block; /* Aligns with other header elements */
}

/* Style Topline-Btn */
.topline-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px; /* Ellipsis icon size */
    font-weight: 700; /* 700-Bold, 800-ultra, 900-heavy */
    color: #333;/* Dark color for visibility */
    padding: 10px;
    line-height: 1;
    }
.topline-btn:hover,
.topline-btn:focus,
.topline-btn:active {
    color: #e6c007;
    outline: none; /* Remove default focus outline */
    
}

/* Style Topline-Menu */
#topline-menu,
.topline-menu {
    display: none; /* Hidden by default */
    position: absolute;
    top: 50%;
    right: 20px;
    background: #fff; /* White BG */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle Shadow */
    z-index: 1000;
    min-width: 22vw; /* Min-Width for Topline-Menu */
    list-style: none;
    margin: 0;
    padding: 10px;
    border-radius: 5px;
}

/* Style (Active) Topline-Menu */
#topline-menu.active,
.topline-menu.active {
    display: block; /* Visible when Toggled */
}

/* Style (Active) Topline-Menu */
#topline-menu li,
.topline-menu li{
    list-style: none;
    margin: 0;
    /*padding: 10px 20px;*/
    min-width: var(--mnw);
}

/* Style (Active) Topline-Menu li.menu-items */
#topline-menu a,
.topline-menu a {
    display: block; /* Ensures fully clickable area */
    /*padding: 10px 20px;*/
    text-decoration: none;
    color: #333;
    font-weight: normal;
    }
#topline-menu a:hover,
#topline-menu a:focus,
.topline-menu a:hover,
.topline-menu a:focus {
    color: #e6c007;
    outline: none;
}


/**
 * @search results
 */
.search .grid-wrapper{
    display: flex;
    flex-flow: column nowrap;
    flex: 1 1;
}


/**
 * @media ltr-element
 */

@media only screen and (min-width: 1200px){
.ltr-element{
    display: flex;
    flex-flow: row nowrap;
    overflow: hidden;
    overflow-x: scroll;
    /*justify-content: space-between;*/
    }
    
    .ltr-item{
        min-width: calc(var(--mnw)/5.3);
    }
    /* End of ltr-** */
}

/**
 * @media ltr-element post
 * @post
 */
.type-post,
.type-product{
    /*display: var(--flex);*/
    /*flex-flow: column nowrap;*/
    /*min-width: var(--mnw); */
}

.ltr-element > .type-post,
.ltr-element > .type-product{
    /*display: var(--flex);*/
    flex-flow: column nowrap;
    /*min-width: var(--mnw); */
}

article .item-content{
    display: var(--flex);
    flex-flow: column nowrap;
    width: var(--mnw);
}

/**
 * @Footer
 */
#bottom-wrap{
    border: 1px solid red;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.fixed-bottom-navigation{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: var(--flex);
    justify-content: space-around;
    z-index: 9999;
}

.bottom-nav-btn{
    background: #f1f1f1;
    border: none;
    padding: 10px 20px;
    margin: 0 5px;
    font-size: 16px;
    cursor: pointer;
}

.bottom-nav-btn:hover{
    background-color: #ddd;
}



/*.popup-content h3{*/
/*    margin-bottom: 20px;*/
/*}*/

.post-type-btn{
    background-color: #4caf50;
    color: white;
    border: none;
    padding: 10px;
    margin: 5px 0;
    width: 100%;
    cursor: pointer;
}

.post-type-btn:hover{
    background-color: #45a049;
}

.close-popup-btn{
    background-color: red;
    color: white;
    border: none;
    padding: 10px;
    margin-top: 10px;
    cursor: pointer;
}

.close-popup-btn:hover{
    background-color: darkred;
}


/**
 * @Article
 */
.hfeed article+article,
.type-attachment,
.type-post, 
.type-product,
.type-vendor {
    /*margin-top: 0.75rem !important;*/
    padding: 0.75rem;
    border-radius: 7px;
}

.vh-element .type-post, 
.vh-element .type-product,
.vh-element .type-vendor {
    margin-top: 0.75rem !important;
}


/**
 * @Button
 */
button[type=reset], button[type=button], button[type=submit], .wp-block-button__link{
    border: 1px solid #f1f1f1;
    color: #bcbcbc;
}

/** @Button[]
 * Modal Buttons
 */
.text-editor-toolbar button,
button.slider-btn{
    padding: 0.7rem
}


/**
 * @Button
 */
input[type=reset], input[type=button], input[type=submit], .wp-block-button__link{
    border: 1px solid #f1f1f1;
    color: #bcbcbc;
}



/**
 * @div
 */
.text-editor-toolbar{
    margin-bottom: 10px;
    display: flex;
    flex-flow: row nowrap;
    overflow: hidden;
    overflow-x: scroll;
}



/**
 * @Modal
 */
.post-type-slider{
    display: flex;
    flex-flow: row nowrap;
    margin-top: 20px;
    text-align: center;
}

.modal-related-media-navigation .ltr-item.active {
    font-weight: bold;
    color: #e6c007;
}

/* popup modal */
.modal-media-popup{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}



.modal-media-popup.show{
    display: flex;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
    align-items: center;
    justify-content: center;
}

.modal-content{
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 400px;
    text-align: center;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}


/**
 * @Modal-Media
 * #media-modal video player
 * #media-modal audio player
 */
#media-modal .media-wrapper video {
    width: var(--mnw);
}

#media-modal .media-wrapper img {
    width: 15vw;
    margin: auto;
}


/**
 * @Modal-Image
 */
.modal-image-popup,
.modal-media-popup{
    display: none;
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 99999;
}
/* When modal is active, slide it into view */
.modal-image-popup.show,
.modal-media-popup.show{
    right: 0;
    display: flex;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out;
    align-items: center;
    justify-content: center;
}

/* Styling for modal content container */
.modal-image-popup .modal-content,
.modal-media-popup .modal-content{
    position: absolute;
    background: #fff;
    padding: 20px;
    max-width: 100%;
    height: 100%;
    overflow: auto;
    border-radius: 7px;
    right: 0;
    top: 0;
}

/* Styling for modal closeBtn */
.modal-media-popup .close-btn,
.modal-image-popup .close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 24px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 99999;
}

.modal-image-popup .modal-focal-image img,
.modal-media-popup .modal-focal-media img{
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

/* TESTING modal-focal-image full-screen */
.full-screen-image{
    position: fixed;
    top: 0;
    left: 0;
    min-height: 100%;
    object-fit: contain;
    background: rgba(0,0,0,0.111);
    padding: 3vh;
}

/* Related Images masonry */
.modal-related-images{
    column-count: 7;
    column-gap: 10px;
}
.modal-related-images img,
.modal-related-media img{
    width: 100%;
    display: block;
    margin-bottom: 10px;
}

/* Masonry-grid styling for images */
@media only screen and (min-width: 768px){
.masonry.images{
    column-count: 5;
    column-gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
    }
}

.masonry.images li{
    break-inside: avoid;
    margin-bottom: 15px;
}


/* Masonry-grid styling for related images within the modal */
.modal-related-images{
    width: 100%;
    margin-bottom: 10px;
    display: block;
}



/**
 * @title
 * @masonry.images
 */
h1.entry-title.image{
    font-size: 1.3rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.image-post .type-post{
    display: var(--flex);
    flex-flow: column nowrap;
    align-items: center;
}



/**
 * @vendors
 */
.exact-match-vendor {
    float: right;
    width: 30%;
}

.partial-match-vendor {
    clear: both;
    overflow-x: auto;
    white-space: nowrap;
}