.custom-table {
  border-collapse: collapse;
  width: 100%;
  /* 或其他合適的寬度 */
  table-layout: fixed;
  /* 固定表格布局 */
}

/* 所有格子先歸零樣式，統一處理 */

.custom-table td {
  padding: 8px;
  border: none;
  background: transparent;
  color: white;
}

/* 桌面預設：較小的寬度，不強制固定 */

.custom-table td:first-child {
  background-color: #f5f5f5;
  color: #333333;
  border: 5px solid #333333;
  text-align: center;
  font-weight: bold;
  white-space: nowrap;
  /* 避免斷行 */
  width: 10ch;
  /* 固定寬度，防止擴展 */
  min-width: 4ch;
  /* 讓第一欄有最小寬度，避免被壓縮 */
}

/* 第二欄：透明底、白字、無邊框 */

.custom-table td:nth-child(2) {
  background-color: transparent;
  color: white;
  border: none;
  width: auto;
  /* 第二欄自動調整 */
}

.highlight-text {
  color: white;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

/* 🎨 電腦版：強制每排固定3張 */

.wp-block-gallery.is-layout-flex,
.wp-block-gallery.wp-block-gallery-is-layout-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1em !important;
  justify-content: flex-start !important;
}

/* 所有圖片統一寬度（不論1張、2張或多張） */

.wp-block-gallery.is-layout-flex figure,
.wp-block-gallery.wp-block-gallery-is-layout-flex figure {
  flex: 0 0 calc((100% - (1em * 2)) / 3) !important;
  max-width: calc((100% - (1em * 2)) / 3) !important;
}

/* 🧩 手機版：兩張一排 */

@media (max-width: 768px) {
  .wp-block-gallery.is-layout-flex figure,
  .wp-block-gallery.wp-block-gallery-is-layout-flex figure {
    flex: 0 0 calc((100% - 1em) / 2) !important;
    max-width: calc((100% - 1em) / 2) !important;
  }
}

/*封面字體配置*/

.hero-title {
  font-size: 83px !important;
}

.hero-subtitle {
  font-size: 1.7rem !important;
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 46px !important;
    line-height: 1.2 !important;
  }

  .hero-subtitle {
    font-size: 1.2rem !important;
  }
}

/*配合畫面大小更換封面照*/

/* 手機版 */

@media (max-width: 480px) {
  .wp-block-cover.hero-cover img.wp-block-cover__image-background {
    display: none !important;
  }

  .wp-block-cover.hero-cover {
    background-image: url("https://tu.lib.thu.edu.tw/wp-content/uploads/2025/10/學思的足跡-1.png") !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* 平板版 */

@media (min-width: 481px) and (max-width: 1080px) {
  .wp-block-cover.hero-cover img.wp-block-cover__image-background {
    display: none !important;
  }

  .wp-block-cover.hero-cover {
    background-image: url("https://tu.lib.thu.edu.tw/wp-content/uploads/2025/10/封面_中等-1.png") !important;
    background-size: cover !important;
    background-position: center !important;
  }
}


/* -----------------------------
   行動裝置側邊圓點導覽
   ----------------------------- */
.dot-nav {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 9999;
}

/* 圓點（預設為中灰） */
.dot-nav .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #999; /* 淺灰 */
  transition: all 0.5s ease; /* 顏色、大小、陰影都平滑過渡 */
  position: relative;
  cursor: pointer;
}

/* active 圓點：放大＋變亮（白灰色） */
.dot-nav .dot.active {
  background: #f1f1f1; /* 幾乎白色 */
  transform: scale(1.5);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6); /* 柔光感 */
}

/* 文字提示（預設不顯示） */
.dot-nav .dot::after {
  content: attr(data-label);
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) scale(0.9);
  opacity: 0;
  white-space: nowrap;
  padding: 2px 6px;
  background: rgba(60, 60, 60, 0.9);
  color: #fff;
  font-size: 12px;
  border-radius: 4px;
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.2s ease 0.8s; 
  /* opacity 延遲 0.8s 再淡出，漸淡快 */
}

/* 點擊時顯示文字 */
.dot-nav .dot.show-label::after {
  opacity: 1;
  transform: translateY(-50%) scale(1);
  transition: transform 0.4s ease, opacity 0.2s ease 0s; 
  /* 顯示時立即顯示，不延遲 */
}

/* 到達區塊 active 後文字停頓再消失 */
.dot-nav .dot.active::after {
  opacity: 0;
  transform: translateY(-50%) scale(1.2);
  transition: transform 0.4s ease, opacity 0.2s ease 0.8s; 
  /* 先停 0.8s 再淡出，淡出快 */
}



/* -----------------------------
   小於 1025px 時隱藏漢堡選單，顯示 dot-nav
   ----------------------------- */
