/*
Modules and course pages (module.md and course-page.md, as in Grav Helios Course Hub) - hibbittsdesign.org
Lines and backgrounds use a see-through grey, and labels use the text colour made lighter with
opacity, so these work with every Theme Style and in Dark Mode without their own dark versions.
*/

/* ── Module list (right column on course pages inside a Modules page) ── */

/* "Modules" heading: styled by each Theme Style's sidebar headings (.blog-sidebar h2), with no extra
   space above it, as it follows the search box */
.module-nav .module-nav-title {
    margin-top: 0;
}

/* Each module, a little smaller than the page text and in the text colour rather than the
   link colour, so the list reads as navigation, separate from the links in the content
   (.blog-sidebar is included so the Theme Styles' own sidebar link padding doesn't override this) */
.blog-sidebar .module-nav .nav-link {
    color: inherit;
    /* "em" sizes it from the page text, so it stays a little smaller than the page text in
       every Theme Style (page text is 18px in 2025 and 2026, and 16px in Classic) */
    font-size: 0.97em;
    padding: 0.35rem 0.6rem;
    line-height: 1.35;
    border-radius: 0.375rem;
}

/* A light grey background on hover (see-through, so it works in Dark Mode too) */
.module-nav .nav-link:hover {
    background-color: rgba(128, 128, 128, 0.12);
    text-decoration: none;
}

/* The current module or page: bold, on the same light grey background */
.module-nav .nav-link.active {
    font-weight: 600;
    background-color: rgba(128, 128, 128, 0.12);
}

/* The current module's pages: indented below it, at the same text size */
.module-nav .module-nav-pages {
    margin: 0.1rem 0 0.4rem 0.75rem;
}

.blog-sidebar .module-nav .module-nav-pages .nav-link {
    padding: 0.3rem 0.6rem;
}

/* The current page's sections (from the Page TOC plugin), a level below the module names:
   indented further, and a little smaller and lighter */
.module-nav .module-nav-sections {
    margin: 0.2rem 0 0.5rem 1rem;
}

.blog-sidebar .module-nav .module-nav-sections .nav-link {
    font-size: 0.875em;
    line-height: 1.3;
    padding: 0.2rem 0.75rem;
    /* a little lighter than the module names, while keeping the text at about 7:1 contrast */
    opacity: 0.85;
}

/* Full strength on hover or focus, so the section being pointed at stands out */
.blog-sidebar .module-nav .module-nav-sections .nav-link:hover,
.blog-sidebar .module-nav .module-nav-sections .nav-link:focus {
    opacity: 1;
}

/* On wider screens, the module column stays in view while reading a long page; if the list is taller
   than the window, it scrolls on its own. align-self keeps the column only as tall as its contents,
   which sticky needs (768px is Bootstrap's md, where the column sits beside the content). Only in windows
   at least 700px tall: in shorter ones (such as when zoomed in), the list scrolls with the page instead.
   .blog-sidebar.module-nav-column (both classes) outranks Bootstrap's position: relative on all columns */
@media (min-width: 768px) and (min-height: 700px) {
    .blog-sidebar.module-nav-column {
        position: sticky;
        top: 1rem;
        align-self: flex-start;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    /* below a Sticky Top NavBar instead of behind it (:has() matches a page that has one) */
    body:has(.navbar.sticky-top) .blog-sidebar.module-nav-column {
        top: 5rem;
        max-height: calc(100vh - 6rem);
    }
}

/* On phones, "On this page" above the content: a light box that opens to show the sections */
.module-sections-above {
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 0.5rem;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1.25rem;
}

.module-sections-above summary {
    font-weight: 600;
    cursor: pointer;
}

.module-sections-above-list {
    margin: 0.5rem 0 0.1rem;
    padding-left: 1.25rem;
}

/* A little space above a section heading when jumped to, so it isn't right at the top edge
   (or hidden behind a Sticky Top NavBar) */
.module-page-content h2,
.module-page-content h3 {
    scroll-margin-top: 1rem;
}

body:has(.navbar.sticky-top) .module-page-content h2,
body:has(.navbar.sticky-top) .module-page-content h3 {
    scroll-margin-top: 5rem;
}

/* The list moves left by the links' side padding, so the module names line up with the
   "Modules" label and the search box above them (the highlight extends into the gap
   beside the content instead). "> .nav" matches only the module list's own list */
.module-nav > .nav {
    margin-left: -0.6rem;
}

/* Group headings in the list (from group: on a module or page), small and in capitals like
   the "Modules" label; the side padding lines them up with the names below them */
.module-nav .module-nav-group {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
    padding: 0 0.6rem;
    margin: 0.75rem 0 0.25rem;
}

/* ── Modules page and module pages: the cards ── */

/* A short description under the Modules page title */
.module-intro {
    color: inherit;
    opacity: 0.75;
    margin-bottom: 1.5rem;
}

/* "In this module" and group headings above a set of cards, like the sidebar headings
   (.blog-main is included so the page's own heading sizes don't override these) */
.blog-main .module-group-title {
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: inherit;
    opacity: 0.75;
    margin: 1.5rem 0 0.75rem;
}

/* Card descriptions limited to 2 or 3 lines (card_description_lines on the Modules page),
   ending with "…"; with 0 the description is shown in full */
.module-cards-lines-2 .card-text,
.module-cards-lines-3 .card-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.module-cards-lines-2 .card-text {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.module-cards-lines-3 .card-text {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* ── Previous / Next ── */

/* Two boxes side by side: Previous on the left, Next on the right */
.module-prev-next {
    display: flex;
    gap: 1rem;
    margin: 2.5rem 0 1.5rem;
}

.module-prev-next a {
    /* each box is half the width, even when it's the only one */
    flex: 0 1 calc(50% - 0.5rem);
    display: block;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(108, 117, 125, 0.25);
    /* the same rounded corners as the cards */
    border-radius: 12px;
    text-decoration: none;
}

.module-prev-next a:hover,
.module-prev-next a:focus-visible {
    border-color: currentColor;
    text-decoration: none;
}

/* the Next box keeps to the right, even when there's no Previous box */
.module-prev-next .module-next {
    margin-left: auto;
    text-align: right;
}

/* "Previous" / "Next" in small grey text above the page title */
.module-prev-next .module-prev-next-label {
    display: block;
    font-size: 0.8rem;
    color: inherit;
    opacity: 0.75;
}

/* On phones the boxes stack, one per line */
@media (max-width: 575.98px) {
    .module-prev-next {
        flex-direction: column;
    }

    .module-prev-next a,
    .module-prev-next .module-next {
        flex-basis: auto;
        margin-left: 0;
    }
}

/* ── Header image on a course page ── */

/* Space between the header image and the content below it, as on weekly pages */
.course-page-header-image {
    margin-bottom: 1.5rem;
}