/* 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-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; 
 }