/*
 * Healthkeepers Academy LMS theme
 * Extends the existing LMS design system without changing workflow markup.
 */
:root {
    --hk-ink: #06183f;
    --hk-navy: #03275e;
    --hk-cobalt: #0b5fe8;
    --hk-cobalt-dark: #0849c7;
    --hk-aqua: #16b9b7;
    --hk-coral: #ff5a52;
    --hk-marigold: #ffb000;
    --hk-periwinkle: #6f8ff5;
    --hk-canvas-soft: #f5f8ff;
    --hk-border: #d9e4f0;
}

body {
    color: #101f42;
    background: var(--hk-canvas-soft);
}

a {
    text-underline-offset: .18em;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--hk-marigold) !important;
    outline-offset: 3px;
}

.clp-header-top {
    color: #dff8f6;
    background: var(--hk-navy) !important;
    border-bottom: 0 !important;
}

.clp-header-top a,
.clp-header-top i {
    color: #fff !important;
}

.clp-header-main,
.dashboard-menu-content,
.topbar {
    border-bottom: 1px solid var(--hk-border);
    box-shadow: 0 10px 30px rgba(3, 39, 94, .06) !important;
}

.clp-logo-img,
.logo-box .logo img,
.sidebar-header img {
    padding: 7px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(11, 95, 232, .14);
}

.clp-main-menu > ul > li > a {
    position: relative;
    color: var(--hk-ink);
    font-weight: 700;
}

.clp-main-menu > ul > li > a::after {
    position: absolute;
    right: 12px;
    bottom: 5px;
    left: 12px;
    height: 3px;
    content: "";
    border-radius: 999px;
    background: linear-gradient(90deg, var(--hk-cobalt), var(--hk-aqua));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .2s ease;
}

.clp-main-menu > ul > li > a:hover::after,
.clp-main-menu > ul > li > a:focus-visible::after {
    transform: scaleX(1);
}

.theme-btn,
.btn-primary,
.btn.btn-primary {
    border-radius: 12px !important;
    box-shadow: 0 10px 24px rgba(11, 95, 232, .2);
}

.theme-btn:hover,
.btn-primary:hover,
.btn.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(11, 95, 232, .25);
}

.clp-auth-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 15% 25%, rgba(22, 185, 183, .42), transparent 28%),
        radial-gradient(circle at 84% 20%, rgba(255, 176, 0, .3), transparent 23%),
        radial-gradient(circle at 76% 92%, rgba(255, 90, 82, .3), transparent 28%),
        var(--hk-navy);
}

.clp-auth-hero::after {
    position: absolute;
    right: -8vw;
    bottom: -90px;
    width: 360px;
    height: 180px;
    content: "";
    border: 28px solid rgba(255, 255, 255, .12);
    border-radius: 50%;
    transform: rotate(-10deg);
}

.clp-auth-hero-title,
.clp-auth-hero-sub {
    color: #fff !important;
}

.clp-auth-eyebrow {
    color: var(--hk-marigold) !important;
}

.card,
.card-item,
.clp-card {
    border: 1px solid var(--hk-border);
    box-shadow: 0 18px 50px rgba(3, 39, 94, .08);
}

.clp-auth-body .card-item {
    position: relative;
    overflow: hidden;
}

.clp-auth-body .card-item::before {
    display: block;
    width: 100%;
    height: 7px;
    content: "";
    background: linear-gradient(90deg, var(--hk-cobalt) 0 28%, var(--hk-aqua) 28% 52%, var(--hk-coral) 52% 76%, var(--hk-marigold) 76%);
}

.card-item:hover,
.clp-card:hover {
    border-color: rgba(11, 95, 232, .3);
}

.course-grid .card-item:nth-child(4n+1),
.course-grid > *:nth-child(4n+1) .card-item {
    border-top: 4px solid var(--hk-coral);
}

.course-grid .card-item:nth-child(4n+2),
.course-grid > *:nth-child(4n+2) .card-item {
    border-top: 4px solid var(--hk-aqua);
}

.course-grid .card-item:nth-child(4n+3),
.course-grid > *:nth-child(4n+3) .card-item {
    border-top: 4px solid var(--hk-periwinkle);
}

.course-grid .card-item:nth-child(4n+4),
.course-grid > *:nth-child(4n+4) .card-item {
    border-top: 4px solid var(--hk-marigold);
}

.sidebar-wrapper {
    background:
        radial-gradient(circle at 15% 5%, rgba(22, 185, 183, .22), transparent 24%),
        var(--hk-navy) !important;
}

.sidebar-wrapper .metismenu a {
    border-left: 3px solid transparent;
}

.sidebar-wrapper .metismenu a:hover,
.sidebar-wrapper .metismenu .mm-active > a {
    border-left-color: var(--hk-aqua);
    background: rgba(22, 185, 183, .14) !important;
}

.page-content,
.dashboard-content-wrap {
    position: relative;
}

.page-content::before,
.dashboard-content-wrap::before {
    position: absolute;
    top: 0;
    right: 0;
    width: 220px;
    height: 110px;
    pointer-events: none;
    content: "";
    opacity: .5;
    background:
        radial-gradient(circle, rgba(11, 95, 232, .18) 1.5px, transparent 1.5px);
    background-size: 14px 14px;
    mask-image: linear-gradient(to left, #000, transparent);
}

.dashboard-area .icon-element,
.page-content .icon-element {
    color: var(--hk-cobalt);
    background: #edf1ff;
}

.badge-primary,
.bg-primary {
    background-color: var(--hk-cobalt) !important;
}

.progress-bar {
    background: linear-gradient(90deg, var(--hk-aqua), var(--hk-cobalt));
}

.footer-area {
    color: #dbeaff;
    background:
        radial-gradient(circle at 8% 18%, rgba(22, 185, 183, .2), transparent 24%),
        radial-gradient(circle at 90% 12%, rgba(111, 143, 245, .2), transparent 25%),
        var(--hk-navy);
}

.footer-area h3,
.footer-area .font-weight-bold,
.footer-area .copy-desc,
.footer-area a {
    color: #fff !important;
}

.footer-area p,
.footer-area .text-muted {
    color: #c6d8ef !important;
}

.footer-area .section-block {
    border-color: rgba(255, 255, 255, .14);
}

.footer-area .section--divider {
    background: linear-gradient(90deg, var(--hk-aqua), var(--hk-marigold));
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (max-width: 767.98px) {
    .clp-header-top {
        display: none;
    }

    .page-content::before,
    .dashboard-content-wrap::before {
        width: 120px;
        opacity: .3;
    }
}