/*
  SPA Bhopal common header/footer/navigation CSS - V22
  Loaded after page inline CSS in both Home.aspx and MasterPageNew.master.
*/

:root{
  --spa-shell-primary:#626469;
  --spa-shell-primary-dark:#4f5155;
  --spa-shell-white:#ffffff;
  --spa-shell-text:#2f3134;
}

.sp-gigw-bar{
  position:relative;
  z-index:100000;
  width:100%;
  max-width:100%;
  background:var(--spa-shell-primary) !important;
  border-bottom:1px solid var(--spa-shell-primary-dark) !important;
  color:#fff !important;
}
.sp-gigw-inner{
  max-width:1600px;
  min-height:44px;
  margin:0 auto;
  padding:6px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sp-gigw-left,.sp-gigw-right{
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
}
.sp-gigw-link,.sp-gigw-btn,
.sp-gigw-link i,.sp-gigw-btn i{color:#fff !important;}

#topHeader{
  width:100%;
  background:#fff !important;
  border-bottom:1px solid #edf0f1 !important;
}
#topHeader > .container-fluid{
  padding-left:18px !important;
  padding-right:18px !important;
}
.sp-brand-row{min-height:106px;padding:4px 0;}
.sp-brand-main{display:flex;align-items:center;min-width:0;}
.sp-main-header-logo{display:inline-flex;align-items:center;max-width:100%;}
.sp-main-header-logo img{display:block;width:auto;max-width:100%;max-height:98px;object-fit:contain;}
.sp-emblem-column{display:flex;align-items:center;justify-content:flex-end;}
.sp-emblem-lockup{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:180px;min-height:92px;padding:5px 8px;}
.sp-state-emblem{display:block;width:auto;height:74px;max-width:74px;object-fit:contain;}
.sp-emblem-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;line-height:1.2;}

#mainMenu{
  position:relative;
  z-index:9999;
  width:100%;
  max-width:100%;
  padding:0 !important;
  background:var(--spa-shell-primary) !important;
}
#mainMenu .sp-floatbar{width:100%;max-width:100%;margin:0 auto;}
#mainMenu .sp-floatbar > .row{width:100%;margin-left:0 !important;margin-right:0 !important;}
#mainMenu .navbar{min-height:44px;}
#mainMenu .navbar-nav .nav-link,
#mainMenu .navbar-nav .nav-link span{color:#fff !important;}
#mainMenu .dropdown-menu{background:var(--spa-shell-primary) !important;}
#mainMenu .dropdown-item{color:#fff !important;}

/* Mouse/touch: no keyboard focus decoration. */
body:not(.sp-keyboard-nav) #mainMenu .nav-link:focus,
body:not(.sp-keyboard-nav) #mainMenu .dropdown-item:focus,
body:not(.sp-keyboard-nav) #mainMenu .navbar-toggler:focus{
  background:transparent !important;
  color:#fff !important;
  outline:none !important;
  box-shadow:none !important;
  text-decoration:none !important;
}
body:not(.sp-keyboard-nav) #mainMenu .nav-link:focus span{color:#fff !important;}
body:not(.sp-keyboard-nav) #mainMenu .nav-item:focus-within{background:transparent !important;}

/* Keyboard-only focus treatment. */
body.sp-keyboard-nav #mainMenu .nav-link:focus,
body.sp-keyboard-nav #mainMenu .dropdown-item:focus{
  background:#fff !important;
  color:var(--spa-shell-text) !important;
  outline:3px solid #111 !important;
  outline-offset:2px !important;
  box-shadow:0 0 0 2px #fff !important;
  text-decoration:none !important;
}
body.sp-keyboard-nav #mainMenu .nav-link:focus span{color:var(--spa-shell-text) !important;}
body.sp-keyboard-nav #mainMenu .nav-item:focus-within{background:rgba(255,255,255,.14) !important;}

