.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px;
  border: 2px solid var(--blue);
  border-radius: 999px;
  background: var(--cream);
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 900;
  text-decoration: none;
  transition: color .18s ease, background .18s ease, transform .18s ease;
}

.nav-link[aria-current="page"],
.nav-link:hover,
.nav-link:focus-visible {
  color: var(--cream);
  background: var(--blue);
  outline: none;
}

.nav-link:hover { transform: translateY(-1px); }

.mobile-menu { display: none; position: relative; }

.mobile-menu summary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 15px;
  border: 2px solid var(--blue);
  border-radius: 999px;
  background: var(--cream);
  font-size: .78rem;
  font-weight: 1000;
  list-style: none;
  cursor: pointer;
}

.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary::before { content: "☰"; margin-right: 7px; font-size: 1rem; }
.mobile-menu[open] summary::before { content: "×"; }

.mobile-menu-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  min-width: 190px;
  padding: 8px;
  border: 2px solid var(--blue);
  border-radius: 18px;
  background: var(--cream);
  box-shadow: 5px 5px 0 var(--blue);
}

.mobile-menu-panel a {
  padding: 12px 13px;
  border-radius: 11px;
  font-size: .86rem;
  font-weight: 900;
  text-decoration: none;
}

.mobile-menu-panel a[aria-current="page"],
.mobile-menu-panel a:hover,
.mobile-menu-panel a:focus-visible {
  color: var(--cream);
  background: var(--blue);
  outline: none;
}

.footer-right { display: grid; justify-items: end; gap: 10px; flex: 0 0 auto; }
.footer-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; }
.footer-nav a {
  color: var(--blue);
  font-weight: 1000;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.footer-nav a:hover,
.footer-nav a:focus-visible { text-decoration-thickness: 3px; outline: none; }

@media (max-width: 660px) {
  .main-nav { display: none; }
  .mobile-menu { display: block; }
  .footer-right { width: 100%; justify-items: start; }
  .footer-nav { justify-content: flex-start; }
}