/* 官網細節統一 v1.0（115/11/13）：與會員專區、會務後台同一套公會藍金；只調外觀，不改選單內容與連結。
   首頁（內嵌樣式）與內頁（site.css）都在最後載入本檔，兩邊看起來才會一樣。 */

/* 1. 頂端細帶：圖示與文字留間距（內頁沒載 Bootstrap，me-1 原本沒作用）；右側 LINE＋金色「會員專區」 */
.me-1 { margin-right: .25rem; }
#topbar .contact-info a { display: inline-flex; align-items: center; }
#topbar .social-links { display: flex; align-items: center; gap: 8px; }
#topbar .social-links a.tb-member { background: var(--accent); color: var(--primary-dark); font-weight: 700; }
#topbar .social-links a.tb-member:hover { background: var(--accent-light); color: var(--primary-dark); }

/* 2. 首頁輪播貼齊頂端列與快捷列（原本套到全站 section 的上下 56px 留白，看起來像兩條空白帶） */
#hero { padding: 0; }

/* 3. 得獎名單格：長名字可換行，不撐出格子（著色比賽頁平板寬會左右滑動） */
.name-grid span { white-space: normal; }

/* 3b. 平板橫放、小筆電（993～1279 寬）：「活動花絮」的下拉選單會超出右緣 7px、整頁可左右滑動 → 比照「會務服務」靠右展開 */
@media (min-width: 993px) and (max-width: 1279.98px) {
  #navbar > ul > li:nth-last-child(2) > ul { left: auto; right: 0; }
}

/* 4. 手機、平板：選單鈕（☰）移到最左、加外框，與會員專區、會務後台一致；關閉鈕（✕）同在左上 */
@media (max-width: 992px) {
  .header-inner { justify-content: flex-start; gap: 10px; }
  .mobile-nav-toggle { order: -1; display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; line-height: 1;
    border: 1px solid var(--border); border-radius: 8px; flex-shrink: 0; }
  .mobile-close { right: auto; left: 20px; }
}

/* 5. 手機：頂端細帶排成一行（Email 只留圖示、LINE 只留「LINE」），標誌縮到放得下 */
@media (max-width: 575.98px) {
  #topbar .topbar-inner { padding: 0 12px; gap: 8px; }
  #topbar .contact-info { display: flex; align-items: center; white-space: nowrap; }
  #topbar .contact-info span { margin-right: 14px; }
  #topbar .tb-txt { display: none; }
  #topbar .social-links { gap: 6px; }
  #topbar .social-links a { padding: 3px 8px; white-space: nowrap; }
  .header-inner { padding: 0 12px; }
  .logo-icon { height: auto; max-height: 44px; max-width: calc(100vw - 90px); }

  /* 6. 公會公告：表格改成卡片（第一行日期＋刊登人、標題整行），比照人力資源中心 */
  .ann-panel table, .ann-panel tbody { display: block; width: 100%; }
  .ann-panel thead { display: none; }
  .ann-panel tbody > tr:not(.announce-desc-row) { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 12px 4px; border-bottom: 1px solid var(--border); }
  .ann-panel tbody > tr > td { display: block; padding: 0; border: 0; background: transparent; }
  .ann-panel tbody > tr:not(.announce-desc-row) > td:nth-child(1) { grid-column: 1; grid-row: 1; font-size: .85rem; color: var(--text-light); }
  .ann-panel tbody > tr:not(.announce-desc-row) > td.ann-poster-cell { grid-column: 2; grid-row: 1; font-size: .85rem; color: var(--text-light); font-weight: 400; }
  .ann-panel tbody > tr:not(.announce-desc-row) > td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 1rem; }
  .ann-panel tbody > tr.announce-desc-row:not([hidden]) { display: block; }
  .ann-panel tbody > tr:hover td { background: transparent; }
}