/* Canon token values from cfe-styles.css (--cfe-ds-*), aliased locally. */
  :root{
    --ink:#1B2A3B; --ink-deep:#0F1923; --graphite:#5B6573; --subtle:#7A8494;
    --fog:#F4F5F7; --mist:#E8EAED; --white:#FFFFFF;
    --sky-text:#3E8AB8; --sky-bg:#EFF6FF; --sky-border:#93C5FD;
    --ember-text:#B85C0A; --ember-bg:#FEF3E7;
    --font-display:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
    --font-sans:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  }
  
  
  

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

  /* ============================================================
     FOOTER
     ============================================================ */
  .cfe-footer{ background:var(--ink); color:#C7CDD6; }
  .cfe-footer a{ color:inherit; text-decoration:none; transition:color .15s ease; }
  .cfe-footer a:hover{ color:#fff; }

  .cfe-footer__main{ max-width:1180px; margin:0 auto; padding:56px 32px 40px;
    display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:40px; }

  /* brand block */
  .cfe-foot-brand__logo{ display:inline-flex; align-items:center; gap:11px; margin-bottom:18px; }
  /* logo art is black-on-transparent; invert to white so it reads on the ink footer */
  .cfe-foot-brand__img{ height:48px; width:auto; display:block; filter:brightness(0) invert(1); }
  .cfe-foot-brand__mark{ width:38px; height:38px; border-radius:9px; background:#fff; color:var(--ink); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .cfe-foot-brand__mark svg{ width:24px; height:24px; }
  .cfe-foot-brand__name{ font-family:var(--font-display); font-weight:500; line-height:1.05; letter-spacing:0.06em; color:#fff; }
  .cfe-foot-brand__name b{ display:block; font-size:13px; font-weight:700; letter-spacing:0.09em; }
  .cfe-foot-brand__name span{ font-size:10px; letter-spacing:0.09em; color:#9AA4B2; }
  .cfe-foot-brand p{ font-size:13.5px; line-height:1.6; color:#9AA4B2; margin:0 0 18px; max-width:300px; }
  .cfe-foot-brand__cta{ display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ink) !important; font-family:var(--font-sans); font-weight:600; font-size:13px; padding:10px 16px; border-radius:8px; }
  .cfe-foot-brand__cta:hover{ background:var(--fog); color:var(--ink) !important; }
  .cfe-foot-brand__cta svg{ width:13px; height:13px; stroke:currentColor; fill:none; stroke-width:2; }

  /* link columns */
  .cfe-foot-col h4{ font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#fff; margin:4px 0 16px; }
  .cfe-foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
  .cfe-foot-col a{ font-size:14px; line-height:1.3; color:#C7CDD6; }
  .cfe-foot-col .soon{ font-size:10px; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:#9AA4B2; background:rgba(255,255,255,0.08); padding:2px 7px; border-radius:999px; margin-left:7px; vertical-align:middle; }

  /* district honesty line */
  .cfe-footer__district{ border-top:1px solid rgba(255,255,255,0.10); }
  .cfe-footer__district-in{ max-width:1180px; margin:0 auto; padding:18px 32px; display:flex; align-items:flex-start; gap:10px; font-size:13px; line-height:1.5; color:#9AA4B2; }
  .cfe-footer__district-in svg{ width:16px; height:16px; stroke:#9AA4B2; fill:none; stroke-width:1.7; flex-shrink:0; margin-top:1px; }
  .cfe-footer__district-in strong{ color:#C7CDD6; font-weight:600; }

  /* bottom bar */
  .cfe-footer__bottom{ border-top:1px solid rgba(255,255,255,0.10); }
  .cfe-footer__bottom-in{ max-width:1180px; margin:0 auto; padding:18px 32px; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:#9AA4B2; }
  .cfe-footer__bottom-in .left{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
  .cfe-footer__bottom-in a{ color:#9AA4B2; }
  .cfe-footer__legal{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

  @media (max-width:980px){
    .cfe-footer__main{ grid-template-columns:1fr 1fr; gap:32px; }
    .cfe-foot-brand{ grid-column:1 / -1; }
  }
  @media (max-width:560px){
    .cfe-footer__main{ grid-template-columns:1fr 1fr; gap:28px 20px; padding:40px 20px 32px; }
    .cfe-footer__district-in,.cfe-footer__bottom-in{ padding-left:20px; padding-right:20px; }
    .cfe-footer__bottom-in{ flex-direction:column; align-items:flex-start; gap:12px; }
  }

/* Member pages: the BuddyBoss BuddyPanel is a fixed 240px rail (desktop), which the
   theme clears via .site-content{padding-left:240px}. The footer is a sibling of
   .site-content, so mirror that offset when the panel is open so the brand column
   isn't hidden under the panel. Off-canvas below 800px (no offset). The dark
   background still spans the full viewport width. */
@media (min-width: 800px) {
  .bb-buddypanel.buddypanel-open .cfe-footer { padding-left: 240px; }
}

/* Insulate column headings from page/Elementor typography that bleeds in on some
   templates (observed: h4 -> 22px weight-500 ink, invisible on the dark footer). */
.cfe-footer .cfe-foot-col h4 {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  margin: 4px 0 16px !important;
  line-height: 1.3 !important;
}

/* Some templates (e.g. LearnDash course pages) have a left sidebar column taller
   than the content that bleeds into the footer area. Clear floated columns and
   give the footer its own stacking context above stray in-flow content so its
   opaque background isn't drawn over. (Stays below the fixed BuddyPanel, z:611.) */
.cfe-footer { position: relative; z-index: 500; clear: both; }

/* LearnDash lesson/topic/quiz step menu (.lms-topic-sidebar-data): the theme pins
   this as position:fixed; height:100%; max-height:calc(100vh - header) with its own
   overflow:auto, so it (a) overshoots its column into the footer (footer z-index:500
   then paints over it) and (b) caps the menu at viewport height, hiding lower steps
   behind an internal scrollbar while the column below sits empty. Render it in normal
   flow at its natural height instead: it's bounded by its column (so it can't reach
   the footer) and shows every step with no nested scrollbar. */
.lms-topic-sidebar-wrapper .lms-topic-sidebar-data {
  position: relative !important;
  left: 0 !important;   /* theme shifts the (natively fixed) sidebar 230px right when buddypanel-open; in normal flow the page margin already owns that offset, so it double-counted into a 230px gap */
  top: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Mobile (<768px): the theme serves the step menu as a slide-in drawer — the header
   expand icon toggles it and the panel is natively viewport-fixed, so it opens at
   whatever scroll position you're at. The normal-flow override above un-pins it,
   leaving the opened drawer at the top of the DOCUMENT: scrolled past one screen,
   tapping the icon showed nothing but the dim overlay. Re-pin it on mobile only —
   the footer-overlap and buddypanel-gap concerns it solves are ≥800px layouts. */
@media screen and (max-width: 767px) {
  /* Two stock gotchas on the wrapper:
     (1) it's display:none unless JS adds .show-in-mobile, and that JS only fires
         when the page LOADS at <768px — load at desktop width then shrink (rotate,
         resize, DevTools emulation) and the drawer is unreachable until a reload.
         Display it unconditionally; the closed state parks it off-canvas anyway.
     (2) it's the drawer's stacking context at z:98, so the panel loses the paint
         war to the footer (z:500) and mobile header (z:610) — lift it above both. */
  #learndash-content div.lms-topic-sidebar-wrapper {
    display: flex !important;
    z-index: 1102 !important;
  }
  .lms-topic-sidebar-wrapper .lms-topic-sidebar-data {
    position: fixed !important;
    height: 100% !important;
    max-height: 100vh !important;
    overflow: auto !important;
    background: var(--bb-content-background-color, #fff); /* panel bg lives on the wrapper, which stays in document flow — the fixed panel needs its own (theme var so dark mode holds) */
  }
  /* closed state: the unscoped left:0 above would otherwise beat the theme's
     .lms-topic-sidebar-close { left:-370px } and leave the fixed drawer stuck open */
  .lms-topic-sidebar-wrapper.lms-topic-sidebar-close .lms-topic-sidebar-data {
    left: -370px !important;
  }
}

/* Current step in the LD step nav: theme highlight is rgba(146,164,183,.05) — almost
   invisible. Give it the CFE 'sky' active treatment so the current step reads as a
   clear 'you are here': sky-bg fill, 3px sky-text left accent bar, bold sky title +
   tinted icon. Canon --cfe-ds-* tokens with hex fallbacks (nav isn't inside .cfe);
   scoped to :not(.bb-dark-theme) so it doesn't fight dark mode. */
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-lesson-item.current > .bb-lesson-head,
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-topic-item.current > .bb-lms-title-wrap,
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-quiz-item.current > .bb-lms-title-wrap {
  background: var(--cfe-ds-color-sky-bg, #EFF6FF) !important;
  box-shadow: inset 3px 0 0 0 var(--cfe-ds-color-sky-text, #3E8AB8) !important;
}
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-topic-item.current > .bb-lms-title-wrap .bb-lms-title,
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-quiz-item.current > .bb-lms-title-wrap .bb-lms-title {
  color: var(--cfe-ds-color-sky-text, #3E8AB8) !important;
  font-weight: 600 !important;
}
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-topic-item.current > .bb-lms-title-wrap .bb-lms-ico i,
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-quiz-item.current > .bb-lms-title-wrap .bb-lms-ico i {
  color: var(--cfe-ds-color-sky-text, #3E8AB8) !important;
}

/* Current section heading: highlight the section whose lesson contains (or is) the
   current step, matching the current-step treatment so users see both which section
   and which step they're on. :has() targets the section of the active lesson. */
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-lesson-item.current > .ld-item-list-section-heading,
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-lesson-item:has(.current) > .ld-item-list-section-heading {
  background: var(--cfe-ds-color-sky-bg, #EFF6FF) !important;
  box-shadow: inset 3px 0 0 0 var(--cfe-ds-color-sky-text, #3E8AB8) !important;
}
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-lesson-item.current > .ld-item-list-section-heading .ld-lesson-section-heading,
body:not(.bb-dark-theme) .lms-topic-sidebar-wrapper .lms-lesson-item:has(.current) > .ld-item-list-section-heading .ld-lesson-section-heading {
  color: var(--cfe-ds-color-sky-text, #3E8AB8) !important;
}

/* Section eyebrow above the LD step title (injected by cfe-ld-step-section.js):
   small sky-text uppercase label so the body shows 'Section X' before the step
   name, mirroring the step-nav highlight. */
.lms-header-title .cfe-step-section {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cfe-ds-color-sky-text, #3E8AB8);
  margin: 0 0 4px;
  line-height: 1.3;
}