/*
Multi-page content: Section List page and its sections (the same page settings as Grav Helios Open Reader) - hibbittsdesign.org
Uses Quark's own visual language: blog-style cards (no border, soft shadow), Quark's greys for muted text and
dividers, Spectre components (card, label, bar, btn), and link-style hover feedback. Dark Mode colours are in theme-dark.css.
*/

/* Small label above a section's title, for example "Unit 2" (styled like Quark's other small uppercase labels);
   smaller on the section cards */
.reader-section-label {
    color: #667189;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin: 0 0 0.2rem;
}

.section-card .reader-section-label {
    font-size: 0.7rem;
}

/* Cover image beside the subtitle, author(s), edition and license */
.reader-header {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding-bottom: 1.2rem;
    margin-bottom: 1.2rem;
    border-bottom: 0.05rem solid #e7e9ed;
}

.reader-cover {
    flex: 0 0 auto;
    width: 10rem;
    border-radius: 0.1rem;
    box-shadow: 0 10px 45px -9px rgba(0, 0, 0, 0.2);
}

.reader-details p {
    margin: 0 0 0.3rem;
}

/* the subtitle in a light weight, as under the heading of Quark's hero */
.reader-subtitle {
    color: #667189;
    font-size: 1.1rem;
    font-weight: 300;
}

.reader-edition {
    color: #667189;
    font-size: 0.8rem;
}

/* The license uses Spectre's standard rounded label */
.reader-license.label {
    font-size: 0.7rem;
}

/* the Start button at the end of the details (Section List pages) */
.reader-details .section-list-start {
    margin: 0.6rem 0 0;
}

/* the Start Reading link after the section cards */
.section-list-start-below {
    margin: 1.2rem 0 0;
    font-weight: 600;
}

.section-list-start-below .fa {
    margin-left: 0.2rem;
    font-size: 0.85em;
}

/* On phones, the cover image goes above the details */
@media (max-width: 600px) {
    .reader-header {
        flex-direction: column;
    }
}

/* Section List page with a small cover: the cover always has the same 4:3 shape (cropped from the centre to fill it),
   with the title at the top of the details beside it. On phones the cover is full width, above the details. */
.section-list-page .reader-cover {
    width: 14.5rem;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

/* A portrait cover (such as a book cover) is shown whole, at its own shape and a narrower width, also on phones
   (both class names are needed so this also replaces the full-width cover on phones). An unusually tall image
   is kept to 15rem high, and narrows to keep its shape. */
.section-list-page .reader-cover.reader-cover-portrait {
    width: auto;
    max-width: 9rem;
    max-height: 15rem;
    aspect-ratio: auto;
}

.reader-details .sections-page-title-template {
    margin-top: 0;
}

/* on section pages, more space below the title, as in Quark 2 Open Publishing */
.reader-top-bar ~ .sections-page-title-template {
    margin-bottom: 1.2rem;
}

@media (max-width: 600px) {
    .section-list-page .reader-cover {
        width: 100%;
    }
}

/* Reading progress (Spectre bar), above the Previous/Next navigation: compact and centred, as in Helios Open Reader */
.reader-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1.2rem 0 0.4rem;
}

.reader-progress .bar {
    width: 80%;
    max-width: 24rem;
    height: 0.15rem;
    background: #dadee4;
    border-radius: 5rem;
    overflow: hidden;
}

.reader-progress .bar .bar-item {
    border-radius: 5rem;
}

.reader-progress-text {
    color: #667189;
    font-size: 0.7rem;
    margin: 0.3rem 0 0;
    text-align: center;
}

/* OER attribution and license, below the Previous/Next navigation (no line above, so the tiles aren't boxed in) */
.reader-attribution {
    color: #667189;
    margin-top: 1.6rem;
    font-size: 0.75rem;
    text-align: center;
}

/* after the page links, the attribution sits close below them, as one block (as in Grav Helios Open Reader) */
.page-extras + .reader-attribution {
    margin-top: 1rem;
}

.reader-attribution p {
    margin: 0 0 0.3rem;
}

/* its links stay muted, like the text, so the line reads as fine print (underlined, so they still look like links) */
.reader-attribution a {
    color: inherit;
    text-decoration: underline;
}

.reader-attribution a:hover,
.reader-attribution a:focus {
    color: #3b4351;
}

/* Section List page: a card for each section */
.section-cards {
    list-style: none;
    margin: 0 -0.4rem 1.2rem;
    padding: 0;
}

.section-cards > .column {
    margin: 0 0 1.2rem;
    padding: 0 0.4rem;
}

