/* ============================================================================
   NOTE ON UNITS: every length here is px, not rem, ON PURPOSE. The map page
   sets html{font-size:14px} (css/map.css), so rem-based padding rendered this
   same drawer at 87.5% scale there while every other page got 16px. These px
   values are the exact 16px equivalents of the rem values they replaced, so
   index/pricing/pro are byte-identical in output and /map now matches them.
   Do not reintroduce rem in this file.

   Responsive marketing header (index / pricing / pro).
   Two tiers:
   - Full (>=1130px): Challenge / Enter / Trust / Solution / Map / Pro inline.
   - Hamburger (<1130px): the inline nav hides; a hamburger button sits at the
     far left, right after the Nucleaus logo, and opens a dropdown holding
     Challenge / Enter / Trust / Solution / Map / Pro (+ Log In on phones,
     where the existing CSS hides Log In from the bar below 768px).
   The logo swaps to the compact hex mark below 768px (same swap the
   768-1023px range already uses) so everything fits down to 320px.
   Requires js/nav.js for the toggle.
   ========================================================================== */

/* --- Bar height: ONE value for the whole site ------------------------------
   Every page's header derives from --mkt-h, so the site never again has a
   different menu height per page. header.h-20 / main.pt-20 outrank Tailwind's
   .h-20 / .pt-20 on specificity, so no !important is needed. */
:root { --mkt-h: 70px; }
@media (max-width: 1129px) { :root { --mkt-h: 64px; } }

header.h-20   { height: var(--mkt-h); }
main.pt-20    { padding-top: var(--mkt-h); }
.scroll-mt-20 { scroll-margin-top: var(--mkt-h); }

.nav-burger { display: none; }

/* --- Site header (.mkt-*) -------------------------------------------------
   Used by pages that do not carry the Tailwind marketing header (map,
   listing). Same bar, same geometry, same two tiers - defined ONCE here so
   these pages can never drift from index/pricing/pro again. */
/* ---- Site marketing header ------------------------------------------
   Mirrors index/pricing/pro EXACTLY: the bar is full-bleed black, but its
   contents sit in the same 1280px centered .institutional-container those
   pages use, with 40px (px-10) pads on the logo and action groups. Every
   value below was measured off pro.html rather than eyeballed - the mono
   stack, 13px/1.3px type and 10px/24px button geometry all come from there.
   >=1130px: inline nav + PRICING / START PRO / LOG IN, no hamburger.
   <1130px:  nav and CTAs drop out; the hamburger alone opens the drawer. */
