/*
Theme Name: Fourway Crane Theme
Theme URI: https://fourwaycrane.com
Author: Fourway Team
Description: Minimal responsive theme for Fourway Crane
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: fourwaycrane
*/
body {
  margin: 0;
  font-family: "Times New Roman", Georgia, serif, "Arial Unicode MS";
  background: #f5f7fa;
  color: #333;
}

/* 导航菜单基础样式 */
nav .menu { /* 匹配WordPress生成的ul.menu */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px;
}

nav .menu a { /* 菜单链接 */
  color: #fff;
  text-decoration: none;
  padding: 8px 12px;
  display: block;
  transition: background 0.3s;
}

nav .menu a:hover {
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
}

/* 一级菜单项（包含二级菜单的容器） */
nav .menu li {
  position: relative;
}

/* 二级菜单（WordPress自动添加.sub-menu类） */
nav .menu .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: #1e3a8a;
  min-width: 200px;
  display: none; /* 默认隐藏 */
  padding: 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* 鼠标悬停显示二级菜单 */
nav .menu li:hover .sub-menu {
  display: block;
}

/* 二级菜单项 */
nav .menu .sub-menu li {
  width: 100%;
}

nav .menu .sub-menu a {
  padding: 10px 15px;
}

nav .menu .sub-menu a:hover {
  background: rgba(255,255,255,0.3);
}

/* 桌面端菜单样式（保持横向） */
#main-nav .menu {
  display: flex;
  gap: 20px;
}

/* 汉堡按钮默认隐藏（桌面端） */
#mobile-menu-btn {
  display: none;
}

/* 导航菜单容器 */
#main-nav {
  width: auto;
}

/* -------------------------- 移动端（≤768px） -------------------------- */
/* 在移动端媒体查询中强化菜单样式 */
@media (max-width: 768px) {
  /* 确保按钮可点击区域足够大 */
  #mobile-menu-btn {
    display: block !important;
    padding: 10px;
    z-index: 1001; /* 高于菜单 */
  }

  /* 修复菜单容器溢出问题 */
  #main-nav {
    width: 100%;
  }

  /* 移动端菜单默认隐藏 */
  #main-nav .menu {
    display: none !important; /* 强制隐藏默认状态 */
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #1e3a8a;
    padding: 15px 20px;
    gap: 10px;
    margin: 0; /* 移除默认外边距 */
    box-sizing: border-box;
  }

  /* 激活状态强制显示 */
  #main-nav .menu.active {
    display: flex !important;
  }
}