/* =====================================================================
 * site.css — Nexform 專案樣式
 * 載入順序：bootstrap.min.css → base.css → site.css
 * ===================================================================== */

:root {
    --nav_h: 74px;
    --header_height: 74px;
}

body {
    font-family: var(--ff_en);
    background-color: var(--color_bg);
    letter-spacing: 0.01em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--ff_en);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

p {
    color: #4a4d52;
}

/* --------------------- */
/* 標題 / eyebrow
/* --------------------- */
.eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color_ci);
    margin-bottom: var(--sp_3);
}

.eyebrow::before {
    content: '';
    display: inline-block;
    width: 28px;
    height: 1px;
    background-color: var(--color_ci);
    vertical-align: middle;
    margin-right: 0.7em;
}

.h_section {
    font-size: clamp(1.75rem, 3.4vw, 2.85rem);
    max-width: 20ch;
}

.lead_text {
    font-size: 1.075rem;
    line-height: 1.8;
    max-width: 62ch;
}

.theme_dark p,
.bg_carbon p,
.hero p,
.page_head p,
.cta_band p,
.contact_aside p,
.site_footer p {
    color: rgba(255, 255, 255, 0.72);
}

/* --------------------- */
/* 導覽列
/* --------------------- */
.site_nav {
    border-bottom: 1px solid transparent;
    min-height: var(--nav_h);
    transition: border-color var(--transition);
    z-index: var(--z_header);
}

/* 背景／毛玻璃模糊獨立成一層，不要直接掛在 .site_nav 本身：
   backdrop-filter 會讓套用它的元素變成 fixed 定位子孫的新容納區塊。
   .site_nav 是 fixed-top，若模糊效果直接放在它身上，內部的手機導覽
   抽屜（#mainNav，position:fixed）的 top/bottom 就會相對這個約 74px
   高的導覽列計算，而不是整個視窗高度，導致抽屜被壓成一小條。
   拆成獨立背景層即可避開這個副作用，視覺效果不變。 */
.site_nav_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: rgba(15, 17, 20, 0.92);
    backdrop-filter: var(--glass_blur);
    transition: background-color var(--transition);
}

.site_nav.scrolled {
    border-bottom-color: var(--color_border_dark);
}

.site_nav.scrolled .site_nav_bg {
    background-color: rgba(15, 17, 20, 0.99);
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.brand_mark {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    color: var(--color_ci);
}

.brand_text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand_text strong {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
}

.brand_text small {
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color_ci);
}

.site_nav .nav-link {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    padding: 0.6rem 0.95rem;
    position: relative;
}

.site_nav .nav-link:hover,
.site_nav .nav-link.active {
    color: #ffffff;
}

.site_nav .nav-link.active::after {
    content: '';
    position: absolute;
    left: 0.95rem;
    right: 0.95rem;
    bottom: 0.28rem;
    height: 2px;
    background-color: var(--color_ci);
}

.navbar-toggler {
    border-color: var(--color_border_dark);
}

/* Bootstrap 預設的漢堡圖示是深色線條，深色底看不清楚，換成白色線條 */
.site_nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --------------------- */
/* 手機導覽抽屜（Bootstrap Offcanvas）
/* .offcanvas-lg：< lg 時是右側滑入抽屜；>= lg 時 Bootstrap 自動
/* 還原成 position:static 的一般橫向導覽列，與桌機版外觀完全一致。
/* --------------------- */
@media (max-width: 991.98px) {
    #mainNav.offcanvas {
        width: 80vw;
        max-width: 80vw;
        background-color: var(--color_carbon);
        color: #ffffff;
    }

    #mainNav .offcanvas-header {
        border-bottom: 1px solid var(--color_border_dark);
        padding: 1.15rem 1.5rem;
    }

    #mainNav .offcanvas-header .brand_mark {
        width: 30px;
        height: 30px;
    }

    #mainNav .offcanvas-header .brand_text strong {
        font-size: 0.95rem;
    }

    #mainNav .offcanvas-header .brand_text small {
        font-size: 0.56rem;
    }

    #mainNav .offcanvas-header .btn-close {
        opacity: 0.85;
    }

    #mainNav .offcanvas-header .btn-close:hover {
        opacity: 1;
    }

    #mainNav .offcanvas-body {
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
    }

    #mainNav .navbar-nav {
        gap: 0.15rem;
    }

    /* 抽屜內改用堆疊清單樣式：左側色塊當作 active 指示，取代橫向底線 */
    #mainNav .nav-link {
        padding: 1rem 0.25rem;
        font-size: 1rem;
        border-bottom: 1px solid var(--color_border_dark);
        border-left: 2px solid transparent;
        padding-left: 0.85rem;
    }

    #mainNav .nav-link.active,
    #mainNav .nav-link:hover {
        border-left-color: var(--color_ci);
        background-color: rgba(var(--color_ci_rgb), 0.08);
    }

    #mainNav .nav-link.active::after {
        /* 桌機版的底線指示器在抽屜模式改用左側色塊，底線關掉 */
        display: none;
    }

    #mainNav .nav-item:last-child {
        margin-top: 1.5rem;
    }
}

