/*
Theme Name: Minimal Portfolio
Author: wenjun
Version: 1.0
*/

/* Force the Work / About links to be regular, black, no underline */
header .wp-block-navigation a {
    color: black !important;          /* override theme color */
    text-decoration: none !important; /* remove underline */
    font-weight: normal !important;   /* regular weight */
}


body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
}

.site-header {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: white;
  z-index: 999;
  box-sizing: border-box; /* include padding in width calculation */
}

.site-header a {
  text-decoration: none;
  font-weight: normal;
  color: black;
  margin: 0 10px;
}

.nav-right a {
  margin-left: 20px; /* spacing between Contact and About */
  color: black;
  text-decoration: none;
  font-weight: normal;
}

.work {
  margin: 100px auto;
  max-width: 700px;
  padding-top: 80px;
}

.media-stack {
  width: 100%;
  max-width: 700px;
  margin: 0 auto 2rem;
  position: relative; /* needed for JS cycling */
}

.media-stack > .media-item {
  display: none; /* hide inactive images */
}

.media-stack > .media-item.active {
  display: block; /* show active image */
}

.media-stack,
#work-link,
#about-link,
#contact-link{
  cursor: url('cursors/arrow-color.cur'), auto;
}



.media-stack img,
.media-stack video {
  width: 100%;   /* fills container width */
  height: auto;  /* height scales proportionally */
  display: block;
}
  
.work h2 {
  font-size: 1.5rem;
  margin-bottom: 20px;
}

/* Custom date above the title */
.custom-date {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 5px;
  font-weight: normal;
}

.work .content {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
  text-align: left; /* optional, adjust as you like */
}

.about-section {
  max-width: 700px;
  margin: 100px auto;
  padding: 20px;
  display: none; /* Hidden by default */
  box-sizing: border-box;
}

.about-section h2,
.about-section p {
  margin-bottom: 0 0 20px 0;
  line-height: 1.6;
}

.contact-section {
  max-width: 700px;
  margin: 100px auto;
  padding: 20px;
  display: none; /* hidden by default, like About */
  box-sizing: border-box;
}

.contact-section h2,
.contact-section p {
  margin-bottom: 20px;
  line-height: 1.6;
}


@media (max-width: 768px) {
  .media-stack {
    aspect-ratio: 4/3;  /* shorter height on small screens */
  }
}

@media (max-width: 480px) {
  .media-stack {
    aspect-ratio: 1/1;  /* square on very small screens */
  }
}