/* ═══════════════════════════════════════════════════════════════════════
   Ported verbatim from www/sites/all/themes/business/css/override.css —
   this is the live site's actual design system, not a new one. Only the
   sections actually used by the pages built so far are included; add more
   verbatim sections here as more pages get rebuilt.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --bs-primary: #3459e6;
  --bs-primary-rgb: 52, 89, 230;
  --bs-info: #287bb5;
  --bs-info-rgb: 40, 123, 181;
  --bs-success: #2fb380;
  --bs-success-rgb: 47, 179, 128;
  --bs-warning: #f4bd61;
  --bs-warning-rgb: 244, 189, 97;
  --bs-danger: #da292e;
  --bs-danger-rgb: 218, 41, 46;
  --bs-font-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                        Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);

  --cl-blue-soft: #4da3ff;
  --cl-coral:     #ff6b81;

  --r-md:   12px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  1.25rem;
  --r-pill: 999px;

  --ease-snap: ease;
  --dur-fast:  180ms;
  --dur-base:  260ms;
}

[data-bs-theme="light"] {
  --bg-page-gradient: linear-gradient(135deg, #eaf2fb 0%, #f6f8fc 55%, #dfeaf8 100%);
  --bg-card-gradient: linear-gradient(180deg, #ffffff 0%, #eef3fa 100%);
  --shadow-card:  0 .35rem .9rem rgba(0,0,0,.06);
  --shadow-hover: 0 1rem 2rem rgba(0,0,0,.12);
  --tint-primary-soft: rgba(52, 89, 230, .10);
  --tint-info-soft:    rgba(40, 123, 181, .10);
  --tint-success-soft: rgba(47, 179, 128, .10);
  --tint-warning-soft: rgba(244, 189, 97, .14);
  /* Bootstrap's own default (--bs-body-bg: #fff) leaves every element that
     paints itself with this var (.site-header, .cd-status-card, etc.) flat
     white in light mode instead of the same gradient the page body uses. */
  --bs-body-bg: var(--bg-page-gradient);
}
[data-bs-theme="dark"] {
  --bg-page-gradient: linear-gradient(135deg, #1a1a1a 0%, #111 100%);
  --bg-card-gradient: linear-gradient(180deg, #2b2b2b 0%, #1a1a1a 100%);
  --shadow-card:  0 .45rem 1rem rgba(0,0,0,.26);
  --shadow-hover: 0 1rem 2rem rgba(0,0,0,.38);
  --tint-primary-soft: rgba(77, 163, 255, .12);
  --tint-info-soft:    rgba(40, 123, 181, .18);
  --tint-success-soft: rgba(34, 197, 94, .14);
  --tint-warning-soft: rgba(255, 193, 7, .16);
  --bs-body-bg: #111;
  --bs-body-color: #e0e0e0;
  --bs-body-color-rgb: 224, 224, 224;
  --bs-secondary-color: rgba(255,255,255,.72);
  --bs-tertiary-color: rgba(255,255,255,.55);
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-border-color: rgba(255, 255, 255, 0.049);
}

html, body {
  font-family: var(--bs-font-sans-serif);
  -webkit-font-smoothing: antialiased;
}
html {
  /* Some pages are taller than the viewport (a scrollbar appears) and some
     aren't (no scrollbar) — without this, navigating between them shifted the
     whole page left/right by the scrollbar's width. overflow-y:scroll is the
     universal-support fallback; scrollbar-gutter reserves the same space
     without forcing the bar to always be visibly drawn on browsers that
     support it. */
  overflow-y: scroll;
  scrollbar-gutter: stable;
}
body {
  background: var(--bg-page-gradient);
  min-height: 100vh;
  margin: 0;
  color: var(--bs-body-color);
  overflow-x: hidden;
}
.card {
  background: var(--bg-card-gradient);
  border-color: var(--bs-border-color);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
}
main {
  /* No position/z-index here on purpose — giving main its own stacking
     context used to trap everything painted inside it (including
     position:fixed descendants like .cd-fixed-cta, whose z-index is only
     compared *within* that context) at a single z-index:1 slot when
     compared against unpositioned siblings like <footer>, so any fixed
     overlay inside main silently rendered above the footer instead of
     respecting its own much higher z-index. Letting main stay unpositioned
     lets its descendants compete on z-index directly in the root stacking
     context, same as .site-header and footer. */
  min-height: 400px;
}

/* ---------------------------------------------------------------
   SITE HEADER (logged-out variant)
--------------------------------------------------------------- */
.site-header {
  /* z-index matches Bootstrap's own .fixed-top convention (1030) so the
     header reliably wins over any in-page positioned content, including
     .cd-fixed-cta (z-index:1020, just below this) on short viewports where
     the sticky header and the fixed bottom CTA could otherwise overlap. */
  position: sticky; top: 0; z-index: 1090;
  background: var(--bs-body-bg);
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 8px 24px -16px rgba(0,0,0,.12);
  margin-bottom: 15px;
}
[data-bs-theme="dark"] .site-header {
  background: rgba(20,20,20,.88);
  backdrop-filter: saturate(120%) blur(10px);
}
.site-header__inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding-block: 8px;
}
.site-header__brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit;
  font-weight: 800; letter-spacing: -.4px; font-size: 18px;
}
.site-header__brand img { height: 28px; width: auto; }
.brand-text {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--bs-emphasis-color) !important;
  -webkit-font-smoothing: antialiased;
}
.site-header__sep {
  border-left: 2px solid var(--bs-border-color);
  padding-left: 15px;
  color: var(--bs-secondary-color);
}
.site-header__cta { display: inline-flex; align-items: center; gap: 6px; }
.site-header__icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  border: none; background: transparent; color: var(--bs-secondary-color);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--dur-fast) var(--ease-snap);
}
.site-header__icon-btn:hover { background: rgba(var(--bs-emphasis-color-rgb), .06); color: var(--bs-body-color); }

