/* ============================================================
   PAGE: Česta pitanja  ·  koncept „tu smo, pitajte"
   Signature: leva sticky navigacija kategorija + mirni layout
   Sve boje preko tokena iz app.css — nikad hardkod.
   ============================================================ */

/* ---------- HERO ---------- */
.cp-hero{padding-bottom:clamp(48px,7vw,84px)}
.cp-hero .eyebrow{margin-bottom:1.2rem}
.cp-hero h1{margin-bottom:1.3rem}
.cp-hero .lead{margin-bottom:2rem}
.cp-hero-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}

/* drifting „?" bubbles — signature motiv (nežno, GPU) */
.cp-qbubbles{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cp-qbubbles span{position:absolute;font-family:'Fraunces',serif;font-weight:600;
  color:color-mix(in srgb,var(--aqua) 32%,transparent);
  display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--surface) 70%,transparent);
  border:1.5px solid color-mix(in srgb,var(--aqua) 22%,transparent);
  box-shadow:var(--shadow-sm);will-change:transform;opacity:.9}
.cp-qbubbles span:nth-child(1){width:58px;height:58px;font-size:1.5rem;left:6%;top:24%;animation:cpfloat 8s ease-in-out infinite}
.cp-qbubbles span:nth-child(2){width:42px;height:42px;font-size:1.1rem;left:14%;top:62%;animation:cpfloat 10s ease-in-out infinite .6s}
.cp-qbubbles span:nth-child(3){width:48px;height:48px;font-size:1.25rem;right:9%;top:20%;animation:cpfloat 9s ease-in-out infinite 1.1s}
.cp-qbubbles span:nth-child(4){width:36px;height:36px;font-size:1rem;right:15%;top:64%;animation:cpfloat 11s ease-in-out infinite .3s}
@keyframes cpfloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-16px) rotate(4deg)}}

/* ---------- SHELL: leva nav + desno akordeoni ---------- */
.cp-shell{display:grid;grid-template-columns:238px 1fr;gap:clamp(2rem,5vw,4.6rem);align-items:start}

.cp-nav{position:sticky;top:92px}
.cp-nav-title{font-family:'Manrope';font-weight:700;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:1rem;padding-left:.15rem}
.cp-nav ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.15rem}
.cp-nav a{display:flex;align-items:center;justify-content:space-between;gap:.7rem;
  padding:.62rem .8rem;border-radius:var(--r-sm);font-size:.95rem;font-weight:600;color:var(--muted);
  border-left:2px solid transparent;transition:background .22s var(--ease),color .22s var(--ease),border-color .22s var(--ease),transform .22s var(--ease)}
.cp-nav a:hover{background:color-mix(in srgb,var(--aqua) 10%,transparent);color:var(--fg);transform:translateX(2px)}
.cp-nav a .n{font-family:'Fraunces';font-weight:600;font-size:.82rem;color:var(--aqua);
  min-width:1.4rem;height:1.4rem;display:grid;place-items:center;border-radius:50%;
  background:color-mix(in srgb,var(--aqua) 12%,transparent);flex:none}
/* :target podvlačenje aktivne kategorije — bez JS */
.cp-cat:target .cp-cat-title{color:var(--aqua)}

.cp-support{margin-top:1.6rem;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-md);padding:1.2rem 1.25rem;box-shadow:var(--shadow-sm)}
.cp-support strong{font-family:'Fraunces';font-weight:600;font-size:1.02rem;color:var(--fg);display:block;margin-bottom:.35rem}
.cp-support p{font-size:.86rem;color:var(--muted);margin-bottom:.9rem}
.cp-support .btn{width:100%;justify-content:center;font-size:.9rem;padding:.7em 1em}

/* ---------- kategorije + akordeoni ---------- */
.cp-cat{scroll-margin-top:92px}
.cp-cat + .cp-cat{margin-top:clamp(2.4rem,5vw,3.6rem)}
.cp-cat-head{display:flex;align-items:center;gap:.85rem;margin-bottom:.3rem}
.cp-cat-ico{flex:none;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--aqua) 13%,transparent);color:var(--aqua)}
.cp-cat-ico svg{width:23px;height:23px}
.cp-cat-title{font-size:var(--fs-h3);transition:color .3s var(--ease)}
.cp-cat-sub{font-size:.9rem;color:var(--muted);margin:.1rem 0 .4rem 3.7rem}
.cp-list{margin-top:.6rem}
/* .qa dolazi iz app.css; ovde samo blago poravnanje */
.cp-list .qa:first-of-type{border-top:1px solid var(--line)}
.cp-list .qa .a p+p{margin-top:.7rem}
.cp-list .qa .a strong{color:var(--fg)}

/* ---------- CTA „imate još pitanja?" ---------- */
.cp-ask{position:relative;text-align:center;overflow:hidden;
  background:radial-gradient(72% 120% at 50% 0%,color-mix(in srgb,var(--mist) 80%,transparent),transparent 62%),var(--bg)}
.cp-ask .inner{position:relative;z-index:1;max-width:600px;margin-inline:auto}
.cp-ask h2{font-size:var(--fs-h2);margin:.7rem 0 1rem}
.cp-ask .lead{margin:0 auto 2rem}
.cp-ask-actions{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center}
.cp-ask-glow{position:absolute;inset:0;z-index:0;
  background:radial-gradient(44% 44% at 50% 40%,color-mix(in srgb,var(--aqua) 20%,transparent),transparent);
  filter:blur(12px);animation:pulse 6.5s ease-in-out infinite alternate}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .cp-shell{grid-template-columns:1fr}
  .cp-nav{position:static;top:auto}
  .cp-nav ol{flex-direction:row;flex-wrap:wrap;gap:.5rem}
  .cp-nav a{border-left:0;border:1px solid var(--line);border-radius:var(--r-pill);padding:.5rem .9rem}
  .cp-nav a:hover{transform:none}
  .cp-support{margin-top:1.4rem}
  .cp-support .btn{width:auto}
  .cp-support-btns{display:flex;flex-wrap:wrap;gap:.6rem}
}
@media (max-width:640px){
  .cp-cat-sub{margin-left:0}
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  .cp-qbubbles span,.cp-ask-glow{animation:none}
}