/* Mobile navigation styles - only applies to mobile devices */

/* Apply transparent black navigation styles only on mobile screens */
@media(max-width: 1199px) {
  /* Create a custom header class for mobile navigation - fixed black background */
  .mobile-transparent-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--title-color);
    z-index: 999;
  }
  
  .mobile-transparent-nav .menu-area {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: var(--title-color) !important; /* Fixed black background */
  }

  .mobile-transparent-nav .sticky-wrapper.sticky .menu-area {
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    background: var(--title-color) !important; /* Consistent black background */
  }
  
  .mobile-transparent-nav .sticky-wrapper.sticky {
    background: var(--title-color);
  }

  .mobile-transparent-nav .main-menu>ul>li>a {
    color: var(--white-color);
  }

  .mobile-transparent-nav .main-menu>ul>li>a:before {
    background: var(--white-color);
  }

  .mobile-transparent-nav .main-menu>ul>li>a:after {
    color: var(--white-color) !important;
  }

  .mobile-transparent-nav .main-menu ul li.menu-item-has-children>a:hover:after {
    color: var(--white-color);
  }

  .mobile-transparent-nav .header-button .icon-btn {
    color: #0B59DB !important; /* Changed from white to blue */
  }
  
  .mobile-transparent-nav .th-btn.style6 {
    background: #0B59DB !important; /* Changed background to blue */
    color: white !important;
  }
  
  .mobile-transparent-nav .th-btn.style6 i {
    color: white !important;
  }

  /* Mobile menu toggle button - change to blue */
  .mobile-transparent-nav .th-menu-toggle {
    background-color: #0B59DB !important; /* Blue color */
    color: white !important;
  }
  
  .mobile-transparent-nav .th-menu-toggle:hover {
    background-color: #0947B0 !important; /* Darker blue on hover */
    color: white !important;
  }

  .mobile-transparent-nav .header-logo img.Desktop-logo {
    display: none;
  }
  
  .mobile-transparent-nav .header-logo img.mobile-logo {
    display: block !important;
  }

  /* Make header stick to top on mobile */
  .mobile-transparent-nav .sticky-wrapper {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }

  /* Add top padding to body to compensate for fixed header on mobile */
  body.has-sticky-mobile-nav {
    padding-top: 70px; /* Adjusted for black fixed header */
  }

  /* Specifically for hero section */
  body.has-sticky-mobile-nav .th-hero-wrapper {
    margin-top: 0 !important;
  }
  
  /* 专门为index页面移动端banner添加间距，避免被导航栏遮挡 */
  #hero.th-hero-wrapper {
    margin-top: 30px !important;
  }
  
  /* 针对更小屏幕进一步调整 */
  @media (max-width: 767px) {
    #hero.th-hero-wrapper {
      margin-top: 25px !important;
    }
  }
  
  @media (max-width: 575px) {
    #hero.th-hero-wrapper {
      margin-top: 20px !important;
    }
  }

  /* Default mobile logo styles */
  .header-logo img.mobile-logo {
    display: none;
  }
  
  .header-logo img.Desktop-logo {
    display: block;
  }
  

}

/* Ensure desktop navigation remains unchanged - revert to original header-layout1 */
@media(min-width: 1200px) {
  .mobile-transparent-nav {
    position: static;
    background: transparent;
  }
  
  .mobile-transparent-nav .menu-area {
    background: transparent !important;
  }
  
  /* Reset mobile-specific styles for desktop */
  .mobile-transparent-nav .main-menu>ul>li>a {
    color: var(--black-color2);
  }
  
  .mobile-transparent-nav .main-menu>ul>li>a:before {
    background: var(--theme-color);
  }
  
  .mobile-transparent-nav .main-menu>ul>li>a:after {
    color: var(--theme-color) !important;
  }
  
  /* Show desktop logo on larger screens */
  .mobile-transparent-nav .header-logo img.Desktop-logo {
    display: block;
  }
  
  .mobile-transparent-nav .header-logo img.mobile-logo {
    display: none;
  }
}

/* Mobile menu dropdown arrow styles */
@media(max-width: 1199px) {
  /* Add arrow indicator for menu items with children */
  .th-mobile-menu ul li.menu-item-has-children > a {
    position: relative;
    padding-right: 40px !important;
  }
  
  .th-mobile-menu ul li.menu-item-has-children > a:after {
    content: "\f107"; /* Font Awesome caret-down icon */
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    transition: transform 0.3s ease;
    pointer-events: auto;
    cursor: pointer;
  }
  
  .th-mobile-menu ul li.menu-item-has-children.th-active > a:after {
    transform: translateY(-50%) rotate(180deg);
  }
  
  /* Make the arrow area clickable separately */
  .th-mobile-menu ul li.menu-item-has-children > a .menu-arrow {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    cursor: pointer;
    pointer-events: auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Ensure menu text area is clickable for navigation */
  .th-mobile-menu ul li.menu-item-has-children > a span.menu-text {
    pointer-events: auto;
    cursor: pointer;
  }
}

/* 专门修复header-layout1-2类页面的移动端导航间距问题 */
@media(max-width: 1199px) {
  /* 为header-layout1-2导航添加固定定位 */
  .header-layout1-2 .sticky-wrapper {
    position: fixed !important;
    top: 0 !important;
    left: 0;
    right: 0;
    z-index: 999;
    background: white !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  
  /* 确保sticky状态下的样式 */
  .header-layout1-2 .sticky-wrapper.sticky {
    position: fixed !important;
    top: 0 !important;
    background: white !important;
  }
  
  /* 为导航栏下方的内容添加顶部间距 */
  .header-layout1-2 ~ .breadcumb-area,
  .header-layout1-2 ~ .space,
  .header-layout1-2 ~ section,
  .header-layout1-2 ~ div[class*='area'] {
    margin-top:20px !important;
  }
  
  /* 特别处理紧随其后的第一个元素 */
  .header-layout1-2 + *,
  .header-layout1-2 + div,
  .header-layout1-2 + section {
    margin-top: 80px !important;
  }
  
  /* 调整导航栏内部间距 */
  .header-layout1-2 .menu-area {
    padding: 15px 0 !important;
  }
  
  .header-layout1-2 .container.th-container {
    padding: 0 15px !important;
  }
  
  /* 调整移动端logo大小 */
  .header-layout1-2 .header-logo img {
    max-height: 40px !important;
  }
  
  /* 调整移动端菜单按钮 */
  .header-layout1-2 .th-menu-toggle {
    padding: 10px !important;
    font-size: 20px !important;
  }
}