/* Helios CSS customizations */

/* Sidebar section image banner */
.sidebar-section-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

/* Left-align content area without altering margins */
/*
#main-content > div {
    min-width: 90%;
}
*/

.prose blockquote.announcement {
    font-style: normal
}

.prose blockquote.announcement :is(h1, h2, h3) {
    margin: 0;
    line-height: 1.3
}

.prose blockquote.announcement h1 {
    margin-bottom: 0.25rem
}

.prose blockquote.announcement h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem
}

.prose blockquote.announcement h3 {
    margin: 0.75rem 0 0.25rem
}

.prose blockquote.announcement h2+h3 {
    margin-top: 0.25rem
}

.prose blockquote.announcement h1 {
    font-size: calc(2.25em * 0.8)
}

.prose blockquote.announcement h2 {
    font-size: calc(1.5em * 0.8)
}

.prose blockquote.announcement h3 {
    font-size: calc(1.25em * 0.8)
}

.prose blockquote.announcement h4 {
    font-size: calc(1em * 0.8)
}

.prose blockquote.announcement h5 {
    font-size: calc(0.875em * 0.8)
}

.prose blockquote.announcement h6 {
    font-size: calc(0.75em * 0.8)
}

/* Excerpt blockquotes — subtle grey border, opt-in via [excerpt]...[/excerpt] shortcode */
.prose blockquote.excerpt {
    border-left-width: 2px;
    border-left-color: #d1d5db;
    background-color: transparent;
    font-style: italic;
}
.dark .prose blockquote.excerpt {
    border-left-color: #4b5563;
}

.prose :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    line-height: 1.3
}

.prose h1 {
    margin-bottom: 0.5rem
}

/* h2 sits closer to the content it introduces (same 0.5rem as h1 and h3–h6),
   so each heading reads with its section */
.prose h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem
}

.prose :is(h3, h4, h5, h6) {
    margin: 1.5rem 0 0.5rem
}

.prose :is(h2, h3, h4, h5)+:is(h3, h4, h5, h6) {
    margin-top: 1rem
}

/* Font Awesome icon spacing */
.prose i[class^="fa"] {
    margin-right: 0.20em;
}

/* Responsive iframe/video containers */
.responsive-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden
}

.responsive-container--4x3 {
    aspect-ratio: 4 / 3;
}

.responsive-container--portrait {
    aspect-ratio: 8.5 / 11;
}

.responsive-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none
}

/* H5P embed container — no fixed aspect ratio; resizer script adjusts height dynamically */
.h5p-container {
    width: 100%;
    margin: 1rem 0;
}
.h5p-container iframe {
    width: 100%;
    min-height: 400px;
    border: none;
    display: block;
}

/* SVG Icons adjustment */
.prose p svg {
  position: relative;
  top: -1px;
  margin-right: 0.10em;
}

/* Heading icons need a larger offset due to bigger font size */
.prose :is(h1, h2, h3, h4, h5, h6) svg {
  position: relative;
  top: -2px;
  margin-right: 0.10em;
}

/* Keep filled doc-button text color on hover */
.prose a.doc-button:not(.doc-button-bordered):hover {
    color: var(--color-primary-text);
}

/* [topics] shortcode: the A-Z index and its letter headings - hibbittsdesign.org
   (color-mix() with currentColor makes the borders and backgrounds suit light and dark modes alike) */
.prose .topics-index {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0 0 1.5rem;
}

/* each letter is a box about 36px square - comfortably above the 24px minimum target size (WCAG 2.2),
   so it's easy to tap on a phone or click with less precise pointing. The letters are large and bold
   (about 19px), which counts as large text, so the theme's link colour has enough contrast (3:1) */
.prose .topics-index a,
.prose .topics-index .topics-index-inactive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    padding: 0 0.4rem;
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    border-radius: 0.375rem;
    font-size: 1.2rem;
    font-weight: 700;
    text-decoration: none;
}

.prose .topics-index a {
    color: var(--color-primary);
}

/* a clear outline around the letter that has keyboard focus */
.prose .topics-index a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* a letter with no topics */
.prose .topics-index .topics-index-inactive {
    opacity: 0.35;
}

