/* =====================================================================
   ATERA ACADEMY - CUSTOM CSS  (Home / Trainings page - light theme)
   Paste as the ENTIRE contents of:
   Theming Editor -> CUSTOM CODE -> "Custom CSS Rules"
   (select all in that field, delete, paste this)
   ===================================================================== */

/* ---------- 1. FONTS ---------- */
@font-face { font-family:"gellix"; font-weight:400; src:url("https://commonateraassets.azureedge.net/academy/fonts/gellix/Gellix-Regular.woff2") format("woff2"), url("https://commonateraassets.azureedge.net/academy/fonts/gellix/Gellix-Regular.woff") format("woff"); }
@font-face { font-family:"gellix"; font-weight:500; src:url("https://commonateraassets.azureedge.net/academy/fonts/gellix/Gellix-Medium.woff2") format("woff2"), url("https://commonateraassets.azureedge.net/academy/fonts/gellix/Gellix-Medium.woff") format("woff"); }
@font-face { font-family:"gellix"; font-weight:600; src:url("https://commonateraassets.azureedge.net/academy/fonts/gellix/Gellix-SemiBold.woff2") format("woff2"), url("https://commonateraassets.azureedge.net/academy/fonts/gellix/Gellix-SemiBold.woff") format("woff"); }
@font-face { font-family:"gellix"; font-weight:700; src:url("https://commonateraassets.azureedge.net/academy/fonts/gellix/Gellix-Bold.woff2") format("woff2"), url("https://commonateraassets.azureedge.net/academy/fonts/gellix/Gellix-Bold.woff") format("woff"); }
@font-face { font-family:"nekst"; font-weight:400; src:url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-Regular.woff2") format("woff2"), url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-Regular.woff") format("woff"); }
@font-face { font-family:"nekst"; font-weight:500; src:url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-Medium.woff2") format("woff2"), url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-Medium.woff") format("woff"); }
@font-face { font-family:"nekst"; font-weight:600; src:url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-SemiBold.woff2") format("woff2"), url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-SemiBold.woff") format("woff"); }
@font-face { font-family:"nekst"; font-weight:700; src:url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-Bold.woff2") format("woff2"), url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-Bold.woff") format("woff"); }
@font-face { font-family:"nekst"; font-weight:900; src:url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-Black.woff2") format("woff2"), url("https://commonateraassets.azureedge.net/academy/fonts/nekst/Nekst-Black.woff") format("woff"); }

/* ---------- 2. BASE TYPOGRAPHY ---------- */
#layer-application p { font-family:"gellix", sans-serif !important; font-weight:400; }
#layer-application h1, #layer-application h2 { font-family:"nekst", sans-serif !important; font-weight:600; }
#layer-application h3, #layer-application h4 { font-family:"gellix", sans-serif !important; }
#layer-application h3 .LinesEllipsis, #layer-application h4 .LinesEllipsis { font-size:20px !important; }

/* ---------- 3. PAGE BACKGROUND ---------- */
#layer-application,
#layer-application #main { background:#f4f4f4 !important; }

/* ---------- 4. BANNER / HEADER ---------- */
#layer-application .AL_Custom_NavBg,
#layer-application .academy-banner {
  background-image:none !important;
  background:#f4f4f4 !important;
  background-size:105% !important;
  background-position:center !important;
}
#layer-application .academy-logo { max-width:248px; height:auto !important; filter:invert(1) !important; }

/* logged-in account icon - pink circle, white glyph */
#layer-application .AL_Custom_NavAccountMenuTrigger { background:#ff176b !important; border-radius:9999px !important; }
#layer-application .AL_Custom_NavAccountMenuTrigger svg,
#layer-application .AL_Custom_NavAccountMenuTrigger path { fill:#ffffff !important; stroke:#ffffff !important; color:#ffffff !important; }

