/* =====================
   FAQ Page Specific Styles
   ===================== */

/* FAQ Sections */
.faq-section{margin-bottom:2rem}
.faq-category{margin-bottom:3rem;margin-top:2rem}

.faq-category:first-child{margin-top:3rem}

.faq-category h2{
  font-size:1.8rem;color:var(--forest);margin-bottom:1.5rem;
  padding-bottom:0.5rem;border-bottom:2px solid var(--orange)
}

/* FAQ Items */
.faq-item{
  background:var(--card);border:1px solid var(--bd);border-radius:var(--rad);
  margin-bottom:1rem;overflow:hidden;box-shadow:var(--sh)
}

.faq-question{
  width:100%;padding:1.5rem;text-align:left;font-weight:700;font-size:1.1rem;
  color:var(--ink);background:none;border:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  transition:background-color 0.2s ease
}
.faq-question:hover{background:color-mix(in hsl, var(--ink) 4%, transparent)}
.faq-question.active{
  background:color-mix(in hsl, var(--forest) 8%, transparent);color:var(--forest)
}

.faq-icon{
  width:20px;height:20px;transition:transform 0.3s ease
}
.faq-question.active .faq-icon{transform:rotate(180deg)}

.faq-answer{
  padding:0 1.5rem;max-height:0;overflow:hidden;
  transition:max-height 0.3s ease, padding 0.3s ease
}
.faq-answer.open{padding:1rem 1.5rem 1.5rem;max-height:500px}

.faq-answer p{
  margin:0;color:var(--ink2);line-height:1.7
}

/* =====================
   Footer Responsive Styles
   ===================== */
@media (max-width: 768px) {
  footer .container {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  
  footer h4 {
    font-size: 1rem !important;
  }
  
  footer h5 {
    font-size: 0.9rem !important;
  }
  
  footer ul {
    padding-left: 0 !important;
  }
}

@media (max-width: 480px) {
  footer .container {
    padding: 1.2rem 1rem !important;
    gap: 1.5rem !important;
  }
  
  footer h4 {
    font-size: 0.95rem !important;
  }
  
  footer p {
    font-size: 0.9rem !important;
  }
  
  footer ul {
    font-size: 0.9rem !important;
  }
}