/* =====================================================================
   SA Academy — design system (per BRAND.md §3–§5).
   Loaded on every academy page (via components/header.php). Module-only
   rules live in components/module.css (don't reintroduce them here — keeps
   the .card-body leak out of root pages).
   Legacy academy-* / -primary classes are PRESERVED at their prior values so
   not-yet-refreshed academy pages (legacy courses, auth, program, module
   bodies) keep rendering during the staged rollout.
   ===================================================================== */

:root {
  /* --- BRAND tokens (§3) --- */
  /* action — the one CTA color sitewide */
  --sa-action:        #10B981;  --sa-action-hover: #059669;  --sa-success: #059669;
  /* ink & neutrals */
  --sa-text:          #0F172A;  --sa-heading: #102A43;  --sa-text-2: #334155;
  --sa-muted:         #64748B;  --sa-border:  #E2E8F0;  --sa-border-strong: #CBD5E1;
  /* surfaces (light-first) */
  --sa-bg:   #F8FAFC;  --sa-panel: #F1F5F9;  --sa-card: #FFFFFF;  --sa-navy: #0B1220;
  /* program accents (CYB blue · DSO cyan-teal · GRC amber) */
  --sa-cyb: #2563EB;  --sa-cyb-surface: #EFF6FF;  --sa-cyb-ink: #1E3A8A;
  --sa-dso: #0E7490;  --sa-dso-surface: #ECFEFF;  --sa-dso-ink: #155E75;
  --sa-grc: #B45309;  --sa-grc-surface: #FFFBEB;  --sa-grc-ink: #78350F;

  /* type (§4) */
  --font-heading: 'Manrope', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* --- legacy aliases (kept so un-refreshed pages don't shift) --- */
  --academy-primary:   #2a467e;
  --academy-secondary: #1e293b;
  --academy-accent:    #10b981;
  --academy-light:     #f8fafc;
}

body { font-family: var(--font-body); background-color: var(--sa-bg); color: var(--sa-text); }
h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--font-heading); color: var(--sa-heading); }

/* =====================================================================
   LEGACY COMPAT (do not remove until every academy page is refreshed)
   ===================================================================== */
