/* ====== Base / Mobile First ====== */

/* Navbar container */
.navbar {
  display: grid;
  grid-template-columns: auto 1fr auto; /* logo | spacer | menu */
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10000;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
  transition: padding 0.15s ease, margin 0.15s ease;
}

/* Navbar scrolled state (if used) */
.navbar.scrolled {
  padding: 24px; /* same padding, adjust if needed */
}

/* Logo */
.logo {
  grid-column: 1;
}

.logo-img {
  width: 96px;
}

/* Nav lists inside page-links/contact-links */
.page-links .nav-links,
.contact-links .nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}


/* === Mobile styles === */

/* Overlay container for mobile menu */
.navbar.open {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: rgba(255, 255, 255, 0.95);
  z-index: 9999;
  padding-top: 6rem;
  text-align: center;
  overflow-y: auto; /* scroll if content is tall */
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Make page-links and contact-links stack vertically inside navbar.open */
.page-links,
.contact-links {
  position: static;  /* remove fixed */
  display: flex;
  flex-direction: column;
  gap: 2rem;
  background: transparent;
  height: auto;
  width: 100%;
  padding: 0;
  z-index: auto;
}

/* Hide menus by default */
.page-links,
.contact-links {
  display: none;
}

/* Show both when navbar is open */
.navbar.open .page-links,
.navbar.open .contact-links {
  display: flex;
}



/* Nav link styles */
.nav-links a {
  text-decoration: none;
  color: #000;
  font-size: 1rem;
  text-transform: uppercase;
  transition: color 0.25s ease-in-out;
}

.nav-links a:hover {
  color: #006F3A;
}

/* Hamburger menu button (mobile) */
.menu-toggle {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  justify-self: end;
}

/* Close button inside mobile nav */
.close-toggle {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  font-size: 2rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10001;
  display: none;
}

.navbar.open .close-toggle {
  display: block;
}

/* Small decorative dot, hidden on mobile */
.dot {
  display: none;
  height: 2px;
  width: 2px;
  border: solid #0F1B1F 2px;
}

.navbar.open .logo,
.navbar.open .menu-toggle {
  display: none;
}


/* ====== Desktop and Larger Screens (min-width: 768px) ====== */
@media (min-width: 768px) {
  /* Navbar layout */
  .navbar {
    grid-template-columns: auto 1fr auto;
    padding: 24px 64px;
    gap: 1.5rem;
  }

  .navbar.scrolled {
    padding: 24px 64px;
  }

  /* Show nav containers inline */
  .page-links,
  .contact-links {
    display: block !important; /* override mobile display:none */
    position: static;
    width: auto;
    height: auto;
    background: transparent;
    padding-top: 0;
    text-align: left;
  }

  /* Nav lists horizontal row */
  .page-links .nav-links,
  .contact-links .nav-links {
    flex-direction: row;
    justify-content: center;
    gap: 2.5rem;
  }

  .contact-links .nav-links {
    gap: 0.75rem;
  }

  .page-links .nav-links {
    gap: 4.5rem;
  }

  /* Show decorative dot */
  .dot {
    display: block;
  }

  /* Hide hamburger menu and close toggle on desktop */
  .menu-toggle,
  .close-toggle {
    display: none !important;
  }

  /* Nav links visible and inline */
  .nav-links {
    display: flex;
  }

  /* Container spacing */
  .container {
    margin: 64px;
  }

  .work-section {
    margin: 56px 64px;
  }

  .about-content {
    padding: 64px;
  }
}