/*
  Tailwind CSS Preflight Fix
  解决 Tailwind 覆盖原有链接样式问题
  
  加载顺序: Bootstrap → 自定义CSS → Tailwind CDN → 本文件(最后)
  
  更新日期: 2026-04-23
  修复: 导航栏变白问题 + 按钮链接保持白色
*/

/* ========== 基础链接样式 ========== */
a {
    color: #2368C7 !important;
    text-decoration: none !important;
}

a:hover {
    color: #1a4f9e !important;
    text-decoration: underline !important;
}

/* ========== 导航栏链接 - 保持深色文字（不是白色！）========== */
header nav a,
nav a,
.navbar a,
.main-nav a,
.header-nav a,
[class*="navigation"] a {
    color: #536579 !important;  /* 深灰色 - 在白色背景上可见 */
}

/* 导航栏悬停效果 */
header nav a:hover,
nav a:hover,
.navbar a:hover,
.main-nav a:hover {
    color: #3575B9 !important;  /* 悬停时变蓝色 */
}

/* 导航栏中的 CTA 按钮（Book a Tour）保持原样 */
header nav a.bg-stg-blue,
nav a[class*="bg-"],
nav a.btn,
nav a.button {
    color: inherit !important;  /* 继承父元素颜色 */
}

/* ========== 按钮/CTA 链接 - 保持原样（不强制变色）========== */
button a,
[class*="btn"] a,
a.btn,
a.button,
input[type="submit"],
input[type="button"] {
    color: inherit !important;
}

/* ========== Footer 链接 - 保持浅色 ========== */
footer a {
    color: inherit !important;  /* 通常 footer 是深色背景，继承白色或浅色 */
}

/* ========== 卡片/内容区链接 ========== */

/* 卡片标题链接 */
.card-hover a,
.tour-card a,
.panda-tour-card a h3,
article a h3 {
    color: inherit !important;
}

article a h3:hover {
    color: #10b981 !important; /* emerald-600 */
}

/* 面包屑链接 */
.breadcrumb a {
    color: #2368C7 !important;
}

/* ========== Hero/Banner 区域的白色/彩色背景链接 ========== */

/* 仅针对 Hero 区域（大图背景）和 Banner 区域 */
.hero a,
.banner a,
.hero-section a,
.banner-section a,
section[class*="hero"] > a,
div[class*="hero"]:not(header):not(nav) a {
    color: white !important;
}

/* 深色背景容器（仅限非导航区域）*/
.bg-slate-900 a:not(nav a),
.bg-gray-900 a:not(nav a),
.bg-black a:not(nav a) {
    color: white !important;
}

/* 彩色 CTA 按钮（emerald/green/blue/red 背景）- 仅限明显是按钮的 */
a.bg-emerald-500,
a.bg-emerald-400,
a.bg-green-500,
a.bg-green-600,
a.bg-blue-500,
a.bg-blue-600,
a.bg-red-500,
a.bg-primary,
[class*="cta-button"] a,
.cta-link {
    color: white !important;
}

/* 圆角大按钮（通常是 CTA） */
a.rounded-full[href*="tour"],
a.rounded-full[href*="Tour"],
a.rounded-full[href*="contact"],
a.rounded-full[href*="discuss"],
a.rounded-full[href*="Discuss"] {
    color: white !important;
}

/* ========== 目的地页面 Inquiry 按钮（jiuzhaigou 等页面）========== */
a.inquiry-a,
.inquiry-a {
    color: white !important;
}

a.inquiry-a:hover,
.inquiry-a:hover {
    color: #f0f0f0 !important;  /* 悬停时浅灰色 */
    text-decoration: underline !important;
}

/* 带明确 text-white 类的容器（排除 header/nav）*/
.text-white a:not(header a):not(nav a) {
    color: inherit !important;
}

/* ========== 内容区域图片间距修复（2026-04-23）========== */

/* 解决 Tailwind Preflight 导致图片连在一起的问题 */

/* 1. 内容区域内的所有图片 - 添加块级显示和垂直间距 */
/* 精确选择器：只针对明确的内容容器，不使用 body img 或 container-fluid img */
.content img,
.thme_con_1 img,
.thme_con_1_p img,
.guide-content img,
article img,
.travel_content img,
.facts_content_l img,
.facts_content_r img,
.introcd img,
.inspirations_con img,
.listing-tours img {
    display: block;
    max-width: 100%;
    height: auto;
    margin-top: 15px;      /* 图片上方间距 */
    margin-bottom: 15px;   /* 图片下方间距 */
}

/* 2. 第一个元素不需要上边距 */
.content img:first-child,
.thme_con_1 img:first-child,
article img:first-child {
    margin-top: 10px;
}

/* 3. 包含图片的段落标签 - 确保有间距 */
.content p:has(img),
.thme_con_1 p:has(img),
.thme_con_1_p p:has(img),
article p:has(img) {
    margin-bottom: 20px;
}

/* 4. 图片响应式 + 居中 */
.content img[width]:not([style*="float"]),
.thme_con_1 img[width]:not([style*="float"]) {
    margin-left: auto;
    margin-right: auto;
}