/*
 * responsive-mobile.css  v4.0
 * 1503.org.au — 手機響應式樣式 (≤ 767px)
 *
 * ⚠ 刻意不使用全局 box-sizing:border-box，
 *   避免破壞 style.css 以 content-box 計算的導航列高度。
 */

/* ═══════════════════════════════════════════════════════
   A. 全域（桌面不受影響）
   ═══════════════════════════════════════════════════════ */

body { overflow-x: hidden; }

/* 漢堡按鈕：桌面隱藏 */
#hamburger-btn { display: none; }


/* ═══════════════════════════════════════════════════════
   B. 手機 (≤ 767px)
   ═══════════════════════════════════════════════════════ */
@media only screen and (max-width: 767px) {

  /* ── B-0. 基礎字體與圖片 ────────────────────────────── */
  body {
    font-size: 16px;
    line-height: 1.7;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  #header a img {
    max-width: 70%;
  }

  /* ── B-1. 容器 ──────────────────────────────────────── */
  .w980  { width: 100% !important; }

  #content {
    width: 96% !important;
    min-height: 0 !important;
    padding: 0 5px;
  }

  #content.mauto .mb10.clearfix { display: block; }

  /* ── B-2. Banner & 語言切換 ─────────────────────────── */
  #lang-switch { font-size: 13px !important; }

  /* ── B-3. 導覽列（漢堡 + 手風琴子選單）──────────────── */
  #main-nav {
    height: auto !important;
    padding: 0 !important;
    line-height: normal !important;
    overflow: visible !important;
  }

  /* 漢堡按鈕 */
  #hamburger-btn {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    padding: 0 18px;
    background-color: #591f5e;
    color: #fff;
    border: none;
    font-size: 16px;
    font-family: inherit;
    cursor: pointer;
    letter-spacing: 0.04em;
    -webkit-appearance: none;
    appearance: none;
  }

  #hamburger-btn .hbg-icon {
    font-size: 24px;
    line-height: 1;
  }

  /* 頂層 ul：關閉時隱藏 */
  .nav > ul {
    display: none !important;
    padding: 0 !important;
  }

  /* 開啟時顯示 */
  .nav.open > ul {
    display: block !important;
    width: 100%;
    background-color: #591f5e;
  }

  /* 沒有 a.nav 直接子項（事工部已刪除）：隱藏 */
  .nav.open > ul > li:not(:has(> a.nav)) {
    display: none !important;
  }

  /* 頂層 li */
  .nav.open > ul > li {
    float: none !important;
    text-align: left !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
  }

  /* 頂層連結 */
  .nav.open a.nav,
  .nav.open a.nav:hover,
  .nav.open a.nav:visited {
    float: none !important;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    width: 100% !important;
    height: auto !important;
    min-height: 50px;
    line-height: 1.4 !important;
    padding: 12px 18px !important;
    font-size: 16px !important;
  }

  /* 手風琴箭頭指示（由 JS 插入 .subnav-arrow） */
  .subnav-arrow {
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .nav.open li.subnav-open > a.nav .subnav-arrow {
    transform: rotate(90deg);
  }

  /* 子選單：預設由 JS 管理顯示/隱藏；此處只定義展開後的樣式 */
  .nav.open li.subnav-open > .subnav {
    display: block !important;  /* 覆蓋 inline style="display:none" */
    position: static !important;
    width: 100% !important;
    background-color: rgba(0,0,0,0.22) !important;
    box-shadow: none !important;
  }

  .nav.open .subnav a,
  .nav.open .subnav a:visited {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    height: auto !important;
    min-height: 46px;
    line-height: 1.4 !important;
    padding: 10px 18px 10px 32px !important;
    font-size: 15px !important;
    color: #e8c8e8 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    white-space: normal !important;
  }

  .nav.open .subnav a:hover {
    background-color: #fdb813 !important;
    color: #000 !important;
  }

  /* ── B-4. Facebook 側欄：手機完全隱藏 ──────────────── */
  #right-box { display: none !important; }

  /* ── B-5. Slider (.focus) ──────────────────────────── */
  .focus {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    padding: 0 !important;
  }

  .focus img { height: auto !important; }

  /* 輪播指示點：flex 橫排置中，避免 float 失效導致豎排 */
  .focus .switch {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center;
    text-align: center;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    bottom: 8px !important;
    gap: 4px;
  }

  .focus .switch span {
    float: none !important;
    margin-right: 0 !important;
  }

  .focus .switch a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 28px !important;
    height: 28px !important;
    line-height: 1 !important;
  }

  /* ── B-6. 週報 (.news) ──────────────────────────────── */
  .news {
    float: none !important;
    width: 100% !important;
    clear: both;
    margin-top: 10px;
    padding: 0 !important;
    display: block !important;
  }

  .news h1 {
    position: static !important;
    width: auto !important;
    margin-bottom: 10px;
    border-radius: 4px !important;
  }

  .news .title { height: 0 !important; }

  .news ul {
    width: auto !important;
    margin-top: 0 !important;
    padding: 10px !important;
  }

  .news li { font-size: 15px; }

  /* 週報圖片連結（inline <style> 裡的 270×212） */
  .newsletternav {
    width: 100% !important;
    height: 120px !important;
    background-size: cover !important;
    background-position: center 80% !important;  /* 下半部含導航說明文字 */
    display: block !important;
    border-radius: 4px;
  }

  /* ── B-7. YouTube (.movbox) ────────────────────────── */
  .main-contentbox { width: 100% !important; }

  .main-content {
    width: 98% !important;
    padding: 4px !important;
  }

  .movbox {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    height: auto !important;
  }

  .movbox iframe {
    width: 100% !important;
    height: 56vw !important;
    max-height: 280px;
    display: block;
  }

  /* ── B-8. 四格快捷圖 (.picnav) ─────────────────────── */
  .picnav {
    width: 100% !important;
    float: none !important;
    height: auto !important;
    overflow: visible !important;
    padding: 4px !important;
    background-color: transparent !important;
  }

  .picnav ul {
    display: flex !important;
    flex-wrap: wrap;
    padding: 0 !important;
    gap: 0;           /* 不用 gap，改由 padding 製造間距，相容舊版行動瀏覽器 */
    margin: 0 !important;
  }

  .picnav li {
    float: none !important;
    box-sizing: border-box !important; /* padding 計入寬度 → 兩格剛好 100% */
    width: 50% !important;
    height: auto !important;
    margin: 0 0 4px 0 !important;     /* 底部留白改用 margin，不影響欄寬 */
    padding: 5px !important;
  }

  .picnav img {
    width: 100% !important;
    height: auto !important;
  }

  .picnav .explain {
    width: calc(100% - 8px) !important;
    font-size: 13px !important;
  }

  /* ── B-9. 子頁面通用 (.sub-box) ────────────────────── */
  .sub-box {
    width: 100% !important;
    float: none !important;
    margin-right: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .sub-box .content {
    padding: 14px !important;
    font-size: 15px;
    line-height: 1.75;
  }

  .sub-box .content h1 {
    width: auto !important;
    font-size: 17px;
    margin-left: 0 !important;
    padding: 6px 12px !important;
  }

  .sub-box .content h2 {
    font-size: 16px;
    margin: 12px 0 6px;
  }

  .sub-box .content p {
    font-size: 15px;
    margin-bottom: 10px;
  }

  /* 大圖（620px 固定） */
  .sub-box .content .mappic img,
  .sub-box .content img.conpic {
    width: 100% !important;
    height: auto !important;
  }

  /* 麵包屑 */
  #crumb {
    font-size: 13px;
    margin-bottom: 8px;
    line-height: 1.6;
  }


  /* ── B-9b. 所有子頁面圖片：覆蓋內聯 width 樣式 ─────────
     contact/*.htm 的地圖/停車圖等有 style="width:Xpx"，
     需 !important 才能覆蓋 inline style                   ── */
  .sub-box .content img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 地圖容器 div（有 style="width:630px; height:400px" 等） */
  #map-canvas {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* 聯絡頁面：地址 / 電話 / 電郵文字區塊 */
  .sub-box .content .mb15 {
    line-height: 1.8;
    font-size: 15px;
    padding: 0 2px;
  }

  .sub-box .content .mb15 h2 {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .sub-box .content .mb15 strong {
    display: inline;
  }

  /* 資源下載：大型下載按鈕區（.btnlist, .btnlist-large 已在 B-12 處理） */
  /* 確保 span 下載按鈕不溢出 */
  .sub-box span.btndoc,
  .sub-box span.btnpdf,
  .sub-box span.btnmp3,
  .sub-box span.btnmp4,
  .sub-box span.btnppt,
  .sub-box span.btnxls,
  .sub-box span.btnjpg {
    max-width: calc(100% - 20px) !important;
    width: auto !important;
    min-width: 140px;
  }

  /* ── B-10. 牧者介紹 (.pastors) ─────────────────────── */
  /* 小頭像浮動於左，文字繞排 */
  .sub-box .content .pastors {
    margin-left: 0 !important;
    margin-bottom: 16px;
  }

  .sub-box .content .pastors strong {
    display: block;
    font-size: 16px;
    margin-bottom: 6px;
    color: #47194b;
  }

  .sub-box .content .pastors img {
    float: left !important;
    width: 88px !important;
    height: auto !important;
    margin: 0 12px 8px 0 !important;
    border-radius: 4px;
  }

  .sub-box .content .pastors p,
  .sub-box .content .pastors ul {
    float: none !important;
    width: auto !important;
    overflow: hidden;   /* 觸發 BFC，文字自動繞圖 */
    font-size: 14px;
    line-height: 1.7;
  }

  .sub-box .content .pastors ul li {
    margin-left: 14px;
    list-style: disc;
    font-size: 14px;
  }

  /* ── B-11. 大事記圖文列表 ───────────────────────────── */
  .sub-box .content .list-with-img li {
    width: 100% !important;
    display: block !important;
    margin: 12px 0 !important;
  }

  .sub-box .content .list-with-img li img {
    float: left;
    width: 100px !important;
    height: auto !important;
    margin: 0 12px 8px 0 !important;
  }

  /* ── B-12. 下載按鈕清單 ─────────────────────────────── */
  .sub-box .content .btnlist li,
  .sub-box .content .btnlist-large li {
    float: none !important;
    width: 90% !important;
    max-width: 320px;
    margin: 6px auto !important;
  }
  .sub-box .content .btnlist ul.clearfix,
  .sub-box .content .btnlist-large ul.clearfix {
    display: block !important;
  }

  /* ── B-13. 聚會時間 / 小組覽表 重新排版（無橫向滾動）── */

  /* 共用：取消固定欄寬 */
  .sub-box .content table[width="96%"] {
    width: 100% !important;
    margin: 0 0 14px 0 !important;
  }

  /* ── B-14. 特別講題 & 主日錄音 表格（.service）────────
     每個 <table> 代表一個事件：
       th  = 標題 + 講員（全寬）
       td  = 各按鈕（flex 橫排換行）
       tr.player-box = 音訊播放器列（JS 控制顯隱）
     ──────────────────────────────────────────────────── */
  table.service {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    border-radius: 6px;
    margin-bottom: 6px !important;
  }

  table.service tbody {
    display: block;
    width: 100%;
  }

  table.service tr {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 6px 4px;
  }

  /* 題目 + 講員（th）：全寬，白底卡片效果 */
  table.service th {
    flex: 1 1 100%;
    display: block;
    width: 100% !important;
    min-width: 0;
    white-space: normal !important;
    font-size: 14px !important;
    font-weight: normal !important;
    padding: 10px 12px 8px !important;
    line-height: 1.55;
    border-bottom: 1px solid #d8c4dc;
  }

  table.service th strong {
    display: block;
    font-size: 16px !important;
    font-weight: bold !important;
    color: #3a1040;
    line-height: 1.5;
    margin-bottom: 3px;
    white-space: normal !important;
  }

  table.service th br {
    display: none;
  }

  /* 按鈕欄（td）：有連結的才顯示，空白 &nbsp; 格隱藏 */
  table.service td {
    flex: 0 0 auto;
    display: block;
    padding: 5px 4px !important;
    min-width: 0;
    width: auto !important;
  }

  /* 隱藏空白佔位 td（含 &nbsp; 但無 <a> 連結） */
  table.service td:not(:has(a)) {
    display: none !important;
  }

  /* 按鈕尺寸：足夠大讓手指點擊（min 44px 高度原則），
     較長標籤（如「講題6(單身)」）允許換行 */
  table.service span.btnmp3,
  table.service span.btnmp4,
  table.service span.btnpdf,
  table.service span.btndoc,
  table.service span.btnppt,
  table.service span.btnxls {
    width: auto !important;
    min-width: 76px !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 13px !important;
    text-indent: 3.0em !important;
    padding-right: 6px !important;
    margin: 4px 3px !important;
    background-position: 6px center !important;
    white-space: nowrap !important;   /* 按鈕標籤本身不換行 */
    display: inline-block !important;
  }

  /* 覆蓋 inline style="white-space:nowrap" 在 span 以外的元素 */
  table.service td a {
    display: inline-block;
  }

  /* 特別講題頁日期標籤（.content 的直接子 <strong>） */
  .sub-box .content > strong {
    display: block;
    font-size: 14px;
    font-weight: normal;
    color: #888;
    letter-spacing: 0.04em;
    margin: 20px 0 4px 2px;
    padding-bottom: 3px;
    border-bottom: 1px solid #e8dcea;
  }

  /* 播放器列（JS 動態加 .active） */
  table.service tr.player-box {
    display: none !important;         /* 預設隱藏 */
    /*width: 100%;*/
  }

  table.service tr.player-box.active {
    display: flex !important;         /* 覆蓋 style.css 的 display:table-row */
    flex-wrap: wrap;
    padding: 6px 10px;
    background: rgba(89,31,94,0.06);
    border-top: 1px solid #d8c4dc;
  }

  table.service tr.player-box.active td {
    display: block !important;
    flex: 1 1 100%;
    width: 100% !important;
    overflow: hidden;
    font-size: 14px;
    padding: 4px 0 !important;
  }

  table.service tr.player-box.active a.download {
    display: inline-block;
    margin-top: 6px;
    font-size: 14px;
    color: #591f5e;
    font-weight: bold;
  }

  /* ── B-15. 教會資源 / 小組資源 下載表格 (.download, .filelist) ──
     每個 <tr> = 一個可下載檔案：
       th  = 檔案名稱（全寬）
       td  = 下載按鈕（.btndoc / .btnpdf / .btnppt / .btnxls / .btnmp3…）
     ──────────────────────────────────────────────────────────────── */
  table.download,
  table.filelist {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    margin-bottom: 10px !important;
  }

  table.download tbody,
  table.filelist tbody {
    display: block;
    width: 100%;
  }

  table.download tr,
  table.filelist tr {
    display: flex;
    flex-wrap: wrap;
    padding: 8px 0 6px;
    border-bottom: 1px solid #e4d6e8;
    align-items: flex-start;
    height: auto;
  }

  /* 表頭列（如「檔案名稱 / 下載」標題行）：視覺淡化 */
  table.download tr.head,
  table.filelist tr.head,
  table.download thead tr,
  table.filelist thead tr {
    border-bottom: 2px solid #c8b4cc;
    padding: 4px 0;
  }

  /* 檔案名稱（th）：全寬，清晰標題 */
  table.download th,
  table.filelist th {
    flex: 1 1 100%;
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    font-size: 14px !important;
    font-weight: bold;
    white-space: normal !important;
    line-height: 1.55;
    padding: 2px 8px 6px !important;
    color: #2a0a30;
  }

  /* 按鈕欄（td）：橫排排列 */
  table.download td,
  table.filelist td {
    flex: 0 0 auto;
    display: block;
    width: auto !important;
    padding: 2px 4px !important;
  }

  /* 隱藏空白佔位 td */
  table.download td:not(:has(a)):not([colspan]),
  table.filelist td:not(:has(a)):not([colspan]) {
    display: none !important;
  }

  /* 下載按鈕尺寸（所有類型統一處理） */
  table.download span.btnmp3,  table.filelist span.btnmp3,
  table.download span.btnmp4,  table.filelist span.btnmp4,
  table.download span.btnpdf,  table.filelist span.btnpdf,
  table.download span.btndoc,  table.filelist span.btndoc,
  table.download span.btnppt,  table.filelist span.btnppt,
  table.download span.btnxls,  table.filelist span.btnxls,
  table.download span.btnjpg,  table.filelist span.btnjpg {
    display: inline-block !important;
    min-width: 72px !important;
    width: auto !important;
    height: 36px !important;
    line-height: 36px !important;
    font-size: 15px !important;
    text-indent: 2.6em !important;
    padding-right: 6px !important;
    margin: 3px 3px !important;
    background-position: 6px center !important;
    white-space: nowrap !important;
  }

  /* ── B-15b. 聯絡頁 & 資源下載頁 ────────────────────────
     覆蓋 inline style（map-canvas、各種圖片固定寬度）
     ──────────────────────────────────────────────────── */

  /* 地圖容器（inline style="width:630px; height:400px" 等） */
  #map-canvas {
    width: 100% !important;
    height: 260px !important;
    overflow: hidden;
  }

  #map-canvas img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 所有 .content 內圖片：覆蓋 inline style 的固定寬度
     !important 優先於 inline style */
  .sub-box .content img {
    max-width: 100% !important;
    height: auto !important;
    box-sizing: border-box;
  }

  /* 聯絡頁的聯絡資訊文字排版 */
  .sub-box .content div.mb15,
  .sub-box .content div.mb10 {
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 14px !important;
  }

  .sub-box .content div.mb15 strong,
  .sub-box .content div.mb10 strong {
    display: inline;
    font-weight: bold;
  }

  /* 大事記 <details> / <summary> 互動折疊樣式 */
  .sub-box .content details {
    margin-bottom: 14px;
    border: 1px solid #e0cfe4;
    border-radius: 6px;
    overflow: hidden;
  }

  .sub-box .content details summary {
    font-size: 15px;
    font-weight: bold;
    padding: 10px 14px;
    cursor: pointer;
    background: rgba(89,31,94,0.08);
    list-style: none;    /* 隱藏預設三角 */
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* 自訂展開/收起箭頭 */
  .sub-box .content details summary .icon::after {
    content: "›";
    font-size: 20px;
    display: inline-block;
    transition: transform 0.2s;
  }

  .sub-box .content details[open] summary .icon::after {
    transform: rotate(90deg);
  }

  .sub-box .content details > p,
  .sub-box .content details > div {
    padding: 10px 14px;
    font-size: 14px;
    line-height: 1.8;
  }

  /* 資源下載：奉獻頁面 */
  .sub-box .content p strong {
    display: block;
    margin-top: 12px;
    font-size: 18px;
    color: #47194b;
    height: auto;
  }

  .sub-box .content .list-with-img p {
    padding-bottom: 10px;
    border-bottom: 1px dashed #e0cfe4;
  }

  .sub-box .content .list-with-img p:last-child {
    border-bottom: none;
  }

  .sub-box .content .list-with-img p strong {
    font-size: 15px;
    height: 20px;
    margin-bottom: 0;
  }

  .sub-box .content .list-with-img li {
    border-bottom: 1px solid #aaaaaa;
    padding-top: 10px;
    padding-bottom: 20px !important;
    margin-bottom: 30px !important;
  }

  .sub-box .content .list-with-img li p br {
    display: none;
  }

  /* ── B-16. 頁腳 ────────────────────────────────────── */
  .footernav {
    width: 90% !important;
    height: auto !important;
    line-height: 1.8 !important;
    padding: 8px 12px !important;
    font-size: 13px;
    text-align: center;
  }

  .copyright {
    font-size: 11px;
    padding: 4px 0 8px;
    text-align: center;
  }

  .jwplayer {
    min-height: 100% !important;
  }
} /* end @media (max-width: 767px) */