/* ─────────────────────────────────────────────────────────────
   RetailerOS — the one site header + mobile menu.
   Markup: tools/site_header.py (stamped into every page by
   tools/build_site.py). Behaviour: assets/header.js.
   Self-contained on purpose: every class is .rh-*, every colour is set
   here, so each page's own CSS (and colors_and_type.css, which paints bare
   a/h1/p for the dark app) cannot bend it.
   ───────────────────────────────────────────────────────────── */
.rh, .rh-menu {
  --rh-ink: #0B1220; --rh-soft: #475569; --rh-muted: #94A3B8;
  --rh-line: #E5EAF2; --rh-bg: #F4F7FB; --rh-blue: #1E47B8; --rh-blue-soft: #E8EEFB;
  --rh-h: 64px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.rh *, .rh-menu * { box-sizing: border-box; }

/* ── bar ── */
.rh { position: sticky; top: 0; z-index: 90; background: var(--rh-bg);
  border-bottom: 1px solid transparent; transition: border-color 200ms ease, box-shadow 200ms ease; }
.rh.rh-scrolled, .rh.rh-open { border-bottom-color: var(--rh-line); box-shadow: 0 1px 10px rgba(11, 18, 32, 0.05); }
.rh-in { max-width: 1280px; margin: 0 auto; height: var(--rh-h); padding: 0 16px;
  display: flex; align-items: center; gap: 12px; }
.rh-brand { display: inline-flex; align-items: center; gap: 7px; flex: none; text-decoration: none; }
.rh-mark { width: 30px; height: 30px; display: block; }
.rh-word { height: 19px; width: auto; display: block; }

.rh-nav { display: none; }
.rh-cta { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.rh-signin { display: none; }
.rh a.rh-start { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 10px;
  background: var(--rh-ink); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
  white-space: nowrap; transition: transform 150ms ease, box-shadow 150ms ease; }
.rh a.rh-start:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(11, 18, 32, 0.45); }

.rh-burger { width: 40px; height: 40px; flex: none; display: inline-grid; place-content: center; gap: 5px;
  border: 1px solid var(--rh-line); border-radius: 10px; background: #fff; cursor: pointer; padding: 0; }
.rh-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--rh-ink);
  transition: transform 220ms ease, opacity 160ms ease; }
.rh.rh-open .rh-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rh.rh-open .rh-burger span:nth-child(2) { opacity: 0; }
.rh.rh-open .rh-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.rh a:focus-visible, .rh button:focus-visible, .rh-menu a:focus-visible {
  outline: 2px solid var(--rh-blue); outline-offset: 2px; }

/* ── mobile menu: a sheet under the bar; the bar stays, the burger becomes ✕ ── */
.rh-menu { position: fixed; left: 0; right: 0; top: var(--rh-top, var(--rh-h)); bottom: 0; z-index: 89;
  background: #fff; display: flex; flex-direction: column;
  border-top: 1px solid var(--rh-line); }
.rh-menu[hidden] { display: none; }
.rh-menu.rh-anim { animation: rh-in 200ms cubic-bezier(.2, .8, .2, 1); }
@keyframes rh-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rh-m-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 8px 20px 20px; }
.rh-menu a { text-decoration: none; }
.rh-menu a.rh-m-link { display: flex; align-items: center; justify-content: space-between; min-height: 52px;
  border-bottom: 1px solid var(--rh-line); font-size: 17px; font-weight: 600; color: var(--rh-ink); }
.rh-menu a.rh-m-link::after { content: "\2192"; color: var(--rh-muted); font-weight: 400; }
.rh-menu a.rh-m-link[aria-current="page"] { color: var(--rh-blue); }
.rh-menu a.rh-m-link[aria-current="page"]::after { content: "\25CF"; font-size: 9px; color: var(--rh-blue); }
.rh-m-group { margin-top: 22px; }
.rh-menu .rh-m-label { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--rh-muted); }
.rh-m-list { display: flex; flex-wrap: wrap; gap: 8px; }
.rh-m-list a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: 10px;
  background: var(--rh-bg); border: 1px solid var(--rh-line); font-size: 14px; font-weight: 500; color: var(--rh-ink); }
.rh-m-foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--rh-line);
  background: #fff; display: grid; gap: 10px; }
.rh-menu a.rh-m-start, .rh-menu a.rh-m-demo { display: flex; align-items: center; justify-content: center;
  min-height: 50px; border-radius: 12px; font-size: 16px; font-weight: 600; }
