/* ───────── Brand tokens ───────── */
:root {
  --blue: #1f6feb;
  --yellow: #ffd24d;
  --bg: #f9fafb;
  --card: #ffffff;
  --border: #e5e7eb;
  --ink: #1f2937;
  --ink-strong: #0b1221;
  --muted: #475569;
  --ring: #93c5fd;
  --shadow: 0 4px 18px rgba(2,6,23,.06);
  --panel: #eef2f7;
  --panel-border: #e2e8f0;
  --tile: #e2e8f0;
  --tile-border: #cbd5e1;
  --tile-badge: #dbeafe;
  --tile-hover: #dbe0e7;
  --tile-muted: #374151;
  --tile-title: #111827;
}

/* Dark mode overrides */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b1020;
    --card: #0f172a;
    --border: #1e293b;
    --ink: #e5e7eb;
    --ink-strong: #e5e7eb;
    --muted: #94a3b8;
    --ring: #60a5fa;
    --shadow: 0 8px 32px rgba(2,6,23,.45);
    --panel: #0e1526;
    --panel-border: #1b2840;
    --tile: #0f172a;
    --tile-border: #1e293b;
    --tile-badge: #111c2e;
    --tile-hover: #13213a;
    --tile-muted: #cbd5e1;
    --tile-title: #e5e7eb;
  }
}
html.dark-mode {
  --bg: #0b1020;
  --card: #0f172a;
  --border: #1e293b;
  --ink: #e5e7eb;
  --ink-strong: #e5e7eb;
  --muted: #94a3b8;
  --ring: #60a5fa;
  --shadow: 0 8px 32px rgba(2,6,23,.45);
  --panel: #0e1526;
  --panel-border: #1b2840;
  --tile: #0f172a;
  --tile-border: #1e293b;
  --tile-badge: #111c2e;
  --tile-hover: #13213a;
  --tile-muted: #cbd5e1;
  --tile-title: #e5e7eb;
}

/* ───────── Page base ───────── */

body {
  background: var(--bg);
  color: var(--ink);
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  padding: 0;
}


/* Optional: ensure content wrapper does not break layout */
.content-wrapper {
  width: 100%;
  max-width: 100%;
}

/* Hero */
.math-hero {
  text-align: center;
  padding: 2.2rem 1rem 1.25rem;
  background: linear-gradient(135deg, color-mix(in srgb, var(--blue) 10%, transparent), color-mix(in srgb, #fff 70%, transparent));
  border-bottom: 1px solid var(--border);
}


.math-hero h1 {
  font-size: clamp(1.8rem, 2.2vw, 2.3rem);
  margin: 0.2rem 0 0.4rem;
  color: var(--ink-strong);
}
.math-hero p {
  font-size: 1.05rem;
  margin: 0;
  color: var(--muted);
}
.back-link {
  display: inline-block;
  margin: 0 0 .6rem;
  font-size: .95rem;
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}
.back-link:hover {
  text-decoration: underline;
}

/* ───────── Layout ───────── */
.main-grid-layout {
  display: flex;
  justify-content: center;
  padding: 1rem;
}
.subcategory-wrapper {
  width: 100%;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.subcategory-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ───────── Cards ───────── */
/* ───────── Subcategory Cards ───────── */
.subcategory-card {
  background: var(--tile);
  border: 1px solid var(--tile-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;       /* adjust if you want slightly smaller spacing */
  position: relative;
  text-decoration: none;
  color: var(--tile-muted);
  overflow: hidden;   /* keep badges inside */
   scroll-margin-top: 120px;
}

.formulas-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem; /* spacing below description */
}


/* Card hover/focus */
.subcategory-card:hover {
  background: var(--tile-hover);
  border-color: color-mix(in srgb, var(--tile-border) 60%, var(--blue) 40%);
  transform: translateY(-2px);
}
.subcategory-card:focus-visible {
  box-shadow: 0 0 0 3px var(--ring);
}

/* Card top: title + count badge */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.subcategory-card h3 {
  font-size: 1.3rem;          /* slightly larger */
  font-weight: 700;           /* bold */
  color: var(--tile-title);   /* dark text */
  text-transform: uppercase;  /* uppercase for emphasis */
  letter-spacing: 0.3em;      /* slight spacing */
  margin: 0 0 0.5rem 0;       /* spacing below the title */
  border-bottom: 2px solid var(--blue); /* subtle underline */
  padding-bottom: 0.25rem;    /* space between text and underline */
  display: inline-block;      /* shrink underline to text width */
}

.subcategory-card h3:hover {
  color: var(--blue);
  cursor: pointer;
}

.card-top-link {
  text-decoration: none;
  color: inherit;
}
.subcategory-card a,
.subcategory-card h3,
.formula-badge {
  text-decoration: none; /* remove underlines */
  color: inherit;        /* keep color consistent */
}

.subcategory-card p {
  font-size: 0.93rem;
  color: var(--tile-muted);
  margin: 0;
}

/* Quiz count badge */
.badge {
  display: inline-block;
  min-width: 2.1rem;
  text-align: center;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 84%, var(--blue) 16%);
  color: var(--ink-strong);
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--border));
}

