/* ==========================================================================
   1. BRAND FONTS, DESIGN TOKENS & GLOBALS
   ========================================================================== */

/* Load Custom Brand Font (New Edge) */
@font-face {
  font-family: "New Edge";
  src: url("https://get.contentsquare.com/hubfs/Customer%20Education/CS%20University/newedge-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "New Edge";
  src: url("https://get.contentsquare.com/hubfs/Customer%20Education/CS%20University/newedge-regular.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "New Edge";
  src: url("https://get.contentsquare.com/hubfs/Customer%20Education/CS%20University/newedge-semibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "New Edge";
  src: url("https://get.contentsquare.com/hubfs/Customer%20Education/CS%20University/newedge-semibold-italic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
}

:root {
  /* Font Family Tokens */
  --font-heading: 'New Edge', sans-serif;
  --font-body: 'Inter', sans-serif;
  
  /* Core Brand Hexes */
  --color-dark: #1A1C1E;
  --color-primary: #CD3246;         /* Primary Red */
  --color-primary-hover: #A82838;   /* Primary Red Hover */
  --color-hero-burgundy: #7C0033;   /* Burgundy Hero Background */
  --color-callout-green: #002827;   /* Deep Dark Green Callout */
  --color-hero-pink: #FFE3E3;       /* Light Pink Inner Hero */
  --color-white: #FFFFFF;
  --color-filter-divider: #D5D5D5;  /* Filter Group Heading Divider Line */
}

/* Base Reset & Typography (Scoped strictly to Skilljar elements) */
body {
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-dark);
  background-color: #FAFAFA;
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

#skilljar-content h1, #main-container h1 { 
  font-family: var(--font-heading) !important; 
  font-size: 40px !important; 
  color: var(--color-dark) !important; 
  font-weight: 400 !important; 
  margin: 0 0 16px 0 !important; 
}

#skilljar-content h2, #main-container h2 { 
  font-family: var(--font-heading) !important; 
  font-size: 32px !important; 
  color: var(--color-dark) !important; 
  font-weight: 400 !important; 
  margin: 0 0 16px 0 !important; 
}

#skilljar-content h3, #main-container h3 { 
  font-family: var(--font-body) !important; 
  font-size: 20px !important; 
  color: var(--color-dark) !important; 
  font-weight: 700 !important; 
  margin: 0 0 8px 0 !important; 
}

#skilljar-content p:not(.dateTime *), #main-container p:not(.dateTime *) {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--color-dark) !important;
  font-weight: 400 !important;
  margin: 0 0 16px 0 !important;
  line-height: 1.5 !important;
}


/* ==========================================================================
   2. LAYOUT CONTAINERS & GRID ENGINE
   ========================================================================== */
/* Fluid Centered Main Container */
.sj-container {
  width: 92% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.sj-main-content {
  padding: 24px 0 64px 0;
}

.sj-section-header {
  margin-bottom: 20px;
}

/* Dynamic Grid Engine (Fills Viewport Width Automatically) */
.sj-card-grid {
  display: grid !important;
  gap: 24px !important;
  margin-bottom: 40px !important;
  width: 100% !important;
}

.sj-grid-3 { grid-template-columns: repeat(auto-fill, minmax(30%, 1fr)) !important; }
.sj-grid-4 { grid-template-columns: repeat(auto-fill, minmax(22%, 1fr)) !important; }

@media (max-width: 1024px) {
  .sj-grid-3, .sj-grid-4 { grid-template-columns: repeat(auto-fill, minmax(45%, 1fr)) !important; }
}

@media (max-width: 640px) {
  .sj-grid-3, .sj-grid-4 { grid-template-columns: 1fr !important; }
}

/* Remove Skilljar 350px Left Margin Push on Filtered Pages */
body.catalog-filters #skilljar-content {
  margin-left: 0 !important;
}


/* ==========================================================================
   3. REUSABLE CTA BUTTONS & ANNOUNCEMENT BANNER
   ========================================================================== */
/* Announcement Banner (Fluid Width) */
.sj-announcement-banner {
  background-color: var(--color-hero-pink) !important;
  border-radius: 8px !important;
  padding: 12px 24px !important;
  width: 92% !important;
  margin: 16px auto 24px auto !important;
  text-align: center !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: var(--color-dark) !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sj-announcement-banner a,
.sj-announcement-link {
  color: var(--color-dark) !important;
  text-decoration: none !important;
  opacity: 1 !important;
}

.sj-announcement-banner a:hover,
.sj-announcement-link:hover {
  color: var(--color-dark) !important;
  opacity: 1 !important;
  text-decoration: underline !important;
}

.sj-hero-actions, .sj-callout-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Primary CTA Button (Solid Red -> White Hover) */
.sj-cta-v1 {
  display: inline-block !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background-color: var(--color-primary) !important; /* #CD3246 */
  color: var(--color-white) !important;
  border-radius: 24px !important;
  padding: 10px 24px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  border: none !important;
}

.sj-cta-v1:hover {
  background-color: var(--color-white) !important;
  color: var(--color-dark) !important; /* #1A1C1E */
  text-decoration: none !important;
}

/* Secondary CTA Link (White Text -> Underline Hover) */
.sj-cta-v2 {
  display: inline-block !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  background: transparent !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 0 !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

.sj-cta-v2:hover {
  background: transparent !important;
  color: var(--color-white) !important;
  text-decoration: underline !important;
}

/* Secondary Underlined Text Link */
.sj-cta-v2-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-white) !important;
  text-decoration: underline;
  padding: 8px 12px;
  background: transparent !important;
}


/* ==========================================================================
   4. BANNERS (HOMEPAGE HERO & DUAL-IMAGE INNER CONTENT BANNERS)
   ========================================================================== */

/* --- A. Homepage Main Hero Banner --- */
.sj-hero-banner {
  background-color: var(--color-hero-burgundy) !important;
  border-radius: 12px !important;
  padding: 48px !important;
  width: 92% !important;
  margin: 0 auto 56px auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 32px !important;
  box-sizing: border-box !important;
  color: #FFFFFF !important;
  position: relative !important;
  overflow: visible !important;
}

.sj-hero-banner-content,
.sj-hero-content {
  flex: 1 1 60% !important;
}

/* Hero Dark-Background Text Overrides */
#skilljar-content .sj-hero-banner-content h1,
#skilljar-content .sj-hero-content h1 { 
  color: #FFFFFF !important; 
  font-family: var(--font-heading) !important;
  font-size: 40px !important; 
  font-weight: 400 !important;
  margin-bottom: 16px !important;
}

#skilljar-content .sj-hero-banner-content p,
#skilljar-content .sj-hero-content p { 
  color: #FFFFFF !important; 
  font-family: var(--font-body) !important;
  font-size: 16px !important; 
  font-weight: 400 !important;
  opacity: 0.95 !important; 
  margin-bottom: 24px !important;
}