.bg-academy-dark   { background-color: var(--academy-primary) !important; }
.text-academy-accent { color: var(--academy-accent) !important; }
.btn-academy-accent { background-color: var(--academy-accent); color: #fff; border: none; transition: all .3s ease; }
.btn-academy-accent:hover { background-color: #059669; color:#fff; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(16,185,129,.3); }
.bg-academy-accent { background-color: var(--academy-accent) !important; }
.section-padding   { padding: 80px 0; }
.text-primary      { color: var(--academy-primary) !important; }
.bg-primary        { background-color: var(--academy-primary) !important; }
.btn-outline-primary { color: var(--academy-primary); border-color: var(--academy-primary); }
.btn-outline-primary:hover { background-color: var(--academy-primary); color: #fff; }
.card { transition: transform .2s ease-in-out, box-shadow .2s ease-in-out; }
.hover-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,.1) !important; }
/* main-site footer, when included on academy module pages (until they migrate) */
.site-footer { background-color: var(--sa-navy); color: #cbd5e1; padding: 60px 0 20px; }
.site-footer h5 { color: #fff; margin-bottom: 20px; }
.site-footer a { color: #cbd5e1; text-decoration: none; }
.site-footer a:hover { color: var(--sa-action); }
.footer-bottom { border-top: 1px solid #1e293b; margin-top: 40px; padding-top: 20px; text-align: center; font-size: .9rem; }

/* =====================================================================
   SA ACADEMY HEADER (white — BRAND §5)
   ===================================================================== */
.sa-header { background: var(--sa-card); border-bottom: 1px solid var(--sa-border); }
.sa-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; padding: .3125rem 0; }
.sa-logo { width: 36px; height: 36px; flex: 0 0 36px; }
/* brand lockup images — fixed height + width:auto to avoid layout shift */
.sa-logo-img { height: 44px; width: auto; display: block; }
.sa-logo-icon { height: 40px; width: 40px; }
.sa-foot-logo { height: 40px; width: auto; }
.sa-brand-icon { height: 38px; width: auto; flex: 0 0 auto; }
.sa-wordmark { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: var(--sa-heading); line-height: 1.05; letter-spacing: -.01em; }
.sa-descriptor { font-size: .75rem; color: var(--sa-muted); letter-spacing: .02em; line-height: 1.1; }
.sa-nav .nav-link { color: var(--sa-text-2); font-weight: 500; }
.sa-nav .nav-link:hover, .sa-nav .nav-link.active { color: var(--sa-action); }
.sa-nav .dropdown-menu { border: 1px solid var(--sa-border); border-radius: 12px; box-shadow: 0 10px 30px rgba(16,24,40,.08); }
.sa-nav .dropdown-item.active, .sa-nav .dropdown-item:active { background: var(--sa-action); }
.sa-signin { color: var(--sa-text-2); font-weight: 600; text-decoration: none; }
.sa-signin:hover { color: var(--sa-action); }

/* =====================================================================
   BUTTONS (BRAND §5)
   ===================================================================== */
.sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: 10px; font-weight: 600; padding: .6rem 1.25rem; font-size: .95rem; text-decoration: none; transition: all .2s ease; border: 1px solid transparent; cursor: pointer; }
.sa-btn-lg { padding: .85rem 1.7rem; font-size: 1.02rem; }
.sa-btn-primary { background: var(--sa-action); color: #fff; }
.sa-btn-primary:hover { background: var(--sa-action-hover); color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,185,129,.28); }
.sa-btn-secondary { background: var(--sa-card); color: var(--sa-heading); border-color: var(--sa-border-strong); }
.sa-btn-secondary:hover { background: var(--sa-panel); color: var(--sa-heading); }
.sa-btn-soft { background: var(--sa-panel); color: var(--sa-muted); border-color: var(--sa-border); cursor: default; }

/* =====================================================================
   SECTIONS / ERYBROW / HERO / SNAPSHOT
   ===================================================================== */
.sa-section { padding: 72px 0; }
.sa-section-tight { padding: 48px 0; }
.sa-panel-bg { background: var(--sa-panel); }
.sa-eyebrow { font-family: var(--font-heading); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sa-action); }
.sa-hero { background: var(--sa-card); border-bottom: 1px solid var(--sa-border); }
.sa-hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 700; color: var(--sa-heading); line-height: 1.1; letter-spacing: -.02em; }
.sa-lead { font-size: 1.15rem; color: var(--sa-text-2); line-height: 1.6; }
.sa-snapshot { background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: 12px; padding: 1.1rem .9rem; text-align: center; height: 100%; }
.sa-snapshot i { color: var(--sa-action); font-size: 1.25rem; }
.sa-snapshot .num { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; color: var(--sa-heading); margin-top: .4rem; }
.sa-snapshot .lbl { font-size: .82rem; color: var(--sa-muted); }

/* =====================================================================
   PROGRAM CARDS (BRAND §5) — program color via --p custom props
   ===================================================================== */
.sa-prog-cyb { --p: var(--sa-cyb); --p-surface: var(--sa-cyb-surface); --p-ink: var(--sa-cyb-ink); }
.sa-prog-dso { --p: var(--sa-dso); --p-surface: var(--sa-dso-surface); --p-ink: var(--sa-dso-ink); }
.sa-prog-grc { --p: var(--sa-grc); --p-surface: var(--sa-grc-surface); --p-ink: var(--sa-grc-ink); }

.sa-card { background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: 14px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: box-shadow .2s ease, transform .2s ease; }
.sa-card:hover { box-shadow: 0 14px 30px rgba(16,24,40,.09); transform: translateY(-3px); }
/* content surface for STACKED single-column panels — natural height (no height:100%/flex-col/overflow,
   which are .sa-card's equal-height-grid traits and would overflow a stacked column). */
.sa-panel { background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: 14px; }
.sa-card.is-soon { opacity: .85; }
.sa-card-strip { height: 3px; background: var(--p, var(--sa-border-strong)); }
.sa-card-body { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
.sa-icon-tile { width: 48px; height: 48px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: var(--p-surface, var(--sa-panel)); color: var(--p, var(--sa-muted)); font-size: 1.2rem; }
.sa-code { font-family: var(--font-heading); font-weight: 700; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; color: var(--p, var(--sa-muted)); }
.sa-card-title { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; color: var(--sa-heading); margin: .15rem 0 .15rem; }
.sa-card-tagline { font-family: var(--font-heading); font-weight: 500; font-size: .9rem; color: var(--p, var(--sa-muted)); margin-bottom: .6rem; }
.sa-card-desc { color: var(--sa-text-2); font-size: .92rem; line-height: 1.55; }
.sa-view-link { align-self: flex-start; color: var(--p, var(--sa-action)); border: 1px solid var(--p, var(--sa-action)); background: transparent; border-radius: 9px; padding: .5rem 1.05rem; font-weight: 600; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; transition: all .2s ease; }
.sa-view-link:hover { background: var(--p-surface, var(--sa-panel)); color: var(--p-ink, var(--sa-action)); }
.sa-soon-link { align-self: flex-start; color: var(--sa-muted); background: var(--sa-panel); border: 1px solid var(--sa-border); border-radius: 9px; padding: .5rem 1.05rem; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .45rem; }
.sa-pill-live { font-size: .7rem; font-weight: 600; color: var(--sa-success); background: #ECFDF5; border: 1px solid #A7F3D0; padding: .22rem .6rem; border-radius: 50px; }
.sa-pill-soon { font-size: .7rem; font-weight: 600; color: var(--sa-muted); background: var(--sa-panel); border: 1px solid var(--sa-border); padding: .22rem .6rem; border-radius: 50px; }

/* page-header band — program-accent top strip + eyebrow (themed via --p from .sa-prog-*) */
.sa-pagehead { background: var(--sa-panel); border-bottom: 1px solid var(--sa-border); border-top: 3px solid var(--p, var(--sa-action)); padding: 2rem 0; }
.sa-pagehead .sa-eyebrow { color: var(--p, var(--sa-action)); }
.sa-pagehead-title { font-family: var(--font-heading); font-weight: 700; color: var(--sa-heading); font-size: clamp(28px, 4vw, 42px); letter-spacing: -.02em; margin: 0; }
.sa-pagehead-lead { color: var(--sa-text-2); font-size: 1.1rem; max-width: 720px; margin: .5rem 0 0; }
.sa-breadcrumb { font-size: .85rem; }
.sa-breadcrumb .breadcrumb-item a { color: var(--sa-muted); text-decoration: none; }
.sa-breadcrumb .breadcrumb-item a:hover { color: var(--sa-action); }
.sa-breadcrumb .breadcrumb-item.active { color: var(--sa-text-2); }

/* stepped pathway / module cards */
.sa-step { background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: 12px; transition: box-shadow .2s ease, transform .2s ease; }
.sa-step:hover { box-shadow: 0 10px 24px rgba(16,24,40,.07); }
.sa-step.is-frontier { border-color: var(--p, var(--sa-action)); box-shadow: 0 0 0 1px var(--p, var(--sa-action)); }
.sa-step.is-complete { border-left: 4px solid var(--sa-success); }
.sa-step-num { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading); font-weight: 700; background: var(--p-surface, var(--sa-panel)); color: var(--p, var(--sa-muted)); }
.sa-step.is-complete .sa-step-num { background: #ECFDF5; color: var(--sa-success); }

/* sidebar rail + circular progress ring (pure CSS conic-gradient) */
.sa-rail { background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: 14px; }
.sa-ring { --val: 0; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--sa-success) calc(var(--val) * 1%), var(--sa-border) 0); }
.sa-ring-inner { width: 78px; height: 78px; border-radius: 50%; background: var(--sa-card); display: grid; place-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 1.25rem; color: var(--sa-heading); }

/* =====================================================================
   LEARNING EXPERIENCE / CREDENTIALS
   ===================================================================== */
.sa-feature { display: flex; gap: 1rem; align-items: flex-start; }
.sa-feature .ic { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 11px; background: var(--sa-cyb-surface); color: var(--sa-cyb); display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; }
.sa-feature h3 { font-size: 1.1rem; font-weight: 600; color: var(--sa-heading); margin-bottom: .2rem; }
.sa-feature p { color: var(--sa-text-2); font-size: .94rem; margin: 0; }
.sa-preview { background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: 16px; box-shadow: 0 12px 30px rgba(16,24,40,.06); }
.sa-why { background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: 14px; padding: 1.6rem; height: 100%; }
.sa-why .ic { color: var(--sa-action); font-size: 1.4rem; margin-bottom: .6rem; }
.sa-canvas { background: linear-gradient(180deg, var(--sa-panel) 0%, var(--sa-card) 100%); border-top: 1px solid var(--sa-border); border-bottom: 1px solid var(--sa-border); }
.sa-cred { background: var(--sa-card); border: 1px solid var(--sa-border); border-radius: 14px; box-shadow: 0 10px 24px rgba(16,24,40,.06); }
.sa-seal { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--sa-cyb); color: var(--sa-cyb); display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; }

