/* Custom styles for the website */

/* Improve list alignment across all screen sizes */
ul, ol {
  padding-left: 40px;
  margin-left: 0;
}

li {
  margin-left: 0;
  padding-left: 0;
  margin-bottom: 8px;
}

/* Nested lists */
ul ul, ol ol, ul ol, ol ul {
  padding-left: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
  ul, ol {
    padding-left: 35px;
  }
  
  ul ul, ol ol, ul ol, ol ul {
    padding-left: 25px;
  }
}

/* Neuromorphic wave animation - separate container above welcome */
.wave-container {
  width: 100%;
  height: 60px;
  margin: 0px 0;
  overflow: hidden;
  position: relative;
}

.sine-wave {
  position: absolute;
  width: 300%;
  height: 100%;
  opacity: 0.6;
}

.wave1 {
  animation: wave1Move 12s linear infinite;
}

.wave2 {
  animation: wave2Move 8s linear infinite;
}

.wave3 {
  animation: wave3Move 15s linear infinite;
}

.wave4 {
  animation: wave4Move 10s linear infinite;
}

@keyframes wave1Move {
  0% { transform: translateX(-66.67%) translateY(0px); }
  100% { transform: translateX(0%) translateY(0px); }
}

@keyframes wave2Move {
  0% { transform: translateX(-66.67%) translateY(2px); }
  100% { transform: translateX(0%) translateY(2px); }
}

@keyframes wave3Move {
  0% { transform: translateX(-66.67%) translateY(-1px); }
  100% { transform: translateX(0%) translateY(-1px); }
}

@keyframes wave4Move {
  0% { transform: translateX(-66.67%) translateY(3px); }
  100% { transform: translateX(0%) translateY(3px); }
}

/* Mobile optimization for waves */
@media (max-width: 768px) {
  .wave-container {
    height: 30px;
  }
}

/* Force bullet point alignment - override theme styles */
section ul, section ol {
  padding-left: 40px !important;
  margin-left: 0 !important;
  list-style-position: outside !important;
}

section li {
  margin-left: 0 !important;
  padding-left: 0 !important;
  margin-bottom: 8px !important;
}

/* Nested lists */
section ul ul, section ol ol, section ul ol, section ol ul {
  padding-left: 30px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

/* Mobile specific adjustments for lists */
@media (max-width: 768px) {
  section ul, section ol {
    padding-left: 35px !important;
  }
  
  section ul ul, section ol ol, section ul ol, section ol ul {
    padding-left: 25px !important;
  }
}

/* Hover effects for project titles and links */
.project-title-link {
  transition: all 0.3s ease;
  opacity: 1;
}

.project-title-link:hover {
  opacity: 0.7;
  text-decoration: none;
}

/* Hover effects for main page section links */
.section-link {
  transition: all 0.3s ease;
}

.section-link:hover {
  opacity: 0.8;
  transform: translateX(3px);
}

/* Hide headshot image on mobile but keep flags */
@media screen and (max-width: 960px) {
  .headshot-image {
    display: none !important;
  }
}

/* Desktop font size increases - subtle increase */
@media screen and (min-width: 961px) {
  /* Increase base font size for desktop slightly */
  body {
    font-size: 17px; 
  }
  
  /* Increase paragraph text slightly */
  p {
    font-size: 17px;
    line-height: 1.6;
  }
  
  /* Increase list text slightly */
  ul, ol {
    font-size: 17px;
    line-height: 1.6;
  }
  
  li {
    font-size: 17px;
    line-height: 1.6;
  }
  
  /* Increase table text slightly */
  td, th {
    font-size: 17px;
  }
  
  /* Increase blockquote text slightly */
  blockquote {
    font-size: 17px;
    line-height: 1.6;
  }
  
  /* Increase code text slightly */
  code {
    font-size: 17px;
  }
  
  pre {
    font-size: 17px;
  }
  
  /* Adjust heading sizes with subtle increases */
  h1 {
    font-size: 30px; /* Slightly increased from default 28px */
  }
  
  h2 {
    font-size: 24px; /* Subtle increase */
  }
  
  h3 {
    font-size: 20px;
  }
  
  h4 {
    font-size: 17px;
  }
  
  h5 {
    font-size: 15px;
  }
  
  h6 {
    font-size: 14px;
  }
}