@media(max-width:1199.98px){
  #mainMenu,#mainMenu .sp-floatbar,#mainMenu .sp-floatbar > .row{width:100% !important;max-width:100% !important;}
  #mainMenu .sp-floatbar{padding:0 !important;}
  #mainMenu .sp-floatbar > .row > .col-lg-1{display:none !important;}
  #mainMenu .sp-floatbar > .row > .col-lg-10{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }
  #mainMenu .navbar{
    position:relative !important;
    width:100% !important;
    max-width:100% !important;
    min-height:44px !important;
    padding:4px 0 !important;
    display:flex !important;
    flex-wrap:wrap !important;
    align-items:flex-start !important;
    justify-content:flex-end !important;
  }
  #mainMenu .navbar-toggler{
    position:absolute !important;
    top:5px !important;
    right:8px !important;
    left:auto !important;
    margin:0 !important;
    width:40px !important;
    height:34px !important;
    padding:5px 7px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #fff !important;
    border-radius:7px !important;
    background:rgba(255,255,255,.08) !important;
    z-index:30 !important;
  }
  #mainMenu .navbar-toggler-icon{
    display:block !important;
    width:22px !important;
    height:22px !important;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.98)' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:22px 22px !important;
  }
  #mainMenu #navbarNavDropdown{flex-basis:100% !important;width:100% !important;max-width:100% !important;}
  #mainMenu #navbarNavDropdown.show,#mainMenu #navbarNavDropdown.collapsing{margin-top:40px !important;}
  #mainMenu #navbarNavDropdown.show{
    padding:6px 7px 8px !important;
    background:var(--spa-shell-primary) !important;
    border-top:1px solid rgba(255,255,255,.18) !important;
    max-height:72vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  #mainMenu .navbar-nav{width:100% !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;margin:0 !important;padding:0 !important;}
  #mainMenu .navbar-nav > .nav-item{width:100% !important;margin:1px 0 !important;}
  #mainMenu .navbar-nav > .nav-item > .nav-link{
    width:100% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    padding:10px 11px !important;
    white-space:normal !important;
    text-align:left !important;
  }
  #mainMenu .dropdown-menu{
    position:static !important;
    float:none !important;
    transform:none !important;
    width:100% !important;
    min-width:0 !important;
    margin:2px 0 6px !important;
    padding:5px !important;
    border-radius:7px !important;
    box-shadow:none !important;
    background:#56585d !important;
  }
  #mainMenu .dropdown-submenu > .dropdown-menu{
    position:static !important;
    left:auto !important;
    top:auto !important;
    width:calc(100% - 12px) !important;
    margin:3px 0 6px 12px !important;
  }
  #stickyWrap.is-sticky #mainMenu{padding:0 !important;background:var(--spa-shell-primary) !important;}
  #stickyWrap.is-sticky #mainMenu .sp-floatbar{width:100% !important;max-width:100% !important;padding:0 !important;}
  #stickyWrap.is-sticky #mainMenu .sp-floatbar > .row{
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:var(--spa-shell-primary) !important;
  }
}

#footer.sp-footer-clean{
  width:100%;
  max-width:100%;
  padding:26px 20px 0 !important;
  background:var(--spa-shell-primary) !important;
  color:#fff !important;
}
#footer .sp-footer-col{padding:0 18px 18px !important;}
#footer .sp-footer-heading{
  display:block;
  margin-bottom:9px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.28);
  color:#fff !important;
  font-size:14px;
  font-weight:700;
}
#footer .sp-footer-list{list-style:none;margin:0;padding:0;}
#footer .sp-footer-list li{margin:4px 0;}
#footer .footerA,#footer .sp-footer-policybar a{color:#fff !important;}
#footer .sp-footer-contact{color:#fff !important;line-height:1.6;}
#footer .sp-footer-bottom{
  margin-top:2px;
  padding:11px 10px 13px !important;
  border-top:1px solid rgba(255,255,255,.22);
  color:#fff !important;
  text-align:center;
  font-size:12.5px;
  line-height:1.6;
}

@media(max-width:991.98px){
  .sp-brand-row{min-height:auto !important;padding:8px 0 !important;}
  .sp-brand-main{justify-content:center !important;text-align:center !important;}
  .sp-main-header-logo{width:100% !important;justify-content:center !important;}
  .sp-main-header-logo img{max-height:88px !important;}
  .sp-emblem-column{justify-content:center !important;margin-top:3px !important;}
  .sp-emblem-lockup{justify-content:center !important;min-height:76px !important;}
}
@media(max-width:575.98px){
  #topHeader > .container-fluid{padding-left:8px !important;padding-right:8px !important;}
  #footer.sp-footer-clean{padding-left:10px !important;padding-right:10px !important;}
}

body.sp-bw-theme .sp-gigw-bar,
body.sp-bw-theme #mainMenu,
body.sp-bw-theme #mainMenu .dropdown-menu,
body.sp-bw-theme #footer{
  background:#000 !important;
  color:#fff !important;
  border-color:#fff !important;
}
body.sp-bw-theme #mainMenu a,body.sp-bw-theme #footer a{color:#fff !important;}


/* =========================================================
   V23 - FINAL DESKTOP MENU CONSISTENCY + STICKY FLOATING MENU
   These rules are authoritative for BOTH Home and Master.
   ========================================================= */

