/* Base CSS for Jobdrive Theme */

:root {
  /* Color Tokens */
  --jd-base: #ffffff;
  --jd-contrast: #0f172a;
  --jd-ink: #111827;
  --jd-sky: #38bdf8;
  --jd-sky-brand: #49C8FB;
  --jd-sky-deep: #0284c7;
  --jd-sky-mid: #0ea5e9;
  --jd-sky-soft: #7dd3fc;
  --jd-sky-tint: #e1f0ff;
  --jd-sky-wash: #eff8ff;
  --jd-body: #475569;
  --jd-muted: #94a3b8;
  --jd-faint: #64748b;
  --jd-border: #e5e7eb;
  --jd-border-soft: #eef2f6;
  --jd-slate-800: #1e293b;
  --jd-off-white: #f8fafc;
  --jd-success: #16a34a;
  --jd-danger: #b91c1c;
  --jd-warning: #b45309;

  /* Gradient */
  --jd-gradient-cta: linear-gradient(120deg, #0284c7 0%, #38bdf8 100%);

  /* Radii */
  --jd-radius-sm: 6px;
  --jd-radius-md: 8px;
  --jd-radius-lg: 12px;
  --jd-radius-xl: 16px;
  --jd-radius-full: 9999px;

  /* Shadows */
  --jd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --jd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --jd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --jd-shadow-sky: 0 10px 25px -5px rgba(56, 189, 248, 0.25);
}

/* Typography Base
   No blanket letter-spacing. The source tightens only the headings that ask
   for it, each in its own inline style — h1 mostly, at -0.015em. Applying
   -0.01em to every level pulled h2 and h3 in by roughly a third of a pixel per
   character, which is enough to keep a line from wrapping where the source
   wraps it: "Priced for how much you hire" measures 417px against a 416px
   column, so it broke to two lines there and stayed on one here. */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  color: var(--jd-contrast);
}

h1, h2, .jd-font-heading {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
}

body, p, ul, ol, button, input, select, textarea {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--jd-body);
}

a {
  color: var(--jd-sky-deep);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--jd-sky-mid);
}

/* Interactive Focus States */
:focus-visible {
  outline: 2px solid var(--jd-sky) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.20) !important;
}

/* Base Accessibility rules */
.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;
}

/* ---------------------------------------------------------------------------
   Overflow guards
   Acceptance point 1 in RESPONSIVE-SPEC.md: no horizontal page scroll at 375px.
   Only inner tables and slot rows may scroll, and they opt in explicitly.
   --------------------------------------------------------------------------- */
html,
body,
.wp-site-blocks,
.jobdrive-pattern-page-home,
[class*="jobdrive-pattern-"] {
  overflow-x: clip;
}

[class*="jobdrive-pattern-"] * {
  box-sizing: border-box;
}

/* Grid and flex children may not blow out their track on narrow screens. */
[class*="jobdrive-pattern-"] .jd-rgrid > * {
  min-width: 0;
}

/* No blanket image constraint here. The source has none, and the footer's
   watermark is a 420px logo deliberately hung off the corner — capping it to
   100% of its container shrank it to the viewport width on every page. The
   overflow-x guard above is what keeps the page from scrolling sideways. */

/* ---------------------------------------------------------------------------
   Fluid display headings
   ---------------------------------------------------------------------------
   Heading sizes were inline, so the steps RESPONSIVE-SPEC.md asks for
   (h1 60 -> 46 -> 40 -> 32, h2 -> 30) never applied and every h1 stayed at its
   desktop size down to 375px. Each heading now publishes its designed size as
   --jd-fs and the caps below clamp it per breakpoint.

   min() means a heading only ever shrinks: a 34px h2 keeps 34px at every
   width, while a 62px h1 steps down. Desktop is unchanged.
   --------------------------------------------------------------------------- */
.jd-h { font-size: var(--jd-fs); }

/* Breakpoints match the source site's global block exactly (1024 / 767 / 480),
   so a heading steps down on the same pixel it does there. */
/* Only h1 steps down at tablet. The port also capped h2 to 34px and h3 to 28px
   here, which the source does not: h2 keeps its authored size until 767 and h3
   is never capped. Since headings with a `ch` max-width size their own column,
   shrinking them early moved the copy beside them — the credit explainer on
   Pricing sat 26px off at 768 because of it. */
/* line-height carries !important because headings state their own inline —
   1.1 here, 1.12 there, whatever the design asked for at desktop size. Without
   it the cap applied to font-size while the leading stayed at its desktop
   ratio, leaving every wrapped heading a few pixels short per line. The source
   marks these !important for the same reason. font-size needs no such help: it
   comes from --jd-fs via the class, not from an inline declaration. */
@media (max-width: 1024px) {
  h1.jd-h { font-size: min(var(--jd-fs), 46px); line-height: 1.08 !important; }
}

@media (max-width: 767px) {
  h1.jd-h { font-size: min(var(--jd-fs), 40px); }
  h2.jd-h { font-size: min(var(--jd-fs), 30px); line-height: 1.16 !important; }
}

@media (max-width: 480px) {
  h1.jd-h { font-size: min(var(--jd-fs), 32px); }
}