/* Shared site navigation bar.
   Split out of styles.css so kura.html can wear the same nav as the rest of the
   site: that page loads kura.css instead of styles.css (see CLAUDE.md), so the
   nav rules had to live somewhere both stylesheets' pages can pull in. Every
   page loads this file; nothing else belongs in it. It is self-contained on
   purpose — it assumes no reset and no base `a` rule from styles.css, because on
   kura.html there is none. */

/* The gradient CTA ("Talk to us"), on every page. Deliberately static: it used to
   animate background-position, which is not compositable, so Chrome re-rasterised
   the button every frame inside the position:fixed nav — a permanent 60fps repaint
   that also forced the nav pill's backdrop-filter to re-blur. This is the frame it
   used to rest on; the 300%/0% sizing is what picks that frame out of the ramp.
   Also used by the hero CTAs on index.html. */
.cta-grad{background:linear-gradient(135deg,#7F5AF0,#09A5E9,#2CB67D,#09A5E9,#7F5AF0);background-size:300% 100%;background-position:0% 50%}

.nav-outer a{text-decoration:none}
.nav-burger{display:none}
.nav-links{display:flex;align-items:center;gap:28px;position:absolute;top:0;right:24px;height:56px}
.nav-links a{font-size:13px}
.nav-links a.nav-cta{padding:8px 18px;border-radius:9999px}

/* Dropdown menus: shown on hover/click via app.js toggling the .open class */
.dropdown-panel{display:none}
.dropdown-panel.open{display:block}
/* Row titles/descriptions carry inline white-space:nowrap so English labels stay on
   one line, but French labels (e.g. "Politique de confidentialité") are wider than the
   panel and were spilling past its background. Let them wrap instead. */
.dropdown-panel span{white-space:normal !important}

/* Hover states (converted from the design canvas style-hover attributes) */
.hv1:hover{color:#FFFFFF}
.hv2:hover{background:rgba(255,255,255,0.06);color:#FFFFFF}
.hv3:hover{background:rgba(255,255,255,0.06);color:#FFFFFF}
.hv4:hover{background:rgba(255,255,255,0.06);color:#FFFFFF}
.hv5:hover{color:#FFFFFF}
.hv6:hover{background:rgba(255,255,255,0.06);color:#FFFFFF}
.hv7:hover{background:rgba(255,255,255,0.06);color:#FFFFFF}
.hv8:hover{background:rgba(255,255,255,0.06);color:#FFFFFF}
.hv9:hover{background:rgba(255,255,255,0.06);color:#FFFFFF}
.hv10:hover{color:#FFFFFF}
.hv11:hover{opacity:0.8}
.hv12:hover{box-shadow:0 0 32px rgba(9,165,233,0.35);color:#FFFFFF}

/* The Log In link in the nav-links cluster: plain text, not a pill. Gradient
   text on every page except kura.html, which is a solid mint to match its own
   product color and links to the Kura dashboard instead of the main
   Singlespot one. */
.nav-login{font-weight:700;background:linear-gradient(135deg,#7F5AF0,#09A5E9,#2CB67D,#09A5E9,#7F5AF0);background-size:300% 100%;background-position:0% 50%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.login-kura{-webkit-text-fill-color:unset;background:none;color:var(--ss-mint)}

@media (max-width:860px){
  .nav-shell{padding:0 16px !important;height:52px !important}
  .nav-outer{left:12px !important;right:12px !important;top:12px !important}
  .nav-links{top:calc(100% + 10px);left:0;right:0;height:auto;flex-direction:column;align-items:stretch;gap:4px;padding:0 14px;box-sizing:border-box;border-radius:20px;background:rgba(9,6,15,0.92);backdrop-filter:blur(24px) saturate(1.6);border:1px solid rgba(255,255,255,0.08);box-shadow:0 12px 40px rgba(0,0,0,0.5);max-height:0;opacity:0;overflow:hidden;pointer-events:none;transition:max-height .3s ease, opacity .22s ease, padding .3s ease}
  .nav-links[data-open="true"]{max-height:2000px;opacity:1;padding:14px;pointer-events:auto}
  .nav-links a{padding:12px 14px;border-radius:12px;font-size:15px;-webkit-tap-highlight-color:transparent}
  .nav-links a.nav-cta{margin-top:6px;text-align:center;padding:13px 18px}
  .nav-burger{display:flex;-webkit-tap-highlight-color:transparent}
  .nav-sub{position:static !important;flex-direction:column !important;align-items:stretch !important;height:auto !important;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-sub svg{transition:transform .2s ease}
  .nav-sub.menu-open svg{transform:rotate(180deg)}
  .dropdown-panel{display:block !important;position:static !important;top:auto !important;right:auto !important;width:auto !important;margin-top:0;padding:0 !important;max-height:0;opacity:0;overflow:hidden;background:none !important;border:0 !important;border-radius:0 !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;transition:max-height .28s ease, opacity .22s ease, margin-top .28s ease, padding .28s ease}
  .dropdown-panel span{white-space:normal !important}
  .dropdown-panel.open{max-height:600px;opacity:1;margin-top:2px;padding:2px 0 6px !important}
  .dropdown-panel-heading{display:none !important}
}