/* =====================================================================
 * ncert-solutions/ncert-content.css
 * ---------------------------------------------------------------------
 * Scoped successor of ncert-solutions/style.css (which is KEPT UNTOUCHED
 * on disk as the pre-integration reference but is no longer linked).
 *
 * WHY A NEW FILE
 * --------------
 * The old style.css was a full site stylesheet: it carried GLOBAL resets
 *
 *     * { margin:0; padding:0 }   body {...}   a {...}   h1..h6 {...}
 *     input/select/textarea {...}   .container {...}
 *     .site-header / .nav-menu / .nav-list / .site-footer
 *
 * Loading it next to assets/css/style.css meant the NCERT globals
 * overrode the MAIN site's navbar and footer (both sheets define
 * .container and .breadcrumbs; only the main sheet defines .ro-navbar).
 * Req 27 forbids changing global selectors on the main site to work
 * around this, so the fix is applied HERE instead: every NCERT rule
 * below is anchored on .ncert-main (the <main> element of an NCERT
 * page) or .ncert-page (its <body>), so nothing in this file can reach
 * the navbar, the footer, or any non-NCERT page.
 *
 * What the NCERT content still gets (preserved on purpose, Req 3):
 *   - its own h1/h2/h3 sizes and 1.8 line-height body copy
 *   - the chapter sidebar / table-of-contents layout
 *   - the full-width, bordered, gradient-headed content tables
 *   - the solution / math / code / note boxes
 *   - the card grids, the chapter pager and the FAQ block
 *   - responsive images and scrollable wide tables
 * ===================================================================== */

/* ---------------------------------------------------------------------
 * Design tokens the NCERT components rely on. The main stylesheet already
 * defines the colours/spacing; these are the few that only existed in the
 * old NCERT sheet, declared inside the NCERT scope so nothing leaks out.
 * ------------------------------------------------------------------- */
.ncert-main {
  --ncert-container-max: 1200px;
  --ncert-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --ncert-shadow-md: 0 10px 20px rgba(15, 23, 42, 0.12);
  --ncert-shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.16);
  --ncert-radius-sm: 0.75rem;
  --ncert-radius-md: 1rem;
  --ncert-radius-lg: 1.5rem;
  --ncert-spacing-xl: 1.5rem;
  --ncert-transition: 0.22s ease;
}

/* =====================================================================
 * 1. PAGE TYPOGRAPHY  (was: the old sheet's global h1/h2/h3 + p/li rules)
 *    Scoped to .ncert-main so the navbar and footer keep the site's own.
 * ===================================================================== */
.ncert-main h1,
.ncert-main h2,
.ncert-main h3,
.ncert-main h4,
.ncert-main h5,
.ncert-main h6 {
  color: var(--neutral-900);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.ncert-main h1 { font-size: clamp(2rem, 4vw, 3.3rem); }
.ncert-main h2 { font-size: clamp(1.65rem, 2.8vw, 2.4rem); }
.ncert-main h3 { font-size: clamp(1.2rem, 2vw, 1.7rem); }

.ncert-main p,
.ncert-main li {
  color: var(--neutral-700);
  line-height: 1.8;
}

/* Chapter content is prose-heavy; keep its own measure and rhythm. */
.ncert-main .chapter-content { max-width: 54rem; }

.ncert-main .chapter-content p,
.ncert-main .chapter-content li,
.ncert-main .solution-copy,
.ncert-main .note-box p {
  font-size: 1.02rem;
  line-height: 1.8;
}

.ncert-main .chapter-content h2,
.ncert-main .chapter-content h3,
.ncert-main .chapter-content h4 { margin-top: 2rem; }

.ncert-main .chapter-content a { color: var(--primary-600); }
.ncert-main .chapter-content a:hover { color: var(--primary-700); }

/* Images must stay responsive wherever the imported content embeds them. */
.ncert-main img,
.ncert-main svg,
.ncert-main video {
  max-width: 100%;
  height: auto;
}


/* =====================================================================
 * 2. CONTENT TABLES  (Req: HTML tables must keep their exact look)
 * ===================================================================== */
.ncert-main .chapter-content table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid var(--neutral-200);
}

