/* ==========================================================================
   Radha-Madhava-Kunjabihari — custom theme on Cassiopeia
   Recreates the former "jeasy" template: 960px centered, salmon-pink,
   teal top menu. Values taken from the original jeasy template.less / custom.css.
   ========================================================================== */

:root {
    --rm-salmon: #F9AE9F;
    --rm-salmon-light: #fde1dc;
    --rm-menu: #6F00DE;          /* violet top menu bar (from original Maximenu theme) */
    --rm-menu-hover: #013E5B;    /* hover/active (from original) */
    --rm-menu-active-text: #F7FF00;  /* yellow active text (from original) */
    --rm-link: #0645ad;
}

/* Salmon-pink page background (from original custom.css) */
body.site {
    background: linear-gradient(to bottom, var(--rm-salmon), var(--rm-salmon-light) 80%) no-repeat;
    background-attachment: fixed;
    color: #222;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
}

/* ---- 940px fixed-width centered (from original jeasy .container) ---- */
.header.container-header,
.site-grid,
.container-footer {
    max-width: 940px;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Original layout: salmon sidebars (span3 ~220px), bordered transparent centre. */
.site-grid {
    display: flex !important;      /* flex avoids Cassiopeia's phantom grid tracks + trailing gap */
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    border: 0;
    background: transparent;
    padding: 0;
    margin-top: 6px;
}
/* sidebar images keep their aspect ratio (fixes the distorted lotus logo) */
.container-sidebar-left img,
.container-sidebar-right img { height: auto !important; max-width: 100%; }
.site-grid > .container-sidebar-left  { flex: 0 0 220px !important; order: 1; background: var(--rm-salmon); padding-top: 10px; }
.site-grid > .container-component {
    flex: 1 1 0 !important; order: 2; min-width: 0; max-width: 100%;
    border: 1px solid rgba(0,0,0,.15);   /* the one border, on the centre (from original .jeasy-component) */
    border-radius: 5px;
    margin-top: 5px;
    background: transparent;              /* header gradient shows through */
}
.site-grid > .container-sidebar-right { flex: 0 0 220px !important; order: 3; background: var(--rm-salmon); padding-top: 10px; }
/* full-width rows (banner, top, bottom, breadcrumbs, message) span the whole row */
.site-grid > .full-width,
.site-grid > .container-banner,
.site-grid > [class*="container-top"],
.site-grid > [class*="container-bottom"],
.site-grid > .container-breadcrumbs,
.site-grid > #system-message-container { flex: 0 0 100% !important; order: 0; }

/* ---- Header: flush to the top, no padding, banner fills the 940px width ---- */
.container-header {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
}
.container-header .grid-child { width: 100%; padding: 0 !important; margin: 0 !important; }
.navbar-brand { width: 100%; justify-content: center; margin: 0 !important; padding: 0 !important; }
.brand-logo { padding: 0 !important; margin: 0 !important; }
/* remove any space above the header (Cassiopeia body/skip-link spacing) */
body.site .wrapper, body.site > .grid-child:first-child { margin-top: 0 !important; padding-top: 0 !important; }
.brand-logo { display: block; width: 100%; text-align: center; }
.brand-logo img { max-height: none; max-width: 100%; height: auto; margin: 0 auto; }

/* ---- Top menu: teal bar, WHITE text visible at rest (fixes invisible-until-hover) ---- */
.container-nav {
    background-color: var(--rm-menu);
    border-radius: 3px;
    padding: 0 !important;         /* bar hugs the items, no extra height */
    margin: .25rem 0 0 !important;
    min-height: 0 !important;
    font-size: 14px;               /* original div#mm base; items use .9em = 12.6px */
    line-height: 21px;
}
.container-nav .mod-menu,
.container-nav .mod-menu > li { background: transparent; }
/* Horizontal top bar with hover dropdowns (Cassiopeia's inline metismenu is
   overridden so submenus don't inflate the top row). */
.container-nav .mod-menu {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: stretch;
    margin: 0; padding: 0; list-style: none;
}
.container-nav .mod-menu > li { position: relative; list-style: none; padding: 0 !important; margin: 0 !important; }

/* all menu links white — original item padding 5px 16px, font .9em */
.container-nav .mod-menu a,
.container-nav .mod-menu .metismenu-item > a,
.container-nav .mod-menu button.mm-toggler {
    color: #ffffff !important;
    background: transparent !important;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 600;
    font-size: 14px !important;     /* original div#mm size */
    line-height: 21px;
    padding: 5px 16px !important;
    text-decoration: none;
    white-space: nowrap;
    display: block;
    border: 0;
}
.container-nav .mod-menu > li > a:hover,
.container-nav .mod-menu .active > a,
.container-nav .mod-menu .current > a {
    background: var(--rm-menu-hover) !important;
    color: var(--rm-menu-active-text) !important;
}

/* submenus: absolute dropdowns, hidden until hover (so they don't take row width) */
.container-nav .mod-menu ul,
.container-nav .mod-menu .mm-collapse {
    display: none !important;      /* Cassiopeia's default; overridden on hover below */
    position: absolute !important;
    top: 100%; left: 0;
    min-width: 210px;
    margin: 0; padding: 0;
    list-style: none;
    background-color: var(--rm-menu) !important;
    box-shadow: 0 6px 14px rgba(0,0,0,.3);
    z-index: 1000;
    height: auto !important;       /* defeat metismenu's inline height:0 */
}
.container-nav .mod-menu li:hover > ul,
.container-nav .mod-menu li:hover > .mm-collapse {
    display: block !important;     /* reveal on hover */
}
/* nested (3rd level) opens to the side */
.container-nav .mod-menu ul ul,
.container-nav .mod-menu .mm-collapse .mm-collapse { top: 0; left: 100%; }
.container-nav .mod-menu ul li { position: relative; }
.container-nav .mod-menu ul a { padding: .5rem .8rem; white-space: normal; }
.container-nav .mod-menu ul a:hover { background: var(--rm-menu-hover) !important; }

/* hide the empty native toggler button; use a ▾ arrow on parent items instead */
.container-nav .mod-menu .mm-toggler { display: none !important; }
.container-header .container-nav .mod-menu li.parent > a::after,
.container-header .container-nav .mod-menu li.deeper > a::after {
    content: " \25BE" !important;   /* ▾ arrow to the RIGHT of the item text */
    display: inline !important;
    position: static !important;
    float: none !important;
    width: auto !important; height: auto !important;
    margin: 0 0 0 4px !important;
    font-size: .8em;
    vertical-align: middle;
}
/* submenu parents: arrow points right, on the right side */
.container-header .container-nav .mod-menu ul li.parent > a::after,
.container-header .container-nav .mod-menu .mm-collapse li.parent > a::after {
    content: " \25B8" !important; float: right !important; margin-top: 2px;
}

/* ---- Center content: transparent (header gradient shows) + one border (from original) ---- */
.site-grid .container-component {
    background: transparent !important;
    border: 1px solid rgba(0,0,0,.15) !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    padding: .5rem 1rem;
}
.container-component,
.container-component p,
.container-component td,
.container-component li { font-size: 13px; line-height: 1.35; }
/* calendar / data tables a touch smaller so date lines fit one row (like the original) */
.container-component table,
.container-component table td,
.container-component table p { font-size: 12px; line-height: 1.3; }
.container-component h1,
.container-component h2,
.container-component h3 { text-align: center; }

/* ---- Sidebars: no per-module boxes; content fills the column ---- */
.container-sidebar-left, .container-sidebar-right { font-size: 13px; }
.container-sidebar-left .card,
.container-sidebar-left .moduletable,
.container-sidebar-right .card,
.container-sidebar-right .moduletable {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-bottom: .5rem;
    text-align: center;
}
.container-sidebar-left .card-body,
.container-sidebar-right .card-body { padding: 2px !important; }
.container-sidebar-left a,
.container-sidebar-right a { color: var(--rm-link); text-decoration: none; }
.container-sidebar-left a:hover,
.container-sidebar-right a:hover { text-decoration: underline; }

/* Footer / copyright */
.container-footer { background: transparent; color: #4a1f16; text-align: center; padding: 1rem; }

/* ---- Photo-album boxes (devotional galleries) — from original custom.css ---- */
.album {
    display: block;
    text-align: center;
    border: 1px solid #a2a2a2;
    border-radius: 6px;
    margin: 5px 0 0 0;
    padding: 5px 0 15px 0;
    background: linear-gradient(to bottom, var(--rm-salmon) 40%, #fff);
}
/* in the sidebars, frames fill the column width */
.container-sidebar-left .album,
.container-sidebar-right .album { width: auto !important; margin-left: 0 !important; margin-right: 0 !important; }
.album p { color: #0000ff; font-family: "Comic Sans MS", "Trebuchet MS", cursive; font-style: italic; font-size: 1.2em; margin: .3rem 0; }
.album img { width: 162px; max-width: 90%; border: 3px solid #fff; border-radius: 8px; }

/* ---- PageBuilder CK grid shim (a few converted articles) ---- */
.rowck { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; }
.rowck > .columnck, .rowck > .colck, .rowck > [class*="column"] { flex: 1 1 200px; min-width: 200px; }
.rowck img { max-width: 100%; height: auto; }
.banneritem { width: 33.3333%; float: left; }
@media (max-width: 800px) { .banneritem { width: 50%; } }
@media (max-width: 480px) { .banneritem { width: 100%; } }

/* ---- fixes 2026-08-11 (audio player + gallery slider stacking) ---- */

/* Keep the top menu and its hover dropdowns above the gallery slider.
   The menu lives inside header.container-header, which is its own stacking
   context at z-index:10. The slider's .ws_wrapper (z-index:90) sits in site-grid
   (z-index:auto, not a context) so it competes at BODY level and 90 > 10 — the
   slider painted over the whole header. Raise the header above the slider. */
.container-header { position: relative; z-index: 1000; }
.container-nav { position: relative; z-index: 900; }
/* belt-and-suspenders: keep the slider's own stacking modest */
.ws_wrapper { z-index: 5 !important; }

/* Compact the Rapi player when it sits in the right sidebar (the mini player).
   Only targets sidebar-right so the full 500px players are unaffected. */
.sidebar-right .rapi_music_player { margin: 12px auto; }
.sidebar-right .rapi_music_player .plyr,
.sidebar-right .rapi_music_player .plyr__controls { font-size: 11px !important; }
.sidebar-right .rapi_music_player .plyr__controls { padding: 6px 6px !important; }
.sidebar-right .rapi_music_player .plyr__control { padding: 4px !important; }
.sidebar-right .rapi_music_player .plyr__control svg { width: 13px !important; height: 13px !important; }
.sidebar-right .rapi_music_player .plyr__time { font-size: 10px !important; }
.sidebar-right .rapi_music_player { overflow: hidden; }
.sidebar-right .rapi_music_player .plList li { padding: 5px 6px !important; }
.sidebar-right .rapi_music_player .plList,
.sidebar-right .rapi_music_player .plList li,
.sidebar-right .rapi_music_player .plItem,
.sidebar-right .rapi_music_player .plTitle,
.sidebar-right .rapi_music_player .plNum,
.sidebar-right .rapi_music_player .plLength { font-size: 11px !important; }
.sidebar-right .rapi_music_player .plNum { padding-left: 4px !important; width: auto !important; }
.sidebar-right .rapi_music_player .plTitle { left: 26px !important; right: 34px !important; }
.sidebar-right .rapi_music_player .plLength { right: 6px !important; padding-left: 0 !important; }
.sidebar-right .rapi_music_player .player_download_icon { width: 15px !important; height: 15px !important; }

/* Separator menu items (e.g. "Lyrics" under Bhajans) render as a non-link
   <button class="mod-menu__separator … mm-toggler"> and were hidden by the
   .mm-toggler{display:none} rule above. Show + style them as dropdown labels. */
.container-nav .mod-menu .mod-menu__separator {
    display: block !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 0 !important;
    text-align: left;
    width: 100%;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
    font-weight: 600;
    font-size: 14px !important;
    line-height: 21px;
    padding: 5px 16px !important;
    white-space: nowrap;
    cursor: default;
}
.container-nav .mod-menu li.parent > .mod-menu__separator::after,
.container-nav .mod-menu li.deeper > .mod-menu__separator::after {
    content: " \25B8";   /* ▸ right-pointing, since children open to the side */
    display: inline;
}

/* Shrink the Rapi custom transport buttons (play/prev/next) in the mini player.
   Original sizes are 100px (play) / 50px (prev,next) — too big at 210px wide. */
.sidebar-right .rapi_music_player .tracks #btnPlay img,
.sidebar-right .rapi_music_player .tracks #btnPause img { width: 46px !important; margin: 0 6px !important; }
.sidebar-right .rapi_music_player .tracks #btnPrev img,
.sidebar-right .rapi_music_player .tracks #btnNext img { width: 25px !important; margin: 0 6px !important; }
.sidebar-right .rapi_music_player .tracks { margin: 0 0 10px 0 !important; }

/* ---- menu-item descriptions (Maximenu maximenu_desc) restored via layout override ---- */
.container-nav .mod-menu .menu-title { display: block; }
.container-nav .mod-menu .menu-desc {
    display: block;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.3;
    opacity: .82;
    white-space: normal;
    margin-top: 1px;
}
/* keep the horizontal top bar clean — descriptions only inside dropdowns */
.container-nav .mod-menu > li > a .menu-desc { display: none; }
/* dropdown links with a description need room to wrap */
.container-nav .mod-menu ul a { white-space: normal; line-height: 1.25; }

/* ---- Photo Gallery: long list folds into two columns, opening to the LEFT ---- */
.container-nav .mod-menu li.item-152 > ul {
    left: auto !important;
    right: 100% !important;        /* open leftwards so it doesn't run off-screen */
    top: 0;
    column-count: 2;
    column-gap: 4px;
    min-width: 460px;
}
.container-nav .mod-menu li.item-152 > ul > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: block;
    width: 100%;
}

/* description under menu items: yellow + stacked below the title (match original .descck) */
.container-nav .mod-menu ul a { display: block !important; }   /* defeat flex so title/desc stack */
.container-nav .mod-menu .menu-title { display: block; }
.container-nav .mod-menu .menu-desc {
    display: block !important;
    width: 100%;
    color: #F7FF00 !important;      /* yellow, as in the original */
    opacity: 1 !important;
    padding-left: 10px;
    margin-top: 1px;
    font-size: 11px;
    line-height: 1.3;
    white-space: normal;
}

/* Tighten dropdown items — descriptions were inflating menu height.
   Top bar keeps its 5px 16px; only the submenu items are compacted. */
.container-nav .mod-menu ul a { padding: 3px 12px !important; line-height: 1.25 !important; }
.container-nav .mod-menu .menu-title { line-height: 1.2; }
.container-nav .mod-menu .menu-desc {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    padding-left: 10px;
}

/* --- dropdown item refinements --- */
/* tighter items */
.container-nav .mod-menu ul a { padding: 2px 12px !important; }
.container-nav .mod-menu .menu-title { line-height: 1.15; }
/* yellow description: left-aligned with the title (no extra indent), tighter */
.container-nav .mod-menu .menu-desc { padding-left: 0 !important; line-height: 1.15 !important; }
/* parent arrow: to the right of the whole item, vertically centred over both lines */
.container-nav .mod-menu ul li.parent > a,
.container-nav .mod-menu ul li.deeper > a { position: relative; padding-right: 22px !important; }
.container-header .container-nav .mod-menu ul li.parent > a::after,
.container-header .container-nav .mod-menu .mm-collapse li.parent > a::after {
    position: absolute !important;
    right: 8px; top: 50% !important;
    transform: translateY(-50%);
    float: none !important;
    margin: 0 !important;
}

/* Widen single-column dropdowns to ~250px (original column width) so most
   descriptions fit on one line instead of wrapping — keeps items short. */
.container-nav .mod-menu ul,
.container-nav .mod-menu .mm-collapse { min-width: 250px; }

/* Cap the description height like the original (.descck{height:24px}) so long
   descriptions don't wrap into tall items — keeps dropdown rows short + uniform. */
.container-nav .mod-menu .menu-desc { max-height: 24px; overflow: hidden; }

/* final compaction of dropdown rows */
.container-nav .mod-menu ul a { padding: 1px 12px !important; }
.container-nav .mod-menu .menu-title { line-height: 1.1; }
.container-nav .mod-menu .menu-desc { line-height: 1.1 !important; max-height: 22px; }

/* ==== dropdown fixes to match the original (2026-08-11b) ==== */
/* 1. kill Cassiopeia's default submenu <li> padding (8.8px/17.6px) — main inflation + indent */
.container-nav .mod-menu ul li,
.container-nav .mod-menu .mm-collapse li { padding: 0 !important; margin: 0 !important; }
/* 2. tighter submenu link padding (must out-specify .metismenu-item > a) */
.container-nav .mod-menu ul .metismenu-item > a,
.container-nav .mod-menu .mm-collapse .metismenu-item > a { padding: 3px 14px !important; }
/* 3. widen single-column dropdowns so descriptions fit two lines (was clamped to 192px) */
.container-nav .mod-menu ul,
.container-nav .mod-menu .mm-collapse { min-width: 250px !important; }
/* 4. top-level item keeps the teal highlight while its dropdown is open */
.container-nav .mod-menu > li:hover > a {
    background: var(--rm-menu-hover) !important;
    color: var(--rm-menu-active-text) !important;
}
/* 5. two-line description, not clipped mid-word */
.container-nav .mod-menu .menu-desc { max-height: 26px; }
/* 6. arrow glyph closer to the original ► */
.container-header .container-nav .mod-menu ul li.parent > a::after,
.container-header .container-nav .mod-menu .mm-collapse li.parent > a::after { content: " \25B6" !important; font-size: .72em; }

/* ==== match original menu metrics (measured from original.mhtml) 2026-08-11c ==== */
/* original .maxidrop-main width:180px; link padding 5px 16px; descck 10px, overflow visible */
.container-nav .mod-menu ul,
.container-nav .mod-menu .mm-collapse { width: 180px !important; min-width: 0 !important; }
.container-nav .mod-menu li.item-152 > ul { width: 460px !important; }   /* keep 2-col Photo gallery */
.container-nav .mod-menu ul .metismenu-item > a,
.container-nav .mod-menu .mm-collapse .metismenu-item > a { padding: 5px 16px !important; }
.container-nav .mod-menu .menu-desc { max-height: none !important; overflow: visible !important; }

/* submenu links must fill the dropdown width so the right-aligned ► sits at the far edge */
.container-nav .mod-menu ul li,
.container-nav .mod-menu .mm-collapse li { display: block !important; width: 100% !important; }
.container-nav .mod-menu ul li > a,
.container-nav .mod-menu .mm-collapse li > a { display: block !important; width: 100% !important; box-sizing: border-box !important; }
/* original dropdown item font size (0.9em ≈ 12.6px) — brings row height to the original */
.container-nav .mod-menu ul .metismenu-item > a,
.container-nav .mod-menu .mm-collapse .metismenu-item > a { font-size: 12.6px !important; }

/* gallery flyout overlapped the parent dropdown due to an inherited negative
   margin-right (-1.1rem); zero it and leave a 2px gap. */
.container-nav .mod-menu li.item-152 > ul {
    margin: 0 !important;
    right: calc(100% + 2px) !important;
    left: auto !important;
}

/* no gap between the gallery flyout and its parent (a gap would drop the hover).
   Same purple bg, so a 3px overlap is invisible and keeps the mouse path continuous. */
.container-nav .mod-menu li.item-152 > ul { right: calc(100% - 3px) !important; }