/* ============================================
   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:220px;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}
/* Identity header inside the account dropdown: which email + which tier */
.cn-account-id{padding:.25rem 1.25rem .65rem;display:flex;flex-direction:column;gap:.4rem}
.cn-account-email{font-family:'Karla',sans-serif;font-weight:700;font-size:.8125rem;color:#000;line-height:1.3;word-break:break-all}
.cn-account-tier{align-self:flex-start;font-family:'Karla',sans-serif;font-weight:700;font-size:.625rem;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .55rem;border-radius:999px;line-height:1;background:#9da5fe;color:#000}
.cn-account-tier.tier-paid{background:#ff667a;color:#fff}

/* 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:#fff;color:#000;border:4px solid #000
}
.cn-tier-btn.upgrade:hover{background:#FDF8F5;border-color:#000}


/* 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}

/* Topbar: Search */
.cn-search-wrap{
  position:relative;
  flex:1 1 auto;max-width:480px;
  margin:0 1.5rem;
  font-family:'Karla',sans-serif
}
.cn-search-input-wrap{position:relative;display:flex;align-items:center}
.cn-search-icon{position:absolute;left:.9rem;color:#000;opacity:.45;pointer-events:none}
.cn-search-input{
  width:100%;box-sizing:border-box;
  padding:.65rem 1rem .65rem 2.3rem;
  font-family:'Karla',sans-serif;font-size:.95rem;font-weight:300;color:#000;
  background:#FDF8F5;border:none;border-radius:999px;outline:none;
  transition:background .15s, box-shadow .15s
}
.cn-search-input::placeholder{color:#000;opacity:.55}
.cn-search-input:focus{background:#fff;box-shadow:0 0 0 2px #595ebb33}
.cn-search-input::-webkit-search-cancel-button{appearance:none}

.cn-search-results{
  position:absolute;top:calc(100% + .35rem);left:0;right:0;
  background:#fff;border-radius:16px;
  box-shadow:0 12px 32px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
  max-height:calc(100vh - 100px);overflow-y:auto;
  z-index:300;padding:.5rem
}
.cn-search-empty{padding:.85rem;font-size:.85rem;color:#000;opacity:.6}
.cn-search-result{
  display:block;text-decoration:none;color:#000;
  padding:.7rem .85rem;border-radius:12px;
  transition:background .12s
}
.cn-search-result:hover{background:#FDF8F5}
.cn-search-result + .cn-search-result{margin-top:.15rem}
.cn-sr-meta{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#595ebb;margin-bottom:.2rem}
.cn-sr-title{font-size:.92rem;font-weight:700;line-height:1.3;margin-bottom:.25rem}
.cn-sr-snippet{font-size:.8rem;font-weight:300;line-height:1.45;color:#000;opacity:.75}
.cn-sr-snippet mark{background:#fe957c55;color:inherit;padding:0 3px;border-radius:3px}

@media (max-width:760px){
  .cn-search-wrap{margin:0 .5rem;max-width:none}
  .cn-search-input{font-size:.85rem;padding:.55rem .75rem .55rem 2rem}
  .cn-search-icon{left:.7rem}
}

/* 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}
.cn-pill-members{margin-left:auto;background:#ff667a;color:#fff;font-family:'Karla',sans-serif;font-weight:700;font-size:.625rem;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .55rem;border-radius:999px;line-height:1}
.cn-pill-new{margin-left:auto;background:#fe957c;color:#000;font-family:'Karla',sans-serif;font-weight:700;font-size:.625rem;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .55rem;border-radius:999px;line-height:1}

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

/* Sidebar: Part texture banner (tab shape: rounded top, flat bottom) */
.cn-part-banner{
  height:48px;margin:.75rem .75rem 0;
  border-radius:12px 12px 0 0;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:.8125rem;font-weight:700;
  color:#000 !important;
  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)}

/* Free tag pill */
.cn-free-tag{
  font-family:'Karla',sans-serif;font-size:.5625rem;font-weight:700;
  padding:.125rem .5rem;border-radius:999px;
  background:#9da5fe;color:#fff;text-transform:uppercase;letter-spacing:.05em
}

/* 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:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:#FDF8F5;transition:background .2s;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:'Karla',sans-serif;font-size:.5625rem;font-weight:700;color:#fff
}
.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)}

/* Taster tier: locked modules + locked parts + upgrade CTA */
.cn-module-locked .cn-module-header{opacity:.5}
.cn-module-locked .cn-module-progress,
.cn-module-locked .cn-module-chevron{display:none}
.cn-module-locked .cn-lessons{max-height:0 !important}
.cn-lock-glyph{flex-shrink:0;opacity:.55;margin-left:auto}
.cn-part-locked{opacity:.6}
.cn-pill-lock{background:#9da5fe;color:#000;font-family:'Karla',sans-serif;font-weight:700;font-size:.625rem;text-transform:uppercase;letter-spacing:.05em;padding:.2rem .55rem;border-radius:999px;line-height:1;margin-left:.5rem}
.cn-taster-upgrade{display:block;margin:.5rem 1.25rem .75rem;padding:.65rem .9rem;background:#9da5fe;color:#000;font-family:'Karla',sans-serif;font-weight:700;font-size:.75rem;line-height:1.3;text-align:center;border-radius:999px;text-decoration:none}
.cn-taster-upgrade:hover{opacity:.85}

/* 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:inline-flex;align-items:center;gap:.5rem;
  padding:.25rem .75rem .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;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:#fff}

.cn-lesson-dot{
  width:20px;height:20px;border-radius:50%;flex-shrink:0;
  background:#FDF8F5;border:none;
  display:flex;align-items:center;justify-content:center;
  font-family:'Karla',sans-serif;font-size:.5625rem;font-weight:700;
  color:#000;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:#fff}
.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:#000
}

.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}
}