/* Stran s pogostimi vprašanji (jobbit.si/vprasanja in jobbit.io/faq) po handoffu
   design_handoff_vprasanja z dne 25. 9. 2026. Naloži jo samo ta stran, predpona je fq-.
   Predpona vp- v styles.css je stara različica te strani in je po tej objavi neuporabljena.

   Dve odstopanji od prototipa, obe namerni:
   - limeta je --neon (#BEED0A), ne #C7E70F, da na strani ni dveh limet (gumb v glavi je --neon);
   - zelena je --green-700, ista kot drugod na strani.

   Past: navpični razmiki ne smejo biti na .wrap, ker styles.css pri <=480 px nastavi
   .wrap{padding:0 16px !important} in jih pobriše. Zato so na odsekih in karticah. */

.fq{
  --fq-green:var(--green-700);
  --fq-selbg:#EAF7EF;
  --fq-side:#EEF3F1;
  --fq-side-hover:#E4EBE7;
  --fq-border:#E2E9E5;
  --fq-line:#EDF1EF;
  --fq-row:#F8FAF9;
  --fq-circle:#EEF2F0;
  --fq-ink2:#41544D;
  --fq-ink3:#5A6B65;
  --fq-ink4:#8A9A94;
  --fq-ink5:#A9B6B1;
}

@keyframes fq-open{ from{opacity:0; transform:translateY(-4px);} to{opacity:1; transform:translateY(0);} }
@keyframes fq-fade{ from{opacity:0;} to{opacity:1;} }

