/* ============================================================
   2026/07 about.php 白底改版（v2）
   跟首頁(index.css)用同一套色階系統，只作用在 body.page-about 底下，
   不影響其他頁面。
   ============================================================ */
body.page-about{background:#FFFFFF}

/* 麵包屑列：白底版本 */
body.page-about .breadcrumb-wrapper{background:#FFFFFF;border-bottom:1px solid #E1E4E7}
body.page-about .breadcrumb-wrapper .breadcrumb .breadcrumb-item a{color:#5B6670}
body.page-about .breadcrumb-wrapper .breadcrumb .breadcrumb-item.active{color:#1D2226}
body.page-about .breadcrumb-wrapper .breadcrumb .breadcrumb-item+.breadcrumb-item::before{color:#5B6670}

/* 標題 */
body.page-about h1.page_title{
    color:#1D2226;font-family:'Noto Sans TC',var(--bs-font-sans-serif);font-weight:700;
}

/* 子項目切換選單（有多筆關於我們內容時的下拉選單） */
body.page-about .page_menu .dropdown-toggle{background:#F5F6F7;border-color:#E1E4E7;color:#1D2226}
body.page-about .page_menu .dropdown-menu{background:#F5F6F7;border:1px solid #E1E4E7}
body.page-about .page_menu .dropdown-menu .dropdown-item{color:#5B6670}
body.page-about .page_menu .dropdown-menu .dropdown-item:hover{background:#E1E4E7;color:#1D2226}
body.page-about .page_menu .dropdown-menu .dropdown-item.active{background:#1FA648;color:#fff}

/* 內文（後台編輯器輸出的內容），文字改深色、連結改深綠色 */
body.page-about .editor_content{color:#343A40;font-family:'Noto Sans TC',var(--bs-font-sans-serif)}
body.page-about .editor_content a{color:#15803D}
body.page-about .editor_content h1,
body.page-about .editor_content h2,
body.page-about .editor_content h3,
body.page-about .editor_content h4{color:#1D2226}
body.page-about .editor_content table{color:#343A40}
body.page-about .editor_content table,
body.page-about .editor_content table td,
body.page-about .editor_content table th{border-color:#E1E4E7}

@media (max-width: 991.98px){
    body.page-about .editor_content{padding-left:0 !important;padding-right:0 !important}

    /* 2026/07 補充：內文裡更深層的元素（不是 editor_content 自己，而是內文HTML裡
       巢狀的 div/table 等）可能帶有寫死的 px 寬度或置中設定，導致內容整體超出手機
       螢幕寬度。body 本身有 overflow-x:hidden 不會出現橫向捲軸，但超出的部分會被
       左右對稱裁掉，就變成文字一部分看不到。這裡強制內文所有子元素寬度自動撐滿容器。 */
    body.page-about .editor_content *{
        max-width:100% !important;
    }
    /* 只對「沒有 class 的元素」強制寬度自動撐滿：這類多半是舊資料裡沒有樣式系統
       的裸 div/span，真的需要蓋掉寫死的px寬度。有 class 的元素（例如 Bootstrap
       的 .row / .col-sm-12 等網格系統）排除在外，避免破壞欄位置中、排版邏輯。 */
    body.page-about .editor_content *:not([class]){
        width:auto !important;
    }
    body.page-about .editor_content table{
        display:block !important;
        overflow-x:auto;
    }

    /* 實測確認的真正根因：<article style="margin-left:-150px;"> 把整篇內容硬拉出
       螢幕左邊界150px，body的overflow-x:hidden把超出範圍直接裁掉，造成左邊文字
       被切、右邊留白。這裡把常見的負margin值都蓋掉歸零。 */
    body.page-about .editor_content [style*="margin-left:-50px"],
    body.page-about .editor_content [style*="margin-left:-80px"],
    body.page-about .editor_content [style*="margin-left:-100px"],
    body.page-about .editor_content [style*="margin-left:-120px"],
    body.page-about .editor_content [style*="margin-left:-150px"],
    body.page-about .editor_content [style*="margin-left:-180px"],
    body.page-about .editor_content [style*="margin-left:-200px"]{
        margin-left:0 !important;
    }
}

/* ============================================================
   2026/07 頂部橫幅比照首頁：限制寬度置中、頂部圓角
   （page_slide.php 是共用檔案，這裡只針對 about.php 這頁做視覺調整，
   不影響其他也使用 page_slide.php 的頁面）
   ============================================================ */
body.page-about #innerBanner{
    max-width:1320px;margin:0 auto;padding:1.5rem 12px 0;
}
body.page-about #innerBanner .slick-list{
    border-radius:30px 30px 0 0;overflow:hidden;
}

/* 修正橫幅圖片周圍出現的細框顏色：Slick輪播套件內層容器(slick-track/slick-slide)
   預設背景可能是白色/透明，這裡統一補上跟頁面一致的白色 */
body.page-about #innerBanner,
body.page-about #innerBanner .slick-list,
body.page-about #innerBanner .slick-track,
body.page-about #innerBanner .slick-slide{
    background:#FFFFFF;
}

/* 內文編輯器區塊「與我們聯絡」CTA 條：白底主題下，恢復使用原本行內設定的淺灰底色，不用再覆蓋 */

/* ============================================================
   2026/07 字體優化：中文內文換思源黑體，短標籤用Rajdhani強化科技感
   ============================================================ */
body.page-about{font-family:'Noto Sans TC',var(--bs-font-sans-serif)}
body.page-about .page_menu .dropdown-toggle,
body.page-about .page_menu .dropdown-item{
    font-family:'Rajdhani',var(--bs-font-monospace);letter-spacing:.5px;font-weight:600;
}

/* ============================================================
   2026/07 文字整體放大約1.3倍
   ============================================================ */
body.page-about{font-size:1.3rem}
body.page-about h1.page_title{font-size:1.95rem}
body.page-about .page_menu .dropdown-toggle,
body.page-about .page_menu .dropdown-item{font-size:1.1rem}