/* Kustomer brand tokens - added by theming pass 2026-07-14 */
/* Note: CSS custom properties (--name: value) are stripped by this panel's
   backend sanitizer, so brand colors are applied directly below instead. */

/* Keep body copy on-brand even on pages without a font picker */
body {
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

/* Safe, additive: tint generic content links with the brand accent (Periwinkle) */
a {
  color: #778cf8;
}

/* New Admin Onboarding page refresh, pass 2 (2026-07-27) -- see decisions.md.
   Replaces the first pass: that pass's font-family rules never actually
   rendered (verified via computed style) because WorkRamp forces Inter on
   all headings via a 9-clause :not() chain selector that is ALSO
   !important, beating our same-specificity !important rule in the cascade
   tie. Fix: repeat the class selector to raise specificity past that rule
   (harmless -- still matches exactly the same elements). Also fixes the
   nav logo (dark-ink PNG, invisible on the dark banner -- inverted to
   white) and moves the banner off an unrelated dark teal onto a
   navy-to-periwinkle gradient in the same family as the existing #778cf8
   accent. Uses only the officially documented AL_Custom_* hook classes
   from help.workramp.com/en/articles/6645543. Applies academy-wide (these
   hooks render on every Banner/Card surface, not just this one page).
   User-approved 2026-07-27 after a client-side (non-live) before/after
   preview. */
.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading.AL_Custom_BannerMainHeading {
  font-family: 'Fraunces', Georgia, serif !important;
  font-weight: 600 !important;
  color: #ffffff !important;
}

.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle.AL_Custom_CardTitle {
  font-family: 'Fraunces', Georgia, serif !important;
  color: #262f56 !important;
}

.AL_Custom_NavBg.AL_Custom_NavBg {
  background: linear-gradient(135deg, #1b2246 0%, #303d78 55%, #4a5bb0 100%) !important;
}

.AL_Custom_NavLogo.AL_Custom_NavLogo img {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.AL_Custom_BannerSubHead {
  color: rgba(255, 255, 255, 0.82) !important;
}

.AL_Custom_SingleCard {
  border-radius: 14px !important;
  overflow: hidden;
  border: 1px solid rgba(74, 91, 176, 0.12);
  box-shadow: 0 1px 2px rgba(38,47,86,.05), 0 10px 24px rgba(38,47,86,.07) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.AL_Custom_SingleCard:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(38,47,86,.10), 0 18px 32px rgba(38,47,86,.12) !important;
}

/* Card images, pass 3 (2026-07-27). Pass 2 forced a periwinkle gradient plus
   a dot texture onto every .AL_Custom_CardImage to hide WorkRamp's off-brand
   default cover art (a green PNG with a book icon). That was the right call
   while no course had real cover art -- but it is a `background` shorthand,
   so it also blanked the background-image of any card that DOES have one.
   The moment real thumbnails were uploaded for the 12 v0 courses they were
   invisible: the rule won the cascade over WorkRamp's own per-card class
   (single hashed class, same specificity, ours later in source order).
   Now that the covers are real, the tint is a background-COLOR only, which
   sits harmlessly behind the image instead of replacing it. Cards with no
   cover fall back to WorkRamp's default art. */
.AL_Custom_CardImage {
  background-color: #eef0fe;
  position: relative;
  overflow: hidden;
}

/* Header legibility on the dark banner (2026-07-27, pass 2b). WorkRamp's
   default nav link + Login button colors are near-black (rgb(41,41,41)),
   which was invisible against the dark banner introduced in pass 2. */
.AL_Custom_NavCustomLink.AL_Custom_NavCustomLink,
.AL_Custom_NavCustomLink.AL_Custom_NavCustomLink a {
  color: rgba(255,255,255,0.85) !important;
}

.AL_Custom_NavCustomLink.AL_Custom_NavCustomLink a:hover {
  color: #ffffff !important;
}

.AL_Custom_NavLoginButton.AL_Custom_NavLoginButton {
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.45) !important;
}

.AL_Custom_NavLoginButton.AL_Custom_NavLoginButton:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.75) !important;
}