/* ============================================================
   shared.css  --  Prime Learning Educational Series
   Styles common to EVERY page (index + all lessons)
   ============================================================ */

/* ---------- CUSTOM PROPERTIES ---------- */
:root {
  --navy:       #16171D;
  --navy-mid:   #1E1F27;
  --navy-light: #272833;
  --blue:       #0388A6;
  --blue-light: #2ab0d4;
  --blue-dim:   rgba(3,136,166,0.15);
  --blue-faint: rgba(3,136,166,0.07);
  --white:      #ffffff;
  --white-dim:  rgba(255,255,255,0.78);
  --white-faint:rgba(255,255,255,0.10);
  --orange:     #FF9A3C;
  --orange-dim: rgba(255,154,60,0.12);
  --green:      #5edba0;
  --green-dim:  rgba(94,219,160,0.10);
  --red:        #E74C5A;
  --red-dim:    rgba(231,76,90,0.12);
  --yellow:     #F5C542;
  --yellow-dim: rgba(245,197,66,0.12);

  /* ---------- LAYOUT TOKENS ---------- */
  --content-max: 1400px;
  --pad-x:       clamp(20px, 4vw, 64px);
  --pad-x-sm:    clamp(16px, 3vw, 40px);
}

/* ---------- RESET & BASE ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:"DM Sans",sans-serif; background:var(--navy); color:var(--white); overflow-x:hidden; line-height:1.6; }
img { max-width:100%; height:auto; }

/* ---------- SKIP NAV (accessibility) ---------- */
.skip-nav { position:absolute; top:-100px; left:16px; background:var(--blue); color:#fff; padding:12px 24px; border-radius:8px; font-size:.9rem; z-index:200; text-decoration:none; transition:top .2s; }
.skip-nav:focus { top:16px; }

/* ---------- SCREEN READER ONLY (accessibility) ---------- */
.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; }

/* ---------- FOCUS STYLES (accessibility) ---------- */
*:focus-visible { outline:2px solid var(--blue-light); outline-offset:2px; }

/* ---------- NAV ---------- */
.top-nav { position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(22,23,29,0.92); backdrop-filter:blur(14px); border-bottom:1px solid rgba(255,255,255,0.08); padding:14px var(--pad-x); display:flex; align-items:center; justify-content:center; }
.nav-brand { display:flex; flex-direction:column; align-items:center; gap:6px; }
.top-nav img { height:66px; }
.nav-series { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.25em; color:rgba(255,255,255,.72); text-transform:uppercase; }
.nav-badge { background:var(--blue-dim); border:1px solid rgba(3,136,166,.4); border-radius:6px; padding:3px 10px; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; color:var(--blue-light); }

/* ---------- DIVIDER ---------- */
.divider { width:100%; height:1px; background:linear-gradient(to right,transparent,rgba(3,136,166,.25),transparent); }

