/* Course-specific overrides on top of clamps.css / themes.css */

/* No #preamble (top menu) in the course: drop the top-menu row */
body {
    grid-template-rows: 2em 1fr;
    grid-template-areas: "top-buttons"
                         "body-content";
}

/* clamps.css makes level-1 TOC entries unclickable. In the course,
   chapters like "Incudine" have no sub-entries and would be
   unreachable from the TOC otherwise. */
.toc-level-1 a { pointer-events: auto; }
.toc-level-1 a:hover { color: var(--anchor-hover); }

/* Course title in the #top-buttons row (see extra/html/pre-body.html),
   right-aligned with the right margin of the text column */
#top-buttons { padding-right: 0; }

.course-title {
    margin-left: auto;        /* push to the right end of the row */
    margin-right: var(--nav-col-width);
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;  /* shorten with "..." on narrow screens */
    font-size: 0.9em;
    color: var(--title-color);
}

/* Chromium/Safari reserve space for the styled scrollbar; Firefox
   (scrollbar-width: none) doesn't, so only add it there */
@supports selector(::-webkit-scrollbar) {
    .course-title {
        margin-right: calc(var(--nav-col-width) + var(--scrollbar-width));
    }
}

/* Mobile: arrows below the text, text has 8px padding.
   Keep these rules last so they win. */
html.mobile-layout .course-title { margin-right: 8px; }
@media (pointer: coarse) { .course-title { margin-right: 8px; } }