/* 抽屜背後的半透明遮罩：讓最左側 20% 露出並可看見原頁內容 */
.offcanvas-backdrop.show {
    opacity: 0.65;
}

/* --------------------- */
/* 按鈕
/* --------------------- */
.btn_ci,
.btn_ghost,
.btn_dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.85rem 1.5rem;
    border-radius: var(--radius_sm);
    border: 1px solid transparent;
    transition: all var(--transition);
    white-space: nowrap;
}

.btn_ci {
    background-color: var(--color_ci);
    border-color: var(--color_ci);
    color: #ffffff;
}

.btn_ci:hover {
    background-color: var(--color_ci_2);
    border-color: var(--color_ci_2);
    color: #ffffff;
}

.btn_ghost {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

.btn_ghost:hover {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

.btn_dark {
    background-color: var(--color_carbon);
    border-color: var(--color_carbon);
    color: #ffffff;
}

.btn_dark:hover {
    background-color: #2a2e35;
    border-color: #2a2e35;
    color: #ffffff;
}

.btn_sm {
    padding: 0.6rem 1.15rem;
    font-size: 0.72rem;
}

/* --------------------- */
/* Hero — 滿版背景圖，斜線遮罩疊在圖片上方
/* 疊層順序（由下到上）：
/*   1. .hero_bg   滿版背景照片 + 深色漸層（確保文字可讀）
/*   2. .hero::before  斜線紋理＋主色光暈，疊在照片上方當效果
/*   3. .view_warp     文字內容
/* --------------------- */
.hero {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    display: flex;
    align-items: center;
    min-height: min(86vh, 760px);
    padding-top: calc(var(--nav_h) + 3.5rem);
    padding-bottom: 3.5rem;
}

/* 滿版背景圖片 */
.hero_bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

/* 圖片上的深色漸層：左側較暗方便疊字，右側保留產品細節 */
.hero_bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(15, 17, 20, 0.95) 0%, rgba(15, 17, 20, 0.86) 30%, rgba(15, 17, 20, 0.48) 58%, rgba(15, 17, 20, 0.8) 100%);
}

/* 斜線遮罩＋主色光暈：疊在背景圖之上、文字之下 */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 70% at 78% 45%, rgba(var(--color_ci_rgb), 0.1), transparent 70%), repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.055) 0 2px, transparent 2px 6px);
}

.hero .view_warp {
    position: relative;
    z-index: 2;
    width: 100%;
}

.hero_title {
    font-size: clamp(2.1rem, 5.2vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero_sub {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    color: rgba(255, 255, 255, 0.82);
    max-width: 54ch;
}

/* 頁首橫幅（內頁用） */
.page_head {
    background-color: var(--color_carbon);
    color: #ffffff;
    padding-top: calc(var(--nav_h) + 3.5rem);
    padding-bottom: 3.5rem;
    border-bottom: 3px solid var(--color_ci);
}

.page_head h1 {
    font-size: clamp(1.9rem, 4vw, 3rem);
}

/* --------------------- */
/* 卡片與編號模組
/* --------------------- */
.pillar_card {
    background-color: var(--color_bg);
    border: 1px solid var(--color_border);
    border-top: 3px solid var(--color_ci);
    padding: var(--sp_5) var(--sp_4);
    height: 100%;
    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.pillar_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(15, 17, 20, 0.1);
}

.theme_dark .pillar_card,
.bg_carbon .pillar_card {
    background-color: rgba(255, 255, 255, 0.035);
    border-color: var(--color_border_dark);
    border-top-color: var(--color_ci);
}

.num_badge {
    font-family: var(--ff_dec);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color_ci);
    display: block;
    margin-bottom: var(--sp_3);
}

.pillar_card h3 {
    font-size: 1.05rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: var(--sp_3);
}

/* 三欄橫向資訊條 */
.strip_bar {
    border-top: 1px solid var(--color_border);
    border-bottom: 1px solid var(--color_border);
    background-color: var(--color_bg);
}

.strip_bar > div {
    padding: var(--sp_4) var(--sp_3);
}

.strip_bar h3 {
    font-size: 1.2rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color_ci);
    margin-bottom: 0.4rem;
}

