/**
 * KH Core — Kynd Hub site menu (ported from Work Hub suite-core 1.9.16
 * "Suite Navigation" CSS; Style Guide tokens, DM Sans).
 *
 * Every rule is scoped to #khn-root / .khn-* classes (or body.khn-active for
 * the page offset). Tokens live on the wrapper, never :root, and never on
 * bare .wh-* classes, so nothing leaks into BuddyBoss or Work Hub surfaces.
 *
 *   ≥1024     rail 66 + panel 266, page pushed right
 *   768–1023  60px mini rail + drawer with scrim
 *   ≤767      theme menu button → full-screen drawer
 */

.khn, .khn *, .khn *::before, .khn *::after { box-sizing: border-box; }

.khn {
  --khn-navy: #1D3040; --khn-blue600: #347EA0; --khn-primary: #439BC0;
  --khn-blue300: #7EC4D8; --khn-blue200: #B3DDE9; --khn-blue100: #D9EFF5; --khn-bluelight: #F4FBFC;
  --khn-body: #5A6A7A; --khn-meta: #8A9BAB; --khn-border: #D0DCE6; --khn-alt: #F7FAFB;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--khn-navy);
  font-size: 14px; line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
.khn[hidden] { display: none !important; }
.khn button { font-family: inherit; }
.khn a { text-decoration: none; color: inherit; }
.khn svg.khn-i, .khn img.khn-i { display: block; width: 1em; height: 1em; flex: 0 0 auto; }
.khn img.khn-mark { width: 24px; height: 24px; max-width: none; border: 0; box-shadow: none; }

/* ====================================================================== *
 *  DESKTOP (>=1024): rail + panel
 * ====================================================================== */
.khn .khn-shell {
  position: fixed; top: var(--khn-top, 0px); left: 0; bottom: 0; z-index: 9980;
  display: flex; align-items: stretch;
  border-top: 1px solid var(--khn-border);
}
.khn .khn-shell .khn-rail,
.khn .khn-mini-rail {
  background: var(--khn-alt); border-right: 1px solid var(--khn-border);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
/* Short screens: let the rail scroll (tooltips may clip there). */
@media (max-height: 700px) {
  .khn .khn-shell .khn-rail, .khn .khn-mini-rail { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
  .khn .khn-irow { height: 34px !important; }
}
.khn .khn-shell .khn-rail { width: 66px; flex: 0 0 66px; height: 100%; padding: 10px 0; }
.khn .khn-rail__list { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.khn .khn-rail__spacer { flex: 1 1 auto; min-height: 8px; }
.khn .khn-rail__hair { display: block; width: 26px; height: 1px; background: var(--khn-border); margin: 4px 0 8px; }

.khn .khn-irow {
  width: 44px; height: 40px; margin: 0 auto; border-radius: 10px; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
  color: var(--khn-meta) !important; font-size: 22px; position: relative; line-height: 1;
  text-decoration: none !important; font-weight: 400 !important; box-shadow: none !important; min-height: 0;
}
.khn .khn-irow svg.khn-i { width: 22px; height: 22px; }
.khn .khn-irow:hover, .khn .khn-irow:focus-visible { background: var(--khn-blue100); color: var(--khn-blue600) !important; }
.khn .khn-irow.is-active { background: transparent; }
.khn .khn-irow.is-active::before {
  content: ""; position: absolute; left: -11px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 24px; border-radius: 0 4px 4px 0; background: var(--khn-primary);
}
.khn .khn-irow.is-active:hover { background: var(--khn-blue100); }
.khn .khn-irow__tip {
  position: absolute; left: 54px; top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--khn-navy); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 5px 9px; border-radius: 8px; opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; z-index: 9999;
}
.khn .khn-irow:hover .khn-irow__tip,
.khn .khn-irow:focus-visible .khn-irow__tip { opacity: 1; transform: translateY(-50%) translateX(0); }

/* ---- panel ---- */
.khn .khn-shell .khn-panel {
  width: 266px; flex: 0 0 266px; height: 100%;
  background: #fff; border-right: 1px solid var(--khn-border);
  display: flex; flex-direction: column; overflow: hidden; position: relative;
}
.khn .khn-shell.is-collapsed .khn-panel { display: none; }
.khn .khn-panel__head {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px 12px;
  border-bottom: 1px solid var(--khn-border); min-height: 54px;
}
.khn .khn-panel__head--empty { display: none; }
.khn .khn-panel__title,
.khn .khn-drawer__title { font-weight: 800; font-size: 16px; flex: 1; display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--khn-navy); }
.khn .khn-panel__title svg.khn-i,
.khn .khn-drawer__title svg.khn-i { font-size: 20px; color: var(--khn-primary); }
.khn .khn-panel__title span,
.khn .khn-drawer__title span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khn .khn-panel__scroll { flex: 1; overflow-y: auto; padding: 10px; }
.khn .khn-panel__scroll::-webkit-scrollbar { width: 8px; }
.khn .khn-panel__scroll::-webkit-scrollbar-thumb { background: var(--khn-border); border-radius: 999px; }

.khn .khn-back {
  border: 0; background: transparent; cursor: pointer; color: var(--khn-meta); font-size: 20px; padding: 0; margin: 0;
  width: 30px; height: 30px; min-height: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; box-shadow: none;
}
.khn .khn-back:hover, .khn .khn-back:focus-visible { background: var(--khn-alt); color: var(--khn-navy); }

.khn .khn-view { animation: khn-slidein .16s ease; }
@keyframes khn-slidein { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .khn .khn-view { animation: none; } }

/* ---- rows (two classes: beats BuddyBoss button:hover / a rules) ---- */
.khn a.khn-item, .khn button.khn-item {
  display: flex; align-items: center; gap: 11px; width: 100%; padding: 9px 12px; margin: 0 !important;
  border: 0; background: transparent; cursor: pointer; font-size: 14px; font-weight: 500;
  line-height: 1.25 !important; letter-spacing: normal !important; text-transform: none !important;
  text-decoration: none !important; color: var(--khn-navy) !important; border-radius: 8px; text-align: left;
  box-shadow: none !important; min-height: 0;
}
.khn .khn-item .khn-item__lead { font-size: 18px; color: var(--khn-meta); }
.khn .khn-item__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.khn .khn-item .khn-item__chev { font-size: 17px; color: var(--khn-meta); }
.khn a.khn-item:hover, .khn button.khn-item:hover,
.khn a.khn-item:focus-visible, .khn button.khn-item:focus-visible { background: var(--khn-bluelight); color: var(--khn-navy) !important; }
.khn .khn-item:hover .khn-item__lead { color: var(--khn-blue600); }
.khn a.khn-item.is-active { background: var(--khn-blue100); font-weight: 700; }
.khn .khn-item.is-active .khn-item__lead { color: var(--khn-primary); }
.khn .khn-sub { padding: 12px 12px 4px; font-size: 12px; font-weight: 600; color: var(--khn-meta); letter-spacing: 0; text-transform: none; }

/* ---- cards: My Hub + Phoebee ---- */
.khn a.khn-card {
  display: flex; align-items: center; gap: 9px; width: 100%; min-height: 44px; margin: 0 0 6px;
  background: var(--khn-bluelight); border: 1px solid var(--khn-blue200); border-radius: 10px;
  padding: 7px 10px; color: var(--khn-navy) !important; text-decoration: none !important; cursor: pointer;
  font-size: 14px; font-weight: 700; box-shadow: none;
}
.khn a.khn-card:hover, .khn a.khn-card:focus-visible { background: var(--khn-blue100); border-color: var(--khn-blue300); }
.khn .khn-card__av { width: 26px; height: 26px; display: grid; place-items: center; color: var(--khn-primary); font-size: 22px; flex: 0 0 auto; }
.khn .khn-card__name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.khn .khn-card__name small { font-size: 12px; font-weight: 500; color: var(--khn-meta); }
.khn .khn-card .khn-card__go { font-size: 18px; color: var(--khn-primary); }

/* ---- logged out: Register / Log In ---- */
.khn .khn-cta { display: flex; gap: 8px; margin: 2px 0 10px; }
.khn a.khn-cta__btn {
  flex: 1; text-align: center; border-radius: 8px; padding: 9px 0; font-size: 14px; font-weight: 700;
  border: 1px solid var(--khn-border); color: var(--khn-navy) !important; background: #fff; text-decoration: none !important; line-height: 1.25;
}
.khn a.khn-cta__btn--primary { background: var(--khn-primary); border-color: var(--khn-primary); color: #fff !important; }
.khn a.khn-cta__btn:hover { border-color: var(--khn-blue300); }
.khn a.khn-cta__btn--primary:hover { background: var(--khn-blue600); border-color: var(--khn-blue600); }

/* ---- push the page over for the fixed shell ---- */
@media (min-width: 1024px) {
  body.khn-active #page,
  body.khn-active > .site,
  body.khn-active .site,
  body.khn-active > .wp-site-blocks {
    margin-left: var(--khn-shell-w, 332px) !important;
  }
}

/* ====================================================================== *
 *  TABLET + PHONE: drawer + scrim
 * ====================================================================== */
.khn .khn-scrim {
  position: fixed; inset: 0; background: rgba(20, 40, 55, .42);
  opacity: 0; visibility: hidden; transition: .2s; z-index: 9985;
}
.khn .khn-scrim.is-open { opacity: 1; visibility: visible; }

.khn .khn-drawer {
  position: fixed; top: var(--khn-top, 0px); bottom: 0; left: 0; width: 86%; max-width: 320px; background: #fff;
  border-right: 1px solid var(--khn-border); transform: translateX(-102%);
  z-index: 9990; display: flex; flex-direction: column;
  visibility: hidden; pointer-events: none; transition: transform .22s ease, visibility 0s linear .22s;
}
.khn .khn-drawer.is-open { transform: none; visibility: visible; pointer-events: auto; transition: transform .22s ease, visibility 0s linear 0s; }
@media (prefers-reduced-motion: reduce) { .khn .khn-drawer, .khn .khn-drawer.is-open, .khn .khn-scrim { transition: none; } }
.khn .khn-drawer__head { display: flex; align-items: center; gap: 8px; padding: 14px 12px 10px; border-bottom: 1px solid var(--khn-border); min-height: 56px; }
.khn .khn-drawer__scroll { flex: 1; overflow: auto; padding: 8px 10px 20px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.khn .khn-drawer a.khn-item, .khn .khn-drawer button.khn-item { min-height: 46px; padding: 10px 12px; font-size: 16px; }
.khn .khn-drawer .khn-item .khn-item__lead { font-size: 21px; }
.khn .khn-drawer .khn-back { width: 40px; height: 40px; font-size: 22px; }

/* Own phone bar: only when no theme menu button was found. */
.khn .khn-header { display: none; }
body.khn-ready.khn-reuse .khn .khn-header { display: none !important; }

@media (max-width: 1023.98px) {
  .khn .khn-shell { display: none; }
}

@media (max-width: 767.98px) {
  body:not(.khn-reuse) .khn .khn-header {
    display: flex; align-items: center; gap: 8px;
    position: sticky; top: var(--khn-top, 0px); z-index: 9970;
    background: #fff; border-bottom: 1px solid var(--khn-border);
    padding: 8px 12px; padding-left: max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right));
  }
  .khn button.khn-hbtn {
    display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 12px; margin: 0;
    border: 1px solid var(--khn-border); border-radius: 10px; background: #fff; color: var(--khn-navy);
    font-size: 20px; cursor: pointer; box-shadow: none; min-height: 0;
  }
  .khn button.khn-hbtn span { font-size: 14px; font-weight: 700; }
  .khn button.khn-hbtn:hover { background: var(--khn-bluelight); border-color: var(--khn-blue300); color: var(--khn-navy); }
  .khn .khn-header__title { flex: 1; font-weight: 800; font-size: 16px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Full-screen drawer below the theme's top bar; the bar stays tappable. */
  .khn .khn-drawer { width: 100%; max-width: none; right: 0; border-right: 0; }
  .khn .khn-scrim { display: none; }
  body.khn-drawer-open { overflow: hidden; }
}

/* ---- iPad portrait (768–1023): mini rail + drawer ---- */
.khn .khn-mini-rail { display: none; }
@media (min-width: 768px) and (max-width: 1023.98px) {
  .khn .khn-mini-rail {
    display: flex; position: fixed; top: var(--khn-top, 0px); bottom: 0; left: 0; width: 60px;
    border-top: 1px solid var(--khn-border); z-index: 9986; padding: 10px 0 14px;
  }
  .khn .khn-mini-rail .khn-irow { width: 44px; height: 40px; font-size: 21px; }
  .khn .khn-mini-rail .khn-irow svg.khn-i { width: 21px; height: 21px; }
  .khn .khn-mini-rail .khn-irow.is-active::before { left: -8px; }
  body.khn-active #page,
  body.khn-active > .site,
  body.khn-active .site,
  body.khn-active > .wp-site-blocks { margin-left: 60px !important; }
  .khn .khn-drawer { left: 60px; width: 300px; max-width: 300px; }
  .khn .khn-drawer:not(.is-open) { transform: translateX(calc(-100% - 62px)); }
}
@media (max-width: 767.98px) {
  body.khn-active #page,
  body.khn-active > .site,
  body.khn-active .site,
  body.khn-active > .wp-site-blocks { margin-left: 0 !important; }
}

/* Focus visibility */
.khn :focus-visible { outline: 2px solid var(--khn-primary); outline-offset: 2px; }

/* ====================================================================== *
 *  Academy LMS lesson drawers (1.2.1)
 *  The "Course content" drawer is position:fixed at left:0, so the page push
 *  above doesn't move it; start it right of the menu instead. Also use
 *  Academy's own measured topbar offset for admins (its admin-bar rule
 *  hard-codes 102px, which puts the drawer head under the lesson topbar).
 * ====================================================================== */
@media (min-width: 1024px) {
  body.khn-active .academy-learn-drawer--left { left: var(--khn-shell-w, 332px) !important; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.khn-active .academy-learn-drawer--left { left: 60px !important; }
}
@media (min-width: 783px) {
  body.khn-active.admin-bar .academy-learn-drawer--below-topbar { top: var(--academy-learn-topbar-offset, 102px); }
}