/* chrome.css — shared site-chrome styles (single source).
   Linked at the top of partials/nav.html, so tools/sync-chrome.mjs stamps it into
   every page. It loads AFTER each page's inline <style>, so at equal specificity
   these rules win. Edit here; never patch chrome CSS inside a page.
   2026-07-21: created for the two user-reported responsive bugs. */

/* ---------- layout helper for the nav's right side (was an inline style) ---------- */
.navright{ display:flex; align-items:center; gap:22px; }

/* ---------- FIX 1 · mega-menu overflow (user report: at mid-widths the Product
   menu hung off the LEFT viewport edge). The menu now centers under the NAV BAR
   (position:static on the li, .nav as the containing block) and is capped to the
   bar's width — it can never leave the viewport. ---------- */
.nav{ position:relative; }
.nav li.has-menu.mega{ position:static; }
li.has-menu .menu-product{ left:0; right:0; margin:0 auto; width:min(860px,100%);
  transform:translateY(8px); }
li.has-menu:hover .menu-product, li.has-menu:focus-within .menu-product{
  transform:translateY(0); }

/* ---------- desktop hover intent. The page-level menu sits 10px below the
   trigger; this invisible bridge makes that gap traversable. JS keeps the menu
   open briefly as a second guard against diagonal or slightly imprecise travel. ---------- */
@media (min-width:1021px) and (hover:hover) and (pointer:fine){
  li.has-menu .menu::before{
    content:""; position:absolute; left:0; right:0; top:-12px; height:12px;
  }
  li.has-menu.menu-open .menu{ opacity:1; pointer-events:auto; }
  li.has-menu.mega.menu-open .menu-product{ transform:translateY(0); }
}

/* ---------- one menu at a time (user report: Product + Solutions overlapped).
   A CLICKED button keeps focus → :focus-within pins its menu open while ANOTHER
   item is hovered. Whenever any has-menu li is hovered, suppress a focus-held
   menu that isn't the hovered one. ---------- */
@media (min-width:1021px){
  .nav ul.links:has(li.has-menu:hover) li.has-menu:focus-within:not(:hover) .menu{
    opacity:0; pointer-events:none;
  }
}

/* ---------- FIX 2 · mobile menu (user report: at ≤1020px the entire nav
   disappeared — no way to navigate). A no-JS <details> disclosure; the desktop
   links/util stay hidden by each page's existing media rule. ---------- */
.mnav{ display:none; }
@media (max-width:1020px){
  .mnav{ display:block; position:static; } /* panel anchors to .nav (right:0 = the bar's right edge) */
  .mnav summary{ list-style:none; display:inline-flex; flex-direction:column;
    justify-content:center; gap:5px; width:42px; height:42px; padding:0 10px;
    border:1px solid var(--line); border-radius:10px; cursor:pointer; background:transparent; }
  .mnav summary::-webkit-details-marker{ display:none; }
  .mnav summary:hover{ border-color:rgba(31,148,96,.55); }
  .mnav summary .mbar{ display:block; height:2px; width:100%; background:var(--tx);
    border-radius:2px; transition:transform .22s, opacity .22s; }
  .mnav[open] summary .mbar:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .mnav[open] summary .mbar:nth-child(2){ opacity:0; }
  .mnav[open] summary .mbar:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .mnav:not([open]) .mpanel{ display:none; } /* closed details keep geometry in
    modern Chrome (content-visibility), which leaked horizontal overflow — remove the box */
  .mnav .mpanel{ position:fixed; top:74px; right:12px; left:auto; z-index:60;
    width:min(340px, calc(100vw - 24px)); max-height:calc(100vh - 96px); overflow:auto;
    background:#fff; border:1px solid var(--line-soft); border-radius:16px;
    box-shadow:0 30px 70px -30px rgba(26,26,31,.45), 0 8px 24px -12px rgba(26,26,31,.18);
    padding:16px 12px; }
  .mnav .mpanel .mh{ font-size:10.5px; font-weight:600; letter-spacing:.22em;
    text-transform:uppercase; color:var(--tx3); margin:14px 10px 6px; }
  .mnav .mpanel .mh:first-child{ margin-top:0; }
  .mnav .mlink{ display:block; font-family:var(--body); font-size:15px; font-weight:500;
    color:var(--tx); text-decoration:none; padding:10px; border-radius:9px; }
  .mnav .mlink:hover{ background:rgba(31,148,96,.07); }
  .navright{ gap:12px; }
}

/* tightest phones: lockup + hamburger + the pilot CTA must all fit */
@media (max-width:480px){
  .navright{ gap:10px; }
  .nav .lockup{ font-size:17px; }
  .nav .btn{ padding:9px 13px; font-size:12.5px; }
  .mnav summary{ width:38px; height:38px; padding:0 9px; }
}
@media (max-width:380px){
  .wrap{ padding:0 12px; }
  .navright{ gap:10px; }
  .nav .lockup{ font-size:14px; }
  .nav .btn{ padding:8px 10px; font-size:11.5px; }
  .mnav summary{ width:34px; height:34px; padding:0 8px; }
}

@media (prefers-reduced-motion:reduce){
  .mnav summary .mbar{ transition:none; }
}