/**
 * RS Header Scroll Effect Styles
 * 定義導覽列滾動時的樣式變化
 */

/* 強制重置所有可能的樣式 */
.rs-header * {
    box-sizing: border-box;
}

/* 確保初始狀態完全透明 */
.rs-header:not(.rs-header-scrolled) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* RS Header 基本樣式 */
.rs-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    transition: all 0.3s ease-in-out !important;
    
    /* 初始狀態：透明背景，無陰影，白色文字 */
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #ffffff !important;
}

/* 整塊一起動畫 - 移除所有內部元素的動畫 */
.rs-header *,
.rs-header a,
.rs-header span,
.rs-header div,
.rs-header li,
.rs-header ul,
.rs-header nav,
.rs-header .elementor-item,
.rs-header .menu-item,
.rs-header .sub-menu,
.rs-header .dropdown-menu,
.rs-header .wp-submenu,
.rs-header .elementor-nav-menu,
.rs-header .elementor-nav-menu--main,
.rs-header .elementor-nav-menu__container,
.rs-header .elementor-nav-menu--layout-horizontal,
.rs-header .e--pointer-underline,
.rs-header .e--animation-fade,
.rs-header .sub-arrow,
.rs-header svg,
.rs-header i {
    transition: none !important;
    animation: none !important;
    animation-delay: 0s !important;
    animation-duration: 0s !important;
}

