/* =========================================================
   KRAKEN MEDICAL TRAINING
   V16.5 PUBLIC VISUAL POLISH
   ========================================================= */

:root{
  --kp-navy:#071b24;
  --kp-deep:#020c0a;
  --kp-teal:#18a88e;
  --kp-aqua:#48d6bd;
  --kp-orange:#e06d42;
  --kp-paper:#f6f9f6;
  --kp-card:#fff;
  --kp-ink:#102b35;
  --kp-muted:#617673;
  --kp-line:#d6e3de;
  --kp-shadow:0 18px 48px rgba(15,50,55,.08);
}

html{background:var(--kp-paper)}

body.kraken-public-page{
  margin:0;
  background:var(--kp-paper);
  color:var(--kp-ink);
  font-family:Inter,sans-serif;
}

/* Shared dark page heroes */
.kraken-public-page .kp-hero,
.kraken-public-page .catalogue-hero,
.kraken-public-page .it-hero,
.kraken-public-page .k12-hero,
.kraken-public-page .j-hero,
.kraken-public-page .page-hero{
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  min-height:400px;
  margin:0!important;
  padding:68px clamp(22px,5vw,78px) 78px!important;
  border:0!important;
  border-radius:0!important;
  background:
    radial-gradient(circle at 80% 38%,rgba(24,168,142,.18),transparent 30%),
    linear-gradient(110deg,#020c0a 0%,#061713 50%,#0b3029 100%)!important;
  color:#fff!important;
}

.kraken-public-page .catalogue-hero:before,
.kraken-public-page .it-hero:before,
.kraken-public-page .k12-hero:before,
.kraken-public-page .j-hero:before,
.kraken-public-page .page-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(72,214,189,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(72,214,189,.035) 1px,transparent 1px);
  background-size:68px 68px;
  pointer-events:none;
}

.kraken-public-page .catalogue-hero>div,
.kraken-public-page .it-hero-inner,
.kraken-public-page .k12-hero-inner,
.kraken-public-page .j-hero-inner{
  position:relative;
  z-index:1;
}

.kraken-public-page .catalogue-kicker,
.kraken-public-page .it-eyebrow,
.kraken-public-page .k12-eyebrow,
.kraken-public-page .j-eyebrow,
.kraken-public-page .eyebrow{
  color:var(--kp-aqua)!important;
}

.kraken-public-page .catalogue-hero h1,
.kraken-public-page .it-hero h1,
.kraken-public-page .k12-hero h1,
.kraken-public-page .j-hero h1,
.kraken-public-page .page-hero h1{
  color:#f6f8f5!important;
}

.kraken-public-page .catalogue-hero p:last-child,
.kraken-public-page .it-hero p,
.kraken-public-page .k12-hero p,
.kraken-public-page .j-hero p,
.kraken-public-page .page-hero p{
  color:#c8dad5!important;
}

/* Hide old public headers */
.kraken-public-page .it-topbar,
.kraken-public-page .k12-topbar,
.kraken-public-page .j-topbar,
.kraken-public-page .topbar,
.kraken-public-page .player-topbar{
  display:none!important;
}

/* =========================================================
   HOME PAGE DARK CARD CONTRAST
   The dark art direction stays dark, but copy is now readable.
   ========================================================= */

.kraken-home-page .category-card,
.kraken-home-page .home-category-card,
.kraken-home-page [class*="category-card"],
.kraken-home-page .simulation-feature,
.kraken-home-page .simulation-panel,
.kraken-home-page [class*="simulation"][class*="feature"],
.kraken-home-page .command-banner,
.kraken-home-page .ready-room,
.kraken-home-page [class*="ready-room"]{
  color:#fff;
}

/* Category cards */
.kraken-home-page .category-card h2,
.kraken-home-page .category-card h3,
.kraken-home-page .category-card h4,
.kraken-home-page .home-category-card h2,
.kraken-home-page .home-category-card h3,
.kraken-home-page [class*="category-card"] h2,
.kraken-home-page [class*="category-card"] h3{
  color:#f4faf7!important;
  text-shadow:0 2px 12px rgba(0,0,0,.28);
}

.kraken-home-page .category-card p,
.kraken-home-page .home-category-card p,
.kraken-home-page [class*="category-card"] p{
  color:#d4e3df!important;
}

.kraken-home-page .category-card a,
.kraken-home-page .home-category-card a,
.kraken-home-page [class*="category-card"] a{
  color:#fff!important;
}

/* Simulation feature */
.kraken-home-page .simulation-feature h2,
.kraken-home-page .simulation-feature h3,
.kraken-home-page .simulation-panel h2,
.kraken-home-page .simulation-panel h3,
.kraken-home-page [class*="simulation"][class*="feature"] h2,
.kraken-home-page [class*="simulation"][class*="feature"] h3{
  color:#f4faf7!important;
}

.kraken-home-page .simulation-feature p,
.kraken-home-page .simulation-panel p,
.kraken-home-page [class*="simulation"][class*="feature"] p{
  color:#d4e3df!important;
}

