/* Make header behave like a navbar */
header{display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative}
header nav a{margin-left:1.25rem}
header img{height:64px}

/* Footer credit style */
.footer-credit{margin:0 0 1rem 0;text-align:center}
.footer-credit a{color:#3aa0ff;text-decoration:none}
.footer-credit a:hover{text-decoration:underline}

/* Mobile */
@media (max-width:768px){
  header img{max-height:40px;height:auto} /* header logo ≈ footer size */
  .nav-toggle{position:absolute;right:16px;top:18px;display:block;font-size:1.6rem;background:none;border:0;color:#fff;z-index:20}
  header nav{
    position:absolute;top:72px;left:0;right:0;
    background:#0d2236;border-bottom:1px solid rgba(255,255,255,.08);
    display:flex;flex-direction:column;padding:.5rem 1rem;
    max-height:0;overflow:hidden;transition:max-height .2s ease
  }
  body.menu-open header nav{max-height:330px}
  header nav a{margin:.4rem 0;padding:.35rem 0;font-size:1.05rem}
}
@media (min-width:769px){
  .nav-toggle{display:none}
  header nav{position:static;display:flex;align-items:center;max-height:none!important}
}

/* Desktop spacing tweaks */
@media (min-width: 769px){
  header{padding:16px 24px; gap:2.5rem;}      /* more space between logo and nav */
  header nav a{margin-left:1.5rem;}          /* spread links a touch */
}