/* ═══ Accessibility settings panel ═══ */
.nav-a11y-wrap{
  position:relative;
  display:flex;
  align-items:center;
  /* display: none !important; */
}
.nav-a11y{
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--bone-dim);
  border-radius:50%;
  transition:color .2s ease, background .2s ease, box-shadow .2s ease;
}
.nav-a11y:hover,
.nav-a11y[aria-expanded="true"]{
  color:var(--bone);
  background:rgba(239,229,206,.08);
}
.nav-a11y:focus-visible{
  outline:2px solid var(--gold, #C8A84E);
  outline-offset:3px;
}
.nav-a11y svg{
  width:22px;
  height:22px;
  display:block;
}

.a11y-panel{
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  width:330px;
  max-width:calc(100vw - 24px);
  box-sizing:border-box;
  padding:24px;
  padding-top:44px;
  background:#24362E;
  border-radius:20px;
  box-shadow:0 16px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.18);
  z-index:400;
  color:#FFFFFF;
  font-family:var(--font, 'IBM Plex Sans', sans-serif);
  display:flex;
  flex-direction:column;
  gap:0;
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.a11y-panel[hidden]{
  display:none !important;
}

.a11y-close{
  position:absolute;
  top:14px;
  right:14px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#FFFFFF;
  border:none;
  border-radius:8px;
  cursor:pointer;
  color:#2B2B2B;
  padding:0;
  flex-shrink:0;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow:0 1px 3px rgba(0,0,0,.12);
}
.a11y-close:hover{
  background:#F2F2F2;
}
.a11y-close:focus-visible{
  outline:2px solid var(--gold, #C8A84E);
  outline-offset:2px;
}
.a11y-close:active{
  transform:scale(.96);
}
.a11y-close svg{
  width:14px;
  height:14px;
  stroke:#2B2B2B;
}

.a11y-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:44px;
  margin-bottom:18px;
}
.a11y-row:last-child{margin-bottom:0}
.a11y-label{
  font-size:15px;
  font-weight:500;
  color:#FFFFFF;
  line-height:1.35;
  flex:1 1 auto;
  min-width:0;
}

.a11y-font-btns{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.a11y-font-btn{
  width:42px;
  height:36px;
  border-radius:8px;
  border:1px solid #E6E6E6;
  background:#FFFFFF;
  color:#3A3A3A;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.a11y-font-btn:hover{
  border-color:#C8C8C8;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.a11y-font-btn:focus-visible{
  outline:2px solid var(--gold, #C8A84E);
  outline-offset:2px;
}
.a11y-font-btn.is-active{
  background:#8E8E8E;
  border-color:#8E8E8E;
  color:#FFFFFF;
  box-shadow:none;
}

.a11y-toggle{
  position:relative;
  width:52px;
  height:30px;
  border-radius:999px;
  border:none;
  background:#5C5C5C;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
  transition:background .25s ease;
}
.a11y-toggle.is-on{
  background:var(--gold, #C8A84E);
}
.a11y-toggle:focus-visible{
  outline:2px solid var(--gold, #C8A84E);
  outline-offset:3px;
}
.a11y-toggle-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 1px 4px rgba(0,0,0,.22);
  transition:transform .25s ease, color .2s ease;
  color:#6B6B6B;
}
.a11y-toggle.is-on .a11y-toggle-thumb{
  transform:translateX(22px);
  color:var(--deep-gold, #B8932E);
}
.a11y-toggle-thumb svg{
  width:13px;
  height:13px;
  display:block;
}
.a11y-toggle-thumb--text{
  font-size:10px;
  font-weight:700;
  letter-spacing:.02em;
  color:#333;
}
.a11y-toggle.is-on .a11y-toggle-thumb--text{
  color:var(--forest-ink, #1F2B22);
}
.a11y-toggle:not(.is-on) .a11y-mic-mute{display:block}
.a11y-toggle.is-on .a11y-mic-mute{display:none}

/* Font-size scale applied on <html> */
html.a11y-fs-sm{font-size:87.5%}
html.a11y-fs-md{font-size:100%}
html.a11y-fs-lg{font-size:112.5%}
html.a11y-fs-xl{font-size:125%}

/* ═══════════════════════════════════════════════════
   LIGHT MODE — site-wide (token remap + key fixes)
   All light-mode CSS lives in this file only.
   ═══════════════════════════════════════════════════ */
html.a11y-light-mode{
  color-scheme: light;

  /* Invert dark theme tokens → light surfaces / dark text */
  --forest: #FAFAF8;
  --bone: #1F2B22;
  --card-forest: #FFFFFF;
  --paper: #F3F1EA;
  --forest-ink: #1F2B22;
  --gold: #B8932E;
  --deep-gold: #9A7A22;
  --gold-border: rgba(184, 147, 46, 0.35);
  --bone-dim: rgba(31, 43, 34, 0.58);
  --bone-faint: rgba(31, 43, 34, 0.12);
  --forest-border: rgba(31, 43, 34, 0.12);
  --white: #FFFFFF;
  --yellow: #C8A84E;
}

html.a11y-light-mode,
html.a11y-light-mode body{
  background: var(--forest) !important;
  color: var(--bone) !important;
}

/* Scrollbars — dark thumb on light track */
html.a11y-light-mode,
html.a11y-light-mode *,
html.a11y-light-mode *::before,
html.a11y-light-mode *::after{
  scrollbar-color: rgba(31, 43, 34, 0.35) transparent;
}
html.a11y-light-mode::-webkit-scrollbar-thumb,
html.a11y-light-mode *::-webkit-scrollbar-thumb{
  background-color: rgba(31, 43, 34, 0.28);
}
html.a11y-light-mode::-webkit-scrollbar-thumb:hover,
html.a11y-light-mode *::-webkit-scrollbar-thumb:hover{
  background-color: rgba(31, 43, 34, 0.45);
}

/* Header / nav */
html.a11y-light-mode .navbar,
html.a11y-light-mode .mobile-nav,
html.a11y-light-mode .header,
html.a11y-light-mode .hero-carousel,
html.a11y-light-mode .stats-bar,
html.a11y-light-mode .philosophy,
html.a11y-light-mode .footer,
html.a11y-light-mode .dashboard-footer,
html.a11y-light-mode .copyright{
  background: var(--forest) !important;
  border-color: var(--bone-faint);
  color: var(--bone);
}

html.a11y-light-mode .navbar{
  border-bottom: 1px solid var(--bone-faint);
  box-shadow: 0 1px 0 rgba(31, 43, 34, 0.04);
}

html.a11y-light-mode .nav-item > a{
  color: var(--bone-dim) !important;
}
html.a11y-light-mode .nav-item > a:hover,
html.a11y-light-mode .nav-item:hover > a{
  color: var(--bone) !important;
}
html.a11y-light-mode .nav-a11y{
  color: var(--bone-dim);
}
html.a11y-light-mode .nav-a11y:hover,
html.a11y-light-mode .nav-a11y[aria-expanded="true"]{
  color: var(--bone);
  background: rgba(31, 43, 34, 0.06);
}
html.a11y-light-mode .nav-search svg{
  stroke: var(--bone-dim) !important;
}
html.a11y-light-mode .nav-search:hover svg{
  stroke: var(--bone) !important;
}
html.a11y-light-mode .hamburger-bar{
  background: var(--bone-dim) !important;
}
html.a11y-light-mode .hamburger.open .hamburger-bar{
  background: var(--bone) !important;
}
html.a11y-light-mode .btn-login,
html.a11y-light-mode .mobile-btn-login{
  color: var(--bone) !important;
  border-color: var(--bone-faint) !important;
  background: transparent !important;
}
html.a11y-light-mode .btn-login:hover,
html.a11y-light-mode .mobile-btn-login:hover{
  background: rgba(31, 43, 34, 0.05) !important;
  border-color: rgba(31, 43, 34, 0.22) !important;
}
html.a11y-light-mode .btn-invest,
html.a11y-light-mode .mobile-btn-invest,
html.a11y-light-mode .hero-cta-primary{
  background: var(--gold) !important;
  color: #FAFAF8 !important;
}
html.a11y-light-mode .hero-cta-secondary{
  color: var(--bone) !important;
  border-color: var(--bone-faint) !important;
}

/* Mobile drawer */
html.a11y-light-mode .mobile-nav{
  border-top-color: var(--bone-faint) !important;
}
html.a11y-light-mode .mobile-nav-item{
  border-bottom-color: var(--bone-faint) !important;
}
html.a11y-light-mode .mobile-nav-toggle,
html.a11y-light-mode .mobile-submenu a{
  color: var(--bone-dim) !important;
}
html.a11y-light-mode .mobile-nav-toggle:hover,
html.a11y-light-mode .mobile-nav-toggle.active,
html.a11y-light-mode .mobile-submenu a:hover{
  color: var(--bone) !important;
}
html.a11y-light-mode .mobile-nav-toggle svg{
  stroke: var(--bone-dim) !important;
}

/* Cards / panels that were dark green */
html.a11y-light-mode .stats-bar .hero-stat,
html.a11y-light-mode .philosophy-card,
html.a11y-light-mode .msci-section,
html.a11y-light-mode .msci-stat,
html.a11y-light-mode .msci-tooltip,
html.a11y-light-mode .footer-social a{
  background: var(--card-forest) !important;
  border-color: var(--bone-faint) !important;
  color: var(--bone);
  box-shadow: 0 1px 3px rgba(31, 43, 34, 0.06);
}

html.a11y-light-mode .funds-section,
html.a11y-light-mode .trust-section,
html.a11y-light-mode .quicklinks-section,
html.a11y-light-mode .sebi-disclaimer{
  background: var(--paper) !important;
  color: var(--forest-ink);
}

/* Hero / typography */
html.a11y-light-mode .hero-headline,
html.a11y-light-mode .hero-subtitle,
html.a11y-light-mode .philosophy-title,
html.a11y-light-mode .philosophy-subtitle,
html.a11y-light-mode .philosophy-card-title,
html.a11y-light-mode .philosophy-card-text,
html.a11y-light-mode .doctrine-text,
html.a11y-light-mode .msci-title,
html.a11y-light-mode .msci-subtitle,
html.a11y-light-mode .msci-legend-item,
html.a11y-light-mode .stats-bar .hero-stat-label{
  color: var(--bone);
}
html.a11y-light-mode .hero-subtitle,
html.a11y-light-mode .philosophy-subtitle,
html.a11y-light-mode .philosophy-card-text,
html.a11y-light-mode .msci-subtitle,
html.a11y-light-mode .msci-legend-item,
html.a11y-light-mode .stats-bar .hero-stat-label{
  color: var(--bone-dim) !important;
}

/* Footer hard-coded bone rgba values */
html.a11y-light-mode .footer-legal,
html.a11y-light-mode .footer-reg{
  color: rgba(31, 43, 34, 0.45) !important;
}
html.a11y-light-mode .footer-legal a{
  color: rgba(31, 43, 34, 0.6) !important;
}
html.a11y-light-mode .footer-legal a:hover{
  color: var(--bone) !important;
}
html.a11y-light-mode .footer-col a,
html.a11y-light-mode .footer-brand-contact,
html.a11y-light-mode .footer-brand-contact a{
  color: var(--bone-dim) !important;
}
html.a11y-light-mode .footer-col a:hover,
html.a11y-light-mode .footer-brand-contact a:hover{
  color: var(--bone) !important;
}
html.a11y-light-mode .footer-social a svg{
  fill: var(--bone-dim) !important;
}
html.a11y-light-mode .footer-social a:hover{
  background: rgba(31, 43, 34, 0.06) !important;
}
html.a11y-light-mode .footer-social a:hover svg{
  fill: var(--bone) !important;
}

/* Forms / inputs commonly used across site */
html.a11y-light-mode input,
html.a11y-light-mode select,
html.a11y-light-mode textarea{
  background: #FFFFFF;
  color: var(--bone);
  border-color: rgba(31, 43, 34, 0.18);
}
html.a11y-light-mode input::placeholder,
html.a11y-light-mode textarea::placeholder{
  color: rgba(31, 43, 34, 0.4);
}

/* Tables */
html.a11y-light-mode table{
  color: var(--bone);
}
html.a11y-light-mode th,
html.a11y-light-mode td{
  border-color: var(--bone-faint);
}

/* A11y panel keeps design colors in light mode */
html.a11y-light-mode .a11y-panel{
  background:#24362E !important;
  color:#FFFFFF;
  box-shadow:0 16px 40px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.18);
}
html.a11y-light-mode .a11y-label{
  color:#FFFFFF;
}
html.a11y-light-mode .a11y-close{
  background:#FFFFFF;
  color:#2B2B2B;
}
html.a11y-light-mode .a11y-font-btn{
  background:#FFFFFF;
  color:#3A3A3A;
  border-color:#E6E6E6;
}
html.a11y-light-mode .a11y-font-btn.is-active{
  background:#8E8E8E;
  border-color:#8E8E8E;
  color:#FFFFFF;
}
html.a11y-light-mode .a11y-toggle:not(.is-on){
  background:#5C5C5C;
}

/* Investor dashboard surfaces when light mode is on */
html.a11y-light-mode .dashboard-wrapper,
html.a11y-light-mode .main-content,
html.a11y-light-mode .content-area,
html.a11y-light-mode .page-content,
html.a11y-light-mode .investor-dashboard,
html.a11y-light-mode .ds-card,
html.a11y-light-mode .card{
  background-color: var(--card-forest);
  color: var(--bone);
  border-color: var(--bone-faint);
}

/* Hard-coded dark greens that ignore tokens */
html.a11y-light-mode [style*="background: var(--forest)"],
html.a11y-light-mode [style*="background:var(--forest)"],
html.a11y-light-mode [style*="background: #1F2B22"],
html.a11y-light-mode [style*="background:#1F2B22"],
html.a11y-light-mode [style*="background: #1f2b22"],
html.a11y-light-mode [style*="background:#1f2b22"]{
  background: var(--forest) !important;
}
html.a11y-light-mode [style*="color: var(--bone)"],
html.a11y-light-mode [style*="color:var(--bone)"],
html.a11y-light-mode [style*="color: #EFE5CE"],
html.a11y-light-mode [style*="color:#EFE5CE"]{
  color: var(--bone) !important;
}

/* Selection / focus */
html.a11y-light-mode ::selection{
  background: rgba(184, 147, 46, 0.28);
  color: #1F2B22;
}

/* ═══════════════════════════════════════════════════
   POST-LOGIN — a11y control placement in investor header
   ═══════════════════════════════════════════════════ */
.header .nav-a11y-wrap{
  margin-left: auto;
  margin-right: 10px;
  flex-shrink: 0;
  z-index: 120;
  position: relative;
  overflow: visible;
}
.header .ds-notif{
  margin-left: 0 !important;
}
.header .nav-a11y{
  color: var(--bone-dim);
}
.header .nav-a11y:hover,
.header .nav-a11y[aria-expanded="true"]{
  color: var(--bone);
  background: rgba(239, 229, 206, 0.08);
}
.header .a11y-panel{
  right: 0;
  top: calc(100% + 10px);
  z-index: 400;
}
/* Fixed header is height-clipped; keep panel visible below it */
.header{
  overflow: visible !important;
}

/* Keep icon + panel usable on small screens */
@media (max-width: 767px){
  .header .nav-a11y-wrap{
    margin-right: 6px;
  }
  .header .a11y-panel,
  .a11y-panel{
    right: -12px;
    width: min(330px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
  }
}

/* ═══════════════════════════════════════════════════
   POST-LOGIN LIGHT MODE — investor dashboard surfaces
   ═══════════════════════════════════════════════════ */
html.a11y-light-mode .header{
  background: var(--forest) !important;
  border-bottom: 1px solid var(--bone-faint) !important;
}
html.a11y-light-mode .header .nav-a11y{
  color: var(--bone-dim);
}
html.a11y-light-mode .header .nav-a11y:hover,
html.a11y-light-mode .header .nav-a11y[aria-expanded="true"]{
  color: var(--bone);
  background: rgba(31, 43, 34, 0.06);
}

/* Sidebar / menu */
html.a11y-light-mode .ds-menu,
html.a11y-light-mode .ds-menu ul,
html.a11y-light-mode .sidebar,
html.a11y-light-mode .left-menu,
html.a11y-light-mode .toggle-menu span{
  background-color: transparent;
  color: var(--bone);
}
html.a11y-light-mode .ds-menu ul li a,
html.a11y-light-mode .ds-menu li a{
  color: var(--bone-dim) !important;
}
html.a11y-light-mode .ds-menu ul li a:hover,
html.a11y-light-mode .ds-menu li a:hover,
html.a11y-light-mode .ds-menu li.active a{
  color: var(--bone) !important;
}
html.a11y-light-mode .toggle-menu span{
  background: var(--bone-dim) !important;
}

/* Notification / profile area */
html.a11y-light-mode .ds-notif .bell-img{
  filter: none !important;
  opacity: 0.75;
}
html.a11y-light-mode .ds-notif li button:hover .bell-img{
  opacity: 1;
}
html.a11y-light-mode .ds-notif .toogle-menu .menu-drop{
  background: var(--card-forest) !important;
  border-color: var(--bone-faint) !important;
  color: var(--bone) !important;
  box-shadow: 0 12px 32px rgba(31, 43, 34, 0.12) !important;
}
html.a11y-light-mode .ds-notif .menu-drop .login-dtl{
  background: rgba(31, 43, 34, 0.04) !important;
  border-color: var(--bone-faint) !important;
}
html.a11y-light-mode .ds-notif .menu-drop .login-dtl .pr-name,
html.a11y-light-mode .ds-notif .menu-drop ul li a,
html.a11y-light-mode .ds-notif .menu-drop ul li a span{
  color: var(--bone) !important;
}
html.a11y-light-mode .ds-notif .menu-drop .login-dtl .login-time,
html.a11y-light-mode .ds-notif .menu-drop .login-dtl .login-time strong{
  color: var(--bone-dim) !important;
}
html.a11y-light-mode .ds-notif .menu-drop ul li{
  border-bottom-color: var(--bone-faint) !important;
}
html.a11y-light-mode .ds-notif .menu-drop ul li a:hover,
html.a11y-light-mode .ds-notif .menu-drop ul li a:hover span{
  color: var(--forest-ink) !important;
  background: rgba(31, 43, 34, 0.04) !important;
}

/* Dashboard content shells */
html.a11y-light-mode .das-wrapper,
html.a11y-light-mode .dashboard-wrapper,
html.a11y-light-mode .main-content,
html.a11y-light-mode .content-area,
html.a11y-light-mode .page-content,
html.a11y-light-mode .investor-dashboard,
html.a11y-light-mode .right-content,
html.a11y-light-mode .dash-content{
  background: var(--forest) !important;
  color: var(--bone) !important;
}

html.a11y-light-mode .ds-card,
html.a11y-light-mode .card,
html.a11y-light-mode .box,
html.a11y-light-mode .panel,
html.a11y-light-mode .widget,
html.a11y-light-mode .stat-card,
html.a11y-light-mode .portfolio-card,
html.a11y-light-mode .scheme-card,
html.a11y-light-mode .white-box,
html.a11y-light-mode .content-box,
html.a11y-light-mode .table-responsive,
html.a11y-light-mode .dataTables_wrapper{
  background: var(--card-forest) !important;
  color: var(--bone) !important;
  border-color: var(--bone-faint) !important;
}

html.a11y-light-mode .ds-card h1,
html.a11y-light-mode .ds-card h2,
html.a11y-light-mode .ds-card h3,
html.a11y-light-mode .ds-card h4,
html.a11y-light-mode .ds-card h5,
html.a11y-light-mode .ds-card h6,
html.a11y-light-mode .card h1,
html.a11y-light-mode .card h2,
html.a11y-light-mode .card h3,
html.a11y-light-mode .card h4,
html.a11y-light-mode .card h5,
html.a11y-light-mode .card h6,
html.a11y-light-mode .page-title,
html.a11y-light-mode .section-title{
  color: var(--bone) !important;
}

html.a11y-light-mode .breadcrumb li,
html.a11y-light-mode .breadcrumb li a,
html.a11y-light-mode .breadcrumb li span{
  color: var(--bone-dim) !important;
}
html.a11y-light-mode .breadcrumb li.active span{
  color: var(--bone) !important;
}

/* Tables in investor area */
html.a11y-light-mode table,
html.a11y-light-mode .table,
html.a11y-light-mode .table th,
html.a11y-light-mode .table td{
  color: var(--bone) !important;
  border-color: var(--bone-faint) !important;
  background-color: transparent;
}
html.a11y-light-mode .table thead th,
html.a11y-light-mode table thead th{
  background: rgba(31, 43, 34, 0.04) !important;
  color: var(--bone) !important;
}

/* Buttons that used dark theme text */
html.a11y-light-mode .btn,
html.a11y-light-mode button.btn{
  color: inherit;
}
html.a11y-light-mode .btn-primary,
html.a11y-light-mode .btn-invest{
  background: var(--gold) !important;
  color: #FAFAF8 !important;
  border-color: var(--gold) !important;
}

/* Overlay behind mobile investor menu */
html.a11y-light-mode .overlay{
  background: rgba(31, 43, 34, 0.35) !important;
}

/* Mobile investor sidebar drawer */
html.a11y-light-mode .ds-menu.active{
  background: var(--forest) !important;
}

@media(max-width:900px){
  .a11y-panel{
    right:-8px;
    width:min(330px, calc(100vw - 24px));
    max-width:calc(100vw - 24px);
  }
}