.ncert-main .chapter-content th,
.ncert-main .chapter-content td {
  padding: 0.75rem 0.8rem;
  border-bottom: 1px solid var(--neutral-200);
  text-align: left;
  vertical-align: top;
}

.ncert-main .chapter-content th {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
  color: #fff;
}

.ncert-main .table-responsive { overflow-x: auto; margin: 1.5rem 0; }

/* =====================================================================
 * 3. CHAPTER SHELL: header, sidebar + TOC, pager
 * ===================================================================== */
.ncert-main .chapter-header {
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--neutral-200);
}

.ncert-main .chapter-title { margin-bottom: 0.6rem; }

.ncert-main .chapter-subtitle {
  color: var(--neutral-600);
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 0.9rem;
}

.ncert-main .chapter-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.ncert-main .chapter-meta span {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--primary-50);
  color: var(--primary-700);
  font-size: 0.8rem;
  font-weight: 600;
}

.ncert-main .chapter-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: 2rem;
}

.ncert-main .chapter-sidebar { position: sticky; top: 88px; align-self: start; }

.ncert-main .toc-wrapper {
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  border-radius: var(--ncert-radius-lg);
  padding: 1rem;
}

.ncert-main .toc-title { font-size: 1rem; font-weight: 700; margin-bottom: 0.75rem; }
.ncert-main .toc-list { list-style: none; padding: 0; margin: 0; }

.ncert-main .toc-list a {
  display: block;
  min-height: 44px;
  padding: 0.7rem 0.8rem;
  border-radius: 0.7rem;
  color: var(--neutral-700);
  font-size: 0.92rem;
  line-height: 1.5;
}

.ncert-main .toc-list a:hover { background: rgba(37, 99, 235, 0.05); color: var(--primary-600); }

.ncert-main .chapter-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--neutral-200);
}

.ncert-main .chapter-pager a {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--neutral-200);
  border-radius: var(--ncert-radius-sm);
  color: var(--primary-600);
  font-weight: 600;
}

.ncert-main .chapter-pager a:hover { background: var(--primary-50); color: var(--primary-700); }

/* =====================================================================
 * 4. BOXES: solution / math / code / note
 * ===================================================================== */
.ncert-main .solution-box,
.ncert-main .math-box,
.ncert-main .code-block,
.ncert-main .note-box,
.ncert-main .faq-item {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--neutral-200);
  border-radius: var(--ncert-radius-lg);
  box-shadow: var(--ncert-shadow-sm);
  padding: 1.35rem;
  margin-bottom: 1.25rem;
  overflow-x: auto;
  transition: transform var(--ncert-transition), box-shadow var(--ncert-transition), border-color var(--ncert-transition);
}

.ncert-main .solution-box:hover {
  transform: translateY(-3px);
  box-shadow: var(--ncert-shadow-md);
  border-color: rgba(37, 99, 235, 0.2);
}

/* Per-box surface treatment. These two rules used to sit at the very end of
   this file; they are the same declarations, moved next to the box rule they
   override so the section stays self-contained. */
.ncert-main .math-box,
.ncert-main .code-block {
  background: #0f172a;
  color: #dbeafe;
  border-color: rgba(148, 163, 184, 0.25);
}

.ncert-main .note-box { background: var(--primary-50); border-color: rgba(37, 99, 235, 0.2); }

/* =====================================================================
 * 5. CARD GRIDS  (landing / class / subject listings)
 * ===================================================================== */
.ncert-main .classes-section,
.ncert-main .subjects-section,
.ncert-main .chapters-section,
.ncert-main .solution-section,
.ncert-main .faq-section { padding: 0 0 clamp(2rem, 4vw, 3rem); }

.ncert-main .classes-grid,
.ncert-main .subjects-grid,
.ncert-main .chapters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--ncert-spacing-xl);
  margin-top: 2rem;
}