/* ---------- CTA SECTION ---------- */
.cta-section { text-align:center; padding:120px var(--pad-x); position:relative; overflow:hidden; }
.cta-section::before { content:""; position:absolute; inset:0; background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(3,136,166,.1) 0%,transparent 70%); pointer-events:none; }
.cta-section h2 { font-family:"Lora",serif; font-size:clamp(1.8rem,4vw,3.2rem); font-weight:700; margin-bottom:20px; position:relative; letter-spacing:-.01em; }
.cta-section p { font-size:1.05rem; color:var(--white-dim); max-width:540px; margin:0 auto 36px; position:relative; }
.cta-btn-row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; position:relative; }
.cta-btn { display:inline-block; padding:15px 40px; background:linear-gradient(135deg,var(--blue),var(--blue-light)); color:#fff; border-radius:50px; font-weight:500; font-size:.92rem; letter-spacing:.04em; text-decoration:none; transition:transform .3s,box-shadow .3s; }
.cta-btn:hover { transform:translateY(-3px); box-shadow:0 16px 40px rgba(3,136,166,.35); }
.cta-btn.secondary { background:transparent; border:1px solid rgba(3,136,166,.4); color:var(--blue-light); }
.cta-btn.secondary:hover { background:var(--blue-dim); border-color:var(--blue); }

/* ---------- SERIES NAV ---------- */
.series-nav { background:var(--navy-mid); padding:48px var(--pad-x); }
.series-nav-inner { max-width:var(--content-max); margin:0 auto; }
.series-nav p.label { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.25em; color:var(--blue); text-transform:uppercase; margin-bottom:20px; }
.series-pills { display:flex; gap:10px; flex-wrap:wrap; }
.series-pill { padding:8px 18px; border-radius:30px; font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.05em; border:1px solid rgba(255,255,255,.1); color:var(--white-dim); text-decoration:none; cursor:pointer; transition:border-color .2s, background .2s; }
.series-pill:hover { background:var(--blue-faint); border-color:rgba(3,136,166,.3); }
.series-pill.active { background:var(--blue-dim); border-color:rgba(3,136,166,.5); color:var(--blue-light); }

/* ---------- PREV / NEXT LESSON NAV ---------- */
.prev-next-nav { max-width:var(--content-max); margin:0 auto; padding:0 var(--pad-x) 32px; display:flex; justify-content:space-between; align-items:center; }
.prev-next-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 24px; border-radius:30px; font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; color:var(--blue-light); border:1px solid rgba(3,136,166,.3); transition:background .2s,border-color .2s; }
.prev-next-btn:hover { background:var(--blue-dim); border-color:var(--blue); }
.prev-next-btn.disabled { opacity:.3; pointer-events:none; }

/* ---------- FOOTER ---------- */
footer { border-top:1px solid rgba(255,255,255,.07); padding:32px var(--pad-x); text-align:center; }
.footer-logo { display:flex; justify-content:center; margin-bottom:12px; }
.footer-logo img { height:38px; }
footer p { font-size:.8rem; color:rgba(255,255,255,.28); margin:0; }

/* ---------- KEYFRAMES ---------- */
@keyframes fadeUp { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }
@keyframes scrollPulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ---------- PRIME LEARNING BRAND BAR ---------- */
.pl-brand-bar {
  position: fixed;
  top: 95px;
  left: 0; right: 0;
  z-index: 99;
  background: rgba(22,23,29,0.95);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(3,136,166,0.25);
  padding: 12px var(--pad-x);
  display: flex;
  align-items: center;
  gap: 14px;
  justify-content: center;
}
.pl-brand-bar img { display:block; height:22px; }
.pl-brand-bar .pl-divider {
  width: 1px; height: 30px;
  background: rgba(3,136,166,0.4);
  flex-shrink: 0;
}
.pl-brand-bar p {
  font-family: "DM Sans", sans-serif;
  font-size: .82rem;
  color: rgba(255,255,255,0.6);
  margin: 0;
  line-height: 1.4;
  max-width: 100%;
}
.brand-bar-link { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.2em; color:var(--blue-light); text-transform:uppercase; text-decoration:none; transition:color .2s; }
.brand-bar-link:hover { color:var(--blue-light); }

/* ---------- REDUCED MOTION (accessibility) ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:0.01ms!important; scroll-behavior:auto!important; }
}

/* ---------- RESPONSIVE  --  shared elements ---------- */
@media(max-width:1024px){
  .top-nav { padding:12px var(--pad-x); }
  .cta-section { padding:80px var(--pad-x); }
}

@media(max-width:600px){
  /* Nav */
  .top-nav img { height:40px; }
  .nav-series { display:none; }

  /* Brand bar */
  .pl-brand-bar { top:75px; gap:10px; padding:8px var(--pad-x); }
  .pl-brand-bar p { font-size:.72rem; }

  /* Touch targets */
  .series-pill { min-height:44px; padding:10px 18px; display:inline-flex; align-items:center; }
  .prev-next-btn { min-height:44px; padding:10px 20px; }

  /* Existing rules */
  .cta-btn-row { flex-direction:column; align-items:center; }
  .series-pills { gap:8px; }
  .prev-next-nav { flex-direction:column; gap:12px; }
}

/* ============================================================
   GUIDED TOUR
   ============================================================ */
.tour-overlay {
  position:fixed; inset:0; z-index:9998;
}
.tour-overlay svg { position:absolute; inset:0; width:100%; height:100%; }