.rh-menu a.rh-m-start { background: var(--rh-ink); color: #fff; }
.rh-menu a.rh-m-demo { background: #fff; color: var(--rh-ink); border: 1px solid #D5DDEA; }
.rh-menu a.rh-m-signin { text-align: center; padding: 6px 0 0; font-size: 15px; font-weight: 600; color: var(--rh-blue); }
html.rh-lock, html.rh-lock body { overflow: hidden; }

/* very narrow phones: keep the full logo, tighten the button */
@media (max-width: 359px) {
  .rh-in { padding: 0 12px; gap: 8px; }
  .rh-word { height: 17px; }
  .rh a.rh-start { padding: 0 11px; font-size: 13px; }
}

/* ── desktop: links in the bar, no burger, no sheet ── */
@media (min-width: 1000px) {
  .rh, .rh-menu { --rh-h: 72px; }
  .rh-in { padding: 0 clamp(20px, 3.5vw, 48px); gap: 24px; }
  .rh-mark { width: 34px; height: 34px; }
  .rh-word { height: 21px; }
  .rh-nav { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
  .rh-nav a { padding: 8px 12px; border-radius: 8px; font-size: 14.5px; font-weight: 500; color: var(--rh-soft);
    text-decoration: none; transition: color 150ms ease, background 150ms ease; }
  .rh-nav a:hover { color: var(--rh-ink); background: rgba(11, 18, 32, 0.04); }
  .rh-nav a[aria-current="page"] { color: var(--rh-ink); font-weight: 600; }
  .rh-cta { margin-left: 0; gap: 18px; }
  .rh a.rh-signin { display: inline; font-size: 14.5px; font-weight: 500; color: var(--rh-soft); text-decoration: none; }
  .rh a.rh-signin:hover { color: var(--rh-ink); }
  .rh a.rh-start { height: 42px; padding: 0 18px; font-size: 14.5px; }
  .rh-burger { display: none; }
  .rh-menu { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .rh-menu.rh-anim { animation: none; }
  .rh-burger span, .rh a.rh-start { transition: none; }
}

/* ── search: header icon, overlay, results ── */
.rh a.rh-search { width: 40px; height: 40px; display: inline-grid; place-items: center; border-radius: 10px; color: var(--rh-ink);
  border: 1px solid var(--rh-line); background: #fff; text-decoration: none; flex: none; }
.rh a.rh-search:hover { border-color: var(--rh-blue); color: var(--rh-blue); }
@media (max-width: 999px) { .rh a.rh-search { display: none; } }         /* phones: search lives in the menu sheet */
@media (min-width: 1000px) { .rh a.rh-search { border-color: transparent; background: transparent; }
  .rh a.rh-search:hover { background: rgba(11,18,32,.05); } }
.rh-m-search { margin: 6px 0 8px; }
.rh-m-search input, .rs-box input { width: 100%; height: 48px; border-radius: 12px; border: 1px solid #D5DDEA; background: #fff;
  padding: 0 14px 0 42px; font: 500 16px/1 inherit; color: var(--rh-ink); -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 14px center; background-size: 18px; font-family: inherit; }
.rh-m-search input:focus, .rs-box input:focus { outline: none; border-color: var(--rh-blue); box-shadow: 0 0 0 3px var(--rh-blue-soft); }
.rs-overlay { position: fixed; inset: 0; z-index: 120; background: rgba(11,18,32,.45); display: flex; justify-content: center;
  align-items: flex-start; padding: 10vh 16px 16px; font-family: 'Inter', system-ui, sans-serif; }
.rs-overlay[hidden] { display: none; }
.rs-panel { width: 100%; max-width: 640px; background: #fff; border-radius: 18px; box-shadow: 0 30px 80px rgba(11,18,32,.35); overflow: hidden;
  display: flex; flex-direction: column; max-height: 78vh; }
.rs-box { padding: 14px; border-bottom: 1px solid var(--rh-line, #E5EAF2); display: flex; gap: 8px; align-items: center; }
.rs-close { flex: none; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #E5EAF2; background: #fff; color: #475569; font: 600 13px inherit; cursor: pointer; }
.rs-list { overflow-y: auto; padding: 8px; }
.rs-hint { padding: 14px 10px; font-size: 13.5px; color: #64748B; }
.rs-hint a { color: #1E47B8; font-weight: 600; }
a.rs-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: #0B1220; }
a.rs-item:hover, a.rs-item.on { background: #E8EEFB; }
.rs-kind { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1E47B8; }
a.rs-item b { font-size: 15px; font-weight: 600; }
a.rs-item small { font-size: 13px; color: #64748B; line-height: 1.45; }
.rs-ask { margin: 8px; padding: 12px 14px; border-radius: 12px; background: #F4F7FB; font-size: 14px; color: #475569; }
.rs-ask a { color: #1E47B8; font-weight: 600; }
.rs-all { display: block; margin: 4px 8px 8px; padding: 10px 12px; text-align: center; border-radius: 10px; background: #0B1220; color: #fff !important; font-weight: 600; font-size: 14px; text-decoration: none; }
/* ── exit pop-up ── */
.xp { position: fixed; inset: 0; z-index: 130; background: rgba(11,18,32,.5); display: grid; place-items: center; padding: 16px; font-family: 'Inter', system-ui, sans-serif; animation: xp-in .2s ease; }
@keyframes xp-in { from { opacity: 0; } to { opacity: 1; } }
.xp-card { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 20px; padding: 28px 24px 22px; text-align: center; box-shadow: 0 30px 80px rgba(11,18,32,.35); }
.xp-x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0; border-radius: 10px; background: #F4F7FB; font-size: 20px; color: #475569; cursor: pointer; }
.xp-kick { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #C2521F; }
.xp-card h2 { margin: 8px 0 8px; font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 500; font-size: 26px; line-height: 1.15; color: #0B1220; }
.xp-sub { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: #475569; }
.xp-main { display: flex; justify-content: center; align-items: center; min-height: 50px; border-radius: 12px; background: #1E47B8; color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: none; padding: 0 14px; }
.xp-more { display: grid; gap: 8px; margin-top: 12px; }
.xp-more a { font-size: 14px; font-weight: 600; color: #1E47B8; text-decoration: none; padding: 6px; }