/* each letter heading, as a soft label; after jumping to it from the index, it stops below the header */
.prose h2.topics-letter {
    display: inline-block;
    min-width: 2.25em;
    padding: 0.2em 0.6em;
    margin: 1.5rem 0 0.5rem;
    border-radius: 0.375rem;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 1.25rem;
    text-align: center;
    scroll-margin-top: 5rem;
}

/* Increase "Edit this page" link size */
footer .edit-page-link {
    font-size: 1rem;
}

footer .edit-page-link:hover {
    text-decoration: underline;
}

footer .edit-page-link svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Course label link: shift rect 3px left (margin-left) with compensating padding-left to keep icon position;
   extend 4px right to match nav-link hover width; 7px vertical padding between py-1.5 and py-2 */
.course-label-link {
    margin-left: -3px;
    padding-left: 3px;
    width: calc(100% + 7px);
    padding-top: 7px;
    padding-bottom: 7px;
}

/* Course label icon spacing */
.course-label-icon {
    margin-right: 6px;
}

/* Site icon (custom Tabler icon in logo square) */
.site-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
}

.site-icon svg {
    width: 100%;
    height: 100%;
}

/* TEMP FIX: .doc-card has margin-bottom that causes unequal heights in a CSS grid; remove if theme fixes .doc-grid behaviour for standard grids */
.section-card-grid .doc-card {
    margin-bottom: 0;
    height: 100%;
}

/* Equalise card heights in single-column grids only when at least one card has an image; not applied to 2- or 3-column grids to avoid stretching orphaned cards in the last row */
.section-card-grid:not(.section-card-grid--cols-2):not(.section-card-grid--cols-3):has(.section-card-has-image) {
    grid-auto-rows: 1fr;
}

/* Cards side by side line up (2 or 3 per row): each card's image, label and title, and details share rows with the
   other cards in its row, so a one-line title leaves space to match a two-line title next to it (subgrid; older
   browsers keep each card's own heights). Only in grids without side-image cards, which have their own layout. */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
    /* every card takes the same three rows, so the cards stay in order (title-only cards keep their centred layout) */
    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .doc-card {
        grid-row: span 3;
    }

    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .doc-card:not(.section-card-title-only) {
        display: grid;
        grid-template-rows: subgrid;
        row-gap: 0;
    }

    /* with an image: the image, then the padded block holding the label and title, and the details */
    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .section-card-has-image > .section-card-image-container {
        grid-row: 1;
    }

    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .section-card-has-image > .p-6 {
        grid-row: 2 / span 2;
        display: grid;
        grid-template-rows: subgrid;
        row-gap: 0;
    }

    /* each part keeps its own row, even when a card has no image */
    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .doc-card:not(.section-card-has-image):not(.section-card-title-only) > .section-card-head { grid-row: 2; }
    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .doc-card:not(.section-card-has-image):not(.section-card-title-only) > .section-card-details { grid-row: 3; }

    /* titles start at the top of their row, under the image, with any spare space below a shorter title rather than
       above and below it; the icon and arrow stay with the title's first line */
    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .doc-card .section-card-head {
        align-self: start;
    }

    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .doc-card .section-card-head > div {
        align-items: flex-start;
    }

    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .doc-card .section-card-head > div > svg:last-child {
        margin-top: 4px;
    }

    /* a little less padding inside cards shown 2 or 3 per row */
    :is(.section-card-grid--cols-2, .section-card-grid--cols-3):not(:has(.section-card-side-layout)) > .section-card-has-image > .p-6 {
        padding: 1rem;
    }
}

/* the author, date and badges sit at the bottom of the card, so they line up even when descriptions differ in length
   (any spare space goes below the description; the next line keeps its own small gap above it) */
.section-card-details {
    display: flex;
    flex-direction: column;
}

.section-card-details > .section-card-description {
    margin-bottom: auto;
}

/* a little less space between a card's title and its description (4px, rather than mt-3's 12px), and the small
   gap above the line after the description that its mt-2 class was meant to give (Helios's styles have no mt-2) */
.section-card-details > .section-card-description {
    margin-top: 0.25rem;
}

.section-card-details > .mt-2 {
    margin-top: 0.5rem;
}