/* ---------------------------------------------------------------
   PRIMARY HERO — Lottie animation (home page, node--1782.tpl.php)
--------------------------------------------------------------- */
.on-board { padding: 0 60px 40px; }
@media (max-width: 991.98px) { .on-board { padding: 20px 16px 24px; } }

/* Mobile (base): header -> image -> description -> CTA, stacked.
   Desktop (>=992px, matching the old col-lg-7 split point): image on the
   left spanning all three text rows, copy stacked on the right in its
   original order. */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "image"
    "desc"
    "cta";
  row-gap: 24px;
  align-items: center;
}
.hero-header { grid-area: header; }
.hero-image  { grid-area: image; }
.hero-desc   { grid-area: desc; }
.hero-cta    { grid-area: cta; }

/* The Lottie/bodymovin player (#bm) has no intrinsic size of its own — it
   renders an SVG that fills whatever box this container is. Left
   unconstrained it was rendering very tall, pushing the "Courses" CTA button
   below the fold on mobile (where header -> image -> desc -> cta stack
   vertically). Capped short enough that the CTA clears the fold on a typical
   phone viewport; desktop gets more room since the animation sits beside the
   copy there, not above the CTA. */
.hero-image {
  width: 100%;
  max-height: 220px;
  display: flex;
  justify-content: center;
}
.hero-image #bm {
  width: 100%;
  max-width: 320px;
  height: 220px;
}

@media (min-width: 992px) {
  .hero-grid {
    grid-template-columns: 5fr 7fr;
    column-gap: 40px;
    row-gap: 20px;
    grid-template-areas:
      "image header"
      "image desc"
      "image cta";
  }
  .hero-image { max-height: 360px; }
  .hero-image #bm { max-width: 100%; height: 360px; }
}

.badge-soft {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .9rem;
  border-radius: var(--r-pill);
  background: var(--tint-primary-soft);
  border: 1px solid rgba(var(--bs-primary-rgb), .22);
  color: var(--bs-emphasis-color);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.badge-soft .text-warning { color: var(--bs-warning) !important; font-size: 14px; }

.lottie-hero h1 {
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  color: var(--bs-emphasis-color);
}
.lottie-hero h1 .text-primary {
  background: linear-gradient(135deg, var(--bs-primary), var(--cl-blue-soft));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
.lottie-hero .muted { color: var(--bs-secondary-color); }
.lottie-hero .feature-checks { color: var(--bs-secondary-color); }
.lottie-hero .feature-checks > span { display: inline-flex; align-items: center; gap: 4px; }
.on-board .btn-outline-secondary {
  color: var(--bs-emphasis-color) !important;
  border-color: rgba(var(--bs-emphasis-color-rgb), .28) !important;
}
.on-board .btn-outline-secondary:hover {
  background: rgba(var(--bs-emphasis-color-rgb), .06);
}

/* ---------------------------------------------------------------
   SECONDARY INTRO
--------------------------------------------------------------- */
.secondary-intro {
  position: relative;
  padding: 64px 0 72px;
  border-top: 1px solid var(--bs-border-color);
  overflow: hidden;
}
.secondary-intro::before {
  content: ""; position: absolute; inset: -40% -10% auto auto;
  width: 600px; height: 600px;
  background: radial-gradient(circle at center, rgba(77,163,255,.12) 0%, transparent 60%);
  filter: blur(20px); pointer-events: none;
}
.secondary-intro__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bs-info);
  padding: 5px 12px; border-radius: var(--r-pill);
  background: var(--tint-info-soft);
  margin-bottom: 16px;
}
.secondary-intro h2 {
  font-size: clamp(32px, 4.5vw, 44px);
  font-weight: 800; letter-spacing: -.8px; line-height: 1.1;
  color: var(--bs-emphasis-color); margin-bottom: 14px;
}
.secondary-intro h2 .accent {
  background: linear-gradient(135deg, var(--bs-primary), var(--cl-blue-soft));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.secondary-intro p {
  font-size: 1.05rem; line-height: 1.55; color: var(--bs-secondary-color);
  max-width: 540px; margin-bottom: 22px;
}
.secondary-intro__ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.secondary-intro__ctas .btn { font-weight: 600; padding: .6rem 1.2rem; border-radius: var(--r-lg); font-size: 15px; }
.secondary-intro__art {
  position: relative;
  border-radius: var(--r-2xl);
  background: linear-gradient(135deg, rgba(52,89,230,.18) 0%, rgba(77,163,255,.06) 60%, rgba(244,189,97,.10) 100%);
  border: 1px solid var(--bs-border-color);
  padding: 20px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.secondary-intro__art img { width: 100%; height: auto; display: block; border-radius: var(--r-lg); }
.secondary-intro__art-floats { position: absolute; inset: 0; pointer-events: none; }
.secondary-intro__chip-float {
  position: absolute;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  font-weight: 700; font-size: 12px;
  animation: si-float 3.6s ease-in-out infinite;
}
.secondary-intro__chip-float .v { color: var(--bs-emphasis-color); }
.secondary-intro__chip-float.f1 { top: 18px; left: 10px; color: var(--bs-warning); animation-delay: .2s; }
.secondary-intro__chip-float.f2 { top: 50%; right: 12px; color: var(--bs-info); animation-delay: .8s; }
.secondary-intro__chip-float.f3 { bottom: 14px; left: 20px; color: var(--bs-success); animation-delay: 1.4s; }
@keyframes si-float {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-6px); }
}

