/* ============================================================
   modern.css — site-wide 2024 modernization layer
   Layers over the existing Bootstrap theme. Adds: modern
   typography, sticky glass navbar, slide-in side drawer,
   dark mode, refreshed buttons/cards. Chrome uses .mn- prefix.
   ============================================================ */

:root{
  --mn-accent:#0ea5e9;
  --mn-accent2:#0369a1;
  --mn-purple:#6d28d9;
  --mn-bg:#f5f8fc;
  --mn-surface:#ffffff;
  --mn-text:#0f172a;
  --mn-muted:#64748b;
  --mn-line:rgba(15,23,42,.10);
  --mn-shadow:0 14px 34px rgba(15,23,42,.12);
  --mn-radius:16px;
}
html.dark{
  --mn-bg:#0b1220;
  --mn-surface:#111827;
  --mn-text:#e2e8f0;
  --mn-muted:#94a3b8;
  --mn-line:rgba(148,163,184,.18);
  --mn-shadow:0 14px 34px rgba(0,0,0,.5);
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-family:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  transition:background .35s ease, color .35s ease; }

/* ── Modern global polish ─────────────────────────────── */
a{ transition:color .18s ease, opacity .18s ease; }
.btn{ border-radius:999px !important; font-weight:700; letter-spacing:.2px;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease; }
.btn:hover{ transform:translateY(-2px); filter:brightness(1.04); }
img{ max-width:100%; }
::selection{ background:rgba(14,165,233,.25); }
/* slim modern scrollbar */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:rgba(100,116,139,.45); border-radius:999px; border:3px solid transparent; background-clip:content-box; }
*::-webkit-scrollbar-thumb:hover{ background:rgba(100,116,139,.7); background-clip:content-box; }

/* ── Restyle the existing navbar into a glass sticky bar ── */
.navbar.navbar-default.navbar-static-top{
  position:sticky; top:0; z-index:1000; margin:0; border:none; border-radius:0;
  background:rgba(255,255,255,.82) !important; backdrop-filter:saturate(160%) blur(12px);
  box-shadow:0 6px 24px rgba(15,23,42,.08); border-bottom:1px solid var(--mn-line);
  transition:background .35s ease;
}
html.dark .navbar.navbar-default.navbar-static-top{ background:rgba(15,23,42,.78) !important; }
.navbar-default .navbar-nav > li > a{
  font-weight:700; color:var(--mn-text) !important; border-radius:999px; margin:8px 2px;
  padding-top:9px; padding-bottom:9px; transition:background .18s ease, color .18s ease;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
  background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(109,40,217,.12));
  color:var(--mn-accent2) !important;
}
.navbar-default .navbar-nav > li.active > a{
  background:linear-gradient(135deg,var(--mn-accent),var(--mn-accent2)) !important; color:#fff !important;
}

/* ── Floating side controls (menu + theme) ────────────── */
.mn-dock{ position:fixed; top:14px; right:14px; z-index:1200; display:flex; gap:10px; }
.mn-btn{ width:46px; height:46px; border-radius:14px; border:1px solid var(--mn-line);
  background:var(--mn-surface); color:var(--mn-text); cursor:pointer; display:flex;
  align-items:center; justify-content:center; font-size:20px; box-shadow:var(--mn-shadow);
  transition:transform .18s ease, background .25s ease; }
.mn-btn:hover{ transform:translateY(-2px) scale(1.05); }
.mn-btn:active{ transform:scale(.95); }
.mn-fab-menu{ display:none; }            /* shown on mobile only */

/* ── Modern mobile app bar (replaces old navbar on phones) ── */
.mn-appbar{ display:none; position:fixed; top:0; left:0; right:0; z-index:1100; height:58px;
  align-items:center; justify-content:space-between; gap:10px; padding:0 12px;
  background:rgba(255,255,255,.9); backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--mn-line); box-shadow:0 6px 22px rgba(15,23,42,.10); }