.mkt-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  /* 70px desktop / 64px below 1130 - see --mkt-h. Nothing inside resizes:
     logo stays 40px, CTAs stay 35px. */
  height: var(--mkt-h);
  /* Above every piece of map chrome that can overlap it - side panel (400),
     filter dropdowns (500), dimension menu (300), hint (210), zoom intro
     (200). Deliberately BELOW the showcase modal (900), which is a real
     modal and should cover the bar. */
  z-index: 800;
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.mkt-inner {
  max-width: 1280px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* .institutional-container carries these 1px rules on the marketing pages.
     The header markup there asks for border-l-0/border-r-0, but the page's
     inline <style> is declared after tailwind.css and wins - so the borders
     DO render, and the map bar needs them to line up. */
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
.mkt-logo { display: flex; align-items: center; gap: 8px; padding: 0 40px; }
.mkt-logo img { height: 40px; width: auto; display: block; }
/* margin-right matches .nucleaus-header-pad's 20px on the marketing pages,
   which is why their CTAs stop 21px short of the container edge. */
.mkt-actions { display: flex; align-items: center; gap: 12px; padding: 0 40px; margin-right: 20px; }

.mkt-nav { display: flex; align-items: center; gap: 40px; height: 100%; }

/* Desktop menu is LEFT-JUSTIFIED, not centered: the nav fills the space
   between the logo block and the CTAs, and its items align to the start.
   Applies to both header variants so the menu sits identically on every
   page regardless of how many items it holds. */
header nav { flex: 1 1 0%; justify-content: flex-start; padding-left: 50px; }
.mkt-nav { flex: 1 1 0%; justify-content: flex-start; padding-left: 50px; }
.mkt-nav a {
  position: relative; display: flex; align-items: center; height: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px; font-weight: 400; letter-spacing: 1.3px;
  text-transform: uppercase; color: #A1A1AA;
  text-decoration: none; white-space: nowrap;
  transition: color 0.15s ease;
}
.mkt-nav a:hover { color: #FFFFFF; }
.mkt-nav a.is-active { color: #FFFFFF; }
.mkt-nav a.is-active::after {
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: #EC6644;
}

.mkt-btn {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px; font-weight: 700; letter-spacing: 1.3px;
  text-transform: uppercase; text-decoration: none;
  padding: 10px 24px; min-width: 112px; text-align: center;
  line-height: 15px;   /* 35px tall - matches nav.css's shared header CTA rule */
  white-space: nowrap; display: inline-block;
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.mkt-btn-pricing { background: #EC6644; color: #FFFFFF; }
.mkt-btn-pricing:hover { background: #FFFFFF; color: #000000; box-shadow: inset 0 0 0 1px #FFFFFF; }
/* Gold outline via inset shadow, not border - same as .nucleaus-login-btn,
   so the button box measures identically to Pricing. */
.mkt-btn-pro { background: transparent; color: #F2C84A; box-shadow: inset 0 0 0 1px rgba(242, 200, 74, .76); }
.mkt-btn-pro:hover { background: #FFFFFF; color: #000000; box-shadow: inset 0 0 0 1px #FFFFFF; }
.mkt-login {
  /* 15px on top of the row's 12px gap - matches .nucleaus-header-login-link,
     which sets the same margin so Log In sits clear of the Start Pro box. */
  margin-left: 15px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px; font-weight: 400; letter-spacing: 1.3px;
  text-transform: uppercase; color: #F2C84A;
  text-decoration: none; white-space: nowrap;
  transition: color 0.15s ease;
}
.mkt-login:hover { color: #FFFFFF; }

/* --- Hamburger tier: <1130px ---------------------------------------------- */
@media (max-width: 1129px) {
  header nav { display: none !important; } /* the inline desktop nav */

  .nav-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-right: 6px; /* a touch of extra air before the Pricing button */
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
  }
  .nav-burger:hover { border-color: rgba(255, 255, 255, 0.6); }
  /* Pricing and Start Pro live in the drawer below 1130, but Log In stays on
     the bar - it is the one action a returning user needs without opening a
     menu. It sits immediately left of the hamburger at every width. */
  .nucleaus-cta-mobile { display: none !important; }
  .nucleaus-header-login-link { display: inline-block; order: 1; }
  .nav-burger { margin-right: 0; margin-left: auto; order: 2; }

  /* .mkt-* pages: hamburger alone, with the SAME pads .nucleaus-header-pad
     uses on the Tailwind pages, so the logo and burger land in identical
     spots on every page. */
  .mkt-nav { display: none !important; }
  .mkt-btn { display: none !important; }
  .mkt-login { display: inline-block; order: 1; }
  .mkt-actions .nav-burger { margin-right: 0; order: 2; }

  /* Slimmer bar below 1130 - the hamburger sets the scale. Height itself
     comes from --mkt-h above; the drawer docks to the new bottom edge and
     page content moves up with it. */
  .nav-burger svg { width: 18px; height: 18px; display: block; }
  .nav-burger .nav-burger-close { display: none; }
  .nav-burger[aria-expanded="true"] .nav-burger-open { display: none; }
  .nav-burger[aria-expanded="true"] .nav-burger-close { display: block; }
}

/* .mkt-* pages at desktop: the inline nav carries navigation, no hamburger. */
@media (min-width: 1130px) {
  .mkt-header .nav-burger { display: none !important; }

  /* These pages are edge-to-edge app surfaces, not the laid-out marketing
     grid, so the 1280px container's hairlines have nothing to align to.
     TRANSPARENT rather than removed: the box keeps its 1px borders, so the
     nav and CTAs stay put to the pixel. */
  .mkt-inner { border-color: transparent; }

  /* Float the wordmark out of the container to the page's left edge (x=20).
     The logo normally lands at container-left + 1px border + 40px pad, so
     shift by the difference; position:relative keeps it purely visual, so
     the nav and CTAs do not move. */
  .mkt-logo {
    position: relative;
    left: calc(20px - 41px - max(0px, (100vw - 1280px) / 2));
  }
}

/* .nucleaus-header-pad tightens its gap to 8px at <=480 on the Tailwind
   pages; match it so Log In sits the same distance from the burger. */
@media (max-width: 480px) {
  .mkt-actions { gap: 8px; }
}

/* Compact hex mark instead of the full wordmark on phones, so logo +
   hamburger + Pricing + Start Pro fit down to 320px-wide viewports. */
@media (max-width: 767px) {
  .nucleaus-mark { display: none !important; }
  .nucleaus-wordmark { display: block !important; height: 32px !important; }
  /* .mkt-* pages follow the identical phone steps: the marketing pages shrink
     .nucleaus-header-pad from 40px to 16px here and drop the wordmark to
     32px, so the .mkt-* header does exactly the same. */
  .mkt-logo, .mkt-actions { padding-left: 16px !important; padding-right: 16px !important; }
  .mkt-logo img { height: 32px; }
  /* .nucleaus-header-pad.gap-3's 20px margin is scoped to >=768px there, so
     drop it here too or the burger sits 20px further in on phones. */
  .mkt-actions { margin-right: 0; }
}

/* Very narrow phones (<=359px): tighten paddings so nothing spills past
   the right edge. */
@media (max-width: 359px) {
  .nucleaus-header-pad,
  .mkt-logo, .mkt-actions { padding-left: 12px !important; padding-right: 12px !important; }
  .nucleaus-cta-mobile { padding-left: 10.4px !important; padding-right: 10.4px !important; }
  header .items-center.gap-3 { gap: 8px; }
}

/* --- Header CTA height ---------------------------------------------------
   Pricing + Start Pro are 35px on every page. index/pricing/pro inherit
   Tailwind's preflight line-height:1.5 (19.5px at 13px) which made them
   39.5px; the map page does not load the preflight, so it computed 'normal'
   (15px) => 35px. State it here so all pages match the map's tighter button
   instead of depending on whether the host page loads Tailwind. */
.nucleaus-header-pad .explore-map-btn,
.nucleaus-header-pad .nucleaus-login-btn { line-height: 15px; }

/* Header Pricing button: text sits 1px higher (owner 2026-09-23). The box
   height is unchanged - 1px moves from the top padding to the bottom.
   Same on every page: Tailwind-built headers and the map/listing header. */
.nucleaus-header-pad a.explore-map-btn[href="/pricing"],
.mkt-btn.mkt-btn-pricing { padding-top: 9px !important; padding-bottom: 11px !important; }

/* --- Dropdown panel ------------------------------------------------------- */
.nav-mobile-menu {
  display: none;
  /* Explicit, for the same reason the units are px: index/pricing/pro inherit
     line-height:1.5 from Tailwind's preflight, which map.html does not load.
     Stating it here keeps the drawer identical on every page. */
  line-height: 1.5;
  position: fixed;
  top: var(--mkt-h); /* docks to the bar, whatever height it is */
  left: 0;
  right: 0;
  z-index: 49;
  background: #000;
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.45);
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
.nav-mobile-menu.open { display: grid; grid-template-columns: 0.91fr 1.09fr; }
@media (min-width: 1130px) { .nav-mobile-menu { display: none !important; } }

/* Page dims behind the open panel; tapping the dim area closes (nav.js). */
.nav-mobile-menu.open::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 11, 0.55);
}

/* --- Groups: labeled sections instead of a bare grid ---------------------- */
.nav-menu-group { padding: 5.6px 0 13.6px; min-width: 0; }
.nav-menu-group + .nav-menu-group { border-left: 1px solid rgba(255, 255, 255, 0.16); }
/* Product column tucks in closer to its divider */
.nav-menu-group + .nav-menu-group .nav-menu-label,
.nav-menu-group + .nav-menu-group a { padding-left: 16px; }

.nav-menu-label {
  padding: 14.4px 24px 4.8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #f2c84a;
}

.nav-mobile-menu a {
  display: block;
  position: relative;
  padding: 12.8px 24px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4d4d8;
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-mobile-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
/* gold tick on hover - same accent language as the footer links */
.nav-mobile-menu a:hover::after {
  content: '';
  position: absolute;
  left: 10.4px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: #f2c84a;
  border-radius: 1px;
}
/* Only the item for the ACTIVE page/section is yellow (static class on
   pro/pricing; driven by the scroll-spy on index). */
.nav-mobile-menu a.nav-mobile-active { color: #f2c84a; }

/* --- Bottom action row: Pricing + Start Pro, identical on every page ----- */
.nav-menu-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  padding: 16px 24px 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.nav-mobile-menu .nav-menu-actions a {
  flex: 1;
  padding: 12.8px 8px;
  text-align: center;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
}
.nav-mobile-menu .nav-menu-actions a:hover::after { display: none; }
.nav-mobile-menu a.nav-act-pricing { background: #EC6644; color: #FFFFFF; }
.nav-mobile-menu a.nav-act-pricing:hover { background: #FF784F; color: #FFFFFF; }
.nav-mobile-menu a.nav-act-pro { border: 1px solid #F2C84A; color: #F2C84A; }
.nav-mobile-menu a.nav-act-pro:hover { background: #F2C84A; color: #000000; }

/* Product rows: title + one-line description + arrow */
.nav-mobile-menu a.nav-item-dest { display: flex; align-items: center; gap: 12px; }
.nav-item-main { flex: 1 1 auto; min-width: 0; }
.nav-item-desc {
  display: block;
  white-space: nowrap;   /* authored <br> breaks only - no reflow per device */
  margin-top: 3px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: #71717a;
}
.nav-mobile-menu a:hover .nav-item-desc { color: #a1a1aa; }
.nav-item-arrow {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.28);
  font-size: 14px;
  transition: color 0.2s ease;
}
.nav-mobile-menu a:hover .nav-item-arrow { color: #f2c84a; }


/* --- Button on a white background (owner 2026-09-23) ------------------------
   One style for every CTA that sits on white: white fill, 2px black border,
   black mono label; on hover it fills black with Nucleaus gold text and the
   arrow slides right. Same look as the /pro top button. */
.nx-btn-light {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  padding: 1.15rem 2rem;
  background: #fff; color: #000; border: 2px solid #000; border-radius: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.nx-btn-light .nx-btn-arrow { display: inline-block; transition: transform .35s cubic-bezier(0.4, 0, 0.2, 1); }
.nx-btn-light:hover, .nx-btn-light:focus-visible { background: #000; color: #f2c84a; }
.nx-btn-light:hover .nx-btn-arrow, .nx-btn-light:focus-visible .nx-btn-arrow { transform: translateX(6px); }