@charset "UTF-8";

/* ========== Reset & Variables ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Minh Nguyen', 'Noto Serif TC', 'Noto Serif JP', 'Noto Serif SC',
               'Noto Serif KR', 'Noto Serif', serif;
}

:root {
  --primary-green: #49796B;
  --text-dark: #2c3e50;
  --burnt-sienna: #E97451;
  --background-green: #eef4f2;
  --white: #FFFFFF;
}

/* ========== Base ========== */
body {
  color: var(--text-dark);
  background: linear-gradient(to right bottom, var(--white), var(--background-green));
  min-height: 100vh;
  background-attachment: fixed;
}

.header {
  text-align: center;
  padding: 28px 10px 12px 10px;
  border-bottom: 2px solid var(--primary-green);
  position: relative;
}

.main-content a {
  color: var(--burnt-sienna);
  text-decoration: none;
}

/* Logo */
.logo {
  font-weight: 600;
  color: var(--primary-green);
  margin: 10px 0;
  position: relative;
  display: inline-flex;
}
.logo-text {
  display: flex;
  font-weight: normal;
  flex-direction: column;
  gap: 2px;
}
.logo-qn {
  font-size: 13px;
  font-weight: normal;
  color: var(--text-dark);
}
.logo-hn {
  font-size: 21px;
  font-weight: normal;
  color: var(--text-dark);
}

/* Nav */
.nav {
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1500px;
  margin: 0 auto;
  display: none;                 /* mobile 默认隐藏菜单容器 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nav-toggle {
  display: flex;                  /* mobile 显示切换按钮 */
  cursor: pointer;
  font-size: 16px;
  padding: 10px;
  background-color: var(--primary-green);
  color: #fff;
  border-radius: 5px;
  margin: 10px;
  align-items: center;
  border: none;
}

.nav-toggle-text {
  margin-left: 5px;
  font-size: 14px;
}

.nav-item {
  min-width: 10px;
  position: relative;
  padding: 10px 20px;             /* mobile 稍宽松 */
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.nav-item > a {
  text-decoration: none;
  font-weight: normal;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  justify-content: center;
}

.nav-text {
  font-size: 16px;
  color: var(--primary-green);
}

/* Dropdown alignment */
.nav-item:last-child .dropdown { right: 0; left: auto; }
.nav-item:not(:last-child) .dropdown { left: 0; right: auto; }

/* Dropdown */
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 250px;
  max-width: calc(100vw - 40px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 4px;
  border-top: 3px solid var(--primary-green);
  z-index: 1;
  overflow-x: hidden;
  white-space: normal;
  word-wrap: break-word;
  word-break: break-word;
}

.nav-item:hover .dropdown { display: block; }

.dropdown a {
  color: var(--text-dark);
  font-weight: normal;
  padding: 8px 12px;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  text-align: left;
  font-size: 15px;
}
.dropdown a:last-child { border-bottom: none; }

/* Hover states */
.nav-item:hover { background-color: var(--background-green); }
.nav-item:hover > a .nav-text { color: var(--primary-green); font-weight: bold; }
.dropdown a:hover { color: var(--burnt-sienna); transform: translateX(2px); transition: all 0.2s ease; }

/* Layout - mobile first */
.main-content {
  max-width: 1500px;
  margin: 60px auto 0;
  padding: 0 20px;
  display: flex;
  flex-direction: column;         /* mobile 纵向 */
  gap: 30px;
  background: transparent;
}

.left-column,
.right-column {
  width: 100%;                    /* mobile 100% */
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* Sections */
.section {
  background-color: var(--background-green);
  padding: 0.5rem;                /* mobile 紧凑 */
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.section2 {
  background-color: transparent;
  border: 1px solid var(--primary-green);
  padding: 0.5rem;                /* mobile 紧凑 */
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

.section-title {
  font-size: 18px;
  color: var(--primary-green);
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.1);
}

.section-title-noline {
  font-size: 18px;
  color: var(--primary-green);
  margin-bottom: 12px;
}

.section-content {
  line-height: 1.6;
  color: var(--text-dark);
  font-size: 15px;
}
.section-content p { margin-bottom: 10px; }

/* CTA */
.cta-button {
  background-color: var(--burnt-sienna);
  color: var(--white);
  padding: 0.4rem 1.0rem;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  display: block;
  margin: 0 auto;
}

/* Footer */
footer {
  background-color: var(--primary-green);
  padding: 15px;
  font-size: 13px;
  text-align: center;
  color: #fff;
  margin-top: 15px;
}

/* Banner */
.image-banner {
  max-width: 1500px;     /* 限制最大宽度 */
  width: 100%;           /* 小屏铺满 */
  margin: 0 auto;        /* 居中 */
  position: relative;
  height: 399px;
  overflow: hidden;
  background-color: #ffffff;
}

.banner-images {
  display: flex;
  height: 100%;
  position: relative;
}
.image-container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 2.5s ease;
}
.image-container.active { opacity: 1; }
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  background-color: rgba(73, 121, 107, 0.39);
  padding: 3px;
  font-size: 13px;
}

/* Language switcher */
.language-dropdown { display: inline-block; }
.dropbtn {
  background-color: #ffffff;
  color: #000;
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}

/* Sticky fix for dynamically injected nav */
#nav-placeholder > .nav,
body #nav-placeholder .nav {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background-color: #fff !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
}

/* Language switcher details */
#language-switcher { font-size: 12px; }
#language-switcher a { color: var(--text-dark); text-decoration: none; margin: 0 2px; }
#language-switcher a:hover { text-decoration: underline; }
#language-switcher .separator { margin: 0 5px; color: #ccc; }

/* 可选：Noto Serif TC 变量字体示例
.noto-serif-tc {
  font-family: "Noto Serif TC", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
*/

/* 减少动画（可选的可访问性增强） */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ========== ≥600px 覆盖（桌面/平板横屏） ========== */
@media (min-width: 600px) {
  .nav-toggle { display: none; }
  .nav-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between; /* 新增：横向等距分布 */
    width: 100%; /* 新增：确保容器占满宽度 */
  }

  .nav-item {
    padding: 10px 0; /* 修改：去除左右padding，只保留上下 */
    flex: 1; /* 新增：每个项等宽 */
    text-align: center;
    min-width: auto; /* 确保flex:1生效 */
  }
  
    .nav-text {
    margin: 0;
    padding: 0;
  }
  
  .main-content { flex-direction: row; }
  .left-column { width: 70%; }
  .right-column { width: 30%; }

  .logo-qn { font-size: 15px; }

  .section { padding: 1.5rem; }
  .section2 { padding: 1.5rem; }
}