/* =====================================================================
   Gaanshala - layout corrections
   Loaded last, so it wins over bootstrap.css, style1.css and
   responsive-custom.css without any of those needing to be edited.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Second-level dropdown pushed the page 32px wider than the window
   ---------------------------------------------------------------------
   The menu sits at the right-hand end of the header. Its first-level
   submenu is absolutely positioned at left:0 and its second level at
   left:130px, so on a 1280px window the second level ended at 1312px -
   32px past the edge. That happened on every page, because the menu is
   in the shared header, and it happened even with the menu closed:
   dl-menu hides submenus with visibility/opacity, and a hidden element
   still counts towards the document width. The result was a horizontal
   scrollbar site-wide, and a submenu clipped by the window when opened.

   Opening the second level to the left of its parent removes both. */
.dl-menuwrapper li .dl-submenu .dl-submenu {
    left: auto;
    right: 100%;
}

/* ---------------------------------------------------------------------
   2. Bootstrap rows used without a container
   ---------------------------------------------------------------------
   .row carries margin-left:-15px and margin-right:-15px, which exist to
   cancel the padding of a .container wrapping it. This site has no
   .container anywhere - zero on every page checked - so the negative
   margins had nothing to cancel and simply hung the row off both edges.
   Restoring the margins to zero keeps the grid behaviour and puts the
   content back inside the window. */
.row {
    margin-left: 0;
    margin-right: 0;
}

/* ---------------------------------------------------------------------
   3. Images should never be the thing that widens a page
   ---------------------------------------------------------------------
   Much of the markup sets pixel widths on images inline. On a narrow
   window those push past the edge. */
img {
    max-width: 100%;
    height: auto;
}

/* ---------------------------------------------------------------------
   4. Long words and URLs
   ---------------------------------------------------------------------
   Lyrics, song titles and pasted links can be longer than their column
   on a phone. Wrapping them is preferable to a page that scrolls
   sideways. */
p, h1, h2, h3, h4, h5, h6, td, li, .glass-panel {
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   5. Room for the fixed player
   ---------------------------------------------------------------------
   The APlayer bar is position:fixed at the bottom, so it sits on top of
   whatever the page ends with. body already reserves 82px; this keeps
   that reservation even on pages whose own stylesheet resets padding. */
body {
    padding-bottom: 82px;
}