/* Koenig Mind Map — course-page section (above the Learning Map).
   Port of koenig-website-redesign/public/course-roadmap.html (Next.js /mind-map, which iframes that file).
   Same colours, sizes, weights and behaviour; every rule is scoped under .kmm and every id is prefixed "kmm-"
   so the host page (Bootstrap, vc-* styles) and the widget cannot style each other.
   Markup: Views/Course/_MindMap.cshtml   Script: assets/newjs/mind-map.js   Data: assets/newjs/learning-path-data.js */

.kmm{box-sizing:border-box;color:#1C2B33;text-align:left;font-weight:400;line-height:normal;letter-spacing:normal;text-transform:none}
.kmm *,.kmm *::before,.kmm *::after{box-sizing:border-box}
.kmm *:not(svg):not(path){margin:0;padding:0}
/* GT WALSHEIM PRO everywhere */
.kmm,.kmm *,.kmm input,.kmm button{font-family:'GTWalsheimPro','GT Walsheim Pro',system-ui,sans-serif !important}

.kmm .subtitle{text-align:center;color:#55626A;font-size:15px;line-height:1.4;margin:0 auto 20px;max-width:560px}

/* SEARCH */
.kmm .search-row{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;justify-content:center}
.kmm .search-row input{flex:1;min-width:280px;max-width:900px;height:52px;padding:0 24px;border:2px solid #0694D1;border-radius:8px;background:#fff;font-size:16px;outline:none;transition:border-color .2s;color:#1C2B33;box-shadow:none}
.kmm .search-row input:focus{border-color:#076D9D;box-shadow:0 0 0 3px rgba(6,148,209,.15)}
.kmm .search-row input::placeholder{color:#8899AA}
.kmm .search-box{position:relative;flex:1;min-width:280px;max-width:900px;display:flex;align-items:center}
.kmm .search-box input{width:100%;min-width:0;padding-right:96px}
.kmm .q-btn{position:absolute;top:50%;transform:translateY(-50%);border:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.kmm .q-go{right:6px;width:40px;height:40px;border-radius:50%;background:#0694D1;color:#fff}
.kmm .q-go:hover{background:#076D9D}
.kmm .q-clear{right:52px;width:30px;height:30px;border-radius:50%;background:#EEF2F4;color:#55626A;font-size:20px;line-height:1;display:none}
.kmm .q-clear:hover{background:#dde4e8}
.kmm .search-box.has-text .q-clear{display:flex}

/* SECTION LABELS */
.kmm .section-label{position:absolute;display:flex;align-items:center;justify-content:center;border-radius:20px;font-size:13px;font-weight:700;color:#fff;width:148px;height:36px;z-index:2}

/* CARDS */
.kmm .course-card{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border-radius:16px;border:2.5px solid;padding:18px 16px;transition:opacity .25s,box-shadow .25s,transform .2s;cursor:default;gap:8px;overflow:visible}
.kmm .cname{font-size:13px;font-weight:700;line-height:1.3;max-width:190px}
.kmm .clevel{font-size:11px;color:#55626A}
.kmm .oem-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:10px;border:1.5px solid;font-size:11px;font-weight:700;cursor:pointer;background:#fff;transition:transform .12s,opacity .12s;white-space:nowrap}
.kmm .oem-badge:hover{transform:scale(1.08);opacity:.85}

/* overlay badges */
.kmm .badge-popular{position:absolute;top:-12px;left:10px;display:inline-flex;align-items:center;gap:4px;background:#F7F3E8;color:#8A6D1D;border:1px solid #E3D5AC;font-size:10px;font-weight:700;padding:2px 9px;border-radius:10px;letter-spacing:.04em;white-space:nowrap;z-index:5;pointer-events:none}
.kmm .badge-this{position:absolute;top:-12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;gap:4px;background:#0694D1;color:#fff;font-size:10px;font-weight:700;padding:2px 9px;border-radius:10px;letter-spacing:.04em;white-space:nowrap;z-index:5;pointer-events:none}
.kmm .badge-new{position:absolute;top:-12px;right:10px;display:inline-flex;align-items:center;gap:4px;background:#E6F7F1;color:#0E7C59;border:1px solid #A8E3CB;font-size:10px;font-weight:700;padding:2px 9px;border-radius:10px;letter-spacing:.04em;z-index:5;pointer-events:none}

/* card colours: white cards with a clean coloured border */
.kmm .card-before{background:#fff;border-color:#0694D1}
.kmm .card-after{background:#fff;border-color:#1E7F6B}
.kmm .card-bb{background:#fff;border-color:#0694D1;border-style:dashed;opacity:.85}
.kmm .card-aa{background:#fff;border-color:#1E7F6B;border-style:dashed;opacity:.85}
/* very mild per-level tint so Beginner/Intermediate/Advanced read apart at a glance within a column */
.kmm .course-card[data-level="Beginner"]{background:#F8FBFE}
.kmm .course-card[data-level="Intermediate"]{background:#FBFAF4}
.kmm .course-card[data-level="Advanced"]{background:#FBF6F6}

/* hover states */
.kmm .card-before.card-hovered,.kmm .card-bb.card-hovered{box-shadow:0 10px 24px rgba(6,148,209,.3);transform:scale(1.04)}
.kmm .card-after.card-hovered,.kmm .card-aa.card-hovered{box-shadow:0 10px 24px rgba(30,127,107,.3);transform:scale(1.04)}
.kmm .card-before.card-next,.kmm .card-bb.card-next{box-shadow:0 10px 26px rgba(6,148,209,.35);transform:scale(1.04)}
.kmm .card-after.card-next,.kmm .card-aa.card-next{box-shadow:0 10px 26px rgba(30,127,107,.35);transform:scale(1.04)}

/* MAP: Before | This course | After, built from the learning path data */
.kmm .map-wrap{overflow-x:auto;padding:8px 0 16px}
@media (min-width:969px){.kmm .map-wrap{overflow-x:clip}}
.kmm .map{position:relative;display:flex;justify-content:center;align-items:stretch;gap:80px;width:max-content;min-width:100%;margin:0 auto;padding:0 8px}
.kmm .col{flex:none;max-width:none;position:relative;display:flex;flex-direction:column;align-items:center;gap:14px}
.kmm .col-before{width:262px}.kmm .col-mid{width:230px}.kmm .col-after{width:252px}
.kmm .col::before{content:'';position:absolute;inset:-14px -16px;border-radius:26px;z-index:-1}
.kmm .col-before::before{background:linear-gradient(180deg,#EDF8FF,rgba(237,248,255,.25))}
.kmm .col-mid::before{background:linear-gradient(180deg,#F2F3F1,rgba(242,243,241,.25))}
.kmm .col-after::before{background:linear-gradient(180deg,#EAF8F3,rgba(234,248,243,.25))}
.kmm .col .section-label{position:static;width:auto;min-width:160px;padding:0 20px;flex:none}
.kmm .label-before{background:#0694D1}.kmm .label-mid{background:#1C2B33}.kmm .label-after{background:#1E7F6B}
.kmm .side-scroll{width:100%;max-height:720px;overflow-y:auto;overflow-x:hidden;padding:16px 14px 14px;scrollbar-gutter:stable;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:14px;scrollbar-width:thin;scrollbar-color:#9EB3BE transparent}
.kmm .side-scroll::-webkit-scrollbar{width:6px}
.kmm .side-scroll::-webkit-scrollbar-thumb{background:#9EB3BE;border-radius:99px}
.kmm .side-scroll-wrap{position:relative;width:100%}
.kmm .list-more-btn{display:none}
@media (max-width:900px){
  .kmm .list-more-btn{display:block;margin:10px auto 0;height:40px;padding:0 20px;border:1.5px solid #0694D1;border-radius:20px;background:#fff;color:#076D9D;font-size:13px;font-weight:700;cursor:pointer}
  .kmm .list-more-btn:hover{background:#E4F7FF}
}
.kmm .scroll-fade{position:absolute;left:0;right:0;bottom:0;height:46px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;font-size:11px;font-weight:700;letter-spacing:.03em;color:#076D9D;background:none;pointer-events:none;opacity:0;transition:opacity .2s}
.kmm .scroll-fade.show{opacity:1}
/* the bottom edge fades out with a mask (not a white overlay) so it blends with the column tint on any section background */
.kmm .side-scroll.has-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),transparent);mask-image:linear-gradient(to bottom,#000 calc(100% - 46px),transparent)}
.kmm .mid-body{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:10px}
.kmm .col .course-card{position:relative;flex:none;width:220px;height:136px}
.kmm .cdur{font-size:11px;font-weight:600;color:#55626A}
.kmm .col .oem-badge{max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block}
.kmm .col-mid .course-card{width:230px;height:137px}
.kmm .col-after .course-card{width:210px}
.kmm button.course-card{font:inherit;color:inherit;appearance:none;-webkit-appearance:none;cursor:pointer;text-align:center}
.kmm button.card-before:hover{box-shadow:0 0 0 3px #0694D1;transform:scale(1.02)}
.kmm button.card-after:hover{box-shadow:0 0 0 3px #1E7F6B;transform:scale(1.02)}
.kmm button.course-card:focus-visible{outline:3px solid #1C2B33;outline-offset:3px}
.kmm .course-card.placeholder{cursor:default;color:#55626A}
.kmm .map-msg{text-align:center;font-size:16px;font-weight:600;color:#093148;margin:40px 0}
.kmm .standalone-note{max-width:230px;text-align:center;font-size:13px;line-height:1.4;color:#55626A}
.kmm .map .travel-dot{position:absolute;width:18px;height:18px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25);pointer-events:none;opacity:0;transform:translate(-50%,-50%);z-index:10}
.kmm svg.wires{position:absolute;top:0;left:0;pointer-events:none;overflow:visible}

.kmm .cprereq{font-size:10.5px;line-height:1.3;color:#55626A;text-align:center;display:block}
.kmm .col-mid .course-card{height:auto;min-height:137px}
.kmm .side-note{margin:0;font-size:12px;font-weight:700;color:#1E7F6B;text-align:center}
.kmm .cplist{list-style:none;margin:2px 0 0;padding:0;max-height:92px;overflow-y:auto;display:flex;flex-direction:column;gap:3px;scrollbar-width:thin}
.kmm .cprelink{background:none;border:0;padding:0;font-size:10.5px;line-height:1.3;color:#076D9D;text-decoration:underline;cursor:pointer;text-align:center}
.kmm .cprelink:hover{color:#0694D1}
.kmm .cprelink:focus-visible{outline:2px solid #1C2B33;outline-offset:2px;border-radius:2px}

/* "View course" links: persistent in the current card, floating under a hovered Before/After card */
.kmm .kmm-go{display:inline-flex;align-items:center;justify-content:center;gap:4px;height:22px;padding:0 12px;margin-top:4px;border-radius:11px;background:#10243E;color:#fff !important;font-size:10.5px;font-weight:700;text-decoration:none;white-space:nowrap}
.kmm .kmm-go:hover{background:#076D9D}
.kmm .kmm-hl{position:absolute;display:none;align-items:center;justify-content:center;height:24px;padding:0 12px;border-radius:12px;background:#0694D1;color:#fff !important;font-size:11px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 4px 12px rgba(6,148,209,.35);transform:translate(-50%,-50%);z-index:12}
.kmm .kmm-hl.show{display:inline-flex}
.kmm .kmm-hl:hover{background:#076D9D}
.kmm .kmm-hl--after{background:#1E7F6B;box-shadow:0 4px 12px rgba(30,127,107,.35)}
.kmm .kmm-hl--after:hover{background:#17604F}

/* current ("selected") course card */
.kmm .card-inter{background:#fff;border-color:#10243E;border-width:2.5px;color:#1C2B33;justify-content:center;gap:4px;padding:12px 14px;border-radius:16px;box-shadow:0 4px 20px rgba(16,36,62,.15)}
.kmm .card-inter .cname{flex:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:0;align-items:center;justify-content:center;font-size:12px;font-weight:700;line-height:1.3;max-width:none;color:#10243E;text-align:center}
.kmm .card-inter .clevel{font-size:10px;color:#55626A}
.kmm .card-inter.card-hovered,.kmm .card-inter.card-next{border-width:4.5px;box-shadow:0 12px 28px rgba(16,36,62,.3);transform:scale(1.04)}
/* the current course is the anchor of the map — a mild tinted fill makes it stand out */
.kmm .card-current{background:#D6E2F0;border-color:#10243E;color:#1C2B33;box-shadow:0 10px 28px rgba(16,36,62,.18)}
.kmm .card-current .cname{color:#10243E}
.kmm .card-current .clevel,.kmm .card-current .cdur{color:#55626A}
.kmm .card-current .cprereq{color:#55626A}
.kmm .card-current .cprelink{color:#076D9D}
.kmm .card-current .cprelink:hover{color:#0694D1}

/* long course names: stay inside the card */
.kmm .card-before,.kmm .card-after,.kmm .card-bb,.kmm .card-aa{padding:12px 12px;gap:5px}
.kmm .card-before .cname,.kmm .card-after .cname,.kmm .card-bb .cname{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.3;max-width:100%}
.kmm .card-aa .cname{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.3;max-width:100%}
/* mild This course pill */
.kmm .badge-this{background:#E4F7FF !important;color:#076D9D !important;border:1px solid #0694D1}

/* RESPONSIVE: phones/tablets stack the journey vertically */
@media (max-width:900px){
  .kmm .map-wrap{overflow:visible}
  .kmm .map{flex-direction:column;align-items:center;width:100%;gap:40px;padding:0}
  .kmm .col{width:100%}
  .kmm .col .course-card{width:100%;max-width:360px}
  .kmm .search-row input{min-width:0;width:100%;height:48px;font-size:15px}
  .kmm .side-scroll{max-height:none;overflow-y:visible;padding-bottom:0}
  .kmm .scroll-fade{display:none}
  .kmm .badge-popular,.kmm .badge-new,.kmm .badge-this{position:absolute !important}
  .kmm .card-before.card-hovered,.kmm .card-after.card-hovered,.kmm .card-aa.card-hovered,.kmm .card-before.card-next,.kmm .card-after.card-next,.kmm .card-aa.card-next,.kmm .card-inter.card-hovered{transform:none}
}

/* the Mind Map section (#cert-path) sits on a plain white background: drop the old tree section's pale-blue fill and glow blobs */
section#cert-path.vc-section-alt{background:#fff}
section#cert-path.vc-section-alt::before,section#cert-path.vc-section-alt::after{display:none}
section#cert-path .vc-path-head{margin-bottom:24px}