#layer-application #main h1.AL_Custom_BannerMainHeading {
  font-family:"nekst", sans-serif !important;
  font-weight:700 !important;
  color:#1a1a1a !important;
  padding-top:224px;
  text-align:center;
  font-size:42px;
  line-height:100%;
}
@media (min-width:1023px) { #layer-application #main h1.AL_Custom_BannerMainHeading { padding-top:0; max-width:428px; text-align:center; margin:0 auto; font-size:48px; } }
@media (min-width:1439px) {
  #layer-application #main h1.AL_Custom_BannerMainHeading { max-width:501px; font-size:64px; }
  #layer-application #main .StyledRow-sc-piwixm-0 h3:not(.AL_Custom_CardTitle) { font-size:48px; }
}

#layer-application p.AL_Custom_BannerSubHead {
  font-size:18px;
  text-align:center;
  line-height:112%;
  font-family:"gellix", sans-serif !important;
  font-weight:400 !important;
  color:#535353 !important;
  margin-top:10px;
}
@media (max-width:1023px) { #layer-application p.AL_Custom_BannerSubHead { padding-left:16px; padding-right:16px; } }
@media (min-width:1023px) { #layer-application p.AL_Custom_BannerSubHead { text-align:center; max-width:428px; margin-left:auto; margin-right:auto; } }

#layer-application .AL_Custom_NavLoginButton {
  background:#ff176b !important;
  color:#ffffff !important;
  border:none !important;
  border-radius:8px !important;
}
#layer-application .AL_Custom_NavLoginButton:hover { background:#e41560 !important; }

/* ---------- 5. TAB BAR ---------- */
#layer-application .AL_Custom_TabBarTab { color:#6b6b6b !important; font-family:"gellix", sans-serif !important; font-weight:600 !important; }
#layer-application .AL_Custom_TabBarTab.active { color:#ff176b !important; }

/* ---------- 6. SECTION TITLES (New / All) ---------- */
#layer-application .AL_Custom_OverviewSectionTitle {
  color:#1a1a1a !important;
  font-family:"nekst", sans-serif !important;
  font-weight:600 !important;
  margin-top:40px !important;
  margin-bottom:24px !important;
}

/* ---------- 7. COURSE CARDS ---------- */
#layer-application .AL_Custom_CardContainer { gap:24px !important; }
#layer-application .AL_Custom_SingleCard {
  background:#ffffff !important;
  border:1px solid #efe7ea !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 2px 8px rgba(114,10,48,0.07) !important;
  transition:box-shadow 0.18s ease, transform 0.18s ease !important;
}
#layer-application .AL_Custom_SingleCard:hover {
  box-shadow:0 14px 34px rgba(114,10,48,0.12) !important;
  transform:translateY(-3px) !important;
}
#layer-application .AL_Custom_CardImage { height:160px !important; }
#layer-application .AL_Custom_CardBody { padding:14px 20px 20px !important; }

/* all card text -> Gellix regular; title re-asserted to Nekst */
#layer-application .AL_Custom_SingleCard,
#layer-application .AL_Custom_SingleCard * { font-family:"gellix", sans-serif !important; font-weight:400 !important; }
#layer-application .AL_Custom_CardTitle,
#layer-application .AL_Custom_CardTitle * { font-family:"nekst", sans-serif !important; font-weight:600 !important; color:#1a1a1a !important; }

#layer-application .AL_Custom_CardDescription { color:#6b6b6b !important; display:-webkit-box !important; -webkit-line-clamp:3 !important; -webkit-box-orient:vertical !important; overflow:hidden !important; }
#layer-application .AL_Custom_ContentTypeLabel { background:#fff2f5 !important; color:#c61253 !important; border-radius:9999px !important; padding:3px 10px !important; font-weight:500 !important; }
#layer-application .AL_Custom_ItemsCount { color:#959595 !important; }
#layer-application .AL_Custom_CardCta { color:#e41560 !important; font-weight:500 !important; }
#layer-application .AL_Custom_CardFooter { border-top:none !important; margin-top:6px !important; }
.ContentCardInner { background-color:#ffffff !important; }

/* ---------- 8. FOOTER ---------- */
#layer-application .AL_Custom_Footer {
  background:#ffffff !important;
  border-top:1px solid #f0e6ea !important;
}
#layer-application .AL_Custom_Footer,
#layer-application .AL_Custom_Footer p,
#layer-application .AL_Custom_Footer span {
  color:#959595 !important;
  font-family:"gellix", sans-serif !important;
  font-weight:400 !important;
}
#layer-application .AL_Custom_FooterLinkListItem {
  color:#535353 !important;
  font-family:"gellix", sans-serif !important;
  font-weight:500 !important;
  text-decoration:none !important;
}
#layer-application .AL_Custom_FooterLinkListItem:hover { color:#c61253 !important; text-decoration:none !important; }

/* ---------- 9. UTILITY (hide default WR elements + tooltips) ---------- */
/* NOTE: these target WorkRamp's auto-generated class names, which can
   change on a WR release. If something hidden reappears after a WR
   update, these are the rules to re-check. */
.jzGNgS { display:none; }
.jcDSG { display:none !important; }
.bJuAPL { display:none !important; }
.ewCLJj { display:none; }
.dUweta { display:none; }
.hJCBMN { display:none; }
.StatsWrapper-sc-33f069fa-0 iLTmvf { display:none; }
.gjInqZ .react-tooltip-lite-default-style { display:none !important; }