html.dark .mn-appbar{ background:rgba(15,23,42,.85); }
.mn-appbar-brand{ display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--mn-text); font-weight:900; font-size:16px; }
.mn-appbar-brand img{ height:36px; border-radius:8px; background:#fff; }
.mn-appbar-actions{ display:flex; gap:8px; }
.mn-appbar .mn-btn{ width:42px; height:42px; border-radius:12px; box-shadow:none;
  border:1px solid var(--mn-line); }

@media (max-width:767px){
  /* hide the old 2014 navbar entirely; use the app bar + drawer */
  .navbar.navbar-default.navbar-static-top{ display:none !important; }
  .mn-appbar{ display:flex; }
  body{ padding-top:58px !important; }
  .mn-dock{ display:none; }                 /* app bar owns the buttons now */
  #mobileHubFab{ display:none !important; }  /* redundant — drawer has Games Hub */
}

/* ── Slide-in side drawer ─────────────────────────────── */
.mn-backdrop{ position:fixed; inset:0; background:rgba(2,6,23,.5); backdrop-filter:blur(2px);
  opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; z-index:1300; }
.mn-backdrop.open{ opacity:1; visibility:visible; }
.mn-drawer{ position:fixed; top:0; right:0; height:100%; width:min(310px,86vw); z-index:1400;
  background:var(--mn-surface); color:var(--mn-text); box-shadow:-18px 0 50px rgba(2,6,23,.35);
  transform:translateX(100%); transition:transform .34s cubic-bezier(.5,.05,.25,1);
  display:flex; flex-direction:column; padding:18px 16px; overflow-y:auto; }
.mn-drawer.open{ transform:translateX(0); }
.mn-drawer-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mn-drawer-brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:16px; }
.mn-drawer-brand img{ height:34px; border-radius:8px; }
.mn-close{ width:38px; height:38px; border-radius:11px; border:1px solid var(--mn-line);
  background:transparent; color:var(--mn-text); font-size:20px; cursor:pointer; }
.mn-close:hover{ background:rgba(100,116,139,.12); }
.mn-drawer-sub{ font-size:12px; color:var(--mn-muted); margin:2px 2px 14px; }
.mn-drawer-links{ display:flex; flex-direction:column; gap:4px; }
.mn-link{ display:flex; align-items:center; gap:12px; padding:13px 14px; border-radius:13px;
  text-decoration:none; color:var(--mn-text); font-weight:700; font-size:15px;
  transition:background .18s ease, transform .18s ease; }
.mn-link:hover{ background:linear-gradient(135deg,rgba(14,165,233,.14),rgba(109,40,217,.12));
  color:var(--mn-accent2); transform:translateX(3px); text-decoration:none; }
.mn-link .ic{ font-size:18px; width:24px; text-align:center; }
.mn-link.cta{ justify-content:center; color:#fff;
  background:linear-gradient(135deg,var(--mn-accent),var(--mn-accent2)); box-shadow:0 10px 22px rgba(14,165,233,.4); }
