/* Responsive overrides for Gaanshala */

/* The APlayer bar is position:fixed at the bottom of the window, so it sits on
   top of whatever the page ends with - on the homepage it covered the closing
   lines of ABOUT US. Nothing reserved room for it. The bar measures 66px; the
   figure below leaves a little clearance so the last line is not flush against
   it. Applied via a variable so the two stay in step if the player is
   restyled. */
:root {
    --player-bar-height: 66px;
}

body {
    padding-bottom: calc(var(--player-bar-height) + 16px);
    /* The footer blocks are float:left, and a float contributes nothing to its
       parent's height. Without this the body ends above them, the padding above
       is measured from the wrong place, and the copyright line is drawn behind
       the player bar. flow-root makes the body contain its floats. */
    display: flow-root;
}

/* Both footer bars are full width already, so floating them buys nothing and
   costs the height they should be adding to the page. */
#lastFooter,
#lastFooter1 {
    float: none !important;
    width: 100% !important;
}


/* Search Results Dropdown Styling */
#search-results-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 300px;
    background: #222;
    border: 1px solid #444;
    z-index: 9999;
    display: none;
    max-height: 400px;
    overflow-y: auto;
    box-shadow: 0px 4px 6px rgba(0,0,0,0.5);
}

.search-item {
    padding: 10px;
    border-bottom: 1px solid #333;
    color: #fff;
    cursor: pointer;
    display: block;
    text-decoration: none;
}

.search-item:hover {
    background: #333;
    color: #eb4f1e;
}

.search-item-title {
    font-size: 14px;
    font-weight: bold;
}
.search-item-type {
    font-size: 12px;
    color: #888;
}



/* The tab strip on video.php and the search results carries width: 50em from
   pagination.css - a fixed 650px, set for browsers that needed an explicit
   width in 2009. On a phone it hung 268px past the edge of the screen. */
.tab-header ul.tab-list {
    width: auto;
    max-width: 100%;
}

/* The menu wrapper's 20px side margins push it past the viewport once it is
   full width. Keeping the vertical margin and dropping the horizontal one
   leaves the button where it was without the overhang. */
.dl-menuwrapper {
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
}

/* style.css positions the dropdown panel with left: 180px, which is fine beside
   a wide header but pushes a 300px panel 87px past the edge of a tablet screen.
   The hamburger sits on the right, so anchoring the panel to the right edge of
   its wrapper puts it where it visually belongs and keeps it on screen. */
@media screen and (max-width: 992px) {
    .dl-menuwrapper ul {
        left: auto;
        right: 0;
        max-width: calc(100vw - 24px);
    }
}

/* Bootstrap's .row carries -15px side margins, which assume it sits inside a
   .container that has +15px of padding to absorb them. These rows sit in plain
   divs with percentage padding instead, so the negative margins hung over the
   edge by a few pixels on every screen size. */
.template .row,
div[style*="padding:2%"] > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Mobile responsive fixes */
@media screen and (max-width: 768px) {
    /* A percentage margin left on an element that has just been forced to
       width:100% pushes it past the viewport - 100% + 10% margin is 110% of the
       parent. The rules below widen elements, so they have to clear the side
       margins the inline styles set, or they reintroduce the overflow they are
       meant to remove. */
    div[style*="margin-left:10%"], div[style*="margin-left: 10%"],
    div[style*="margin-left:5%"],  div[style*="margin-left: 5%"],
    div[style*="margin-right:10%"], div[style*="margin-right: 10%"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Header & Flex layout fixes */
    div[style*="width:25%"], div[style*="width: 30%"], div[style*="width:30%"], div[style*="width: 40%"], div[style*="width:40%"], div[style*="width: 55%"], div[style*="width:23%"],
    .flex-col-left, .flex-col-main, .flex-col-right {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        float: none !important;
        text-align: center !important;
        padding: 5px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    div[style*="width:60%"], div[style*="width:98%"], div[style*="width:33%"] {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    div[style*="width:84%"] {
        width: 95% !important;
        padding: 2% !important;
    }

    .dl-menuwrapper {
        width: 100% !important;
        margin-top: 10px !important;
    }
    
    /* Layout fixes */
    .template {
        width: 100% !important;
    }
    
    #content {
        width: 100% !important;
    }

    /* Singers/Albums/Titles */
    .row .col-md-7, .row .col-md-5 {
        width: 100% !important;
        float: none !important;
    }
    
    td {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    div[style*="width:200px; float:left"] {
        width: 100% !important;
        float: none !important;
        text-align: center !important;
        margin: 10px auto !important;
    }

    div[style*="width:75%; float:right"] {
        width: 100% !important;
        float: none !important;
    }



    #search-results-dropdown {
        width: 90%;
        left: 5%;
        right: auto;
    }
}