/* ---------- 10. COURSE / PATH / CERT OVERVIEW (internal pages) ---------- */
/* banner stats/text -> dark (banner is light now; old white text was invisible) */
#layer-application .AL_Custom_NavBg p,
#layer-application .AL_Custom_NavBg span,
#layer-application .AL_Custom_NavBg div,
#layer-application .AL_Custom_NavBg strong,
#layer-application .AL_Custom_NavBg h1,
#layer-application .AL_Custom_NavBg h2,
#layer-application .AL_Custom_NavBg h3 { color:#1a1a1a !important; }
/* the four stat blocks (5 tasks / 2 videos / 15 questions / 1.5 hrs) */
#layer-application [class*="StatsWrapper"],
#layer-application [class*="StatsWrapper"] * { color:#1a1a1a !important; opacity:1 !important; }
#layer-application [class*="StatsWrapper"],
#layer-application [class*="StatItem"],
#layer-application [class*="StatsWrapper"] > * { border-color:#dedede !important; }
/* Start / Get Started CTA on the innermost lesson page -> white label.
   Covers every WR variant of the primary start button. */
#layer-application [class*="StartButton"],
#layer-application [class*="StartButton"] *,
#layer-application [class*="SummaryCta"],
#layer-application [class*="SummaryCta"] *,
#layer-application .AL_Custom_PCSummaryCta,
#layer-application .AL_Custom_PCSummaryCta * { color:#ffffff !important; }
#layer-application [class*="StartButton"],
#layer-application [class*="SummaryCta"],
#layer-application .AL_Custom_PCSummaryCta { background:#ff176b !important; border:none !important; border-radius:8px !important; }
/* Banner "Get Started" CTA on the innermost lesson page (.AL_Custom_BannerCta) */
#layer-application .AL_Custom_BannerCta { background:#ff176b !important; border:none !important; border-radius:8px !important; }
#layer-application .AL_Custom_BannerCta,
#layer-application .AL_Custom_BannerCta * { color:#ffffff !important; }
/* innermost lesson-player primary button (WR generated class, unknown name):
   force white label on any pink primary/CTA button in the content area */
#layer-application button[class*="Primary"],
#layer-application button[class*="Primary"] *,
#layer-application a[class*="Primary"],
#layer-application a[class*="Primary"] *,
#layer-application [class*="Cta"] button,
#layer-application [class*="Cta"] button *,
#layer-application button[class*="Cta"],
#layer-application button[class*="Cta"] * { color:#ffffff !important; }
/* summary box + title */
#layer-application .AL_Custom_PCTitle { color:#1a1a1a !important; font-family:"nekst", sans-serif !important; }
#layer-application .AL_Custom_PCModuleCount { color:#535353 !important; }
/* Get started CTA -> pink (force white label; inner span was rendering black) */
#layer-application .AL_Custom_PCSummaryCta,
#layer-application .AL_Custom_PCSummaryCta * { background:#ff176b !important; color:#ffffff !important; border:none !important; border-radius:8px !important; }
#layer-application .AL_Custom_PCSummaryCta:hover,
#layer-application .AL_Custom_PCSummaryCta:hover * { background:#e41560 !important; color:#ffffff !important; }

/* Summary box -> white card, rounded, soft shadow */
#layer-application .AL_Custom_PCSummaryBox {
  background:#ffffff !important;
  border:1px solid #e9e9e9 !important;
  border-radius:16px !important;
  box-shadow:0 2px 8px rgba(26,26,26,0.05) !important;
}
/* Course Outline module card -> white, rounded, soft shadow */
#layer-application .AL_Custom_ModuleContainer,
#layer-application [class*="ModuleContainer"],
#layer-application [class*="OutlineCard"] {
  background:#ffffff !important;
  border:1px solid #e9e9e9 !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 2px 8px rgba(26,26,26,0.05) !important;
}
/* soften the gray module header strip -> white */
#layer-application [class*="ModuleHeader"],
#layer-application [class*="ModuleTitle"] {
  background:#ffffff !important;
  color:#1a1a1a !important;
  font-family:"nekst", sans-serif !important;
  font-weight:600 !important;
}
/* the little "..." separator dots between summary and outline */
#layer-application [class*="Separator"] svg,
#layer-application [class*="Separator"] circle { fill:#d8d8d8 !important; }
/* lesson rows: readable + pink active radio */
#layer-application [class*="LessonRow"],
#layer-application [class*="LessonTitle"] { color:#1a1a1a !important; }
#layer-application [class*="LessonRow"]:hover { background:#faf6f8 !important; }
#layer-application input[type="radio"]:checked { accent-color:#ff176b !important; }

