/* =========================================================
   Header
========================================================= */
.site-header {
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand a {
  font-size: 1.2rem;
  font-weight: bold;
  color: #111;
  text-decoration: none;
}

.main-nav {
  display: flex;
  gap: 20px;
}

.main-nav a {
  font-size: 1rem;
  color: #333;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}

.main-nav a.active {
  border-color: #333;
}

/* Hamburger button */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  width: 24px;
  height: 2px;
  background: #111;
  display: block;
}

@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background: #fff;
    display: none;
  }
  .main-nav a {
    padding: 16px 20px;
    border-top: 1px solid #f5f5f5;
  }
  .site-header.open .main-nav {
    display: flex;
  }
}

/* =========================================================
   Hero
========================================================= */
.hero {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-align: center;
  /* Default hero uses the main background image.  Individual pages can override this
     by adding modifier classes (e.g. .hero--projects) or page‑specific rules. */
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.6)), url('../assets/images/hero-main.jpg') center/cover no-repeat;
  padding: 0 20px;
}

.hero-title {
  font-size: clamp(32px, 6vw, 56px);
  margin-bottom: 16px;
}

.hero-sub {
  font-size: 1rem;
  opacity: 0.9;
  max-width: 600px;
}

/* Page label used in heroes on subpages.  Positioned just above the main heading
   to act as a signpost without overwhelming the design. */
.page-label {
  font-family: 'Inter', 'Noto Sans KR', sans-serif;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 8px;
  opacity: 0.85;
}

/* Projects page hero: use a unique pastel illustration and slightly shorter height
   to distinguish from the home page.  The overlay is lighter to match the calm
   aesthetic of the projects section. */
.hero--projects {
  /*
   * Use a real photograph for the projects hero instead of the pastel illustration.
   * This Unsplash image shows a clean workspace with a laptop and notebook,
   * conveying professionalism and creative experimentation.  The linear gradient
   * overlay darkens the image just enough so the white text remains legible.
   * See https://unsplash.com/photos/47ba0277781c for details.
   */
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.45)),
              url('../assets/images/hero-projects.jpg') center/cover no-repeat;
  min-height: 50vh;
  position: relative;
}

/* Contact page hero: lighter overlay and shorter height to convey openness. */
body[data-page="contact"] .hero {
  /*
   * Use a real photograph for the contact page hero instead of an illustration.
   * This Unsplash image shows a handshake between two people, representing a
   * friendly connection and professional relationship.  The light gradient
   * overlay keeps the mood open and inviting.  See https://unsplash.com/photos/3a6694fb2f61.
   */
  background: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,0.4)),
              url('../assets/images/hero-contact.png') center/cover no-repeat;
  min-height: 45vh;
}

/* Home page hero: slightly darker overlay than the projects page to ground the
   primary messaging. */
body[data-page="home"] .hero {
  background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.65)),
              url('../assets/images/hero-main.jpg') center/cover no-repeat;
}

/* =========================================================
   Footer
========================================================= */
.site-footer {
  background: #fafafa;
  border-top: 1px solid #eee;
  padding: 40px 20px;
  font-size: 0.875rem;
  color: #666;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  /* Center the footer text so that contact details and copyright
     are aligned in the middle.  This improves balance on wider
     screens and matches the overall site aesthetic. */
  text-align: center;
}

.site-footer a {
  color: inherit;
}