/**
 * @name: unit-theme.css
 * @description: UNI-T 優利德 台灣站品牌樣式（覆寫 default.css / footer.css）
 *   - 主色：UNI-T 紅 #DA2735（取自 UNI-T 官網頁首），強調色 #FD1E00
 *   - 頁首：紅底白字 + 白色 LOGO；頁尾：深灰 #22272D
 *   載入順序：須在 default.css、footer.css 之後
 */

:root {
    --unit-red: #DA2735;
    --unit-red-hover: #b81f2c;
    --unit-accent: #FD1E00;
    --unit-header-bg: #DA2735;
    --unit-footer-bg: #22272D;
    --unit-footer-text: #c3c7cd;

    --primary-color: #DA2735;
    --primary-hover: #b81f2c;
    --primary-rgb: 218, 39, 53;
    --btn-primary-bg: #DA2735;
    --btn-primary-hover: #b81f2c;
    --btn-primary-text: #ffffff;
}

/* ===== 頁首 =====
 * 紅底 #DA2735：導覽文字、搜尋與登入按鈕改白色外框（白字對 #DA2735 對比 ≈ 4.9:1）。
 * 用變數在 #Pages_Menu 範圍覆寫 --btn-secondary-*，login.css / default.css 的按鈕規則自動套用。
 * 下拉選單與展開的搜尋框仍是白底，維持深色文字。
 */
#Pages_Menu {
    --btn-secondary-bg: transparent;
    --btn-secondary-text: #ffffff;
    --btn-secondary-border: rgba(255, 255, 255, 0.75);
    --btn-secondary-hover-bg: #ffffff;
    --btn-secondary-hover-text: #DA2735;
}

#Pages_Menu.navbar {
    background-color: var(--unit-header-bg) !important;
    border-bottom: none;
}

#Pages_Menu .site-logo {
    display: block;
    height: 32px;
    width: auto;
}

#Pages_Menu .navbar-nav > .nav-item > .nav-link {
    color: #ffffff !important;
}

#Pages_Menu .navbar-nav > .nav-item > .nav-link:hover,
#Pages_Menu .navbar-nav > .nav-item > .nav-link.active,
#Pages_Menu .navbar-nav > .nav-item.show > .nav-link {
    color: #ffffff !important;
    background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18));
}

#Pages_Menu .search-form {
    background-color: #ffffff;
}

#Pages_Menu .search-input {
    color: #111827;
}

#Pages_Menu .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.75);
}

#Pages_Menu .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* 下拉選單：白底深字，hover 用品牌紅 */
#Pages_Menu .dropdown-menu .dropdown-item {
    color: #1f2937;
}

#Pages_Menu .dropdown-menu .dropdown-item:hover,
#Pages_Menu .dropdown-menu .dropdown-item:focus {
    color: var(--unit-red);
    background-color: #fdf0f1;
}

/* ===== 頁尾 =====
 * 深底：在 .site-footer 範圍內重新定義文字/邊框變數，footer.css 各規則（含高權重的
 * .footer-contact-list li span、.footer-address 等）自動改用淺色，避免深字配深底。
 * 對比（相對 #22272D）：主文字 #eef0f2 ≈ 13:1、次文字 #c3c7cd ≈ 9:1、強調紅 #ff6b74 ≈ 5:1
 */
.site-footer {
    --text-primary: #eef0f2;
    --text-secondary: #c3c7cd;
    --text-muted: #aab0b8;
    --text-inverse: #ffffff;
    --primary-color: #ff6b74;
    --primary-hover: #ff9aa0;
    --bg-primary: #2c323a;
    --bg-tertiary: #343b44;
    --border-color: #3d444d;
    --bs-secondary-color: #aab0b8;
    background-color: var(--unit-footer-bg);
    color: var(--text-secondary);
    border-top: 3px solid var(--unit-red);
}

.site-footer .footer-title {
    color: #ffffff;
    border-bottom-color: var(--unit-red);
}

/* 欄位標籤（電話、地址…）用次文字色，值用主文字色 */
.site-footer .footer-contact-list li span {
    color: var(--text-secondary);
}

.site-footer .store-name {
    color: #ffffff;
}

.site-footer .footer-link-info {
    color: #9fd3dc;
}

.site-footer .footer-link-info:hover {
    color: #ffffff;
}

.site-footer .text-muted {
    color: var(--text-muted) !important;
}

.site-footer .form-control {
    background-color: #ffffff;
    color: #111827;
}

.site-footer .btn-primary-custom {
    background-color: var(--unit-red);
    border-color: var(--unit-red);
    color: #ffffff;
}

/* ===== 按鈕 ===== */
.btn-primary {
    --bs-btn-bg: var(--unit-red);
    --bs-btn-border-color: var(--unit-red);
    --bs-btn-hover-bg: var(--unit-red-hover);
    --bs-btn-hover-border-color: var(--unit-red-hover);
    --bs-btn-active-bg: var(--unit-red-hover);
    --bs-btn-active-border-color: var(--unit-red-hover);
}