/* 確保所有nav元素都沒有背景色 */
.rs-header.rs-header-scrolled nav,
.rs-header.rs-header-scrolled .elementor-nav-menu--main,
.rs-header.rs-header-scrolled .elementor-nav-menu__container,
.rs-header.rs-header-scrolled .elementor-nav-menu,
.rs-header.rs-header-scrolled .elementor-nav-menu--layout-horizontal,
.rs-header.rs-header-scrolled .e--pointer-underline,
.rs-header.rs-header-scrolled .e--animation-fade {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* rs-header-menu 區域透明背景 - 針對 Elementor WordPress Menu */
.rs-header.rs-header-scrolled .rs-header-menu,
.rs-header.rs-header-scrolled .rs-header-menu nav,
.rs-header.rs-header-scrolled .rs-header-menu .elementor-nav-menu--main,
.rs-header.rs-header-scrolled .rs-header-menu .elementor-nav-menu__container,
.rs-header.rs-header-scrolled .rs-header-menu .elementor-nav-menu,
.rs-header.rs-header-scrolled .rs-header-menu .elementor-nav-menu--layout-horizontal,
.rs-header.rs-header-scrolled .rs-header-menu .e--pointer-underline,
.rs-header.rs-header-scrolled .rs-header-menu .e--animation-fade {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* rs-header-menu 第一層選單項目透明背景 */
.rs-header.rs-header-scrolled .rs-header-menu .elementor-item,
.rs-header.rs-header-scrolled .rs-header-menu .menu-item a,
.rs-header.rs-header-scrolled .rs-header-menu .elementor-nav-menu .elementor-item,
.rs-header.rs-header-scrolled .rs-header-menu .menu-item {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* 強制覆蓋任何可能的背景和陰影 */
.rs-header,
.rs-header::before,
.rs-header::after {
    background-color: transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* RS Header 內的所有文字元素預設為白色 */
.rs-header,
.rs-header *,
.rs-header a,
.rs-header span,
.rs-header div,
.rs-header h1,
.rs-header h2,
.rs-header h3,
.rs-header h4,
.rs-header h5,
.rs-header h6,
.rs-header p,
.rs-header li,
.rs-header ul,
.rs-header ol,
.rs-header .sub-arrow,
.rs-header i,
.rs-header svg {
    color: #ffffff !important;
}

/* 下拉箭頭圖標樣式 */
.rs-header .sub-arrow {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* RS Header 內的連結樣式 */
.rs-header a {
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.3s ease-in-out;
}

.rs-header a:hover {
    color: #ffffff !important;
    opacity: 0.8;
    background: none !important;
    background-color: transparent !important;
    border-bottom: none !important;
}

/* 初始狀態 hover 線條樣式 - 移除白色背景和底線 */
.rs-header:not(.rs-header-scrolled) a:hover,
.rs-header:not(.rs-header-scrolled) a:hover::after,
.rs-header:not(.rs-header-scrolled) a:hover::before,
.rs-header:not(.rs-header-scrolled) .menu-item a:hover,
.rs-header:not(.rs-header-scrolled) .menu-item a:hover::after,
.rs-header:not(.rs-header-scrolled) .menu-item a:hover::before,
.rs-header:not(.rs-header-scrolled) [class*="menu"] a:hover,
.rs-header:not(.rs-header-scrolled) [class*="menu"] a:hover::after,
.rs-header:not(.rs-header-scrolled) [class*="menu"] a:hover::before {
    border-bottom-color: transparent !important;
    border-color: transparent !important;
    color: #ffffff !important;
    background: none !important;
    background-color: transparent !important;
}

/* 初始狀態 hover 下底線樣式 - 移除底線 */
.rs-header:not(.rs-header-scrolled) a:hover {
    border-bottom: none !important;
    text-decoration: none !important;
}

/* 初始狀態 hover 偽元素線條 - 移除白色背景 */
.rs-header:not(.rs-header-scrolled) a::after,
.rs-header:not(.rs-header-scrolled) a::before,
.rs-header:not(.rs-header-scrolled) .menu-item a::after,
.rs-header:not(.rs-header-scrolled) .menu-item a::before {
    background-color: transparent !important;
    border-color: transparent !important;
    color: #ffffff !important;
}

/* 滾動後的樣式 */
.rs-header.rs-header-scrolled {
    /* 滾動後：白色背景，有陰影，深色文字 */
    background-color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
    color: #454545 !important;
}

/* 強制覆蓋滾動後的背景和陰影 */
.rs-header.rs-header-scrolled,
.rs-header.rs-header-scrolled::before,
.rs-header.rs-header-scrolled::after {
    background-color: rgba(255, 255, 255, 0.95) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important;
}

/* 滾動後所有文字元素變為深色 */
.rs-header.rs-header-scrolled,
.rs-header.rs-header-scrolled *,
.rs-header.rs-header-scrolled a,
.rs-header.rs-header-scrolled span,
.rs-header.rs-header-scrolled div,
.rs-header.rs-header-scrolled h1,
.rs-header.rs-header-scrolled h2,
.rs-header.rs-header-scrolled h3,
.rs-header.rs-header-scrolled h4,
.rs-header.rs-header-scrolled h5,
.rs-header.rs-header-scrolled h6,
.rs-header.rs-header-scrolled p,
.rs-header.rs-header-scrolled li,
.rs-header.rs-header-scrolled ul,
.rs-header.rs-header-scrolled ol,
.rs-header.rs-header-scrolled .sub-arrow,
.rs-header.rs-header-scrolled i,
.rs-header.rs-header-scrolled svg {
    color: #454545 !important;
}

/* 滾動後下拉箭頭圖標樣式 */
.rs-header.rs-header-scrolled .sub-arrow {
    color: #454545 !important;
    fill: #454545 !important;
    stroke: #454545 !important;
}

/* 滾動後連結樣式 */
.rs-header.rs-header-scrolled a {
    color: #454545 !important;
}

.rs-header.rs-header-scrolled a:hover {
    color: #454545 !important;
    opacity: 0.7;
}

/* 下拉式選單樣式 - 初始狀態透明 */
.rs-header:not(.rs-header-scrolled) .sub-menu,
.rs-header:not(.rs-header-scrolled) .dropdown-menu,
.rs-header:not(.rs-header-scrolled) .wp-submenu,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul,
.rs-header:not(.rs-header-scrolled) .submenu,
.rs-header:not(.rs-header-scrolled) [class*="submenu"],
.rs-header:not(.rs-header-scrolled) [class*="dropdown"],
.rs-header:not(.rs-header-scrolled) .sub-menu ul,
.rs-header:not(.rs-header-scrolled) .sub-menu li,
.rs-header:not(.rs-header-scrolled) .dropdown-menu ul,
.rs-header:not(.rs-header-scrolled) .dropdown-menu li,
.rs-header:not(.rs-header-scrolled) .wp-submenu ul,
.rs-header:not(.rs-header-scrolled) .wp-submenu li,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul ul,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul li,
.rs-header:not(.rs-header-scrolled) .submenu ul,
.rs-header:not(.rs-header-scrolled) .submenu li,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] ul,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] li,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] ul,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] li {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 下拉式選單文字 - 初始狀態白色 */
.rs-header:not(.rs-header-scrolled) .sub-menu *,
.rs-header:not(.rs-header-scrolled) .dropdown-menu *,
.rs-header:not(.rs-header-scrolled) .wp-submenu *,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul *,
.rs-header:not(.rs-header-scrolled) .submenu *,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] *,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] *,
.rs-header:not(.rs-header-scrolled) .sub-menu ul *,
.rs-header:not(.rs-header-scrolled) .sub-menu li *,
.rs-header:not(.rs-header-scrolled) .dropdown-menu ul *,
.rs-header:not(.rs-header-scrolled) .dropdown-menu li *,
.rs-header:not(.rs-header-scrolled) .wp-submenu ul *,
.rs-header:not(.rs-header-scrolled) .wp-submenu li *,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul ul *,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul li *,
.rs-header:not(.rs-header-scrolled) .submenu ul *,
.rs-header:not(.rs-header-scrolled) .submenu li *,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] ul *,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] li *,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] ul *,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] li * {
    color: #ffffff !important;
}

