/* ================= FAQ SECTION (ISOLATED) ================= */

/* Root container */
.faq-section{
  max-width:800px;
  margin:80px auto;
  padding:40px 24px;

  /* 🔒 Isolation fix */
  background:#ffffff;
  color:#222222;
  isolation:isolate;

  border-radius:6px;
}

/* Reset inheritance inside FAQ */
.faq-section *,
.faq-section *::before,
.faq-section *::after{
  box-sizing:border-box;
  color:inherit;
}

/* ================= HEADER ================= */
.faq-section .faq-header{
  text-align:center;
  font-family:'Playfair Display', serif;
  font-size:36px;
  font-weight:700;
  color:#b8860b;
  margin-bottom:40px;
}

/* ================= ITEM ================= */
.faq-section .faq-item{
  border-bottom:1px solid #dddddd;
  padding:20px 0;
  position:relative;
}

/* Hide radio input safely */
.faq-section .faq-item input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* ================= QUESTION LABEL ================= */
.faq-section .faq-item label{
  display:block;
  font-family:'Open Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight:600;
  font-size:20px;
  line-height:1.4;
  cursor:pointer;
  position:relative;
  padding-right:32px;
  color:#222222;
}

/* Plus icon */
.faq-section .faq-item label::after{
  content:"+";
  position:absolute;
  right:0;
  top:0;
  font-size:26px;
  line-height:1;
  transition:transform .3s ease;
}

/* Rotate icon on open */
.faq-section .faq-item input:checked + label::after{
  transform:rotate(45deg);
}

/* ================= ANSWER ================= */
.faq-section .faq-content{
  max-height:0;
  overflow:hidden;
  transition:max-height .45s ease;
  font-size:16px;
  line-height:1.6;
  color:#555555;
}

/* Open state */
.faq-section .faq-item input:checked ~ .faq-content{
  max-height:500px;
  margin-top:10px;
}

/* Paragraph reset */
.faq-section .faq-content p{
  margin:0;
}

/* ================= INTERACTION & ACCESSIBILITY ================= */
.faq-section .faq-item label:hover,
.faq-section .faq-item label:focus-visible{
  color:#b8860b;
  outline:none;
}

/* ================= RESPONSIVE ================= */
@media (max-width:600px){
  .faq-section{
    margin:60px 16px;
    padding:32px 18px;
  }

  .faq-section .faq-header{
    font-size:28px;
  }

  .faq-section .faq-item label{
    font-size:18px;
  }
}