/* Section cards and Previous/Next tiles look like the blog's post cards: no border and a soft shadow.
   On hover the shadow deepens slightly and the title is underlined, like a link. */
.section-card,
.reader-nav-tile {
    border: 0;
    border-radius: 0.1rem;
    box-shadow: 0 10px 45px -9px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
}

.section-card:hover,
.reader-nav-tile:hover {
    box-shadow: 0 12px 45px -9px rgba(0, 0, 0, 0.2);
}

.section-card {
    position: relative;
    height: 100%;
}

.section-card .card-title {
    margin: 0;
}

/* The title link covers the whole card, so the card can be clicked anywhere */
.section-card-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.section-card:hover .section-card-link {
    text-decoration: underline;
}

/* A visible focus ring for keyboard users (Quark removes the focus outline from links) */
.section-card:focus-within {
    outline: 0.1rem solid #3085ee;
    outline-offset: 0.1rem;
}

.section-card .card-body {
    padding-top: 0;
}

/* A card with just a label and title: a little more space above and below the title, so it reads as a card
   rather than a thin row (both class names are needed to replace Spectre's spacing for a card's last part) */
.section-card.section-card-title-only .card-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Card Image Layout "side" (as in Grav Helios Open Reader): on wider screens the card becomes two columns, with its
   image in a fixed-width column on the left (narrower with 2 cards per row) and the label, title and description on
   the right, with an arrow after the title. On phones the image goes on top, at a fixed height. */
@media (min-width: 600px) {
    .section-card-image-side {
        display: grid;
        grid-template-columns: 10rem 1fr;
        grid-template-rows: auto 1fr;
    }

    .section-cards > .col-6 .section-card-image-side {
        grid-template-columns: 7.5rem 1fr;
    }

    .section-card-image-side .card-image {
        grid-row: 1 / 3;
        position: relative;
        min-height: 7.5rem;
    }

    /* the image is cropped to fill its column, however tall the text beside it is */
    .section-card-image-side .card-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
        object-fit: cover;
    }

    .section-card-image-side .card-header {
        padding: 1.2rem 1.2rem 0;
    }

    .section-card-image-side .card-body {
        padding: 0.6rem 1.2rem 1.2rem;
    }
}

@media (max-width: 599px) {
    .section-card-image-side .card-image img {
        height: 8rem;
        aspect-ratio: auto;
        object-fit: cover;
    }
}

/* the title and its arrow on one line, the arrow at the far right (a long title wraps beside it) */
.section-card .card-title {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.section-card-arrow {
    flex-shrink: 0; /* keeps its size beside a long title */
    margin-left: auto;
    font-size: 0.8em;
    opacity: 0.5;
    transition: opacity 0.15s;
    pointer-events: none; /* clicks pass through to the card's link, so the arrow opens the section too */
}

.section-card:hover .section-card-arrow {
    opacity: 1;
}

/* Section badges (Badge Label and Badge Color settings, as in Grav Helios Open Reader): a small status tag such as
   "New" or "Draft" beside the section label on a card, using Spectre's rounded label in a light tint of its colour */
.section-card-label-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.2rem;
}

.section-card-label-row .reader-section-label {
    margin: 0;
}

.section-badge.label {
    padding: 0.05rem 0.4rem;
    font-size: 0.6rem;
    font-weight: 600;
    color: #1565c0;
    background: #e1edfd;
}