.sj-hero-media,
.sj-hero-banner-image {
  flex: 0 0 35% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

/* Image Overflow Rules */
.sj-hero-media img,
.sj-hero-banner-image img {
  width: 100% !important;
  height: auto !important;
  position: relative !important;
  z-index: 2 !important;
  margin-bottom: -5% !important;
  transform: translateY(2.5%) !important;
}


/* --- B. Inner Catalog Content Banners (Dual-Image Layered & Single Graphic) --- */
.sj-content-banner {
  border-radius: 12px !important;
  padding: 0 48px !important;
  height: 345px !important;              /* Canvas height matching Figma Rectangle 12 */
  min-height: 345px !important;
  max-height: 345px !important;
  width: 92% !important;
  margin: 48px auto 48px auto !important;/* Margin compensation for percentage overflow */
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 32px !important;
  box-sizing: border-box !important;
  position: relative !important;
  overflow: visible !important;          /* Allows percentage graphics to bleed past canvas */
  border: none !important;               /* Strips borders globally from content banners */
}

.sj-content-banner-body {
  flex: 1 1 50% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: 100% !important;
}

.sj-content-banner-media {
  flex: 0 0 45% !important;
  height: 100% !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  overflow: visible !important;
}

/* Primary Artwork (Dual-Image Setup) - Percentage Scaling */
.sj-banner-img-primary {
  height: 112% !important;               /* Forces card graphic 12% taller than 345px banner */
  width: auto !important;
  max-width: none !important;
  position: relative !important;
  top: -6% !important;                    /* Centers overflow evenly top & bottom */
  z-index: 1 !important;
  display: block !important;
  border-radius: 12px !important;        /* Rounds hard rectangle corners */
  object-fit: contain !important;
}

/* Secondary Badge - Anchored Relative to Media Container % */
.sj-banner-img-secondary {
  position: absolute !important;
  bottom: -4% !important;                /* Anchors cleanly over bottom-left corner of primary card */
  left: -8% !important;
  width: 32% !important;
  max-width: 140px !important;
  height: auto !important;
  z-index: 2 !important;
  object-fit: contain !important;
  background: transparent !important;
  border-radius: 12px !important;        /* Clips baked-in white corner pixels from PNG graphic */
}

/* Single Overflowing Graphic (Webinar Hub) - Percentage Scaling */
.sj-banner-img-single {
  height: 118% !important;               /* Forces 18% overflow so collage fills banner cleanly */
  width: auto !important;
  max-width: none !important;
  display: block !important;
  position: relative !important;
  top: -5% !important;                   /* Centers image body vertically while top pie chart bleeds */
  z-index: 2 !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* Embedded Video Support Inside Content Banners */
.sj-content-banner-media iframe,
.sj-content-banner-media video {
  width: 100% !important;
  height: 200px !important;
  border-radius: 8px !important;
  border: none !important;
}

/* Light Pink Variant (Catalog / Certifications) */
.sj-content-banner-pink {
  background-color: var(--color-hero-pink) !important;
  border: none !important;
}
.sj-content-banner-pink h1 { color: var(--color-dark) !important; }
.sj-content-banner-pink p { color: #4B5563 !important; }

/* Dark Green Variant (Webinar Hub) */
.sj-content-banner-green {
  background-color: var(--color-callout-green) !important;
  color: #FFFFFF !important;
  border: none !important;
}
.sj-content-banner-green h1,
.sj-content-banner-green p { color: #FFFFFF !important; }

/* Ensure white typography inside dark green banner */
#skilljar-content .sj-content-banner-green h1,
.sj-content-banner-green h1 {
  color: #FFFFFF !important;
}

#skilljar-content .sj-content-banner-green p,
.sj-content-banner-green p {
  color: #FFFFFF !important;
  opacity: 0.9 !important;
}

/* Primary Red Variant (Get Started Catalog) */
.sj-content-banner-red {
  background-color: var(--color-primary) !important; /* #CD3246 */
  color: #FFFFFF !important;
  border: none !important;
  overflow: hidden !important; /* Keeps video strictly within banner bounds */
}

#skilljar-content .sj-content-banner-red h1,
.sj-content-banner-red h1,
#skilljar-content .sj-content-banner-red p,
.sj-content-banner-red p {
  color: #FFFFFF !important;
}

#skilljar-content .sj-content-banner-red p,
.sj-content-banner-red p {
  opacity: 0.95 !important;
}

/* In-Bounds Video Container */
.sj-banner-media-video {
  flex: 0 0 48% !important;
  max-width: 556px !important;
  aspect-ratio: 16 / 9 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.sj-banner-media-video iframe,
.sj-banner-media-video video {
  width: 100% !important;
  height: 100% !important;
  border-radius: 8px !important;
  border: none !important;
  display: block !important;
  object-fit: cover !important;
}

/* ==========================================================================
   5. NATIVE SKILLJAR COURSE GRID & CARDS
   ========================================================================== */
/* Grid Wrapper (Forces 3 Cards Per Row) */
#catalog-courses,
.course-listing,
#catalog-main-area #catalog-courses,
.sj-catalog-section #catalog-courses {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important; /* Exactly 4 wide */
  gap: 24px !important;
  width: 92% !important;
  margin: 0 auto 40px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Native Card Outer Shell */
a.coursebox-container {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 390px !important;
  margin: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  display: flex;
  flex-direction: column !important;
  padding: 0 0 52px 0 !important;
  position: relative !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

/* Guarantee filtered/hidden course cards remain hidden */
a.coursebox-container.not-found,
a.coursebox-container.hide,
a.coursebox-container.hidden,
a.coursebox-container[style*="display: none"] {
  display: none !important;
}

a.coursebox-container:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  border-color: #D1D5DB !important;
  text-decoration: none !important;
}

/* Image Thumbnail Container (Aspect-Ratio Containment) */
a.coursebox-container .coursebox-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9 !important; /* Standard thumbnail aspect ratio */
  margin: 0 !important;
  background-color: #F3F4F6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-bottom: 1px solid #E5E7EB !important;
}

a.coursebox-container .coursebox-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* Fits full graphic without cropping edges or text */
  display: block !important;
}

a.coursebox-container .coursebox-text {
  font-family: var(--font-body) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1A1C1E !important;
  line-height: 1.35 !important;
  margin: 16px 16px 8px 16px !important;
  padding: 0 !important;
}

a.coursebox-container .coursebox-text-description {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: #4B5563 !important;
  line-height: 1.4 !important;
  margin: 0 16px 16px 16px !important;
  padding: 0 !important;
  flex-grow: 1 !important;
  display: -webkit-box !important;
  line-clamp: 3 !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Content-Type Pill (Bottom-Left) */
a.coursebox-container .pill {
  display: inline-block !important;
  position: absolute !important;
  bottom: 16px !important;
  left: 16px !important;
  right: auto !important;
  top: auto !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: #5252DB !important;
  background-color: #EEF2FF !important;
  border: 1px solid #C7D2FE !important;
  border-radius: 12px !important;
  padding: 3px 10px !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  z-index: 2 !important;
}

/* Duration Label (Bottom-Right) */
a.coursebox-container .course-time,
a.coursebox-container .coursebox-callout {
  position: absolute !important;
  bottom: 18px !important;
  right: 16px !important;
  left: auto !important;
  top: auto !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: #6B7280 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
}

/* Hide Raw Tags */
a.coursebox-container .coursebox-tags {
  display: none !important;
}

/* Left aligned Section Header above Catalog Cards */
#skilljar-content .sj-featured-title,
#skilljar-content h2.sj-featured-title,
.sj-featured-title {
  font-family: var(--font-heading) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  color: var(--color-dark) !important;
  text-align: left !important;
  margin: 40px auto 24px auto !important;
  width: 92% !important;
}

/* Responsive Grid Adjustments */
@media (max-width: 1024px) {
  #catalog-courses,
  .course-listing {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  #catalog-courses,
  .course-listing {
    grid-template-columns: 1fr !important;
  }
}

/* Course Registration & Completion Ribbons */
#catalog-courses .sj-course-ribbon-registered,
#catalog-courses .registered {
  color: var(--color-white) !important;
  background-color: var(--color-primary) !important;
  border: none !important;
}

#catalog-courses .sj-ribbon-complete,
#catalog-courses .complete {
  color: var(--color-white) !important;
  background-color: var(--color-hero-burgundy) !important;
  border: none !important;
}

/* Reset the hover dropshadow from the Skilljar native settings */

/* Remove Skilljar stacked deck/shadow pseudo-elements on Paths & Series cards */
a.coursebox-container.sj-course-series::before,
a.coursebox-container.sj-course-series::after,
a.coursebox-container.sj-path::before,
a.coursebox-container.sj-path::after,
a.coursebox-container.sj-course-series:hover::before,
a.coursebox-container.sj-course-series:hover::after,
a.coursebox-container.sj-path:hover::before,
a.coursebox-container.sj-path:hover::after {
  content: none !important;
  display: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* ==========================================================================
   6. MID-PAGE DARK GREEN AND WHITE CALLOUT BANNERS
   ========================================================================== */
.sj-callout-banner-green {
  background-color: var(--color-callout-green) !important;
  border-radius: 12px !important;
  padding: 36px 40px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  color: #FFFFFF !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important; /* Centers child element horizontally */
}

.sj-callout-container-green {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 60% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  gap: 0 !important;
}


.sj-callout-content-green {
  width: 100% !important;
}

/* Callout Text Formatting */
#skilljar-content .sj-callout-banner-green h3,
#skilljar-content .sj-callout-title-green {
  font-family: var(--font-heading) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
  margin: 0 0 10px 0 !important;
  white-space: nowrap !important;
}

#skilljar-content .sj-callout-banner-green p,
#skilljar-content .sj-callout-text-green {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: #E5E7EB !important;
  margin: 0 0 24px 0 !important;
  max-width: 100% !important;
  line-height: 1.45 !important;
}

/* Direct CTA Button Alignment & Spacing */
#skilljar-content .sj-callout-content-green .sj-cta-v1 {
  display: inline-block !important;
  margin-right: 28px !important;
  vertical-align: middle !important;
}

#skilljar-content .sj-callout-content-green .sj-cta-v2 {
  display: inline-block !important;
  color: #FFFFFF !important;
  text-decoration: underline !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
}