.tour-card {
  position:fixed; z-index:9999;
  background:var(--navy-mid); border:1px solid rgba(3,136,166,.35);
  border-radius:14px; padding:28px 24px 20px; max-width:360px; width:calc(100% - 32px);
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:fadeUp .3s ease;
}
.tour-card-step {
  font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.15em;
  color:var(--blue); text-transform:uppercase; margin-bottom:10px;
}
.tour-card-title {
  font-family:"Lora",serif; font-size:1.1rem; font-weight:700;
  color:var(--blue-light); margin-bottom:8px;
}
.tour-card-desc {
  font-size:.9rem; color:var(--white-dim); line-height:1.6; margin-bottom:20px;
}
.tour-card-footer {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.tour-card-btns { display:flex; gap:8px; }
.tour-btn {
  padding:8px 20px; border-radius:30px; font-family:"DM Sans",sans-serif;
  font-size:.82rem; font-weight:500; border:none; cursor:pointer; transition:transform .2s,box-shadow .2s;
}
.tour-btn-next {
  background:linear-gradient(135deg,var(--blue),var(--blue-light)); color:#fff;
}
.tour-btn-next:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(3,136,166,.3); }
.tour-btn-back {
  background:transparent; border:1px solid rgba(3,136,166,.3); color:var(--blue-light);
}
.tour-btn-back:hover { background:var(--blue-dim); }
.tour-btn-skip {
  background:none; border:none; color:rgba(255,255,255,.4); font-size:.78rem;
  cursor:pointer; padding:4px 8px;
}
.tour-btn-skip:hover { color:rgba(255,255,255,.7); }

.tour-help-btn {
  position:fixed; bottom:24px; right:24px; z-index:9997;
  width:44px; height:44px; border-radius:50%;
  background:linear-gradient(135deg,var(--blue),var(--blue-light));
  color:#fff; font-family:"Lora",serif; font-size:1.1rem; font-weight:700;
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 28px rgba(3,136,166,.35); transition:transform .2s,box-shadow .2s;
}
.tour-help-btn:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 12px 36px rgba(3,136,166,.45); }

@media(max-width:600px){
  .tour-card {
    position:fixed; bottom:0; left:0; right:0; top:auto;
    max-width:100%; width:100%; border-radius:18px 18px 0 0;
    padding:24px 20px 28px;
  }
  .tour-help-btn { width:38px; height:38px; font-size:.95rem; bottom:16px; right:16px; }
}

/* ============================================================
   PROGRESS TRACKING
   ============================================================ */
.lesson-card { position:relative; }

.progress-badge {
  position:absolute; top:18px; right:20px; z-index:10;
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1;
  animation:fadeUp .3s ease;
}
.progress-badge.visited {
  background:var(--blue-dim); border:1px solid rgba(3,136,166,.4); color:var(--blue-light);
}
.progress-badge.completed {
  background:var(--green-dim); border:1px solid rgba(94,219,160,.4); color:var(--green);
}

#progress-tracker {
  max-width:var(--content-max); margin:0 auto;
  padding:16px var(--pad-x) 0;
  display:flex; align-items:center; gap:14px;
}
.progress-bar-wrap {
  flex:1; height:6px; border-radius:3px;
  background:rgba(255,255,255,.08); overflow:hidden;
}
.progress-bar-fill {
  height:100%; border-radius:3px;
  background:linear-gradient(90deg,var(--blue),var(--green));
  transition:width .5s ease;
}
.progress-text {
  font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.08em;
  color:rgba(255,255,255,.5); white-space:nowrap;
}

.mark-complete-btn {
  display:inline-block; padding:15px 40px;
  background:transparent; border:1px solid rgba(3,136,166,.4);
  color:var(--blue-light); border-radius:50px;
  font-family:"DM Sans",sans-serif; font-weight:500; font-size:.92rem;
  letter-spacing:.04em; cursor:pointer;
  transition:transform .3s,box-shadow .3s,border-color .3s,color .3s;
}
.mark-complete-btn:hover {
  background:var(--blue-dim); border-color:var(--blue); transform:translateY(-3px);
}
.mark-complete-btn.done {
  border-color:rgba(94,219,160,.5); color:var(--green);
  cursor:default; pointer-events:none;
}