/* 下拉式選單連結 - 初始狀態白色 */
.rs-header:not(.rs-header-scrolled) .sub-menu a,
.rs-header:not(.rs-header-scrolled) .dropdown-menu a,
.rs-header:not(.rs-header-scrolled) .wp-submenu a,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul a,
.rs-header:not(.rs-header-scrolled) .submenu a,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] a,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] a,
.rs-header:not(.rs-header-scrolled) .sub-menu ul a,
.rs-header:not(.rs-header-scrolled) .sub-menu li a,
.rs-header:not(.rs-header-scrolled) .dropdown-menu ul a,
.rs-header:not(.rs-header-scrolled) .dropdown-menu li a,
.rs-header:not(.rs-header-scrolled) .wp-submenu ul a,
.rs-header:not(.rs-header-scrolled) .wp-submenu li a,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul ul a,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul li a,
.rs-header:not(.rs-header-scrolled) .submenu ul a,
.rs-header:not(.rs-header-scrolled) .submenu li a,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] ul a,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] li a,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] ul a,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] li a {
    color: #ffffff !important;
}

.rs-header:not(.rs-header-scrolled) .sub-menu a:hover,
.rs-header:not(.rs-header-scrolled) .dropdown-menu a:hover,
.rs-header:not(.rs-header-scrolled) .wp-submenu a:hover,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul a:hover,
.rs-header:not(.rs-header-scrolled) .submenu a:hover,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] a:hover,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] a:hover,
.rs-header:not(.rs-header-scrolled) .sub-menu ul a:hover,
.rs-header:not(.rs-header-scrolled) .sub-menu li a:hover,
.rs-header:not(.rs-header-scrolled) .dropdown-menu ul a:hover,
.rs-header:not(.rs-header-scrolled) .dropdown-menu li a:hover,
.rs-header:not(.rs-header-scrolled) .wp-submenu ul a:hover,
.rs-header:not(.rs-header-scrolled) .wp-submenu li a:hover,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul ul a:hover,
.rs-header:not(.rs-header-scrolled) .menu-item-has-children ul li a:hover,
.rs-header:not(.rs-header-scrolled) .submenu ul a:hover,
.rs-header:not(.rs-header-scrolled) .submenu li a:hover,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] ul a:hover,
.rs-header:not(.rs-header-scrolled) [class*="submenu"] li a:hover,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] ul a:hover,
.rs-header:not(.rs-header-scrolled) [class*="dropdown"] li a:hover {
    color: #ffffff !important;
    opacity: 0.8;
    background: none !important;
    background-color: transparent !important;
    border-bottom: none !important;
}