.sj-callout-banner-white {
  background-color: var(--color-white) !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  color: var(--color-dark) !important;
  display: flex !important;
  align-items: center !important;
}

.sj-callout-container-white {
  display: flex !important;
  flex-direction: row !important;      /* Displays image and text side-by-side */
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  gap: 24px !important;               /* Horizontal gap between image and text */
}

/* Image Container & Sizing */
.sj-callout-media-white {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sj-callout-img-white {
  width: 190px !important;             /* Match size from reference design */
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.sj-callout-content-white {
  flex: 1 !important;
}

/* Callout Text Formatting */
#skilljar-content .sj-callout-banner-white h3,
#skilljar-content .sj-callout-title-white {
  font-family: var(--font-heading) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--color-dark) !important;
  margin: 0 0 8px 0 !important;
  white-space: normal !important;
}

#skilljar-content .sj-callout-banner-white p,
#skilljar-content .sj-callout-text-white {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: var(--color-dark) !important;
  margin: 0 0 20px 0 !important;
  max-width: 100% !important;
  line-height: 1.4 !important;
}

/* Direct CTA Button Alignment & Spacing */
#skilljar-content .sj-callout-content-white .sj-cta-v1 {
  display: inline-block !important;
  margin-right: 16px !important;
  vertical-align: middle !important;
}

#skilljar-content .sj-callout-content-white .sj-cta-v1:hover {
  box-shadow: inset 0 0 0 2px var(--color-dark) !important;
  border: none !important; /* Ensure no standard border is added */
}

#skilljar-content .sj-callout-content-white .sj-cta-v2 {
  display: inline-block !important;
  color: var(--color-dark) !important;
  font-weight: 600 !important;
  vertical-align: middle !important;
}

/* ==========================================================================
   2-COLUMN SPLIT ROW (CALLOUT BANNER + CALENDAR WIDGET)
   ========================================================================== */
.sj-split-row {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
  margin: 32px auto 40px auto !important;
  width: 90% !important;
  box-sizing: border-box !important;
}

.sj-split-row .sj-callout-banner,
.sj-split-row #webinar-calendar-widget,
.sj-split-row .cs-calendar-widget {
  width: 100% !important;
  margin: 0 !important;
  height: 100% !important;
  box-sizing: border-box !important;
}

/* Mobile Responsive Fallback */
@media (max-width: 875px) {
  .sj-split-row {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   CALENDAR WIDGET STYLES
   ========================================================================== */
/* Outer Dark Purple Frame Container */
#skilljar-content .cs-calendar,
.cs-calendar {
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.05) !important;
  background: var(--color-hero-burgundy) !important;
  border-radius: 15px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
}

/* Inner Light Purple Container */
#skilljar-content div.cs-calendar .inner,
div.cs-calendar .inner {
  background: var(--color-hero-pink) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  position: relative !important;
  box-sizing: border-box !important;
  overflow: visible !important; /* Must remain visible so pseudo-element notches do not get clipped */
}

/* Header & Footer Shared Bar Styling */
#skilljar-content .cs-calendar .header-bar,
#skilljar-content .cs-calendar .footer-bar,
.cs-calendar .header-bar,
.cs-calendar .footer-bar {
  background: var(--color-hero-burgundy) !important;
  display: inline-block !important;
  font-size: 16px !important;
  font-weight: bold !important;
  position: relative !important;
  color: var(--color-white) !important;
}

/* Notch Curved Pseudo-Elements Setup */
#skilljar-content .cs-calendar .header-bar:before,
#skilljar-content .cs-calendar .header-bar:after,
#skilljar-content .cs-calendar .footer-bar:before,
#skilljar-content .cs-calendar .footer-bar:after,
.cs-calendar .header-bar:before,
.cs-calendar .header-bar:after,
.cs-calendar .footer-bar:before,
.cs-calendar .footer-bar:after {
  content: "" !important;
  position: absolute !important;
  background-color: transparent !important;
  height: 16px !important;
  width: 16px !important;
}

/* Header Bar (Top-Left Notch) */
#skilljar-content .cs-calendar .header-bar,
.cs-calendar .header-bar {
  border-bottom-right-radius: 8px !important;
  padding: 12px 32px 12px 16px !important;
  align-self: flex-start !important;
}

#skilljar-content .cs-calendar .header-bar:before,
#skilljar-content .cs-calendar .header-bar:after,
.cs-calendar .header-bar:before,
.cs-calendar .header-bar:after {
  border-top-left-radius: 8px !important;
  box-shadow: 0 -8px 0 0 var(--color-hero-burgundy) !important;
}

#skilljar-content .cs-calendar .header-bar:before,
.cs-calendar .header-bar:before {
  bottom: -16px !important;
  left: 0 !important;
}

#skilljar-content .cs-calendar .header-bar:after,
.cs-calendar .header-bar:after {
  right: -16px !important;
  top: 0 !important;
}

/* Footer Bar (Bottom-Right Notch) */
#skilljar-content .cs-calendar .footer-bar,
.cs-calendar .footer-bar {
  border-top-left-radius: 8px !important;
  padding: 8px 16px 8px 24px !important;
  align-self: flex-end !important;
}

#skilljar-content .cs-calendar .footer-bar:before,
#skilljar-content .cs-calendar .footer-bar:after,
.cs-calendar .footer-bar:before,
.cs-calendar .footer-bar:after {
  border-bottom-right-radius: 8px !important;
  box-shadow: 0 8px 0 0 var(--color-hero-burgundy) !important;
}

#skilljar-content .cs-calendar .footer-bar:before,
.cs-calendar .footer-bar:before {
  top: -16px !important;
  right: 0 !important;
}

#skilljar-content .cs-calendar .footer-bar:after,
.cs-calendar .footer-bar:after {
  left: -16px !important;
  bottom: 0 !important;
}

#skilljar-content .cs-calendar .footer-bar img,
.cs-calendar .footer-bar img {
  height: 20px !important;
  width: auto !important;
  display: block !important;
}

/* Webinar Event List Layout */
#skilljar-content div.cs-calendar .webinar-list,
div.cs-calendar .webinar-list {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* Centers child cards horizontally */
  gap: 10px !important;
  padding: 8px 16px !important;
  flex-grow: 1 !important;
  justify-content: center !important;
}

/* Event Cards */
#skilljar-content div.cs-calendar a.event,
div.cs-calendar a.event {
  width: 70% !important;
  margin: 0 auto !important;     /* Ensures auto-centering fallback */
  background: white !important;
  border-radius: 8px !important;
  transition: ease-in 0.2s all !important;
  display: flex !important;
  color: #5252DB !important;
  text-decoration: none !important;
  overflow: hidden !important;
}

#skilljar-content div.cs-calendar a.event:hover,
div.cs-calendar a.event:hover {
  transform: scale(1.01) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
  text-decoration: none !important;
}

/* Event Date/Time Left Badge */
#skilljar-content div.cs-calendar a.event .dateTime,
div.cs-calendar a.event .dateTime {
  background: var(--color-hero-burgundy) !important;
  color: var(--color-white) !important;
  padding: 8px 16px !important;
  text-align: center !important;
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  min-width: 100px !important;
}

#skilljar-content div.cs-calendar a.event .dateTime p,
div.cs-calendar a.event .dateTime p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  color: var(--color-white) !important;
}