/* ---------- Normal desktop menu: match Home spacing exactly ---------- */
@media(min-width:1200px){

  #mainMenu .sp-floatbar{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #mainMenu .navbar{
    min-height:44px !important;
    padding:5px 0 !important;
  }

  #mainMenu .navbar-nav{
    width:100% !important;
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:center !important;
  }

  #mainMenu .navbar-nav > .nav-item{
    width:auto !important;
    margin:0 !important;
    white-space:nowrap !important;
    border-radius:10px !important;
  }

  #mainMenu .navbar-nav > .nav-item > .nav-link{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    white-space:nowrap !important;
    line-height:1 !important;
    font-weight:700 !important;
    color:#fff !important;
  }

  /* This is the spacing that Home had but Master was overriding with
     padding-left:0 !important. Setting it here makes both identical. */
  #mainMenu .navbar-nav > li > a > .sidebar-nav-item{
    padding-left:20px !important;
    padding-right:0 !important;
    color:#fff !important;
    font-size:14px !important;
  }

  #mainMenu .navbar-nav .dropdown-toggle::after{
    display:inline-block !important;
    margin-left:6px !important;
    flex:0 0 auto !important;
    vertical-align:middle !important;
  }
}

/* Large desktop */
@media(min-width:1400px){
  #mainMenu .sp-floatbar{
    max-width:none !important;
  }

  #mainMenu .navbar-nav > .nav-item > .nav-link{
    padding:12px 18px !important;
    font-size:16px !important;
  }
}

/* Standard desktop / laptop */
@media(min-width:1200px) and (max-width:1399.98px){
  #mainMenu .sp-floatbar{
    max-width:1150px !important;
  }

  #mainMenu .navbar-nav > .nav-item > .nav-link{
    padding:10px 12px !important;
    font-size:15px !important;
  }
}

/* ---------- Desktop sticky state: ONLY the floating pill remains grey ---------- */
@media(min-width:1200px){

  #stickyWrap.is-sticky #mainMenu{
    background:transparent !important;
    padding:10px 0 12px !important;
    box-shadow:none !important;
  }

  #stickyWrap.is-sticky #mainMenu .sp-floatbar{
    width:100% !important;
    max-width:1180px !important;
    margin:0 auto !important;
    padding:0 14px !important;
    background:transparent !important;
  }

  #stickyWrap.is-sticky #mainMenu .sp-floatbar > .row{
    width:auto !important;
    margin:0 !important;
    padding:4px 6px !important;
    background:var(--spa-shell-primary) !important;
    border-radius:18px !important;
    box-shadow:0 12px 28px rgba(0,0,0,.22) !important;
  }

  #stickyWrap.is-sticky #mainMenu .sp-floatbar > .row > .col-lg-1{
    display:none !important;
  }

  #stickyWrap.is-sticky #mainMenu .sp-floatbar > .row > .col-lg-10{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #stickyWrap.is-sticky #mainMenu .navbar{
    width:100% !important;
    padding:0 !important;
    flex-wrap:nowrap !important;
  }

  #stickyWrap.is-sticky #mainMenu .navbar-nav{
    width:100% !important;
    flex-wrap:nowrap !important;
    justify-content:center !important;
  }

  /* Home's sticky spacing is slightly tighter than its normal menu. */
  #stickyWrap.is-sticky #mainMenu .navbar-nav > .nav-item > .nav-link{
    padding:10px 10px !important;
    font-size:13px !important;
  }

  #stickyWrap.is-sticky #mainMenu .navbar-nav > li > a > .sidebar-nav-item{
    padding-left:12px !important;
    padding-right:0 !important;
    font-size:13px !important;
  }
}

/* ---------- Tablet/mobile remains full-width; hamburger at far right ---------- */
@media(max-width:1199.98px){

  #mainMenu .navbar-nav > li > a > .sidebar-nav-item{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #mainMenu .navbar-toggler{
    right:8px !important;
    left:auto !important;
  }

  #stickyWrap.is-sticky #mainMenu{
    background:var(--spa-shell-primary) !important;
    padding:0 !important;
  }
}

/* B/W keeps the same sticky structure, but uses black for the floating pill. */
@media(min-width:1200px){
  body.sp-bw-theme #stickyWrap.is-sticky #mainMenu{
    background:transparent !important;
  }

  body.sp-bw-theme #stickyWrap.is-sticky #mainMenu .sp-floatbar > .row{
    background:#000 !important;
    border:1px solid #fff !important;
  }
}