/* ==========================================================================
   Knight IDS — shared base stylesheet
   Tokens, resets, and the components used on every page
   (nav, buttons, tags, blueprint frames, footer, layout).
   Derived from the "Industry" design system, retinted for the Knight IDS
   dark field palette.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Color roles */
  --color-bg: #0d1712;
  --color-surface: #16241c;
  --color-text: #f4f1e4;
  --color-text-muted: #c7cbbe;
  --color-text-dim: #8a9089;
  --color-accent: #f0c419;
  --color-accent-hover: #ffdf6b;
  --color-accent-600: #d1a80f;
  --color-accent-700: #b8930d;
  --color-accent-100: #2a2410;

  /* Lines */
  --color-divider: rgba(244, 241, 228, 0.12);
  --color-line: rgba(244, 241, 228, 0.15);
  --color-line-strong: rgba(244, 241, 228, 0.35);

  /* Data colors (Recoil-IQ charts) */
  --color-data-off: #c9564a;
  --color-data-on: #5fbf8f;

  /* The sandbox ribbon in the site header: a warning rather than part of the
     palette, and meant to look out of place in it. Never drawn on live keys. */
  --color-sandbox: #c62828;

  /* Type */
  --font-heading: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;

  /* Layout */
  --wrap-max: 1180px;
  --wrap-pad: 40px;
  --nav-height: 74px;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 34px;
  --space-7: 56px;
  --space-8: 90px;
  --space-9: 110px;
}

/* --------------------------------------------------------------------------
   2. Reset + base type
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

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

a { color: var(--color-accent); }
a:hover { color: var(--color-accent-hover); }

::selection {
  background: var(--color-accent);
  color: var(--color-bg);
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  text-transform: uppercase;
  margin: 0;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--wrap-pad);
}

.section { padding: var(--space-9) 0; }
.section--surface { background: var(--color-surface); }
.section--tight { padding: var(--space-8) 0; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.accent { color: var(--color-accent); }
.muted { color: var(--color-text-muted); }
.dim { color: var(--color-text-dim); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   4. Blueprint frame — the wireframe object every card and figure wears
   -------------------------------------------------------------------------- */
.blueprint {
  position: relative;
  border: 1px solid var(--color-line);
  background: transparent;
}

.blueprint .corner {
  position: absolute;
  width: 11px;
  height: 11px;
  pointer-events: none;
}

.blueprint .corner::before,
.blueprint .corner::after {
  content: "";
  position: absolute;
  background: var(--color-accent);
}

.blueprint .corner::before {
  left: 0; right: 0; top: 50%;
  height: 1px;
  transform: translateY(-50%);
}

.blueprint .corner::after {
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  transform: translateX(-50%);
}

.blueprint .corner.tl { top: -6px; left: -6px; }
.blueprint .corner.tr { top: -6px; right: -6px; }
.blueprint .corner.bl { bottom: -6px; left: -6px; }
.blueprint .corner.br { bottom: -6px; right: -6px; }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 15px 28px;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}
.btn-primary:hover {
  background: var(--color-accent-600);
  border-color: var(--color-accent-600);
  color: var(--color-bg);
}
.btn-primary:active {
  background: var(--color-accent-700);
  border-color: var(--color-accent-700);
}

.btn-secondary {
  background: transparent;
  border-color: var(--color-line-strong);
  color: var(--color-text);
}
.btn-secondary:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-text-muted);
}
.btn-ghost:hover { color: var(--color-accent); }

.btn-block { width: 100%; }

.btn[aria-disabled="true"],
.btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. Tags
   -------------------------------------------------------------------------- */
.tag {
  display: inline-block;
  padding: 5px 10px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid var(--color-line-strong);
  color: var(--color-text-muted);
}

.tag-accent {
  border-color: var(--color-accent);
  background: var(--color-accent-100);
  color: var(--color-accent);
}

.tag-solid {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   7. Site header
   -------------------------------------------------------------------------- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 23, 18, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-divider);
}

.site-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
  text-decoration: none;
  color: var(--color-text);
}

.site-nav__brand-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}

.site-nav__group {
  display: flex;
  align-items: center;
  gap: 44px;
  margin-left: auto;
  min-width: 0;
}

.site-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}

.site-nav__link {
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text-muted);
}
.site-nav__link:hover { color: var(--color-text); }
.site-nav__link.is-current { color: var(--color-accent); }

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav__login {
  text-decoration: none;
  flex: none;
  white-space: nowrap;
  padding: 9px 16px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text);
  border: 1px solid var(--color-line-strong);
}
.site-nav__login:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.site-nav__cart {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line-strong);
  color: var(--color-accent);
}
.site-nav__cart:hover { border-color: var(--color-accent); }
.site-nav__cart svg { width: 18px; height: 18px; }

/* The badge, and the `position: relative` above that anchors it, are one of two
   additions to this file the export does not have; the menu toggle below is the
   other. The export drew the icon bare
   because its cart lived in a session; this one survives ninety days, and an icon
   that looks identical whether it holds a four-figure configuration or nothing
   wastes that. It sits on the box's corner rather than inside it so that the 18px
   glyph the export centred keeps the space it was drawn in.

   Square, like every other edge on the site: the one `border-radius` in this
   stylesheet is a reset to zero. */