/* Event Description Box */
#skilljar-content div.cs-calendar a.event .description,
div.cs-calendar a.event .description {
  padding: 8px 16px !important;
  flex-grow: 1 !important;
  color: #5252DB !important;
  display: flex !important;
  align-items: center !important;
}

#skilljar-content div.cs-calendar a.event .description h4,
div.cs-calendar a.event .description h4 {
  color: #1A1C1E !important;
  font-size: 16px !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   7. EXPLORE ALL CONTENT CARDS & 4-COLUMN CATALOG PAGE GRID
   ========================================================================== */
/* 4-Column Split Grid for Catalog Pages */
#sj-pages-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* 4 Columns Wide */
  gap: 24px !important;
  width: 92% !important;
  margin: 0 auto 40px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#sj-pages-grid a.coursebox-container {
  width: 100% !important;
  margin: 0 !important;
}

.sj-explore-card {
  width: 100% !important;
  min-height: 390px !important;
  background: #FFFFFF !important;
  border-radius: 12px !important;
  border: 1px solid #E5E7EB !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.sj-explore-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
  border-color: #D1D5DB !important;
  text-decoration: none !important;
}

.sj-explore-media {
  height: 160px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.pink-bg { background-color: #FCE7F3 !important; color: #831843 !important; }
.navy-bg { background-color: #1E1B4B !important; color: #FFFFFF !important; }
.coral-bg { background-color: #FFEDD5 !important; color: #9A3412 !important; }
.purple-bg { background-color: #DDD6FE !important; color: #4C1D95 !important; }

.sj-explore-body {
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.sj-explore-title {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1A1C1E !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.35 !important;
}

.sj-explore-description {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: #4B5563 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

@media (max-width: 1024px) {
  #sj-pages-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  #sj-pages-grid {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   8. FILTER SIDEBAR & CATALOG LAYOUT OVERRIDES
   ========================================================================== */

/* 1. Unify All Page & Container Background Colors to Pure White */
body,
body.catalog-filters,
#main-container,
#skilljar-content,
.catalog-filters #skilljar-content,
.white-bg-v2,
.grey-bg-d05,
#catalog-content,
.top-row,
.sj-courseboxes-v2 {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

/* Ensure Parent Wrappers Allow Graphics Overflow */
.catalog-header,
.catalog-center-width,
#skilljar-content .top-row,
#skilljar-content .catalog-center-width {
  overflow: visible !important;
}

/* 2. Set Reference Parent Container */
#main-container {
  position: relative !important;
}

/* 3. Desktop Positioning (Sidebar Absolute + Content Offset) */
@media only screen and (min-width: 875px) {
  /* Pin Sidebar Box to Left Edge */
  #catalog-left-nav,
  #catalog-left-nav.cbp-spmenu,
  #catalog-left-nav.cbp-spmenu-left,
  #catalog-left-nav.cbp-spmenu-vertical {
    position: absolute !important;
    top: 96px !important;              /* 72px Header + 24px Top Padding */
    left: 4% !important;               /* Aligns with Header 4% Padding */
    width: 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    height: fit-content !important;
    background: #FFFFFF !important;
    border: 1px solid #1A1C1E !important;/* Updated filter border color */
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    padding: 20px 16px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 10 !important;
  }

  /* Offset Content Area to Sit Cleanly Beside Sidebar */
  body.catalog-filters #skilljar-content,
  .catalog-filters #skilljar-content {
    margin-left: calc(4% + 292px) !important; /* 4% Edge + 260px Sidebar + 32px Gap */
    margin-right: 4% !important;
    padding-top: 24px !important;
    width: auto !important;
    float: none !important;
  }

  /* Reset Skilljar's Native Fixed-Width Grid Limits */
  #skilljar-content .catalog-center-width,
  #skilljar-content .top-row,
  #skilljar-content .row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Sidebar Elements Styling */
#catalog-left-nav .catalog-left-nav-wrapper {
  padding: 0 !important;
}

#catalog-left-nav .search-container {
  margin-bottom: 16px !important;
}

#catalog-left-nav .catalog-search-input {
  border: 1px solid #D1D5DB !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
}

#catalog-left-nav #catalog-reset {
  color: #5252DB !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  margin-bottom: 16px !important;
  display: inline-block !important;
}

#catalog-left-nav .filter-group-title {
  border-bottom: 2px solid var(--color-filter-divider) !important;
  padding-bottom: 6px !important;
  margin-top: 16px !important;
  margin-bottom: 12px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--color-dark) !important;
  font-family: var(--font-body) !important;
}

/* Hide all filter numbers*/
.filter-counter {
  display: none !important;
} 

/* ==========================================================================
   9. NATIVE SKILLJAR HEADER & TOP NAVIGATION OVERRIDES
   ========================================================================== */
#header {
  position: sticky !important;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px !important;
  background-color: var(--color-white) !important;
  border-bottom: none !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 4% !important;
  box-sizing: border-box !important;
}

#header #header-left {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  height: 100% !important;
  padding: 0 !important;
  float: none !important;
}

#header .header-logo-link {
  display: flex !important;
  align-items: center !important;
}

#header .header-center-img {
  max-height: 60px !important;
  height: auto !important;
  width: auto !important;
}

#header #header-right {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  height: 100% !important;
  float: none !important;
}

#header .search-container {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  position: relative !important;
}

#header #catalog-search-box {
  margin: 0 !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: auto !important;
}

#header #catalogSearchInput {
  padding: 6px 36px 6px 16px !important;
  border-radius: 20px !important;
  border: 1px solid #D1D5DB !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  height: 36px !important;
  width: 100% !important;
  min-width: 180px !important;
  box-shadow: none !important;
  background-color: #FFFFFF !important;
  margin: 0 !important;
}

#header #catalogSearchInput:focus {
  border-color: var(--color-primary) !important;
}

#header .catalog-search-input-button-wrapper {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: block !important;
  background: none !important;
  border: none !important;
}

#header .catalog-search-input-button {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  color: #6B7280 !important;
  cursor: pointer !important;
}

