/* File: src/css/specific/faqs.css
   Purpose: FAQs page styling to match site scale & vibe
*/

:root { --content-pad: 20px; }

.content.faqs-page {
  padding: var(--content-pad);
  font-size: clamp(1rem, 1.05rem + 0.2vw, 1.15rem);
}

.faqs-wrap {
  max-width: 980px;
  margin: 0 auto;
  line-height: 1.65;
}

.faqs-wrap h2 {
  font-size: clamp(1.6rem, 2.2vw, 2.1rem);
  margin: 0 0 12px;
}

/* FAQ items */
.faq {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 0;
}
.faq > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  outline: none;
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: "▸";
  float: right;
  transform: rotate(0deg);
  transition: transform .15s ease;
  opacity: .85;
}
.faq[open] > summary::after { transform: rotate(90deg); }
.faq p { margin: 8px 0 4px; }

/* CTA row */
.faqs-cta {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin: 18px 0 6px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.18);
  text-decoration: none;
  line-height: 1.1;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.28);
  font-weight: 600;
}
.btn-ghost {
  background: transparent;
  border-color: rgba(255,255,255,.18);
}

/* Wide screens (match Info/Docs scale) */
@media (min-width: 1440px) {
  .faqs-wrap { max-width: 1100px; }
  .content.faqs-page { font-size: clamp(1.08rem, 0.8rem + 0.5vw, 1.35rem); }
}
@media (min-width: 1920px) {
  .faqs-wrap { max-width: 1280px; }
  .content.faqs-page { font-size: clamp(1.12rem, 0.9rem + 0.6vw, 1.45rem); }
}
@media (min-width: 2560px) {
  .faqs-wrap { max-width: 1600px; }
  .content.faqs-page { font-size: clamp(1.2rem, 0.95rem + 0.8vw, 1.6rem); }
}
@media (min-width: 3840px) {
  .faqs-wrap { max-width: 1800px; }
  .content.faqs-page { font-size: clamp(1.28rem, 0.9rem + 1.2vw, 1.9rem); }
}