/* 第一層子項目初始透明背景 - 只針對直接子項目 */
.rs-header.rs-header-scrolled .sub-menu,
.rs-header.rs-header-scrolled .dropdown-menu,
.rs-header.rs-header-scrolled .wp-submenu,
.rs-header.rs-header-scrolled .menu-item-has-children > ul,
.rs-header.rs-header-scrolled .submenu,
.rs-header.rs-header-scrolled [class*="submenu"],
.rs-header.rs-header-scrolled [class*="dropdown"],
.rs-header.rs-header-scrolled .elementor-nav-menu--dropdown {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 延遲3秒後第一層子項目白色背景 - 只針對直接子項目 */
.rs-header.rs-header-scrolled.rs-header-submenu-white .sub-menu,
.rs-header.rs-header-scrolled.rs-header-submenu-white .dropdown-menu,
.rs-header.rs-header-scrolled.rs-header-submenu-white .wp-submenu,
.rs-header.rs-header-scrolled.rs-header-submenu-white .menu-item-has-children > ul,
.rs-header.rs-header-scrolled.rs-header-submenu-white .submenu,
.rs-header.rs-header-scrolled.rs-header-submenu-white [class*="submenu"],
.rs-header.rs-header-scrolled.rs-header-submenu-white [class*="dropdown"],
.rs-header.rs-header-scrolled.rs-header-submenu-white .elementor-nav-menu--dropdown {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 更深層子項目也保持白色背景 - 針對嵌套的子項目 */
.rs-header.rs-header-scrolled .sub-menu .sub-menu,
.rs-header.rs-header-scrolled .sub-menu .dropdown-menu,
.rs-header.rs-header-scrolled .dropdown-menu .sub-menu,
.rs-header.rs-header-scrolled .dropdown-menu .dropdown-menu,
.rs-header.rs-header-scrolled .sub-menu ul,
.rs-header.rs-header-scrolled .dropdown-menu ul,
.rs-header.rs-header-scrolled .sub-menu li ul,
.rs-header.rs-header-scrolled .dropdown-menu li ul,
.rs-header.rs-header-scrolled .menu-item-has-children ul ul {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* rs-header-menu 第一層子項目初始透明背景 */
.rs-header.rs-header-scrolled .rs-header-menu .sub-menu,
.rs-header.rs-header-scrolled .rs-header-menu .dropdown-menu,
.rs-header.rs-header-scrolled .rs-header-menu .wp-submenu,
.rs-header.rs-header-scrolled .rs-header-menu .menu-item-has-children > ul,
.rs-header.rs-header-scrolled .rs-header-menu .submenu,
.rs-header.rs-header-scrolled .rs-header-menu [class*="submenu"],
.rs-header.rs-header-scrolled .rs-header-menu [class*="dropdown"],
.rs-header.rs-header-scrolled .rs-header-menu .elementor-nav-menu--dropdown {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* rs-header-menu 延遲3秒後第一層子項目白色背景 */
.rs-header.rs-header-scrolled.rs-header-submenu-white .rs-header-menu .sub-menu,
.rs-header.rs-header-scrolled.rs-header-submenu-white .rs-header-menu .dropdown-menu,
.rs-header.rs-header-scrolled.rs-header-submenu-white .rs-header-menu .wp-submenu,
.rs-header.rs-header-scrolled.rs-header-submenu-white .rs-header-menu .menu-item-has-children > ul,
.rs-header.rs-header-scrolled.rs-header-submenu-white .rs-header-menu .submenu,
.rs-header.rs-header-scrolled.rs-header-submenu-white .rs-header-menu [class*="submenu"],
.rs-header.rs-header-scrolled.rs-header-submenu-white .rs-header-menu [class*="dropdown"],
.rs-header.rs-header-scrolled.rs-header-submenu-white .rs-header-menu .elementor-nav-menu--dropdown {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* rs-header-menu 更深層子項目也保持白色背景 */
.rs-header.rs-header-scrolled .rs-header-menu .sub-menu .sub-menu,
.rs-header.rs-header-scrolled .rs-header-menu .sub-menu .dropdown-menu,
.rs-header.rs-header-scrolled .rs-header-menu .dropdown-menu .sub-menu,
.rs-header.rs-header-scrolled .rs-header-menu .dropdown-menu .dropdown-menu,
.rs-header.rs-header-scrolled .rs-header-menu .sub-menu ul,
.rs-header.rs-header-scrolled .rs-header-menu .dropdown-menu ul,
.rs-header.rs-header-scrolled .rs-header-menu .sub-menu li ul,
.rs-header.rs-header-scrolled .rs-header-menu .dropdown-menu li ul,
.rs-header.rs-header-scrolled .rs-header-menu .menu-item-has-children ul ul {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* 滾動後下拉式選單文字恢復正常 */
.rs-header.rs-header-scrolled .sub-menu *,
.rs-header.rs-header-scrolled .dropdown-menu *,
.rs-header.rs-header-scrolled .wp-submenu *,
.rs-header.rs-header-scrolled .menu-item-has-children ul *,
.rs-header.rs-header-scrolled .submenu *,
.rs-header.rs-header-scrolled [class*="submenu"] *,
.rs-header.rs-header-scrolled [class*="dropdown"] * {
    color: #454545 !important;
}

/* 滾動後下拉式選單連結恢復正常 */
.rs-header.rs-header-scrolled .sub-menu a,
.rs-header.rs-header-scrolled .dropdown-menu a,
.rs-header.rs-header-scrolled .wp-submenu a,
.rs-header.rs-header-scrolled .menu-item-has-children ul a,
.rs-header.rs-header-scrolled .submenu a,
.rs-header.rs-header-scrolled [class*="submenu"] a,
.rs-header.rs-header-scrolled [class*="dropdown"] a {
    color: #454545 !important;
}

.rs-header.rs-header-scrolled .sub-menu a:hover,
.rs-header.rs-header-scrolled .dropdown-menu a:hover,
.rs-header.rs-header-scrolled .wp-submenu a:hover,
.rs-header.rs-header-scrolled .menu-item-has-children ul a:hover,
.rs-header.rs-header-scrolled .submenu a:hover,
.rs-header.rs-header-scrolled [class*="submenu"] a:hover,
.rs-header.rs-header-scrolled [class*="dropdown"] a:hover {
    color: #454545 !important;
    opacity: 0.7;
    background: none !important;
    background-color: transparent !important;
    border-bottom: none !important;
}

/* Elementor 導覽選單 active 項目 - 初始狀態透明 */
.rs-header:not(.rs-header-scrolled) .elementor-nav-menu--dropdown a.elementor-item-active,
.rs-header:not(.rs-header-scrolled) .elementor-nav-menu a.elementor-item-active,
.rs-header:not(.rs-header-scrolled) .elementor-item-active,
.rs-header:not(.rs-header-scrolled) [class*="elementor-nav-menu"] a.elementor-item-active,
.rs-header:not(.rs-header-scrolled) [class*="elementor-item-active"] {
    background-color: transparent !important;
    background: transparent !important;
}

/* 確保導覽列在所有內容之上 */
.rs-header {
    z-index: 9999;
}

/* 響應式設計 */
@media (max-width: 768px) {
    .rs-header {
        /* 在手機上可能需要調整過渡時間 */
        transition: all 0.2s ease-in-out;
    }
}

/* 確保導覽列不會影響頁面佈局 */
body {
    /* 如果導覽列是固定定位，可能需要為body添加padding-top */
    /* padding-top: 80px; */ /* 根據導覽列高度調整 */
}

/* 平滑滾動效果 */
html {
    scroll-behavior: smooth;
}