/* ---------------------------------------------------------------
   VALUE PROPS — 4 benefit cards, replaces the old raw-numbers trust strip
--------------------------------------------------------------- */
.value-props { padding: 56px 0; }
.value-prop-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  height: 100%;
  padding: 22px;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--r-2xl);
  background: var(--bg-card-gradient);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-snap),
              box-shadow var(--dur-base) var(--ease-snap),
              border-color var(--dur-base) var(--ease-snap);
}
.value-prop-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--bs-primary-rgb), .22);
}
.value-prop-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  border-radius: 50%;
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.value-prop-icon--primary { color: var(--bs-primary); background: var(--tint-primary-soft); }
.value-prop-icon--info    { color: var(--bs-info);    background: var(--tint-info-soft); }
.value-prop-icon--warning { color: var(--bs-warning); background: var(--tint-warning-soft); }
.value-prop-icon--success { color: var(--bs-success); background: var(--tint-success-soft); }
.value-prop-card h3 { font-size: 16px; font-weight: 700; color: var(--bs-emphasis-color); margin-bottom: 2px; }
.value-prop-card p  { font-size: 13.5px; line-height: 1.5; color: var(--bs-secondary-color); margin-bottom: 0; }

/* ---------------------------------------------------------------
   SECTION HEADINGS
--------------------------------------------------------------- */
.section { padding: 80px 0; }
.section-head { margin-bottom: 36px; }
.section-eyebrow {
  font-size: 11px; font-weight: 700; color: var(--bs-info);
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 10px;
}
.section-head h2 {
  font-size: 36px; font-weight: 800; letter-spacing: -.6px; line-height: 1.15;
  color: var(--bs-emphasis-color);
}
.section-head p {
  color: var(--bs-secondary-color); margin-top: 8px; font-size: 16px; line-height: 1.55;
  max-width: 600px;
}

/* ---------------------------------------------------------------
   HOW IT WORKS — 3 onboarding cards
--------------------------------------------------------------- */
.howcard {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--r-2xl);
  padding: 28px;
  background: var(--bg-card-gradient);
  box-shadow: var(--shadow-card);
  height: 100%;
  position: relative; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-snap),
              box-shadow var(--dur-base) var(--ease-snap),
              border-color var(--dur-base) var(--ease-snap);
}
.howcard:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--bs-primary-rgb), .22);
}
.howcard__num {
  position: absolute; top: 18px; right: 22px;
  font-size: 60px; font-weight: 800; line-height: 1;
  color: rgba(var(--bs-emphasis-color-rgb), .04);
}
.howcard__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  font-size: 22px; line-height: 1; margin-bottom: 16px;
}
.howcard--learn     .howcard__icon { background: var(--tint-info-soft);    color: var(--bs-info); }
.howcard--quiz      .howcard__icon { background: rgba(var(--bs-primary-rgb), .14); color: var(--bs-primary); }
[data-bs-theme="dark"] .howcard--quiz .howcard__icon { color: var(--cl-blue-soft); }
.howcard--pass       .howcard__icon { background: var(--tint-warning-soft); color: var(--bs-warning); }
.howcard h3 {
  font-size: 22px; font-weight: 800; letter-spacing: -.2px; color: var(--bs-emphasis-color);
  margin-bottom: 10px;
}
.howcard p { color: var(--bs-secondary-color); font-size: 15px; line-height: 1.55; margin-bottom: 0; }
.howcard__metas {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px;
  padding-top: 16px; border-top: 1px dashed var(--bs-border-color);
}
.howcard__metas .pill {
  font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
  background: rgba(var(--bs-emphasis-color-rgb), .04); color: var(--bs-secondary-color);
}

/* ---------------------------------------------------------------
   COURSE CARD (node--course--teaser.tpl.php) — the actual template used
   by the "list_all_courses" View (row_plugin=node, view_mode=teaser).
   NOTE: override.css also has a separate, differently-named
   ".view-list-all-courses" block that turned out to be dead/unused CSS —
   the real per-card output goes through this node teaser template
   instead, confirmed via the Views config in the quizbuilder DB.
--------------------------------------------------------------- */
.course-card {
  transition: transform .22s ease, box-shadow .22s ease;
  background: var(--bg-card-gradient);
  box-shadow: var(--shadow-card);
  border-radius: var(--r-2xl) !important;
}
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}
.course-card__hero {
  height: 188px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.course-card__hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.14) 0%, rgba(0,0,0,.54) 100%);
  border-radius: 0;
  transition: opacity .2s ease;
}
.course-card:hover .course-card__hero-overlay { opacity: .75; }
.course-card__hero-badges {
  position: absolute;
  top: .7rem; left: .75rem; right: .75rem;
  display: flex;
  align-items: flex-start;
  gap: .45rem;
}
.course-card__title {
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--bs-body-color);
}
.course-card__title a { color: inherit; }
.course-card__title a:hover { color: var(--bs-primary); }
.course-card__teaser {
  font-size: .8rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cstat-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  font-size: .72rem;
  font-weight: 500;
  padding: .22rem .5rem;
  border-radius: var(--r-pill);
  background: var(--bs-tertiary-bg, rgba(0,0,0,.04));
  border: 1px solid var(--bs-border-color);
  white-space: nowrap;
  color: var(--bs-body-color);
}
.cstat-pill i { font-size: .66rem; }
[data-bs-theme="dark"] .cstat-pill {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
}
.course-topic-pill { font-size: .67rem !important; }
.course-topic-overflow {
  font-size: .67rem !important;
  background: var(--bs-tertiary-bg, rgba(0,0,0,.04)) !important;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color) !important;
}
[data-bs-theme="dark"] .course-topic-overflow {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.1);
}
.course-card__meta { font-size: .77rem; }
.course-card__cta { position: relative; z-index: 2; }

