/* Navigation */
.navigation {
  position: sticky;
  top: 0;
  width: 100vw;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-lg);
  padding: var(--container-padding-small) var(--container-padding);
  background-color: var(--color-white);
  justify-content: space-between;
  align-items: center;
  z-index: 100;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}

.navigation.scrolled {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.04);
}

.nav-left,
.nav-center,
.nav-right {
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.nav-left {
  flex: 1;
}

.nav-center {
  display: flex;
  gap: var(--spacing-xs);
  justify-content: center;
}

.nav-right {
  flex: 1;
  text-align: right;
}

.nav-left a,
.nav-center a,
.nav-right a {
  margin: 0;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-black);
}

/* Nav-center specific styling */
.nav-center a {
  color: var(--color-gray-dark);
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--radius-sm);
  transition: background-color 0.3s ease, color 0.3s ease;
  display: inline-block;
}

/* Active state - black text */
.nav-center a.active {
  color: var(--color-black);
}

/* Hover state - light grey background and black text */
.nav-center a:hover {
  background-color: var(--color-background-light);
  color: var(--color-black);
}

/* Comma handling - only for Projects and About */
.nav-center a::after {
  content: none;
}

.nav-center a:nth-child(1)::after,
.nav-center a:nth-child(2)::after {
  content: ',';
  display: inline-block;
  width: 0;
  overflow: visible;
}

/* Hide comma on hover for Projects and About only */
.nav-center a:nth-child(1):hover::after,
.nav-center a:nth-child(2):hover::after {
  opacity: 0;
}

/* Nav-left and nav-right hover */
.nav-left a:hover,
.nav-right a:hover {
  opacity: 0.7;
}

/* Content Section */
.content-section {
  width: 100vw;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--container-padding-large) var(--container-padding);
}

.section-container {
  width: 100vw;
  display: flex;
  gap: var(--spacing-lg);
  flex-direction: column;
  padding: var(--container-padding-large) var(--container-padding);
}

.section-divider {
  width: calc(100% - 2 * var(--container-padding));
  height: 1px;
  background-color: var(--color-gray-medium);
  margin: var(--spacing-2xl) var(--container-padding);
}

/* About page specific - horizontal layout with title and content */
.section-container.about-section {
  flex-direction: row;
  gap: 100px;
}

/* Home page specific - vertical layout */
/* .section-container:not(.about-section) {
  flex-direction: column;
} */

/* Footer - Curtain Lift Effect */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background-color: var(--color-black);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
}

.footer-content {
  font-size: var(--font-size-xlarge);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  text-align: center;
}

.footer-title {
  margin: 0;
  color: var(--color-white);
}