/*
  Coding Classroom v0.9.13.3.3
  Blue shell fix
  Scope: site header + site footer only.
  No lesson, Robot Lab, assessment, API, session, or data logic is changed.
*/

/* ---------- HEADER ---------- */
.site-header{
  background:linear-gradient(100deg,#164b94 0%,#1d5eb5 52%,#2874d4 100%) !important;
  border-bottom:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 7px 22px rgba(18,66,132,.18) !important;
}

/* Normal navigation */
.site-header .main-nav a{
  color:rgba(255,255,255,.94) !important;
  background:transparent !important;
  border-color:transparent !important;
  text-shadow:0 1px 1px rgba(8,45,93,.12);
}
.site-header .main-nav a:hover{
  color:#fff !important;
  background:rgba(255,255,255,.12) !important;
  border-color:rgba(255,255,255,.10) !important;
  transform:translateY(-1px);
}

/* Active page: white pill with BLUE text — fixes the washed-out white-on-white state */
.site-header .main-nav a.active{
  color:#174f9f !important;
  background:#ffffff !important;
  border-color:rgba(255,255,255,.88) !important;
  box-shadow:0 5px 14px rgba(9,46,99,.16) !important;
  text-shadow:none !important;
}

/* XP stays warm/gold, as a reward element */
.site-header .xp-pill{
  color:#76520b !important;
  background:linear-gradient(180deg,#fff7d8,#ffefb5) !important;
  border-color:#f2d57a !important;
  box-shadow:0 4px 12px rgba(80,54,5,.10) !important;
  text-shadow:none !important;
}
.site-header .xp-pill:hover{
  color:#684707 !important;
  background:linear-gradient(180deg,#fff9e3,#ffefb1) !important;
}

/* Sound and level controls remain readable on blue */
.site-header .sound-button{
  color:#1a5aa7 !important;
  background:#fff !important;
  border-color:rgba(255,255,255,.9) !important;
  box-shadow:0 3px 10px rgba(10,46,94,.10);
}
.site-header .header-right select{
  color:#294663 !important;
  background:#fff !important;
  border-color:rgba(255,255,255,.9) !important;
  box-shadow:0 3px 10px rgba(10,46,94,.10);
}

/* ---------- FOOTER ---------- */
.site-footer.site-footer-v062{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 10%,rgba(78,161,255,.22),transparent 30%),
    linear-gradient(105deg,#143f80 0%,#174f9f 48%,#1f63bd 100%) !important;
  border-top:0 !important;
  color:#fff !important;
  box-shadow:0 -7px 22px rgba(17,63,126,.12) !important;
}

/* Thin accent line instead of a pale footer top */
.site-footer.site-footer-v062::before{
  content:"";
  position:absolute;
  left:0 !important;
  right:0 !important;
  top:0;
  height:3px !important;
  background:linear-gradient(90deg,#63c8ff 0%,#74e2d1 50%,#93b8ff 100%) !important;
  border-radius:0 !important;
}

.site-footer-v062 .footer-brand-new small{
  color:#e2f1ff !important;
  font-weight:650;
}

.site-footer-v062 .footer-developer > span{
  color:#b9d9f7 !important;
  font-size:.72rem;
}
.site-footer-v062 .footer-developer strong{
  color:#fff !important;
  font-size:.94rem;
}
.site-footer-v062 .footer-developer small{
  color:#d7eaff !important;
  font-size:.75rem;
}

.site-footer-v062 .footer-links a{
  color:#edf7ff !important;
  font-weight:750;
}
.site-footer-v062 .footer-links a:hover{
  color:#fff !important;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Only the <strong> is the version pill — do NOT style the whole .footer-version box */
.site-footer-v062 .footer-version{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.site-footer-v062 .footer-version strong{
  display:inline-flex;
  justify-self:end;
  width:max-content;
  margin-left:auto;
  padding:5px 11px;
  border-radius:999px;
  color:#fff !important;
  background:rgba(6,39,87,.62) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 4px 12px rgba(5,31,70,.16) !important;
}
.site-footer-v062 .footer-version small{
  color:#cfe6ff !important;
  margin-top:5px;
  line-height:1.45;
}

/* Preserve good alignment when the header wraps on medium screens */
@media(max-width:1200px){
  .site-header .main-nav{
    scrollbar-color:rgba(255,255,255,.28) transparent;
  }
}
@media(max-width:1050px){
  .site-footer-v062 .footer-version strong{
    justify-self:start;
    margin-left:0;
  }
}
@media(max-width:700px){
  .site-header{
    box-shadow:0 5px 16px rgba(18,66,132,.16) !important;
  }
  .site-footer.site-footer-v062{
    text-align:left;
  }
}