/* ==========================================================================
   PERKESO MyFutureJobs — Base: reset, typography, layout primitives, utilities
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-default);
  background: var(--surface-page);
  background-image: linear-gradient(180deg, rgba(22, 51, 107, 0.04), transparent 360px);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
  letter-spacing: var(--ls-snug);
  min-height: 100vh;
}

img, svg, video { display: block; max-width: 100%; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-sm);
}

/* ---- Headings / type scale ---- */
/* shadcn-style: hierarchy driven by weight + colour + tight tracking, not just scale. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}
h1, .h1 { font-weight: var(--fw-bold); }

.display { font-family: var(--font-display); font-size: var(--fs-display); font-weight: var(--fw-extra); line-height: var(--lh-tight); letter-spacing: -0.03em; color: var(--text-strong); }
h1, .h1 { font-size: var(--fs-h1); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); }
h4, .h4 { font-size: var(--fs-h4); }

.lead { font-size: var(--fs-lg); color: var(--text-muted); line-height: var(--lh-relaxed); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--mfj-blue-600);
}

/* ---- Text helpers ---- */
.muted   { color: var(--text-muted); }
.faint   { color: var(--text-faint); }
.strong  { color: var(--text-strong); }
.fw-medium   { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold     { font-weight: var(--fw-bold); }
.center  { text-align: center; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono { font-family: var(--font-mono); }

/* ---- Layout ---- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
.container-narrow { max-width: var(--container-narrow); }

.section { padding-block: var(--space-20); }
.section-sm { padding-block: var(--space-12); }

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-8); }

.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.row-wrap { flex-wrap: wrap; }
.row-top { align-items: flex-start; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); }
.grow { flex: 1 1 auto; min-width: 0; }
.wrap { flex-wrap: wrap; }

.grid { display: grid; gap: var(--gutter); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .display { font-size: 40px; }
  h1, .h1 { font-size: 32px; }
  h2, .h2 { font-size: 26px; }
  .section { padding-block: var(--space-12); }
}

/* ---- Spacing utilities ---- */
.mt-0{margin-top:0} .mt-2{margin-top:var(--space-2)} .mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)} .mt-6{margin-top:var(--space-6)} .mt-8{margin-top:var(--space-8)}
.mb-2{margin-bottom:var(--space-2)} .mb-3{margin-bottom:var(--space-3)}
.mb-4{margin-bottom:var(--space-4)} .mb-6{margin-bottom:var(--space-6)} .mb-8{margin-bottom:var(--space-8)}
.p-4{padding:var(--space-4)} .p-6{padding:var(--space-6)}

/* ---- Misc ---- */
.hr { border: none; border-top: 1px solid var(--border-default); margin-block: var(--space-6); }
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--space-3); top: -60px; z-index: var(--z-toast);
  background: var(--mfj-navy-700); color: #fff; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-3); }