/*
 * BJC book — the navbar and the mobile secondary nav.
 *
 * Things the website depends on; don't rename (bhs-cs client-js/js/
 * bjc-nav.ts and theme-boot.ts, read 2026-10-17):
 *
 *   nav.navbar .navbar-container   bjc-nav.js prepends <a class="bhs-wordmark">
 *                                  and appends <span class="bhs-username">
 *   .bhs-wordmark, .bhs-username   styled below
 *   body.bjc-dark                  bjc-nav.js reads it to tell the book's
 *                                  current theme (it accepted the old
 *                                  quarto-dark too through the rename);
 *                                  chrome.html's script sets it (and
 *                                  bjc-light) alongside the html[data-theme]
 *                                  hook the CSS keys on
 *   window.bjcToggleColorScheme    the chrome's toggle; bjc-nav.js wraps it
 *   localStorage bjc-dark-mode     the chrome's stored choice (standalone
 *                                  preview); theme:bjc / theme are
 *                                  theme-boot's
 *   html[data-theme]               stamped by theme-boot.js on the website
 *   a.bhs-assignment[data-material] bjc-assignments.js resolves these links
 *
 * The open/closed state classes (collapse, collapsing, show, dropdown-menu
 * .show) are the ones Bootstrap's JS used; book/js/nav.js (our own ~130
 * lines, replacing bootstrap.min.js) drives the dropdowns, the mobile menu
 * and the sidebar drawer through data-collapse / data-dropdown markup and
 * the same class sequence. The glyphs (search, sidebar toggle,
 * chevron, dark-mode switch) are Bootstrap Icons paths inlined as CSS masks
 * under the markup's existing bi-* class names, so no icon font ships.
 */

/* -- icons ----------------------------------------------------------------- */

.bi {
  display: inline-block;
  line-height: 1;
  vertical-align: -0.125em;
}

.bi::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask: var(--bjc-icon) center / contain no-repeat;
  mask: var(--bjc-icon) center / contain no-repeat;
}

.bi-search {
  --bjc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/></svg>");
}

.bi-chevron-right {
  --bjc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");
}

.bi-layout-text-sidebar-reverse {
  --bjc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12.5 3a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1zm0 3a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1zm.5 3.5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h5a.5.5 0 0 0 .5-.5m-.5 2.5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1 0-1z'/><path d='M16 2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2zM4 1v14H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm1 0h9a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5z'/></svg>");
}

/* The dark-mode switch: toggle-off, and toggle-on once the dark theme is
   in effect (bi-toggle-off / bi-toggle-on). */
.bjc-theme-toggle .bi {
  --bjc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11 4a4 4 0 0 1 0 8H8a4.992 4.992 0 0 0 2-4 4.992 4.992 0 0 0-2-4h3zm-6 8a4 4 0 1 1 0-8 4 4 0 0 1 0 8zM0 8a5 5 0 0 0 5 5h6a5 5 0 0 0 0-10H5a5 5 0 0 0-5 5z'/></svg>");
}

html[data-theme="dark"] .bjc-theme-toggle .bi {
  --bjc-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5 3a5 5 0 0 0 0 10h6a5 5 0 0 0 0-10H5zm6 9a4 4 0 1 1 0-8 4 4 0 0 1 0 8z'/></svg>");
}

/* -- navbar ---------------------------------------------------------------- */

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  min-height: var(--bjc-navbar-height);
  padding: 0.5rem 1em;
  color: var(--bjc-navbar-color);
  background-color: var(--bjc-navbar-bg);
}

.navbar > .container-fluid {
  display: flex;
  flex-wrap: inherit;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
}

/* Left to right (flex order): the BHS wordmark (-1), the hamburger (1), the
   brand (2), the tools (3 — but 900 on desktop, pushing them right), the
   menu (20), the username (1000). */
.navbar .navbar-toggler {
  order: 1;
}

.navbar .navbar-brand-container {
  order: 2;
}