.ncert-main .class-card,
.ncert-main .subject-card,
.ncert-main .chapter-card,
.ncert-main .card {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid var(--neutral-200);
  border-radius: var(--ncert-radius-lg);
  box-shadow: var(--ncert-shadow-sm);
  padding: 1.35rem;
  transition: transform var(--ncert-transition), box-shadow var(--ncert-transition), border-color var(--ncert-transition);
}

.ncert-main .class-card:hover,
.ncert-main .subject-card:hover,
.ncert-main .chapter-card:hover,
.ncert-main .card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ncert-shadow-md);
  border-color: rgba(37, 99, 235, 0.2);
}

.ncert-main .class-card a,
.ncert-main .subject-card a,
.ncert-main .chapter-card a { display: block; color: inherit; text-decoration: none; }

.ncert-main .class-card h2,
.ncert-main .subject-card h2,
.ncert-main .chapter-card h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }

.ncert-main .class-card p,
.ncert-main .subject-card p,
.ncert-main .chapter-card p {
  color: var(--neutral-600);
  font-size: 0.92rem;
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.ncert-main .class-card span,
.ncert-main .subject-card span,
.ncert-main .chapter-card span { color: var(--primary-600); font-weight: 600; font-size: 0.9rem; }

.ncert-main .page-header {
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--neutral-200);
}

.ncert-main .page-header p { color: var(--neutral-600); font-size: 1.02rem; }

/* =====================================================================
 * 6. HERO + SEARCH  (landing page only)
 * ===================================================================== */
.ncert-main .hero-section {
  position: relative;
  padding: clamp(3.25rem, 6vw, 5.5rem) 0;
  background: linear-gradient(135deg, var(--primary-600) 0%, #7c3aed 100%);
  color: #fff;
  overflow: hidden;
}

.ncert-main .hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 42%);
}

.ncert-main .hero-section > * { position: relative; z-index: 1; }
.ncert-main .hero-section h1,
.ncert-main .hero-section p { color: #fff; }
.ncert-main .hero-section p { max-width: 42rem; margin-inline: auto; opacity: 0.94; }

.ncert-main .search-wrapper {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  max-width: 38rem;
  margin: 2rem auto 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 1rem;
  padding: 0.55rem;
}

.ncert-main .search-input {
  flex: 1;
  min-height: 44px;
  border: none;
  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.96);
  padding: 0.8rem 1rem;
  font-size: 16px;
}

.ncert-main .search-btn {
  min-height: 44px;
  border: none;
  border-radius: 0.8rem;
  background: var(--accent-500);
  color: #fff;
  font-weight: 800;
  padding: 0.75rem 1.2rem;
}

/* Search results (landing page) */
.ncert-main .search-results {
  max-width: calc(var(--ncert-container-max) - 2rem);
  margin: 1rem auto 2rem;
  padding: 0 1rem;
  position: relative;
  z-index: 10;
  text-align: left;
}

.ncert-main .search-count { font-size: 0.9rem; font-weight: 600; color: var(--neutral-600); margin-bottom: 0.75rem; }

.ncert-main .search-results-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }

.ncert-main .search-result-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid var(--neutral-200);
  border-radius: var(--ncert-radius-md);
  padding: 0.9rem 1rem;
  transition: border-color var(--ncert-transition), box-shadow var(--ncert-transition);
}

.ncert-main .search-result-item:hover { border-color: var(--primary-500); box-shadow: var(--ncert-shadow-sm); }

.ncert-main .search-result-item a { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; color: inherit; text-decoration: none; }

.ncert-main .search-result-title { font-weight: 600; color: var(--neutral-900); line-height: 1.4; }
.ncert-main .search-result-meta { font-size: 0.85rem; color: var(--neutral-600); line-height: 1.4; }

.ncert-main .search-result-tag {
  flex-shrink: 0;
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary-600);
  background: var(--primary-50);
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  margin-top: 0.15rem;
}

