/* Mega-menu navigation (Products / Docs / Use cases / Platform). Uses tokens from styles.css. */

.site-header{position:relative;z-index:50}
.nav-item{display:flex;align-items:center}
.nav-trigger{display:inline-flex;align-items:center;gap:7px;padding:8px 0;border:0;background:none;color:var(--ink);font:inherit;cursor:pointer}
.nav-trigger:focus-visible{outline:2px solid #4c7b13;outline-offset:4px}
.nav-item.is-open .nav-trigger{opacity:1}


/* sliding highlight that follows the pointer across the top-level menu */
@media(min-width:821px){
  #site-nav>a:not(.nav-cta):hover,.nav-trigger:hover{opacity:1}
  .nav-glider{position:absolute;left:0;top:50%;height:34px;margin-top:-17px;width:0;background:var(--acid);border-radius:999px;z-index:0;opacity:0;pointer-events:none;
    transition:transform .45s cubic-bezier(.34,1.56,.64,1),width .45s cubic-bezier(.34,1.56,.64,1),opacity .2s}
  .nav-glider.is-on{opacity:1}
  .nav-glider::after{content:"";position:absolute;left:50%;bottom:-9px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
  .nav-glider.is-menu::after{transform:scale(1)}
  .nav-trigger,#site-nav>a{position:relative;z-index:1}
}

/* panel */
.mega{position:absolute;top:calc(100% + 10px);left:28px;right:28px;display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:0;background:var(--paper);border:1px solid var(--ink);box-shadow:14px 14px 0 var(--acid);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .25s cubic-bezier(.2,.72,.25,1),visibility 0s linear .25s;font-weight:400;z-index:5}
.mega::before{content:"";position:absolute;left:0;right:0;top:-24px;height:24px}/* hover bridge */
.mega.mega-compact{grid-template-columns:minmax(0,1fr) 300px}
.nav-item.is-open .mega{opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.72,.25,1),visibility 0s}

.mega-main{padding:30px 32px 28px}
.mega-label{display:block;margin:0 0 18px;font:500 11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.mega-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 18px}
.mega-compact .mega-grid{grid-template-columns:1fr 1fr}
.mega-narrow .mega-grid{grid-template-columns:repeat(3,1fr)}

.mega-link{display:flex;gap:14px;align-items:flex-start;padding:12px;margin:0 -12px;border-radius:2px;transition:background .18s}
nav .mega-link:hover{opacity:1;background:var(--mint)}
.mega-link:focus-visible{outline:2px solid #4c7b13;outline-offset:-2px}
.mega-icon{flex:0 0 38px;width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--ink);background:#fff;transition:background .18s,transform .25s}
.mega-icon svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mega-link:hover .mega-icon{background:var(--acid);transform:rotate(-4deg)}
.mega-text{display:flex;flex-direction:column;min-width:0}
.mega-text strong{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;letter-spacing:-.015em;color:var(--ink)}
.mega-text strong i{font-style:normal;font-weight:500;transition:transform .2s}
.mega-link:hover .mega-text strong i{transform:translateX(4px)}
.mega-text small{margin-top:3px;font-size:13px;line-height:1.45;color:#46504b}
.mega-text code,.mega-code{font:12px 'DM Mono',monospace}
.mega-text code{color:var(--muted)}

/* staggered entrance */
.mega-grid li{opacity:0;transform:translateY(6px);transition:opacity .25s,transform .3s cubic-bezier(.2,.72,.25,1)}
.nav-item.is-open .mega-grid li{opacity:1;transform:none}
.nav-item.is-open .mega-grid li:nth-child(1){transition-delay:.03s}
.nav-item.is-open .mega-grid li:nth-child(2){transition-delay:.06s}
.nav-item.is-open .mega-grid li:nth-child(3){transition-delay:.09s}
.nav-item.is-open .mega-grid li:nth-child(4){transition-delay:.12s}
.nav-item.is-open .mega-grid li:nth-child(5){transition-delay:.15s}
.nav-item.is-open .mega-grid li:nth-child(6){transition-delay:.18s}

/* featured side card */
.mega-side{position:relative;display:flex;flex-direction:column;gap:10px;padding:30px 28px;background:var(--ink);color:#fff;overflow:hidden}
.mega-side::after{content:"";position:absolute;right:-60px;bottom:-60px;width:180px;height:180px;border-radius:50%;border:1px solid rgba(183,243,67,.35);box-shadow:0 0 0 30px rgba(183,243,67,.06),0 0 0 60px rgba(183,243,67,.04);transition:transform .5s}
.mega-side:hover::after{transform:scale(1.15)}
nav a.mega-side:hover{opacity:1}
.mega-side .mega-label{color:var(--acid);margin-bottom:6px}
.mega-side strong{font-size:22px;line-height:1.15;letter-spacing:-.035em}
.mega-side-copy{font-size:13.5px;line-height:1.55;color:#aeb9b3;font-weight:400}
.mega-code{display:block;padding:9px 12px;background:#101d18;border:1px solid #223028;color:var(--acid)}
.mega-side-cta{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;font-size:13px;font-weight:700;color:var(--acid)}
nav .mega-side-cta:hover{opacity:1}
.mega-side-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.mega-side:hover .mega-side-cta svg,.mega-side-cta:hover svg{transform:translateX(4px)}

/* page dim behind an open menu */
.mega-scrim{position:fixed;inset:0;background:rgba(7,17,14,.12);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s;z-index:40;pointer-events:none}
.mega-scrim.is-on{opacity:1;visibility:visible;transition:opacity .2s}

@media(min-width:821px) and (max-width:1100px){
  .mega{grid-template-columns:minmax(0,1fr) 270px;left:18px;right:18px}
  .mega-main{padding:24px 22px}
  .mega-side{padding:24px 22px}
}

/* mobile: menu items become accordions inside the existing slide-down nav */
@media(max-width:820px){
  #site-nav{gap:0}
  nav.open{max-height:calc(100vh - 68px);overflow-y:auto}
  .nav-item{flex-direction:column;align-items:stretch;border-bottom:1px solid var(--line)}
  .nav-trigger{justify-content:space-between;width:100%;padding:14px 0;font-weight:600}
  .nav-item.is-open .nav-trigger{box-shadow:none}
  #site-nav>a{padding:14px 0;border-bottom:1px solid var(--line)}
  #site-nav>a.nav-cta{margin-top:14px;text-align:center;border:1px solid var(--ink)}
  .mega,.mega.mega-compact{position:static;display:none;grid-template-columns:1fr;border:0;box-shadow:none;background:transparent;opacity:1;visibility:visible;transform:none;transition:none}
  .mega::before{display:none}
  .nav-item.is-open .mega{display:grid}
  .mega-main{padding:0 0 14px}
  .mega-label{display:none}
  .mega-grid,.mega-compact .mega-grid{grid-template-columns:1fr;gap:0}
  .mega-grid li{opacity:1;transform:none}
  .mega-link{padding:10px 8px;margin:0 -8px}
  .mega-icon{flex-basis:32px;width:32px;height:32px}
  .mega-side{display:none}
  .mega-scrim{display:none}
}

@media(prefers-reduced-motion:reduce){
  .mega,.mega-grid li,.mega-icon,.mega-side::after,.nav-glider{transition:none!important}
}

/* Docs menu: package links to PyPI */
.mega-pypi-label{margin:6px 0 0!important}
.mega-pypi{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px}
.mega-pypi a{padding:5px 8px;border:1px solid #2b3a33;font:500 11px 'DM Mono',monospace;color:#dfe6e1;transition:background .18s,color .18s,border-color .18s}
nav .mega-pypi a:hover{opacity:1;background:var(--acid);border-color:var(--acid);color:var(--ink)}

/* ---- Phone header: glider hidden, Menu button flush right and themed ---- */
.nav-glider{display:none}
@media(min-width:821px){.nav-glider{display:block}}
@media(max-width:820px){
  .site-header{gap:12px}
  .site-header>a:first-child{min-width:0}
  .nav-toggle{margin-left:auto;display:inline-flex!important;align-items:center;gap:9px;min-height:42px;padding:9px 14px;
    color:var(--ink);background:var(--paper);border:1px solid var(--ink);border-radius:0;
    -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;font-weight:700;font-size:14px;line-height:1;cursor:pointer}
  .nav-toggle::before{content:"";width:16px;height:2px;background:var(--ink);box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink);transition:transform .2s,box-shadow .2s}
  .nav-toggle[aria-expanded=true]{background:var(--acid)}
  .nav-toggle[aria-expanded=true]::before{height:16px;box-shadow:none;background:linear-gradient(45deg,transparent 44%,var(--ink) 44%,var(--ink) 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--ink) 44%,var(--ink) 56%,transparent 56%)}
  .nav-toggle:focus-visible{outline:2px solid #4c7b13;outline-offset:3px}
  #site-nav{padding:14px 20px 22px;box-shadow:0 18px 30px rgba(7,17,14,.08)}
  #site-nav a,.nav-trigger{color:var(--ink)}
}

/* desktop menu spacing per width: a clear space after the logo (brand margin), then the menu items.
   Tuned so all items (with their arrows) stay on one row and inside the page edges. */
@media(min-width:821px){.site-header .brand{margin-right:40px!important}}
@media(min-width:1241px){#site-nav{gap:26px!important;font-size:14px!important}}
@media(min-width:1101px) and (max-width:1240px){#site-nav{gap:18px!important;font-size:13px!important}}
@media(min-width:1001px) and (max-width:1100px){#site-nav{gap:11px!important;font-size:12.5px!important}.site-header .brand{margin-right:28px!important}}
@media(min-width:901px) and (max-width:1000px){#site-nav{gap:8px!important;font-size:11.5px!important}.site-header .brand{margin-right:22px!important}.nav-cta{padding:8px 9px!important}}
@media(min-width:821px) and (max-width:900px){#site-nav{gap:5px!important;font-size:11px!important}.site-header .brand{font-size:15px!important;margin-right:18px!important}.nav-cta{padding:8px 9px!important}}

@media(min-width:821px) and (max-width:845px){#site-nav{gap:3px!important}}
@media(min-width:1001px) and (max-width:1020px){#site-nav{gap:9px!important}.site-header .brand{margin-right:22px!important}}
@media(min-width:1101px) and (max-width:1115px){#site-nav{gap:17px!important}}

/* Docs and Use cases: their dark card was taller than the links, leaving an empty band under the
   last row. Keep the rows at their normal spacing and make the card compact instead. */
@media(min-width:821px){
  #mega-docs .mega-side,#mega-usecases .mega-side{gap:7px;padding-top:24px;padding-bottom:22px}
  #mega-docs .mega-side strong,#mega-usecases .mega-side strong{font-size:19px}
  #mega-docs .mega-side-copy,#mega-usecases .mega-side-copy{font-size:13px;line-height:1.45}
  #mega-docs .mega-pypi-label,#mega-usecases .mega-pypi-label{margin:2px 0 0!important}
  #mega-docs .mega-side-cta,#mega-usecases .mega-side-cta{padding-top:8px}
  #mega-docs .mega-grid,#mega-usecases .mega-grid{gap:14px 18px}
}
@media(min-width:821px) and (max-width:1100px){#mega-docs .mega-side-copy,#mega-usecases .mega-side-copy{display:none}}

/* ---- dropdown arrow: a small chevron after Platform / Products / Docs / Use cases so visitors can see they open
   a menu; it flips while that menu is open. Desktop only (phones use the +/- boxes). ---- */
@media(min-width:821px){
  #site-nav [aria-controls=mega-products]::after,#site-nav [aria-controls=mega-docs]::after,#site-nav [aria-controls=mega-usecases]::after,#site-nav [aria-controls=mega-platform]::after{
    content:"";width:6px;height:6px;margin:-4px 0 0 -1px;border-right:1.7px solid currentColor;border-bottom:1.7px solid currentColor;
    transform:rotate(45deg);transition:transform .25s cubic-bezier(.2,.72,.25,1)}
  #site-nav .nav-item.is-open>.nav-trigger::after{transform:translateY(3px) rotate(225deg)}
}
@media(prefers-reduced-motion:reduce){#site-nav .nav-trigger::after{transition:none}}