.section-badge-blue.label { color: #1565c0; background: #e1edfd; }
.section-badge-green.label { color: #1b6e2f; background: #e3f4e6; }
.section-badge-yellow.label { color: #7a5a00; background: #fbf1cc; }
.section-badge-red.label { color: #b3261e; background: #fbe4e2; }
.section-badge-purple.label { color: #6a2ea0; background: #efe4f8; }

.section-badge-plain.label {
    color: #667189;
    background: transparent;
    box-shadow: inset 0 0 0 0.05rem #dadee4;
}

/* Description Line Limit (as in Open Reader): card descriptions cut to 2 or 3 lines, ending in "..." */
.section-cards-lines-2 .section-card-description,
.section-cards-lines-3 .section-card-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-cards-lines-2 .section-card-description {
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.section-cards-lines-3 .section-card-description {
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* Up to three lines of description */
.section-card-description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    margin: 0;
}

/* the section's Author(s), below its description */
.section-card-author {
    color: #667189;
    font-size: 0.7rem;
    margin: 0;
}

.section-card-description + .section-card-author {
    margin-top: 0.4rem;
}

/* Previous/Next tiles (theme option), grouped with the reading progress below the page text */
.reader-nav-block {
    margin-top: 1.6rem;
}

.reader-nav-block .reader-progress {
    margin: 0.8rem 0 0;
}

/* A line between the reading progress (when shown) and the tiles */
.reader-prev-next {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    border-top: 0.05rem solid #e7e9ed;
    margin: 1.4rem 0 0;
    padding-top: 1.6rem;
}

/* Without the reading progress, the tiles come first, so they need no extra space above the line */
.reader-nav-block > .reader-prev-next:first-child {
    margin-top: 0;
}

.reader-nav-tile {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: #fff;
    text-decoration: none;
}

.reader-nav-tile:hover,
.reader-nav-tile:focus {
    text-decoration: none;
}

.reader-nav-tile:hover .reader-nav-title {
    text-decoration: underline;
}

/* A visible focus ring for keyboard users (Quark removes the focus outline from links, so this needs !important) */
.reader-prev-next .reader-nav-tile:focus-visible {
    outline: 0.1rem solid #3085ee !important;
    outline-offset: 0.1rem;
}

.reader-nav-next {
    justify-content: flex-end;
    text-align: right;
}

/* The chevron is grey, and turns link blue on hover */
.reader-nav-tile .fa {
    flex: 0 0 auto;
    color: #acb3c2;
    transition: color 0.2s;
}

.reader-nav-tile:hover .fa,
.reader-nav-tile:focus .fa {
    color: #3085ee;
}

.reader-nav-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Small "Previous" or "Next" above the page title */
.reader-nav-label {
    color: #667189;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Long titles wrap rather than running off the tile */
.reader-nav-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* On phones, the tiles stack, with Next first */
@media (max-width: 600px) {
    .reader-prev-next {
        grid-template-columns: 1fr;
    }

    .reader-nav-next {
        order: -1;
    }

    .reader-nav-empty {
        display: none;
    }
}

/* Link back to the Section List page, above a section's title (a plain link, like the rest of the theme), at body text size */
.reader-back-link,
.reader-sections-link {
    font-size: 0.8rem;
    margin: 0 0 0.8rem;
}

/* The back link, with the compact Previous/Next links on the right (Prev/Next Page Controls Position: Top and bottom) */
.reader-top-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 0 1.2rem;
}

.reader-prev-next-top {
    font-size: 0.8rem;
    margin: 0 0 0.8rem;
    white-space: nowrap;
}

.reader-prev-next-top .fa,
.reader-sections-link .fa {
    font-size: 0.65rem;
}

.reader-back-link a,
.reader-sections-link a,
.reader-prev-next-top a {
    display: inline-block;
    padding: 0.2rem 0; /* a little taller, for easier tapping */
}

.reader-prev-next-top-divider {
    color: #acb3c2;
    margin: 0 0.4rem;
}

/* the Sections link is only needed when the side list sits below the page (phones and narrow windows) */
@media (min-width: 841px) {
    .reader-sections-link {
        display: none;
    }

    /* the side list stays in view below the header while reading a long page; when the list of sections is taller
       than the window, it scrolls on its own */
    #sections-nav {
        position: sticky;
        top: 5rem;
        align-self: flex-start;
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 6rem);
    }

    #sections-nav > ul.nav {
        min-height: 0;
        overflow-y: auto;
        padding-bottom: 0.1rem; /* room for rounding, so a list that fits doesn't show a scroll bar */
    }
}

/* Section pages: comfortable reading, as in a book - a line length of at most about 80 characters of text
   (centred when the page is embedded, without its side list), and the page's text a little larger */
#sections-content {
    max-width: 34rem;
}

#sections-content.col-12 {
    margin-left: auto;
    margin-right: auto;
}

.reader-content p,
.reader-content li,
.reader-content dd,
.reader-content blockquote {
    font-size: 0.85rem;
    line-height: 1.6;
}

/* the section's title is the largest heading on the page, as in a book's chapter title,
   and the headings in the page's text a step below it */
#sections-content .sections-page-title-template {
    font-size: 1.6rem;
}

.reader-content h2 {
    font-size: 1.3rem;
}

.reader-content h3 {
    font-size: 1.1rem;
}

.reader-content h4 {
    font-size: 0.95rem;
}

/* wide tables scroll sideways inside the text column (js/reader.js puts each table in this box) */
.reader-table-scroll {
    overflow-x: auto;
    margin-bottom: 1.2rem;
}

.reader-table-scroll table {
    margin-bottom: 0;
}

/* footnotes (with Markdown Extra) as smaller, muted notes below the text */
.reader-content .footnotes p,
.reader-content .footnotes li {
    font-size: 0.7rem;
    color: #667189;
}

/* Parts: a heading above each group of section cards, in the theme's heading style with its thin divider line.
   Headings in the text below the cards (after === in the Section List page's text) look the same. */
