/* ========== existing styles (kept) ========== */
.code-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0.25rem;
}
.code-download-btn {
  padding: 0.25rem 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f8f8f8;
  cursor: pointer;
}
.code-download-btn:hover {
  background: #eee;
}
.intro-header .page-heading h1.site-header-title,
.intro-header .tags-heading h1.site-header-title,
.intro-header .categories-heading h1.site-header-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  font-weight: 400;
  line-height: 1.2;
  margin: 0.5em 0;
}

.navbar-header, .navbar {
  background: #fff;
}

/* Undo the earlier rule */
nav ul { max-height: none; overflow: visible; }

/* Constrain just the dropdown panel */
.dropdown-menu {
  max-height: min(80vh, 480px);
  overflow-y: auto;
  z-index: 1000;
}

@media (prefers-color-scheme: dark) {
  .navbar-header, .navbar {
    background: #0b0d0f;
  }
  
  /* Fix navbar hover colors for dark mode */
  .navbar-custom .navbar-brand:hover,
  .navbar-custom .navbar-brand:focus,
  .navbar-custom .nav li a:hover,
  .navbar-custom .nav li a:focus {
    color: #b0e0ff;
  }
  
  /* Dark mode for mobile navbar toggle button */
  .navbar-toggle .icon-bar {
    background-color: #b0b0b0;
  }
  
  .navbar-toggle:hover .icon-bar,
  .navbar-toggle:focus .icon-bar {
    background-color: #b0e0ff;
  }
}

/* ========== Homepage Header Styling ========== */

/* Set header-section and intro-header background to match main background */
.header-section {
  background-color: #fff;
}

.intro-header {
  background-color: #fff;
}

/* Dark mode for header-section and intro-header */
@media (prefers-color-scheme: dark) {
  .header-section {
    background-color: #0b0d0f;
  }
  
  .intro-header {
    background-color: #0b0d0f;
  }
  
  /* Ensure subtitle text is visible in dark mode */
  .intro-header .list-subheading {
    color: #e6e6e6;
  }
}

.small-caps {
  /* font-variant: small-caps; */
  text-transform: uppercase;
}

