/* FAQ 主頁面 */

.faq-container { 
  max-width: 100%;    
}

.faq-hero {
  background: url(/media/support/faq-mainpage.webp) center/cover no-repeat;
  position: relative;
  height: 380px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.faq-page-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0 1rem;
}

.faq-page-title h1 {  
  color: white;  
  margin: 0;
  text-align: center;
  font-weight: 500;
  z-index: 1;
  font-size: clamp(2.4rem, 2.1338rem + 2.6291vi, 3.2rem);
}

.faq-search {
  width: 40%;
  min-width: 300px;
  max-width: 600px;
  z-index: 2;
}

.faq-section h2 {
  text-align: center;

  padding-top: 2rem;
}

.faq-section h2 a {
  text-decoration: none;
}

.faq-section h2 a:after {
  content: '...';
}

.faq-section h2 a:hover {
  color: var(--blue);
}


/* 主頁容器佈局 */
.faq-content-wrapper {
  width: var(--boxed-width, 1400px); 
  margin: 0 auto; 
  max-width: 96%;
  box-sizing: border-box;
}

/* 3 欄網格 */
.faq-category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 40px;
}

@media (min-width: 992px) {
  .faq-category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}


/* 卡片容器 */
.faq-main-card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 2.4rem 6%;
  text-align: center;
  text-decoration: none;
  display: flex;
  flex-direction: column; /* 垂直排列 */
  align-items: center;
  transition: all 0.3s ease;
  height: 100%; /* 確保同列卡片等高 */
}

.faq-main-card:hover {
  border-color: var(--blue);
  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
  transform: translateY(-5px);
}

/* 資訊區塊也要設為 Flex，並撐開空間 */
.faq-card-info {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* 佔滿剩餘高度 */
  width: 100%;
}

.faq-card-info h3 {
  margin: 0 auto 1.6rem;
  font-size: 1.3rem;
  color: var(--gray-dark);
	font-weight: 600;
}

/* 描述文字 */
.faq-card-desc {
  max-height: 3em;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2; /* 未來的標準屬性 */
}

/* 圖示尺寸控制 */
.faq-card-icon {
  width: 64px;
  height: 64px;
  margin-bottom: 15px;
}

.faq-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}



/* 隱藏原生箭頭 */
.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::marker {
  content: '';
}


/* 問題的前方符號: Q */
.faq-question {
  position: relative;
  padding-left: 2rem;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  line-height: 1.6;
}

.faq-question::before {
  content: 'Q';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.3rem;
  height: 1.3rem;
  background: var(--gray);
  color: white;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

.faq-question:hover::before {
  background: var(--blue);
}


/* 展開時，Q 改成 A */
.faq-item[open] .faq-question::before {
  content: 'A';
  background: var(--blue);
}

.faq-list { 
  max-width: 800px; 
  margin: 0 auto; 
}

.faq-item .faq-question { 
  transition: background 0.3s; 
}

.faq-item .faq-question:hover { 
  cursor: pointer; 
  color: var(--blue); 
}

.faq-list .faq-item .faq-question { 
  margin: .8rem 0; 
  font-size: 1.12rem; 
  font-weight: 400; 
}

.faq-item[open] .faq-question { 
  font-weight: 500; 
  font-size: 1.24rem; 
  color: var(--blue); 
}

.faq-item[open] .faq-answer { 
  margin-bottom: 3rem; 
  padding: 0rem 2rem; 
}

.faq-answer p { 
  padding: .8rem 0; 
}

.faq-answer a:hover {
  color: var(--orange);
}

.faq-answer a {
  line-height: 1.6; 
  text-decoration-style: dotted;
  text-decoration-color: (--gray);
  text-underline-offset: 5px;
}

.faq-answer a:hover::after {
  content: '»';
  font-weight: 700;
  padding-left: .8rem;
}



/* 全部內容的連結 */

.faq-more {
  margin: 2rem auto 0;
  padding: .6rem 0;
  font-weight: 500;
  text-align: center;
  border: 2px solid var(--blue-sky);
  color: var(--blue);
  width: 160px;
  border-radius: 2rem;  
}

.faq-more a {
  text-decoration: none;
  display: block;
}

.faq-more:hover {
  background: var(--blue);
  border: 2px solid var(--blue);
  color: white;
}



/* 子分類 */

.faq-category-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 1rem;
  max-width: 860px;
  margin: 1rem auto;
  text-align: center;
}

.faq-category-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  background: rgba(229,247,254,.6);
  border-radius: 8px;
  padding: .8rem 0.5rem;
  transition: all 0.2s ease;
  margin-bottom: 3rem;
  opacity: .5;
}

.faq-category-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 10px rgba(0,0,0,.3);
  background: rgba(229,247,254,1);
  opacity: 1;
}

.faq-category-item img {
  width: auto;
  height: 50px;
  margin-bottom: 0.4rem;
}

.faq-category-item span {
  font-size: 0.8rem;
  font-weight: 400;
}

 .faq-category-item a {
   text-decoration: none;
 }


 /* 技術支援頁面 */

 .faq-category-prompt h2 {
  font-size: 1.8rem;
  font-weight: 500;
  text-align: center;
  margin: 3rem auto 0 !important; 
 }