#header .account-nav {
  display: flex !important;
  align-items: center !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0 !important;             /* Prevents flexbox container from squishing */
}

#header .header-dropdown-button-v2 img {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  aspect-ratio: 1 / 1 !important;         /* Locks 1:1 circular proportions */
  flex-shrink: 0 !important;             /* Prevents image compression */
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

.sj-main-content, #skilljar-content {
  padding-top: 0px !important;
}

/* Fix Dual Search Magnifying Glass Icons */
.catalog-search-input-group::after,
.sj-search-input-group::after {
  content: none !important;
  display: none !important;
}

/* 2. Desktop Navigation (>= 1025px) */
@media (min-width: 1025px) {
  #header .burger,
  #header #toggle-header-mobile-dropdown {
    display: none !important;
  }

  /* Navigation Flex Container */
  #header .header-links-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;               /* Reduced slightly to accommodate wider 1-line links */
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
  }

  /* Header Links */
  #header .header-link {
    display: inline-block !important;
    max-width: none !important;         /* Replaced 140px cap to prevent premature wrapping */
    white-space: nowrap !important;     /* Keeps links on 1 line when space is available */
    text-align: center !important;
    font-family: var(--font-body) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: var(--color-dark) !important;
    text-decoration: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    line-height: 1.3 !important;
    vertical-align: middle !important;
  }

  #header .header-link:hover,
  #header .header-link.active {
    color: var(--color-primary) !important;
    border-bottom-color: var(--color-primary) !important;
  }
}

/* --- MOBILE & TABLET NAVIGATION (<= 1024px) --- */
@media (max-width: 1024px) {
  #header {
    padding: 0 16px !important;
    height: 64px !important;
  }

  #header .header-links-container {
    display: none !important;
  }

  #header .burger,
  #header #toggle-header-mobile-dropdown {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    color: var(--color-dark) !important;
    cursor: pointer !important;
  }

  #header #catalogSearchInput {
    min-width: 120px !important;
  }
}

/* Re-hide left-side duplicate search icon and native hidden elements */
#catalog-left-nav a.back-to-catalog,
#header #header-left .show-search,
#header #header-left .search-container,
#header #header-left .search-icon,
#header #header-left .search-toggle,
#header #header-left .header-search-icon,
#header .hide,
#header .back-to-catalog.hide {
  display: none !important;
}


/* ==========================================================================
   10. COMPACT WEBINAR CALENDAR WIDGET
   ========================================================================== */
.cs-calendar-widget {
  background-color: #C7D2FE !important;
  border-radius: 12px !important;
  padding: 20px !important;
  width: 92% !important;
  margin: 0 auto 32px auto !important;
  box-sizing: border-box !important;
  font-family: var(--font-body) !important;
}

.cs-calendar-header {
  font-weight: 700 !important;
  color: #1E1B4B !important;
  font-size: 16px !important;
  margin-bottom: 16px !important;
}

.cs-calendar-group {
  margin-bottom: 12px !important;
}

.cs-calendar-card {
  display: flex !important;
  background-color: #FFFFFF !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.2s ease !important;
  width: 100% !important;
}

.cs-calendar-card:hover {
  transform: translateY(-2px) !important;
  text-decoration: none !important;
}

.cs-calendar-time-badge {
  background-color: #A5B4FC !important;
  color: #1E1B4B !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 12px 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 25% !important;
  text-align: center !important;
  line-height: 1.2 !important;
}

.cs-calendar-title-box {
  padding: 10px 12px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1A1C1E !important;
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  line-height: 1.3 !important;
}

.cs-calendar-footer-link {
  display: block !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #4338CA !important;
  text-decoration: underline !important;
  margin-top: 16px !important;
}

/* ==========================================================================
   11. GENERALIZED COURSE OVERVIEW / DETAIL PAGE STYLES
   ========================================================================== */

/* Main Header Container & Background */
#skilljar-content .top-row-grey.top-row-white-v2 {
  background-color: #FFFFFF !important;
  padding: 32px 0 !important;
}

/* Course Title */
#skilljar-content .cp-summary-wrapper h1.break-word {
  font-family: "New Edge", "Inter", sans-serif !important;
  font-size: 36px !important;
  font-weight: 700 !important;
  color: #1A1C1E !important;
  margin-bottom: 12px !important;
}

/* Subtitle & Progress Text (Works for both Course Descriptions and "X of Y lessons") */
#skilljar-content .cp-summary-wrapper h2,
#skilljar-content .cp-summary-wrapper h2.cp-lessons,
#skilljar-content .cp-summary-wrapper .sj-course-info-wrapper h2,
#skilljar-content .cp-summary-wrapper .sj-text-x-of-y-lessons-completed {
  font-family: "Inter", sans-serif !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1A1C1E !important;
  margin-bottom: 20px !important;
  line-height: 1.4 !important;
}

/* Progress Bar Track & Fill (In-Progress State) */
#skilljar-content .cp-summary-wrapper .progress-bar {
  border: 1px solid #5252DB !important;
  background-color: #E6E6FF !important;
  border-radius: 10px !important;
  height: 8px !important;
  overflow: hidden !important;
  margin: 0 0 24px 0 !important;
}

#skilljar-content .cp-summary-wrapper .progress-bar-inner {
  background-color: #5252DB !important;
  border-radius: 10px !important;
}

/* Primary Action Wrapper (Aligns CTAs + Save Bookmark side-by-side) */
#skilljar-content .cp-summary-wrapper .purchase-button-wrapper,
#skilljar-content .cp-summary-wrapper #resume-button,
#skilljar-content .cp-summary-wrapper .sj-save-toggle-row-alignment {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

/* GENERALIZED PRIMARY CTA BUTTON 
   Targets: Register, Resume, Start, Re-take, and Activate buttons */
#skilljar-content .cp-summary-wrapper a.button,
#skilljar-content .cp-summary-wrapper a.purchase-button,
#skilljar-content .cp-summary-wrapper a.resume-button,
#skilljar-content .cp-summary-wrapper .license-code__activate-button {
  background-color: #020249 !important;
  border: 2px solid #020249 !important;
  border-radius: 24px !important;
  color: #FFFFFF !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 10px 32px !important;
  height: auto !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
}

#skilljar-content .cp-summary-wrapper a.button:hover,
#skilljar-content .cp-summary-wrapper a.purchase-button:hover,
#skilljar-content .cp-summary-wrapper a.resume-button:hover,
#skilljar-content .cp-summary-wrapper .license-code__activate-button:hover {
  background-color: #FFFFFF !important;
  color: #020249 !important;
  text-decoration: none !important;
}

/* Save / Bookmark Button */
#skilljar-content .sj-save-toggle-block__button {
  background-color: #FFFFFF !important;
  border: 2px solid #020249 !important;
  border-radius: 20px !important;
  color: #020249 !important;
  padding: 8px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease-in-out !important;
}

#skilljar-content .sj-save-toggle-block__button:hover {
  background-color: #EBECFD !important;
}

/* Promo Image Styling (Left or Right Column) */
#skilljar-content .dp-promo-image img,
#skilljar-content .cp-promo-image img {
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* Tabs Navigation (Curriculum / About this course) */
#skilljar-content .curriculum-v2 .tabs-wrapper-v2 {
  margin-top: 24px !important;
}

#skilljar-content .section-container.tabs section p.title a.curriculum-tab {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #5252DB !important;
  text-decoration: none !important;
}

#skilljar-content .section-container.tabs section.active p.title a.curriculum-tab {
  color: #020249 !important;
}

/* Section Header ("Course Overview") */
#skilljar-content .content h2 {
  font-weight: 700 !important;
}

#skilljar-content .content h2 .sj-course-time {
  font-weight: 700 !important;
}

