/* ==========================================================================
   PVA Academy — Shared Navigation Layer (Phase 2, Option C)
   Scope: design tokens (documented canonical values), the sitewide Home
   button, breadcrumb, and Previous/Next lesson footer nav, plus small
   SVG icon sizing rules.
   Deliberately NOT included here: .card/.btn/.mode-card and other
   per-page component styles — those stay where they are per the agreed
   "small shared layer, not a full migration" scope.
   ========================================================================== */

/* Canonical tokens. Every page still keeps its own local :root copy for
   now (no visual risk from removing working CSS) — this file documents
   the source-of-truth values; de-duplicating the local copies is a
   trivial follow-up that can happen during the mechanical rollout. */
:root{
  --green:#1B4332; --green-dark:#0F2A1D; --green-soft:#E4EEE7;
  --cream:#F5EFDD; --cream-deep:#EDE4CB; --card:#FFFDF7;
  --yellow:#E8A93B; --yellow-deep:#C98A1E;
  --charcoal:#2B2B27; --muted:#6B6754;
  --line:#D8CEB0; --radius:16px;
}

/* ---------- Icons ---------- */
.icon{
  width:1.1em; height:1.1em;
  display:inline-block; vertical-align:-0.15em;
  flex-shrink:0;
}
.icon-lg{ width:22px; height:22px; }

/* Visually-hidden but screen-reader-available text (for icon-only controls
   that also carry an aria-label — belt and suspenders for older AT) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Route-bar top row: Home button + breadcrumb ---------- */
.route-bar-top{
  display:flex; align-items:center; gap:12px;
  max-width:760px; margin:0 auto 10px;
  min-width:0;
}
.home-btn{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; min-width:44px;
  border-radius:10px; color:#CFE3D6;
  background:rgba(255,255,255,.06);
  text-decoration:none; flex-shrink:0;
}
.home-btn, .lesson-nav-link, .module-chip, .mode-link, .start-link{
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.home-btn:hover, .home-btn:focus-visible{
  background:rgba(255,255,255,.14); color:#fff;
}
.home-btn:focus-visible{ outline:2px solid var(--yellow); outline-offset:2px; }

.breadcrumb{ min-width:0; overflow:hidden; }
.breadcrumb ol{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:#8FA89A;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.breadcrumb li{ display:flex; align-items:center; gap:6px; min-width:0; }
.breadcrumb li:not(:last-child)::after{
  content:''; width:5px; height:5px; flex-shrink:0;
  border-right:1.5px solid #5C7A6A; border-bottom:1.5px solid #5C7A6A;
  transform:rotate(-45deg);
}
.breadcrumb a{ color:#CFE3D6; text-decoration:none; }
.breadcrumb a:hover, .breadcrumb a:focus-visible{ color:#fff; text-decoration:underline; }
.breadcrumb [aria-current="page"]{
  color:var(--yellow); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

@media(max-width:600px){
  .breadcrumb li:not(:last-child):not(:first-child){ display:none; }
  .breadcrumb li:not(:last-child)::after{ display:none; }
  .breadcrumb ol{ gap:8px; }
  .breadcrumb li:first-child::after{
    content:''; width:5px; height:5px; flex-shrink:0;
    border-right:1.5px solid #5C7A6A; border-bottom:1.5px solid #5C7A6A;
    transform:rotate(-45deg); margin-left:6px;
  }
}

/* ---------- Bottom-of-lesson Previous / Back / Next nav ---------- */
.lesson-nav-footer{
  display:flex; align-items:stretch; gap:10px;
  margin:28px 0 0; flex-wrap:wrap;
}
.lesson-nav-link{
  flex:1 1 auto; min-width:120px;
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--line); border-radius:12px;
  padding:12px 16px; text-decoration:none; color:var(--charcoal);
  background:var(--card,#FFFDF7);
  transition:border-color .12s ease, background .12s ease, transform .08s ease;
}
.lesson-nav-link:hover, .lesson-nav-link:focus-visible{
  border-color:var(--yellow-deep); background:#FFFBF0; transform:translateY(-1px);
}
.lesson-nav-link:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.lesson-nav-link.next{ justify-content:flex-end; text-align:right; }
.lesson-nav-link .lesson-nav-label{
  display:block; font-size:10.5px; font-weight:800; text-transform:uppercase;
  letter-spacing:.04em; color:var(--muted); margin-bottom:2px;
}
.lesson-nav-link .lesson-nav-title{ display:block; font-size:13.5px; font-weight:700; color:var(--green); }
.lesson-nav-link.module{ flex:0 1 auto; justify-content:center; text-align:center; background:var(--cream-deep,#EDE4CB); }
.lesson-nav-link.module .lesson-nav-title{ color:var(--charcoal); }

@media(max-width:600px){
  .lesson-nav-footer{ flex-direction:column; }
  .lesson-nav-link.next{ justify-content:flex-start; text-align:left; }
}