/* =========================================================
    KDMC — BASE THEME
    ========================================================= */
.kdmc-style .fr-view em { color: inherit; }

.kdmc-style { background: linear-gradient(0deg, #000000 0%, #270A56 100%); }

.kdmc-style .course-player,
.kdmc-style .course-player__course-navigation,
.kdmc-style .course-player__content { background-color: transparent !important; }

.kdmc-style .course-player__left-drawer {
  background: linear-gradient(0deg, #000000 0%, #270A56 100%);
  font-size: 0.95rem;
}

.kdmc-style .course-player__top-bar {
  background-color: #270A56 !important;
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.9);
  position: relative; /* ensures shadow renders correctly */
  z-index: 10;
}
.kdmc-style .course-player__branding-badge { display: none; }
.kdmc-style .course-player__user-search { display: none; }

/* Progress bar + rings (Thinkific hashed classes) */
.kdmc-style div[class*="_course-progress__progress-bar__inner"] { background-color: #D35B4B !important; }
.kdmc-style span[class*="_progress-ring__ring"] { background-color: #D35B4B; }
.kdmc-style span[class*="_progress-ring__ring-inset"] { background-color: #A9A9A9; }

/* =========================================================
    KDMC — CHAPTER NAV (keep mostly as-is)
    ========================================================= */
.kdmc-style .course-player__chapter-item__container {
  border-bottom-color: #a9a9a9;
  padding-top: 15px;
  padding-bottom: 15px;
  line-height: 1.5;
}

.kdmc-style .ui-state-active .course-player__chapter-item__container,
.kdmc-style .course-player__chapter-item__header:hover .course-player__chapter-item__container {
  border-bottom-color: #ffffff;
}

.kdmc-style .course-player__chapter-item__header {
  padding-top: 10px;
  padding-bottom: 10px;
}

.kdmc-style .course-player__chapter-item {
  border-bottom: 2px solid rgba(255,255,255,0.08);
  padding-bottom: 8px;
}

/* Nav text colors */
.kdmc-style .course-player__chapter-item__completion,
.kdmc-style h3[class*="_chapter-item__title"],
.kdmc-style h2[class*="_chapter-item__title"],
.kdmc-style a[class*="_content-item__link"],
.kdmc-style a[class*="_content-item__link"]:hover,
.kdmc-style a[class*="_content-item__link"]:active,
.kdmc-style a[class*="_content-item__link"]:focus { color: #ffffff; }

.kdmc-style .content-item__details,
.kdmc-style .content-item__details i,
.kdmc-style .active .content-item__details { color: #faf5e9; }

/* =========================================================
    KDMC — MAIN CONTENT AREA
    ========================================================= */
.kdmc-style .course-player #content-inner {
  background: #faf5e9;
  padding: 48px 32px;
}

.kdmc-style #content-inner .fr-view {
  max-width: 760px;
  margin: 0 auto;
}

.kdmc-style #content-inner .fr-view h1,
.kdmc-style #content-inner .fr-view h2,
.kdmc-style #content-inner .fr-view h3,
.kdmc-style #content-inner .fr-view h4 {
  color: #5b4a66;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.kdmc-style #content-inner .fr-view p,
.kdmc-style #content-inner .fr-view ul,
.kdmc-style #content-inner .fr-view ol {
  color: #101010;
  line-height: 1.65;
  margin-bottom: 1.2em;
}

.kdmc-style #course-player-footer {
  background: linear-gradient(0deg, #f6f0f5 0%, #faf5e9 100%);
}

/* Dashboard button */
.kdmc-style .top-bar__dashboard-link a,
.kdmc-style .course-progress__dashboard-link {
  border: 0;
  font-size: 0.75rem;
  line-height: 1rem;
  text-transform: uppercase;
  font-weight: 600;
  height: 32px;
  padding: 0 16px;
  background-color: #270A56;
  border-radius: 4px;
  color: #faf5e9 !important;
}
.kdmc-style .course-progress__dashboard-link { height: auto; padding: 6px 16px; }
.kdmc-style .top-bar__dashboard-link i { color: #faf5e9 !important; }

/* =========================================================
    KDMC — LESSON NAV
    ========================================================= */

/* 1) Kill leftover timeline/connector visuals in left drawer */
.kdmc-style .course-player__left-drawer svg,
.kdmc-style .course-player__left-drawer [class*="progress-line"],
.kdmc-style .course-player__left-drawer [class*="timeline"] {
  display: none !important;
}

/* 2) LI spacing only */
.kdmc-style li.course-player__content-item {
  margin-bottom: 10px;
  padding: 0;
  background: transparent;
  border: 0;
  padding-left: 12px;
  overflow: hidden !important; /* clip connector lines at list item boundary */
}

/* 3) Card layout */
.kdmc-style li.course-player__content-item > a {
  display: grid !important;
  grid-template-columns: 30px 1fr !important;
  column-gap: 20px !important;
  align-items: center !important;

  width: 90%;

  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 12px 14px 18px 14px; /* extra 6px bottom creates gap so connector line doesn't touch card edge */

  overflow: hidden !important; /* clip connector lines that extend outside card */
  transition: all 0.3s ease;
}

/* 4) ICON COLUMN — REAL wrapper (stretch to fill card height, center icon vertically) */
.kdmc-style li.course-player__content-item > a > div[class*="content-item_progress"] {
  grid-column: 1 !important;
  justify-self: start !important;
  align-self: stretch !important; /* fill full row height so icon can center within it */

  width: 30px !important;
  min-width: 30px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  margin: 0 !important;
  padding: 0 0 12px 0 !important; /* bottom padding shortens the connector line within the card */
  position: relative !important;
  overflow: hidden !important; /* clip vertical connector lines so they don't extend outside the card */
  transform: none !important;
  line-height: 0 !important;
}

/* Connector line is on div's ::after — clip bottom 6px so line doesn't touch card edge */
.kdmc-style li.course-player__content-item > a > div[class*="content-item_progress"]::before,
.kdmc-style li.course-player__content-item > a > div[class*="content-item__progress"]::before,
.kdmc-style li.course-player__content-item > a > div[class*="content-item_progress"]::after,
.kdmc-style li.course-player__content-item > a > div[class*="content-item__progress"]::after {
  display: block !important;
  clip-path: inset(0 0 6px 0) !important; /* hide bottom 6px = gap above card edge */
}

/* Normalize both icon types (checkmark + circles) */
.kdmc-style li.course-player__content-item > a > div[class*="content-item_progress"] > i {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;

  width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;

  position: relative !important;
  top: 0 !important;
  transform: none !important;
}

/* Checkmark glyph sits slightly high; nudge it down */
.kdmc-style li.course-player__content-item > a > div[class*="content-item_progress"] > i.toga-icon-checkmark {
  top: 0px !important;
}

/* Connector line is drawn by the icon's ::after — shorten it so it doesn't reach the card edge */
.kdmc-style li.course-player__content-item > a > div[class*="content-item_progress"] > i::after,
.kdmc-style li.course-player__content-item > a > div[class*="content-item__progress"] > i::after {
  bottom: 20px !important; /* create gap at bottom, matching the ~3–5px gap under the icon */
}

/* 5) TEXT COLUMN */
.kdmc-style li.course-player__content-item > a .content-item__title,
.kdmc-style li.course-player__content-item > a [class*="_content-item__title_"],
.kdmc-style li.course-player__content-item > a .content-item__details,
.kdmc-style li.course-player__content-item > a [class*="_content-item__details_"] {
  grid-column: 2 !important;
  min-width: 0 !important;
}

/* 6) Hover accent */
.kdmc-style li.course-player__content-item > a:hover {
  background: rgba(255,255,255,0.07);
  transform: translateY(-2px);
  box-shadow: inset 3px 0 0 #630DD0, 0 8px 18px rgba(0,0,0,0.25);
}

/* 7) Active accent (includes aria-current="step") */
.kdmc-style li.course-player__content-item > a[aria-current="page"],
.kdmc-style li.course-player__content-item > a[aria-current="true"],
.kdmc-style li.course-player__content-item > a[aria-current="location"],
.kdmc-style li.course-player__content-item > a[aria-current="step"] {
  background: rgba(99,13,208,0.30);
  box-shadow: inset 3px 0 0 #630DD0;
}

/* =========================================================
    DEPLOY ON FIREBASE
    cd ~/kata-dojo-static
    firebase deploy --only hosting
    ========================================================= */