/*!
Theme Name: design_hu 2025
Theme URI: https://www.design-hu.com/
Author: design_hu by Peter Chen
Author URI: https://www.design-hu.com/
Description: Description
Version: 1.0.0
Tested up to: 6.0
Requires PHP: 8.0
*/

/* ================================================================= */
/* header 導航列 */
#menu-header-nav,
#menu-header-nav-en {
  display: flex;
  gap: 24px;
}

/* 隱藏子選單 */
.designhuHeader .sub-menu {
  position: absolute;
  top: 32px;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  z-index: 50;
  padding: 10px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hover 時顯示子選單 */
.designhuHeader li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 確保父層 li 是相對定位 */
.designhuHeader li {
  position: relative;
}
/* 子選單項目的樣式 */
.designhuHeader .sub-menu li a {
  display: block;
  padding: 8px 20px;
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .designhuHeader .menu-item a:hover,
  .designhuHeader .sub-menu li a:hover {
    color: #ff5100;
  }
}
/* 開發流程 - 客製化包裝 */
.circle-bg {
  display: flex;
  width: 100px;
  height: 100px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  aspect-ratio: 1/1;
  border-bottom: 1000px;
  background-color: #ffffff;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);
  border-radius: 1000px;
}

/* 麵包屑 */
@media (max-width: 1024px) {
  .bread {
    padding: 8px 20px;
  }
}
@media (min-width: 1280px) {
  .bread {
    padding: 8px 0px;
  }
}
@media (min-width: 1920px) {
  .bread {
    padding: 8px 150px;
  }
}
.bread {
  margin-bottom: 60px;
}
/* 生產能力-機具設備 */
.equipment-block {
  width: 216px;
  height: 160px;
  display: flex;
  padding: 30px 8px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);
}

.material-block {
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.15);
}

/* 關於我們 - 發展與沿革 */
.about-block {
  width: 100%;
  padding: 30px;
  display: inline-flex;
  flex-direction: column;
  gap: 30px;
  background-color: #f2f2f2;
}
.about-big-block {
  width: 100%;
  padding: 30px;
  display: inline-flex;
  gap: 30px;
  background-color: #f2f2f2;
}
/* 社會責任 - 選項方塊樣式 */
.res-block {
  width: 100%;
  padding: 16px 32px;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  color: #ff5100;
  border: 1px solid #ff5100;
  border-radius: 5px;
}

/* 聯絡我們 - 資訊樣式  */
.contact-block {
  display: flex;
  padding: 15px 30px;
  justify-content: center;
  align-items: center;
  gap: 15px;
  align-self: stretch;
}

/* 包裝形式 - 樣式 */
.packing-block {
  width: 263px;
  height: 244px;
  border: 1px solid #f2f2f2;
}
@media (min-width: 1024px) {
  .packing-block:hover {
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.25);
  }
}

.footer-block {
  display: flex;
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding: 10px 20px;
  justify-content: center;
  align-items: center;
  gap: 5px;
  align-self: stretch;
  background-color: #f2f2f2;
}