/* Divider inside card */
.card-inner-divider {
  border: 0;
  height: 1px;
  background-color: var(--blue);
  margin:5rem 0  0 0; 
  opacity: 1;
}

/* Description text */
/* -----------------------------
   Subcategory Card - Optimized
--------------------------------*/

.subcategory-card {
  background-color: #f8f9fb;          /* light card background */
  border-radius: 12px;                 /* rounded corners */
  padding: 20px;                       /* internal spacing */
  margin-bottom: 24px;                 /* spacing between cards */
  border: 1px solid #e0e0e0;          /* subtle border */
  display: flex;
  flex-direction: column;
  gap: 16px;                           /* space between card elements */
  
  /* Improve rendering speed */
  contain: layout style;               /* limits reflow inside card */
  will-change: transform;              /* hint browser for smoother paint */
  
  /* Optional lightweight shadow */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect for desktop */
.subcategory-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Card top */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-top h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.3;
}

.card-top .badge {
  background-color: #1e40af;
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Description text */
.subcategory-description {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;

  /* Improve LCP and rendering */
  display: block;
  contain: content;         /* reduces reflow impact */
  word-break: break-word;
}

/* Formulas badges */
.formulas-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.formula-badge {
  background-color: #ffd24d;
  color: #111;
  font-size: 0.875rem;
  padding: 5px 10px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
}

/* CTA button */
.cta-button {
  display: inline-block;
  background-color: #1e40af;
  color: #fff;
  padding: 12px 18px;
  font-size: 1rem;
  font-weight: 600;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.cta-button:hover {
  background-color: #374bb2;
}

/* Disabled card state */
.subcategory-card.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 768px) {
  .subcategory-card {
    padding: 16px;
    gap: 12px;
  }

  .card-top h3 {
    font-size: 1.1rem;
  }

  .cta-button {
    width: 100%;
  }
}

/* ───────── Page Layout ───────── */


/* Page layout grid only wraps the main content area */
/* Ensure page layout spans full width */
.page-layout {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  
}

.left-sidebar,
.right-sidebar {
  position: sticky;
  top: 80px; /* adjust this to match your navbar height */
  align-self: start;
}

.left-sidebar h3,
.right-sidebar h3 {
  margin-bottom: 1rem;
  font-size: 1.05rem;
  color: var(--tile-title);
}

.left-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.left-sidebar li {
  margin: 0.5rem 0;      /* space between items */
  padding: 0.25rem 0;    /* extra padding for better readability */
  display: block;        /* ensures items take full width */
  color: var(--tile-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.left-sidebar li.active {
  font-weight: bold;
  color: var(--blue);
}

.left-sidebar li:hover {
  color: var(--blue);
}

/* Optional: ensure the list starts below the sidebar title */
.left-sidebar ul::before {
  content: '';
  display: block;
  height: 0.5rem; /* add spacing under title */
}

.left-sidebar {
  position: sticky;
  top: 80px; /* offset by navbar height */
  align-self: start;
  margin-left: 5rem;
}

.main-grid-layout {
  display: flex;
  justify-content: center;
  padding: 2rem 1rem 1rem; /* space around content */
}


/* ───────── Main Content ───────── */
.main-content {
  max-width: 900px;
  margin: 0 auto;
}

.subcategory-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.subcategory-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ───────── Subcategory Cards ───────── */
.subcategory-card {
  background: var(--tile);
  border: 1px solid var(--tile-border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  position: relative;
  text-decoration: none;
  color: var(--tile-muted);
}

/* Card top: clickable title + count badge */
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-top h3 {
  font-size: 1.1rem;
  color: var(--tile-title);
  margin: 0;
}

.card-top .badge {
  display: inline-block;
  min-width: 2.1rem;
  text-align: center;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 84%, var(--blue) 16%);
  color: var(--ink-strong);
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--blue) 35%, var(--border));
}

/* Description and divider */
.subcategory-description {
  margin: 0.5rem 0;
  font-size: 0.93rem;
  line-height: 1.5;
}

.card-inner-divider {
  border: 0;
  height: 1px;
  background-color: black; /* visible divider */
  margin: 0.5rem 0 1rem 0; /* top 0.5rem, bottom 1rem for spacing to badges */
}

/* Formula badges */
.formulas-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.formula-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background-color: var(--yellow);
  color: var(--ink-strong);
  font-weight: 600;
  font-size: 0.85rem;
  white-space: nowrap;
  text-decoration: none;
}

