[data-theme="dark"]  .nav-links a { color: #fff; }
[data-theme="light"] .nav-links a { color: #000; }

/* Hide nav by default (mobile and desktop) */
.nav-links {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100vw;
  background: var(--color-bg);
  z-index: 1002;
  box-shadow: 0 8px 16px rgba(0,0,0,0.13);
  padding: 0.7rem 0 0.7rem 0;
}

/* Show nav only if .show is set (mobile) */
.nav-links.show { display: flex; }

header .menu-toggle { display: none !important; }

/* Hamburger hidden by default */
.menu-toggle { display: none; }

#menu-icon.menu-toggle {
  width: 24px;
  height: 24px;
  cursor: pointer;
  background: transparent;
  border: none;
  margin-right: 1rem;
  padding: 0;
  display: none; /* shown by media queries */
  object-fit: contain;
}

header .nav-links {
  align-items: center;
  gap: 1.5rem;
}

.nav-links li { 
  display: inline-block;
  margin-left: 1.5rem; 
}

.nav-links a {
  position: relative;
  padding: 0.25rem 0.5rem;
}

.nav-links a.active {
  background: linear-gradient(45deg, var(--color-accent-start), var(--color-accent-end));
  color: #fff;
  border-radius: 4px;
  padding: 0.7rem 0.9rem;
}

header .menu-toggle { display: none !important; }

/* On desktop: always show nav, hide hamburger, reset positioning */
@media (min-width: 1301px) {
  .nav-links {
    display: flex !important;
    position: static;
    flex-direction: row;
    width: auto;
    box-shadow: none;
    background: none;
    padding: 0;
  }

  .menu-toggle { display: none !important; }
}

/* On mobile: hamburger visible, nav hidden unless .show */
@media (max-width: 1300px) {
  .menu-toggle { display: block !important; }
}

@media (max-width: 1300px) {
  header .menu-toggle {
    display: block !important;
  }

  /* Hide menu by default on mobile */
  .nav-links {
    display: none !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100vw;
    background: var(--color-bg);
    gap: 0;
    box-shadow: 0 8px 16px rgba(0,0,0,0.13);
    z-index: 1002;
  }
  
  /* Show menu only if .show is added */
  .nav-links.show { display: flex !important; }
}

@media (min-width: 1301px) {
  .nav-links { display: flex !important; }
  header .menu-toggle { display: none !important; }
}

@media (min-width: 768px) { 
  .menu-toggle { display: none; }
}

@media (max-width: 480px) {
  .nav-links {
    width: 100vw;
    left: 0;
    right: 0;
    font-size: 1.08rem;
  }
}