.btn1 {
  width: 10%;
  height: 6%;
  background-color: #ff5100;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

@media (min-width: 1024px) {
  .btn1:hover {
    opacity: 1;
  }
}

/* --- 常見問題 --- */
.active-faq {
  background-color: #ff5100;
}
.faq-btn.active-faq p,
.faq-btn.active-faq p span {
  color: #ffffff;
}
.faq-btn {
  transition: all 0.3s ease;
}
.faq-group {
  animation: faqFadeIn 0.5s ease;
}
@keyframes faqFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- 品質控制切換 ---- */
.tab-btn p {
  color: #4d4d4d;
}

/* Active 樣式：左邊框 2px 橘色，不透明度 1 */
.tab-btn.active-tab {
  border-left: 2px solid #ff5100;
  opacity: 1 !important;
}

.tab-btn.active-tab p {
  font-weight: bold; /* 選配：增加一點辨識度 */
}

/* 內容切換效果 */
.tab-content.hidden {
  display: none;
}

.tab-content:not(.hidden) {
  animation: tabFadeIn 0.5s ease-out forwards;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ---- 品質控制切換 end ---- */

.btn2 {
  display: flex;
  padding: 16px 32px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  border-radius: 5px;
  background: #ff5100;
}

/* ---- 塑料皮料介紹 圖片swiper 點點樣式 ----*/
.material-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 9999px;
  transition: all 0.3s;
  /* 預設：空心樣式 */
  background: transparent;
  border: 1px solid #ff5100;
  opacity: 1;
}

.material-pagination .swiper-pagination-bullet-active {
  /* 啟動：實心樣式 */
  background: #ff5100 !important;
  border: none;
}

/* --- 匯集頁 pagination 樣式 ---  */
.page-numbers {
  width: 30px;
  height: 30px;

  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #f2f2f2;
  color: #4d4d4d;
  line-height: 120%;
  font-weight: 500;
}
/* 當前頁 */
.page-numbers.current {
  background-color: #1a1a1a;
  color: #ffffff;
  font-weight: 600;
}
.prev,
.next {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border: 1px solid #f2f2f2;
}

.hu-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hu-pagination .page-numbers.disabled {
  pointer-events: none;
  background-color: #0551a31a;
  opacity: 0.6;
  border: 1px solid #f2f2f2;
}
/* --- 匯集頁 pagination 樣式 end --- */

/* --- header 手機版漢堡線 --- */
.hamberger .line {
  display: block;
  width: 29px;
  height: 1px;
  background-color: #ff5100;
  border-radius: 9999px; /* round cap */
  transition: all 0.3s ease;
}

/* active 時變成 X */
.hamberger.active .top {
  transform: translateY(11px) rotate(45deg);
}

.hamberger.active .middle {
  opacity: 0;
}

.hamberger.active .bottom {
  transform: translateY(-11px) rotate(-45deg);
}
/* --- header 手機版漢堡線 end--- */

/* --- header 手機版選單 --- */
.web_nav_m.open {
  transform: translateX(0);
  opacity: 1;
}

/* 手機選單背景模糊 */
.menu-backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0, 0, 0, 0.4); /* 背景遮罩 */
}

.no-scroll {
  overflow: hidden;
  width: 100%;
}

/* ---  展期歷史 圖片 swiper  --- */
@media (min-width: 1024px) {
  .ex_prev:hover path,
  .ex_next:hover path {
    stroke: #ff5100;
  }
}
/* Swiper Pagination 基礎樣式 */
.exhibition-pagination .swiper-pagination-bullet {
  width: 50px;
  height: 5px;
  border-radius: 0; /* 長方形 */
  background: #ffffff30;
  opacity: 1;
  transition: all 0.3s ease;
}

/* Active 狀態 */
.exhibition-pagination .swiper-pagination-bullet-active {
  width: 50px;
  background: white;
}

/* 修正 Swiper 容器內箭頭 */
.ex_prev,
.ex_next {
  width: 30px;
  height: 30px;
}

/* Sassy_Social_Share 社群 */
.heateor_sss_sharing_ul {
  display: flex;
  gap: 20px;
}

/* -- 關於我們 員工關懷 橘線 -- */
@media (min-width: 1024px) {
  .orange-line-content {
    position: relative;
  }
  .orange-line-content::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 440px;
    width: 6px;
    height: 100px;
    background-color: #ff5100;
  }

  .orange-right-content {
    position: relative;
  }
  .orange-right-content::before {
    content: "";
    position: absolute;
    right: 17%;
    bottom: -180px;
    width: 6px;
    height: 100px;
    background-color: #ff5100;
  }
}
/* -- 關於我們 員工關懷 橘線 end -- */

/* 預設隱藏所有內容 */
.res-tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* 顯示啟動中的內容 */
.res-tab-content.active {
  display: flex;
  flex-direction: column;
  /* gap: 100px; */
  opacity: 1;
}

/* 按鈕選中樣式 */
.res-tab-btn.active {
  background-color: #ff5100;
}

.res-tab-btn.active p {
  color: white;
}