@media (min-width: 1025px) {
  .dot-nav {
    display: none !important; /* 桌機不顯示圓點 */
  }
}
@media (max-width: 1024px) {
  /* 隱藏 WP 漢堡選單 */
  .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation__responsive-container-open {
    display: none !important;
  }

  /* dot-nav 在右側顯示 */
  .dot-nav {
    display: flex !important;
    position: fixed;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    flex-direction: column;
    gap: 10px;
    z-index: 9999;
  }

  /* 文字提示縮小 */
  .dot-nav .dot::after {
    font-size: 10px;
    padding: 1px 4px;
    right: 16px;
  }
		
/* 文字區塊內推 */
/* 文字區塊內推 */
.wp-block-group.alignwide.is-layout-constrained.wp-container-core-group-is-layout-13.wp-block-group-is-layout-constrained {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* 段落 padding 增加 */
.wp-block-cover__inner-container.is-layout-constrained.wp-container-core-cover-is-layout-2.wp-block-cover-is-layout-constrained {
  padding-left: 15px !important;
  padding-right: 15px !important;
	}
}
/* -----------------------------
   my-block RWD 版面寬度與置中（僅限頁面）
   ----------------------------- */

.my-page-wrapper .my-block {
  width: 70%;
  margin: 0 auto;
  box-sizing: border-box;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .my-page-wrapper .my-block {
    width: 85%;
  }

  /* 只影響本頁的 alignfull */

  .my-page-wrapper .wp-container-core-group-is-layout-1 > .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  .my-page-wrapper .my-block {
    width: 95%;
  }

  /* 只影響本頁的 alignfull */

  .my-page-wrapper .wp-container-core-group-is-layout-1 > .alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* -----------------------------
   FancyBox iframe Lightbox 彈出視窗版面調整
   ----------------------------- */

/* 手機版：小於 768px */
@media (max-width: 767px) {
  #fancybox-wrap {
    width: 95% !important;
    height: 80% !important;
    left: 2.5% !important;
    top: 10% !important;
  }

  #fancybox-content iframe {
    width: 100% !important;
    height: 100% !important;
  }
}

/* 平板版、中螢幕：768px ~ 1365px */
@media (min-width: 768px) and (max-width: 1365px) {
  #fancybox-wrap {
    width: 85% !important;   /* 稍微縮小，不滿版 */
    height: 85% !important;
    left: 7.5% !important;
    top: 7.5% !important;
  }

  #fancybox-content iframe {
    width: 100% !important;
    height: 100% !important;
  }
}

/* 只針對 page_id=2557 的 Fancybox iframe 調整大小 */

#fancybox-frame[src*="page_id=2557"] {
  width: 822px !important;
  height: 320px !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
  border: none !important;
}

/* （可選）避免容器撐太大 */

#fancybox-wrap:has(#fancybox-frame[src*="page_id=2557"]),
#fancybox-content:has(#fancybox-frame[src*="page_id=2557"]) {
  width: auto !important;
  height: auto !important;
  max-width: 95vw !important;
  max-height: 90vh !important;
}

/* 只影響 page_id=2557 這個頁面 */

body.page-id-2557 main.wp-block-group.alignfull,
body.page-id-2557 .entry-content.my-page-wrapper {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
}

/* 讓 360 圖片區塊真正滿版顯示 */

body.page-id-2557 .wp-block-algori-360-image-block-algori-360-image {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
}

/* 讓 fancybox 視窗置中 */

#fancybox-wrap:has(#fancybox-frame[src*="page_id=2557"]) {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
}


/* -----------------------------
   全站套用段落分散對齊
   ----------------------------- */

p.justify-text,
.has-text-align-left.justify-text,
p.justify-text.has-text-align-left {
  text-align: justify !important;
  text-justify: inter-ideograph;
  /* 修正 Firefox 對齊 */
  text-align-last: left !important;
  word-break: normal;
  /* 改回自然斷行 */
  overflow-wrap: break-word;
  /* 長英文或網址仍可換行 */
}

/*僅footer套用*/

footer p.justify-text {
  text-align: center !important;
  /* 置中 */
  text-align-last: center !important;
  /* 最後一行也置中 */
}

/*僅"閱讀全文"套用*/

p.has-text-align-right.justify-text {
  text-align: right !important;
  /* 右對齊整段落 */
  text-align-last: right !important;
  /* 最後一行也右對齊 */
}

/* -----------------------------
   封面配置
   ----------------------------- */

/* 封面容器 */

.hero {
  position: relative;
  background: url('封面圖.jpg') center/cover no-repeat;
  height: 100vh;
  /* 滿版高度 */
  display: flex;
  color: white;
  padding: 0 1rem;
  /* RWD 避免貼邊 */
}

/* 文字容器 */

/* 移除 transform，改用 margin-top 調整 */

.hero-text {
  padding-top: 100px !important;
  padding-left: 40px !important;
  padding-right: 0 !important;
  max-width: 800px !important;
}

