/* ==========================================================================
   AIWEB refactor module: article
   Generated from the former post-legacy section of style.css, then reviewed as
   a migration layer. New code should be edited semantically in the appropriate
   module instead of adding patches to style.css.
   ========================================================================== */

/*
 * Image centering settings for article content section
 * Target selector: .article_content
 */

.article_content p {
    /* Remove the default paragraph indent so that images inside <p> tags can be centered */
   
    /* Center images (treated as inline elements) within <p> */
}

.article_content img {
    /* Make images block elements and use auto margins for reliable centering */
    display: block; 
    margin-left: auto;
    margin-right: auto;
    /* Ensure it’s not overridden by other float rules */
    float: none;
}

/* Ensure tables in article content are also centered, since images are sometimes inside tables */
.article_content table {
    margin-left: auto;
    margin-right: auto;
}

/* Override old list styles to prevent conflicts */
.article_list {
    display: none; /* Hide old ul lists and use new div structure */
}

/* Article card container: responsive two-column or multi-column layout */
.article-list-wrapper {
    display: grid;
    /* Display 2 columns on desktop */
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; /* Column spacing */
    padding: 10px 0;
}

.article-card-item {
    padding: 15px;
    border: 1px solid #dbe3e3;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.article-card-item:hover {
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.article-photo-link {
    display: block;
    float: left; 
    width: 100px; /* Fixed image width */
    height: 100px; /* Fixed image height */
    overflow: hidden;
    margin-right: 15px;
    border-radius: 4px;
}

.article-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image fills the area while maintaining aspect ratio */
}

.article-info {
    overflow: hidden; /* Prevent content block from being squeezed by image */
}

.article-title {
    font-size: 16px;
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1.4;
    height: 3em; /* Limit title height to prevent image displacement */
    overflow: hidden;
}

.article-meta {
    padding-top: 5px;
    font-size: 12px;
    color: #888;
    line-height: 1.6;
}

.article-author {
    margin-left: 10px;
}

.article-click {
    margin-left: 10px;
}

/* ======================================================
   7. 文章詳情頁 (強制防手機跑版與溢出)
   ====================================================== */
/* 核心：徹底殺死後台編輯器寫死的固定寬度 (例如 width: 600px) */
.article_content,
.article_content p,
.article_content div,
.article_content span,
.article_content table,
.article_content td,
.article_content ul,
.article_content ol,
.article_content li {
    max-width: 100%;  /* 限制最大寬度絕對不能超過螢幕 */
    width: auto;       /* 逼迫瀏覽器忽略死線 */
    box-sizing: border-box;
    word-wrap: break-word; 
    overflow-wrap: break-word;
}