/* ---------------------------------------------------------------
   REVIEWS
--------------------------------------------------------------- */
.review-card {
  height: 100%;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--r-2xl);
  padding: 26px;
  background: var(--bg-card-gradient);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-base) var(--ease-snap),
              box-shadow var(--dur-base) var(--ease-snap),
              border-color var(--dur-base) var(--ease-snap);
}
.review-card:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: var(--shadow-hover);
  border-color: rgba(var(--bs-primary-rgb), .22);
}
.review-card__stars { color: var(--bs-warning); font-size: 14px; margin-bottom: 14px; }
.review-card__quote {
  color: var(--bs-secondary-color); font-size: 15px; line-height: 1.6;
  margin-bottom: 20px;
}
.review-card__author { display: flex; align-items: center; gap: 12px; }
.review-card__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  font-size: 14px; font-weight: 800; flex-shrink: 0;
}
.review-card__name { font-weight: 700; color: var(--bs-emphasis-color); font-size: 14px; }
.review-card__meta { color: var(--bs-secondary-color); font-size: 12.5px; }

.reviews-carousel { position: relative; padding: 4px 56px 8px; }
.reviews-carousel .carousel-control-prev,
.reviews-carousel .carousel-control-next {
  position: absolute; top: 50%; bottom: auto; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--bs-primary); opacity: 1;
  box-shadow: var(--shadow-card);
}
.reviews-carousel .carousel-control-prev { left: 0; }
.reviews-carousel .carousel-control-next { right: 0; }
.reviews-carousel .carousel-control-prev-icon,
.reviews-carousel .carousel-control-next-icon { width: 14px; height: 14px; }
.reviews-carousel .carousel-indicators { position: static; margin-top: 32px; }
.reviews-carousel .carousel-indicators [data-bs-target] {
  width: 8px; height: 8px; border-radius: 50%;
  background-color: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), .25);
  opacity: 1; border: 0; margin: 0 4px;
}
.reviews-carousel .carousel-indicators .active { background-color: var(--bs-primary); }
@media (max-width: 575.98px) {
  .reviews-carousel { padding-left: 44px; padding-right: 44px; }
  .reviews-carousel .carousel-control-prev,
  .reviews-carousel .carousel-control-next { width: 32px; height: 32px; }
}

/* ---------------------------------------------------------------
   FINAL CTA
--------------------------------------------------------------- */
.final-cta {
  border-radius: var(--r-2xl); padding: 56px 40px;
  background: linear-gradient(135deg,
              rgba(var(--bs-primary-rgb), .18) 0%,
              rgba(77,163,255,.08) 50%,
              rgba(var(--bs-warning-rgb), .14) 100%);
  border: 1px solid var(--bs-border-color);
  position: relative; overflow: hidden;
  text-align: center;
}
.final-cta h2 {
  font-size: clamp(28px, 4vw, 44px); font-weight: 800; letter-spacing: -.6px;
  color: var(--bs-emphasis-color); margin-bottom: 12px;
}
.final-cta p { color: var(--bs-secondary-color); font-size: 17px; max-width: 540px; margin: 0 auto 24px; }

/* ---------------------------------------------------------------
   SCROLL ANIMATIONS (mirrors coursesite's scrollAnimations.js)
--------------------------------------------------------------- */
.tile-animate-ease { transition-timing-function: cubic-bezier(.22, .68, 0, 1.2); }
.course-scroll-animate:not(.is-visible) { opacity: 0; }
.course-scroll-animate.is-visible { opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════
   Below: course-detail-page hero (.cd-hero, .cbadge) ported verbatim from
   the same stylesheet, for the course detail/preview pages built earlier.
   Not yet reconciled with the .view-list-all-courses card styles above —
   course listing/detail pages are next in line for a real-markup pass.
   ═══════════════════════════════════════════════════════════════════════ */
.cd-hero {
  min-height: 420px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: flex-end;
  position: relative;
  margin-top:-20px;
}
@media (max-width: 767px) {
  .cd-hero { min-height: 300px; }
}
.cd-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    160deg,
    rgba(0,0,0,.30) 0%,
    rgba(0,0,0,.72) 60%,
    rgba(0,0,0,.88) 100%
  );
}
.cd-hero__content {
  padding-top: 3rem;
  padding-bottom: 2.5rem;
  width: 100%;
  z-index:1;
}
.cd-breadcrumb { --bs-breadcrumb-divider-color: rgba(255,255,255,.4); font-size: .8rem; }
.cd-hero__title {
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
  margin-bottom: .75rem;
}
.cd-hero__teaser {
  color: rgba(255,255,255,.82);
  font-size: 1.05rem;
  max-width: 640px;
  margin-bottom: 1rem;
}
.cd-hero__tag {
  border: 1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.12) !important;
  font-size: .72rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cd-stats-strip { margin-top: 1.25rem; flex-wrap: wrap; }
