/* KCM Account — polish (owner, 2026-09-28: "Any areas that have the layout like the old coaches corner, refine and give a
   clean look that matches … Don't change what is fine"). Only the areas that still had LearnDash's or the theme's own look:
   the reset-password form, the checkout, the not-found page, the progress box on a course page, and the top and bottom
   of a lesson page. The site's Additional CSS forces button / heading / link styles, so the rules here carry !important
   where they have to win. */

/* ── 1. Reset password (page 28) and checkout (page 119): LearnDash's forms inside the page card ───────────────────── */
.single-content:has(.ld-registration__outer-wrapper),
.entry-content:has(.ld-registration__outer-wrapper) { padding: clamp(22px, 4.4vw, 48px) !important; }
.ld-registration__outer-wrapper, .ld-registration__outer-wrapper * { box-sizing: border-box; word-break: normal; hyphens: none; }
.learndash-wrapper.ld-registration__outer-wrapper { font-family: "DM Sans", system-ui, sans-serif; color: #4A3F30; }
.ld-registration__outer-wrapper .ld-registration__wrapper { max-width: 460px; margin: 0 auto; padding: 0; border: 0; background: none; box-shadow: none; }
.ld-registration__outer-wrapper .ld-registration__wrapper--has-order { max-width: 540px; }
.ld-registration__outer-wrapper .ld-registration__form { padding: 0; margin: 0; border: 0; background: none; }

.ld-registration__outer-wrapper .ld-registration__heading,
.ld-registration__outer-wrapper .ld-registration-order__heading {
  font: 400 30px/1.2 "Playfair Display", Georgia, serif !important; color: #1B2A4A !important; text-transform: none !important;
  letter-spacing: 0 !important; margin: 0 0 8px !important; padding: 0 !important;
}
.ld-registration__outer-wrapper .ld-registration__heading::before,
.ld-registration__outer-wrapper .ld-registration-order__heading::before {
  content: "Krystle Clear Academy"; display: block; margin: 0 0 8px;
  font: 700 10.5px/1.4 "DM Sans", system-ui, sans-serif; letter-spacing: 4px; text-transform: uppercase; color: #C9A84C;
}
.ld-registration__forgot-password-container .ld-registration__heading::after {
  content: "Type your email and we will send you a link to choose a new password."; display: block; margin: 8px 0 22px;
  font: 400 14.5px/1.5 "DM Sans", system-ui, sans-serif; color: #8A7D6A;
}
.ld-registration__outer-wrapper .ld-form label {
  display: block; margin: 0 0 6px; font: 700 11px/1.4 "DM Sans", system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #1B2A4A;
}
.ld-registration__outer-wrapper .ld-form input[type=text],
.ld-registration__outer-wrapper .ld-form input[type=email],
.ld-registration__outer-wrapper .ld-form input[type=password] {
  width: 100%; height: auto; padding: 13px 16px !important; border: 1.5px solid #E8E0D0 !important; border-radius: 10px !important;
  background: #FAF7F2 !important; box-shadow: none !important; font: 500 15px/1.3 "DM Sans", system-ui, sans-serif; color: #1E1810;
}
.ld-registration__outer-wrapper .ld-form input[type=text]:focus,
.ld-registration__outer-wrapper .ld-form input[type=email]:focus,
.ld-registration__outer-wrapper .ld-form input[type=password]:focus { outline: none; border-color: #C9A84C !important; box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important; }
.ld-registration__outer-wrapper .ld-form .ld-form__field-wrapper { margin: 0 0 16px; }
.ld-registration__outer-wrapper .ld-form input[type=submit],
.ld-registration__outer-wrapper #btn-join,
.ld-registration__outer-wrapper .ld-registration-order__checkout-button button {
  display: block; width: 100% !important; min-height: 52px; margin: 4px 0 0 !important; padding: 15px 20px !important; border: 0 !important;
  border-radius: 60px !important; background: linear-gradient(135deg, #C9A84C, #F0D98A) !important; color: #111D33 !important;
  font: 700 15.5px/1.2 "DM Sans", system-ui, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important;
  box-shadow: 0 6px 22px rgba(201,168,76,0.3) !important; cursor: pointer;
}
.kcm-back { display: block; max-width: 460px; margin: 20px auto 0; font: 500 14px/1.5 "DM Sans", system-ui, sans-serif; }
.ld-registration__outer-wrapper .kcm-back a, .kcm-back a { color: #1B2A4A !important; font-weight: 600; text-decoration: none !important; border-bottom: 1px solid rgba(27,42,74,0.25); }

/* the order */
.ld-registration-order { padding: 0 !important; border: 0 !important; background: none !important; }
.ld-registration-order .ld-registration-order__heading { margin-bottom: 18px !important; }
.ld-registration-order .ld-registration-order__items { margin: 0; padding: 18px 20px; border: 1px solid #E8E0D0; border-radius: 16px; background: #FAF7F2; }
.ld-registration-order .ld-registration-order__item { margin: 0; padding: 0; border: 0; }
.ld-registration-order .ld-registration-order__item-details { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px 18px; }
.ld-registration-order .ld-registration-order__item-title-wrapper { min-width: 0; }
.ld-registration-order .ld-registration-order__item-type { display: none; }
.ld-registration-order .ld-registration-order__item-title { display: block; font: 700 16px/1.35 "DM Sans", system-ui, sans-serif; color: #1B2A4A; }
.ld-registration-order .ld-registration-order__item-interval { margin: 4px 0 0; font-size: 13.5px; color: #8A7D6A; }
.ld-registration-order .ld-registration-order__item-price { flex: 0 0 auto; font: 700 16px/1.35 "DM Sans", system-ui, sans-serif; color: #1B2A4A; white-space: nowrap; }
.ld-registration-order .ld-registration-order__total { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin: 16px 0 0; padding: 14px 0 0; border: 0; border-top: 1px solid #E8E0D0; }
.ld-registration-order .ld-registration-order__total-title { font: 700 11px/1.4 "DM Sans", system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase; color: #1B2A4A; }
.ld-registration-order .ld-registration-order__total-price { font: 500 24px/1.2 "Playfair Display", Georgia, serif; color: #1B2A4A; }
.ld-registration-order .ld-registration-order__checkout { margin: 20px 0 0; padding: 0; border: 0; }
.ld-registration__outer-wrapper .ld-registration-order__return-wrapper { margin: 18px 0 0; padding: 0; border: 0; }
.ld-registration__outer-wrapper .ld-registration-order__return { padding: 0; border: 0; text-align: center; }
.ld-registration__outer-wrapper .ld-registration-order__return a { font-size: 13.5px; font-weight: 500; color: #8A7D6A !important; text-decoration: none !important; }
.ld-registration__outer-wrapper .ld-registration-order__return .dashicons { font-size: 14px; width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; }

/* ── 2. Page not found ─────────────────────────────────────────────────────────────────────────────────────────────── */
.error404 .page-content { max-width: 560px; margin: clamp(20px, 5vw, 56px) auto; border-radius: 22px; border: 1px solid rgba(201,168,76,0.18); box-shadow: 0 18px 50px rgba(27,42,74,0.10); }
.error404 .page-content .entry-content-wrap { padding: clamp(26px, 5vw, 44px); }
.error404 .page-header { margin: 0 0 10px; }
.error404 .page-title { font-size: clamp(28px, 6vw, 36px) !important; line-height: 1.2 !important; text-transform: none !important; }
.error404 .page-content p { font-size: 15.5px; line-height: 1.6; color: #6E6250 !important; }
.kcm-404 { display: flex; flex-wrap: wrap; gap: 10px 12px; margin: 22px 0 0; }
.kcm-404 a, .kcm-404 a:visited { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 24px; border-radius: 60px; font: 700 14.5px/1.2 "DM Sans", system-ui, sans-serif; text-decoration: none !important; }
.kcm-404 a.kcm-404-go { background: linear-gradient(135deg, #C9A84C, #F0D98A); color: #111D33 !important; box-shadow: 0 6px 20px rgba(201,168,76,0.3); }
.kcm-404 a.kcm-404-alt { background: #F1ECE2; color: #1B2A4A !important; }

/* ── 3. Course page: the progress box of a family in the course ──────────────────────────────────────────────────── */
.learndash-wrapper .ld-course-status.ld-course-status-enrolled { display: block !important; padding: 18px 22px !important; min-height: 0 !important; }
.learndash-wrapper .ld-course-status-enrolled .ld-progress { display: block !important; width: 100%; margin: 0 !important; padding: 0 !important; }
.learndash-wrapper .ld-course-status-enrolled .ld-progress-heading { width: 100%; margin: 0; }
.learndash-wrapper .ld-course-status-enrolled .ld-progress-stats { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; text-align: left; }
.learndash-wrapper .ld-course-status-enrolled .ld-progress-percentage { font: 700 12px/1.5 "DM Sans", system-ui, sans-serif !important; letter-spacing: 1.5px; text-transform: uppercase; color: #F0D98A !important; }
.learndash-wrapper .ld-course-status-enrolled .ld-progress-steps { font: 500 12.5px/1.5 "DM Sans", system-ui, sans-serif !important; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,0.6) !important; }
.learndash-wrapper .ld-course-status-enrolled .ld-progress-bar { width: 100%; height: 8px; margin: 10px 0 0; border-radius: 6px; background: rgba(255,255,255,0.14) !important; overflow: hidden; }
.learndash-wrapper .ld-course-status-enrolled .ld-progress-bar-percentage { height: 100%; border-radius: 6px; background: linear-gradient(90deg, #C9A84C, #F0D98A) !important; }
/* what is next and the button that goes there (my-academy.php, kcm_ma_course_continue); the "In progress" pill said what
   the percentage already says */
.learndash-wrapper .ld-course-status-enrolled > .ld-status { display: none !important; }
.learndash-wrapper .ld-course-status-enrolled .kcm-continue { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 18px; margin: 16px 0 2px; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,0.1); }
.learndash-wrapper .ld-course-status-enrolled .kcm-continue-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.learndash-wrapper .ld-course-status-enrolled .kcm-continue-l { font: 700 10.5px/1.5 "DM Sans", system-ui, sans-serif; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.learndash-wrapper .ld-course-status-enrolled .kcm-continue-n { font: 600 16px/1.35 "DM Sans", system-ui, sans-serif; color: #fff; overflow-wrap: anywhere; }
.learndash-wrapper .ld-course-status-enrolled a.kcm-continue-go { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 24px; border-radius: 60px; background: linear-gradient(135deg, #C9A84C, #F0D98A, #C9A84C); color: #1B2A4A !important; font: 700 14px/1.2 "DM Sans", system-ui, sans-serif; text-decoration: none !important; box-shadow: 0 6px 18px rgba(201,168,76,0.22); transition: transform .2s ease, box-shadow .2s ease; }
.learndash-wrapper .ld-course-status-enrolled a.kcm-continue-go:hover,
.learndash-wrapper .ld-course-status-enrolled a.kcm-continue-go:focus-visible { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(201,168,76,0.3); }
@media (max-width: 560px) { .learndash-wrapper .ld-course-status-enrolled a.kcm-continue-go { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .learndash-wrapper .ld-course-status-enrolled a.kcm-continue-go { transition: none; } }

/* ── 4. Lesson pages ─────────────────────────────────────────────────────────────────────────────────────────────── */
/* the page title reads as written ("Sitting at the Piano", not "Sitting At The Piano") and fits a phone */
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content > h1 { text-transform: none !important; font-size: clamp(27px, 5.2vw, 40px) !important; line-height: 1.2 !important; margin-bottom: 14px !important; text-wrap: balance; }
/* LearnDash's tan bar with the course name and a green pill becomes one quiet line */
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status { background: none !important; border-radius: 0; margin: 0 0 20px !important; padding: 0 !important; }
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 0 !important; background: none !important; border: 0; min-height: 0; }
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-breadcrumbs-segments { flex: 0 1 auto; min-width: 0; margin: 0; padding: 0 !important; font: 600 12px/1.5 "DM Sans", system-ui, sans-serif; letter-spacing: 0.4px; white-space: normal; overflow: visible; text-overflow: clip; }
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-breadcrumbs-segments li { font-size: 12px; }
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-breadcrumbs-segments li + li { display: none; }   /* the lesson's own name is the title just above */
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-breadcrumbs-segments a { color: #6E6250 !important; text-decoration: none !important; }
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-status { flex: 0 0 auto; margin: 0 !important; padding: 3px 10px !important; border-radius: 30px; background: rgba(46,170,138,0.12) !important; color: #1F7A63 !important; font: 700 10.5px/1.5 "DM Sans", system-ui, sans-serif !important; letter-spacing: 1px; text-transform: uppercase; }
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-status.ld-status-progress,
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-status.ld-status-incomplete { background: rgba(27,42,74,0.08) !important; color: #1B2A4A !important; }

/* courses whose lessons open on their own title (Little Explorers 1893, Adult Beginners 2133): no empty band above it */
body.ld-in-focus-mode.learndash-cpt-sfwd-courses-1893-parent .learndash-wrapper .ld-focus .ld-focus-content,
body.ld-in-focus-mode.learndash-cpt-sfwd-courses-2133-parent .learndash-wrapper .ld-focus .ld-focus-content { margin-top: 0 !important; padding-top: clamp(20px, 3.4vw, 40px) !important; }
/* Above 768px the top bar lies over the page (fixed, 51px high), so the page has to start below it. For the team LearnDash
   moves the page down by the WordPress toolbar's height; a family has no toolbar, and the first line sat under the bar
   (owner, 2026-09-28, as the test family). Same air under the bar for both. */
@media (min-width: 769px) {
  body.ld-in-focus-mode.learndash-cpt-sfwd-courses-1893-parent .learndash-wrapper .ld-focus .ld-focus-content,
  body.ld-in-focus-mode.learndash-cpt-sfwd-courses-2133-parent .learndash-wrapper .ld-focus .ld-focus-content { padding-top: 72px !important; }
  body.ld-in-focus-mode.admin-bar.learndash-cpt-sfwd-courses-1893-parent .learndash-wrapper .ld-focus .ld-focus-content,
  body.ld-in-focus-mode.admin-bar.learndash-cpt-sfwd-courses-2133-parent .learndash-wrapper .ld-focus .ld-focus-content { padding-top: 40px !important; }
}
/* the lesson list: the calendar mark of a lesson that opens later touched the lesson's name (families only: the team has
   no locked lessons) */
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-sidebar .ld-lesson-item .ld-lesson-title .ld-status-icon { flex: 0 0 auto; margin-left: 8px; }
/* the top bar on a tablet: the progress figures had no room (they broke into a column of letters that ran down over the
   lesson), and the round photo was cut off at the right edge */
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-percentage,
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-header .ld-progress .ld-progress-steps { white-space: nowrap; }
@media (min-width: 769px) and (max-width: 959px) {
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-header .ld-progress { display: none !important; }
}
@media (min-width: 769px) and (max-width: 859px) {
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-header .ld-content-actions .ld-content-action:first-child a.ld-button .ld-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
body.ld-in-focus-mode.learndash-cpt-sfwd-courses-1893-parent .learndash-wrapper .ld-focus .ld-focus-content .ld-tabs,
body.ld-in-focus-mode.learndash-cpt-sfwd-courses-2133-parent .learndash-wrapper .ld-focus .ld-focus-content .ld-tabs { margin-top: 0 !important; }

/* the buttons at the end of a lesson, on a phone: Previous and Next side by side, the rest above them */
@media (max-width: 640px) {
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; align-items: center; padding: 22px 0 8px !important; }
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .ld-content-action { width: auto !important; max-width: none !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column; align-items: stretch; justify-content: center; gap: 10px; text-align: center; }
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .ld-content-action:first-child { grid-column: 1; grid-row: 2; }
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .ld-content-action:last-child { grid-column: 2; grid-row: 2; }
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .ld-content-action:not(:first-child):not(:last-child) { grid-column: 1 / -1; grid-row: 1; }
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions > .ld-content-action:only-child { grid-column: 1 / -1; grid-row: 1; }
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action a.ld-button,
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action .learndash_mark_complete_button { width: 100% !important; max-width: none !important; min-height: 48px; margin: 0 !important; justify-content: center; white-space: nowrap; }
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-content-action form { width: 100%; margin: 0; }
  body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-content-actions .ld-course-step-back { display: inline-block; margin: 0 auto !important; font-size: 13.5px !important; }
}

/* 1.8.3 — LearnDash stacks its lesson bar on a phone (column, full-width pill, a ">" after the course name): keep one quiet line */
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-breadcrumbs { flex-direction: row !important; justify-content: flex-start !important; align-items: center !important; }
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-breadcrumbs-segments { width: auto !important; }
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-breadcrumbs-segments li::after { display: none !important; }
body.ld-in-focus-mode .learndash-wrapper .ld-focus .ld-focus-content .ld-lesson-status .ld-status { width: auto !important; }
.learndash-wrapper .ld-course-status-enrolled .ld-progress-bar { margin-bottom: 0 !important; }

/* the quiet line at the top of a lesson: when it wraps on a phone, the dot stays at the end of a line, never at the start
   (the lessons' own stylesheet puts it before each item; changing that there means re-pushing every lesson) */
.le-wrap .le-head .le-tag + .le-tag::before, .kcl-lesson .kcl-tag + .kcl-tag::before, .kab .kab-tag + .kab-tag::before { content: none !important; }
.le-wrap .le-head .le-tag:has(+ .le-tag:not([hidden]))::after { content: "·"; margin: 0 9px; color: #CBD5E1; }
.kcl-lesson .kcl-tag:not(:last-child)::after { content: "·"; margin: 0 9px; color: #B9AE98; }
.kab .kab-tag:not(:last-child)::after { content: "·"; margin: 0 9px; opacity: .55; }

/* ── 5. Header menu (1.9.1) ────────────────────────────────────────────────────────────────────────────────────────
   Someone who is logged in has eight items (Log out is the last). On smaller computer screens they stay on one row;
   where even that is too tight, Log out leaves the header: it is also at the top of My Academy. */
body #masthead .main-navigation .primary-menu-container > ul { flex-wrap: nowrap; }
body #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { white-space: nowrap; }
body #masthead .main-navigation .primary-menu-container > ul > li.kcm-menu-logout > a { opacity: 0.72; }
body #masthead .main-navigation .primary-menu-container > ul > li.kcm-menu-logout > a:hover,
body #masthead .main-navigation .primary-menu-container > ul > li.kcm-menu-logout > a:focus-visible { opacity: 1; }
@media (min-width: 1025px) and (max-width: 1320px) {
  body #masthead .main-navigation .primary-menu-container > ul > li.menu-item > a { padding-left: 0.6em !important; padding-right: 0.6em !important; font-size: 13px !important; }
}
@media (min-width: 1025px) and (max-width: 1140px) {
  body #masthead .main-navigation .primary-menu-container > ul > li.menu-item.kcm-menu-logout { display: none !important; }
}