/*
 * cs50.css — custom styles matching https://cs50.harvard.edu/x/
 * Source: https://github.com/tamnd/cs50-i18n
 * License: CC BY-NC-SA 4.0
 */

html {
  font-size: 16px;
}

:root {
  --bs-font-sans-serif: "PT Sans", system-ui, -apple-system, sans-serif;
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

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

body > div.container-fluid > div.row {
  align-items: flex-start;
}

/* ── Aside (sidebar) ────────────────────────────────────────────────────── */

aside {
  background-color: #000;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.125rem;
  box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

aside h1, aside h2, aside .h1, aside .h2 {
  border-bottom: 0;
}

aside li:first-child, aside li + li {
  margin-top: 0;
}

aside a, aside .btn-link {
  text-decoration: none;
}

aside.col-lg {
  padding: 2rem 2rem;
}

@media screen and (min-width: 992px) {
  aside.col-lg {
    flex: 0 1 20rem;
    overflow-y: auto;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 1019;
  }
}

aside a,
aside a:hover,
aside .btn[data-bs-toggle="collapse"],
aside .btn[data-bs-toggle="collapse"]:hover {
  background-color: inherit;
  border-color: #fff;
  color: #fff;
}

aside .btn[data-bs-toggle="collapse"]:not(.collapsed) {
  background-color: #fff;
  color: #000;
}

aside hr {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 1;
}

aside p.small {
  line-height: 1.25;
}

aside .btn[data-bs-toggle="collapse"] {
  margin-top: 1.25rem;
}

/* ── Header (inside sidebar) ────────────────────────────────────────────── */

header h1, header .h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0;
}

header h2, header .h2 {
  font-size: 1.25rem;
  font-weight: normal;
  padding-top: 0;
}

/* ── Nav (inside sidebar) ───────────────────────────────────────────────── */

nav > *:first-child {
  margin-top: 1rem;
}

nav ol li,
nav ul li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

nav ol {
  list-style-position: inside;
  padding-left: 0;
}

nav ol li {
  padding-left: 0;
}

nav ul {
  list-style: none;
  padding-left: 0;
}

nav ul ul {
  list-style: inside;
}

/* ── Footer (inside sidebar) ────────────────────────────────────────────── */

footer {
  margin-top: 1rem;
}

footer:empty {
  margin-top: 0;
}

/* ── Main content ───────────────────────────────────────────────────────── */

main.col-lg {
  max-width: 80rem;
  overflow: auto;
  padding: 4rem 2rem;
}

/* ── data-marker list styles (CS50 convention) ──────────────────────────── */

li[data-marker="*"] { list-style-type: disc; }
li[data-marker="-"] { list-style-type: none; }
li[data-marker="+"] { list-style-type: circle; }

/* ── Alert banner ───────────────────────────────────────────────────────── */

body:has(.alert.fixed-top:not(.d-none)) main,
body:has(.alert.fixed-top:not(.d-none)) aside {
  margin-top: 3rem;
}

/* ── Code blocks ────────────────────────────────────────────────────────── */

main pre {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 0.375rem;
  padding: 1rem;
}

main code {
  font-size: 0.875em;
  color: #d63384;
}

main pre code {
  color: inherit;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */

main table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

main table th,
main table td {
  padding: 0.5rem 0.75rem;
  border: 1px solid #dee2e6;
}

main table thead th {
  background-color: #f8f9fa;
  font-weight: 700;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 991.98px) {
  small,
  h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
  .h1 em, .h2 em, .h3 em, .h4 em, .h5 em, .h6 em,
  .small {
    font-size: 90%;
  }

  aside.col-lg {
    padding-top: 1rem;
  }

  main.col-lg {
    padding: 2rem 2rem;
  }
}

/* ── Print ──────────────────────────────────────────────────────────────── */

@media print {
  aside.col-lg {
    flex: unset;
    height: auto !important;
  }

  aside .btn[data-bs-toggle="collapse"] {
    display: none;
  }

  nav.collapse:not(.show),
  footer {
    display: none !important;
  }
}