.ncert-main .tag-subject { color: #0369a1; background: #e0f2fe; }
.ncert-main .tag-chapter { color: #15803d; background: #dcfce7; }
.ncert-main .search-result-item mark { background: #fef08a; color: inherit; border-radius: 2px; padding: 0 1px; }

.ncert-main .search-no-results {
  font-size: 0.98rem;
  color: var(--neutral-700);
  background: var(--neutral-50);
  border: 1px dashed var(--neutral-300);
  border-radius: var(--ncert-radius-md);
  padding: 1rem 1.25rem;
}

/* =====================================================================
 * 7. FAQ
 * ===================================================================== */
.ncert-main .faq-item { padding: 0.9rem 1.1rem; }

.ncert-main .faq-item summary { cursor: pointer; font-weight: 600; color: var(--neutral-900); line-height: 1.5; }
.ncert-main .faq-item p { margin: 0.75rem 0 0; }

/* =====================================================================
 * 8. ACCESSIBILITY
 *    .skip-link sits directly under <body> on the chapter templates, so it
 *    is anchored on the body class rather than on <main>.
 * ===================================================================== */
.ncert-page .skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 999;
  background: var(--neutral-900);
  color: #fff;
  padding: 0.75rem 1.1rem;
  border-radius: 0 0 var(--ncert-radius-sm) 0;
  text-decoration: none;
}

.ncert-page .skip-link:focus { left: 0; }

.ncert-main .visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
 * 9. RESPONSIVE  (Req 28)
 *
 * ROOT-CAUSE NOTE. `1fr` is really `minmax(auto, 1fr)`: the `auto` minimum
 * is the item's min-content width, so a single wide descendant (a table
 * with `min-width`, a long unbroken word) can push a whole grid track
 * wider than the screen and produce page-level horizontal scrolling.
 * Every grid track that is allowed to collapse therefore uses
 * `minmax(0, 1fr)` - the standard fix - instead of bare `1fr`.
 * ===================================================================== */

/* The chapter tables carry `min-width: 520px` so they stay readable, and
   the import wraps them in `.table-responsive`. Any table NOT wrapped
   still has to be contained, so the content column itself is the
   horizontal scroll container - the page never widens. */
.ncert-main .chapter-content {
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Grid/flex children must be allowed to shrink below their content width. */
.ncert-main .chapter-layout,
.ncert-main .chapter-layout > *,
.ncert-main .classes-grid,
.ncert-main .subjects-grid,
.ncert-main .chapters-grid,
.ncert-main .search-result-item,
.ncert-main .search-result-item > * {
  min-width: 0;
}

@media (max-width: 1024px) {
  .ncert-main .chapter-layout { grid-template-columns: minmax(0, 1fr); }
  .ncert-main .chapter-sidebar { position: static; }
}

@media (max-width: 767px) {
  .ncert-main .search-wrapper { flex-direction: column; padding: 0.8rem; }
  .ncert-main .search-input,
  .ncert-main .search-btn { width: 100%; }
  .ncert-main .chapter-pager { flex-direction: column; align-items: stretch; }
  .ncert-main .chapter-pager a { text-align: center; }
  .ncert-main .search-result-item { flex-wrap: wrap; }
  .ncert-main .chapter-content table { min-width: 100%; }
}

@media (max-width: 479px) {
  .ncert-main .class-card,
  .ncert-main .subject-card,
  .ncert-main .chapter-card,
  .ncert-main .card,
  .ncert-main .solution-box,
  .ncert-main .math-box,
  .ncert-main .code-block,
  .ncert-main .note-box,
  .ncert-main .faq-item { padding: 1rem; }
  /* Long Hindi/Sanskrit headings and unbroken tokens must wrap rather than
     widen the column. */
  .ncert-main h1,
  .ncert-main h2,
  .ncert-main h3,
  .ncert-main h4,
  .ncert-main p,
  .ncert-main li { overflow-wrap: break-word; }
}