/* ============================================
   COURSE NAV - Persistent Left Sidebar
   ============================================ */

/* Top Bar */
.course-topbar{
  position:fixed;top:0;left:0;right:0;height:56px;
  background:#fff;border-bottom:none;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5rem;z-index:200;
  font-family:'Karla',sans-serif
}
.course-topbar-left{display:flex;align-items:center;gap:1rem}
.course-topbar .logo{max-width:160px;height:auto;display:block}
.course-topbar-right{display:flex;align-items:center;gap:1rem}

/* Hamburger (mobile only) */
.course-nav-burger{
  display:none;background:transparent;border:none;cursor:pointer;
  width:32px;height:32px;padding:0;
  flex-direction:column;justify-content:center;align-items:center;gap:5px
}
.course-nav-burger span{display:block;width:20px;height:2px;background:#000;transition:all .3s}

/* Account dropdown */
.course-account{position:relative;cursor:pointer}
.course-account-label{
  font-family:'Karla',sans-serif;font-weight:300;font-size:.875rem;
  color:#000;padding:.375rem .75rem;border-radius:999px;
  transition:background .2s;background:transparent;border:none;cursor:pointer
}
.course-account-label:hover{background:#FDF8F5}
.course-account-dropdown{
  display:none;position:absolute;top:100%;right:0;
  background:#fff;border-radius:16px;padding:.75rem 0;
  min-width:180px;z-index:300;margin-top:.25rem
}
.course-account.open .course-account-dropdown{display:block}
.course-account-dropdown a{
  display:block;padding:.5rem 1.25rem;
  font-family:'Karla',sans-serif;font-weight:300;font-size:.8125rem;
  color:#000;text-decoration:none;transition:background .2s
}
.course-account-dropdown a:hover{background:#FDF8F5;opacity:1}

/* Top bar: Tier switcher buttons */
.course-tier-nav{display:flex;align-items:center;gap:.5rem}
.cn-tier-btn{
  display:inline-flex;align-items:center;
  font-family:'Karla',sans-serif;font-weight:700;font-size:.75rem;
  padding:.375rem .875rem;border-radius:999px;
  text-decoration:none;transition:all .2s;cursor:pointer
}
.cn-tier-btn.owned{
  background:#000;color:#fff
}
.cn-tier-btn.owned:hover{opacity:.85}
.cn-tier-btn.upgrade{
  background:transparent;color:#000;border:1.5px solid rgba(0,0,0,0.15)
}
.cn-tier-btn.upgrade:hover{background:#FDF8F5;border-color:rgba(0,0,0,0.3)}


/* Sidebar */
.course-sidebar{
  position:fixed;top:56px;left:0;bottom:0;width:260px;
  background:#fff;border-right:none;
  overflow-y:auto;overflow-x:hidden;z-index:150;
  padding:1rem 0 2rem;
  font-family:'Karla',sans-serif;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none
}
.course-sidebar::-webkit-scrollbar{display:none}

/* Sidebar: Dashboard link */
.cn-dashboard{
  display:flex;align-items:center;gap:.625rem;
  padding:.625rem 1.25rem;margin:0 .5rem .25rem;
  font-family:'Karla',sans-serif;font-size:.875rem;font-weight:300;color:#000;
  text-decoration:none;border-radius:12px;transition:background .2s
}
.cn-dashboard:hover{background:#FDF8F5;opacity:1}
.cn-dashboard.active{background:#FDF8F5;font-weight:700}
.cn-dashboard svg{flex-shrink:0;opacity:.6}

/* Sidebar: Divider (spacing only, no line) */
.cn-divider{height:0;margin:.75rem 1.25rem}

/* Sidebar: Part texture banner */
.cn-part-banner{
  height:48px;margin:.75rem .75rem .25rem;
  border-radius:12px;background-size:cover;background-position:center
}

/* Sidebar: Part header (language-colored text) */
.cn-part-header{
  padding:.5rem 1.25rem;margin-top:.75rem;
  font-family:'Karla',sans-serif;font-size:.75rem;font-weight:700;
  color:#9da5fe;
  cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  user-select:none;transition:opacity .2s
}
.cn-part-header:hover{opacity:.75}
.cn-part-header svg{
  width:12px;height:12px;transition:transform .2s;flex-shrink:0
}
.cn-part-header.collapsed svg{transform:rotate(-90deg)}

/* Sidebar: Part content (collapsible) */
.cn-part-content{overflow:hidden;transition:max-height .3s ease}
.cn-part-content.collapsed{max-height:0 !important;overflow:hidden}

/* Sidebar: Standalone page link (Preparation, The Four Languages) */
.cn-page-link{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem 1.25rem .5rem 1.75rem;
  font-family:'Karla',sans-serif;font-size:.8125rem;font-weight:300;color:#000;
  text-decoration:none;border-radius:0;transition:background .15s
}
.cn-page-link:hover{background:#FDF8F5;opacity:1}
.cn-page-link.active{background:#FDF8F5;font-weight:700}

/* Sidebar: Module group */
.cn-module{margin:0}
.cn-module-header{
  display:flex;align-items:center;gap:.5rem;
  padding:.5rem 1.25rem .5rem 1.75rem;
  font-family:'Karla',sans-serif;font-size:.8125rem;font-weight:300;color:#000;
  cursor:pointer;user-select:none;transition:background .15s;
  text-decoration:none;border:none;background:none;width:100%;text-align:left
}
.cn-module-header:hover{background:#FDF8F5}
.cn-module-header.active{font-weight:700;background:#FDF8F5}

.cn-module-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
  background:rgba(0,0,0,0.15);transition:background .2s
}
.cn-module-header.active .cn-module-dot,
.cn-module-header.has-progress .cn-module-dot{background:var(--cn-color,#9da5fe)}

.cn-module-name{flex:1;line-height:1.35}
.cn-module-progress{
  font-family:'Karla',sans-serif;font-size:.6875rem;font-weight:300;color:#000;opacity:.4;
  flex-shrink:0;white-space:nowrap
}

.cn-module-chevron{
  width:12px;height:12px;flex-shrink:0;transition:transform .2s;opacity:.3
}
.cn-module-header.expanded .cn-module-chevron{transform:rotate(90deg)}

/* Sidebar: Lesson list (inside module) */
.cn-lessons{
  overflow:hidden;max-height:0;transition:max-height .25s ease;
  padding-left:0
}
.cn-lessons.open{max-height:500px}

.cn-lesson{
  display:flex;align-items:center;gap:.5rem;
  padding:.25rem 1.25rem .25rem 2.25rem;
  font-family:'Karla',sans-serif;font-size:.75rem;font-weight:300;color:#000;
  text-decoration:none;cursor:pointer;transition:all .15s;
  border:none;background:none;width:100%;text-align:left;
  border-radius:999px;margin:.125rem .5rem .125rem 0
}
.cn-lesson:hover{background:#FDF8F5;opacity:1}
.cn-lesson.active{background:#000;color:#fff;font-weight:700}
.cn-lesson.active .cn-lesson-dot{background:#fff;color:#000;border-color:rgba(255,255,255,0.3)}

.cn-lesson-dot{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:rgba(0,0,0,0.06);border:1.5px solid rgba(0,0,0,0.12);
  display:flex;align-items:center;justify-content:center;
  font-family:'Karla',sans-serif;font-size:.5625rem;font-weight:700;
  color:rgba(0,0,0,0.4);transition:all .2s
}
.cn-lesson.completed .cn-lesson-dot{
  background:var(--cn-color,#9da5fe);color:#fff;border-color:var(--cn-color,#9da5fe)
}

.cn-lesson-name{flex:1;line-height:1.35}

.cn-lesson-check{
  width:12px;height:12px;flex-shrink:0;opacity:0;transition:opacity .2s;
  color:var(--cn-color,#9da5fe)
}
.cn-lesson.active .cn-lesson-check{color:rgba(255,255,255,0.6)}
.cn-lesson.completed .cn-lesson-check{opacity:1}

/* Sidebar: Resources section */
.cn-section-label{
  padding:.5rem 1.25rem;margin-top:.75rem;
  font-family:'Karla',sans-serif;font-size:.75rem;font-weight:700;
  color:#fe957c
}

.cn-resource-link{
  display:flex;align-items:center;gap:.5rem;
  padding:.375rem 1.25rem .375rem 1.75rem;
  font-family:'Karla',sans-serif;font-size:.8125rem;font-weight:300;color:#000;
  text-decoration:none;transition:background .15s
}
.cn-resource-link:hover{background:#FDF8F5;opacity:1}
.cn-resource-link.active{background:#FDF8F5;font-weight:700}
.cn-resource-link svg{flex-shrink:0;opacity:.5;width:14px;height:14px}

/* Main content area */
.course-main{
  margin-left:260px;padding-top:56px;min-height:100vh
}

/* Mobile overlay */
.course-nav-overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,0.3);
  z-index:140;opacity:0;transition:opacity .3s
}
.course-nav-overlay.visible{display:block;opacity:1}

/* ============================================
   RESPONSIVE (< 860px)
   ============================================ */
@media(max-width:860px){
  .course-nav-burger{display:flex}
  .course-tier-nav{display:none}

  .course-sidebar{
    transform:translateX(-260px);
    transition:transform .3s ease;
    z-index:160
  }
  .course-sidebar.open{transform:translateX(0)}

  .course-main{margin-left:0}
}