/* FAQ styles — fully responsive across breakpoints (v3) */
:root{
  --faq-panel: var(--color-2, #0f141c);
  --faq-border: var(--color-3, #1b2333);
  --faq-muted: #cfd6e4;
}

.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}

.faq-section{margin-top: min(6rem, 12vh)}
@media (max-width: 768px){ .faq-section{margin-top: 4.5rem} }

/* Wrapper grid */
.faq-container{
  display:grid !important;
  gap:1.25rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "index"
    "content";
  align-items:start;
  width:100%;
}
.faq-index{ grid-area: index; min-width:0; }
.faq-content{ grid-area: content; min-width:0; }

/* Hide sidebar index for laptop widths to prevent clutter */
@media (max-width: 1439px){
  .faq-container{
    grid-template-areas: "content";
  }
  .faq-index{ display:none }
}

/* Desktop ≥1440px: show sticky sidebar */
@media (min-width: 1440px){
  .faq-container{
    grid-template-columns: 300px 1fr;
    grid-template-areas: "index content";
    gap: 1.5rem;
  }
  .faq-index{
    position: sticky;
    top: 86px;
    z-index: 2;
  }
}

.faq-index-inner{
  background: var(--faq-panel);
  border: 2px solid var(--faq-border);
  border-radius: 16px;
  padding: 1rem;
}
.faq-index h3{
  display:flex;gap:.5rem;align-items:center;
  color: var(--color-primary, #ff8600);
  margin: 0 0 .5rem 0;
  font-size: clamp(.9rem, 1.2vw, 1rem);
}
.faq-index nav a{
  display:block;
  padding:.5rem .75rem;
  border-radius:10px;
  color:#fff;
  font-size: clamp(.9rem, 1.1vw, .95rem);
  line-height:1.35;
}
.faq-index nav a:hover{ background: var(--color-3, #1b2333) }

/* Controls */
.faq-controls{
  display:grid;
  grid-template-columns: 1fr;
  gap:.75rem;
}
@media (min-width: 900px){
  .faq-controls{
    grid-template-columns: 1fr 220px;
    align-items:center;
  }
}
.faq-input, .faq-select{
  width:100%;
  background:#0f141c;color:#fff;
  border:2px solid var(--faq-border);
  border-radius:12px;padding:.75rem 1rem;outline:none
}
.faq-input:focus, .faq-select:focus{
  border-color:var(--color-primary, #ff8600);box-shadow:0 0 0 3px rgba(255,134,0,.2)
}

.faq-chips{ grid-column:1/-1;display:flex;gap:.5rem;flex-wrap:wrap }
.chip{
  background:#0f141c;border:2px solid var(--faq-border);color:#fff;
  padding:.4rem .8rem;border-radius:999px;cursor:pointer;font-size:.9rem;
}
.chip.active{ border-color: var(--color-primary, #ff8600) }

/* List */
.faq-list{
  display:grid;gap:12px;grid-template-columns: 1fr; /* default single column */
}
@media (min-width: 1024px){
  .faq-list{ grid-template-columns: 1fr 1fr } /* 2 columns on wide screens */
}

/* Stronger card selector to beat global styles */
details.faq-item{
  background:var(--faq-panel);
  border:2px solid var(--faq-border);
  border-radius:16px;
  overflow:hidden;
}
details.faq-item summary{
  list-style:none;cursor:pointer;padding:16px 18px;display:flex;gap:.75rem;align-items:flex-start;flex-wrap:wrap
}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item .chev{
  inline-size:18px;block-size:18px;border:1px solid var(--faq-border);border-radius:6px;display:grid;place-items:center;font-size:12px;color:#b8c2d3;flex:0 0 auto
}
details.faq-item[open] .chev{ transform: rotate(90deg) }
details.faq-item .question{font-weight:700;flex:1 1 60%;min-width:60%;font-size: clamp(.98rem, 1.1vw, 1.05rem)}
details.faq-item .cat{margin-left:auto;font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--faq-border);color:#bec8da;flex:0 0 auto}
details.faq-item .answer{padding:0 18px 18px;color:#e9eef5;font-size: clamp(.95rem, 1vw, 1rem)}
details.faq-item .answer p{margin:12px 0}
details.faq-item .answer ul{margin:8px 0 8px 18px}
details.faq-item .answer code, details.faq-item .answer kbd{background:#0c1118;border:1px solid var(--faq-border);padding:2px 6px;border-radius:6px}

/* Pager */
.faq-pager{display:flex;justify-content:center;padding:16px}
.faq-pager .btn{width:100%;max-width:340px}

/* Tiny screens guard */
@media (max-width: 374px){
  details.faq-item summary{ padding:14px 14px }
  details.faq-item .question{ min-width:100% }
  details.faq-item .cat{ margin-left:0; margin-top:.35rem }
}