/* ==========================================================================
   Joi+Blokes — base / reset
   Depends on: tokens.css
   ========================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body.jb-lp {
  margin: 0;
  font-family: var(--jb-font-sans);
  font-size: var(--jb-fs-body);
  font-weight: var(--jb-fw-regular);
  line-height: var(--jb-lh-body);
  color: var(--jb-ink);
  background-color: var(--jb-page-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* The pages are dropped into a WP template, so everything is scoped under
   .jb-lp to avoid colliding with theme styles in either direction. */

.jb-lp h1,
.jb-lp h2,
.jb-lp h3,
.jb-lp h4,
.jb-lp h5,
.jb-lp h6 {
  margin: 0;
  font-family: var(--jb-font-sans);
  font-weight: var(--jb-fw-regular);
  line-height: var(--jb-lh-heading);
  letter-spacing: var(--jb-tracking-tight);
  color: var(--jb-ink);
  text-wrap: balance;
}

.jb-lp p { margin: 0; }
.jb-lp p + p { margin-top: var(--jb-space-4); }

.jb-lp ul,
.jb-lp ol { margin: 0; padding: 0; list-style: none; }

.jb-lp img,
.jb-lp svg,
.jb-lp picture,
.jb-lp video {
  display: block;
  max-width: 100%;
}

.jb-lp img { height: auto; }

/* These resets are wrapped in :where() so they carry zero specificity.
   Without it, `.jb-lp a` (0,2,0) outranks single-class component rules like
   `.jb-btn--primary` (0,1,0) and silently steals their colour, and the `font`
   shorthand on `.jb-lp button` overrides component font-size. */
:where(.jb-lp a) { color: inherit; text-decoration: none; }
:where(.jb-lp a:hover) { text-decoration: underline; }

:where(.jb-lp button, .jb-lp input, .jb-lp select) {
  font: inherit;
  color: inherit;
}

.jb-lp :focus-visible {
  outline: 2px solid var(--jb-button);
  outline-offset: 3px;
  border-radius: var(--jb-radius-sm);
}

/* --- Type helpers ------------------------------------------------------- */

.jb-display {
  font-size: var(--jb-fs-display);
  line-height: var(--jb-lh-tight);
  font-weight: var(--jb-fw-regular);
}

.jb-h2 {
  font-size: var(--jb-fs-h2);
  line-height: var(--jb-lh-heading);
  font-weight: var(--jb-fw-regular);
}

.jb-h3 {
  font-size: var(--jb-fs-h3);
  line-height: 1.35;
  font-weight: var(--jb-fw-medium);
}

.jb-h4 {
  font-size: var(--jb-fs-h4);
  line-height: 1.4;
  font-weight: var(--jb-fw-medium);
}

.jb-lead {
  font-size: var(--jb-fs-body);
  line-height: var(--jb-lh-body);
  color: var(--jb-text-muted);
}

.jb-small {
  font-size: var(--jb-fs-small);
  line-height: 1.5;
  color: var(--jb-text-muted);
}

.jb-fineprint {
  font-size: var(--jb-fs-eyebrow);
  line-height: 1.5;
  color: var(--jb-gray-1);
}

.jb-eyebrow {
  font-size: var(--jb-fs-eyebrow);
  font-weight: var(--jb-fw-medium);
  letter-spacing: var(--jb-tracking-eyebrow);
  text-transform: uppercase;
  line-height: 1.55;
  color: var(--jb-text-muted);
}

/* --- Layout primitives -------------------------------------------------- */

.jb-band {
  padding-block: var(--jb-band-y);
}

.jb-container {
  width: 100%;
  max-width: var(--jb-container);
  margin-inline: auto;
  padding-inline: var(--jb-gutter-mobile);
}

.jb-container--wide { max-width: var(--jb-container-wide); }
.jb-container--narrow { max-width: var(--jb-container-narrow); }

@media (min-width: 768px) {
  .jb-container { padding-inline: var(--jb-gutter); }
}

.jb-center { text-align: center; }

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

/* Screen-reader-only, used for carousel live regions and control labels. */
.jb-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;
}