/* ===========================================================
   MathSparsh — Global Theme (light content + dark header)
   Drop-in stylesheet to unify spacing, buttons, navbar and
   mobile behaviour across all public pages.
   =========================================================== */

:root{
  /* brand */
  --ms-primary:#0d6efd;       /* Bootstrap primary */
  --ms-primary-600:#0b5ed7;
  --ms-primary-100:#e7f1ff;

  /* surfaces */
  --ms-page:#f7f9fc;
  --ms-card:#ffffff;
  --ms-border:#e5e7eb;

  /* text */
  --ms-text:#0f172a;
  --ms-muted:#6b7280;

  /* navbar */
  --ms-nav-bg:#0b1220;
  --ms-nav-text:#e5e7eb;
  --ms-nav-muted:#9ca3af;
}

/* ===== Base ===== */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--ms-page);
  color:var(--ms-text);
  line-height:1.5;
}

/* Anchor color consistent */
a{color:var(--ms-primary); text-decoration:none}
a:hover{color:var(--ms-primary-600); text-decoration:underline}

/* Cards */
.card{
  background:var(--ms-card);
  border:1px solid var(--ms-border);
  border-radius:14px;
}

/* ===== Navbar (dark) ===== */
.navbar.navbar-dark{
  background:var(--ms-nav-bg);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navbar-brand{font-weight:700}
.navbar-dark .navbar-nav .nav-link{
  color:var(--ms-nav-text); opacity:.9;
}
.navbar-dark .navbar-nav .nav-link:hover{opacity:1}
.navbar-dark .navbar-nav .nav-link.active{
  color:#fff; font-weight:600;
}

/* Desktop/tablet “pill” actions */
@media (min-width: 992px){
  .navbar .nav-link.btn,
  .navbar .btn.ms-nav{
    border-radius:999px;
    padding:.42rem 1rem;
    margin-left:.35rem;
  }
}

/* Mobile collapse — tidy full-width bars */
@media (max-width: 991.98px){
  .navbar .navbar-collapse .nav-item{width:100%}
  .navbar .navbar-collapse .nav-link.btn,
  .navbar .navbar-collapse .btn.ms-nav,
  .navbar .navbar-collapse .btn{
    display:block; width:100%!important; text-align:center;
    margin:.35rem 0!important; padding:.8rem 1rem!important;
    border-radius:.9rem!important;
  }
}

/* ===== Buttons (unified sizing + chips) ===== */
.btn{
  border-radius:12px;
  padding:.55rem 1rem;
}

/* Outline chips (Question Bank / Tests / PDFs / Premium) */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:42px; min-width:7.5rem;
  font-weight:600;
  border-width:1.5px;
}

.btn-outline-primary{color:var(--ms-primary); border-color:var(--ms-primary-100); background:#fff}
.btn-outline-primary:hover{background:var(--ms-primary-100); border-color:var(--ms-primary)}

.btn-outline-secondary{color:#475569; border-color:#e6e8ec; background:#fff}
.btn-outline-secondary:hover{background:#eef1f5; border-color:#cfd4dc}

.btn-outline-success{color:#157347; border-color:#e6f4ec; background:#fff}
.btn-outline-success:hover{background:#eaf7f0; border-color:#198754}

.btn-outline-warning{color:#b58105; border-color:#fff3cd; background:#fff}
.btn-outline-warning:hover{background:#fff3cd; border-color:#f6c343}

/* Make grouped chips wrap nicely on phones */
.btn + .btn{margin-left:.4rem}
@media (max-width: 576px){
  .btn + .btn{margin-left:.3rem}
}

/* Primary CTA */
.btn-primary{background:var(--ms-primary); border-color:var(--ms-primary)}
.btn-primary:hover{background:var(--ms-primary-600); border-color:var(--ms-primary-600)}

/* ===== Forms & search bars ===== */
form .form-control, form .form-select{min-width:0}
@media (max-width:576px){
  /* Only forms become full-width; navbar buttons remain compact in desktop and tidy in mobile menu */
  form .btn, form .btn-group, form .btn-group .btn, form button[type="submit"]{width:100%}
  .input-group{flex-wrap:wrap}
  .input-group > *{width:100%}
}

/* ===== Tables, pre/code, images safety ===== */
.mjx-container{max-width:100%!important; overflow-x:auto; -webkit-overflow-scrolling:touch}
.table, table{max-width:100%}
@media (max-width:768px){
  .table, table{display:block; width:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
}
pre{max-width:100%; white-space:pre-wrap; word-break:break-word; overflow-x:auto}

/* ===== Section spacing helper ===== */
.section{padding-top:1.25rem; padding-bottom:1.25rem}
@media (min-width:992px){ .section{padding-top:2rem; padding-bottom:2rem} }

/* ===== Hero quick-links (works even if you didn't add a wrapper) ===== */
.hero .btn-outline-primary,
.hero .btn-outline-secondary,
.hero .btn-outline-success,
.hero .btn-outline-warning{
  box-shadow:0 1px 0 rgba(17,24,39,.03);
}

/* Muted text helper */
.text-muted, .small-muted{color:var(--ms-muted)!important}

/* Keep long labels from breaking chips weirdly */
.btn{white-space:nowrap}