/* ---------- hero ---------- */
.fq-hero{background:var(--dark); padding:84px 0 128px;}
.fq-hero .in{max-width:760px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center;}
.fq-eyebrow{font-family:var(--mono); text-transform:uppercase; font-size:11px; font-weight:500; letter-spacing:.2em; color:var(--neon); margin-bottom:24px;}
.fq-h1{margin:0 0 24px; font-size:58px; line-height:1.03; font-weight:500; letter-spacing:-.04em; color:#fff; text-wrap:pretty;}
.fq-lead{margin:0 0 36px; max-width:620px; font-size:17px; line-height:1.6; color:rgba(255,255,255,.76); text-wrap:pretty;}
.fq-gumbi{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
.fq-btn{height:56px; padding:0 30px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; gap:11px;
  font-size:17px; font-weight:500; white-space:nowrap; transition:transform .14s ease, background .14s ease, border-color .14s ease, color .14s ease;}
.fq-btn--neon{background:var(--neon); color:var(--dark); box-shadow:0 10px 26px rgba(190,237,10,.22);}
.fq-btn--neon:hover{background:var(--neon-600);}
.fq-btn--neon:active{transform:scale(.99);}
.fq-btn--obroba{padding:0 26px; border:1.5px solid rgba(255,255,255,.28); color:#fff; font-size:16px;}
.fq-btn--obroba:hover{border-color:var(--neon); color:var(--neon);}

/* ---------- kartica z vprašanji ---------- */
/* flow-root prepreči zlivanje robov: brez njega bi negativni rob kartice potegnil navzgor ves bel odsek,
   ki bi prekril spodnji del heroja, in kartica ne bi segala čez rob temnega pasu. */
.fq-blok{background:var(--paper); padding-bottom:76px; display:flow-root;}
.fq-card{position:relative; z-index:2; margin-top:-64px; background:var(--paper); border-radius:18px; overflow:hidden;
  display:flex; align-items:stretch; min-height:540px; box-shadow:0 20px 48px rgba(2,18,12,.24);}

.fq-side{flex:0 0 310px; background:var(--fq-side); border-right:1px solid var(--fq-border); padding:30px 20px 34px; display:flex; flex-direction:column;}
.fq-side-l{font-family:var(--mono); text-transform:uppercase; font-size:10.5px; font-weight:500; letter-spacing:.16em; color:var(--fq-ink4); padding:0 12px 14px;}
.fq-temat{display:flex; flex-direction:column; gap:4px;}
.fq-t{display:flex; align-items:center; gap:11px; padding:13px; border:0; border-radius:9px; background:transparent; cursor:pointer;
  font-family:inherit; text-align:left; width:100%; transition:background .14s ease;}
.fq-t:hover{background:var(--fq-side-hover);}
.fq-t.on{background:var(--fq-selbg);}
.fq-t-n{font-size:11.5px; font-weight:500; color:var(--fq-ink5); flex:0 0 auto;}
.fq-t-ime{flex:1; min-width:0; font-size:13.5px; font-weight:500; line-height:1.3; color:var(--fq-ink2);}
.fq-t-st{font-size:11.5px; color:var(--fq-ink5);}
.fq-t.on .fq-t-n, .fq-t.on .fq-t-st{color:var(--fq-green);}
.fq-t.on .fq-t-ime{color:var(--dark);}

.fq-razmik{flex:1; min-height:24px;}
.fq-help{padding:16px; border-radius:12px; background:var(--dark);}
.fq-help-l{font-family:var(--mono); text-transform:uppercase; font-size:10.5px; font-weight:500; letter-spacing:.14em; color:var(--neon); margin-bottom:7px;}
.fq-help-t{margin:0 0 12px; font-size:13px; line-height:1.55; color:rgba(255,255,255,.7);}
.fq-help-btn{height:40px; border-radius:7px; background:var(--neon); color:var(--dark); display:flex; align-items:center; justify-content:center;
  font-size:13.5px; font-weight:500; transition:background .14s ease;}
.fq-help-btn:hover{background:var(--neon-600);}

.fq-panels{flex:1; min-width:0; padding:32px 36px 38px;}
.fq-panel{animation:fq-fade .2s ease-out;}
.fq-panel[hidden]{display:none;}
.fq-panel-glava{display:flex; align-items:center; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
.fq-panel-h{margin:0; font-size:28px; font-weight:500; letter-spacing:-.03em; color:var(--dark);}
.fq-znacka{padding:6px 12px; border-radius:999px; background:var(--fq-selbg); color:var(--fq-green); font-size:11.5px; font-weight:500; white-space:nowrap;}

.fq-q{border-top:1px solid var(--fq-line);}
.fq-q-btn{display:flex; align-items:center; gap:14px; width:100%; padding:15px 2px; border:0; background:transparent; cursor:pointer;
  font-family:inherit; text-align:left; transition:background .14s ease;}
.fq-q-btn:hover{background:var(--fq-row);}
.fq-q-n{width:26px; height:26px; border-radius:999px; background:var(--fq-circle); color:var(--fq-ink3); display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:500; flex:0 0 auto;}
.fq-q-t{flex:1; min-width:0; font-size:16px; font-weight:500; line-height:1.45; letter-spacing:-.015em; color:var(--dark);}
.fq-q-ico{font-size:15px; color:var(--fq-ink4); flex:0 0 auto;}
.fq-q.open .fq-q-n{background:var(--fq-green); color:#fff;}
.fq-a{display:none; padding:0 30px 20px 40px; font-size:14.5px; line-height:1.7; color:var(--fq-ink2);}
.fq-a p{margin:0;}
.fq-q.open .fq-a{display:block; animation:fq-open .18s ease-out;}

/* ---------- zaključni trak ---------- */
.fq-cta{background:var(--neon);}
.fq-cta .in{display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; padding:36px 0;}
.fq-cta-h{margin:0 0 6px; font-size:30px; line-height:1.1; font-weight:500; letter-spacing:-.035em; color:var(--dark);}
.fq-cta-p{margin:0; max-width:520px; font-size:15px; line-height:1.55; color:rgba(13,31,26,.7);}
.fq-cta-gumbi{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.fq-btn--dark{background:var(--dark); color:#fff; font-size:16px;}
.fq-btn--dark:hover{transform:translateY(-2px);}
.fq-btn--tema{padding:0 24px; border:1.5px solid rgba(13,31,26,.3); color:var(--dark); font-size:16px;}
.fq-btn--tema:hover{border-color:var(--dark);}

/* ---------- ožji zasloni ---------- */
@media (max-width:1099px){
  .fq-side{flex-basis:270px;}
  .fq-panels{padding:28px 26px 32px;}
}
@media (max-width:899px){
  .fq-hero{padding:64px 0 104px;}
  .fq-card{flex-direction:column; min-height:0;}
  /* Filter se prelevi v vodoravno vrsto čipov nad vprašanji, pomoč se preseli pod harmoniko. */
  .fq-side{display:contents;}
  .fq-side-l, .fq-razmik{display:none;}
  .fq-temat{order:1; flex-direction:row; gap:8px; overflow-x:auto; padding:16px; background:var(--fq-side);
    border-bottom:1px solid var(--fq-border); -webkit-overflow-scrolling:touch; scrollbar-width:none;}
  .fq-temat::-webkit-scrollbar{display:none;}
  .fq-t{width:auto; flex:0 0 auto; padding:10px 14px; border-radius:999px; background:var(--paper); border:1px solid var(--fq-border);}
  .fq-t-ime{white-space:nowrap;}
  .fq-t.on{background:var(--fq-selbg); border-color:var(--fq-selbg);}
  .fq-panels{order:2; padding:24px 20px 28px;}
  .fq-help{order:3; margin:0 16px 16px;}
}
@media (max-width:639px){
  .fq-hero{padding:52px 0 88px;}
  .fq-h1{font-size:34px;}
  .fq-lead{font-size:16px; margin-bottom:28px;}
  .fq-gumbi{flex-direction:column; align-items:stretch; width:100%; gap:10px;}
  .fq-btn{width:100%; font-size:16px;}
  .fq-card{margin-top:-32px; border-radius:14px;}
  .fq-panel-h{font-size:22px;}
  .fq-q-t{font-size:15px;}
  .fq-a{padding:0 6px 18px 40px;}
  .fq-cta .in{padding:30px 0; gap:22px;}
  .fq-cta-h{font-size:24px;}
  .fq-cta-gumbi{width:100%; flex-direction:column; align-items:stretch;}
}