.article_content table { border-collapse: collapse; border: 1px solid #c6d0d0; width: 100%; }
.article_content table td, .article_content table th { border: 1px solid #c6d0d0; padding: 8px; }
.article h1 { background: linear-gradient(135deg, #147486 0%, #2593a6 100%); color: #ffffff; padding: 20px 25px; border-radius: 12px 12px 0 0; border: none; text-shadow: 0 2px 4px rgba(0,0,0,0.2); font-size: 22px; letter-spacing: 1px; }
.box .bd .article_content { border: 1px solid #dbe3e3; border-top: none; background-color: #fff; padding: 30px; border-radius: 0 0 8px 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); margin-top: 0; line-height: 1.8; }

.article-nav { margin-top: 30px; padding-top: 20px; border-top: 1px solid #e7eded; display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 14px; }
.article-nav-top { margin-top: 0; padding: 12px 24px; border-top: none; border-bottom: 1px solid #e7eded; background: #f7fafa; }
.article-nav .nav-item { width: 48%; padding: 10px 0; }
.article-nav .nav-item.next { text-align: right; }
.article-brief {
    margin: 4px 0 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #777;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.article-brief a { color: #777; }
/* === 文章紅色標題修正：從醜色塊改成乾淨橫幅 === */
.article_title { margin: 0; padding: 0; border-bottom: none; }
.article h1 {
    display: block;            /* 關鍵：inline 改 block，紅幅才會乖乖填滿不溢出 */
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 18px 24px;
    background: linear-gradient(135deg, #147486 0%, #103f49 100%); /* 改成單一品牌紅，較高雅 */
    color: #fff;
    font-size: 24px;
    line-height: 1.4;
    letter-spacing: 1px;
    border-radius: 12px 12px 0 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.25);
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.article_info {                            /* 日期/點擊數移到橫幅下方一條細灰列 */
    float: none; clear: both; display: block;
    margin: 0; padding: 10px 24px;
    background: #f7fafa; color: #888; font-size: 13px;
    border-left: 1px solid #dbe3e3; border-right: 1px solid #dbe3e3;
}
.article_info span { padding: 0 12px 0 0; }
.article_excerpt {
    margin: 0;
    padding: 0 24px 10px;
    background: linear-gradient(135deg, #147486 0%, #103f49 100%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    line-height: 1.6;
    font-weight: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body#page_article_cat #main .col_main,
body#page_article_cat #main .col_sub {
    float: none;
    width: 100%;
}

body#page_article_cat .article-cat-box {
    width: 100%;
}

/* 文章分類頁：標題 + 子分類導覽 */
.article-cat-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.article-sub-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1 1 280px;
}

.article-sub-nav-item {
    display: inline-block;
    padding: 6px 14px;
    font-size: 14px;
    line-height: 1.4;
    color: #444;
    text-decoration: none;
    background: #eaf3f4;
    border: 1px solid #dbe3e3;
    border-radius: 20px;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.article-sub-nav-item:hover {
    color: #147486;
    border-color: #147486;
    background: #fff;
}

.article-sub-nav-item.is-current {
    color: #fff;
    background: #147486;
    border-color: #147486;
    font-weight: 600;
}

/* 2026-08-24：這條「查看按鈕」拿掉了，改到 style-components.css。
   它是「訂單操作欄一大一小」這個問題本身的根因 —— 只蓋了「查看訂單」
   一顆（#333、4px 圓角、4px 12px 窄padding），旁邊的取消/付款/確認收貨
   吃的是別條規則（50px 圓角的通殺按鈕），兩顆並排自然對不齊。
   style-components.css 那邊改成整組 td 一起管，兩顆同尺寸、
   同圓角，主／次動作用顏色分，不再各自為政。 */

/* 文章頁 - 文字大小調整工具列 */
.article_font_toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #f4f8f8;
    border: 1px solid #e7eded;
    border-radius: 8px;
}
.article_font_toolbar .font_toolbar_label {
    font-size: 14px;
    color: #666;
}
.article_font_toolbar .font_size_btn {
    cursor: pointer;
    padding: 6px 14px;
    border: 1px solid #c6d0d0;
    background: #fff;
    color: #333;
    border-radius: 20px;
    font-size: 14px;
}
.article_font_toolbar .font_size_btn.current {
    background: #147486;
    border-color: #147486;
    color: #fff;
}
/* ==================================================================
 * 常見問題（FAQ）展開式清單
 *
 * 用 <details>/<summary> 而不是自寫 JS 摺疊：
 * 原生元素在關閉狀態下內容仍在 DOM 裡，搜尋引擎與 AI 都讀得到；
 * 用 JS 動態插入的內容不一定被抓到。而且鍵盤與螢幕閱讀器天生支援。
 * ================================================================== */
body .faq-list { margin: 0 0 24px; }

body .faq-list .faq-item {
  background: #fff;
  border: 1px solid #e2e6ea;
  border-radius: 10px;
  margin-bottom: 10px;
  overflow: hidden;
}

body .faq-list .faq-item[open] {
  border-color: #b7dfcf;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

body .faq-list .faq-q {
  cursor: pointer;
  padding: 16px 44px 16px 18px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2d3d;
  line-height: 1.6;
  position: relative;
  list-style: none;
}
body .faq-list .faq-q::-webkit-details-marker { display: none; }

body .faq-list .faq-q::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: #0d9f6e;
}
body .faq-list .faq-item[open] .faq-q::after { content: "−"; }

body .faq-list .faq-a {
  padding: 0 18px 18px;
  font-size: 15px;
  line-height: 1.9;
  color: #45535f;
  border-top: 1px solid #f0f2f4;
  padding-top: 14px;
}
body .faq-list .faq-a img { max-width: 100%; height: auto; }
body .faq-list .faq-more { margin: 12px 0 0; font-size: 13px; }
body .faq-list .faq-more a { color: #1f6fde; }