/* 补充样式 - 确保PC端显示效果与原始设计一致 */

/* 全局链接样式 - 彻底移除下划线 */
a,
a:link,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none !important;
  color: inherit;
  border-bottom: none !important;
}

/* 确保特定链接也没有下划线 */
.text-primary,
.hover\:underline:hover {
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 过渡动画类 */
.transition-all-300 {
  transition: all 0.3s ease;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.duration-300 {
  transition-duration: 300ms;
}

/* 背景图片样式增强 */
.bg-cover {
  background-size: cover;
}

.bg-center {
  background-position: center;
}

/* 动画效果 */
.animate-pulse-slow {
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.1;
    transform: scale(1);
  }
  50% {
    opacity: 0.2;
    transform: scale(1.05);
  }
}

/* MBTI圆形标志样式优化 */
.mbti-circle-container {
  position: relative;
  width: 256px;
  height: 256px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .mbti-circle-container {
    width: 320px;
    height: 320px;
  }
}

.mbti-circle-bg {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #3B82F6, #6366F1);
  opacity: 0.1;
  animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.mbti-circle-content {
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  background-color: white;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.mbti-circle-title {
  font-size: 6rem;
  font-weight: 700;
  color: #3B82F6;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.mbti-circle-subtitle {
  font-size: 0.875rem;
  color: #6B7280;
}

/* 焦点样式 */
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
  --tw-ring-color: #3B82F6;
}

.focus\:ring-opacity-50:focus {
  --tw-ring-opacity: 0.5;
}

/* 响应式隐藏/显示 */
@media (min-width: 768px) {
  .md\:hidden {
    display: none;
  }
  
  .md\:flex {
    display: flex;
  }
  
  .md\:w-1\/2 {
    width: 50%;
  }
  
  .md\:mb-0 {
    margin-bottom: 0;
  }
  
  .md\:pt-32 {
    padding-top: 8rem;
  }
  
  .md\:pb-24 {
    padding-bottom: 6rem;
  }
  
  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
  
  .md\:w-80 {
    width: 20rem;
  }
  
  .md\:h-80 {
    height: 20rem;
  }
  
  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  
  .md\:flex-row {
    flex-direction: row;
  }
  
  .md\:items-center {
    align-items: center;
  }
  
  .md\:space-x-8 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(2rem * var(--tw-space-x-reverse));
    margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
  }
  
  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
  
  .md\:py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .md\:px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* 交互状态增强 */
.hover\:text-primary:hover {
  color: #3B82F6;
}

.hover\:bg-primary:hover {
  background-color: #3B82F6;
}

.hover\:text-white:hover {
  color: #FFFFFF;
}

.hover\:shadow-md:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 间距调整 */
.mr-2 {
  margin-right: 0.5rem;
}

.ml-2 {
  margin-left: 0.5rem;
}

.space-x-8 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(2rem * var(--tw-space-x-reverse));
  margin-left: calc(2rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-x-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(1rem * var(--tw-space-x-reverse));
  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}

/* 卡片悬停效果增强 */
.card-hover {
  transition: all 0.3s ease;
  transform: translateY(0);
  position: relative;
  overflow: hidden;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-hover:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3B82F6, #6366F1, #8B5CF6, #EC4899);
}

/* MBTI人格类型卡片样式优化 */
.mbti-type-card {
  background-color: white;
  border-radius: 0.5rem;
  border: 1px solid #F3F4F6;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  padding: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.mbti-type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.mbti-type-card:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

/* 不同类型卡片的顶部边框颜色 */
.mbti-type-card.analyst:hover::before {
  background: linear-gradient(90deg, #3B82F6, #6366F1);
}

.mbti-type-card.diplomat:hover::before {
  background: linear-gradient(90deg, #8B5CF6, #EC4899);
}

.mbti-type-card.sentinel:hover::before {
  background: linear-gradient(90deg, #10B981, #059669);
}

.mbti-type-card.explorer:hover::before {
  background: linear-gradient(90deg, #F59E0B, #D97706);
}

/* 类型标签样式优化 */
.type-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-weight: 500;
}

/* 维度标签样式 */
.dimension-tags {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #6B7280;
  margin-top: 1rem;
}

/* 类型分组标题样式 */
.type-group-title {
  font-size: 1.25rem;
  font-weight: 600;
  text-align: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.type-group-title:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* 按钮样式增强 */
.btn-primary {
  background-color: #3B82F6;
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  border: none;
  outline: none;
}

.btn-primary:hover {
  background-color: #2563EB;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.btn-primary:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 导航栏开始测试按钮 - 蓝底白字样式 */
.nav-test-btn {
  background-color: #3B82F6;
  color: white;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
  line-height: 1.5;
  height: auto;
  min-height: 2.5rem;
  box-sizing: border-box;
}

.nav-test-btn:hover {
  background-color: #2563EB;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.nav-test-btn:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 移动端导航按钮 - 蓝底白字样式 */
.mobile-nav-test-btn {
  background-color: #3B82F6;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.3s ease;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
  line-height: 1.5;
  height: auto;
  min-height: 2rem;
  box-sizing: border-box;
}

.mobile-nav-test-btn:hover {
  background-color: #2563EB;
  transform: translateY(-1px);
  box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.1), 0 1px 3px -1px rgba(0, 0, 0, 0.06);
}

.mobile-nav-test-btn:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

/* 确保全屏高度 */
.min-h-screen {
  min-height: 100vh;
}

/* 移动端样式美化 - 仅在移动端生效 */
@media (max-width: 767px) {
  /* 优化导航栏与banner间距 */
  header {
    padding-top: 5rem; /* 增加顶部内边距，提供更舒适的间距 */
    padding-bottom: 2rem; /* 增加底部内边距 */
  }
  
  /* 优化banner内容容器 */
  .banner-content {
    padding: 1.5rem !important; /* 调整内边距 */
    margin: 0 -0.5rem; /* 轻微溢出容器，增加视觉宽度 */
  }
  
  /* 优化banner标题样式 */
  .banner-title {
    font-size: 2.5rem !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.25 !important;
  }
  
  /* 优化banner副标题样式 */
  .banner-subtitle {
    font-size: 1rem !important;
    margin-bottom: 1.75rem !important;
    line-height: 1.6 !important;
  }
  
  /* MBTI圆形标志样式美化 */
  .mbti-circle-container {
    position: relative;
    width: 200px; /* 调整尺寸 */
    height: 200px;
    margin: 2rem auto 1rem; /* 增加上下外边距 */
  }
  
  .mbti-circle-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: linear-gradient(135deg, #3B82F6, #8B5CF6); /* 优化渐变色彩 */
    opacity: 0.15; /* 增加不透明度 */
    animation: mobile-pulse 3s infinite ease-in-out; /* 优化动画 */
    box-shadow: 0 4px 20px rgba(59, 130, 246, 0.1); /* 增加柔和阴影 */
  }
  
  .mbti-circle-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 1;
    padding: 1rem; /* 增加内边距 */
  }
  
  /* 移动端特定优化 - 白色圆圈与外部容器大小一致 */
  @media (max-width: 767px) {
    .mbti-circle-container {
      width: 180px; /* 调整移动端尺寸 */
      height: 180px;
      margin: 1rem auto 0.5rem; /* 调整间距 */
    }
    
    .mbti-circle-bg {
      background-color: white; /* 改为白色底色 */
      opacity: 1; /* 不透明度设为1 */
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 移动端使用更轻的阴影 */
      border: 1px solid rgba(0, 0, 0, 0.05); /* 添加细微边框增强轮廓 */
      animation: none; /* 移除动画效果 */
    }
    
    .mbti-circle-content {
      padding: 0.75rem; /* 调整内边距 */
      width: 100%; /* 确保内容宽度与容器一致 */
      height: 100%; /* 确保内容高度与容器一致 */
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .mbti-circle-title {
      font-size: 1.875rem; /* 调整字体大小 */
      margin-bottom: 0.5rem; /* 调整间距 */
    }
    
    .mbti-circle-subtitle {
      font-size: 0.75rem; /* 调整字体大小 */
      max-width: 130px; /* 调整最大宽度 */
    }
  }
  
  .mbti-circle-title {
    font-size: 2.25rem; /* 优化字体大小 */
    font-weight: 800;
    color: #3B82F6;
    line-height: 1;
    margin-bottom: 0.75rem; /* 增加与副标题的间距 */
    text-shadow: 0 2px 4px rgba(59, 130, 246, 0.1); /* 增加文字阴影 */
  }
  
  .mbti-circle-subtitle {
    font-size: 0.8125rem; /* 优化字体大小 */
    color: #4B5563; /* 加深颜色，提高可读性 */
    line-height: 1.5; /* 优化行高 */
    max-width: 160px; /* 增加最大宽度 */
    margin: 0 auto;
    font-weight: 500; /* 增加字重 */
  }
  
  /* 优化移动端按钮样式 */
  .banner-button {
    margin-top: 1rem !important; /* 增加与副标题的间距 */
    text-align: center; /* 确保居中 */
  }
  
  /* 移动端圆形标志动画优化 */
  @keyframes mobile-pulse {
    0%, 100% {
      transform: scale(1);
      opacity: 0.15;
    }
    50% {
      transform: scale(1.08); /* 增加缩放比例 */
      opacity: 0.2; /* 增加不透明度 */
    }
  }
  
  /* 优化flex布局 */
  .flex-col {
    gap: 1rem; /* 增加列之间的间距 */
  }
}

/* 内容区域间距优化 */
.section-header {
  margin-bottom: 2rem;
}

.section-description {
  margin-bottom: 3rem;
  line-height: 1.7;
}

/* 标题与内容间距优化 */
.content-spacing {
  margin-bottom: 1.5rem;
}

/* 各区域特定间距优化 */
#about .section-header {
  margin-bottom: 2.5rem;
}

#about .section-description {
  margin-bottom: 3.5rem;
}

#test .section-header {
  margin-bottom: 1.5rem;
}

#test .section-description {
  margin-bottom: 3rem;
}

#types .section-header {
  margin-bottom: 1.5rem;
}

#types .section-description {
  margin-bottom: 3.5rem;
}

#articles .section-header {
  margin-bottom: 1.5rem;
}

#articles .section-description {
  margin-bottom: 3.5rem;
}

/* 类型组标题间距 */
.type-group-title {
  margin-bottom: 2rem !important;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
}

/* Banner区域间距优化 */
.banner-content {
  padding: 2rem;
}

.banner-title {
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

/* 标题内部行间距优化 */
.banner-title br {
  display: block;
  content: "";
  margin-top: 0.5rem;
}

/* 标题第二行特殊样式 */
.banner-title .text-primary {
  display: inline-block;
  margin-top: 0.5rem;
  font-weight: 700;
}

.banner-subtitle {
  margin-bottom: 2rem;
  line-height: 1.6;
}

.banner-button {
  margin-top: 0.5rem;
}

/* 响应式间距调整 */
@media (min-width: 768px) {
  .banner-content {
    padding: 2.5rem;
  }
  
  .banner-title {
    margin-bottom: 1.75rem;
  }
  
  .banner-subtitle {
    margin-bottom: 2.25rem;
  }
}

/* 背景透明度 */
.bg-opacity-90 {
  background-color: rgba(255, 255, 255, 0.9);
}

/* 定位层级 */
.z-50 {
  z-index: 50;
}

/* 滚动行为 */
html {
  scroll-behavior: smooth;
}