/* Responsive Styles */

/* Mobile Menu Button - Hidden by default */
#mobile-menu-btn {
  display: none;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  padding: 0;
  width: 2rem;
  height: 2rem;
  margin-left: auto; /* Push to right if needed, but flex handles it */
}

#mobile-menu-btn svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 768px) {
  /* Show hamburger button */
  #mobile-menu-btn {
    display: block;
  }

  /* Hide default nav */
  #main-nav {
    display: none;
    position: absolute;
    top: 100%; /* Below header */
    left: 0;
    width: 100%;
    background-color: #17458f; /* rotary-royal-blue */
    flex-direction: column;
    z-index: 50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  }

  /* Show nav when 'active' class is added */
  #main-nav.active {
    display: flex;
  }

  /* Style links in mobile menu */
  #main-nav a {
    display: block;
    padding: 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    text-decoration: none;
    text-align: center;
  }

  #main-nav a:hover {
    background-color: rgba(0, 0, 0, 0.1);
    color: #f7a81b; /* rotary-gold */
  }
}