/* =====================================================================
   CodeCraft — /faq (two-pane: sticky category index + accordion answers).
   Loaded only on /faq. Builds on services.css (.cc-svc tokens, .svc-faq
   accordion styles, .svc-cta, [data-reveal-svc], .cc-mag). Dark slate world.
   ===================================================================== */

/* ---------------------------------------------------------------------
   HERO
   ------------------------------------------------------------------- */
.faq-hero{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(120px,16vh,180px) var(--pad) clamp(24px,4vh,44px);
  max-width:min(var(--maxw),900px);
}
.faq-hero .svc-hl{ max-width:20ch; }
.faq-hero .svc-sub{ max-width:54ch; }

/* ---------------------------------------------------------------------
   TWO-PANE SHELL
   ------------------------------------------------------------------- */
.faq-shell{
  max-width:var(--maxw);margin-inline:auto;
  padding:clamp(10px,2vh,24px) var(--pad) clamp(50px,8vh,90px);
  display:grid;grid-template-columns:236px 1fr;gap:clamp(28px,5vw,64px);
  align-items:start;
}

/* Sticky category index */
.faq-nav{ position:sticky;top:104px;align-self:start; }
.faq-nav__label{ display:block;color:var(--mute);font-size:.66rem;margin-bottom:16px;padding-left:14px; }
.faq-nav ul{ list-style:none;display:flex;flex-direction:column;gap:2px; }
.faq-nav__link{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:11px;text-decoration:none;
  color:var(--mute);font-weight:600;font-size:.95rem;line-height:1.3;
  border:1px solid transparent;
  transition:color .25s,background .25s,border-color .25s;
}
.faq-nav__link:hover{ color:var(--bone);background:var(--glass); }
.faq-nav__dot{
  width:7px;height:7px;border-radius:50%;flex:none;
  background:color-mix(in srgb,var(--mute) 60%,transparent);transition:background .25s,box-shadow .25s;
}
.faq-nav__link.is-active{
  color:var(--bone);
  background:linear-gradient(120deg, color-mix(in srgb,var(--peri) 24%,transparent), var(--glass));
  border-color:color-mix(in srgb,var(--peri-bright) 30%,transparent);
}
.faq-nav__link.is-active .faq-nav__dot{ background:var(--accent);box-shadow:0 0 10px var(--accent); }

.faq-nav__cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;margin-left:14px;
  color:var(--accent);font-weight:600;font-size:.88rem;text-decoration:none;
}
.faq-nav__cta svg{ width:15px;height:15px;transition:transform .3s var(--ease-expo); }
.faq-nav__cta:hover svg{ transform:translateX(4px); }

/* ---------------------------------------------------------------------
   ANSWERS
   ------------------------------------------------------------------- */
.faq-main{ min-width:0;display:flex;flex-direction:column;gap:clamp(34px,5vh,52px); }
.faq-group{ scroll-margin-top:104px; }
.faq-group__title{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.4rem,2.6vw,2rem);color:var(--bone);margin-bottom:18px;
  padding-bottom:14px;border-bottom:1px solid var(--hairline);
}
.faq-group .svc-faq__list{ display:flex;flex-direction:column;gap:12px; }
/* .svc-faq__item / summary / plus / __a styles come from services.css */
.faq-item summary{ font-size:1.04rem; }

/* ---------------------------------------------------------------------
   RESPONSIVE — sidebar becomes a horizontal scroller above the answers
   ------------------------------------------------------------------- */
@media (max-width:860px){
  .faq-shell{ grid-template-columns:1fr;gap:22px; }
  .faq-nav{ position:sticky;top:64px;z-index:5;
    margin:0 calc(var(--pad) * -1);padding:10px var(--pad);
    background:color-mix(in srgb,var(--slate-base) 86%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:1px solid var(--hairline);
  }
  .faq-nav__label{ display:none; }
  .faq-nav ul{ flex-direction:row;gap:8px;overflow-x:auto;padding-bottom:2px;scrollbar-width:none; }
  .faq-nav ul::-webkit-scrollbar{ display:none; }
  .faq-nav__link{ white-space:nowrap;padding:9px 14px;font-size:.9rem;border:1px solid var(--hairline);background:var(--glass); }
  .faq-nav__link.is-active{ border-color:color-mix(in srgb,var(--peri-bright) 40%,transparent); }
  .faq-nav__cta{ display:none; }
}

/* ---------------------------------------------------------------------
   REDUCED MOTION
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .faq-nav__link,.faq-nav__dot,.faq-nav__cta svg{ transition:none; }
  html{ scroll-behavior:auto; }
}

/* =====================================================================
   LIGHT particles re-skin — group titles + side-nav text → ink/periwinkle;
   active nav item becomes a light periwinkle chip. (Hero + the .svc-faq__item
   answer cards are handled in services.css.)
   ===================================================================== */
.faq-group__title{ color:var(--ink);border-bottom-color:rgba(92,103,149,.16); }
.faq-nav__label{ color:#565d77; }
.faq-nav__link{ color:#565d77; }
.faq-nav__link:hover{ color:var(--ink);background:rgba(92,103,149,.08); }
.faq-nav__link.is-active{ color:var(--peri);background:color-mix(in srgb,var(--peri) 12%,#fff);border-color:color-mix(in srgb,var(--peri) 30%,transparent); }
.faq-nav__cta{ color:var(--peri); }
@media (max-width:860px){
  .faq-nav{ background:color-mix(in srgb,#EEF1FA 90%,transparent);border-bottom-color:rgba(92,103,149,.14); }
  .faq-nav__link{ border-color:rgba(92,103,149,.16);background:#fff; }
}