/* ================================================================
   Program Listing & Grid Layout Stylesheet
   ================================================================
   Dependencies:
   - Bootstrap 5 (loaded by the host page)
   - FontAwesome 6 (loaded by the host page)

   NOTE ON THE !important RULES BELOW
   -----------------------------------
   The WordPress (Kubio theme) side applies global styling directly to
   h2, p, button, a, and input tags (e.g. "[data-kubio] h2",
   "[data-kubio] p", "[data-kubio] button:where(...)"). Those selectors
   have higher CSS specificity than a single class like .xlsh-course-title
   or .xlsh-pill-btn, so on WordPress the theme's font-size/color/etc. wins
   instead of ours. Moodle has no such global tag-level styling, so the
   same rules apply cleanly there without any conflict.

   Rather than fight the theme's selector specificity everywhere, the
   properties that were being overridden are marked !important, scoped
   only to these .xlsh-* classes. This makes the widget render identically
   on both platforms regardless of the host theme's global styles.
   ================================================================ */


/* =============================== */
/* === SEARCH WRAPPER           === */
/* =============================== */

.program-search-and-list-fr,
.program-search-and-list-en {
    width: 100%;
    margin: auto;
    box-sizing: border-box;
}


/* ================================= */
/* === PROGRAM LISTING CONTAINER === */
/* ================================= */

.xlsh-course-listing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 10px 0;
    margin: auto;
    font-family: 'Tahoma', sans-serif;
    box-sizing: border-box;
    width: 100%;
}

