/* Kidpreneur Academy — Mission Map (main content only)
   Enqueued automatically by kp-mission-dashboard.php wherever
   [kp_student_dashboard] is used. No sidebar styles here — pair this with
   your own sidebar shortcode/widget in a two-column layout. */

html{ scroll-behavior:smooth; } /* needed here, not on .kp-mission-main, since the page itself scrolls, not this div */

.kp-mission-main{
  --navy:#182B49; --blue:#2F80ED; --mint:#43D6A5; --yellow:#FFD166; --coral:#FF6B6B;
  --white:#FFFFFF; --mist:#F5F7FA; --slate:#4B5563; --ink:#111827;
  font-family:'Nunito Sans',sans-serif; color:var(--ink);
  padding:28px 32px; background:var(--mist); border-radius:16px;
}
.kp-mission-main h1,.kp-mission-main h2,.kp-mission-main h3,.kp-mission-main h4{font-family:'Fredoka',sans-serif; font-weight:600; margin:0;}
.kp-mission-main a{text-decoration:none;}

.kp-course-switcher{display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap;}
.kp-course-pill{background:#fff; border:2px solid #E5E9F0; color:var(--slate); font-weight:800; font-size:12.5px; padding:8px 16px; border-radius:100px; font-family:'Plus Jakarta Sans',sans-serif;}
.kp-course-pill.active{background:var(--navy); color:#fff; border-color:var(--navy);}

.kp-top-row{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; margin-bottom:20px; flex-wrap:wrap;}
.kp-top-row h1{font-size:24px; color:var(--navy);}
.kp-sub{font-size:13.5px; color:var(--slate); font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; margin-top:4px;}
.kp-ziggy-note{background:#fff; border:2px solid var(--yellow); border-radius:16px; padding:14px 20px; display:flex; align-items:center; gap:14px; max-width:360px;}
.kp-ziggy-label{font-size:10.5px; font-weight:800; color:var(--coral); letter-spacing:.04em; font-family:'Plus Jakarta Sans',sans-serif; display:block; margin-bottom:2px;}
.kp-ziggy-note p{font-size:13.5px; color:var(--navy); font-weight:600; margin:0;}

.kp-journey-card{background:linear-gradient(120deg,#4536E0,#2A1E8C); border-radius:18px; padding:26px 28px; color:#fff; margin-bottom:24px;}
.kp-journey-label{font-size:11px; font-weight:800; letter-spacing:.05em; color:#C9C3FF; font-family:'Plus Jakarta Sans',sans-serif; display:block; margin-bottom:4px;}
.kp-journey-card h2{font-size:22px; margin:0 0 18px;}
.kp-progress-row{display:flex; align-items:center; gap:14px; margin-bottom:10px;}
.kp-progress-track{flex:1; height:10px; background:rgba(255,255,255,.2); border-radius:100px; overflow:hidden;}
.kp-progress-fill{height:100%; background:linear-gradient(90deg,var(--coral),var(--yellow)); border-radius:100px;}
.kp-progress-pct{font-size:13px; font-weight:800; color:#fff; font-family:'Plus Jakarta Sans',sans-serif; flex-shrink:0; min-width:36px; text-align:right;}
.kp-progress-caption{font-size:12.5px; color:#C9C3FF; font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; margin:0;}

.kp-next-mission{background:linear-gradient(120deg,#FFF9E9,#FFE9E4); border:2px solid var(--yellow); border-radius:18px; padding:24px 28px; display:flex; justify-content:space-between; gap:24px; margin-bottom:26px; align-items:center; flex-wrap:wrap;}
.kp-next-info{flex:1; min-width:260px;}
.kp-next-tag{display:inline-block; background:var(--coral); color:#fff; font-size:11px; font-weight:800; padding:5px 14px; border-radius:100px; font-family:'Plus Jakarta Sans',sans-serif; margin-bottom:10px;}
.kp-next-info h3{font-size:19px; color:var(--navy); margin-bottom:6px;}
.kp-next-info p{font-size:13.5px; color:var(--slate); margin-bottom:12px;}
.kp-next-info ul{list-style:none; padding:0; margin:0 0 16px; font-size:12.5px; color:var(--navy); font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; display:flex; flex-direction:column; gap:6px;}
.kp-btn-start{display:inline-block; background:var(--coral); color:#fff; font-weight:800; padding:11px 22px; border-radius:100px; font-size:13.5px; font-family:'Plus Jakarta Sans',sans-serif;}
.kp-next-art{width:140px; height:140px; background:#fff; border-radius:16px; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:hidden;}
.kp-sparkle{position:absolute; top:-10px; left:-6px; font-size:20px; color:var(--yellow);}

.kp-phase-tabs{display:flex; gap:10px; margin:26px 0 20px; flex-wrap:wrap;}
.kp-tab-pill{background:#fff; border:2px solid #E5E9F0; color:var(--slate); font-weight:800; font-size:12.5px; padding:9px 18px; border-radius:100px; font-family:'Plus Jakarta Sans',sans-serif; display:inline-flex; align-items:center; gap:2px; text-decoration:none; opacity:1; transition:transform .12s;}
.kp-tab-pill.complete{background:var(--navy); color:#fff; border-color:var(--navy);}
/* Explicit hover states — scoped only to these two classes, so this cannot
   affect any other link/button on the site. Needed because the theme's own
   global `a:hover` rule was overriding text/background color on hover,
   making the pill text nearly invisible against its own background. */
.kp-tab-pill:hover,
.kp-tab-pill:focus{
  color:var(--slate) !important;
  background:#fff !important;
  border-color:#E5E9F0 !important;
  text-decoration:none !important;
  opacity:1 !important;
  transform:translateY(-1px);
}
.kp-tab-pill.complete:hover,
.kp-tab-pill.complete:focus{
  color:#fff !important;
  background:var(--navy) !important;
  border-color:var(--navy) !important;
  text-decoration:none !important;
  opacity:1 !important;
  transform:translateY(-1px);
}

.kp-mission-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:16px;}
.kp-mission-card{background:#fff; border:2px solid #EEF1F5; border-radius:16px; padding:18px 20px; display:flex; flex-direction:column;}
.kp-card-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; gap:8px;}
.kp-mission-tag{font-size:10.5px; font-weight:800; letter-spacing:.03em; font-family:'Plus Jakarta Sans',sans-serif;}
.kp-tag-ready{color:var(--coral);}
.kp-tag-set{color:var(--blue);}
.kp-tag-launch{color:var(--mint);}
.kp-status-badge{font-size:10.5px; font-weight:800; padding:3px 10px; border-radius:100px; font-family:'Plus Jakarta Sans',sans-serif; white-space:nowrap; display:inline-flex; align-items:center; gap:3px;}
.kp-status-badge.done{background:#F1FBF6; color:#1F9C74;}
.kp-status-badge.new{background:#E4EFFD; color:var(--blue);}
.kp-mission-card h4{font-size:15.5px; color:var(--navy); margin-bottom:6px; font-weight:500;}
.kp-mission-card p{font-size:12.5px; color:var(--slate); margin-bottom:10px; line-height:1.5; flex:1;}
.kp-card-meta{font-size:11.5px; color:var(--slate); font-family:'Plus Jakarta Sans',sans-serif; font-weight:700; margin-bottom:14px;}
.kp-card-bottom{display:flex; justify-content:space-between; align-items:center;}
.kp-status-icon{width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:800; flex-shrink:0;}
.kp-status-icon.done{background:#F1FBF6; color:#1F9C74; border:2px solid #1F9C74;}
.kp-status-icon.current{background:#FFF6DC; color:#C9A84C; border:2px solid var(--yellow);}
.kp-status-icon.locked{background:#F5F7FA; color:#E8A33D; border:2px solid #D3D9E1;}
.kp-card-btn{font-size:12px; font-weight:800; padding:8px 16px; border-radius:100px; font-family:'Plus Jakarta Sans',sans-serif; white-space:nowrap;}
.kp-card-btn.done{background:#fff; color:#1F9C74; border:2px solid #1F9C74;}
.kp-card-btn.start{background:var(--coral); color:#fff; border:none;}
.kp-card-btn.locked{background:#EEF1F5; color:#A9B2C3; border:none; cursor:not-allowed;}

@media(max-width:900px){
  .kp-mission-grid{grid-template-columns:1fr;}
}
@media(max-width:860px){
  .kp-next-mission{flex-direction:column;}
}

/* ==== v2.1: icon sizing for the inline SVG icons (replacing emoji) ==== */
.kp-li-icon{display:inline-flex; vertical-align:-3px;}
.kp-li-icon svg{width:14px; height:14px;}

.kp-icon-badge svg{width:13px; height:13px;}

.kp-tab-icon{display:inline-flex; vertical-align:-3px; margin-right:2px;}
.kp-tab-icon svg{width:14px; height:14px;}
.kp-tab-check{display:inline-flex; vertical-align:-2px; margin-left:2px;}
.kp-tab-check svg{width:12px; height:12px;}

.kp-badge-icon{display:inline-flex; vertical-align:-2px; margin-right:2px;}
.kp-badge-icon svg{width:11px; height:11px;}

.kp-status-icon svg.kp-status-svg{width:15px; height:15px;}