/* styles.css */
body {
  padding-bottom: 80px; /* For mobile nav */
  margin: 0 auto;
  max-width: 900px;
}

#main-nav {
  position: fixed;
  z-index: 1000;
  background-color: var(--pico-background-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  padding: 0 1rem;
}

/* Mobile: Bottom bar */
@media (max-width: 768px) {
  #main-nav {
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: 1px solid var(--pico-muted-border-color);
    margin: 0;
  }
}

/* Desktop: Floating pill */
@media (min-width: 769px) {
  body {
    padding-top: 100px; /* Space for the floating pill nav */
    padding-bottom: 0;
  }
  
  #main-nav {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    border-radius: 50px;
    padding: 0 2rem;
    border: 1px solid var(--pico-muted-border-color);
  }
}

/* Semantic layout spacing */
main, article, section, aside {
  margin-bottom: 3rem;
}

address#footer-address {
  text-align: center;
  padding: 2rem 0;
  border-top: 1px solid var(--pico-muted-border-color);
  margin-top: 4rem;
}