/* educlastic.css */
body { font-family: 'Segoe UI', sans-serif; background: #f5f6f8; margin: 0; }
.topnav { display: flex; align-items: center; padding: 1rem; background: #239edc; color: #fff; }
.brand { font-weight: bold; font-size: 1.4rem; margin-right: 1rem; }
.slogan { font-size: 1rem; flex: 1; opacity: 0.85; }
.nav-home { background: #154168; color: #fff; border-radius: 4px; padding: 0.4em 1em; margin-left: 2em; }
.sidebar { width: 220px; background: #eee; position: fixed; top: 58px; left: 0; bottom: 0; overflow-y: auto; transition: width 0.2s; }
.sidebar.collapsed { width: 64px; }
main { margin-left: 240px; padding: 2rem; }
.breadcrumb ol { display: flex; list-style: none; padding: 0; margin: 0 0 1.5em 0; }
.breadcrumb li:not(:last-child)::after { content: "→"; margin: 0 0.5em; color: #239edc; }
.breadcrumb a, .breadcrumb span { color: #239edc; text-decoration: none; }

/* .study-cards { display: grid; grid-gap: 2em; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } */


.study-cards {
  background-color: white;  /* this is the "gap" color */
  padding: 1rem;            /* padding around the entire block */
  display: flex;
  flex-direction: column;
  gap: 1.5rem;              /* gap between cards, new CSS property */
  /* Or use margin on children if gap not supported */
}

.study-card {
  background: #fff; /* default background overridden by JS color or #e3f2fd; */
  border-radius: 8px;
  box-shadow: 0 0 10px #ccd4db50;
  display: flex;
  flex-direction: column;
  padding: 1.2em;
  align-items: flex-start;
  gap: 2em;
  
  /* Remove margins since gap handles spacing */
  /* margin: 0; */
  margin-top: 1rem;
  margin-bottom: 1rem;
}

/* Remove last margin */
.study-card:last-child {
  margin-bottom: 0;
}


.study-card { background: #fff; border-radius: 8px; box-shadow: 0 0 10px #ccd4db50; display: flex; padding: 1.2em; align-items: flex-start; gap: 1em; }
.yt-thumb img { width: 160px; border-radius: 6px; }
.notes-html { flex: 1; min-width: 0; }
.hidden { display: none !important; }

/* Support for Fenced Code Blocks in Markdown with Language Labels from highlight.js  */
pre code {
  display: block;
  padding: 1em;
  border-radius: 6px;
  font-family: 'Source Code Pro', monospace;
  background: #f0f0f0;
  overflow-x: auto;
  font-size: 0.95em;
  color: #333;
}


/* Optional: Different background for specific languages */
pre code.language-python {
  background-color: #ffe6e6; /* light pink-ish */
}

pre code.language-json {
  background-color: #e6f7ff; /* light blue-ish */
}

/* Style for rendered math blocks */
.math-display {
      margin: 1em 0;
      padding: 0.5em;
      background: #fff;
      border-radius: 6px;
      box-shadow: 0 0 5px #ccc;
}
	
	
	
/* educlastic.css additions (for sidebar + toggle + hero + dark mode) */

/* Sidebar */
aside.sidebar {
  width: 60px;
  overflow-y: auto;
  position: fixed;
  left: 0;
  top: 58px;
  bottom: 0;
  background: #222;
  color: white;
  transition: width 0.2s ease;
  z-index: 1000;
  padding-top: 1em;
}

aside.sidebar:not(.collapsed) {
  width: 240px;
}


/* Hide all text inside sidebar when collapsed */
aside.sidebar.collapsed * {
  color: transparent !important;   /* makes text invisible */
  pointer-events: none;            /* disables clicks */
  user-select: none;               /* disables text selection */
}

/* Keep toggle button visible even when sidebar collapsed */
aside.sidebar.collapsed .sidebar-toggle {
  color: white !important;         /* override to show toggle icon */
  pointer-events: auto;
  user-select: auto;
}

/* Hide arrow indicators completely when sidebar is collapsed */
aside.sidebar.collapsed .sidebar-topic.has-children > button::after,
aside.sidebar.collapsed .sidebar-sublist li.has-children > a::after {
  display: none;
}

.sidebar-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 1.8rem;
  margin: 0 0.5rem 1rem 0.5rem;
  cursor: pointer;
}

.sidebar-nav {
  font-family: Arial, sans-serif;
}

.sidebar-topic > button {
  width: 100%;
  background: none;
  border: none;
  color: #ccc;
  cursor: pointer;
  padding: 0.7em;
  text-align: left;
  font-size: 1.1em;
}

.sidebar-topic > ul {
  list-style: none;
  padding-left: 1em;
  margin: 0;
  display: none;
}

.sidebar-topic:not(.collapsed) > ul {
  display: block;
}

.sidebar-sublist li a {
  color: #aaa;
  text-decoration: none;
  font-size: 0.9em;
  display: block;
  padding: 0.3em 0;
}

.sidebar-sublist li a:hover {
  color: white;
  text-decoration: underline;
}


/* */
/* Show arrow/caret next to topics that have children */
.sidebar-topic.has-children > button::after,
.sidebar-sublist li.has-children > a::after {
  content: '▶'; /* right pointing arrow */
  float: right;
  font-size: 0.8em;
  transition: transform 0.3s ease;
  color: #999;
  margin-left: 8px;
}

/* Rotate arrow when expanded (when .collapsed class is removed) */
.sidebar-topic:not(.collapsed).has-children > button::after {
  transform: rotate(90deg);
}




/* Hero Section */
.hero {
  background: #f0f4f8;
  color: #333;
  padding: 2em;
  margin-bottom: 1.5em;
  border-radius: 8px;
  box-shadow: 0 0 10px #ccc;
}

/* Dark Mode */
body.dark {
  background: #121212;
  color: white;
}

body.dark .hero {
  background: #222;
  color: #eee;
}

body.dark aside.sidebar {
  background: #111;
  color: #eee;
}

body.dark .sidebar-topic > button,
body.dark .sidebar-sublist li a {
  color: #aaa;
}

/* Topnav dark/light toggle style */
.dark-light-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
}


/* Exclude cards from dark mode styling */
body.dark #cards,
body.dark .study-card {
  background-color: #ffffff !important;  /* force white background */
  color: #000000 !important;             /* force black / dark text */
  border-color: #ddd !important;         /* lighter border */
  box-shadow: none !important;             /* override dark shadows if any */
}




/* Main content margin when sidebar expanded */
/*
main {
  margin-top: 58px;
  padding: 1em;
}
*/

/* Mobile-second responsive fixes (for small screens, max-width: 640px) */
@media (max-width: 640px) {
  /* Show sidebar on mobile */
  aside.sidebar {
    position: fixed;
    width: 40px; /* make sidebar visible */
    height: 100vh;
    top: 120px;
    left: 0;
    background: #222;
	overflow-x: hidden;
    overflow-y: auto;
    z-index: 1000;
  }
  aside.sidebar.collapsed {
    width: 20px; /* keep visible even when collapsed */
  }

  /* Hide sidebar text and sublists */
  aside.sidebar .sidebar-nav,
  aside.sidebar .sidebar-sublist {
    display: none;
  }
  
  /* When expanded, show sidebar nav */
  aside.sidebar:not(.collapsed) {
    width: 180px;       /* expanded sidebar width */
  }

  aside.sidebar:not(.collapsed) .sidebar-nav {
    display: block;
  }
  
  /* Show only toggle button (hamburger) */
  .sidebar-toggle {
    display: block;
    position: fixed;
    left: 8px;
    top: 10px;
    background: #222;
    color: white;
    border-radius: 4px;
    font-size: 1.6rem;
    z-index: 1100;
    cursor: pointer;
    width: 36px;
    height: 36px;
    text-align: center;
    line-height: 36px;
  }
  
  /* Hide all sublists by default */
  .sidebar-sublist {
    display: none;
  }

  /* Show sublist if parent topic is expanded (no .collapsed) */
  .sidebar-topic:not(.collapsed) > .sidebar-sublist {
    display: block;
  }

  /* Small padding for sublist links on mobile */
  .sidebar-sublist li a {
    padding-left: 1.2rem;
  }  
  
  
  /* Cards container centering */
  #cards {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center; /* center cards horizontally */
    max-width: 100%;
    margin-left: 0; /* no sidebar push */
  }

  /* Cards width for better mobile fit */
  .study-card {
    width: 90vw;
    max-width: 400px;
    margin-bottom: 1.2rem;
  }

  /* Hero section adjustment */
  section.hero {
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
    text-align: center;
  }

  /* Navbar tweaks for mobile */
  nav.topnav {
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
  }
  nav.topnav .brand {
    flex: 1 1 100%;
    margin-bottom: 0.5rem;
    font-size: 1.4rem;
    text-align: center;
  }
  nav.topnav .dark-light-toggle {
    flex: none;
    font-size: 1.6rem;
    margin-left: 0;
    margin-top: 0.2rem;
  }
  nav.topnav .slogan {
    flex: 1 1 100%;
    text-align: center;
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: #ccc;
  }

  /* Adjust main content margin to avoid offset */
  main {
    margin-left: 0;
    padding-top: 1rem;
  }
  
  
}


/* Hide sublists when collapsed */
.sidebar-sublist {
  display: none;
  list-style: none;
  padding-left: 1em;
  margin: 0;
  transition: max-height 0.3s ease;
  overflow: hidden;
}

/* Show sublist when parent topic is expanded */
.sidebar-topic:not(.collapsed) > .sidebar-sublist {
  display: block;
  max-height: 1000px; /* large enough for animation */
}