/* Lesson List Links */
#skilljar-content #curriculum-list a.lesson-web-package {
  text-decoration: none !important;
  transition: background-color 0.2s ease !important;
}

#skilljar-content #curriculum-list a.lesson-web-package .title {
  font-family: "Inter", sans-serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #5252DB !important;
}

#skilljar-content #curriculum-list a.lesson-web-package:hover .title {
  text-decoration: underline !important;
}

/* General Skilljar Content Action Buttons */
#skilljar-content button:not([id*="hj"]):not([class*="hj"]), 
#skilljar-content .button:not([id*="hj"]):not([class*="hj"]), 
#skilljar-content .primary-button:not([id*="hj"]):not([class*="hj"]),
#main-container .top-row button:not([id*="hj"]):not([class*="hj"]), 
#main-container .top-row .button:not([id*="hj"]):not([class*="hj"]) {
  display: inline-block;
  vertical-align: middle;
  font-size: 16px;
  line-height: 16px;
  color: #fff;
  background-color: #020249;
  border-radius: 24px;
  height: fit-content;
  transition: ease 0.3s;
  border: 1px solid #020249;
  padding: 12px 20px;
  font-weight: bold;
}

/* ==========================================================================
   12. LESSON PAGE HEADER, DRAWER & FOOTER COMPLETE OVERRIDES
   ========================================================================== */

/* 1. Neutralize Skilljar Native Flexbox Container Rules */
.lesson-page#main-container,
#main-container.lesson-page {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  position: relative !important;
}

/* 2. Header Left Alignment & Hamburger/Close Toggle */
#main-container.lesson-page #header #header-left,
#header #header-left {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

/* Hide left nav button globally on all non-lesson pages */
#header #header-left #left-nav-button,
#left-nav-button {
  display: none !important;
}

/* Display and style left nav button STRICTLY on lesson pages */
#main-container.lesson-page #header #header-left #left-nav-button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #020249 !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  text-decoration: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#main-container.lesson-page #header #header-left #left-nav-button i.fa {
  color: #020249 !important;
  font-size: 16px !important;
}

#main-container.lesson-page #header #header-left #left-nav-button i.fa-search {
  display: none !important;
}

/* Dynamic Toggle Icons (Scoped strictly to Lesson Pages) */
body:not(.cbp-spmenu-open) #main-container.lesson-page #header #header-left #left-nav-button i.fa-times {
  display: none !important;
}

body:not(.cbp-spmenu-open) #main-container.lesson-page #header #header-left #left-nav-button i.fa-bars {
  display: inline-block !important;
}

body.cbp-spmenu-open #main-container.lesson-page #header #header-left #left-nav-button i.fa-bars {
  display: none !important;
}

body.cbp-spmenu-open #main-container.lesson-page #header #header-left #left-nav-button i.fa-times {
  display: inline-block !important;
}

/* 3. Left Drawer Navigation Panel (Whitespace Fix) */
#main-container.lesson-page #lp-left-nav,
#lp-left-nav,
#lp-left-nav.cbp-spmenu-vertical {
  position: fixed !important;
  top: 72px !important;
  left: 0 !important;
  width: 320px !important;
  height: calc(100vh - 72px) !important;
  background-color: #FFFFFF !important;
  border-right: 1px solid #E6E6FF !important;
  box-sizing: border-box !important;
  z-index: 999 !important;
  overflow-y: auto !important;
  transition: transform 0.25s ease !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Drawer Open / Closed States */
body:not(.cbp-spmenu-open) #main-container.lesson-page #lp-left-nav,
body:not(.cbp-spmenu-open) #lp-left-nav {
  transform: translateX(-100%) !important;
}

body.cbp-spmenu-open #main-container.lesson-page #lp-left-nav,
body.cbp-spmenu-open #lp-left-nav {
  transform: translateX(0) !important;
}

/* --- Left Drawer Internal Typography & Links --- */
#main-container.lesson-page #lp-left-nav .course-title,
#lp-left-nav .course-title {
  font-family: "New Edge", "Inter", sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1A1C1E !important;
  line-height: 1.25 !important;
  padding: 16px 20px 6px 20px !important;
  margin: 0 !important;
}

#lp-left-nav .course-title .sj-course-time {
  font-family: var(--font-body) !important;
  color: #6B7280 !important;
  margin-left: 6px !important;
}

/* "Course Overview" Link */
#main-container.lesson-page #lp-left-nav #returnToOverview,
#lp-left-nav #returnToOverview {
  color: #5252DB !important;
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  display: inline-block !important;
  text-decoration: none !important;
}

#lp-left-nav #returnToOverview:hover {
  text-decoration: underline !important;
}

/* Lesson Items Container & Inactive Links */
#main-container.lesson-page #curriculum-list-2 .lesson,
#curriculum-list-2 a.lesson {
  text-decoration: none !important;
  display: block !important;
  margin: 0 !important;
}

#main-container.lesson-page #curriculum-list-2 .lesson-row,
#curriculum-list-2 .lesson-row {
  padding: 10px 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  color: #5252DB !important;
  background-color: transparent !important;
  transition: background-color 0.15s ease !important;
}

/* Bold Blue Lesson Titles */
#main-container.lesson-page #curriculum-list-2 .lesson-row .title,
#curriculum-list-2 .lesson-row .title {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #5252DB !important;
  line-height: 1.3 !important;
}

/* Bullet & Type Icons for Inactive Lessons */
#main-container.lesson-page #curriculum-list-2 .lesson-row .bullet i,
#main-container.lesson-page #curriculum-list-2 .lesson-row .type-icon i,
#curriculum-list-2 .lesson-row .bullet i,
#curriculum-list-2 .lesson-row .type-icon i,
#curriculum-list-2 .lesson-row sjwc-icon {
  color: #5252DB !important;
}

/* Active Lesson Row (Solid Black Pill with White Text) */
#main-container.lesson-page #curriculum-list-2 .lesson-row.lesson-active,
#main-container.lesson-page #curriculum-list-2 .lesson-row.theme-color-bg,
#curriculum-list-2 .lesson-row.lesson-active,
#curriculum-list-2 .lesson-row.theme-color-bg {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

#main-container.lesson-page #curriculum-list-2 .lesson-row.lesson-active .title,
#main-container.lesson-page #curriculum-list-2 .lesson-row.theme-color-bg .title,
#curriculum-list-2 .lesson-row.lesson-active .title,
#curriculum-list-2 .lesson-row.theme-color-bg .title {
  color: #FFFFFF !important;
}

#main-container.lesson-page #curriculum-list-2 .lesson-row.lesson-active .bullet i,
#main-container.lesson-page #curriculum-list-2 .lesson-row.lesson-active .type-icon i,
#curriculum-list-2 .lesson-row.lesson-active .bullet i,
#curriculum-list-2 .lesson-row.lesson-active .type-icon i,
#curriculum-list-2 .lesson-row.lesson-active sjwc-icon {
  color: #FFFFFF !important;
}

/* Lesson Nav Item Hover State (White Text & Icons on Black Background) */
#curriculum-list-2 a.lesson:hover .lesson-row,
#main-container.lesson-page #curriculum-list-2 a.lesson:hover .lesson-row {
  background-color: #000000 !important;
  color: #FFFFFF !important;
}