/* =====================================================================
   11. INNER-PAGE LAYOUT  (v2 - home-safe)
   ---------------------------------------------------------------------
   The AL_Custom_PC* / GO* classes only ever exist on the inner pages,
   never on Home (Home = collections list, uses SingleCard). So styling
   those classes directly is already home-safe.
   The ONLY rule that needs a page-level guard is the banner heading,
   because .AL_Custom_BannerMainHeading exists on EVERY page. We guard it
   with :has() on a class confirmed present on each inner page:
     .AL_Custom_PCSummaryBox  -> page1 (Path/Cert Overview)
     .AL_Custom_GOHeading     -> page2 (Guide Overview)
   ===================================================================== */

/* ---------- 11a. Banner heading + subhead -> LEFT on inner pages ---------- */
#layer-application:has(.AL_Custom_PCSummaryBox) #main h1.AL_Custom_BannerMainHeading,
#layer-application:has(.AL_Custom_GOHeading) #main h1.AL_Custom_BannerMainHeading {
  text-align:left !important;
  max-width:660px !important;
  margin-left:0 !important;
  margin-right:auto !important;
  margin-bottom:24px !important;
  padding-top:0 !important;
  line-height:1.08 !important;
}
#layer-application:has(.AL_Custom_PCSummaryBox) #main p.AL_Custom_BannerSubHead,
#layer-application:has(.AL_Custom_GOHeading) #main p.AL_Custom_BannerSubHead {
  text-align:left !important;
  max-width:560px !important;
  margin-left:0 !important;
  margin-right:0 !important;
  margin-top:0 !important;
  font-size:19px !important;
  line-height:1.5 !important;
}

/* =====================================================================
   12. PAGE 1 - Course / Path / Cert Overview  ("What you'll learn" + Enroll)
   Classes targeted directly (present only on this page).
   ===================================================================== */

/* ---------- 12a. Summary / enroll card -> elevated, pink accent bar ---------- */
#layer-application .AL_Custom_PCSummaryBox {
  position:relative !important;
  background:#ffffff !important;
  border:1px solid #f0e6ea !important;
  border-radius:20px !important;
  box-shadow:0 12px 44px rgba(114,10,48,0.08) !important;
  overflow:hidden !important;
}
/* top gradient accent bar */
#layer-application .AL_Custom_PCSummaryBox::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#ff176b 0%,#ff7495 100%);
}
#layer-application .AL_Custom_PCTitle {
  font-family:"nekst", sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-0.5px !important;
  color:#1a1a1a !important;
}
#layer-application .AL_Custom_PCModuleCount { color:#6b6b6b !important; }

/* ---------- 12b. Module boxes -> clean white cards ---------- */
#layer-application .AL_Custom_PCModuleBox {
  background:#ffffff !important;
  border:1px solid #efe7ea !important;
  border-radius:16px !important;
  box-shadow:0 3px 12px rgba(114,10,48,0.05) !important;
  margin-bottom:16px !important;
}
#layer-application .AL_Custom_PCModuleTitle {
  font-family:"nekst", sans-serif !important;
  font-weight:600 !important;
  letter-spacing:-0.2px !important;
  color:#1a1a1a !important;
}
#layer-application .AL_Custom_PCModuleDescription { color:#6b6b6b !important; }
/* Show/Hide toggle -> pink accent */
#layer-application .AL_Custom_PCShowHideToggle {
  color:#e41560 !important; font-family:"gellix", sans-serif !important; font-weight:600 !important;
}
/* NOTE: .AL_Custom_PCPathLine top bar is intentionally left un-themed
   (WR uses gray=incomplete / green=complete - do not override). */

/* =====================================================================
   13. PAGE 2 - Guide Overview  ("Course outline" - real chapter names + Start)
   Classes targeted directly (present only on this page).
   ===================================================================== */
#layer-application .AL_Custom_GOHeading {
  font-family:"nekst", sans-serif !important;
  font-weight:600 !important;
  font-size:24px !important;
  letter-spacing:-0.5px !important;
  color:#1a1a1a !important;
  margin:0 0 22px !important;
}
#layer-application .AL_Custom_GOSectionContainer {
  background:#ffffff !important;
  border:1px solid #efe7ea !important;
  border-radius:16px !important;
  overflow:hidden !important;
  box-shadow:0 3px 14px rgba(114,10,48,0.05) !important;
}
#layer-application .AL_Custom_GOSectionTitle {
  font-family:"nekst", sans-serif !important;
  font-weight:600 !important;
  font-size:18px !important;
  letter-spacing:-0.2px !important;
  color:#1a1a1a !important;
  border-bottom:1px solid #f2ebee !important;
}
/* chapter / task rows -> readable, subtle hover */
#layer-application .AL_Custom_GOSectionTask {
  font-family:"gellix", sans-serif !important;
  font-weight:500 !important;
  font-size:15px !important;
  color:#1a1a1a !important;
  border-top:1px solid #f4eef0 !important;
}
#layer-application .AL_Custom_GOSectionTask:hover { background:#faf6f8 !important; }