.btn-outline-primary {
    --bs-btn-color: var(--unit-red);
    --bs-btn-border-color: var(--unit-red);
    --bs-btn-hover-bg: var(--unit-red);
    --bs-btn-hover-border-color: var(--unit-red);
}

/* ===== 暫不開放功能的入口（程式保留，之後要開放時刪除本段） =====
 * 購物車／線上購買、線上客服（AI 接待）
 */
#cartToggle,
#btnAddToCart,
.product-price-card,
#chatWidget,
#chatTeaser,
#chatToggleBtn,
#chatOverlay {
    display: none !important;
}

/* ===== 產品選單（產品 → 13 大類 → 子類）：子選單對齊第一層頂端，太長時捲動，避免超出畫面 ===== */
@media (min-width: 992px) {
    #Pages_Menu .dropdown-menu.multi-level > .dropdown-submenu { position: static; }
    /* submenu 改 static 後，箭頭（::after 絕對定位）要改以連結本身為基準，否則 13 個箭頭全疊在選單正中間 */
    #Pages_Menu .dropdown-menu.multi-level > .dropdown-submenu > .dropdown-toggle {
        position: relative;
        padding-right: 2.25rem;
    }
    #Pages_Menu .dropdown-menu.multi-level > .dropdown-submenu > .dropdown-menu {
        top: 0;
        min-height: 100%;
        max-height: calc(100vh - 160px);
        overflow-y: auto;
    }
}

/* ===== 首頁大橫幅：儀器文案（web_poster.overlay_html 內的 .ub-copy） =====
 * 背景圖已去除原廠英文字，正體中文以 HTML 疊上，可被瀏覽器翻譯、後台可改
 * 字型：型號與數字用 Rajdhani（SIL OFL，自架 /fonts），中文用系統黑體；三種顏色區分層次
 */
@font-face {
    font-family: "Rajdhani";
    src: url("/fonts/rajdhani-500.woff2") format("woff2");
    font-weight: 500;
    font-display: swap;
    unicode-range: U+0000-00FF;
}
@font-face {
    font-family: "Rajdhani";
    src: url("/fonts/rajdhani-700.woff2") format("woff2");
    font-weight: 700;
    font-display: swap;
    unicode-range: U+0000-00FF;
}
.hero-swiper .carousel-custom-html:has(.ub-copy) {
    justify-content: flex-start;
    pointer-events: none;
}
.hero-swiper .ub-copy {
    width: 34%;
    margin-left: 8%;
    color: #fff;
    font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55);
}
.hero-swiper .ub-copy .ub-num,
.hero-swiper .ub-copy .ub-series b {
    font-family: "Rajdhani", "Noto Sans TC", sans-serif;
}
/* 第一行：系列型號（銀灰、Rajdhani 粗體）＋「系列」（細） */
.hero-swiper .ub-series {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 50px);
    line-height: 1.15;
    color: #d8dce2;
    font-weight: 300;
    letter-spacing: .02em;
}
.hero-swiper .ub-series b {
    font-weight: 700;
    letter-spacing: .03em;
    margin-right: .25em;
}
/* 第二行：標語（金橘漸層、特粗） */
.hero-swiper .ub-headline {
    margin: .35em 0 .9em;
    font-size: clamp(20px, 2.1vw, 42px);
    font-weight: 900;
    line-height: 1.3;
    background: linear-gradient(90deg, #ffc46b 0%, #f39a2e 55%, #e2702a 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
/* 規格條列：白色細字，標籤半透明，數值用 Rajdhani 放大 */
.hero-swiper .ub-specs {
    list-style: none;
    margin: 0;
    padding: 0 0 0 .9em;
    border-left: 3px solid #da2735;
    font-size: clamp(13px, 1.1vw, 21px);
    font-weight: 300;
    line-height: 1.55;
}
.hero-swiper .ub-specs li { color: rgba(255, 255, 255, .92); }   /* 全站 li 預設深灰，這裡要白字 */
.hero-swiper .ub-specs li + li { margin-top: .35em; }
.hero-swiper .ub-specs .ub-label { color: rgba(255, 255, 255, .72); }
.hero-swiper .ub-specs .ub-num {
    font-size: 1.35em;
    font-weight: 700;
    color: #fff;
    letter-spacing: .02em;
}
@media (max-width: 991px) {
    .hero-swiper .ub-copy { width: 55%; margin-left: 5%; }
    .hero-swiper .ub-specs li:nth-child(n+3) { display: none; }
}
@media (max-width: 575px) {
    .hero-swiper .ub-copy { width: 82%; }
    .hero-swiper .ub-specs { display: none; }
}