/* SEOWORK Education public learning design system. Scoped to course content only. */
body .swc-hub,
body .swcareer,
body .sw-post,
body .swc-box {
    --swe-bg: #f5f7fb;
    --swe-surface: #ffffff;
    --swe-raised: #f0f4fa;
    --swe-soft: #e9f0fc;
    --swe-text: #15233d;
    --swe-muted: #56657d;
    --swe-line: #d7e0ed;
    --swe-blue: #2563eb;
    --swe-blue-strong: #184bb7;
    --swe-violet: #6d3be8;
    --swe-green: #087f5b;
    --swe-red: #b4232f;
    --swe-shadow: 0 16px 44px rgba(17, 36, 74, .09);
    --swe-shadow-hover: 0 20px 52px rgba(17, 36, 74, .14);
    --swe-radius: 20px;
    color-scheme: light;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

html[data-theme="dark"] body .swc-hub,
html[data-theme="dark"] body .swcareer,
html[data-theme="dark"] body .sw-post,
html[data-theme="dark"] body .swc-box {
    --swe-bg: #0d1729;
    --swe-surface: #14223a;
    --swe-raised: #192b47;
    --swe-soft: #1d3150;
    --swe-text: #f2f6ff;
    --swe-muted: #becbe0;
    --swe-line: #334968;
    --swe-blue: #84b5ff;
    --swe-blue-strong: #a7caff;
    --swe-violet: #c7abff;
    --swe-green: #80e6bf;
    --swe-red: #ffadb7;
    --swe-shadow: 0 18px 48px rgba(0, 0, 0, .26);
    --swe-shadow-hover: 0 22px 58px rgba(0, 0, 0, .36);
    color-scheme: dark;
}

/* Course catalogue. */
body .swc-hub {
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: clamp(24px, 5vw, 64px) 20px 80px !important;
    color: var(--swe-text) !important;
}

body .swc-hub .swc-hero {
    overflow: hidden;
    padding: clamp(28px, 6vw, 58px) !important;
    border: 1px solid var(--swe-line) !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #eaf1ff, #f3efff 58%, #fff2ef) !important;
    box-shadow: var(--swe-shadow) !important;
}

body .swc-hub .swc-grid {
    gap: 20px !important;
    margin-top: 26px !important;
}

body .swc-hub .swc-card {
    min-height: 280px;
    padding: 30px !important;
    border: 1px solid var(--swe-line) !important;
    border-radius: var(--swe-radius) !important;
    background: var(--swe-surface) !important;
    color: var(--swe-text) !important;
    box-shadow: var(--swe-shadow) !important;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body .swc-hub .swc-card:hover {
    transform: translateY(-3px) !important;
    border-color: color-mix(in srgb, var(--swe-blue) 60%, var(--swe-line)) !important;
    background: var(--swe-raised) !important;
    box-shadow: var(--swe-shadow-hover) !important;
}

body .swc-hub h1,
body .swc-hub h2,
body .swc-hub h3,
body .swc-hub .swc-card h2 {
    color: var(--swe-text) !important;
}

body .swc-hub p,
body .swc-hub .swc-card p {
    color: var(--swe-muted) !important;
}

body .swc-hub a,
body .swc-hub .swc-meta {
    color: var(--swe-blue-strong) !important;
}

html[data-theme="dark"] body .swc-hub .swc-hero {
    background: linear-gradient(135deg, #14233d, #1b2b4a 58%, #30233f) !important;
}

/* Career Start hubs and lessons. */
body .swcareer {
    --ink: var(--swe-text) !important;
    --muted: var(--swe-muted) !important;
    --line: var(--swe-line) !important;
    --paper: var(--swe-surface) !important;
    --soft: var(--swe-raised) !important;
    --blue: var(--swe-blue-strong) !important;
    --violet: var(--swe-violet) !important;
    max-width: 1160px !important;
    padding: clamp(24px, 5vw, 54px) 20px 78px !important;
    color: var(--swe-text) !important;
}

body .swcareer .hero {
    padding: clamp(28px, 5vw, 54px) !important;
    border-color: var(--swe-line) !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #edf3ff, #f4efff 62%, #fff2ee) !important;
    box-shadow: var(--swe-shadow) !important;
}

body .swcareer h1,
body .swcareer h2,
body .swcareer h3,
body .swcareer .lesson strong,
body .swcareer .road b {
    color: var(--swe-text) !important;
}

body .swcareer p,
body .swcareer li,
body .swcareer .lead,
body .swcareer .lesson span,
body .swcareer .sources li {
    color: var(--swe-muted) !important;
}

body .swcareer a,
body .swcareer .lesson .go,
body .swcareer .eyebrow {
    color: var(--swe-blue-strong) !important;
}

body .swcareer .card,
body .swcareer .lesson,
body .swcareer .steps li,
body .swcareer .road,
body .swcareer table {
    border-color: var(--swe-line) !important;
    background: var(--swe-surface) !important;
    color: var(--swe-text) !important;
    box-shadow: var(--swe-shadow) !important;
}

body .swcareer .card,
body .swcareer .lesson,
body .swcareer .steps li,
body .swcareer .road {
    border-radius: 18px !important;
}

body .swcareer .lesson:hover,
body .swcareer .road:hover {
    border-color: var(--swe-blue) !important;
    background: var(--swe-raised) !important;
    box-shadow: var(--swe-shadow-hover) !important;
}

body .swcareer .chip,
body .swcareer .badge {
    border-color: var(--swe-line) !important;
    background: var(--swe-raised) !important;
    color: var(--swe-blue-strong) !important;
}

body .swcareer .callout {
    border-color: var(--swe-blue) !important;
    background: var(--swe-soft) !important;
    color: var(--swe-text) !important;
}

body .swcareer .callout.practice {
    border-color: #eb675d !important;
    background: #fff0ed !important;
}

body .swcareer .callout.success {
    border-color: var(--swe-green) !important;
    background: #eaf9f3 !important;
}

body .swcareer .template,
body .swcareer .message,
body .swcareer .funnel > div {
    border-color: var(--swe-line) !important;
    background: var(--swe-raised) !important;
    color: var(--swe-text) !important;
}

body .swcareer .template code {
    color: var(--swe-text) !important;
}

body .swcareer th {
    border-color: var(--swe-line) !important;
    background: var(--swe-raised) !important;
    color: var(--swe-text) !important;
}

body .swcareer td {
    border-color: var(--swe-line) !important;
    color: var(--swe-muted) !important;
}

body .swcareer .road.active {
    border-color: var(--swe-blue) !important;
    background: var(--swe-soft) !important;
}

body .swcareer .btn {
    background: linear-gradient(135deg, #2563eb, #6d3be8) !important;
    color: #ffffff !important;
}

body .swcareer .btn.secondary {
    border-color: var(--swe-blue) !important;
    background: transparent !important;
    color: var(--swe-blue-strong) !important;
}

html[data-theme="dark"] body .swcareer .hero {
    background: linear-gradient(135deg, #14233b, #192b49 62%, #32243f) !important;
}

html[data-theme="dark"] body .swcareer .callout.practice {
    background: #3b2428 !important;
}

html[data-theme="dark"] body .swcareer .callout.success {
    background: #15372f !important;
}

html[data-theme="dark"] body .swcareer .logo {
    filter: none !important;
}

/* Long-form Data, Power BI and MikroTik course pages. */
body .sw-post {
    --sw-navy: var(--swe-text) !important;
    --sw-navy-2: var(--swe-text) !important;
    --sw-blue: var(--swe-blue-strong) !important;
    --sw-violet: var(--swe-violet) !important;
    --sw-bg: var(--swe-bg) !important;
    --sw-card: var(--swe-surface) !important;
    --sw-ink: var(--swe-text) !important;
    --sw-muted: var(--swe-muted) !important;
    --sw-line: var(--swe-line) !important;
    --sw-soft: var(--swe-soft) !important;
    --shadow: var(--swe-shadow) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: clamp(20px, 4vw, 34px) !important;
    border: 1px solid var(--swe-line) !important;
    border-radius: 24px !important;
    background: var(--swe-bg) !important;
    color: var(--swe-text) !important;
}

body .sw-post .sw-hero {
    padding: clamp(18px, 4vw, 38px) clamp(6px, 2vw, 18px) !important;
}

body .sw-post .sw-h1,
body .sw-post .sw-body h2,
body .sw-post h3,
body .sw-post strong,
body .sw-post .sw-acc-head,
body .sw-post .sw-course-list a,
body .sw-post .sw-lesson-nav .ttl {
    color: var(--swe-text) !important;
}

body .sw-post,
body .sw-post p,
body .sw-post li,
body .sw-post .sw-lead,
body .sw-post .sw-meta,
body .sw-post .sw-stat-label,
body .sw-post .sw-acc-body p,
body .sw-post .sw-lesson-nav .dir {
    color: var(--swe-muted) !important;
}

body .sw-post a,
body .sw-post .sw-back,
body .sw-post .sw-eyebrow {
    color: var(--swe-blue-strong) !important;
}

body .sw-post .sw-toc,
body .sw-post .sw-body section,
body .sw-post .sw-acc,
body .sw-post .sw-lesson-nav a {
    border-color: var(--swe-line) !important;
    background: var(--swe-surface) !important;
    color: var(--swe-text) !important;
    box-shadow: var(--swe-shadow) !important;
}

body .sw-post .sw-toc a {
    color: var(--swe-text) !important;
}

body .sw-post .sw-toc a:hover,
body .sw-post .sw-toc a.is-active {
    border-left-color: var(--swe-blue) !important;
    background: var(--swe-soft) !important;
    color: var(--swe-text) !important;
}

body .sw-post .sw-stat,
body .sw-post .sw-course-list li,
body .sw-post .sw-table-wrap,
body .sw-post .sw-compare > div {
    border-color: var(--swe-line) !important;
    background: var(--swe-raised) !important;
    color: var(--swe-text) !important;
}

body .sw-post .sw-callout,
body .sw-post .sw-course-list li.is-current,
body .sw-post .sw-inline {
    border-color: var(--swe-blue) !important;
    background: var(--swe-soft) !important;
    color: var(--swe-text) !important;
}

body .sw-post .sw-cover {
    border-color: var(--swe-line) !important;
    background: var(--swe-raised) !important;
    box-shadow: var(--swe-shadow) !important;
}

body .sw-post .sw-code,
body .sw-post pre {
    border-color: #30486f !important;
    background: #0b1730 !important;
    color: #edf3ff !important;
}

body .sw-post .sw-cta {
    background: linear-gradient(120deg, #0b1e4d, #2458bc 58%, #6d3be8) !important;
    color: #ffffff !important;
}

body .sw-post .sw-cta p,
body .sw-post .sw-cta strong,
body .sw-post .sw-cta-title,
body .sw-post .sw-cta-sub {
    color: #ffffff !important;
}

/* Quiz, progress dashboard and certificate form. */
body .swc-box {
    --swc-navy: var(--swe-text) !important;
    --swc-blue: var(--swe-blue) !important;
    --swc-violet: var(--swe-violet) !important;
    --swc-muted: var(--swe-muted) !important;
    --swc-soft: var(--swe-raised) !important;
    --swc-line: var(--swe-line) !important;
    --swc-ok: var(--swe-green) !important;
    --swc-bad: var(--swe-red) !important;
    max-width: 1120px !important;
    border-color: var(--swe-line) !important;
    background: var(--swe-surface) !important;
    color: var(--swe-text) !important;
    box-shadow: var(--swe-shadow) !important;
}

body .swc-box h2,
body .swc-box h3,
body .swc-box legend,
body .swc-box strong {
    color: var(--swe-text) !important;
}

body .swc-box p,
body .swc-box label,
body .swc-box .swc-explanation,
body .swc-box .swc-progress-card span,
body .swc-box .swc-progress-card em {
    color: var(--swe-muted) !important;
}

body .swc-box .swc-question,
body .swc-box .swc-option,
body .swc-box .swc-progress-card {
    border-color: var(--swe-line) !important;
    background: var(--swe-raised) !important;
    color: var(--swe-text) !important;
}

body .swc-box .swc-option:hover,
body .swc-box .swc-option:focus-within,
body .swc-box .swc-progress-card:hover,
body .swc-box .swc-progress-card:focus-visible {
    border-color: var(--swe-blue) !important;
    background: var(--swe-soft) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--swe-blue) 18%, transparent) !important;
}

body .swc-box .swc-person,
body .swc-box .swc-status {
    background: var(--swe-raised) !important;
    color: var(--swe-muted) !important;
}

body .swc-box .swc-person input[type="text"],
body .swc-box .swc-person input[type="email"] {
    border-color: var(--swe-line) !important;
    background: var(--swe-bg) !important;
    color: var(--swe-text) !important;
    -webkit-text-fill-color: var(--swe-text) !important;
}

body .swc-box .swc-status-ok,
body .swc-box .swc-result .ok,
body .swc-box .swc-progress-card.is-done,
body .swc-box .swc-certificate-ready {
    border-color: color-mix(in srgb, var(--swe-green) 55%, var(--swe-line)) !important;
    background: color-mix(in srgb, var(--swe-green) 13%, var(--swe-surface)) !important;
    color: var(--swe-green) !important;
}

body .swc-box .swc-result .bad {
    background: color-mix(in srgb, var(--swe-red) 12%, var(--swe-surface)) !important;
    color: var(--swe-red) !important;
}

body .swc-box .swc-button {
    background: linear-gradient(135deg, #2563eb, #5d45df) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body .swc-box .swc-link,
body .swc-box .swc-kicker {
    color: var(--swe-blue-strong) !important;
}

body .swc-hub a:focus-visible,
body .swcareer a:focus-visible,
body .swcareer button:focus-visible,
body .sw-post a:focus-visible,
body .sw-post button:focus-visible,
body .swc-box a:focus-visible,
body .swc-box button:focus-visible,
body .swc-box input:focus-visible {
    outline: 3px solid var(--swe-blue) !important;
    outline-offset: 3px !important;
}

@media (max-width: 760px) {
    body .swc-hub,
    body .swcareer {
        padding-inline: 14px !important;
    }

    body .swc-hub .swc-hero,
    body .swcareer .hero {
        border-radius: 22px !important;
    }

    body .swc-hub .swc-card {
        min-height: 0;
        padding: 23px !important;
    }

    body .sw-post {
        padding: 14px !important;
        border-radius: 18px !important;
    }

    body .sw-post .sw-body section {
        padding: 21px 18px !important;
    }

    body .swcareer table,
    body .sw-post table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
    }

    body .swc-box {
        margin: 24px 0 !important;
        padding: 20px 16px !important;
        border-radius: 17px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body .swc-hub *,
    body .swcareer *,
    body .sw-post *,
    body .swc-box * {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}