@layer paragon, shell, app, site, brand

/*# sourceMappingURL=cssLayerOrder.2953d0c76f7c61ac484f.css.map*//* ArcLogi MFE theme override (baked into every MFE stylesheet).
   Forces a single, consistent LIGHT + teal Paragon theme on every page. Dark mode was unreadable
   (light card backgrounds + dark-mode light text). We redefine the full light token set under the
   light AND dark selectors AND inside prefers-color-scheme:dark, so the dark variant never wins.
   Also: ArcLogi teal brand color + footer cleanup. */

html, :root { color-scheme: light; }

:root,
[data-paragon-theme="light"], .pgn__theme-light,
[data-paragon-theme="dark"], .pgn__theme-dark {
  /* neutrals (light) */
  --pgn-color-white:#fff;
  --pgn-color-black:#1f1c1a;
  --pgn-color-bg:#fff;
  --pgn-color-modal-content-bg:#fff;
  --pgn-color-modal-backdrop-bg:rgba(0,0,0,.5);
  --pgn-color-light-base:#f2f0ef; --pgn-color-light-100:#fbfafa; --pgn-color-light-200:#f2f0ef;
  --pgn-color-light-300:#e1dddb; --pgn-color-light-400:#d4cfcd; --pgn-color-light-500:#bcb6b3;
  --pgn-color-gray-base:#595454; --pgn-color-gray-100:#e9e6e4; --pgn-color-gray-200:#d4cfcd;
  --pgn-color-gray-300:#bcb6b3; --pgn-color-gray-400:#a59f9d; --pgn-color-gray-500:#8f8b89;
  --pgn-color-gray-600:#787471; --pgn-color-gray-700:#595454; --pgn-color-gray-800:#454140;
  --pgn-color-gray-900:#2d2926;
  --pgn-color-dark-base:#1f1c1a; --pgn-color-dark-500:#1f1c1a; --pgn-color-dark-700:#2d2926;
  /* ArcLogi teal brand */
  --pgn-color-primary-base:#00829B; --pgn-color-primary-100:#E6F4F7; --pgn-color-primary-200:#B8E0E8;
  --pgn-color-primary-300:#8ACCD8; --pgn-color-primary-400:#47A6BA; --pgn-color-primary-500:#00829B;
  --pgn-color-primary-600:#00748B; --pgn-color-primary-700:#046274; --pgn-color-primary-800:#024E5C;
  --pgn-color-primary-900:#013842; --pgn-color-primary-light:#E6F4F7;
  --pgn-color-brand-base:#00829B; --pgn-color-brand-100:#E6F4F7; --pgn-color-brand-200:#B8E0E8;
  --pgn-color-brand-300:#8ACCD8; --pgn-color-brand-400:#47A6BA; --pgn-color-brand-500:#00829B;
  --pgn-color-brand-600:#00748B; --pgn-color-brand-700:#046274; --pgn-color-brand-800:#024E5C;
  --pgn-color-brand-900:#013842;
  --pgn-color-info-base:#00829B; --pgn-color-info-100:#E6F4F7; --pgn-color-info-300:#8ACCD8; --pgn-color-info-500:#00829B;
  --pgn-color-success-base:#0d7d4d; --pgn-color-success-100:#e8faf3; --pgn-color-success-500:#0d7d4d;
  --pgn-color-danger-base:#c0291e; --pgn-color-danger-100:#fdf0ee; --pgn-color-danger-500:#c0291e;
  --pgn-color-warning-base:#f0cc00; --pgn-color-warning-100:#fdf9e8; --pgn-color-warning-500:#f0cc00;
}

@media (prefers-color-scheme: dark) {
  :root, [data-paragon-theme="dark"], .pgn__theme-dark {
    --pgn-color-white:#fff; --pgn-color-black:#1f1c1a; --pgn-color-bg:#fff;
    --pgn-color-modal-content-bg:#fff; --pgn-color-modal-backdrop-bg:rgba(0,0,0,.5);
    --pgn-color-light-base:#f2f0ef; --pgn-color-light-100:#fbfafa; --pgn-color-light-200:#f2f0ef; --pgn-color-light-300:#e1dddb;
    --pgn-color-gray-100:#e9e6e4; --pgn-color-gray-300:#bcb6b3; --pgn-color-gray-500:#8f8b89;
    --pgn-color-gray-700:#595454; --pgn-color-gray-800:#454140; --pgn-color-gray-900:#2d2926;
    --pgn-color-dark-base:#1f1c1a;
    --pgn-color-primary-base:#00829B; --pgn-color-primary-500:#00829B;
    --pgn-color-brand-base:#00829B; --pgn-color-brand-500:#00829B;
  }
}

