/* ========== CreativeJobHub — SHARED SITE CSS ========== */

/* ---------- Theme ---------- */
:root{
  --bg:#0b1220;
  --panel:#111827;
  --muted:#9ca3af;
  --text:#e5e7eb;
  --brand:#0ea5e9;
  --brand-2:#22c55e;
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(34,197,94,.12), transparent 60%),
    radial-gradient(900px 500px at 90% -20%, rgba(14,165,233,.12), transparent 60%),
    var(--bg);
  line-height:1.6;
  /* space for sticky header so content isn't hidden */
  padding-top:92px;
}
a{color:inherit;text-decoration:none}
.container{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  padding:12px 18px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:600;
  transition:.2s;
}
.btn-primary{background:linear-gradient(135deg, var(--brand), #38bdf8); color:#fff}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:#334155;color:#e2e8f0;background:transparent}

/* ---------- Header (shared) ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  backdrop-filter:saturate(180%) blur(8px);
  background:rgba(11,18,32,.75);
  border-bottom:1px solid rgba(148,163,184,.15);
}

/* HARD STOP: never let the header logo grow huge */
.site-header img,
.site-brand img{
  height:32px;
  width:auto !important;   /* beats any global img { width:100% } */
  display:block;
}

/* One single definition for the header grid: brand | nav | CTAs */
.site-header__inner{
  display:grid;
  grid-template-columns:min-content 1fr min-content; /* brand | nav | ctas */
  align-items:center;
  gap:24px;
  height:80px;
}

/* Brand (left) */
.site-brand{
  display:flex; align-items:center; gap:12px;
  white-space:nowrap; text-decoration:none;
  justify-self:start;
}

/* CTAs (right) */
.site-ctas{
  display:flex; gap:10px; white-space:nowrap;
  justify-self:end;
}
.site-ctas a{display:inline-flex; align-items:center; height:42px}

/* Center nav — keep centered and give breathing room so it doesn't collide */
.site-nav{
  display:flex; gap:18px; justify-content:center;
  min-width:0; white-space:nowrap; overflow-x:auto; scrollbar-width:none;
  padding-left:48px;   /* more room from the brand */
  padding-right:48px;  /* more room from the CTAs */
  margin-inline:4px;
}
.site-nav::-webkit-scrollbar{display:none}
.site-nav a{display:inline-flex; align-items:center; height:42px; padding:0 10px; border-radius:10px}
.site-nav a:hover{background:rgba(148,163,184,.08)}

/* Small screens: reduce gaps; nav can scroll horizontally */
@media (max-width:980px){
  .site-header__inner{gap:16px}
  .site-nav{gap:12px; padding-left:16px; padding-right:16px}
}

/* ---------- Shared card style (pricing/compare/contact) ---------- */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(148,163,184,.15);
  border-radius:16px;
  padding:18px;
}
/* --- Header spacing fix (desktop) --- */
@media (min-width: 1024px){
  /* Give the whole header a bit more room */
  .container{ max-width: 1240px; }  /* try 1240; 1280 is fine too */

  /* Keep center nav away from brand/CTAs */
  .site-nav{
    gap: 14px;                 /* a tad tighter between links */
    padding-left: 84px;        /* space from the brand */
    padding-right: 100px;       /* space from the CTAs (Log in / Get started) */
  }
}
/* === Logo size bump (safe) === */
.site-header .site-brand img {
  height: 36px;   /* was 32px — try 40px if you want a bit larger */
  width: auto;
  display: block;
}

/* Give the header a hair more room so nothing feels cramped */
.site-header__inner { height: 84px; }  /* was 80px */

/* Keep page content from sliding under the sticky header */
body { padding-top: 96px; }            /* was 92px */