.reader-part-heading,
.section-list-below h2,
.section-list-below h3,
.section-list-below h4 {
    font-size: 1rem;
    padding-bottom: 0.4rem;
    margin: 1.6rem 0 1.2rem;
    border-bottom: 0.05rem solid #e7e9ed;
}

/* part headings (and h2 below the cards) a step larger than the card titles, so the groups stand out */
.reader-part-heading,
.section-list-below h2 {
    font-size: 1.2rem;
}

/* Parts: a small label above each group of sections in the side list, styled like the section labels ("Unit 2") */
#sections-nav .reader-part-label {
    color: #667189;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    list-style: none;
    margin: 0.8rem 0 0.2rem;
    padding-left: 0.4rem; /* lined up with the side list's items */
}

#sections-nav .reader-part-label:first-child {
    margin-top: 0;
}

.reader-back-link .fa {
    font-size: 0.65rem;
    margin-right: 0.15rem;
}

/* The row above the section cards: the "Continue reading" bar on the left and the guide's search box on the right
   (stacked and full width on phones). The row is hidden when it has nothing to show. */
.section-list-actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 1.2rem 0;
}

/* hide the row when everything in it is hidden (:has() checks the row's contents) */
.section-list-actions:not(:has(> :not([hidden]))) {
    display: none;
}

.section-list-actions .reader-search {
    flex: 0 1 16rem;
    margin-left: auto; /* on the right, the same side as the search box on section pages */
}

/* With no "Continue reading" bar, the search box moves to the left
   ([hidden] matches the hidden bar; + means the element right after it) */
.section-list-actions .reader-resume[hidden] + .reader-search,
.section-list-actions > .reader-search:first-child {
    margin-left: 0;
}

@media (max-width: 600px) {
    .section-list-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .section-list-actions .reader-search {
        flex-basis: auto;
        margin-left: 0;
    }
}

/* Keep My Place: the "Continue reading" bar, as in Helios Open Reader. It uses Spectre's light tint of Quark's
   blue (as on secondary labels), the height of the search box beside it, and a round close button like
   Spectre's clear button. The icon, title and focus ring use a darker blue than Quark's, and the close button a
   darker grey, for enough contrast on the tint. */
.reader-resume {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
    gap: 0.4rem;
    min-height: 1.8rem;
    padding: 0.2rem 0.3rem 0.2rem 0.6rem;
    background: #e1edfd;
    border-radius: 0.1rem;
}

.reader-resume[hidden] {
    display: none;
}

.reader-resume > .fa {
    color: #1565c0;
    flex: 0 0 auto;
}

.reader-resume-link {
    flex: 1;
    min-width: 0;
    color: inherit;
}

.reader-resume-title {
    color: #1565c0;
    font-weight: 600;
}

.reader-resume-link:hover,
.reader-resume-link:focus {
    color: inherit;
    text-decoration: none;
}

.reader-resume-link:hover .reader-resume-title {
    text-decoration: underline;
}

.reader-resume-dismiss {
    flex: 0 0 auto;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    opacity: 0.8;
    cursor: pointer;
    transition: background 0.2s, opacity 0.2s;
}

.reader-resume-dismiss:hover,
.reader-resume-dismiss:focus {
    background: rgba(255, 255, 255, 0.6);
    opacity: 1;
}

.reader-resume-dismiss:focus-visible {
    outline: 2px solid #1565c0;
    outline-offset: 1px;
}

#sections-nav .reader-search {
    margin-bottom: 0.8rem;
}

.reader-search form {
    margin: 0;
}

/* Large cover (Cover Image Layout = Large): the full width of the content area, at the top,
   as in Helios Open Reader. Only very tall images are trimmed (to 36rem high, centred), so the page text stays in view. */
.reader-cover-large {
    display: block;
    width: 100%;
    max-height: 36rem;
    object-fit: cover;
    border-radius: 0.1rem;
    box-shadow: 0 10px 45px -9px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.2rem;
}

/* A portrait cover (such as a book cover): shown whole, at its own width up to the full width and at most
   36rem high, instead of trimmed to fill the width */
.reader-cover-large-portrait {
    width: auto;
    max-width: 100%;
    height: auto;
}

/* The optional TNTSearch plugin's search box, sized like the theme's own search box (TNTSearch makes its field taller) */
.reader-search .tntsearch-form .form-input {
    height: 1.8rem;
    padding-left: 0.4rem;
}

.reader-search #tntsearch-wrapper {
    margin-bottom: 0;
}

.reader-search .tntsearch-clear {
    font-size: 1.4rem;
    line-height: 1.8rem;
    padding: 0 0.6rem;
}