/* ---------------------------------------------------------------
   Jebron — design tokens + base
   Palette: high-vis amber on industrial charcoal. High contrast by
   design; this is a safety brand, legibility is the whole point.
   --------------------------------------------------------------- */

:root {
  /* Brand */
  --jb-amber:       #ffb100;
  --jb-amber-dark:  #e09a00;
  --jb-amber-soft:  #fff6e0;

  /* Ink */
  --jb-ink:         #10151b;
  --jb-ink-2:       #1b222b;
  --jb-ink-3:       #2b3540;

  /* Neutrals */
  --jb-white:       #ffffff;
  --jb-50:          #f6f7f9;
  --jb-100:         #eef1f4;
  --jb-200:         #e3e7ec;
  --jb-300:         #cbd2da;
  --jb-500:         #6b7683;
  --jb-700:         #3d4753;

  /* Support */
  --jb-green:       #25d366;   /* WhatsApp */

  /* Spacing scale */
  --jb-s1: 4px;  --jb-s2: 8px;  --jb-s3: 12px; --jb-s4: 16px;
  --jb-s5: 24px; --jb-s6: 32px; --jb-s7: 48px; --jb-s8: 64px;

  /* Type */
  /* Barlow — a slightly rounded grotesk drawn from industrial signage, which
     is the right lineage for safety equipment. The condensed cut carries the
     wordmark and headings, where long product names need the narrower width. */
  --jb-font: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jb-font-display: "Barlow Condensed", "Barlow Semi Condensed", var(--jb-font);
  --jb-display-tracking: .01em;
  --jb-display-weight: 700;
  /* Barlow has a smaller x-height than the system stack, so the same pixel
     size reads noticeably smaller. Each step is nudged up to compensate. */
  --jb-fs-xs: 0.8125rem;  /* 13px */
  --jb-fs-sm: 0.9375rem;  /* 15px */
  --jb-fs-md: 1rem;       /* 16px — also the iOS input-zoom floor */
  --jb-fs-lg: 1.1875rem;  /* 19px */

  /* Layout */
  --jb-max: 1200px;
  --jb-radius: 6px;
  --jb-header-h: 72px;
  --jb-shadow: 0 1px 3px rgba(16, 21, 27, .08), 0 8px 24px rgba(16, 21, 27, .06);
}

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

body {
  margin: 0;
  font-family: var(--jb-font);
  font-size: var(--jb-fs-md);
  line-height: 1.6;
  color: var(--jb-ink);
  background: var(--jb-white);
  -webkit-font-smoothing: antialiased;
  /* clip, not hidden: `overflow-x: hidden` makes body a scroll container,
     which silently breaks the sticky header. */
  overflow-x: clip;
  /* Sticky footer layout — ensures footer sits at viewport bottom on short pages */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

/* Visible focus everywhere — keyboard users are not an afterthought */
:focus-visible {
  outline: 3px solid var(--jb-amber);
  outline-offset: 2px;
  border-radius: 2px;
}

.jb-wrap {
  width: 100%;
  max-width: var(--jb-max);
  margin-inline: auto;
  padding-inline: var(--jb-s4);
}
@media (min-width: 900px) { .jb-wrap { padding-inline: var(--jb-s5); } }

/* Screen-reader-only, matching WordPress core conventions */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.jb-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: var(--jb-s3) var(--jb-s4);
  background: var(--jb-amber);
  color: var(--jb-ink);
  font-weight: 700;
}
.jb-skip-link:focus { left: var(--jb-s4); top: var(--jb-s2); }

.jb-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.jb-icon--solid { fill: currentColor; stroke: none; }

/* Placeholder body area — real page sections arrive in later steps */
.jb-site-main {
  min-height: 45vh;
  padding-block: var(--jb-s8);
  flex: 1 0 auto; /* Grow to push footer to bottom on short pages */
}
/* The front page and the product catalog are built from sections that bring
   their own spacing, so the placeholder min-height and vertical padding only
   produce empty space — above the banner and again above the footer. */
.jb-site-main--flush {
  padding-block: 0;
  min-height: 0;
}

/* Home page's own editor content, when it has any. */
.jb-front-content { padding-block: var(--jb-s7); }

/* ---------------------------------------------------------------
   Mesh gradient backdrop.

   Overlapping radial gradients in the brand amber and a cool slate over
   a warm off-white. Fixed rather than scrolling, so it reads as a lit
   surface behind the page instead of a pattern sliding past.
   --------------------------------------------------------------- */

body { background-color: var(--jb-50); }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: #fbf8f2;
  background-image:
    radial-gradient(62% 52% at 10% 4%,   rgba(255, 177, 0, .30), transparent 62%),
    radial-gradient(52% 46% at 92% 12%,  rgba(64, 92, 124, .20), transparent 60%),
    radial-gradient(58% 52% at 82% 78%,  rgba(255, 177, 0, .26), transparent 64%),
    radial-gradient(50% 46% at 16% 92%,  rgba(64, 92, 124, .17), transparent 62%),
    radial-gradient(64% 54% at 48% 46%,  rgba(255, 236, 196, .55), transparent 68%);
}

/* ---------------------------------------------------------------
   Scroll reveal.

   Generic, and driven by assets/js/reveal.js, so it lives in base rather
   than in the stylesheet of whichever section happens to opt in with
   [data-jb-reveal]. Today that is the home page's category cards.

   The hidden state is scoped to .jb-reveal-ready, a class the script adds at
   runtime, so nothing is ever hidden unless JavaScript is there to show it
   again.
   --------------------------------------------------------------- */

.jb-reveal-ready [data-jb-reveal] {
  opacity: 0;
  transform: translateY(16px) scale(.96);
  transition:
    opacity .55s ease,
    transform .55s cubic-bezier(.2, .7, .3, 1);
  will-change: opacity, transform;
}

.jb-reveal-ready [data-jb-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .jb-reveal-ready [data-jb-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}