/* =====================================================================
   SA ACADEMY FOOTER (navy — BRAND §5)
   ===================================================================== */
.sa-footer { background: var(--sa-navy); color: #CBD5E1; padding: 56px 0 24px;
  /* lightened program-dot tints that read on the navy footer */
  --sa-cyb-foot: #60A5FA; --sa-dso-foot: #2DD4BF; --sa-grc-foot: #FBBF24; }
.sa-footer h5 { color: #fff; font-family: var(--font-heading); font-size: 1rem; margin-bottom: 1rem; }
.sa-footer a { color: #CBD5E1; text-decoration: none; }
.sa-footer a:hover { color: var(--sa-action); }
.sa-footer .sa-foot-brand { font-family: var(--font-heading); font-weight: 700; color: #fff; font-size: 1.1rem; }
.sa-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.sa-footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 2rem; padding-top: 1.25rem; font-size: .85rem; color: #94A3B8; }

/* =====================================================================
   MOBILE / RESPONSIVE GUARDS
   ===================================================================== */
/* Nothing may exceed the viewport width (kills accidental horizontal scroll). */
/* overflow-x: clip (not hidden) — prevents horizontal scroll WITHOUT making <body> a
   scroll container, so position:sticky elements (e.g. the course sidebar rail) stay
   bounded by their column and never paint over the footer. */
html, body { overflow-x: clip; max-width: 100%; }

/* sidebar rail sticky — scoped (no Bootstrap .sticky-top z-index:1020 that painted over the footer) */
.sa-rail-sticky { position: sticky; top: 90px; }

@media (max-width: 991.98px) {
  /* In the collapsed navbar, render dropdowns inline (static, full-width) so an
     absolutely-positioned menu can't push past the viewport edge. */
  .sa-nav .dropdown-menu {
    position: static !important;
    width: 100%;
    border: 0;
    box-shadow: none;
    padding-left: .5rem;
    margin: .15rem 0 .35rem;
  }
  .sa-nav .dropdown-item { white-space: normal; }          /* long items wrap, don't widen */
  .sa-nav .dropdown-item .badge { white-space: nowrap; }

  /* Auth / CTA group: deliberate block at the bottom of the collapsed menu. */
  .sa-auth {
    border-top: 1px solid var(--sa-border);
    margin-top: .6rem;
    padding-top: .9rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    align-items: stretch;
  }
  .sa-auth .sa-signin { text-align: center; padding: .4rem 0; }
  .sa-auth .sa-btn { width: 100%; }
}