/*
 * Global Header/Footer Style Fix
 * This file ensures header and footer styles are consistent across all pages
 * Load this file AFTER globalstyle.css and bootstrap.css
 */

/* ============================================
   1. 完全重置并强制使�?Tailwind 样式，禁用旧样式影响
   ============================================ */

/* 重置全局 box-sizing �?Tailwind 标准 */
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* 覆盖 Bootstrap �?10px 字体大小 - 恢复为浏览器默认 16px */
html {
    font-size: 16px !important;
}

/* 强制移除旧样式可能影响的全局样式 */
body {
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Inter", sans-serif !important;
    background-color: #ffffff !important;
    color: #0f172a !important;
}

/* ============================================
   2. Header 完全匹配 Homepage
   ============================================ */

header {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1rem 0 !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

/* Header 内部容器 - max-w-7xl = 1280px */
header .max-w-7xl {
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    width: 100% !important;
}

/* 大屏幕下强制设置 1280px 宽度覆盖 Bootstrap */
@media (min-width: 1200px) {
    header .max-w-7xl {
        width: 1280px !important;
        max-width: 1280px !important;
    }
}

/* Header flex 布局 */
header .flex {
    display: flex !important;
}

header .justify-between {
    justify-content: space-between !important;
}

header .items-center {
    align-items: center !important;
}

/* Header gap */
header .gap-3 {
    gap: 0.75rem !important;
}

header .gap-8 {
    gap: 2rem !important;
}

/* Header logo 和文字样�?*/
header .w-10 {
    width: 2.5rem !important;
}

header .h-10 {
    height: 2.5rem !important;
}

header .bg-stg-blue {
    background-color: #3575B9 !important;
}

header .rounded-full {
    border-radius: 9999px !important;
}

header .flex-col {
    flex-direction: column !important;
}

header .justify-center {
    justify-content: center !important;
}

header .text-white {
    color: #ffffff !important;
}



header .text-xl {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
}

header .text-2xl {
    font-size: 1.5rem !important;
    line-height: 2rem !important;
}

header .font-bold {
    font-weight: 700 !important;
}

header .tracking-tight {
    letter-spacing: -0.025em !important;
}

header .text-slate-900 {
    color: #0f172a !important;
}

header .leading-none {
    line-height: 1 !important;
}

header .text-\[10px\] {
    font-size: 10px !important;
}

header .font-medium {
    font-weight: 500 !important;
}

header .uppercase {
    text-transform: uppercase !important;
}

header .tracking-widest {
    letter-spacing: 0.1em !important;
}

header .text-slate-400 {
    color: #94a3b8 !important;
}

/* Header 导航链接样式 - 只在小屏幕下隐藏 */
@media (max-width: 1023px) {
    header nav.hidden {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    header nav.lg\:flex {
        display: flex !important;
    }
}

header nav a {
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #475569 !important;
    transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
}

header nav a:hover {
    color: #3575B9 !important;
}

/* Header Book a Tour 按钮样式 */
header nav a.bg-stg-blue {
    background-color: #3575B9 !important;
    color: #ffffff !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    padding-top: 0.625rem !important;
    padding-bottom: 0.625rem !important;
    border-radius: 9999px !important;
    font-weight: 700 !important;
    box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.1), 0 4px 6px -4px rgba(59, 130, 246, 0.1) !important;
    transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

header nav a.bg-stg-blue:hover {
    background-color: rgba(53, 117, 185, 0.9) !important;
    color: #ffffff !important;
}

/* Header dropdown 样式 - 完全匹配 Homepage */
header .relative {
    position: relative !important;
}

header .py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

/* 确保 dropdown-menu 能正确显�?*/
header .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    padding-top: 0.5rem !important;
    opacity: 0 !important;
    transform: translateY(0.5rem) !important;
    pointer-events: none !important;
    transition-property: all !important;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
    transition-duration: 200ms !important;
    z-index: 50 !important;
    display: block !important;
    visibility: visible !important;
}

/* 悬停时显示下拉菜�?*/
header .dropdown:hover .dropdown-menu,
body header .dropdown:hover .dropdown-menu,
html body header .dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
}

header .dropdown-menu > div {
    background-color: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
    border-radius: 1rem !important;
    padding: 0.75rem !important;
    min-width: 200px !important;
}

header .dropdown-menu a {
    display: block !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    font-size: 0.875rem !important;
    color: #475569 !important;
    border-radius: 0.75rem !important;
    text-decoration: none !important;
}

header .dropdown-menu a:hover {
    color: #3575B9 !important;
    background-color: #f8fafc !important;
}

