/* Helios CSS customizations */

/* Sidebar course image banner */
.sidebar-course-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)
}

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

/* 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 */
.course-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 */
.course-card-grid:not(.course-card-grid--cols-2):not(.course-card-grid--cols-3):has(.course-card-has-image) {
    grid-auto-rows: 1fr;
}

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

.course-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) {
    .course-card-grid--cols-2 .course-card-side-image-container {
        width: 9rem;
    }
    .course-card-grid--cols-2 .course-card-image-container {
        aspect-ratio: 2 / 1;
    }
}

/* Adjustments when cards are shown 3 per row (even less horizontal space available) */
@media (min-width: 1024px) {
    .course-card-grid--cols-3 .course-card-side-image-container {
        width: 5rem;
    }
    .course-card-grid--cols-3 .course-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) {
    .course-card-side-layout {
        flex-direction: column;
    }

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

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

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

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

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

/* Course card optional top image */
.course-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.course-card-has-image[href]:hover {
    border-color: var(--color-gray-200);
}

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

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

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

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

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

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

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

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