/* Shared public-site corrections. Kept outside the optional vendor asset folders. */

/* The document owns page scrolling. A fixed-height, overflowing body creates
   a second inset scrollbar and prevents window scroll handlers from updating. */
html.lms-public-site {
    height: auto !important;
    min-height: 100%;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scrollbar-gutter: auto !important;
    scrollbar-width: auto !important;
    scrollbar-color: auto !important;
}
body.lms-public-body {
    height: auto !important;
    min-height: 100vh;
    max-height: none !important;
    overflow: visible !important;
    scrollbar-gutter: auto !important;
}
/* Preserve the existing mobile-menu and Bootstrap modal scroll locks. */
html.lms-public-site:has(.offcanvas__info.info-open),
html.lms-public-site:has(body.modal-open) {
    overflow-y: hidden !important;
}
body.lms-public-body:has(.offcanvas__info.info-open),
body.lms-public-body.modal-open {
    overflow: hidden !important;
}
/* Style only the real viewport scrollbar, never a page wrapper. */
html.lms-public-site::-webkit-scrollbar {
    display: block !important;
    width: 12px !important;
    height: 12px !important;
    background: #f2f4f3;
}
html.lms-public-site::-webkit-scrollbar-track { background: #f2f4f3; }
html.lms-public-site::-webkit-scrollbar-thumb {
    min-height: 48px;
    border: 3px solid #f2f4f3;
    border-radius: 12px;
    background: #929b97;
    background-clip: padding-box;
}
html.lms-public-site::-webkit-scrollbar-thumb:hover { background-color: #65736c; }
html.lms-public-site::-webkit-scrollbar-corner { background: #f2f4f3; }
@media (max-width: 767.98px), (hover: none) and (pointer: coarse) {
    /* Hide the page track on phones/touch screens; native scrolling still works. */
    html.lms-public-site { scrollbar-width: none !important; }
    html.lms-public-site::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }
}

/* Center the missing-image circle and its icon independently of the caption. */
.home-premium :is(.home-course-media, .home-resource-media, .home-blog-media) {
    position: relative;
}
.home-premium :is(.home-course-media, .home-resource-media, .home-blog-media) > .home-course-placeholder,
.course-public-page .course-card-media > .course-card-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #eaf5ee, #fff2c7);
    text-align: center;
}
.home-premium .home-course-placeholder > div {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    text-align: center;
}
.home-premium .home-course-placeholder i,
.course-public-page .course-card-placeholder > i {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin: 0 !important;
    padding: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .86);
    color: #599c86;
    font-size: 27px;
    font-style: normal;
    line-height: 1;
    text-align: center;
    float: none;
    transform: translate(-50%, -50%);
}
.home-premium .home-course-placeholder i::before,
.course-public-page .course-card-placeholder > i::before {
    position: static;
    display: block;
    margin: 0;
    line-height: 1;
    transform: none;
}
.home-premium .home-course-placeholder small,
.course-public-page .course-card-placeholder > small {
    position: absolute;
    top: calc(50% + 42px);
    left: 8px;
    right: 8px;
    display: block;
    margin: 0;
    color: #5f8f7d;
    font-size: 7px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: .1em;
    text-align: center;
    text-transform: uppercase;
}
.home-premium .home-blog-media .home-course-placeholder i {
    width: 44px;
    height: 44px;
    font-size: 19px;
}
.home-premium .home-blog-media .home-course-placeholder small {
    top: calc(50% + 29px);
    font-size: 6px;
}

/* Teacher portraits and decorative rings share exactly the same center. */
.teachers-page .teacher-photo { align-items: center; justify-content: center; }
.teachers-page .teacher-photo::before {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.teachers-page .teacher-photo > .teacher-initials,
.home-premium .home-teacher-photo > .home-teacher-initials {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    padding: 0;
    line-height: 1;
    text-align: center;
    transform: translate(-50%, -50%);
}
.home-premium .home-category-icon,
.home-premium .home-avatar,
.course-public-page .course-teacher-avatar {
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

/* White copy on the existing green closing strips; gold labels/buttons retain their colors. */
body.lms-public-body :is(
    .cd-final-cta,
    .teachers-principle,
    .home-cta-card,
    .td-final-cta,
    .about-lms-cta,
    .lms-events-next-cta,
    .lms-event-details-bottom-cta-card,
    .lms-blog-detail-bottom-cta-card
) :is(h1, h2, h3, h4, h5, h6) {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}
body.lms-public-body :is(
    .cd-final-cta,
    .teachers-principle,
    .home-cta-card,
    .td-final-cta,
    .about-lms-cta,
    .lms-events-next-cta,
    .lms-event-details-bottom-cta-card,
    .lms-blog-detail-bottom-cta-card
) p { color: #f1f8f4 !important; }

/* One accessible scroll-to-top control, with a centered SVG arrow rather than a font pseudo-icon. */
body.lms-public-body .lms-back-to-top {
    position: fixed;
    right: max(22px, env(safe-area-inset-right));
    bottom: max(22px, env(safe-area-inset-bottom));
    z-index: 950;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fffdf7;
    color: #0a5d47;
    box-shadow: 0 7px 22px rgba(13, 52, 45, .16);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1;
    text-align: center;
    transition: background-color .18s ease, box-shadow .18s ease;
}
body.lms-public-body .lms-back-to-top[hidden] { display: none !important; }
body.lms-public-body .lms-back-to-top::before,
body.lms-public-body .lms-back-to-top::after { content: none !important; }
body.lms-public-body .lms-back-to-top:hover {
    background: #fff2c9;
    box-shadow: 0 9px 25px rgba(13, 52, 45, .22);
}
body.lms-public-body .lms-back-to-top:focus-visible {
    outline: 3px solid #14765b;
    outline-offset: 4px;
}
.lms-back-to-top .lms-back-to-top__ring {
    position: absolute;
    inset: 0;
    display: block;
    width: 44px;
    height: 44px;
    margin: 0;
    fill: none;
    transform: rotate(-90deg);
    pointer-events: none;
}
.lms-back-to-top__track { fill: none; stroke: #d4b25a; stroke-width: 1.25; }
.lms-back-to-top__value { fill: none; stroke: #087154; stroke-width: 2; stroke-linecap: round; }
.lms-back-to-top .lms-back-to-top__arrow {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}
@media (max-width: 575px) {
    body.lms-public-body .lms-back-to-top {
        right: max(16px, env(safe-area-inset-right));
        bottom: max(16px, env(safe-area-inset-bottom));
    }
}
@media (prefers-reduced-motion: reduce) {
    html.lms-public-site { scroll-behavior: auto !important; }
    body.lms-public-body .lms-back-to-top { transition: none; }
}
@media (forced-colors: active) {
    html.lms-public-site { scrollbar-color: auto !important; }
    body.lms-public-body .lms-back-to-top { border: 1px solid ButtonText; }
}
@media print {
    body.lms-public-body .lms-back-to-top { display: none !important; }
}