#curriculum-list-2 a.lesson:hover .lesson-row .title,
#curriculum-list-2 a.lesson:hover .lesson-row .bullet i,
#curriculum-list-2 a.lesson:hover .lesson-row .type-icon i,
#curriculum-list-2 a.lesson:hover .lesson-row sjwc-icon,
#main-container.lesson-page #curriculum-list-2 a.lesson:hover .lesson-row .title,
#main-container.lesson-page #curriculum-list-2 a.lesson:hover .lesson-row .bullet i,
#main-container.lesson-page #curriculum-list-2 a.lesson:hover .lesson-row .type-icon i,
#main-container.lesson-page #curriculum-list-2 a.lesson:hover .lesson-row sjwc-icon {
  color: #FFFFFF !important;
}

/* 4. Main Wrapper Offset & Fluid Sizing */
#main-container.lesson-page #lp-wrapper,
.sj-page-lesson #lp-wrapper {
  box-sizing: border-box !important;
  float: none !important;
  display: block !important;
  transition: margin-left 0.25s ease, width 0.25s ease !important;
  min-height: calc(100vh - 132px) !important;
  background-color: #FAFAFA !important;
  padding-bottom: 80px !important;
}

/* Drawer OPEN State */
body.cbp-spmenu-open #main-container.lesson-page #lp-wrapper,
body.cbp-spmenu-open #lp-wrapper {
  margin-left: 320px !important;
  width: calc(100% - 320px) !important;
  max-width: calc(100% - 320px) !important;
}

/* Drawer CLOSED State */
body:not(.cbp-spmenu-open) #main-container.lesson-page #lp-wrapper,
body:not(.cbp-spmenu-open) #lp-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 5. Center Content Column & Un-Float Foundation Grid */
#main-container.lesson-page #lp-content,
#lp-content {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 32px 24px !important;
  box-sizing: border-box !important;
  float: none !important;
}

#main-container.lesson-page #lesson-body,
#main-container.lesson-page #lesson-body.details-pane-right,
#main-container.lesson-page #lesson-main,
#main-container.lesson-page #lesson-main-inner,
#lesson-body,
#lesson-main,
#lesson-main-inner {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* SCORM Player Frame Scaling */
#main-container.lesson-page #scaled_embedded_content,
#main-container.lesson-page .scorm-lesson-content,
#scaled_embedded_content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  background: #FFFFFF !important;
}

/* 6. Lesson Footer Bar Flex & Far-Right Pinning */
#main-container.lesson-page #lp-footer,
#lp-footer {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 60px !important;
  background-color: #FFFFFF !important;
  border-top: 1px solid #E6E6FF !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
  z-index: 1000 !important;
}

/* Left-Aligned Title (16px Font Size) */
#lp-footer .lesson-title-footer,
#main-container.lesson-page #lp-footer .lesson-title-footer {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1A1C1E !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: 0 1 auto !important;
}

/* Pin Action Controls to Far Right */
#lp-footer .right,
#main-container.lesson-page #lp-footer .right {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  margin: 0 0 0 auto !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  height: 100% !important;
}

#lp-footer .full-footer-height-wrapper,
#main-container.lesson-page #lp-footer .full-footer-height-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 16px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
}

#lp-footer .next-lesson-button .lesson-title-label {
  display: none !important;
}

/* Next / Complete Pill Button */
#lp-footer .next-lesson-button a.button,
#lp-footer .next-lesson-button a.next-lesson-link,
#lp-footer .complete-lesson-button a.button,
#lp-footer a.next-lesson-link {
  background-color: #5252DB !important;
  border: 2px solid #5252DB !important;
  border-radius: 24px !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 8px 24px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: auto !important;
  line-height: normal !important;
  transition: all 0.2s ease-in-out !important;
}

#lp-footer .next-lesson-button a.button:hover,
#lp-footer a.next-lesson-link:hover {
  background-color: #020249 !important;
  border-color: #020249 !important;
  color: #FFFFFF !important;
}

/* ==========================================================================
   LEFT DRAWER OPEN/CLOSED TRANSITIONS
   ========================================================================== */

/* Base Left Drawer Styling */
#main-container.lesson-page #lp-left-nav {
  background-color: #FFFFFF !important;
  border-right: 1px solid #E6E6FF !important;
  padding-top: 24px !important;
  transition: left 0.25s ease !important;
  z-index: 1000 !important;
  width: 320px !important;
}

/* Closed State */
body:not(.cbp-spmenu-open) #main-container.lesson-page #lp-left-nav {
  left: -320px !important;
}

body:not(.cbp-spmenu-open) #main-container.lesson-page #lp-wrapper {
  margin-left: 0 !important;
  width: 100% !important;
  transition: margin-left 0.25s ease, width 0.25s ease !important;
}

/* Open State */
body.cbp-spmenu-open #main-container.lesson-page #lp-left-nav {
  left: 0 !important;
}

body.cbp-spmenu-open #main-container.lesson-page #lp-wrapper {
  margin-left: 320px !important;
  width: calc(100% - 320px) !important;
  transition: margin-left 0.25s ease, width 0.25s ease !important;
}

/* Hide second scroll on nested iframes because Skilljar is a mess */
body.lesson-fullscreen #lp-wrapper #lesson-body #lesson-main-content {
  overflow: hidden !important;
}

/* ==========================================================================
   13. CALENDAR PAGE LAYOUT & SIDEBAR OVERRIDES
   ========================================================================== */

/* Calendar Page Pure White Background */
#calendar-view,
#skilljar-content:has(#calendar-view),
body:has(#calendar-view) {
  background-color: #FFFFFF !important;
  background: #FFFFFF !important;
}

/* Flex Wrapper with 24px Gap Between Filter Nav and Calendar */
#calendar-view,
#skilljar-content #calendar-view {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: 92% !important;
  margin: 24px auto 64px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Calendar Filter Nav Card Style & Scroll Lock */
#catalog-left-nav.calendar-left-nav,
#calendar-view #catalog-left-nav,
body.calendar-is-sticky #catalog-left-nav,
body.calendar-is-sticky .calendar-left-nav {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  float: none !important;
  flex: 0 0 260px !important;
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  height: fit-content !important;
  max-height: none !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  border: 1px solid #1A1C1E !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
  padding: 20px 16px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  z-index: 10 !important;
}

/* Unstyled Inner Filter Menu on Calendar Page */
#catalog-left-nav.calendar-left-nav #catalog-filter-menu,
#calendar-view #catalog-filter-menu,
body.calendar-is-sticky #catalog-filter-menu {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  width: 100% !important;
}

/* Reset Native Filter Buttons inside Calendar Sidebar */
#catalog-left-nav.calendar-left-nav button,
#catalog-left-nav.calendar-left-nav .button,
#catalog-left-nav.calendar-left-nav .btn {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--color-dark) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  line-height: inherit !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Calendar Main Display Area */
.calendar-view .calendar-with-left-nav,
#calendar-view .calendar-with-left-nav,
#calendar-view .fc-view-container {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

/* Calendar Grid Outer Frame */
.calendar-view .fc-view-container,
.calendar-view #calendar,
#skilljar-content .fc {
  border: 1px solid #E6E6FF !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background-color: #FFFFFF !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Prevent position: fixed on scroll for calendar filter sidebar */
body.calendar-is-sticky #catalog-left-nav,
body.calendar-is-sticky #catalog-filter-menu {
  position: relative !important;
}

/* Calendar Control Buttons */
.fc-button-group button,
.fc-button-primary {
  background-color: #5252DB !important;
  border-color: #5252DB !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
}

.fc-button-group button.fc-state-active,
.fc-button-primary:not(:disabled):active {
  background-color: #020249 !important;
  border-color: #020249 !important;
}

#skilljar-content #calendar-view .calendar-with-left-nav, :not(#skilljar-content) #calendar-view .calendar-with-left-nav {
    background: white;
    border: none;
    width: auto;
    margin: 0;
    flex-grow: 1;
}