/* 關於我們 - 發展與沿革 動畫 */
/* 初始狀態：右側內容滑入前 */
.reveal-left {
  transform: translateX(-40px);
  transition: all 0.8s ease-out;
}
.reveal-right {
  transform: translateX(40px);
  transition: all 0.8s ease-out;
}

/* 啟動滑入動畫 */
.history-content.revealed {
  opacity: 1 !important;
  transform: translateX(0);
}

/* 顏色變換邏輯 (由 JS 控制 active-color) */
.active-color h2 {
  color: #ff5100 !important;
}
.active-color .history-line {
  background-color: #ff5100 !important;
}

/* 基礎過渡效果 */
.history-line,
h2 {
  transition: all 0.5s ease;
}

.home-intro-section {
  position: relative;
  /* 利用 CSS 漸層產生垂直細線 */
  background-image: linear-gradient(to right, #f2f2f2 1px, transparent 1px);
  background-size: 25% 100%; /* 這會產生 4 條均分的垂直線 */
}
/* 首頁 橘線 */
.title-with-decor::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  width: 10px;
  height: 100%;
  background-color: #ff5100;
  z-index: 20;
}

.title-with-decor::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 0;
  width: 10px;
  height: 100%;
  background-color: #ff5100;
  z-index: 20;
}

.home-line-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 0px;
  width: 10px;
  height: 100px;
  background-color: #ff5100;
  z-index: 20;
}

.home-pro-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -12px;
  width: 10px;
  height: 64px;
  background-color: #ff5100;
  z-index: 20;
}
/* 首頁 橘線 */

/* === 新聞文章樣式 === */
/* 純內容表格 */
.pure-content table {
  width: 100%;
}

.pure-content thead {
  border-bottom: solid 3px;
}

.pure-content th {
  border: solid 1px;
}

.pure-content td {
  border: solid 1px;
  padding: 8px;
}
.pure-content h2 {
  color: black;
  font-size: 24px;
  font-weight: 900;
  line-height: 1.3em;
}
.pure-content h3 {
  color: black;
  font-size: 20px;
  font-weight: 900;
  line-height: 1.3em;
}

/* 純內容表格 ------ */

.pure-content p,
.main-section p,
.bg-block {
  margin-bottom: 1.25em;
}
/* 純內容 列表 - 讓數字列表重新顯示數字 */
.pure-content ol,
.pure-content ul {
  list-style-type: revert !important;
  margin-left: 2rem !important; /* 給數字一點留白空間 */
  margin-bottom: 1.5rem !important; /* 給數字一點留白空間 */
  padding-left: 0.5rem !important;
}
.pure-content li {
  line-height: 2;
}
/* 新聞文章 - 公益野餐 連結 */
.picnic-link {
  transition: color 0.3s ease;
}
@media (min-width: 1024px) {
  .picnic-link:hover {
    color: #ff5100;
  }
}
/* 參展歷史 - 純內容區塊樣式 */
.main-section h4,
.pure-content h4 {
  font-size: 24px;
  line-height: 1.2em;
  font-weight: 700;
  color: black;
}
/* .main-section img {
  width: 100%;
} */

/* =========== */
/* 文章內文 FAQ 動畫 */
.faq-content-wrapper {
  max-height: 0;
  overflow: hidden;
}

.faq-section.active .faq-content-wrapper {
  max-height: 1000px; /* 或用 JS 算 */
}

/* arrow 預設 -90deg */
.faq-arrow {
  transform: rotate(-90deg);
}

/* 展開 倒三角*/
.faq-section.active .faq-arrow {
  transform: rotate(0deg);
}

/* 文章目錄 */
.toc-wrapper {
  border-radius: 8px;
  border: solid 1px #333;
}
.toc-wrapper ol,
.toc-wrapper ul {
  margin-left: 48px;
  list-style-type: revert !important;
}

.toc-wrapper li {
  padding-top: 10px;
  color: #54595f;
}
.toc-wrapper a {
  border-bottom: 1px solid #54595f;
}

.toc-title {
  font-size: 20px;
}