.strip_bar p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .strip_bar > div + div {
        border-left: 1px solid var(--color_border);
    }
}

/* 合規徽章 */
.badge_row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp_3);
    justify-content: center;
}

.badge_pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    border: 1px solid var(--color_border);
    border-radius: 100px;
    padding: 0.55rem 1.25rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--color_carbon);
    background-color: var(--color_bg);
}

.badge_pill::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: var(--color_ci);
    flex-shrink: 0;
}

.theme_dark .badge_pill,
.bg_carbon .badge_pill {
    border-color: var(--color_border_dark);
    background-color: transparent;
    color: #ffffff;
}

/* 圖文卡 */
.media_card {
    border: 1px solid var(--color_border);
    background-color: var(--color_bg);
    height: 100%;
    overflow: hidden;
}

.media_card .img_cover {
    background-color: var(--color_light);
}

.media_card img {
    transition: transform 0.6s ease;
}

.media_card:hover img {
    transform: scale(1.05);
}

.media_card_body {
    padding: var(--sp_4);
}

.media_card_body h3 {
    font-size: 1.1rem;
    margin-bottom: var(--sp_2);
}

.media_card_body p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

.spec_tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color_ci_2);
    background-color: rgba(var(--color_ci_rgb), 0.12);
    padding: 0.28rem 0.7rem;
    margin-bottom: var(--sp_3);
}

/* --------------------- */
/* 流程步驟
/* --------------------- */
.step_flow {
    counter-reset: step;
}

.step_item {
    position: relative;
    padding: var(--sp_4) var(--sp_3);
    border-top: 2px solid var(--color_border_dark);
    height: 100%;
}

.step_item .step_no {
    font-family: var(--ff_dec);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color_ci);
    display: block;
    margin-bottom: var(--sp_2);
}

.step_item h4 {
    font-size: 1rem;
    margin-bottom: var(--sp_2);
}

.step_item p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* 淺色底的流程 */
.step_flow.light .step_item {
    border-top-color: var(--color_border);
}

/* --------------------- */
/* 追溯鏈
/* --------------------- */
.trace_chain {
    display: grid;
    gap: 1px;
    background-color: var(--color_border_dark);
    border: 1px solid var(--color_border_dark);
}

@media (min-width: 768px) {
    .trace_chain {
        grid-template-columns: repeat(4, 1fr);
    }
}

.trace_node {
    background-color: var(--color_carbon);
    padding: var(--sp_4);
}

.trace_node .trace_label {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color_ci);
    display: block;
    margin-bottom: var(--sp_2);
}

.trace_node p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* 序號標籤示意 */
.serial_tag {
    font-family: var(--ff_dec);
    letter-spacing: 0.18em;
    background-color: #ffffff;
    color: var(--color_carbon);
    padding: var(--sp_3) var(--sp_4);
    display: inline-block;
    border-radius: var(--radius_sm);
}

.serial_tag .barcode {
    display: block;
    height: 34px;
    margin-bottom: 0.5rem;
    background-image: repeating-linear-gradient(90deg, #0f1114 0 2px, transparent 2px 4px, #0f1114 4px 5px, transparent 5px 9px, #0f1114 9px 12px, transparent 12px 14px);
}

/* --------------------- */
/* 表格
/* --------------------- */
.spec_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.93rem;
    min-width: 720px;
}

.spec_table th,
.spec_table td {
    padding: var(--sp_3);
    border-bottom: 1px solid var(--color_border);
    vertical-align: top;
    text-align: left;
}

.spec_table thead th {
    background-color: var(--color_carbon);
    color: #ffffff;
    font-size: 0.74rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-weight: 600;
    border-bottom: none;
}

.spec_table tbody tr:hover {
    background-color: rgba(var(--color_ci_rgb), 0.05);
}

.spec_table td:first-child {
    font-weight: 600;
    color: var(--color_carbon);
    white-space: nowrap;
}

/* 覆寫 base.css 的中文捲動提示 */
.scroll_bar::before {
    content: 'Swipe to see more \25B7';
    font-family: var(--ff_en);
    letter-spacing: 0.05em;
}

/* --------------------- */
/* 表單
/* --------------------- */
.form-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color_carbon);
    margin-bottom: 0.45rem;
}

.form-control,
.form-select {
    border-radius: var(--radius_sm);
    border-color: var(--color_border);
    padding: 0.72rem 0.9rem;
    font-size: 0.95rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color_ci);
}