/* Course card side image layout */
.section-card-side-layout {
    display: flex;
    flex-direction: row;
}

.section-card-side-image-container {
    width: 12rem;
    flex-shrink: 0;
    overflow: hidden;
}

/* Adjustments when cards are shown 2 per row (less horizontal space available) */
@media (min-width: 640px) {
    .section-card-grid--cols-2 .section-card-side-image-container {
        width: 9rem;
    }
    .section-card-grid--cols-2 .section-card-image-container {
        aspect-ratio: 2 / 1;
    }
}

/* Adjustments when cards are shown 3 per row (even less horizontal space available) */
@media (min-width: 1024px) {
    .section-card-grid--cols-3 .section-card-side-image-container {
        width: 5rem;
    }
    .section-card-grid--cols-3 .section-card-image-container {
        aspect-ratio: 3 / 2;
    }
}

/* On mobile, use a fixed image height for both top and stacked-side layouts */
@media (max-width: 639px) {
    .section-card-side-layout {
        flex-direction: column;
    }

    .section-card-side-image-container {
        width: 100%;
        height: 10rem;
    }

    .section-card-image-container {
        aspect-ratio: unset;
        height: 10rem;
    }
}

.section-card-side-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.doc-card:hover .section-card-side-image-container img {
    transform: scale(1.05);
}

.section-card-side-content {
    flex: 1;
    min-width: 0;
}

/* Course card optional top image */
.section-card-has-image {
    overflow: hidden;
    padding: 0;
}

/* Suppress primary border on hover for image cards — image scale + title color are sufficient hover signals */
.doc-card.section-card-has-image[href]:hover {
    border-color: var(--color-gray-200);
}

.dark .doc-card.section-card-has-image[href]:hover {
    border-color: var(--color-gray-700);
}

.section-card-image-container {
    width: 100%;
    aspect-ratio: 4 / 1;
    overflow: hidden;
}

.section-card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.doc-card:hover .section-card-image-container img {
    transform: scale(1.05);
}

/* Course card description (scoped to course cards only) */
.section-card-description {
    text-wrap: pretty;
}

/* Course card description line-clamp options (scoped to course cards only) */
.section-card-description--clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.section-card-description--clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Module card description (scoped to modules template only) */
.module-card-description {
    text-wrap: pretty;
}

/* Module card description line-clamp options (scoped to modules template only) */
.module-card-description--clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.module-card-description--clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Scale card description text up to text-base size site-wide */
.doc-card,
#htmx-article .grid > a {
    --text-sm: calc(var(--text-base) * 0.9375);
}

/* Scale accordion trigger label text up to text-base size */
.doc-accordion-trigger {
    --text-sm: var(--text-base);
}

/* Plain text version footer link icon alignment */
footer .plain-text-link svg {
    position: relative;
    top: -1px;
}

/* TEMP FIX: .doc-step li marker renders in left padding area alongside circle; remove if theme fixes .doc-step list-style */
.doc-step {
    list-style: none;
}

/* -------------------------------------------------------------------------
   Sticky prev/next bar
   Mirrors the main nav-button style; shown via JS when both main nav blocks
   are off-screen. Hidden by default; .hor-sticky-nav--visible reveals it.
   ------------------------------------------------------------------------- */
.hor-sticky-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    background-color: white;
    border-top: 1px solid rgb(229 231 235); /* gray-200 */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.dark .hor-sticky-nav {
    background-color: rgb(17 24 39); /* gray-900 */
    border-top-color: rgb(31 41 55); /* gray-800 */
}

.hor-sticky-nav--visible {
    opacity: 1;
    pointer-events: auto;
}

/* Remove standard top-nav spacing; equal-width buttons fill the full bar */
.hor-sticky-nav .prev-next-nav {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    gap: 0;
    justify-content: flex-start;
}

.hor-sticky-nav .nav-button {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: none;
    border-radius: 0;
    margin-left: 0;
    justify-content: flex-start;
}

.hor-sticky-nav .nav-button.next {
    justify-content: flex-end;
}

.hor-sticky-nav .nav-button.prev {
    border-right: 1px solid rgb(229 231 235); /* gray-200 */
}

