/* salary-insights.css — Global HR salary insights page (dark theme, matches site) */
:root{
  --si-bg:#0a0a0b; --si-card:#141416; --si-card2:#1b1b1f;
  --si-line:#26262b; --si-ink:#f2f2f0; --si-muted:#9d9da6;
  --si-accent:#e05a1f; --si-accent2:#C2410C; --si-radius:14px;
}
.si-page{
  background:var(--si-bg); color:var(--si-ink);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  margin:0; min-height:100vh;
}
.si-page h1,.si-page h2,.si-page h3{ font-family:'Playfair Display',Georgia,serif; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
.si-nav{
  display:flex; align-items:center; gap:2rem;
  padding:.9rem clamp(1rem,4vw,3rem);
  border-bottom:1px solid var(--si-line);
  background:rgba(10,10,11,.85); backdrop-filter:blur(8px);
  position:sticky; top:0; z-index:50;
}
.si-logo{display:flex; align-items:center; gap:.55rem; font-weight:800; color:var(--si-ink); text-decoration:none; font-size:1.05rem; letter-spacing:-.01em;}
.si-nav-links{display:flex; gap:1.4rem; margin-left:auto;}
.si-nav-links a{color:var(--si-muted); text-decoration:none; font-size:.92rem; font-weight:600;}
.si-nav-links a:hover{color:var(--si-ink);}
.si-nav-cta{
  color:var(--si-ink); text-decoration:none; font-weight:700; font-size:.9rem;
  border:1px solid var(--si-accent2); border-radius:999px; padding:.5rem 1.1rem;
}
.si-nav-cta:hover{background:var(--si-accent2);}
@media(max-width:760px){ .si-nav-links{display:none;} }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.si-hero{padding:clamp(3rem,7vw,5.5rem) clamp(1rem,4vw,3rem) 1.5rem; max-width:1060px; margin:0 auto;}
.si-eyebrow{
  color:var(--si-accent); text-transform:uppercase; letter-spacing:.18em;
  font-size:.78rem; font-weight:700; margin:0 0 1rem;
}
.si-hero h1{font-size:clamp(2.2rem,5.4vw,3.8rem); line-height:1.08; margin:0 0 1.1rem; letter-spacing:-.015em;}
.si-hero h1 em{color:var(--si-accent); font-style:italic;}
.si-sub{color:var(--si-muted); font-size:1.06rem; line-height:1.65; max-width:640px; margin:0;}

/* ── Controls ────────────────────────────────────────────────────────────── */
.si-controls{
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  max-width:1060px; margin:1.8rem auto 0; padding:0 clamp(1rem,4vw,3rem);
}
.si-roles{display:flex; flex-wrap:wrap; gap:.5rem;}
.si-role{
  background:var(--si-card); color:var(--si-muted); border:1px solid var(--si-line);
  border-radius:999px; padding:.55rem 1.15rem; font:inherit; font-size:.9rem; font-weight:700;
  cursor:pointer; transition:all .18s ease;
}
.si-role:hover{color:var(--si-ink); border-color:#3a3a42;}
.si-role.is-active{background:var(--si-accent2); border-color:var(--si-accent2); color:#fff;}
.si-filters{display:flex; gap:.7rem; align-items:center;}
.si-select-wrap{display:flex; align-items:center; gap:.5rem; color:var(--si-muted); font-size:.88rem; font-weight:600;}
.si-select{
  background:var(--si-card); color:var(--si-ink); border:1px solid var(--si-line);
  border-radius:10px; padding:.5rem .7rem; font:inherit; font-size:.88rem;
}
.si-sort{
  background:var(--si-card); color:var(--si-muted); border:1px solid var(--si-line);
  border-radius:10px; padding:.5rem .9rem; font:inherit; font-size:.88rem; font-weight:700; cursor:pointer;
}
.si-sort:hover{color:var(--si-ink);}

/* ── Stats ───────────────────────────────────────────────────────────────── */
.si-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem;
  max-width:1060px; margin:1.4rem auto 0; padding:0 clamp(1rem,4vw,3rem);
}
.si-stat{background:var(--si-card); border:1px solid var(--si-line); border-radius:var(--si-radius); padding:.9rem 1.1rem;}
.si-stat-label{display:block; color:var(--si-muted); font-size:.78rem; font-weight:600; margin-bottom:.3rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.si-stat-value{display:block; font-size:1.35rem; font-weight:800; letter-spacing:-.02em;}

/* ── Chart ───────────────────────────────────────────────────────────────── */
.si-chart-wrap{max-width:1060px; margin:1.6rem auto 0; padding:0 clamp(1rem,4vw,3rem);}
.si-chart{
  background:var(--si-card); border:1px solid var(--si-line); border-radius:var(--si-radius);
  padding:1.2rem clamp(.8rem,2.5vw,1.6rem); max-height:560px; overflow-y:auto;
}
.si-row{
  display:grid; grid-template-columns:150px 1fr 74px; gap:.8rem; align-items:center;
  padding:.42rem 0; border-bottom:1px solid rgba(255,255,255,.04);
  opacity:0; transform:translateX(-6px);
  animation:si-in .45s ease forwards; animation-delay:inherit;
}
.si-row:last-child{border-bottom:0;}
@keyframes si-in{to{opacity:1; transform:none;}}
.si-country{font-size:.9rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.si-bar-track{background:var(--si-card2); border-radius:999px; height:20px; overflow:hidden;}
.si-bar{
  height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--si-accent2),var(--si-accent));
  transition:width .7s cubic-bezier(.22,.9,.35,1);
}
.si-value{font-size:.85rem; font-weight:700; color:var(--si-muted); text-align:right; font-variant-numeric:tabular-nums;}
@media(max-width:560px){ .si-row{grid-template-columns:104px 1fr 62px;} .si-country{font-size:.8rem;} }

/* ── Method / FAQ / CTA ──────────────────────────────────────────────────── */
.si-method,.si-faq,.si-cta{max-width:1060px; margin:0 auto; padding:2.6rem clamp(1rem,4vw,3rem) 0;}
.si-method h2,.si-faq h2{font-size:1.6rem; margin:0 0 .9rem;}
.si-method p{color:var(--si-muted); line-height:1.7; max-width:760px; margin:0;}
.si-method strong{color:var(--si-ink);}
.si-faq details{
  background:var(--si-card); border:1px solid var(--si-line); border-radius:12px;
  padding:.9rem 1.2rem; margin-bottom:.7rem;
}
.si-faq summary{cursor:pointer; font-weight:700; font-size:.98rem;}
.si-faq details p{color:var(--si-muted); line-height:1.65; margin:.7rem 0 .2rem; font-size:.94rem;}
.si-faq a{color:var(--si-accent);}
.si-cta{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1rem; padding-bottom:3rem;}
.si-cta-card{
  background:var(--si-card); border:1px solid var(--si-line); border-radius:var(--si-radius);
  padding:1.6rem;
}
.si-cta-card h3{margin:0 0 .5rem; font-size:1.3rem;}
.si-cta-card p{color:var(--si-muted); font-size:.94rem; line-height:1.6; margin:0 0 1.1rem;}
.si-btn{
  display:inline-block; background:var(--si-accent2); color:#fff; text-decoration:none;
  font-weight:700; font-size:.92rem; border-radius:10px; padding:.7rem 1.3rem;
}
.si-btn:hover{background:var(--si-accent);}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.si-footer{border-top:1px solid var(--si-line); padding:1.4rem clamp(1rem,4vw,3rem);}
.si-footer-inner{
  max-width:1060px; margin:0 auto; display:flex; flex-wrap:wrap; gap:.6rem;
  justify-content:space-between; color:var(--si-muted); font-size:.85rem;
}
.si-footer a{color:var(--si-muted);}

/* Light theme: respect the site toggle */
[data-theme="light"] .si-page, html[data-theme="light"] body.si-page{background:#fafafa; color:#17171a;}
html[data-theme="light"] .si-page{
  --si-bg:#fafafa; --si-card:#ffffff; --si-card2:#efeff2; --si-line:#e3e3e8;
  --si-ink:#17171a; --si-muted:#5c5c66;
}
html[data-theme="light"] .si-nav{background:rgba(250,250,250,.85);}