.navbar .navbar-tools {
  order: 3;
}

.navbar .navbar-collapse {
  order: 20;
}

@media (min-width: 992px) {
  .navbar .navbar-tools {
    order: 900;
  }
}

/* brand */

.navbar-brand-container {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - 115px);
  margin: 0 !important;
}

.navbar-brand {
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  overflow: hidden;
  font-size: 1.25rem;
  color: var(--bjc-navbar-color);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--bjc-navbar-color);
}

.navbar-brand.navbar-brand-logo {
  display: inline-flex;
  margin-right: 4px;
}

.navbar-logo {
  max-height: 24px;
  width: auto;
  padding-right: 4px;
}

/* the hamburger (mobile only) */

.navbar-toggler {
  flex-basis: content;
  flex-shrink: 0;
  margin-right: 0.5em;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--bjc-navbar-color);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: box-shadow 0.15s ease-in-out;
}

.navbar-toggler:hover {
  text-decoration: none;
}

.navbar-toggler:focus {
  outline: 0;
  text-decoration: none;
  box-shadow: 0 0 0 0.25rem;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") center / 100% no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") center / 100% no-repeat;
}

@media (min-width: 992px) {
  .navbar-toggler {
    display: none;
  }
}

/* the menu */

.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.navbar-nav-scroll {
  max-height: 75vh;
  overflow-y: auto;
}

nav .nav-item {
  padding-top: 1px;
}

.nav-link {
  display: block;
  padding: 0.5rem 0.6rem;
  color: var(--bjc-navbar-color);
  text-decoration: none;
  background: none;
  border: 0;
  transition: color 0.15s ease-in-out;
}

.nav-link:hover,
.nav-link:focus {
  color: var(--bjc-navbar-hover);
}

.nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(255, 0, 57, 0.25);
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
  color: var(--bjc-navbar-color);
}

@media (min-width: 992px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }

  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }

  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
}

/* collapse (nav.js's states; the vertical one is the mobile menu) */

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.2s ease;
}

.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing,
  .collapsing.collapse-horizontal {
    transition: none;
  }
}

/* dropdowns (Labs, Resources) */

.dropdown {
  position: relative;
}

.dropdown-toggle {
  white-space: nowrap;
}

.dropdown-toggle::after {
  display: inline-block;
  margin-left: 0.255em;
  vertical-align: 0.175em;
  content: "";
  border-top: 0.3em solid;
  border-right: 0.3em solid transparent;
  border-bottom: 0;
  border-left: 0.3em solid transparent;
  opacity: 0.75;
}

.dropdown-menu {
  position: absolute;
  z-index: 1000;
  display: none;
  min-width: 220px;
  margin: 0;
  padding: 0;
  font-size: 0.9rem;
  color: var(--bjc-dropdown-color);
  text-align: left;
  list-style: none;
  background-color: var(--bjc-dropdown-bg);
  background-clip: padding-box;
  border: 1px solid var(--bjc-dropdown-border);
  border-radius: 0.25rem;
}

.dropdown-menu.show {
  display: block;
}

/* In the stacked mobile menu the dropdown opens in flow, under its item. */
.navbar-nav .dropdown-menu {
  position: static;
}

@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 0.125rem;
  }
}

.dropdown-item {
  display: block;
  clear: both;
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-weight: 400;
  color: var(--bjc-dropdown-color);
  text-align: inherit;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
}

.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--bjc-dropdown-hover-color);
  background-color: var(--bjc-dropdown-hover-bg);
}

.dropdown-item.active,
.dropdown-item:active {
  color: #fff;
  text-decoration: none;
  background-color: var(--bjc-primary);
}

/* the tools: search and the dark-mode switch */

.navbar .navbar-tools .navbar-tool {
  color: var(--bjc-navbar-color);
  text-decoration: none;
}

.navbar .navbar-tools .navbar-tool:hover {
  color: var(--bjc-navbar-color);
}

