/*
Theme Name: Eatock Theme
Author: Haruka Iwami
Version: 1.0
*/

/* ------------------------------
   リセット & 基本設定
------------------------------ */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  font-size: 170%;
}

/* ------------------------------
   Font
------------------------------ */
body {
  font-family: "Neue Haas Unica W1G", "DNP 秀英角ゴシック金 Std", sans-serif;
}

.site-title a,
.site-navigation .main-menu li a {
  font-family: "Neue Haas Unica W1G", sans-serif;
}

body,
p,
.project-title-overlay {
  font-family: "DNP 秀英角ゴシック金 Std", sans-serif;
}

/* ------------------------------
   ヘッダー（グローバルメニュー）
------------------------------ */
.site-header {
  font-size: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 1000;
  padding: 1rem 2.5rem 0.5rem 2.5rem;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.site-title a {
  text-decoration: none;
  color: #000;
  font-size: 1.05rem;
}

.site-title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site-navigation .main-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navigation .main-menu li a {
  text-decoration: none;
  color: #000;
}

.site-navigation .main-menu li a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.site-navigation .main-menu li a,
.lang-switcher a {
  text-decoration: none;
  color: #000;
  transition: text-decoration-color 0.2s ease;
}

.site-navigation .main-menu .current-menu-item a,
.lang-switcher a.active-lang {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ------------------------------
   メインエリアのレイアウト
------------------------------ */
.site-main {
  max-width: none;
  margin: 6rem 0 2.5rem 0;
  padding: 0 2.5rem;
  display: block !important;
}

/* ------------------------------
   プロジェクト一覧（トップページ）
------------------------------ */
.project-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem 1.5rem;
  margin: 0 0 4rem 0;
}

.project-link {
  text-decoration: none;
  aspect-ratio: 3 / 4;
  color: inherit;
}

.project-thumbnail-wrapper {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.project-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}

.project-title-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}

.project-thumbnail-wrapper:hover .project-title-overlay {
  opacity: 1;
}

/* ------------------------------
   プロジェクト個別ページ
------------------------------ */
.project-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.7rem;
  margin-top: 0;
}

.gallery-item img {
  width: 100%;
  height: auto;
  display: block;
}

.project-description {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.description-text {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
  font-size: 0.9rem;
  white-space: normal;
}

.description-block {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0rem;
  min-width: 0;
}

.project-subtitle-ja,
.project-subtitle-en {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 0;
}

.description-ja {
  margin-top: 15px;
  line-height: 1.8;
  overflow-wrap: break-word;
  word-break: break-word;
}

.description-en {
  margin-top: 15px;
  line-height: 1.6;
  overflow-wrap: break-word;
  word-break: break-word;
}

.project-meta-ja {
  line-height: 0.7;
}

.project-meta-en {
  line-height: 0.5;
}

.project-meta {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  row-gap: 0.5rem;
  column-gap: 1rem;
  font-size: 1rem;
}

.project-meta dt {
  font-weight: bold;
}

.project-meta dd {
  margin: 0;
}

/* ------------------------------
   Lightbox カスタマイズ
------------------------------ */
.lightboxOverlay {
  background: rgba(0, 0, 0, 0.6) !important;
}

/* ------------------------------
   About / Contact
------------------------------ */

.site-main--contact {
  max-width: 1600px;
}

.about-content {
  font-size: 0.9rem;
  line-height: 1.8;
}

.about-section,
.contact-section {
  display: block !important;
  align-items: flex-start; /* 念のため */
  justify-content: flex-start;
}


/* ------------------------------
   フッター
------------------------------ */
.site-footer {
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 0.6rem;
}

/* ------------------------------
   ハンバーガーメニューアイコン
------------------------------ */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 18px;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1001;
}

.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #000;
  border-radius: 1px;
}

/* ------------------------------
   モバイル対応
------------------------------ */
@media screen and (max-width: 768px) {

  .site-header {
    padding: 0rem 1rem 0.4rem 1rem;
  }

  .hamburger {
    display: flex;
    position: absolute;
    top: 0.6rem;
    right: 1rem;
    margin-top: 0;
  }

  .site-navigation {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem 1rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    z-index: 1000;
  }

  .site-navigation.active {
    display: flex;
  }

  .site-navigation .main-menu {
    flex-direction: column;
    gap: 1rem;
    width: 100%;
  }

  .site-navigation .main-menu li,
  .site-navigation .main-menu li a {
    width: 100%;
    display: block;
    font-size: 1rem;
  }

  .lang-switcher a {
    display: inline !important;
  }

  .site-main {
    padding: 0 1rem;
    margin: 4rem 0 3rem 0;
  }

  .project-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.7rem 0;
    padding: 0;
  }

  .project-link,
  .project-thumbnail-wrapper,
  .project-thumbnail {
    width: 100%;
    max-width: 100%;
  }

  .project-thumbnail {
    object-fit: cover;
  }

  .description-text {
    flex-direction: column;
    gap: 2rem;
  }

  body {
    font-size: 0.6rem !important;
  }

  .main-menu a,
  h1, h2, h3, h4, p,
  .lang-switcher a,
  .site-footer,
  .project-title,
  .description-en,
  .description-ja,
  .description-text,
  .lang-switcher {
    font-size: 0.6rem !important;
  }

  .site-title a {
    font-size: 0.7rem !important;
  }
}



/* 背景画像テンプレ（必要になったら有効化） */
/*
.some-element {
  background-image: url('assets/images/bg-pattern.png');
}
*/