.form-check-input:checked {
    background-color: var(--color_ci);
    border-color: var(--color_ci);
}

.req::after {
    content: ' *';
    color: #c0392b;
}

.contact_aside {
    background-color: var(--color_carbon);
    color: #ffffff;
    padding: var(--sp_5) var(--sp_4);
    height: 100%;
}

.contact_aside a {
    color: var(--color_ci_3);
    border-bottom: 1px solid rgba(var(--color_ci_rgb), 0.5);
}

.contact_aside a:hover {
    color: #ffffff;
}

/* 送出成功後的二段式提示 */
#rfqFollowUp {
    border-left: 3px solid var(--color_ci);
    background-color: rgba(var(--color_ci_rgb), 0.09);
    padding: var(--sp_4);
    margin-top: var(--sp_4);
}

/* 提示 / 政策區塊 */
.note_box {
    border-left: 3px solid var(--color_ci);
    background-color: var(--color_bg_alt);
    padding: var(--sp_4);
}

.theme_dark .note_box,
.bg_carbon .note_box {
    background-color: rgba(255, 255, 255, 0.045);
}

/* --------------------- */
/* CTA / Footer
/* --------------------- */
.cta_band {
    background-color: var(--color_carbon);
    color: #ffffff;
    border-top: 3px solid var(--color_ci);
    padding: var(--sp_6) 0;
}

.site_footer {
    background-color: #0a0c0e;
    color: rgba(255, 255, 255, 0.62);
    padding: var(--sp_6) 0 var(--sp_4);
    font-size: 0.9rem;
}

.site_footer h5 {
    color: #ffffff;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: var(--sp_3);
}

.site_footer a {
    color: rgba(255, 255, 255, 0.62);
    display: inline-block;
    padding: 0.16rem 0;
}

.site_footer a:hover {
    color: var(--color_ci);
}

.site_footer .footer_logo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.footer_bottom {
    border-top: 1px solid var(--color_border_dark);
    margin-top: var(--sp_5);
    padding-top: var(--sp_4);
    font-size: 0.82rem;
}

/* --------------------- */
/* 統計數字
/* --------------------- */
.stat_num {
    font-family: var(--ff_dec);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color_ci);
    line-height: 1;
    letter-spacing: -0.01em;
}

.stat_label {
    font-size: 0.85rem;
    margin-top: var(--sp_2);
}

/* --------------------- */
/* 條列
/* --------------------- */
.check_list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.check_list li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.7rem;
    line-height: 1.7;
}

.check_list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.42em;
    width: 0.95em;
    height: 0.95em;
    background-color: var(--color_ci);
    -webkit-mask: var(--icon_check_circle) center / contain no-repeat;
    mask: var(--icon_check_circle) center / contain no-repeat;
}

@media (max-width: 767.98px) {
    .hero {
        min-height: auto;
        padding-top: calc(var(--nav_h) + 3rem);
        padding-bottom: 3rem;
        text-align: center;
    }
    .hero_bg::after {
        /* 手機直式螢幕圖片裁切範圍較小，加重底色確保文字可讀 */
        background: rgba(15, 17, 20, 0.82);
    }
    .hero_sub {
        margin-left: auto;
        margin-right: auto;
    }
    .h_section {
        max-width: none;
    }
}

/* --------------------- */
/* 產品分類示意圖
/* 目前用 SVG 輪圈剖面代替產品照（避免使用他牌素材）。
/* 換成自家產品照時，把 HTML 的 .product_ph 換回
/*   <div class="img_cover h_1x1"><img src="..." alt="..."></div>
/* 即可，其餘樣式不必改。
/* --------------------- */
.product_ph {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color_carbon);
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0 2px, transparent 2px 7px);
    overflow: hidden;
}

.product_ph svg {
    width: 78%;
    height: 78%;
}

.product_ph_cap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.85rem;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
}

/* 保險：確保 <a> 形式的按鈕文字色不被 base.css 的 a 規則影響
   （舊版 base.css 的 a:link 特異性較高，這裡明確蓋回來） */
a.btn_ci,
a.btn_ci:link,
a.btn_ci:visited,
a.btn_ci:hover,
a.btn_ci:active,
a.btn_ghost,
a.btn_ghost:link,
a.btn_ghost:visited,
a.btn_ghost:hover,
a.btn_ghost:active,
a.btn_dark,
a.btn_dark:link,
a.btn_dark:visited,
a.btn_dark:hover,
a.btn_dark:active {
    color: #ffffff;
}