.cd-stat {
  display: inline-flex; align-items: center; gap: .4rem;
  color: rgba(255,255,255,.88); font-size: .85rem; font-weight: 500;
}
.cd-stat i { font-size: .78rem; opacity: .8; }
.cd-stat--rating { gap: .2rem; }
.cd-stat--rating .fa-star { font-size: .7rem; }
.cd-stat__muted { opacity: .65; }
.cbadge {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700; line-height: 1;
  padding: .28rem .55rem; border-radius: var(--r-pill);
  letter-spacing: .01em;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  text-transform: uppercase;
}
.cbadge--free     { background: rgba(47, 179, 128, .88); color: #fff; }
.cbadge--standard { background: rgba(40, 123, 181, .88); color: #fff; }
.cbadge--premium  {
  background: linear-gradient(135deg, rgba(196,130,10,.92), rgba(224,165,25,.92));
  color: #fff;
}
.cbadge--cat {
  background: rgba(52, 89, 230, .84);
  color: #fff;
  margin-left: auto;
  text-transform: none;
  font-weight: 600;
}

/* ── Placeholder utility classes used by course-detail.php / course-preview.php
   / courses.php as originally built — kept for now, to be replaced when those
   pages get their real-markup pass. ── */
.card .card-img-top,
.card .img-bg {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}
.card .title-trimmed {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}
.card .card-details {
  max-height: 120px;
  min-height: 120px;
  overflow: hidden;
  margin-bottom: 20px;
  font-size: 12px;
}
.box-shadow-light {
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.03);
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN PAGE — ported verbatim from
   www/sites/all/themes/business/css/onboarding.css (.lp-* rules) and the
   field customizations from userdashboard_form_alter() (icon-input-wrapper).
   .page-login on <body> replaces Drupal's automatic body.page-user-login
   class, since www2 doesn't have Drupal's page-class system.
   ═══════════════════════════════════════════════════════════════════════ */
body.page-login {
  background: radial-gradient(ellipse 60% 50% at 25% 15%, rgba(var(--bs-primary-rgb), 0.09) 0%, transparent 100%), radial-gradient(ellipse 55% 45% at 80% 85%, rgba(var(--bs-primary-rgb), 0.06) 0%, transparent 100%), var(--bg-page-gradient);
  margin: 15px 0;
}
body.page-login .site-header {
  display: none !important;
}
body.page-login main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem 4rem;
  min-height: calc(100dvh - 66px);
}

#block-system-main .lp-header,
#block-system-main .lp-form-card,
#block-system-main .lp-oauth,
#block-system-main .lp-footer,
body.page-login .lp-header,
body.page-login .lp-form-card,
body.page-login .lp-oauth,
body.page-login .lp-footer {
  width: 100%;
  max-width: 460px;
  box-sizing: border-box;
}

.lp-header {
  text-align: center;
  margin-bottom: 1.75rem;
}
.lp-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--bs-secondary-color, rgba(0, 0, 0, 0.48));
  text-decoration: none;
  padding: 0.28rem 0.55rem;
  border-radius: 0.5rem;
  transition: color 0.18s ease, background 0.18s ease;
  margin-bottom: 0.9rem;
}
.lp-back i { font-size: 0.75rem; }
.lp-back:hover {
  color: var(--bs-emphasis-color, #111);
  background: rgba(var(--bs-emphasis-color-rgb, 0, 0, 0), 0.05);
}
[data-bs-theme=dark] .lp-back { color: rgba(255, 255, 255, 0.45); }
[data-bs-theme=dark] .lp-back:hover {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
}

.lp-header__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--bs-primary, #3459e6) 0%, #6a8eff 100%);
  box-shadow: 0 6px 22px rgba(var(--bs-primary-rgb, 52, 89, 230), 0.4);
  font-size: 1.45rem;
  color: #fff;
  margin-bottom: 0.9rem;
}
.lp-header__title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--bs-emphasis-color, #111);
  margin: 0 0 0.35rem;
  line-height: 1.15;
}
.lp-header__sub {
  font-size: 0.9rem;
  color: var(--bs-secondary-color, rgba(0, 0, 0, 0.55));
  margin: 0;
  line-height: 1.5;
}

