/* ----------------------------------------
   VARIABLES & BASIC SETUP (示例)
---------------------------------------- */
:root {
    --tiffany-blue: #81D8D0; /* 示例颜色，请替换为你的实际颜色 */
    --dark-tiffany: #60C0B6; /* 示例颜色 */
    --header-text-color: #333;
    --header-link-hover-color: #007bff;
    --header-background: #F5F7FA;
    --top-bar-bg: var(--tiffany-blue);
    --top-bar-text: #fff;
}

.site-header {
    /* 如果你需要header固定在顶部，解开这里的注释，并确保body有padding-top */
    /* position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; */
}

/* ----------------------------------------
   1. TOP BAR STYLES
---------------------------------------- */
.top-bar {
    background-color: var(--top-bar-bg);
    color: var(--top-bar-text);
    padding: 8px 0; /* 略微减小padding */
    font-size: 14px;
}
.top-bar .container .row {
    margin-left: 0; /* 覆盖Bootstrap默认的负margin */
    margin-right: 0;
}
.contact-info {
    display: flex;
    align-items: center;
    gap: 15px;
}
.contact-info a {
    color: var(--top-bar-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.contact-info a:hover {
    opacity: 0.8;
        }
        .contact-info i {
    font-size: 1em; /* 与文字大小一致或略大 */
}
.social-icons {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 15px; /* 为语言切换添加右侧间距 */
}
.social-icons a {
    color: var(--top-bar-text);
    font-size: 16px;
    transition: opacity 0.3s ease;
}
.social-icons a:hover {
    opacity: 0.8;
}

/* 语言切换样式 */
.language-switch {
    display: flex;
    align-items: center;
}

.language-link {
    color: var(--top-bar-text);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    transition: opacity 0.3s ease;
}

.language-link:hover {
    opacity: 0.8;
}

.language-link i {
    font-size: 16px;
}

/* ----------------------------------------
   2. MAIN NAVIGATION (.main-nav)
---------------------------------------- */
.main-nav {
    background-color: var(--header-background);
    padding: 15px 0; /* 调整padding以适应内容 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative; /* For mobile menu absolute positioning */
}
.main-nav .container .row {
    margin-left: 0;
    margin-right: 0;
    align-items: center; /* 确保垂直居中 */
}

/* Logo */
.brand-logo img {
    height: 50px; /* 调整Logo高度 */
    width: auto;
    display: block;
}

/* --- DESKTOP NAVIGATION STYLES --- */
.desktop-nav-wrapper {
    flex-grow: 1; /* 让导航菜单占据中间的可用空间 */
    display: flex;
    justify-content: center; /* 将导航菜单居中 */
}
.desktop-nav-wrapper .nav-menu {
    display: flex;
    align-items: center;
    gap: 10px; /* 导航项之间的间距 */
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Desktop Navigation Items */
.desktop-nav-wrapper .nav-menu .nav-item { /* 包括 <a> 和 <div> 作为 nav-item */
    position: relative; /* For dropdown positioning */
    padding: 0; /* 包裹器div不应有padding，padding在链接a上 */
}
.desktop-nav-wrapper .nav-menu a.nav-item, /* 直接是链接的项 */
.desktop-nav-wrapper .nav-menu div.nav-item > a.nav-item { /* 下拉菜单的触发链接 */
    display: block;
    padding: 10px 18px; /* 导航链接的内边距 */
    color: var(--header-text-color);
    text-decoration: none;
    font-size: 15px; /* 调整字体大小 */
            font-weight: 500;
    border-radius: 20px; /* 圆角效果 */
    transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    white-space: nowrap;
}
.desktop-nav-wrapper .nav-menu a.nav-item:hover,
.desktop-nav-wrapper .nav-menu div.nav-item > a.nav-item:hover,
.desktop-nav-wrapper .nav-menu a.nav-item.active { /* .active应该在a标签上 */
    background-color: var(--tiffany-blue);
    color: #fff;
    box-shadow: 0 3px 10px rgba(var(--tiffany-blue-rgb, 129, 216, 208), 0.3); /* 假设有RGB变量 */
}
.desktop-nav-wrapper .nav-menu div.nav-item:hover > a.nav-item { /* 当hover父div时，高亮其内的a */
    background-color: var(--tiffany-blue);
    color: #fff;
    box-shadow: 0 3px 10px rgba(var(--tiffany-blue-rgb, 129, 216, 208), 0.3);
}


/* Desktop Dropdown Menus */
.desktop-nav-wrapper .nav-menu .dropdown-menu {
    position: absolute;
    top: calc(100% + 10px); /* 距离父项的距离，留出一些空隙 */
    left: 50%;
    transform: translateX(-50%);
    min-width: 210px; /* 下拉菜单最小宽度 */
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    padding: 8px 0; /* 上下padding */
    z-index: 1010;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease, top 0.25s ease;
    display: block; /* 保持block，用opacity和visibility控制 */
}
.desktop-nav-wrapper .nav-menu .nav-item:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    top: 100%; /* hover时上移一点，产生轻微动画效果 */
}

/* Desktop Nested Dropdown Menus (.dropdown-submenu) */
.desktop-nav-wrapper .nav-menu .dropdown-submenu {
    position: relative;
}
.desktop-nav-wrapper .nav-menu .dropdown-submenu > .dropdown-menu {
    top: -9px; /* 调整使其与父项的顶部对齐 (减去父菜单的padding-top) */
    left: 100%;
    transform: translateX(0); /* 重置 */
    margin-left: 1px; /* 与父菜单的轻微间隙 */
}
.desktop-nav-wrapper .nav-menu .dropdown-submenu:hover > .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    top: -9px; /* 保持位置 */
}

/* Desktop Dropdown Items */
.desktop-nav-wrapper .nav-menu .dropdown-item {
    display: block;
    padding: 8px 20px; /* 下拉项的padding */
    color: var(--header-text-color);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.desktop-nav-wrapper .nav-menu .dropdown-item:hover {
    background-color: var(--tiffany-blue);
    color: #fff;
}

/* Desktop Dropdown Toggles (Arrows) */
.desktop-nav-wrapper .nav-menu .dropdown-toggle::after { /* 一级下拉箭头 */
            content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor; /* 箭头颜色与文字颜色一致 */
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.2s ease;
}
.desktop-nav-wrapper .nav-menu .nav-item:hover > a.dropdown-toggle::after {
    transform: rotate(180deg);
}

.desktop-nav-wrapper .nav-menu .dropdown-submenu > a.dropdown-toggle::after { /* 多级下拉箭头 */
    content: '';
    display: block; /* 改为block以便绝对定位 */
            position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid currentColor;
    margin-left: 0; /* 重置 */
}
.desktop-nav-wrapper .nav-menu .dropdown-submenu:hover > a.dropdown-toggle::after {
    transform: translateY(-50%) rotate(-90deg); /* 保持不变或微调 */
}


/* Desktop Search Box */
.desktop-search-wrapper .search-box {
    position: relative;
    min-width: 220px; /* 给搜索框一个最小宽度 */
}
.desktop-search-wrapper .search-box input {
    width: 100%;
    height: 40px; /* 统一高度 */
    padding: 8px 40px 8px 18px; /* 调整padding，为按钮留空间 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 20px; /* 圆角 */
    font-size: 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.desktop-search-wrapper .search-box input:focus {
    outline: none;
    border-color: var(--tiffany-blue);
    box-shadow: 0 0 0 2px rgba(var(--tiffany-blue-rgb, 129, 216, 208), 0.2);
}
.desktop-search-wrapper .search-box button {
    position: absolute;
    right: 0px;
    top: 0px;
    height: 40px; /* 与输入框同高 */
    width: 40px; /* 固定宽度 */
    background: transparent;
    border: none;
    color: #777;
    cursor: pointer;
    padding: 0;
    border-radius: 0 20px 20px 0; /* 右侧圆角 */
    display: flex;
    align-items: center;
    justify-content: center;
}
.desktop-search-wrapper .search-box button:hover {
    color: var(--tiffany-blue);
}


/* ----------------------------------------
   MOBILE & TABLET RESPONSIVE STYLES
   (Screens <= 991.98px)
---------------------------------------- */

/* Hamburger Menu Toggle Button */
.mobile-menu-toggle {
    display: none; /* Hidden by default, shown in media query */
    background: none;
    border: none;
    font-size: 26px;
    color: var(--header-text-color);
    cursor: pointer;
    padding: 5px; /* 调整padding以获得合适的点击区域 */
    line-height: 1;
    z-index: 1100;
}
.mobile-menu-toggle .icon-close {
    display: none;
}
.mobile-menu-toggle.active .icon-hamburger {
    display: none;
}
.mobile-menu-toggle.active .icon-close {
    display: inline-block;
}

/* Mobile Navigation Menu Container */
.mobile-nav-menu {
    display: none;
    position: absolute;
    top: 100%; /* Below .main-nav */
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 6px 12px rgba(0,0,0,0.1);
    z-index: 1050;
    max-height: calc(100vh - 50px); /* Adjust 50px to be slightly less than header height */
    overflow-y: auto;
    border-top: 1px solid #e9e9e9;
}
.mobile-nav-menu.mobile-active {
    display: block;
}

/* Mobile Search Form */
.mobile-nav-menu .mobile-search-form {
    padding: 15px;
    border-bottom: 1px solid #e9e9e9;
}
.mobile-nav-menu .mobile-search-form .search-box {
    display: flex;
    width: 100%;
}
.mobile-nav-menu .mobile-search-form .search-box input {
    flex-grow: 1;
    height: 40px;
    padding: 8px 15px;
    border: 1px solid #ccc;
    border-radius: 5px 0 0 5px; /* 调整圆角 */
    font-size: 14px;
    margin-right: -1px; /* 让按钮边框重叠 */
}
.mobile-nav-menu .mobile-search-form .search-box button {
    height: 40px;
    width: 45px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    color: #555;
    padding: 0;
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: static; /* 重置桌面可能有的绝对定位 */
    transform: none; /* 重置桌面可能有的transform */
}

/* Mobile Navigation Menu List */
.mobile-nav-menu .nav-menu {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0;
    list-style: none;
}

/* Mobile Nav Items (direct <a> and <div> wrappers) */
.mobile-nav-menu .nav-menu > .nav-item,
.mobile-nav-menu .nav-menu > div.nav-item {
    width: 100%;
    border-bottom: 1px solid #f0f0f0;
    position: relative; /* For dropdown toggle pseudo-elements */
}
.mobile-nav-menu .nav-menu > .nav-item:last-child,
.mobile-nav-menu .nav-menu > div.nav-item:last-child {
    border-bottom: none;
}

/* Mobile Nav Links (a.nav-item) */
.mobile-nav-menu .nav-menu a.nav-item {
    display: block;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    background-color: transparent !important; /* Override desktop active state */
    border-radius: 0 !important;
    box-shadow: none !important;
    white-space: normal;
}
.mobile-nav-menu .nav-menu a.nav-item.active { /* Top-level active link in mobile */
    color: var(--tiffany-blue);
    font-weight: bold;
}

/* Mobile Dropdown Toggles */
.mobile-nav-menu .nav-menu .dropdown-toggle::after {
    content: '+';
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: bold;
    color: #888;
    border: none; /* Clear desktop arrow */
    transition: transform 0.2s ease;
    padding: 5px; /* Make it easier to tap */
    line-height: 1;
}
.mobile-nav-menu .nav-menu .nav-item.submenu-open > a.dropdown-toggle::after,
.mobile-nav-menu .nav-menu .dropdown-submenu.submenu-open > a.dropdown-toggle::after {
    content: '-';
}

/* Mobile Dropdown Menus - Ensuring they display when .submenu-open is present */
.mobile-nav-menu .nav-menu .dropdown-menu {
    display: none; /* Default state: hidden */
    position: static; /* Already should be static for mobile */
    width: 100%;
    background-color: #f7f7f7; /* Submenu background */
    box-shadow: none;
    border: none;
    border-top: 1px solid #e9e9e9; /* Separator line from parent */
    padding: 0;
    margin: 0;
    /* Reset any desktop-specific properties that might interfere */
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none; /* Transitions usually not needed for simple display block/none */
}

/* Rule to show DIRECT child .dropdown-menu when parent .nav-item has .submenu-open */
.mobile-nav-menu .nav-menu > .nav-item.submenu-open > .dropdown-menu {
    display: block;
}

/* Rule to show DIRECT child .dropdown-menu when parent .dropdown-submenu has .submenu-open */
.mobile-nav-menu .nav-menu .dropdown-submenu.submenu-open > .dropdown-menu {
    display: block;
}


/* Styling for items within the mobile dropdowns - ensuring correct display and padding */
.mobile-nav-menu .nav-menu .dropdown-item {
    display: block; /* Ensure it takes full width */
    padding: 12px 20px 12px 35px; /* Base indent for first-level dropdown items */
    font-size: 14px;
    color: #454545;
    border-bottom: 1px solid #eee;
    text-decoration: none;
}
.mobile-nav-menu .nav-menu .dropdown-item:last-child {
    border-bottom: none;
}
.mobile-nav-menu .nav-menu .dropdown-item:hover {
    background-color: #e9e9e9;
    color: #222;
}

/* Indentation for deeper levels - ensure these paddings are applied */
.mobile-nav-menu .nav-menu .dropdown-submenu .dropdown-menu .dropdown-item {
    padding-left: 50px; /* Indent for items in a -submenu's -menu (level 2 items / 3rd nav level) */
}
.mobile-nav-menu .nav-menu .dropdown-submenu .dropdown-menu .dropdown-submenu .dropdown-menu .dropdown-item {
    padding-left: 65px; /* Indent for items in a -submenu's -menu's -submenu's -menu (level 3 items / 4th nav level) */
}
/* If you have a 4th level of items (5th nav level), add another rule: */
.mobile-nav-menu .nav-menu .dropdown-submenu .dropdown-menu .dropdown-submenu .dropdown-menu .dropdown-submenu .dropdown-menu .dropdown-item {
    padding-left: 80px;
}


/* ----------------------------------------
   MEDIA QUERIES FOR HIDING/SHOWING ELEMENTS
---------------------------------------- */
@media (max-width: 991.98px) {
    .desktop-nav-wrapper,
    .desktop-search-wrapper {
        display: none !important;
    }
    .mobile-menu-toggle {
        display: block; /* 或者 inline-block，确保它可见并可以作为 flex 项目排列 */
        /* order: 1; */ /* 如果因为HTML结构原因，汉堡菜单不在最右侧，可能需要order调整，但根据你之前的HTML，应该不需要 */
    }
    /* If .main-nav .row has justify-content: space-between, this should work fine */
    /* If .main-nav .row has justify-content: flex-start, margin-left: auto is key */

     .main-nav .row {
        display: flex; /* 确保这一行是 flex 容器 */
        justify-content: space-between; /* 将 Logo 推向左边，汉堡菜单按钮推向右边 */
        align-items: center; /* 垂直居中对齐 Logo 和汉堡菜单按钮 */
        flex-wrap: nowrap; /* 防止元素换行 */
    }

    /* 确保 Logo 的容器不会导致布局问题 */
    .main-nav .container .row > .col-auto:first-child { /* 假设 Logo 在第一个 .col-auto 内 */
        flex-grow: 0; /* 防止 Logo 容器不必要地伸展 */
        flex-shrink: 0; /* 防止 Logo 容器被过度压缩 */
    }

    /* 再次确认桌面导航和桌面搜索在移动端是隐藏的 */
    /* 这对于 justify-content: space-between 正确作用于 Logo 和汉堡按钮至关重要 */
    .main-nav .navigation-column,
    .main-nav .search-form-column {
        display: none !important; /* 如果其他样式覆盖了隐藏，则可能需要 !important */
    }

    body {
        /* 将 XXXpx 替换为你测量到的移动端 .site-header 的实际高度 */
        /* 例如：padding-top: 70px; */
        padding-top: XXXpx;
    }

    /* 如果你想确保移动端页眉是固定且在最前，可以加上这些 */
    /*
    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1020; /* 一个合适的 z-index 值 */
        /* background-color: #fff; */ /* 确保有背景色，防止下方内容透视 */
    /* }
    */
}

@media (min-width: 992px) {
    .mobile-menu-toggle,
    .mobile-nav-menu {
        display: none !important;
    }
    /* Ensure desktop wrappers are shown - they should be by default unless overridden */
    .desktop-nav-wrapper,
    .desktop-search-wrapper {
        display: flex !important; /* Or block, matching their original display type */
        align-items: center; /* For vertical alignment if they are flex containers */
    }
    .desktop-nav-wrapper {
        justify-content: center; /* Re-ensure desktop nav is centered */
    }

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1030;
    }

    body {
        padding-top: 120px; /* 使用精确测量的高度 */
    }
}

/* Body padding for fixed header - adjust if your header height changes */
/* Only apply if .site-header is fixed */
/*
body {
  padding-top: 135px; /* Example: 40px (top-bar) + 95px (main-nav) approx. Adjust! */
/* }
*/

/* ----------------------------------------
   TOP BAR - MOBILE RESPONSIVE STYLES
---------------------------------------- */
@media (max-width: 767px) {
    .top-bar {
        padding: 6px 0;
        font-size: 13px;
    }

    /* 在小屏幕上重新排列top bar中的元素 */
    .top-bar .container .row {
        flex-direction: column;
        gap: 10px;
    }

    .contact-info {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .contact-info .divider {
        display: none; /* 隐藏分隔符 */
    }

    .contact-info a {
        font-size: 13px;
    }

    /* 社交图标和语言切换放在一行 */
    .top-bar .container .row .col-auto:last-child {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .social-icons {
        justify-content: center;
        gap: 12px;
        margin-right: 10px;
    }

    .language-switch {
        justify-content: center;
    }

    .language-link {
        font-size: 13px;
    }

    .language-link i {
        font-size: 14px;
    }
}