.dark .hor-sticky-nav .nav-button.prev {
    border-right-color: rgb(31 41 55); /* gray-800 */
}

.hor-sticky-nav .nav-button .title {
    -webkit-line-clamp: 1;
}

/* On mobile: hide static nav blocks and always show the sticky bar instead */
@media (max-width: 639px) {
    .prev-next-nav--top,
    #htmx-prev-next .prev-next-nav {
        display: none;
    }

    .hor-sticky-nav {
        opacity: 1;
        pointer-events: auto;
    }
}

/* Equal-height buttons so a wrapping title on one side doesn't make it taller */
.prev-next-nav {
    align-items: stretch;
}

/* Top-align icon and text so labels read from the same baseline regardless of title length */
.prev-next-nav .nav-button {
    align-items: flex-start;
}

/* Re-centre the chevron icons vertically within the button */
.prev-next-nav .nav-button > svg {
    align-self: center;
}

/* Clamp nav button titles to 3 lines */
.nav-button .title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* Use system sans-serif for section-list UI elements and page footer */
.section-card-grid,
.hor-resume-strip,
.doc-btn,
footer {
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* H5P interactive activity exercise blocks */
.hor-h5p-exercise .md-alert-title {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hor-h5p-btn {
    display: inline-block;
    padding: 0.4em 1em;
    border-radius: 6px;
    background-color: var(--color-scale-green-3, #2da44e);
    color: #fff !important;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background-color 0.15s ease;
}

.hor-h5p-btn:hover {
    background-color: var(--color-scale-green-4, #238636);
}

.dark .hor-h5p-btn {
    background-color: var(--color-scale-green-4, #238636);
}

.dark .hor-h5p-btn:hover {
    background-color: var(--color-scale-green-3, #2da44e);
}

/* References shortcode – academic citation lists from imported content */
.hor-references {
    margin: 2rem 0;
    padding-top: 1rem;
    border-top: 2px solid var(--color-gray-200);
}

.dark .hor-references {
    border-top-color: var(--color-gray-700);
}

.hor-references-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: 0.75rem;
}

.dark .hor-references-label {
    color: var(--color-gray-400);
}

.hor-references-body {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.dark .hor-references-body {
    color: var(--color-gray-400);
}

/* Hanging indent for wrapped citation lines */
.hor-references-body p {
    padding-left: 1.5em;
    text-indent: -1.5em;
    margin-bottom: 0.5rem;
}

/* Imported-content figures (e.g. from Pressbooks converter) */
.prose figure {
    max-width: 100%;
    margin: 1.5rem auto;
}

.prose figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
    margin: 0 auto;
}

.prose figcaption {
    font-size: 0.8125rem;
    font-style: italic;
    text-align: center;
    margin-top: 0.375rem;
    color: var(--color-gray-500);
}

.dark .prose figcaption {
    color: var(--color-gray-400);
}

/* Images in page text are no taller than a little over half the screen, so an image and the text around it fit on
   screen together - when reading, and when presenting by screen sharing. A shortened image keeps its shape. Only
   images in the page's own text (inside a paragraph) are limited, not cards or figures - as in Grav Open Course Hub
   and Grav Open Publishing Space - hibbittsdesign.org */
.prose p > img {
    max-height: 55vh;
    width: auto;
    max-width: 100%;
}

/* A caption in plain Markdown: an italic line right after an image on its own, such as ![A photo](photo.jpg)
   followed by *Photo by …* - shown like the figure captions above (smaller and softer, just below the image), so
   authors need no HTML. It works with the italic line in its own paragraph (after a blank line) or on the line just
   below the image (the same paragraph), as in Grav Open Course Hub and Grav Open Publishing Space.
   (":only-child" here looks at elements only, so text beside them still counts) */
.prose p:has(> img:only-child):has(+ p > em:only-child) {
    margin-bottom: 0;
}

.prose p:has(> img:only-child):has(+ p > em:only-child) > img,
.prose p > img:first-child:has(+ em:last-child) {
    display: block;
    margin-bottom: 0.375rem;
}

.prose p:has(> img:only-child) + p:has(> em:only-child),
.prose p > img:first-child + em:last-child {
    display: block;
    margin-top: 0;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.dark .prose p:has(> img:only-child) + p:has(> em:only-child),
.dark .prose p > img:first-child + em:last-child {
    color: var(--color-gray-400);
}

/* [showifembedded] content is hidden on normal pages; on embedded pages the plugin swaps these
   (see onTwigSiteVariables), hiding [hideifembedded] content and showing [showifembedded] content */
.hor-show-if-embedded {
    display: none;
}

/* Default (primary colour) badges, such as on section and publication cards and from [badge]: the Helios theme
   shows them in the primary colour on a light tint of it, which is under 4.5:1 contrast with the default blue
   (about 3.1:1). In Light mode their text is a darker shade of the primary colour, so it stays readable whatever
   primary colour a site uses; coloured badges (Blue, Green and so on) and Dark mode already have enough contrast.
   (html:not(.dark) is Light mode; the :not(...) list leaves out the coloured badges) - hibbittsdesign.org */
html:not(.dark) .doc-badge:not(.doc-badge-blue, .doc-badge-green, .doc-badge-yellow, .doc-badge-red, .doc-badge-purple, .doc-badge-plain) {
    color: color-mix(in oklab, var(--color-primary) 70%, black);
}

/* ---------- Seeing an image larger ---------- */

/* An image in a page that's shown smaller than its full size can be tapped or clicked to see it larger
   (assets/image-zoom.js adds image-zoom to it): a zoom-in pointer, and a visible focus ring for keyboard users */
img.image-zoom {
    cursor: zoom-in;
}

img.image-zoom:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* the larger view: the image as large as fits the screen, on a dark background, with a Close button at the top right */
.image-zoom-dialog {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 3.5rem 1rem 1rem;
    border: 0;
    background: rgba(0, 0, 0, 0.92);
    cursor: zoom-out;
}

.image-zoom-dialog[open] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-zoom-dialog::backdrop {
    background: rgba(0, 0, 0, 0.92);
}

.image-zoom-dialog img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* the Close button: white on the dark background, 44px so it's easy to tap */
.image-zoom-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.image-zoom-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* On phones and tablets: the page's sections in a slim "On this page" box above its content, which opens when tapped
   (partials/page-sections-above.html.twig), as in Grav Open Publishing Space - hibbittsdesign.org */
.hor-page-sections-above {
    margin: 0 0 1.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--color-gray-200);
    border-radius: 0.5rem;
}

.dark .hor-page-sections-above {
    border-color: var(--color-gray-700);
}

/* "On this page" with a "›" on the right, in place of the browser's triangle on the left
   (list-style removes the triangle in most browsers, ::-webkit-details-marker in older Safari) */
.hor-page-sections-above summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    font-weight: 600;
    cursor: pointer;
}

.hor-page-sections-above summary::-webkit-details-marker {
    display: none;
}

.hor-page-sections-above summary::after {
    content: "\203A";
    font-size: 1.4em;
    line-height: 1;
    opacity: 0.6;
    transition: transform 0.15s ease;
}

/* the "›" turns to point down while the box is open */
.hor-page-sections-above[open] summary::after {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .hor-page-sections-above summary::after {
        transition: none;
    }
}

/* a bulleted list of links in the theme's link colour (the theme's base styles remove list bullets) */
.hor-page-sections-above ul {
    margin: 0.5rem 0 0.25rem;
    padding-left: 1.25rem;
    list-style: disc;
}

.hor-page-sections-above li {
    margin: 0.25rem 0;
}

.hor-page-sections-above a {
    color: var(--color-primary);
}

/* in Dark Mode, the theme's lighter link colour, as in its own "On this page" column */
.dark .hor-page-sections-above a {
    color: var(--color-primary-dark);
}

.hor-page-sections-above a:hover {
    text-decoration: underline;
}

/* Phones and tablets only: from 1024px wide, the theme can show its own "On this page" column on the right instead */
@media (min-width: 1024px) {
    .hor-page-sections-above {
        display: none;
    }
}

/* Callout title colours: the GitHub Markdown Alerts plugin uses one set of colours in both modes, too pale on a light
   background and too dim on a dark one, so these use GitHub's own light and dark colours instead */
.md-alert {
    --gh-alert-note-title-color: #0969da;
    --gh-alert-tip-title-color: #1a7f37;
    --gh-alert-important-title-color: #6639ba;
    --gh-alert-warning-title-color: #7d4e00;
    --gh-alert-caution-title-color: #d1242f;
}

.dark .md-alert {
    --gh-alert-note-title-color: #4493f8;
    --gh-alert-tip-title-color: #3fb950;
    --gh-alert-important-title-color: #ab7df8;
    --gh-alert-warning-title-color: #d29922;
    --gh-alert-caution-title-color: #f85149;
}

/* Side Box: the author's Markdown under the navigation (see partials/sidebar.html.twig), after a thin line and at the
   navigation's text size, with the same space above and below the line (.prose too, so this size wins over the
   theme's own .prose size whatever order the stylesheets load in) */
.hor-side-box.prose {
    margin-top: 0.5rem; /* with the last navigation row's own space below it, about 1rem */
    padding: 1rem 0.75rem 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.hor-side-box > :first-child {
    margin-top: 0;
}

.hor-side-box > :last-child {
    margin-bottom: 0;
}

/* Collapse/expand the sidebar (see partials/sidebar.html.twig): on wider screens only (1024px, where the sidebar sits
   beside the page), the button shows once assets/helios.js has set it up. Collapsed, the sidebar is a slim strip with
   the site icon (still the link home) and, at the bottom, the button, in the same place; the page moves over to fill
   the space.
   Helios sizes the sidebar and the page's left edge with --helios-sidebar-width, so narrowing it does both */
@media (min-width: 1024px) {
    .hor-sidebar-toggle.is-ready {
        display: inline-flex;
    }

    html.hor-sidebar-collapsed {
        --helios-sidebar-width: 4rem;
    }

    /* in the strip: only the site icon and the button (the navigation and everything else are hidden) */
    html.hor-sidebar-collapsed .hor-sidebar > div > :not(.hor-sidebar-head, .hor-sidebar-toggle-row),
    html.hor-sidebar-collapsed .hor-sidebar-toggle-collapse {
        display: none;
    }

    /* the site name beside the icon is hidden from view, but kept for screen readers, so the icon link home still has
       a name (it also shows on hover, see assets/helios.js) */
    html.hor-sidebar-collapsed .hor-sidebar-head a > span {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    /* nothing spills past the sidebar's edge while it slides */
    .hor-sidebar {
        overflow-x: hidden;
    }

    html.hor-sidebar-collapsed .hor-sidebar-toggle-row {
        display: flex;
    }

    html.hor-sidebar-collapsed .hor-sidebar-head,
    html.hor-sidebar-collapsed .hor-sidebar-toggle-row {
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
    }

    html.hor-sidebar-collapsed .hor-sidebar-head {
        overflow: hidden;
    }

    /* the arrows point the other way (») to expand */
    html.hor-sidebar-collapsed .hor-sidebar-toggle-icon {
        transform: rotate(180deg);
    }
}

/* A short slide as the sidebar collapses or expands (the sidebar's width and the page's left edge), so readers see where
   it went; left out for readers whose system asks for reduced motion. A saved choice applied as the page loads doesn't
   slide, as it's in place before anything is drawn */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
    .hor-sidebar,
    .hor-sidebar + div {
        transition: width 150ms ease, padding-left 150ms ease;
    }
}

/* The button: in the navigation's text colour (good contrast in light and dark), and at least 40px tall, and 40px wide
   when it's just the arrows in the strip, so it's an easy target to click or tap */
.hor-sidebar-toggle {
    min-height: 2.5rem;
}

html.hor-sidebar-collapsed .hor-sidebar-toggle {
    min-width: 2.5rem;
    justify-content: center;
}

/* the button's row stays at the bottom of the sidebar, also when the strip has nothing else below the site icon */
.hor-sidebar-toggle-row {
    margin-top: auto;
}

/* the button's words: "Collapse sidebar" shown while expanded; while collapsed, only the arrows show and "Expand sidebar"
   is read by screen readers (and shown on hover) */
html:not(.hor-sidebar-collapsed) .hor-sidebar-toggle-expand {
    display: none;
}

.hor-sidebar-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}