.lp-form-card {
  background: var(--bg-card-gradient, #fff);
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
  border-radius: 1.4rem 1.4rem 0 0;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
  padding: 1.75rem 2rem 2rem;
  border-bottom: none;
  padding-bottom: 1.6rem;
}
.lp-form-card .icon-input-wrapper { position: relative; margin-bottom: 1.1rem; }
.lp-form-card .icon-input-wrapper .form-control { padding-left: 2.75rem; }
.lp-form-card .icon-input-wrapper .icon-label {
  position: absolute;
  left: 0.88rem;
  bottom: 1rem;
  font-size: 0.82rem;
  color: var(--bs-secondary-color, rgba(0, 0, 0, 0.38));
  pointer-events: none;
  line-height: 1;
  transition: color 0.18s ease, transform 0.18s ease;
}
.lp-form-card .icon-input-wrapper .form-control:focus ~ .icon-container .icon-label,
.lp-form-card .icon-input-wrapper .form-control:focus ~ .icon-label {
  color: var(--bs-primary, #3459e6);
  transform: scale(1.1);
}
.lp-form-card .icon-input-wrapper .form-control:not(:placeholder-shown) ~ .icon-container .icon-label,
.lp-form-card .icon-input-wrapper .form-control:not(:placeholder-shown) ~ .icon-label {
  color: var(--bs-primary, #3459e6);
}
.lp-form-card .control-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, rgba(0, 0, 0, 0.5));
  margin-bottom: 0.42rem;
}
.lp-form-card .form-control {
  display: block;
  width: 100%;
  padding: 0.78rem 1rem;
  border: 1.5px solid var(--bs-border-color, rgba(0, 0, 0, 0.14));
  border-radius: 0.75rem;
  background: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #111);
  font-size: 0.95rem;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  outline: none;
  box-shadow: none;
}
.lp-form-card .form-control::placeholder {
  color: var(--bs-tertiary-color, rgba(0, 0, 0, 0.28));
  font-weight: 400;
}
.lp-form-card .form-control:focus {
  border-color: var(--bs-primary, #3459e6);
  box-shadow: 0 0 0 3.5px rgba(var(--bs-primary-rgb, 52, 89, 230), 0.14);
}
.lp-form-card .form-control:not(:placeholder-shown):not(:focus) {
  border-color: rgba(var(--bs-success-rgb, 47, 179, 128), 0.45);
}
.lp-form-card .lp-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.1rem;
  padding-left: 0;
}
.lp-form-card .lp-remember .form-check-input {
  margin: 0;
}
.lp-form-card .lp-remember .form-check-label {
  font-size: 0.85rem;
  color: var(--bs-secondary-color, rgba(0, 0, 0, 0.6));
}
.lp-form-card .form-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
  margin-top: 1.5rem;
  border: none;
  padding: 0;
  background: transparent;
}
.lp-form-card .form-actions .btn-primary,
.lp-form-card .form-actions .form-submit {
  width: 100%;
  padding: 0.82rem 1rem;
  border: none;
  border-radius: 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--bs-primary, #3459e6);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 6px 22px rgba(var(--bs-primary-rgb, 52, 89, 230), 0.38);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.lp-form-card .form-actions .btn-primary:hover,
.lp-form-card .form-actions .form-submit:hover {
  background: #2648d1;
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(var(--bs-primary-rgb, 52, 89, 230), 0.48);
}
.lp-form-card .form-actions .btn-primary:active,
.lp-form-card .form-actions .form-submit:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(var(--bs-primary-rgb, 52, 89, 230), 0.28);
}
.lp-form-card .form-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--bs-secondary-color, rgba(0, 0, 0, 0.52));
  text-decoration: none;
  padding: 0.35rem;
  border-radius: 0.5rem;
  transition: color 0.18s ease, background 0.18s ease;
}
.lp-form-card .form-actions a i {
  color: var(--bs-primary, #3459e6);
  font-size: 0.78rem;
}
.lp-form-card .form-actions a:hover {
  color: var(--bs-primary, #3459e6);
  background: rgba(var(--bs-primary-rgb, 52, 89, 230), 0.06);
}

.lp-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.08));
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  color: var(--bs-secondary-color, rgba(0, 0, 0, 0.48));
  line-height: 1.45;
}
.lp-trust i {
  color: var(--bs-success, #2fb380);
  font-size: 0.8rem;
  margin-top: 0.12rem;
  flex-shrink: 0;
}

.lp-oauth {
  background: var(--bg-card-gradient, #fff);
  border: 1px solid var(--bs-border-color, rgba(0, 0, 0, 0.12));
  border-radius: 0 0 1.4rem 1.4rem;
  padding: 1.25rem 2rem 1.75rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
}
.lp-divider {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}
.lp-divider::before, .lp-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--bs-border-color, rgba(0, 0, 0, 0.12));
}
.lp-divider span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, rgba(0, 0, 0, 0.45));
  white-space: nowrap;
}
.lp-oauth__buttons {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.lp-oauth__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.72rem 1rem;
  border-radius: 0.75rem;
  border: 1.5px solid var(--bs-border-color, rgba(0, 0, 0, 0.14));
  background: transparent;
  color: var(--bs-body-color, #111);
  font-size: 0.9rem;
  font-weight: 600;
  font-family: inherit;
  cursor: not-allowed;
  opacity: 0.62;
  transition: opacity 0.18s ease;
}
.lp-oauth__btn:hover { opacity: 0.78; }
.lp-oauth__icon { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.lp-oauth__fb-icon { font-size: 1.15rem; color: #1877f2; flex-shrink: 0; }
.lp-oauth__soon {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.18rem 0.45rem;
  border-radius: 999px;
  background: rgba(var(--bs-primary-rgb, 52, 89, 230), 0.12);
  color: var(--bs-primary, #3459e6);
}

.lp-footer {
  margin-top: 1.2rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--bs-secondary-color, rgba(0, 0, 0, 0.52));
}
.lp-footer a {
  color: var(--bs-primary, #3459e6);
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.15rem;
}
.lp-footer a:hover { text-decoration: underline; }

[data-bs-theme=dark] .lp-form-card,
[data-bs-theme=dark] .lp-oauth {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.09);
}
[data-bs-theme=dark] .lp-oauth {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.24);
}
[data-bs-theme=dark] .lp-form-card .form-control::placeholder { color: rgba(255, 255, 255, 0.22); }
[data-bs-theme=dark] .lp-form-card .form-control:focus { box-shadow: 0 0 0 3.5px rgba(77, 163, 255, 0.2); }
[data-bs-theme=dark] .lp-form-card .form-control:not(:placeholder-shown):not(:focus) {
  border-color: rgba(var(--bs-success-rgb, 47, 179, 128), 0.35);
}
[data-bs-theme=dark] .lp-oauth__btn { color: #e0e0e0; border-color: rgba(255, 255, 255, 0.1); }

@media (max-width: 575.98px) {
  .lp-form-card { padding: 1.4rem 1.25rem 1.4rem; }
  .lp-oauth { padding: 1.1rem 1.25rem 1.5rem; }
  .lp-header__title { font-size: 1.45rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   COURSE DETAIL PAGE (node--course.tpl.php / www2/pages/course-detail.php)
   Ported from www/sites/all/themes/business/css/override.css. The old
   file also carried a .cd-hero / .cd-stats-strip block (banner-style hero
   with an overlay + stat pills) — the actual node--course.tpl.php markup
   never used it (course-detail-page has no hero wrapper, just a plain
   breadcrumb nav), so it's dead CSS and is not ported here.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Scroll animations (mirrors www2/assets/js/site.js's IntersectionObserver) ── */
.tile-animate-ease {
  transition-timing-function: cubic-bezier(.22, .68, 0, 1.2);
}
.course-scroll-animate:not(.is-visible) {
  opacity: 0;
}
.course-scroll-animate.is-visible {
  opacity: 1;
}

/* ── Breadcrumbs ──────────────────────────────────────────── */
.bread-crumbs {
  padding: .85rem 0;
}
.bread-crumbs .breadcrumb {
  margin-bottom: 0;
  flex-wrap: wrap;
  align-items: center;
  font-size: .85rem;
}
.bread-crumbs .breadcrumb-item + .breadcrumb-item {
  padding-left: .5rem;
}
.bread-crumbs .breadcrumb-item + .breadcrumb-item::before {
  padding-right: .5rem;
  content: "\f105";
  font-family: "Font Awesome 7 Free"; /* matches the FA 7.0.1 CDN pinned in www2/includes/layout.php — a stale "6" here silently dropped this glyph */
  font-weight: 900;
  font-size: .65rem;
  color: var(--bs-secondary-color, #adb5bd);
  vertical-align: middle;
}
.bread-crumbs .breadcrumb-item a {
  color: var(--bs-secondary-color, #6c757d);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease;
}
.bread-crumbs .breadcrumb-item a:hover,
.bread-crumbs .breadcrumb-item a:focus-visible {
  color: var(--bs-primary);
  text-decoration: underline;
}
.bread-crumbs .breadcrumb-item.active {
  color: var(--bs-body-color);
  font-weight: 600;
  max-width: 28ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767.98px) {
  .bread-crumbs .breadcrumb-item.active { max-width: 18ch; }
}
@media (max-width: 380px) {
  .bread-crumbs .breadcrumb-item.active { max-width: 13ch; }
}

/* ── Page layout ─────────────────────────────────────────── */
.cd-divider {
  border-color: var(--bs-border-color);
  margin: 2.5rem 0;
  opacity: .6;
}

/* ── Sections ────────────────────────────────────────────── */
.cd-section { margin-bottom: .5rem; }

.cd-section-header {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1.25rem;
}
.cd-section-header > i { font-size: 1.1rem; flex-shrink: 0; }
.cd-section-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0;
  color: var(--bs-body-color);
}

.cd-prose {
  font-size: .975rem;
  line-height: 1.75;
  color: var(--bs-body-color);
}
.cd-prose p { margin-bottom: 1rem; }
.cd-prose h2, .cd-prose h3, .cd-prose h4 { margin-top: 1.5rem; font-weight: 700; }

.cd-prose--collapsed {
  position: relative;
  max-height: 12rem;
  overflow: hidden;
}
.cd-prose--collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3.5rem;
  background: linear-gradient(to bottom, transparent, var(--bs-body-bg));
  pointer-events: none;
}
.cd-prose-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .75rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--bs-primary);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.cd-prose-toggle:hover { text-decoration: underline; }

/* ── Topic cards grid ────────────────────────────────────── */
.cd-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .75rem;
}
.cd-topics-grid--lessons {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .cd-topics-grid--lessons { grid-template-columns: 1fr; }
}
.cd-topic-card {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: var(--bg-card-gradient);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--r-lg);
  padding: .75rem 1rem;
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cd-topic-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.cd-topic-card__accent {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--bs-primary);
  border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.cd-topic-card__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  min-width: 0;
}
.cd-topic-card__name {
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--bs-body-color);
}
.cd-topic-card__meta { flex-shrink: 0; margin-left: .5rem; }
.cd-topic-card__check { font-size: .8rem; flex-shrink: 0; }