@media (max-width: 1024px) {
    .xlsh-course-listing {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .xlsh-course-listing {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}


/* ======================================= */
/* === INDIVIDUAL PROGRAM CARD STYLING === */
/* ======================================= */

.xlsh-course-item {
    border: 1px solid #ddd;
    padding: 12px;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    font-family: 'Tahoma', sans-serif;
    box-sizing: border-box;
    width: 100%;
    transition: box-shadow 0.2s;
}

.xlsh-course-item:hover {
    background-color: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}


/* ================================ */
/* === COURSE CONTENT STRUCTURE === */
/* ================================ */

.xlsh-full-course-content {
    display: flex;
    flex-direction: column;
    font-family: 'Tahoma', sans-serif;
    height: 100%;
}

.xlsh-course-image {
    position: relative;
    padding-top: 10px;
}

.xlsh-abbreviation {
    position: absolute;
    top: 0;
    background-color: #D4D4D4;
    color: #000;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-family: 'Tahoma', sans-serif;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1;
}

.xlsh-course-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    display: block;
}

.xlsh-course-details {
    margin-top: 10px;
    font-family: 'Tahoma', sans-serif;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.xlsh-course-details ul {
    list-style: disc;
    margin: 0.75em 0 0.75em 1.4em;
    padding: 0;
}

/* FIX: h2 is targeted directly by the theme's global heading styles
   (font-size: 3em on WordPress) — force our sizing to win. */
.xlsh-course-title {
    font-size: 18px !important;
    font-weight: bold !important;
    font-family: 'Tahoma', sans-serif !important;
    line-height: 1.3 !important;
    color: #1a1a1a !important;
    margin: 0 0 4px !important;
}

@media (max-width: 600px) {
    .xlsh-course-title {
        font-size: 16px !important;
    }
}

.xlsh-course-sub-title {
    font-size: 15px !important;
    font-weight: normal !important;
    font-family: 'Tahoma', sans-serif !important;
    color: inherit !important;
}

.xlsh-institution {
    font-size: 13px;
    color: #555;
    font-family: 'Tahoma', sans-serif;
}

/* FIX: the actual <p> tags inside the description are targeted directly
   by the theme's global paragraph styles (16px Roboto grey on WordPress).
   Target the <p> elements explicitly, not just the wrapping span. */
.xlsh-description,
.xlsh-description p {
    font-size: 13px !important;
    font-family: 'Tahoma', sans-serif !important;
    line-height: 1.5 !important;
    color: #333 !important;
    margin: 0 0 8px !important;
}

.xlsh-description ul,
.xlsh-description li {
    font-size: 13px !important;
    font-family: 'Tahoma', sans-serif !important;
}

.xlsh-accreditation {
    font-size: 13px;
    font-weight: bold;
    color: #00A767;
    font-family: 'Tahoma', sans-serif;
}

.xlsh-format,
.xlsh-fees,
.xlsh-start-date,
.xlsh-duration,
.xlsh-language {
    font-size: 12px;
    color: #404040;
    font-family: 'Tahoma', sans-serif;
}


/* ============================= */
/* === CALL-TO-ACTION BUTTON === */
/* ============================= */

/* FIX: this is an <a> tag, and the theme's global link styles
   (color, text-decoration) beat a plain class on WordPress. */
.xlsh-learn-more-button,
.xlsh-learn-more-button:visited {
    font-size: 13px !important;
    display: inline-block !important;
    background-color: #383838 !important;
    color: #CFCFCF !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
    border-radius: 5px !important;
    margin-top: auto;
    padding-top: 8px !important;
    font-family: 'Tahoma', sans-serif !important;
    align-self: flex-start;
}

.xlsh-learn-more-button:hover {
    color: #ffffff !important;
    background-color: #212D6A !important;
}


/* ========================== */
/* === FILTER BAR          === */
/* ========================== */

.xlsh-filter-wrap {
    padding: 0 0 20px;
    width: 100%;
    box-sizing: border-box;
}

/* FIX: the input's text was vertically off-center relative to the icon
   because its height was only implied by padding, and it was inheriting
   the theme's link-blue text color instead of a plain gray. Pin an exact
   height/line-height so the text centers predictably, and force the
   color/font so it can't inherit from the theme. */
.xlsh-search-box {
    position: relative !important;
    display: block !important;
    height: 48px !important;
}

.xlsh-search-box i,
.xlsh-search-box svg {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    color: #888 !important;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    pointer-events: none !important;
}

.xlsh-search-box input {
    box-sizing: border-box !important;
    height: 48px !important;
    line-height: 48px !important;
}

.xlsh-search-box input,
.xlsh-search-box input::placeholder {
    color: #888 !important;
    font-family: 'Tahoma', sans-serif !important;
    font-size: 15px !important;
}

/* FIX: the search box is a plain <input>, and the theme applies its own
   default input styling (small border-radius, its own border/background)
   directly to the tag. Rebuild the pill shape with !important so it can't
   be pulled back to the theme's default look. */
.xlsh-search-box input {
    width: 100% !important;
    padding: 0 16px 0 40px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    box-shadow: none !important;
    outline: none !important;
}

.xlsh-search-box input:focus {
    border-color: #212D6A !important;
    box-shadow: none !important;
    outline: none !important;
}

.xlsh-search-box i {
    color: #888 !important;
}

/* FIX: these are <button> elements, and the theme's global button styles
   (filled background, small border-radius) beat a plain class on
   WordPress, which is why every pill was showing as solid navy instead
   of only the active one. Rebuild the full pill styling with !important. */
.xlsh-pill-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 14px !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: #fff !important;
    color: #222 !important;
    font-family: 'Tahoma', sans-serif !important;
    box-shadow: none !important;
    text-transform: none !important;
}

.xlsh-pill-btn:hover {
    border-color: #212D6A !important;
    background: #f5f7ff !important;
}

.xlsh-pill-btn.xlsh-pill-active {
    background: #212D6A !important;
    color: #fff !important;
    border-color: #212D6A !important;
}

.xlsh-apply-btn {
    padding: 6px 18px !important;
    border-radius: 999px !important;
    border: none !important;
    background: #212D6A !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    font-family: 'Tahoma', sans-serif !important;
    box-shadow: none !important;
}

.xlsh-apply-btn:hover {
    background: #151d4a !important;
}

.xlsh-clear-link {
    font-size: 13px !important;
    color: #555 !important;
    background: none !important;
    border: none !important;
    text-decoration: underline !important;
    font-family: 'Tahoma', sans-serif !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.xlsh-drop {
    border-radius: 10px !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10) !important;
    background: #fff !important;
}

.xlsh-page-btn {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: none !important;
    background: none !important;
    color: #333 !important;
    font-family: 'Tahoma', sans-serif !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.xlsh-page-btn.xlsh-page-active {
    background: #212D6A !important;
    color: #fff !important;
    font-weight: 700 !important;
}

.xlsh-drop-item input[type="checkbox"] {
    font-family: 'Tahoma', sans-serif !important;
    accent-color: #212D6A !important;
}

@media (max-width: 600px) {
    .xlsh-pill-bar {
        gap: 6px;
    }

    .xlsh-pill-btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .xlsh-drop {
        min-width: 180px;
        max-width: calc(100vw - 32px);
        left: 0;
    }
}


/* ========================== */
/* === PAGINATION          === */
/* ========================== */

.xlsh-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 28px 0 8px;
    flex-wrap: wrap;
}

@media (max-width: 400px) {
    .xlsh-page-btn {
        width: 30px !important;
        height: 30px !important;
        font-size: 12px !important;
    }
}


/* =========================== */
/* === GENERAL GRID LAYOUT === */
/* =========================== */

.xlsh-grid-container-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 0;
}

.xlsh-grid-item-3 {
    background-color: #fff;
    text-align: center;
    padding: 0;
    transition: box-shadow 0.3s ease-in-out;
}

.xlsh-grid-item-3:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.xlsh-grid-item-3 a {
    color: #000 !important;
    text-decoration: none !important;
    transition: color 0.3s ease-in-out;
}

@media (max-width: 1024px) {
    .xlsh-grid-container-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .xlsh-grid-container-3 {
        grid-template-columns: 1fr;
    }
}


/* ===================================================== */
/* === BASIC PROGRAM CARD (Fallback / Simpler Cards) === */
/* ===================================================== */

.xlsh-program-card {
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 12px;
}


/* =============================== */
/* === CARD SPACING FIXES      === */
/* =============================== */

.xlsh-accreditation {
    display: block;
}

.xlsh-course-details > br,
.xlsh-course-details span + br,
.xlsh-course-details a + br {
    display: none;
}

.xlsh-course-details .xlsh-accreditation + br,
.xlsh-course-details .xlsh-institution,
.xlsh-course-details .xlsh-description {
    display: block;
    margin-top: 6px;
}

.xlsh-institution {
    margin-bottom: 4px;
}

.xlsh-description {
    margin-bottom: 8px !important;
}