/* 额外的下拉菜单样�?- 确保完全匹配 homepage */
header .dropdown-menu.absolute {
    position: absolute !important;
}

header .dropdown-menu.top-full {
    top: 100% !important;
}

header .dropdown-menu.left-0 {
    left: 0 !important;
}

header .dropdown-menu.pt-2 {
    padding-top: 0.5rem !important;
}

header .dropdown-menu.opacity-0 {
    opacity: 0 !important;
}

header .dropdown-menu.translate-y-2 {
    transform: translateY(0.5rem) !important;
}

header .dropdown-menu.pointer-events-none {
    pointer-events: none !important;
}

header .dropdown-menu.transition-all {
    transition-property: all !important;
}

header .dropdown-menu.duration-200 {
    transition-duration: 200ms !important;
}

header .dropdown-menu.z-50 {
    z-index: 50 !important;
}

header .dropdown:hover .dropdown-menu.opacity-0 {
    opacity: 1 !important;
}

header .dropdown:hover .dropdown-menu.translate-y-2 {
    transform: translateY(0) !important;
}

header .dropdown:hover .dropdown-menu.pointer-events-none {
    pointer-events: auto !important;
}

header .dropdown-menu div.bg-white {
    background-color: #ffffff !important;
}

header .dropdown-menu div.border-slate-100 {
    border-color: #f1f5f9 !important;
}

header .dropdown-menu div.shadow-xl {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

header .dropdown-menu div.rounded-2xl {
    border-radius: 1rem !important;
}

header .dropdown-menu div.p-3 {
    padding: 0.75rem !important;
}

header .dropdown-menu div.min-w-\[200px\] {
    min-width: 200px !important;
}

header .dropdown-menu a.block {
    display: block !important;
}

header .dropdown-menu a.px-4 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

header .dropdown-menu a.py-2 {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
}

header .dropdown-menu a.text-sm {
    font-size: 0.875rem !important;
}

header .dropdown-menu a.text-slate-600 {
    color: #475569 !important;
}

header .dropdown-menu a.hover\:text-stg-blue:hover {
    color: #3575B9 !important;
}

header .dropdown-menu a.hover\:bg-slate-50:hover {
    background-color: #f8fafc !important;
}

header .dropdown-menu a.rounded-xl {
    border-radius: 0.75rem !important;
}

/* ============================================
   3. Footer 完全匹配 Homepage
   ============================================ */

footer {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 6rem !important; /* pt-24 */
    padding-bottom: 3rem !important; /* pb-12 */
    padding-left: 1.5rem !important; /* px-6 */
    padding-right: 1.5rem !important;
    background-color: #f8fafc !important; /* bg-slate-50 */
    border-top: 1px solid #e2e8f0 !important; /* border-t border-slate-200 */
}

/* Footer 内部容器 */
footer .max-w-7xl {
    max-width: 80rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    width: 100% !important;
}

/* 大屏幕下 Footer 强制设置 1280px 宽度 */
@media (min-width: 1200px) {
    footer .max-w-7xl {
        width: 1280px !important;
        max-width: 1280px !important;
    }
}

/* ============================================
   4. Homepage 中的其他必要样式
   ============================================ */

.pill-image {
    border-radius: 9999px !important;
    aspect-ratio: 3/4 !important;
    object-fit: cover !important;
}

.card-soft {
    background: white !important;
    border-radius: 32px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    border: 1px solid #f1f5f9 !important;
    transition: all 0.3s ease !important;
}

.card-soft:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1) !important;
}

/* ============================================
   6. 内容区域宽度统一�?homepage �?1280px
   ============================================ */

/* 强制所有使�?.container 类的内容区域使用 homepage 的宽�?*/
.guide-content .container,
.thme_con_1.container,
.RecMap_con.container,
.RecDest_con.container,
.container {
    max-width: 80rem !important; /* 1280px */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    width: 100% !important;
}

/* 大屏幕下强制内容区域宽度也是 1280px */
@media (min-width: 1200px) {
    .guide-content .container,
    .thme_con_1.container,
    .RecMap_con.container,
    .RecDest_con.container,
    .container {
        width: 1280px !important;
        max-width: 1280px !important;
    }
}

/* ============================================
   7. p 标签样式统一�?homepage 的样�?   ============================================ */

p {
    color: #57534e !important; /* text-stone-600 */
    line-height: 1.625 !important; /* leading-relaxed */
}

/* ============================================
   8. 隐藏旧版 Header 元素
   ============================================ */

.header .info,
.header .logo,
.header .aboutUs,
.header .contactUs,
.header .menu-wrapper,
.header .nav {
    display: none !important;
}