/* ── Reference cards ─────────────────────────────────────── */
.cd-ref-card {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  background: var(--bg-card-gradient);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--r-lg);
  padding: .85rem 1rem;
  height: 100%;
  transition: transform .18s ease, box-shadow .18s ease;
}
.cd-ref-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.cd-ref-card__icon {
  width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--tint-info-soft);
  border-radius: var(--r-md);
  flex-shrink: 0;
}
.cd-ref-card__body { flex: 1; min-width: 0; }
.cd-ref-card__title {
  font-size: .875rem;
  font-weight: 600;
  color: var(--bs-body-color);
  text-decoration: none;
  display: block;
  word-break: break-word;
}
a.cd-ref-card__title:hover { color: var(--bs-primary); text-decoration: underline; }

/* ── Learn Path: locked topic-card variant ──────────────── */
.cd-topic-card--locked { opacity: .82; }
.cd-topic-card--locked .cd-topic-card__accent { background: var(--bs-secondary-color); }
.cd-lesson-quiz-heading {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--bs-secondary-color);
  margin: 1rem 0 .6rem;
}

/* ── Sidebar ─────────────────────────────────────────────── */
.cd-sidebar {
  position: sticky;
  top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (max-width: 991px) {
  .cd-sidebar { position: static; }
}
.cd-sidebar-card {
  background: var(--bg-card-gradient);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.cd-sidebar-card__header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .9rem 1.1rem;
  border-bottom: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg, rgba(0,0,0,.03));
  font-size: .875rem;
}
.cd-sidebar-card__body { padding: 1.1rem; }

.cd-stats-list .list-group-item {
  background: transparent;
  border-color: var(--bs-border-color);
  padding: .65rem 1.1rem;
  font-size: .85rem;
}
.cd-enrol-social { font-size: .84rem; }