#skilljar-content #calendar-view #catalog-left-nav, #skilljar-content #calendar-view .calendar-with-left-nav, :not(#skilljar-content) #calendar-view #catalog-left-nav, :not(#skilljar-content) #calendar-view .calendar-with-left-nav {
    float: none;
    position: relative;
}

#skilljar-content .fc-view-container, :not(#skilljar-content) .fc-view-container {
    background: var(--color-hero-burgundy);
    padding: 20px;
}

#skilljar-content .cs-calendar, #skilljar-content .fc-view-container, :not(#skilljar-content) .cs-calendar, :not(#skilljar-content) .fc-view-container {
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 3px 10px 0 rgba(0, 0, 0, 0.05);
    background: var(--color-hero-burgundy);
    border-radius: 15px;
}

#skilljar-content .fc-view-container .fc-view, :not(#skilljar-content) .fc-view-container .fc-view {
    border-radius: 8px;
    background: var(--color-hero-pink);
    padding: 16px;
}

.button-group li {
    background-color: var(--color-hero-burgundy) !important;
}

/* ==========================================================================
   14. LEARNING PATH & COURSE SERIES PAGE STYLES (.sj-page-path / .sj-page-series)
   ========================================================================== */

/* 1. Hide Unwanted Catalog Search & Leftover Counters */
.sj-page-path #catalog-search-info,
.sj-page-series #catalog-search-info,
.search-location-hidden #catalog-search-info,
.no-catalog-filters #catalog-search-info,
.sj-page-path #filter_type_-l,
.sj-page-series #filter_type_-l {
  display: none !important;
}

/* 2. Fix the Lock Icon: Strictly hide inactive/unlocked locks */
.sj-page-path .sj-course-tile-locked__hide,
.sj-page-series .sj-course-tile-locked__hide,
.sj-course-tile-locked__hide {
  display: none !important;
}

/* 3. Top Banner: 2-Column Split Hero (Image Left + Card Right) */
.sj-page-path .catalog-header,
.sj-page-series .catalog-header,
.sj-page-path .catalog-head,
.sj-page-series .catalog-head {
  width: 92% !important;
  max-width: 1200px !important;
  margin: 32px auto 24px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* If using custom dual-column HTML or native banner containers */
.sj-page-path .path-hero-wrapper,
.sj-page-path .catalog-head.split-view,
.sj-page-series .catalog-head.split-view {
  display: flex !important;
  flex-direction: row !important;
  gap: 24px !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  margin-bottom: 24px !important;
}

.sj-page-path .path-hero-media {
  flex: 0 0 45% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.sj-page-path .path-hero-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 12px !important;
}

/* Right Header Card (Title, Subtitle, CTA) */
.sj-page-path .path-hero-card {
  flex: 1 1 50% !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 32px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.sj-page-path .path-hero-card h1,
.sj-page-series .catalog-head h1 {
  font-family: var(--font-heading) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: var(--color-dark) !important;
  margin-bottom: 12px !important;
  text-align: center !important;
}

.sj-page-path .path-hero-card p,
.sj-page-series .catalog-head p {
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  color: #4B5563 !important;
  margin-bottom: 24px !important;
  text-align: center !important;
}

/* Divider & Introduction Text */
.sj-page-path hr.path-divider,
.sj-page-path .catalog-head hr {
  border: 0 !important;
  border-top: 1px solid #E5E7EB !important;
  width: 92% !important;
  max-width: 1200px !important;
  margin: 24px auto !important;
}

.sj-page-path .path-intro-text {
  width: 92% !important;
  max-width: 1200px !important;
  margin: 0 auto 32px auto !important;
  font-size: 15px !important;
  color: var(--color-dark) !important;
}

/* 4. Action Buttons (Start / Resume + Save Bookmark) */
.sj-page-path .path-curriculum-resume-wrapper {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto 24px auto !important;
  width: auto !important;
  display: flex !important;
  justify-content: center !important;
}

.sj-page-path .path-curriculum-button-wrapper {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
}

.sj-page-path #path-curriculum-resume-button,
.sj-page-path .path-curriculum-button-wrapper a.button {
  background-color: #020249 !important;
  border: 2px solid #020249 !important;
  border-radius: 24px !important;
  color: #FFFFFF !important;
  font-family: var(--font-body) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 10px 32px !important;
  height: auto !important;
  line-height: normal !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
}

.sj-page-path #path-curriculum-resume-button:hover,
.sj-page-path .path-curriculum-button-wrapper a.button:hover {
  background-color: #FFFFFF !important;
  color: #020249 !important;
  text-decoration: none !important;
}

.sj-page-path .sj-save-toggle-block__button {
  background-color: #FFFFFF !important;
  border: 2px solid #020249 !important;
  border-radius: 20px !important;
  color: #020249 !important;
  padding: 8px 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease-in-out !important;
}

.sj-page-path .sj-save-toggle-block__button:hover {
  background-color: #EBECFD !important;
}

/* 5. Horizontal Course Cards (Single Column List Layout) */
.sj-page-path #catalog-courses,
.sj-page-series #catalog-courses {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 92% !important;
  max-width: 1200px !important;
  margin: 0 auto 48px auto !important;
  padding: 0 !important;
}

/* Override 4-Column Card Shell to Full-Width Row */
.sj-page-path a.coursebox-container,
.sj-page-series a.coursebox-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: unset !important;
  height: auto !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
  box-sizing: border-box !important;
}

.sj-page-path a.coursebox-container:hover,
.sj-page-series a.coursebox-container:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: #D1D5DB !important;
}

/* Left-Side Thumbnail Image */
.sj-page-path a.coursebox-container .coursebox-image,
.sj-page-series a.coursebox-container .coursebox-image {
  flex: 0 0 200px !important;
  width: 200px !important;
  height: 112px !important;
  aspect-ratio: 16 / 9 !important;
  margin: 0 20px 0 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid #E5E7EB !important;
  border-bottom: 1px solid #E5E7EB !important;
  background-color: #F3F4F6 !important;
}

.sj-page-path a.coursebox-container .coursebox-image img,
.sj-page-series a.coursebox-container .coursebox-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Middle Text Content */
.sj-page-path a.coursebox-container .coursebox-text,
.sj-page-series a.coursebox-container .coursebox-text {
  font-family: var(--font-body) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #1A1C1E !important;
  line-height: 1.3 !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.sj-page-path a.coursebox-container .coursebox-text-description,
.sj-page-series a.coursebox-container .coursebox-text-description {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: #4B5563 !important;
  line-height: 1.4 !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  display: block !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
}

/* Inline Time/Duration Under Description */
.sj-page-path a.coursebox-container .course-time,
.sj-page-path a.coursebox-container .coursebox-callout,
.sj-page-series a.coursebox-container .course-time,
.sj-page-series a.coursebox-container .coursebox-callout {
  position: static !important;
  display: block !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  color: #6B7280 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  text-align: left !important;
}

/* Hide Unwanted Bottom Pills and "Show Overview" Drawer on Path List Rows */
.sj-page-path a.coursebox-container .pill,
.sj-page-series a.coursebox-container .pill,
.sj-page-path .course-overview,
.sj-page-series .course-overview {
  display: none !important;
}

/* 6. Corner Ribbons (Registered / Complete) */
.sj-page-path .sj-ribbon-wrapper,
.sj-page-series .sj-ribbon-wrapper {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}

.sj-page-path .sj-course-ribbon-registered,
.sj-page-path .registered {
  background-color: #CCE0F5 !important;
  color: #093E57 !important;
}

.sj-page-path .sj-course-ribbon-complete,
.sj-page-path .complete {
  background-color: #5252DB !important;
  color: #FFFFFF !important;
}