/* Ready room / command banner */
.kraken-home-page .command-banner h2,
.kraken-home-page .command-banner h3,
.kraken-home-page .ready-room h2,
.kraken-home-page .ready-room h3,
.kraken-home-page [class*="ready-room"] h2,
.kraken-home-page [class*="ready-room"] h3{
  color:#f4faf7!important;
}

.kraken-home-page .command-banner p,
.kraken-home-page .ready-room p,
.kraken-home-page [class*="ready-room"] p{
  color:#d7e5e1!important;
}

/* V14/V15 class fallbacks visible in current homepage */
.kraken-home-page .v14-category-card h3,
.kraken-home-page .v14-category-card .category-title,
.kraken-home-page .v14-sim-panel h2,
.kraken-home-page .v14-sim-panel h3,
.kraken-home-page .v14-command-banner h2,
.kraken-home-page .v14-command-banner h3{
  color:#f5faf8!important;
}

.kraken-home-page .v14-category-card p,
.kraken-home-page .v14-sim-panel p,
.kraken-home-page .v14-command-banner p{
  color:#d5e4df!important;
}

/* Generic dark-surface safety net scoped to home */
.kraken-home-page .dark-card h1,
.kraken-home-page .dark-card h2,
.kraken-home-page .dark-card h3,
.kraken-home-page .dark-panel h1,
.kraken-home-page .dark-panel h2,
.kraken-home-page .dark-panel h3{
  color:#f5faf8!important;
}

.kraken-home-page .dark-card p,
.kraken-home-page .dark-panel p{
  color:#d5e4df!important;
}

/* =========================================================
   MY MISSION / DASHBOARD
   Fixes the stretched Continue Learning course row.
   ========================================================= */

.kraken-mission-page{
  overflow-x:hidden;
}

.kraken-mission-page main{
  overflow:hidden;
}

.kraken-mission-page .page-hero{
  flex-direction:column;
  align-items:flex-start;
}

.kraken-mission-page .section{
  width:min(1120px,calc(100% - 36px))!important;
  margin:44px auto!important;
}

.kraken-mission-page .section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;
}

.kraken-mission-page .section-head h2{
  margin:0;
  font-family:Oswald,sans-serif!important;
  font-size:clamp(2.1rem,4vw,3.25rem);
  line-height:1;
  text-transform:uppercase;
  color:var(--kp-navy);
}

/* Stats */
.kraken-mission-page .dashboard-grid.v10-stats{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:18px!important;
  width:100%!important;
}

.kraken-mission-page .stat-card{
  min-width:0!important;
  padding:24px!important;
  border:1px solid var(--kp-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:var(--kp-shadow)!important;
}

/* Continue learning: contain the dynamically generated course */
.kraken-mission-page #courses.course-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  max-width:100%!important;
  gap:16px!important;
  overflow:hidden!important;
}

.kraken-mission-page #courses > *{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
}

/* Works with several generations of Kraken course cards */
.kraken-mission-page #courses article,
.kraken-mission-page #courses .course-card,
.kraken-mission-page #courses .dashboard-course-card,
.kraken-mission-page #courses .progress-card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:auto auto auto!important;
  column-gap:22px!important;
  row-gap:10px!important;
  padding:24px!important;
  border:1px solid var(--kp-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:var(--kp-shadow)!important;
  overflow:hidden!important;
}

.kraken-mission-page #courses h3,
.kraken-mission-page #courses h4{
  margin:0!important;
  color:var(--kp-ink)!important;
}

.kraken-mission-page #courses p{
  max-width:760px!important;
  margin:0!important;
  color:var(--kp-muted)!important;
}

.kraken-mission-page #courses a{
  max-width:max-content;
}

/* Any progress element generated inside a course gets its own full row */
.kraken-mission-page #courses progress,
.kraken-mission-page #courses [class*="progress"]{
  grid-column:1/-1!important;
  max-width:100%!important;
}

/* Prevent old width declarations from producing 1500px bars */
.kraken-mission-page #courses progress{
  width:100%!important;
}

.kraken-mission-page #courses .progress-bar,
.kraken-mission-page #courses [class*="progress-bar"]{
  width:100%!important;
  max-width:100%!important;
  overflow:hidden!important;
}

/* Existing panels */
.kraken-mission-page .panel{
  width:100%!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  border:1px solid var(--kp-line)!important;
  border-radius:20px!important;
  background:#fff!important;
  box-shadow:var(--kp-shadow)!important;
}

/* Certificates and achievements stay inside the shell */
.kraken-mission-page #certificateList,
.kraken-mission-page #achievementCabinet,
.kraken-mission-page #dashboardAnnouncements{
  max-width:100%!important;
  overflow:hidden;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:760px){
  .kraken-mission-page .section{
    width:calc(100% - 28px)!important;
    margin:32px auto!important;
  }

  .kraken-mission-page .dashboard-grid.v10-stats{
    grid-template-columns:1fr!important;
  }

  .kraken-mission-page .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .kraken-mission-page #courses article,
  .kraken-mission-page #courses .course-card,
  .kraken-mission-page #courses .dashboard-course-card,
  .kraken-mission-page #courses .progress-card{
    grid-template-columns:1fr!important;
    padding:20px!important;
  }

  .kraken-mission-page #courses progress,
  .kraken-mission-page #courses [class*="progress"]{
    grid-column:1!important;
  }
}