/* ===== CourseCatalogue.css - course catalogue pages and the course details overview box. The views use
   Bootstrap utilities; this file only holds what Bootstrap 4 can't express. ===== */

/* Tenant themes (e.g. APSATheme.css) define the --theme-* variables; ECPR falls back to black and white. */

/* #region Section tabs */

/* Keyed off aria-current, as the house .nav-link.active rule recolours borders; the underline covers the bar's hairline. */
.course-catalogue-tabs .nav-link {
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
}

.course-catalogue-tabs .nav-link:hover,
.course-catalogue-tabs .nav-link:focus {
    border-bottom-color: #bdbdbd;
}

.course-catalogue-tabs .nav-link[aria-current="page"] {
    border-bottom-color: var(--theme-header-footer-bg, #000);
}

/* #endregion */

/* #region Hero stats */

/* Every stat has a divider; the list clips it on whichever stat starts a row. */
@media (min-width: 576px) {
    .course-hero-stats {
        overflow: hidden;
    }

    .course-hero-stats > li {
        margin-left: -1px;
        border-left: 1px solid rgba(255, 255, 255, .3);
    }
}

/* #endregion */

/* #region Choice chips */

/* Bootstrap 4 toggle buttons rely on button.js state and the house .btn is uppercase, so chips style the label of a visually hidden input. */
.course-chip label {
    min-height: 2.75rem; /* 44px touch target */
    border: 1px solid #b5b5b5;
    background: #fff;
    color: var(--theme-font-color, #000);
    font-weight: 400;
    line-height: 1.25;
    cursor: pointer;
}

.course-chip label:hover {
    border-color: var(--theme-header-footer-bg, #000);
}

.course-chip input:checked + label {
    border-color: var(--theme-header-footer-bg, #000);
    background: var(--theme-header-footer-bg, #000);
    color: var(--theme-header-footer-color, #fff);
}

.course-chip input:focus-visible + label {
    outline: 3px solid var(--theme-header-footer-bg, #000);
    outline-offset: 2px;
}

/* #endregion */

/* #region Course cards */

/* The title's stretched-link covers the whole card, so hover and keyboard focus are drawn on the card itself. */
.course-card:hover {
    border-color: var(--theme-header-footer-bg, #000);
}

.course-card .stretched-link:focus-visible {
    outline: 0;
}

/* Inset, because the card clips its overflow to trim the corner ribbon. */
.course-card .stretched-link:focus-visible::after {
    outline: 3px solid var(--theme-header-footer-bg, #000);
    outline-offset: -3px;
}

/* Lifts instructor links and booking buttons above the stretched link so they stay clickable. */
.course-card-action {
    position: relative;
    z-index: 2;
}

/* The house ribbon sits above the card link, so let taps on it through to the card. */
.course-card .diagonal-ribbon {
    pointer-events: none;
}

/* Keeps the title's first lines clear of the corner ribbon. */
.course-card-ribbon-space {
    float: right;
    width: 3rem;
    height: 2.5rem;
}

/* Three lines, always reserved, keep the cards compact and level; "Read more" opens the full blurb. */
.course-card-blurb {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: 4.5em;
}

/* Sits over the end of the third line, fading out the words it covers (cards are always white). */
.course-card-blurb-more {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2; /* above the card's stretched link */
    padding: 0 0 0 1.5em;
    border: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 1.5em);
    color: inherit;
    font: inherit;
    cursor: pointer;
}

/* The house button:focus rule strips outlines with !important, so keyboard users get one back here. */
.course-card-blurb-more:focus-visible {
    outline: 2px solid var(--theme-header-footer-bg, #000) !important;
    outline-offset: 2px;
}

/* #endregion */

/* #region Level meter */

.course-level-step {
    width: .875rem;
    height: .5rem;
    background: #d4d4d4;
}

.course-level-step + .course-level-step {
    margin-left: 3px;
}

.course-level-step.is-filled {
    background: var(--theme-header-footer-bg, #000);
}

/* #endregion */

/* #region Learning paths */

/* Arrow centred in the grid gutter between level columns. */
@media (min-width: 768px) {
    .course-path-level:not(:last-child)::after {
        content: "\2192";
        position: absolute;
        top: 0;
        right: -.5em;
        width: 1em;
        color: #6c757d;
        text-align: center;
    }
}

/* #endregion */

/* #region Accessibility preferences */

/* Background fills vanish in forced-colours mode, so draw the level steps with borders instead. */
@media (forced-colors: active) {
    .course-level-step {
        border: 1px solid CanvasText;
    }

    .course-level-step.is-filled {
        background: CanvasText;
    }
}

/* #endregion */