/* 平板版 */

@media (max-width: 1024px) {
  .hero-text {
    padding-top: 60px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* 手機版 */

@media (max-width: 640px) {
  .hero-text {
    padding-top: 20px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

/* 日期 */

.hero-date {
  font-size: clamp(1rem, 2vw, 1.1rem);
  font-family: 'Noto Serif TC', sans-serif;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}

/* 大標題 */

.hero-title {
  font-family: 'Noto Serif TC', serif;
  font-size: clamp(2rem, 5vw, 4rem);
  font-weight: 700;
  background: linear-gradient(45deg, #FFD700, #FFA500, #B8860B, #FFD700);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 小標題 / 說明文字 */

.hero-subtitle {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 400;
  line-height: 1.3;
}

/*連接字體*/

body {
  font-family: 'Noto Sans TC', sans-serif;
}

/* 特別的部分再覆蓋 */

.hero-title,
.hero-date {
  font-family: 'Noto Serif TC', serif;
}

/* -----------------------------
   封面標題游標互動設計
   ----------------------------- */
/* 主標題：只上浮，不發光 */
.hero-title {
  display: inline-block;
  transition: transform 0.35s ease;
}

.hero-title:hover {
  transform: translateY(-6px);
}

/* 日期與小標題：輕微上浮 */
.hero-subtitle,
.hero-date {
  display: inline-block;
  transition: transform 0.35s ease;
}

.hero-subtitle:hover,
.hero-date:hover {
  transform: translateY(-4px);
}



/* -----------------------------
   禁用圖片燈箱
   ----------------------------- */

/* 停用燈箱：讓帶有 no-lightbox 的區塊中的圖片不觸發 */

.no-lightbox [data-mwl-img-id] {
  pointer-events: none !important;
  cursor: default !important;
}

/* -----------------------------
   首頁按鈕寬度限定
   ----------------------------- */

.my-uniform-buttons .wp-block-button__link {
  background-color: #ffffff;       /* 常態白底 */
  color: #333333;                  /* 文字顏色 */
  padding-left: 2em;
  padding-right: 2em;
  display: inline-block;
  width: 35ch;
  max-width: 50ch;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* hover / focus / active */
.my-uniform-buttons .wp-block-button__link:hover,
.my-uniform-buttons .wp-block-button__link:focus,
.my-uniform-buttons .wp-block-button__link:active {
  background-color: #ff0000;  /* hover 紅色背景 */
  color: #ffffff;             /* hover 文字顏色 */
  outline: none;              /* 去掉焦點框 */
}



/* -----------------------------
   導覽列動態設定
   ----------------------------- */

@media (min-width: 769px) {
  .wp-block-navigation__container a {
    position: relative;
    color: #b8860b;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  .wp-block-navigation__container a:hover {
    background: linear-gradient(45deg, #FFD700, #FFA500, #B8860B, #FFD700);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transform: translateY(-2px);
  }
}

/* -----------------------------
   頁面設定
   ----------------------------- */
.page-bodytext {
	text-align: justify;
	text-shadow: 0px 0px 10px #000000;
	color: #DBDBDB;
	padding-right: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--40);
}

.page-heading {
	text-align: justify;
	text-shadow: 0px 0px 10px #000000;
	color: #605be5;
	padding-right: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--40);
}


@media (max-width: 1365px) {
  .page-padding {
		padding-right: var(--wp--preset--spacing--40);
		padding-left: var(--wp--preset--spacing--40);
  }
}

/* 圖片說明文字 */
.wp-element-caption {
  font-size: 0.9rem; /* 或 14px、16px 都可以 */
  line-height: 1.4;
  color: #DBDBDB; /* 可依需要調整文字顏色 */
  text-align: center; /* 保持置中 */
}

/* -----------------------------
   封面按鈕 hover 微動態效果
   ----------------------------- */
.wp-block-button__link {
  display: inline-block;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wp-block-button__link:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
}

.wp-block-button__link:active {
  transform: scale(0.98);
}


/* -----------------------------
   回到頂端按鈕 hover 動態效果
   ----------------------------- */

#to_top_scrollup {
  cursor: pointer;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#to_top_scrollup:hover {
  transform: scale(1.2);
  opacity: 0.9;
}

#to_top_scrollup:active {
  transform: scale(1.05);
  opacity: 1;
}


/* -----------------------------
   只在桌機啟用四主題區塊導覽列點擊後放大效果
   ----------------------------- */
@media (min-width: 769px) {
  .section-highlight {
		animation: sectionZoom 2.5s ease-out 0.6s; /* 0.6s 延遲 */
    z-index: 10;
    position: relative;
  }
}

@keyframes sectionZoom {
  0% {
    transform: scale(1);
    box-shadow: none;
  }
  40% {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}