/* ── Mobile CTA (sidebar card sits below all body content once it stacks) ── */
.cd-mobile-cta {
  background: var(--bg-card-gradient);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--r-2xl);
  box-shadow: var(--shadow-card);
  padding: 1rem;
}

/* ── Social share buttons ────────────────────────────────── */
.cd-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  font-size: 1rem;
  color: #fff;
  text-decoration: none;
  transition: transform .16s ease, filter .16s ease;
  flex-shrink: 0;
}
.cd-share-btn:hover { transform: scale(1.12); filter: brightness(1.15); color: #fff; }
.share-facebook  { background: #1877f2; }
.share-twitter   { background: #000; }
.share-linkedin  { background: #0a66c2; }
.share-whatsapp  { background: #25d366; }

.cd-copy-link .form-control {
  font-size: .75rem;
  color: var(--bs-secondary-color);
}

/* ── Dark theme overrides for detail page ────────────────── */
[data-bs-theme="dark"] .cd-topic-card,
[data-bs-theme="dark"] .cd-ref-card,
[data-bs-theme="dark"] .cd-sidebar-card,
[data-bs-theme="dark"] .cd-mobile-cta {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
}
[data-bs-theme="dark"] .cd-sidebar-card__header {
  background: rgba(255,255,255,.04);
}
[data-bs-theme="dark"] .cd-stats-list .list-group-item {
  border-color: rgba(255,255,255,.08);
}

/* ── Fixed bottom "Start Learning" / dashboard CTA ─────────
   Always on screen (not just mobile) so guests have a persistent, hard-to-
   miss path back into the preview/registration flow. body.has-fixed-cta
   (set by course-detail.php) gets bottom padding so the bar never covers
   the footer once the page is scrolled all the way down — replaces the old
   Drupal body.node-type-course convention. ── */
body.has-fixed-cta {
  padding-bottom: 92px;
}
@media (max-width: 575px) {
  body.has-fixed-cta { padding-bottom: 80px; }
}

.cd-fixed-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1020; /* just below .site-header's 1030 */
  background: linear-gradient(90deg, var(--bs-primary) 0%, #6f42c1 100%);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .18);
  padding: .85rem 0;
}
.cd-fixed-cta__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.cd-fixed-cta__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, .18);
  border-radius: 50%;
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
  animation: cdFixedCtaPulse 1.7s ease-in-out infinite;
}
@keyframes cdFixedCtaPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, .4); }
  50%      { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}
.cd-fixed-cta__text {
  flex: 1;
  min-width: 0;
  color: #fff;
  line-height: 1.25;
  text-decoration: none;
}
.cd-fixed-cta__text:hover strong { text-decoration: underline; }
.cd-fixed-cta__text strong {
  display: block;
  font-size: 1.02rem;
  font-weight: 700;
}
.cd-fixed-cta__text span {
  display: block;
  font-size: .78rem;
  opacity: .85;
}
.cd-fixed-cta__btn {
  flex-shrink: 0;
  font-weight: 700;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .cd-fixed-cta__text span { display: none; }
  .cd-fixed-cta__text strong { font-size: .92rem; }
  .cd-fixed-cta__icon { width: 2.5rem; height: 2.5rem; font-size: 1.05rem; }
}

/* Logged-in variant — static, no animation, no urgency framing needed */
.cd-fixed-cta--dashboard {
  background: var(--bs-body-bg);
  border-top: 1px solid var(--bs-border-color);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
}
.cd-fixed-cta--dashboard .cd-fixed-cta__inner { justify-content: center; }
.cd-fixed-cta--dashboard .cd-fixed-cta__btn { width: 100%; max-width: 420px; }

@media (prefers-reduced-motion: reduce) {
  .cd-fixed-cta__icon { animation: none; }
}

[data-bs-theme="dark"] .cd-fixed-cta--dashboard {
  background: var(--bs-tertiary-bg, #1a1d24);
  border-color: rgba(255, 255, 255, .09);
}

/* ── Average rating block ────────────────────────────────── */
.cd-avg-rating {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  background: var(--bg-card-gradient);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--r-xl);
  padding: 1rem 1.5rem;
}
.cd-avg-rating__score {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--bs-body-color);
}

/* ── Star row ────────────────────────────────────────────── */
.cd-stars-display { display: inline-flex; gap: .2rem; }
.cd-stars-display .fa-star { font-size: .95rem; }
.cd-stars-display--sm .fa-star { font-size: .72rem; }

/* ── Reviews list ────────────────────────────────────────── */
.cd-reviews-list {
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.cd-review-item {
  background: var(--bg-card-gradient);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--r-lg);
  padding: .9rem 1rem;
  transition: box-shadow .16s ease;
}
.cd-review-item:hover { box-shadow: var(--shadow-card); }

.cd-review-avatar {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bs-primary), #6a8eff);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

[data-bs-theme="dark"] .cd-avg-rating,
[data-bs-theme="dark"] .cd-review-item {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
}

/* ── Ad placeholders (.ad-space matches coursesite/src/assets/scss/util.scss
   exactly; the size modifiers were never styled on either the old Drupal
   site or the Vue dashboard — plain unstyled slots waiting on a real ad
   network integration. Given a dashed placeholder box here so an empty
   slot doesn't look like a layout bug in the meantime.) ── */
.ad-space {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}
.ad-space img { text-align: center; display: inline; }
.ad720x90,
.ad-space-300x250 {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--r-md);
  color: var(--bs-secondary-color);
  font-size: .75rem;
  background: var(--bs-tertiary-bg, rgba(0,0,0,.02));
}
.ad720x90 { min-height: 90px; }
.ad-space-300x250 { min-height: 250px; }