/* 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
}

.prose h2 {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 1rem
}

.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 - alphabetical index */
.topics-index {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 1rem;
}

.topics-index a {
    color: var(--color-primary);
    padding: 0 2px;
}

.topics-index-inactive {
    opacity: 0.35;
    padding: 0 2px;
}

/* Topics shortcode - letter section labels */
.topics-letter {
    display: block;
    width: 2em;
    font-size: 1.125rem;
    font-weight: 700;
    margin-top: 1.5rem;
    padding: 0.1em 0.25em;
    background: color-mix(in srgb, currentColor 10%, transparent);
    scroll-margin-top: 4rem;
}

/* 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;
}

/* 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-400);
    margin-bottom: 0.75rem;
}

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

.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);
}