/* Overrides for themes/terminal/assets/css/main.css */

/* Make quotes look better */
blockquote {
  border-top: none;
  border-bottom: none;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  color: color-mix(in srgb, var(--foreground) 70%, transparent);
  padding: 15px 20px;
  margin: 25px 0;
}

blockquote::before {
  content: none;
}

/* Prevent horizontal (overlay) scrollbar to hide the last line of text */
pre.chroma {
  padding-bottom: 1lh;
}

/* Simple pages (layouts/_default/simple.html): same space below the title as on list pages.
   The 25px top margin of .post-content (post.css) adds to the margins of the title and the first heading */
.content > h1 + .post-content {
  margin-top: 0;
}

/* Sidebar (layouts/partials/sidebar.html) */
/* Narrow screens: below the content, one line per section */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}

.sidebar__section {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1em;
}

.sidebar__title {
  font-size: 1rem;
  margin: 0;
}

.sidebar__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1em;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar__list li {
  margin: 0;
}

.sidebar a.active {
  background: var(--accent);
  color: var(--background);
}

/* Narrow screens: the sidebar is below the article, a table of contents is useless there */
.sidebar__toc {
  display: none;
}

/* Narrow screens: no "More" button, the sections are always visible */
.sidebar__more > summary {
  display: none;
}

.sidebar__more-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Wide screens: a column on the left, the content keeps its original width */
@media (min-width: 1000px) {
  .container.with-sidebar {
    max-width: 1084px;
  }

  .layout {
    display: flex;
    align-items: flex-start;
    gap: 40px;
  }

  .layout .content {
    flex: 1;
    min-width: 0;
  }

  .sidebar {
    /* The aside comes after the content in the HTML, show it on the left */
    order: -1;
    flex: 0 0 180px;
    gap: 20px;
    position: sticky;
    top: 20px;
    margin-top: 0;
    /* Same top offset as .post (themes/terminal/assets/css/post.css) */
    padding: 30px 0 0;
    border-top: none;
    /* A sidebar taller than the window scrolls by itself (20px free above and below) */
    max-height: calc(100vh - 40px);
    overflow-y: auto;
  }

  .sidebar__section {
    flex-direction: column;
    gap: 10px;
  }

  .sidebar__list {
    flex-direction: column;
    gap: 5px;
  }

  .sidebar__toc {
    display: flex;
  }

  /* Hugo generates the table of contents as nested lists in nav#TableOfContents */
  .sidebar__toc ul {
    display: flex;
    flex-direction: column;
    gap: 5px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sidebar__toc ul ul {
    margin-top: 5px;
    padding-left: 1em;
  }

  .sidebar__toc li {
    margin: 0;
  }

  /* On posts, the sections below the table of contents are collapsed behind "More" */
  .sidebar__more > summary {
    display: list-item;
    cursor: pointer;
    color: var(--accent);
  }

  .sidebar__more-content {
    gap: 20px;
    margin-top: 20px;
  }

  /* Tag pages start with an h1 (25px top margin in main.css), not with a .post */
  .layout .content > h1:first-child,
  .layout .content > .terms > h1:first-child {
    margin-top: 30px;
  }
}