.main-font {
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.left-image {
  display: block;
  margin-left: 0;
  margin-right: auto; /* optional, just ensures it's not centered */
}

/* ========== new/updated accessibility styles ========== */

/* Positioning container for dropdowns */
.navlinks-container { position: relative; }

/* Make parent look/behave like a button while allowing <a role="button"> */
.navlinks-parent {
  background: none;
  border: 0;
  padding: 15px;            /* aligns with Bootstrap navbar height */
  font: inherit;
  cursor: pointer;
  display: inline-block;
}

/* Align with Bootstrap's navbar link line-height */
.navbar-nav > li > .navlinks-parent {
  line-height: 20px;
}

/* Visible focus indicator */
.navlinks-parent:focus {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}
/* --- Submenu should be hidden by default --- */
.navlinks-children {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 12rem;
  margin: 0;
  padding: 0.25rem 0;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  z-index: 1000;
  /* Allow wrapping in the submenu itself */
  white-space: normal;

  /* Yasmine added -- not sure if right way, but this will make the bar scrollable */
  max-height: min(80vh, 480px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-color-scheme: dark) {
  .navlinks-children {
    background: #666;
    border-color: #666;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    /* scrollability for dark mode!! */
    max-height: min(80vh, 480px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Submenu items WRAP (this was the main issue) */
.navlinks-children a {
  display: block;
  padding: 0.5rem 1rem;
  white-space: normal;       /* was nowrap; allow wrapping */
  overflow-wrap: anywhere;   /* break really long tokens */
  word-break: normal;
  line-height: 1.3;
  color: #404040;
}

@media (prefers-color-scheme: dark) {
  .navlinks-children a {
    color: #e0e0e0;
  }
  
  .navlinks-children a:hover {
    background-color: #555;
    color: #b0e0ff;
  }
}

/* Top-level labels can wrap too (keep, if you want that behavior) */
.navbar .nav > li > a,
.navbar .navlinks-parent {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* OPEN STATES
   - JS toggling (.open / [aria-expanded="true"])
   - CSS fallback: open on focus-within (works w/o JS)
*/
.navbar .navlinks-container.open > .navlinks-children,
.navbar .navlinks-parent[aria-expanded="true"] ~ .navlinks-children,
.navbar .navlinks-container:focus-within > .navlinks-children {
  display: block !important;
}

/* ========== Assignment Box Styles ========== */

/* Question boxes - gray border with light gray background */
.question-box {
  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 1rem;
  background-color: #f9f9f9;
  margin: 1rem 0;
}

/* Warning boxes - red border with light red background */
.warning-box {
  border: 2px solid #dc3545;
  border-radius: 8px;
  padding: 1rem;
  background-color: #f8d7da;
  color: #721c24;
  margin: 1rem 0;
}

/* Assignment meta boxes - gray border with light gray background */
.assignment-meta {
  border: 2px solid #ccc;
  padding: 1em;
  border-radius: 8px;
  background-color: #f9f9f9;
  margin: 1rem 0;
}

/* Dark mode variants */
@media (prefers-color-scheme: dark) {
  .question-box {
    border-color: #555;
    background-color: #2a2a2a;
    color: #e0e0e0;
  }
  
  .warning-box {
    border-color: #ff6b6b;
    background-color: #3d1a1a;
    color: #ffb3b3;
  }
  
  .assignment-meta {
    border-color: #555;
    background-color: #2a2a2a;
    color: #e0e0e0;
  }
}

/* ========== Style Guide Example Styling ========== */

.bad-example {
  border-left: 4px solid #dc3545;
  border-radius: 6px;
  margin: 1rem 0;
  background-color: #fff5f5;
  padding: 1rem;
  position: relative;
}

.bad-example::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(220, 53, 69, 0.05);
  border-radius: 6px;
  pointer-events: none;
}

.good-example {
  border-left: 4px solid #28a745;
  border-radius: 6px;
  margin: 1rem 0;
  background-color: #f8fff9;
  padding: 1rem;
  position: relative;
}

.good-example::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(40, 167, 69, 0.05);
  border-radius: 6px;
  pointer-events: none;
}

/* Ensure content is above the background overlay */
.bad-example > *,
.good-example > * {
  position: relative;
  z-index: 1;
}

/* Make code blocks transparent within example boxes */
.bad-example pre,
.good-example pre {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bad-example code,
.good-example code {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ensure syntax highlighting works with transparent backgrounds */
.bad-example .highlight,
.good-example .highlight {
  background-color: transparent !important;
}

.bad-example .highlight pre,
.good-example .highlight pre {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Preserve syntax highlighting colors */
.bad-example .highlight .k, /* keywords */
.bad-example .highlight .kt, /* keyword types */
.bad-example .highlight .kd, /* keyword declarations */
.good-example .highlight .k,
.good-example .highlight .kt,
.good-example .highlight .kd {
  color: #0000ff !important; /* blue for keywords */
}

.bad-example .highlight .s, /* strings */
.bad-example .highlight .dl, /* string delimiters */
.good-example .highlight .s,
.good-example .highlight .dl {
  color: #008000 !important; /* green for strings */
}

.bad-example .highlight .c, /* comments */
.bad-example .highlight .c1, /* single line comments */
.good-example .highlight .c,
.good-example .highlight .c1 {
  color: #808080 !important; /* gray for comments */
}

.bad-example .highlight .n, /* names */
.bad-example .highlight .nf, /* function names */
.good-example .highlight .n,
.good-example .highlight .nf {
  color: #000000 !important; /* black for names */
}

/* Dark mode syntax highlighting */
@media (prefers-color-scheme: dark) {
  .bad-example .highlight .k,
  .bad-example .highlight .kt,
  .bad-example .highlight .kd,
  .good-example .highlight .k,
  .good-example .highlight .kt,
  .good-example .highlight .kd {
    color: #569cd6 !important; /* light blue for keywords */
  }
  
  .bad-example .highlight .s,
  .bad-example .highlight .dl,
  .good-example .highlight .s,
  .good-example .highlight .dl {
    color: #ce9178 !important; /* orange for strings */
  }
  
  .bad-example .highlight .c,
  .bad-example .highlight .c1,
  .good-example .highlight .c,
  .good-example .highlight .c1 {
    color: #6a9955 !important; /* green for comments */
  }
  
  .bad-example .highlight .n,
  .bad-example .highlight .nf,
  .good-example .highlight .n,
  .good-example .highlight .nf {
    color: #d4d4d4 !important; /* light gray for names */
  }
}

/* Dark mode for examples */
@media (prefers-color-scheme: dark) {
  .bad-example {
    background-color: #2d1b1b;
    border-left-color: #ff6b6b;
  }
  
  .bad-example::before {
    background-color: rgba(255, 107, 107, 0.1);
  }
  
  .good-example {
    background-color: #1b2d1b;
    border-left-color: #51cf66;
  }
  
  .good-example::before {
    background-color: rgba(81, 207, 102, 0.1);
  }
}

/* fix for nav bar issues? */
/* General: keep dropdowns above everything else */
.dropdown-menu { z-index: 2000; }

/* Collapsed (hamburger) menu: make the panel scroll to bottom of screen */
.navbar .navbar-collapse,
.navbar .navbar-collapse.collapsing,
.navbar .navbar-collapse.show {
  max-height: calc(100vh - var(--bh-nav-height, 56px));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Mobile dropdowns inside the collapsed nav should not overflow off-screen */
@media (max-width: 1199.98px) {
  .navbar-nav .dropdown-menu {
    position: static;    /* let it flow inside the scrollable column */
    float: none;
    max-height: 60vh;    /* still cap super-long submenus */
    overflow-y: auto;
  }
}

/* Safety: ensure the page, not some ancestor, can scroll */
html, body { overflow-x: hidden; overflow-y: auto; }

/* Keep heading anchors below the fixed navbar when TOC links are clicked.
   Body is the real scroll container (overflow-y: auto), so padding must
   live there as well as on html. */
html, body {
  scroll-padding-top: calc(var(--bh-nav-height, 56px) + 16px);
}

/* Syllabus sidebar TOC (tocbot). Parked on <html> so position:fixed
   tracks the viewport instead of the scrolling <body>. */
#toc.syllabus-toc {
  position: fixed;
  top: calc(var(--bh-nav-height, 56px) + (100vh - var(--bh-nav-height, 56px)) / 2);
  transform: translateY(-50%);
  max-height: calc(100vh - var(--bh-nav-height, 56px) - 48px);
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Lora, 'Times New Roman', serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.5;
  color: #404040;
}

#toc .toc-list {
  padding-left: 0.85em;
}

#toc > .toc-list {
  padding-left: 0;
}

#toc a.toc-link {
  position: relative;
  display: block;
  height: auto;
  color: #404040 !important;
  font-family: inherit;
  font-weight: 400;
  text-decoration: none !important;
  line-height: 1.5;
  padding: 0.12em 0 0.12em 0.7em;
}

#toc a.toc-link:hover,
#toc a.toc-link:focus {
  color: #0085a1 !important;
}

#toc a.is-active-link {
  color: #404040 !important;
  font-weight: 700;
}

#toc .toc-link::before {
  left: 0;
  width: 2px;
  height: 100%;
  margin-top: 0;
  background-color: transparent;
}

#toc a.is-active-link::before {
  background-color: #404040;
}

@media (prefers-color-scheme: dark) {
  #toc.syllabus-toc,
  #toc a.toc-link,
  #toc a.is-active-link {
    color: #e0e0e0 !important;
  }

  #toc a.toc-link:hover,
  #toc a.toc-link:focus {
    color: #80bfff !important;
  }

  #toc a.is-active-link::before {
    background-color: #e0e0e0;
  }
}