/* EPQA Design System · October 2026 · Figma approved A (light) / B (night)
 * Source of truth: user-approved Canva brand kit dated 17 Oct 2026.
 * Lightweight CSS-only overrides. Retains original PHP, route and JS architecture. */
:root {
  --epqa-brand-navy:#042066;
  --epqa-brand-cyan:#00a8fe;
  --epqa-brand-blue:#0797e2;
  --epqa-brand-sky:#eaf5fe;
  --epqa-brand-slate:#4b5b86;
  --epqa-brand-purple:#693fea;
  --epqa-brand-orange:#f2a93b;
  --epqa-background:#f6faff;
  --epqa-surface:#ffffff;
  --epqa-heading:#042066;
  --epqa-body:#4b5b86;
  --epqa-action:#042066;
  --epqa-on-action:#ffffff;
  --epqa-line:#d5e4f2;
  --epqa-focus:#693fea;
  --epqa-radius:16px;
  --epqa-shadow:0 8px 24px rgba(4,32,102,.075);
}
html[data-theme="dark"] {
  --epqa-background:#2c354b;
  --epqa-surface:#38445f;
  --epqa-heading:#f3f7ff;
  --epqa-body:#cddaee;
  --epqa-action:#00a8fe;
  --epqa-on-action:#042066;
  --epqa-line:#667895;
  --epqa-focus:#9fbbff;
  --epqa-shadow:0 8px 24px rgba(10,16,31,.14);
}
body.stem-playground {
  font-family:"Nunito",Arial,system-ui,sans-serif;
  font-optical-sizing:auto;
  -webkit-text-size-adjust:100%;
}
body.stem-playground :is(h1,h2,h3,h4,.epqa-page-title,.epqa-resources-page-title) {
  font-family:"Poppins","Nunito",Arial,sans-serif;
  letter-spacing:-.018em;
  overflow-wrap:break-word;
  text-wrap:pretty;
}
body.stem-playground :is(p,li,label,input,button,select,textarea) {
  overflow-wrap:break-word;
}
body.stem-playground :is(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline:3px solid var(--epqa-focus)!important;
  outline-offset:3px;
}
body.stem-playground .site-header .navbar {
  border-bottom:1px solid var(--epqa-line)!important;
  box-shadow:0 3px 14px rgba(4,32,102,.05)!important;
}
body.stem-playground .site-header .epqa-brand-link {
  padding:4px 8px!important;
  background:var(--epqa-brand-sky)!important;
  border-radius:12px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  aspect-ratio:auto;
  min-width:0!important;
}
body.stem-playground .site-header .epqa-brand-link .epqa-logo {
  display:block;
  width:100%;
  height:auto;
  max-height:62px;
  max-width:190px;
  object-fit:contain;
  aspect-ratio:320/139;
}
body.stem-playground .site-header .epqa-header-shortcut {
  color:var(--epqa-heading)!important;
  font-weight:800;
  border-radius:12px;
  min-height:44px;
  white-space:normal;
  line-height:1.18;
  text-align:center;
}
body.stem-playground .site-header .epqa-header-shortcut:hover,
body.stem-playground .site-header .epqa-header-shortcut.active {
  background:var(--epqa-brand-sky)!important;
  color:var(--epqa-brand-navy)!important;
  border-color:#add9f4!important;
}
body.stem-playground .site-header :is(.epqa-theme-switch,.epqa-nav-mobile-search,.navbar-toggler) {
  border-radius:12px!important;
  flex:0 0 44px;
  min-height:44px;
  min-width:44px;
}
body.stem-playground .site-header #mainNav.show {
  border-radius:16px!important;
  border:1px solid var(--epqa-line)!important;
}
body.stem-playground .site-header #mainNav .nav-link {
  min-height:44px;
  border-radius:12px;
}
body.stem-playground .site-header :is(.nav-link-label,.epqa-header-shortcut,.epqa-menu-label) {
  font-family:"Nunito",Arial,sans-serif;
}
body.stem-playground .site-header #epqa-menu-search {min-width:0;width:100%;}
body.stem-playground .site-header #mainNav .nav-item {min-width:0;}
body.stem-playground .site-header .nav-community-spotlight {font-size:.78rem;}
/* Reusable action and card primitives represented in the Figma file. */
body.stem-playground :is(.btn-primary,.epqa-route-btn) {
  border-radius:12px;
  min-height:44px;
  font-family:"Nunito",Arial,sans-serif;
  font-weight:800;
}
html:not([data-theme="dark"]) body.stem-playground :is(.epqa-resource-card,.epqa-creations__item,.course-card,.epqa-training-card) {
  border-color:var(--epqa-line);
  box-shadow:var(--epqa-shadow);
}
html[data-theme="dark"] body.stem-playground .site-header .epqa-header-shortcut.active,
html[data-theme="dark"] body.stem-playground .site-header .epqa-header-shortcut:hover {
  background:#425777!important;
  border-color:#718fc0!important;
  color:#f3f7ff!important;
}
html[data-theme="dark"] body.stem-playground .site-header .epqa-brand-link {
  background:var(--epqa-brand-sky)!important;
}
html[data-theme="dark"] body.stem-playground .site-header #mainNav {
  color:#f3f7ff;
}
html[data-theme="dark"] body.stem-playground :is(.epqa-creations__item,.course-card,.epqa-training-card) {
  border-color:var(--epqa-line)!important;
  box-shadow:var(--epqa-shadow)!important;
}
body.stem-playground :is(.epqa-resource-card,.epqa-creations__item,.course-card,.epqa-training-card) {
  min-width:0;
}
body.stem-playground :is(.epqa-resource-card h3,.epqa-creations__item h3,.course-card h3) {
  overflow-wrap:anywhere;
  hyphens:auto;
}
@media (max-width:991.98px) {
  body.stem-playground .site-header .epqa-header-shortcuts {display:none!important;}
  body.stem-playground .site-header .epqa-brand-link {
    flex:0 1 175px!important;
    max-width:175px!important;
  }
  body.stem-playground .site-header .epqa-brand-link .epqa-logo {
    max-width:164px!important;
    max-height:66px!important;
  }
  body.stem-playground .site-header .navbar-expand-xl > .container {
    flex-wrap:wrap!important;
    gap:8px;
    min-width:0;
  }
}
@media (max-width:430px) {
  body.stem-playground .site-header .navbar-expand-xl > .container {
    gap:6px!important;
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.stem-playground .site-header .epqa-brand-link {
    flex:1 1 0!important;
    max-width:calc(100% - 150px)!important;
    min-width:0!important;
    margin-right:auto!important;
    padding:2px 3px!important;
    min-height:48px;
    max-height:64px;
  }
  body.stem-playground .site-header .epqa-brand-link .epqa-logo {
    max-height:54px!important;
    max-width:100%!important;
    object-fit:contain;
  }
  body.stem-playground .site-header :is(.epqa-theme-switch,.epqa-nav-mobile-search,.navbar-toggler) {
    flex:0 0 44px!important;
    width:44px!important;
    padding:8px!important;
    margin:0!important;
  }
  body.stem-playground .site-header #mainNav .navbar-nav {
    grid-template-columns:minmax(0,1fr)!important;
  }
  body.stem-playground .site-header #mainNav.show {
    max-height:calc(100dvh - 100px);
    overflow:auto;
  }
  body.stem-playground .site-main {min-width:0;}
}
@media (max-width:350px) {
  body.stem-playground .site-header .epqa-brand-link {max-width:calc(100% - 143px)!important;}
  body.stem-playground .site-header :is(.epqa-theme-switch,.epqa-nav-mobile-search,.navbar-toggler) {
    flex-basis:42px!important;
    min-width:42px!important;
    width:42px!important;
  }
}
@media (prefers-reduced-motion:reduce) {
  body.stem-playground :is(.epqa-resource-card,.epqa-creations__item,.epqa-theme-switch,.navbar-toggler) {
    animation:none!important;transition:none!important;
  }
}