.mn-link.cta.alt{ background:linear-gradient(135deg,#4c1d95,var(--mn-purple)); box-shadow:0 10px 22px rgba(109,40,217,.4); }
.mn-link.cta small{ color:#fde68a; font-weight:800; }
.mn-drawer-foot{ margin-top:auto; padding-top:16px; border-top:1px solid var(--mn-line);
  display:flex; align-items:center; justify-content:space-between; gap:10px; }
.mn-theme-row{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--mn-muted); font-weight:700; }
.mn-switch{ width:52px; height:28px; border-radius:999px; border:none; cursor:pointer; position:relative;
  background:#cbd5e1; transition:background .28s ease; }
.mn-switch::after{ content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.3); transition:transform .28s ease; }
html.dark .mn-switch{ background:linear-gradient(135deg,var(--mn-purple),var(--mn-accent)); }
html.dark .mn-switch::after{ transform:translateX(24px); }

/* ── Dark-mode coverage for common surfaces ───────────── */
html.dark, html.dark body{ background:var(--mn-bg) !important; color:var(--mn-text) !important; }
html.dark #wrapper, html.dark main, html.dark .container, html.dark .row{ background:transparent !important; }
html.dark section, html.dark .hub-wrap, html.dark .content, html.dark #content{ background-color:transparent !important; }
html.dark p, html.dark li, html.dark span, html.dark td, html.dark div{ color:inherit; }
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5{ color:#f1f5f9; }
html.dark a{ color:#7dd3fc; }
html.dark .navbar-default .navbar-nav > li > a{ color:#e2e8f0 !important; }
html.dark footer, html.dark #sub-footer, html.dark #footer{ background:#0a0f1c !important; color:#cbd5e1; }
html.dark .hub-card, html.dark .panel, html.dark .well, html.dark .card, html.dark .box,
html.dark .feature, html.dark .service{ background:var(--mn-surface) !important; color:var(--mn-text) !important; border-color:var(--mn-line) !important; }
html.dark .hub-wrap{ background:transparent; }
html.dark .navbar-brand{ filter:none; }
html.dark img.brand-logo{ background:#fff; border-radius:8px; }

/* subject feature cards (home) — make readable in dark mode */
html.dark .skill-home-solid .col-md-3{ background:#111827 !important; border-color:rgba(148,163,184,.2) !important; }
html.dark .skill-home-solid .box-area,
html.dark .box-area{ background-color:transparent !important; border-color:rgba(148,163,184,.18) !important; }
html.dark .skill-home-solid .box-area h3,
html.dark .box-area h3{ color:#f8fafc !important; -webkit-text-fill-color:#f8fafc !important; }
html.dark .skill-home-solid .box-area p,
html.dark .box-area p{ color:#cbd5e1 !important; }

/* "Why Sathara" feature cards */
html.dark .sv-feature{ background:#111827 !important; border-color:rgba(148,163,184,.2) !important; }
html.dark .sv-feature h3{ color:#f8fafc !important; -webkit-text-fill-color:#f8fafc !important; }
html.dark .sv-feature p{ color:#cbd5e1 !important; }
html.dark .sv-eyebrow{ color:#67e8f9 !important; }

/* Testimonial slider (light grey panel with white text) */
html.dark .testimonial-solid{ background:#0f172a !important; }
html.dark .testimonial-area{ background:#0b1220 !important; }
html.dark .testimonial-solid p, html.dark .testimonial-area p,
html.dark .testimonial-area b{ color:#e2e8f0 !important; }

/* ── Generic content cards/panels across all pages ──────── */
html.dark .card, html.dark .card-body, html.dark .box, html.dark .panel,
html.dark .panel-default, html.dark .panel-heading, html.dark .panel-body,
html.dark .panel-group, html.dark .panel-card, html.dark .widget,
html.dark .well, html.dark .thumbnail, html.dark .team-member,
html.dark .team-six, html.dark .service-v, html.dark .info-row,
html.dark .sec-head, html.dark .block-heading-two, html.dark .block-heading-six{
  background-color:#111827 !important;
  border-color:rgba(148,163,184,.18) !important;
  color:#e2e8f0 !important;
}
/* keep panels with a coloured header readable */
html.dark .panel-heading{ background-color:#0f1b30 !important; }
html.dark .panel-title, html.dark .panel-title a, html.dark .panel-heading a,
html.dark .card h1, html.dark .card h2, html.dark .card h3, html.dark .card h4, html.dark .card h5,
html.dark .box h1, html.dark .box h2, html.dark .box h3, html.dark .box h4, html.dark .box h5,
html.dark .widget h1, html.dark .widget h2, html.dark .widget h3, html.dark .widget h4,
html.dark .widgetheading{ color:#f8fafc !important; -webkit-text-fill-color:#f8fafc !important; }
html.dark .card p, html.dark .box p, html.dark .panel-body p, html.dark .widget p,
html.dark .card li, html.dark .box li, html.dark .widget li,
html.dark .card td, html.dark .card th{ color:#cbd5e1 !important; }
html.dark .card a, html.dark .box a, html.dark .widget a, html.dark .panel a{ color:#7dd3fc !important; }
/* generic page section headers / eyebrows */
html.dark .sec-head h2, html.dark .sec-head h3, html.dark .page-heading h1,
html.dark .heading h2, html.dark .heading h3{ color:#f1f5f9 !important; }
html.dark .sec-head p, html.dark .heading p{ color:#94a3b8 !important; }
/* tables */
html.dark table.table, html.dark .table{ color:#e2e8f0 !important; }
html.dark .table > thead > tr > th, html.dark .table > tbody > tr > td{ border-color:rgba(148,163,184,.18) !important; }
html.dark .table-striped > tbody > tr:nth-of-type(odd){ background-color:rgba(255,255,255,.03) !important; }

/* ── Teacher / schedule / results cards (mathsSir.css) ──── */
html.dark .teacher-card, html.dark .table-schedule, html.dark .result-card,
html.dark .result-card a.fancybox{ background:#111827 !important; box-shadow:0 12px 35px rgba(0,0,0,.5) !important; }
html.dark .teacher-highlight{ background:#0f1b30 !important; border-color:rgba(148,163,184,.2) !important; }
html.dark .schedule-section, html.dark .table-schedule-wrapper{ background:transparent !important; }
html.dark .wa-promo-inner{ background:#0e2a1c !important; box-shadow:0 10px 26px rgba(0,0,0,.5) !important; }
html.dark .table-schedule tbody td{ color:#e2e8f0 !important; border-color:rgba(148,163,184,.15) !important; }
html.dark .table-schedule tbody tr:nth-child(even) td{ background:rgba(255,255,255,.03) !important; }
html.dark .teacher-name, html.dark .result-card-body,
html.dark .schedule-section h2, html.dark .schedule-section h3,
html.dark .teacher-card h1, html.dark .teacher-card h2, html.dark .teacher-card h3,
html.dark .wa-promo-inner h2, html.dark .wa-promo-inner h3,
html.dark .wa-promo-inner p{ color:#f1f5f9 !important; -webkit-text-fill-color:#f1f5f9 !important; }
html.dark .schedule-subtitle, html.dark .teacher-role,
html.dark .teacher-card p, html.dark .result-card-body p{ color:#94a3b8 !important; }

/* ── Page-specific cards (courses / contact / mathresources / ads) ── */
html.dark .textbox, html.dark .cq-card, html.dark .topic-card, html.dark .formula-box,
html.dark .game-card, html.dark .item-thumbs, html.dark .grade-tabs, html.dark .grade-tab,
html.dark .resource-card, html.dark .subject-tab{
  background:#111827 !important; border-color:rgba(148,163,184,.2) !important; color:#e2e8f0 !important; }
html.dark .games-section, html.dark .topics-section, html.dark .resources-section{ background:#0b1220 !important; }
html.dark .textbox h1, html.dark .textbox h2, html.dark .textbox h3, html.dark .textbox h4,
html.dark .cq-card h1, html.dark .cq-card h2, html.dark .cq-card h3, html.dark .cq-card h4,
html.dark .topic-card h1, html.dark .topic-card h2, html.dark .topic-card h3, html.dark .topic-card h4,
html.dark .formula-box h1, html.dark .formula-box h2, html.dark .formula-box h3, html.dark .formula-box h4,
html.dark .game-card h1, html.dark .game-card h2, html.dark .game-card h3, html.dark .game-card h4{
  color:#f8fafc !important; -webkit-text-fill-color:#f8fafc !important; }
html.dark .textbox p, html.dark .cq-card p, html.dark .topic-card p, html.dark .formula-box p,
html.dark .game-card p, html.dark .textbox li, html.dark .topic-card li,
html.dark .formula-box span, html.dark .formula-box code{ color:#cbd5e1 !important; }
html.dark .textbox a, html.dark .cq-card a, html.dark .topic-card a, html.dark .game-card a{ color:#7dd3fc !important; }

@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } html{ scroll-behavior:auto; } }