/* =========================================================
   全域變數與基礎設定 (Global Settings)
   ========================================================= */
:root {
    --yl-bg-light: #f4f4f4;      /* 背景淺灰 */
    --yl-border-orange: #ff6c39; /* 橘色邊框 */
    --yl-service-blue: #11b5d3;  /* 服務區塊藍色 */
    --yl-text-dark: #333333;
    --yl-text-gray: #666666;
    --yl-text-white: #ffffff;
    /* 定義字型變數 */
    --yl-main-font: 'Noto Sans TC', system-ui, -apple-system, sans-serif; /* 內文用黑體 */
    --yl-serif-font: 'Noto Serif TC', serif; /* 標題用宋體 */
}

body {
    font-family: var(--yl-main-font); /* 預設內文使用黑體 */
    color: var(--yl-text-dark);
    overflow-x: hidden;
    background-color: #fff;
}

/* 主要標題使用思源宋體 */
h1, h2, h3, .navbar-brand, .yl-footer-slogan strong {
    font-family: var(--yl-serif-font);
}

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

/* =========================================================
   Block 1: Navigation (導覽列) #yl-main-nav
   ========================================================= */
#yl-main-nav.yl-navbar {
    background-color: var(--yl-bg-light); 
    border-bottom: 10px solid var(--yl-border-orange); 
    padding: 10px 0; /* 上下內距固定 10px */
}

/* Logo 圖片控制 - 設定明確高度以利計算 navbar 總高 */
.yl-logo-img {
    height: 40px; /* PC 版 Logo 高度固定 */
    width: auto;
    display: block;
    transition: all 0.3s ease;
}

@media (max-width: 991px) {
    .yl-logo-img {
        height: 40px; /* 手機版 Logo 高度固定 */
    }
}

/* 電腦版選單連結 (Desktop Only) */
@media (min-width: 992px) {
    #yl-main-nav .nav-link {
        font-family: var(--yl-main-font);
        color: #333;
        font-weight: 500;
        font-size: 1.1rem;
        margin-left: 20px;
        transition: color 0.3s ease;
    }

    #yl-main-nav .nav-link:hover {
        color: var(--yl-border-orange);
    }
}



/* =========================================================
   Block 5: Footer (頁尾) #yl-main-footer
   ========================================================= */
#yl-main-footer {
    background-color: var(--yl-bg-light); 
    border-top: 10px solid var(--yl-border-orange); 
    padding: 60px 0 40px;
    color: #333;
}

.yl-footer-links span {
    margin-right: 15px; font-size: 1.1rem; font-weight: 500; color: #444;
    font-family: var(--yl-main-font);
}

.yl-footer-phone {
    font-size: 3rem;
    font-weight: 800;
    color: var(--yl-border-orange);
    display: block;
    margin: 15px 0 10px 0;
    line-height: 1.2;
    font-family: var(--yl-main-font);
}

.yl-footer-slogan {
    font-size: 1.1rem;
    color: #555;
    font-weight: 500;
    line-height: 1.6;
}

.yl-footer-slogan strong {
    font-family: var(--yl-serif-font);
    font-weight: 700;
    color: #333;
    font-size: 1.3rem;
    display: block;
    margin-bottom: 5px;
}

.yl-footer-right { text-align: left; }
@media (min-width: 992px) {
    .yl-footer-right {
        text-align: right; display: flex; flex-direction: column;
        align-items: flex-end; justify-content: flex-end; height: 100%;
    }
}

/* Footer Logo 控制 */
.yl-footer-logo-container { margin-bottom: 15px; }
.yl-footer-logo-img {
    height: 40px;
    width: auto;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all 0.3s ease;
}
.yl-footer-logo-img:hover {
    filter: grayscale(0%);
    opacity: 1;
}

.yl-footer-address { font-size: 1rem; margin-bottom: 10px; color: #444; }
.yl-copyright { font-size: 0.9rem; color: #888; }

/* =========================================================
   Block 6: Floating Elements (懸浮 LINE 按鈕 - 修正版)
   ========================================================= */
/* 外層連結：強制固定在右下角 */
.yl-sticky-line {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999 !important; /* 確保在最上層 */
    text-decoration: none !important; /* 移除底線 */
    border: none !important;
    outline: none !important;
}

/* 按鈕本體：綠色圓形 */
.line-icon-wrapper {
    width: 60px;
    height: 60px;
    background-color: #00B900 !important; /* LINE 官方綠色 */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff !important; /* 強制文字白色 */
    box-shadow: 0 4px 15px rgba(0, 185, 0, 0.5) !important; /* 綠色陰影 */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 滑鼠移入效果 */
.yl-sticky-line:hover .line-icon-wrapper {
    transform: scale(1.1) rotate(-5deg); /* 放大並微微旋轉 */
    background-color: #00c900 !important; /* 變亮一點 */
}

/* Icon 圖示大小 */
.line-icon-wrapper i {
    font-size: 28px !important;
    line-height: 1;
    margin-bottom: 2px;
    color: #ffffff !important;
}

/* 文字大小 */
.line-text {
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1;
    font-family: Arial, sans-serif;
}

/* Animation Classes */
.reveal-on-scroll { opacity: 0; transform: translateY(30px); transition: all 0.8s ease-out; }
.reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); }
.fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 1s ease-out forwards; }
.delay-1 { animation-delay: 0.3s; }
.delay-2 { animation-delay: 0.6s; }
.delay-3 { animation-delay: 0.9s; }
.delay-4 { animation-delay: 1.2s; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* =========================================================
   ★ Mobile Menu Specific Styles (手機版選單獨立控制) ★
   ========================================================= */
@media (max-width: 991px) {
    /* 下拉選單容器 */
    .navbar-collapse {
        background-color: #f4f4f4;
        margin-top: 10px;
        border-top: 2px solid #ff6c39;
        max-height: 80vh;
        overflow-y: auto;
        padding-bottom: 20px;
    }

    /* 強制設定 ul 屬性 */
    ul.navbar-nav.yl-nav-links {
        width: 100%;
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
    }

    /* 強制設定 li 屬性 */
    ul.navbar-nav.yl-nav-links li.nav-item {
        width: 100% !important;
        margin: 0 !important;
        display: block !important;
        border-bottom: 1px solid #c4c4c4;
    }

    /* 強制設定 a 連結屬性 (高權重) */
    body ul.navbar-nav.yl-nav-links li.nav-item a.nav-link {
        font-family: var(--yl-main-font);
        display: block !important;
        width: 100% !important;
        padding: 15px 20px !important;
        margin: 0 !important;
        color: #333333 !important;
        background-color: transparent !important;
        transition: all 0.3s ease-in-out !important;
        border: none !important;
    }

    /* Hover / Focus / Active 特效 (高權重) */
    body ul.navbar-nav.yl-nav-links li.nav-item a.nav-link:hover,
    body ul.navbar-nav.yl-nav-links li.nav-item a.nav-link:focus,
    body ul.navbar-nav.yl-nav-links li.nav-item a.nav-link:active {
        background-color: #ff6c39 !important;
        color: #ffffff !important;
        padding-left: 35px !important;
    }
}