.navbar-collapse .navbar-tools {
  margin-left: 0.5em;
}

/* -- BHS branding (added by /js/bjc-nav.js) ------------------------------- */

/* The "Berkeley High Computer Science" wordmark uses the main site's logo
   font, latin subset only — the wordmark is its only user here. */
@font-face {
  font-family: "Alfa Slab One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://fonts.gstatic.com/s/alfaslabone/v21/6NUQ8FmMKwSEKjnm5-4v-4Jh2dJhe_escmA.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.navbar .bhs-wordmark {
  order: -1;
  max-width: 12em; /* wraps to "Berkeley High" / "Computer Science" */
  margin-right: 1rem;
  font-family: "Alfa Slab One", cursive;
  font-size: 1.05rem;
  line-height: 1.15;
  color: #fff;
  text-decoration: none;
}

.navbar .bhs-wordmark:hover {
  color: #fff;
}

.navbar .bhs-username {
  order: 1000;
  margin-left: 1rem;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
}

@media (max-width: 575.98px) {
  .navbar .bhs-wordmark,
  .navbar .bhs-username {
    display: none;
  }
}

/* -- secondary nav (below 992px) ------------------------------------------- */

/* A second bar under the navbar: the sidebar-drawer toggle and the page's
   breadcrumbs. The whole bar is a click target for the drawer (the
   stretched empty <a> after the breadcrumbs). */
.bjc-secondary-nav {
  display: none;
  cursor: pointer;
}

@media (max-width: 991.98px) {
  nav.bjc-secondary-nav {
    display: block;
    background-color: var(--bjc-secondary-nav-bg);
    border-bottom: 1px solid var(--bjc-border);
  }

  .bjc-secondary-nav > .container-fluid {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
  }

  .bjc-secondary-nav button.bjc-sidebar-toggle {
    margin-left: -0.75rem;
    margin-right: 0.15rem;
  }

  .bjc-secondary-nav nav.bjc-breadcrumbs {
    display: flex;
    align-items: center;
    margin-left: -0.25em;
    padding-right: 1em;
  }

  .bjc-secondary-nav nav.bjc-breadcrumbs ol.breadcrumb {
    margin-bottom: 0;
  }

  .bjc-secondary-nav nav.bjc-breadcrumbs a {
    text-decoration: none;
  }
}

.bjc-secondary-nav .bjc-sidebar-toggle {
  color: var(--bjc-secondary-nav-color);
}

.bjc-secondary-nav nav.bjc-breadcrumbs,
.bjc-secondary-nav nav.bjc-breadcrumbs a {
  color: var(--bjc-secondary-nav-color);
}

.bjc-secondary-nav nav.bjc-breadcrumbs a:hover {
  color: var(--bjc-sidebar-hover);
}

.bjc-secondary-nav nav.bjc-breadcrumbs .breadcrumb-item::before {
  color: var(--bjc-secondary-nav-divider);
}

/* -- buttons --------------------------------------------------------------- */

/* Bootstrap's .btn, for the secondary nav's toggle, the quiz's Check
   Answer / Try Again and the Checkpoint assignment links (btn-danger). */
.btn {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bjc-body-color);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:focus:not(:focus-visible) {
  box-shadow: none;
}

.btn:disabled,
.btn.disabled {
  pointer-events: none;
  opacity: 0.65;
}

.btn-primary {
  color: #fff;
  background-color: var(--bjc-primary);
  border-color: var(--bjc-primary);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff;
  background-color: var(--bjc-btn-primary-hover);
  border-color: var(--bjc-btn-primary-border-hover);
}

.btn-danger {
  color: #000;
  background-color: var(--bjc-danger);
  border-color: var(--bjc-danger);
}

.btn-danger:hover,
.btn-danger:focus-visible {
  color: #000;
  background-color: var(--bjc-btn-danger-hover);
  border-color: var(--bjc-btn-danger-border-hover);
}