/* This file is served as plain CSS: keep it valid CSS (no // comments, no SCSS-only syntax) */

/* ---------- Course item ---------- */

.moodle-search-results-item {
    /* Title */
    --item-title-color: var(--e-global-color-text);
    --item-title-hover-color: var(--e-global-color-primary);
    /* Description */
    --item-text-color: var(--e-global-color-text);
    /* "Read more" toggle and "Access the resource" link */
    --item-buttons-color: var(--item-text-color);
    --item-buttons-hover-color: var(--e-global-color-primary);
    /* Left indent of title (without domain icon), description and buttons */
    --item-indent: 10px;

    display: flex;
    flex-direction: row;

    margin: 10px 0;
    padding: 15px;

    border: thin solid var(--e-global-color-4d2f4e0);
    border-radius: 15px;
}

/* Hidden course: gray title and buttons; the buttons keep their hover color */
.moodle-search-results-item-hidden {
    --item-title-color: gray;
    --item-buttons-color: gray;
}

.moodle-search-results-item-image {
    width: 128px;
    height: 128px;
    min-width: 128px;
    min-height: 128px;
    background-color: var(--e-global-color-4d2f4e0);
    border-radius: 15px;
    border-color: transparent;
}

.moodle-search-results-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: thin solid var(--e-global-color-4d2f4e0);
    border-radius: 15px;
}

.moodle-search-results-item-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    margin-left: 0.5em;
}

.moodle-search-results-item-info-first-row {
    display: flex;
    flex-direction: row;
}

.moodle-search-results-item-domain-icon {
    width: 40px;
    height: 40px;
}

/* ---------- Title ---------- */

.moodle-search-results-item .moodle-search-results-item-title {
    width: fit-content;
    color: var(--item-title-color) !important;
    font-family: var(--e-global-typography-primary-font-family), sans-serif !important;
    font-size: 1.5em;
    font-weight: bold;
}

/* Without the domain icon the title is the first element of its row */
.moodle-search-results-item .moodle-search-results-item-title:first-child {
    margin-left: var(--item-indent);
}

.moodle-search-results-item .moodle-search-results-item-title:hover {
    color: var(--item-title-hover-color) !important;
    cursor: pointer !important;
}

/* ---------- Description ---------- */

/* The course summary comes from Moodle with its own formatting: make every line exactly
   24px high with no margins, so that the collapsed height is an exact number of lines.
   Its colors are ignored too: one color for every result */
.moodle-search-results-item-description,
.moodle-search-results-item-description * {
    font-family: 'Titillium Web', sans-serif !important;
    font-size: 15px !important;
    line-height: 24px !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    color: var(--item-text-color) !important;
}

.moodle-search-results-item-description ul,
.moodle-search-results-item-description ol {
    padding-left: 1.5em !important;
}

.moodle-search-results-item-description {
    flex-grow: 1;
    margin-left: var(--item-indent) !important;
    /* Collapsed: 4 lines x 24px */
    max-height: 96px;
    overflow: hidden;
}

.moodle-search-results-item-description.expanded,
.moodle-search-results-item-description.short {
    max-height: none;
}

/* ---------- "Read more" / "Read less" toggle and "Access the resource" link ---------- */

/* Toggle: plain bold text, overriding the theme button styles in every state */
.moodle-search-results-item-toggle,
.moodle-search-results-item-toggle:hover,
.moodle-search-results-item-toggle:focus,
.moodle-search-results-item-toggle:active {
    display: block;
    width: fit-content !important;
    min-width: 0 !important;
    height: auto !important;
    margin: .4em 0 .4em var(--item-indent) !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    text-transform: none !important;
    line-height: inherit !important;
    cursor: pointer;
}

.moodle-search-results-item-toggle[hidden] {
    display: none;
}

.moodle-search-results-item-toggle:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px;
}

/* Link: on its own line, below the toggle */
.moodle-search-results-item-readmore {
    display: block !important;
    width: fit-content !important;
    float: none !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: var(--item-indent) !important;
    padding-left: 0 !important;
    font-family: var(--e-global-typography-primary-font-family), sans-serif;
    font-weight: 600 !important;
    text-align: left !important;
    cursor: pointer;
}

.moodle-search-results-item .moodle-search-results-item-toggle,
.moodle-search-results-item .moodle-search-results-item-readmore {
    color: var(--item-buttons-color) !important;
    transition: color .15s ease;
}

.moodle-search-results-item .moodle-search-results-item-toggle:hover,
.moodle-search-results-item .moodle-search-results-item-toggle:focus-visible,
.moodle-search-results-item .moodle-search-results-item-readmore:hover,
.moodle-search-results-item .moodle-search-results-item-readmore:focus-visible {
    color: var(--item-buttons-hover-color) !important;
}

/* ---------- Groups ---------- */

.moodle-courses-group-item-title {
    padding-top: 30px;
}

/* Defaults: the widget controls override size and color */
.moodle-courses-group-item-line hr {
    border: 0;
    height: 3px;
    background: gray;
    opacity: unset;
}

/* ---------- Selected interest and no results ---------- */

.btn-custom-green {
    background-color: var(--e-global-color-primary);
    color: white;
}

#moodle-search-results-noresults {
    display: none;
    width: 100%;
    margin: 3em 0;
    text-align: center;
    font-family: var(--e-global-typography-primary-font-family);
    font-size: 24px;
    color: var(--e-global-color-text);
}

@media (max-width: 1024px) {
    .moodle-search-results-item {
        flex-direction: column;
    }

    .moodle-search-results-item-info {
        margin-left: 0;
    }
}