.formula-badge:hover {
  background-color: color-mix(in srgb, var(--yellow) 85%, var(--blue) 15%);
}

/* CTA Button */
.cta-button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background-color: var(--blue);
  color: white;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
  text-align: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.cta-button:hover {
  background-color: color-mix(in srgb, var(--blue) 80%, var(--yellow) 20%);
  transform: translateY(-1px);
}

/* ───────── Responsive Layout ───────── */
/* Hide both sidebars on smaller than desktop */
@media (max-width: 1200px) {
  .left-sidebar,
  .right-sidebar {
    display: none;
  }

  .page-layout {
    display: block; /* main content takes full width */
  }

  .main-content {
    width: 100%;
  }
}


.right-sidebar {
  padding: 1rem;
  background-color: var(--tile);
  border-radius: 12px;
  border: 1px solid var(--tile-border);
  box-shadow: var(--shadow);
  margin-left: 1rem;
  margin-right: 5rem;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

.right-sidebar h3 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.75rem;
  font-size: 0.95rem;
  color: var(--ink-strong);
}

.right-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}


.right-sidebar li a {
  display: block;
  text-decoration: none;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--blue) 10%, var(--tile) 90%);
  color: var(--ink-strong);
  font-weight: 600;
  transition: all 0.2s ease;
}

.right-sidebar li a:hover {
  background-color: var(--blue);
  color: #fff;
}

.quiz-divider {
  border: none;
  height: 2px;
  background: #1e40af; /* brand color */
  width: 100px;         /* short line for style */
  margin: 3rem auto;    /* space above and below */
  border-radius: 2px;
}
[data-lazy="true"] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

[data-lazy="true"].loaded {
  opacity: 1;
  transform: translateY(0);
}

.subcategory-description[data-lazy="true"] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.subcategory-description.loaded {
  opacity: 1;
  transform: translateY(0);
}

.subcategory-explanation table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0 1.2rem;
  font-size: 1rem;
}
.subcategory-explanation th, .subcategory-explanation td {
  border: 1px solid var(--tile-border);
  padding: 0.5rem 0.6rem;
  text-align: left;
}
.subcategory-explanation th {
  background: color-mix(in srgb, var(--card) 92%, var(--blue) 8%);
  font-weight: 800;
  color: var(--blue-strong);
}