.site-nav__cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-bg);
  background: var(--color-accent);
  /* Against the page rather than against the icon's border, so a two-digit badge
     overhanging the box still reads as sitting on top of it. */
  border: 1px solid var(--color-bg);
}

/* The menu toggle is the other addition. Below 1080px the export hid the nav
   links and drew nothing in their place, so a phone could not reach a page
   except through a card that happened to link to it. The toggle is drawn as the
   cart's box beside it, and only under `html.js` — set in the layout's head, so
   the header never paints one way and then jumps to the other — because it does
   nothing until site-nav.js runs. Its rules are in the 1080px query below. */
.site-nav__toggle {
  display: none;
  flex: none;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 1px solid var(--color-line-strong);
  color: var(--color-text);
  cursor: pointer;
}
.site-nav__toggle:hover,
.site-nav__toggle[aria-expanded="true"] {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.site-nav__toggle svg { width: 18px; height: 18px; }

/* The sandbox ribbon is the third addition, and the one no customer sees: it is
   drawn only while Stripe is on test keys (PaymentGateway::isSandbox()). A red band
   across the header's top-left corner — the window's corner rather than `.wrap`'s,
   so a wide screen has it in the empty margin — cut off by a box of its own, since
   the header cannot clip it without clipping the menu panel that hangs below it.
   It takes no clicks: on a phone it lies over the logo's corner, and the logo still
   links home through it. The header is laid out the same with it as without, so a
   sandbox is a faithful rehearsal of the live site.

   The band's centre line meets each edge of the box 50px from the corner, and its
   outer edge about 66px, inside a 68px box — the checkout header's height, so the
   ribbon never hangs below either variant. */
.site-nav__sandbox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 68px;
  height: 68px;
  overflow: hidden;
  pointer-events: none;
}
.site-nav__sandbox-band {
  position: absolute;
  top: 14px;
  left: -40px;
  width: 130px;
  line-height: 22px;
  transform: rotate(-45deg);
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  background: var(--color-sandbox);
}
/* The checkout's header is `position: static` (checkout.css), which would anchor the
   ribbon to the page rather than to it. Relative with no offset moves nothing; two
   classes so it outranks checkout.css, which loads after this file. */
.site-nav.site-nav--checkout { position: relative; }

/* --------------------------------------------------------------------------
   8. Site footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-divider);
  padding: 44px 0;
}

.site-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-footer__brand-name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.site-footer__legal {
  font-size: 12.5px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  margin: 0;
}

/* --------------------------------------------------------------------------
   9. Grid utilities used across pages
   -------------------------------------------------------------------------- */
.rule-grid {
  display: grid;
  gap: 1px;
  background: var(--color-line);
  border: 1px solid var(--color-line);
}
.rule-grid > * { background: var(--color-bg); }
.section--surface .rule-grid > * { background: var(--color-surface); }

/* --------------------------------------------------------------------------
   10. Responsive — desktop-first
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .site-nav__group { gap: 20px; }
  .site-nav__links { display: none; }

  /* With JavaScript: the toggle, and the links as a panel hung under the header.
     The panel hangs off the inner row rather than the header, because the
     checkout's header is not positioned and would let it float to the top of the
     page. */
  .js .site-nav__group { gap: var(--space-3); }
  .js .site-nav__inner { position: relative; }
  .js .site-nav__toggle { display: flex; order: 1; }
  .js .site-nav.is-open .site-nav__links {
    display: flex;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-2) var(--wrap-pad) var(--space-4);
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-divider);
  }
  .js .site-nav.is-open .site-nav__link {
    padding: 14px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--color-divider);
  }
  .js .site-nav.is-open .site-nav__link:last-child { border-bottom: 0; }

  /* A smaller ribbon, with its centre line 42px out. */
  .site-nav__sandbox { width: 58px; height: 58px; }
  .site-nav__sandbox-band {
    top: 12px;
    left: -34px;
    width: 110px;
    line-height: 18px;
    font-size: 10.5px;
  }

  /* Without JavaScript: the links drop to a row of their own under the brand and
     scroll sideways, rather than vanishing with nothing to bring them back. */
  html:not(.js) .site-nav__inner {
    flex-wrap: wrap;
    height: auto;
  }
  html:not(.js) .site-nav__brand { min-height: var(--nav-height); }
  html:not(.js) .site-nav__group { display: contents; }
  html:not(.js) .site-nav__actions { margin-left: auto; }
  html:not(.js) .site-nav__links {
    display: flex;
    order: 1;
    flex-basis: 100%;
    overflow-x: auto;
    padding-bottom: 14px;
  }
}

@media (max-width: 760px) {
  :root {
    --wrap-pad: 20px;
    --space-8: 56px;
    --space-9: 64px;
  }
  .site-nav__login { display: none; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}