/* Element-level safety nets */
.pgn__modal-content{background-color:var(--pgn-color-modal-content-bg,#fff);}
.pgn__modal-backdrop{background-color:var(--pgn-color-modal-backdrop-bg,rgba(0,0,0,.5));}
.btn-primary,.btn-brand{background-color:#00829B!important;border-color:#00829B!important}
.btn-primary:hover,.btn-brand:hover{background-color:#046274!important;border-color:#046274!important}
.btn-outline-primary,.btn-tertiary{color:#00829B!important;border-color:#00829B!important}
a{color:#00829B}

/* Force readable dark-on-light TEXT wherever the dark variant is active. The dark theme sets a light
   text color on the root that everything inherits — override it (and key non-inheriting elements). */
[data-paragon-theme="dark"], .pgn__theme-dark { color:#1f1c1a !important; }
[data-paragon-theme="dark"] ::placeholder, .pgn__theme-dark ::placeholder { color:#8f8b89 !important; opacity:1; }
[data-paragon-theme="dark"] a:not([class*="btn"]), .pgn__theme-dark a:not([class*="btn"]) { color:#00829B !important; }
@media (prefers-color-scheme: dark) {
  html, body, #root { color:#1f1c1a !important; }
  ::placeholder { color:#8f8b89 !important; opacity:1; }
  a:not([class*="btn"]) { color:#00829B !important; }
}

/* Footer: drop third-party "Powered by". The copyright is rewritten into an ArcLogi link by the
   force-light script (arclogi-force-light.html), so no CSS ::after override here. */
.powered-area{display:none!important}

/* Studio (course-authoring) footer cleanup: remove the Open edX "Powered by" logo + the
   "edX and Open edX ... registered trademarks of edX Inc." line. In the frontend-component-footer
   that whole bottom row is .pgn__action-row.mt-3.pb-4.x-small (it holds the trademark text AND the
   logo, and NOT the copyright row), so we hide it. Belt-and-suspenders: hide any Open edX logo/link
   wherever it appears. */
.pgn__action-row.mt-3.pb-4.x-small{display:none!important}
/* :not(.logo-image) — Verawood indigo's header logo (ThemedLogo, our ArcLogi logo) ships alt="Open edX". */
img[alt*="Open edX" i]:not(.logo-image),img[src*="open-edx" i],img[src*="openedx" i]{display:none!important}
a[href*="openedx.org" i],a[href*="open.edx.org" i]{display:none!important}

/* Header: room for the ArcLearn logo (book + spark + wordmark, cropped to the artwork) — Paragon's
   default is 1.75rem. */
.site-header-desktop .logo,.studio-header .logo{height:2.5rem!important}

/* Header nav hover/active ("Courses", "Explore courses", the account menu). Indigo's header (learner
   dashboard) marks these with a teal underline on white, while the stock header (catalog, account, …)
   paints a teal background with white text. Use indigo's look everywhere, so a label can never vanish:
   white-on-white, or teal-on-teal under the dark-scheme link rules above. */
.site-header-desktop .main-nav .nav-link{border-bottom:2px solid transparent}
.site-header-desktop .main-nav .nav-link:hover,.site-header-desktop .main-nav .nav-link:focus,
.site-header-desktop .main-nav .nav-link.active,.site-header-desktop .main-nav .expanded .nav-link{
  background:transparent!important;color:#22262A!important;border-bottom-color:#00829B!important}
.site-header-desktop .secondary-menu-container .nav-link:hover,.site-header-desktop .secondary-menu-container .nav-link:focus,
.site-header-desktop .secondary-menu-container .nav-link.active,.site-header-desktop .secondary-menu-container .expanded .nav-link{
  background:transparent!important;color:#00829B!important}

/* Catalog home banner: ArcLogi charcoal -> teal instead of the stock gray. */
.home-banner::before{background:linear-gradient(135deg,#22262A 0%,#024E5C 55%,#00829B 100%)!important;opacity:1!important}