/* COSIMO corporate nav. Single source of truth. Scoped under .cosimo-nav so it never
   collides with a page's own inline styles. Category accent switches via a body class:
   default = Geometric Video / general (blue); body.cat-security = Security (deep teal text,
   bright cyan reserved for underlines and dark surfaces). */

:root{
  --nav-ink:#0a0e14; --nav-muted:#4b5563; --nav-muted-2:#6b7280;
  --nav-rule:#e4e9f0; --nav-hairline:#eef1f5;
  --nav-surface:rgba(255,255,255,.94); --nav-subsurface:rgba(247,249,252,.9);
  --nav-accent-ink:#1155CC;        /* accent used as TEXT on light surfaces */
  --nav-accent-underline:#1155CC;  /* accent used as underline / border */
}
body.cat-security{
  --nav-accent-ink:#157496;        /* deep teal, WCAG AA on light */
  --nav-accent-underline:#7ec8e8;  /* bright cyan reserved for the underline */
}

html{scroll-behavior:smooth}

.cosimo-nav{position:sticky;top:0;z-index:100;background:var(--nav-surface);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);font-family:'Inter',system-ui,-apple-system,sans-serif}
.cosimo-nav .nav-primary{border-bottom:1px solid var(--nav-rule)}
.cosimo-nav .nav-primary .row{max-width:1240px;margin:0 auto;padding:15px 20px;display:flex;align-items:center;gap:28px}
.cosimo-nav .wordmark{font-family:'Poppins','Helvetica Neue',system-ui,sans-serif;color:var(--nav-ink);text-decoration:none;font-weight:700;font-size:24px;letter-spacing:.02em;line-height:1}
.cosimo-nav .np-nav{margin-left:auto;display:flex;align-items:center;gap:30px}
.cosimo-nav .np-nav a{font-size:15px;font-weight:500;color:var(--nav-muted);text-decoration:none;white-space:nowrap;transition:color .15s}
.cosimo-nav .np-nav a:hover{color:var(--nav-ink)}
.cosimo-nav .np-nav a.active{color:var(--nav-ink);font-weight:600}

.cosimo-nav .nav-sub{border-bottom:1px solid var(--nav-rule);background:var(--nav-subsurface)}
.cosimo-nav .nav-sub .row{max-width:1240px;margin:0 auto;padding:0 20px;display:flex;align-items:center;gap:28px;overflow-x:auto;scrollbar-width:none}
.cosimo-nav .nav-sub .row::-webkit-scrollbar{display:none}
.cosimo-nav .nav-sub .sub-label{font-family:'Poppins',system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--nav-accent-ink);white-space:nowrap}
.cosimo-nav .nav-sub a{font-size:13.5px;font-weight:500;color:var(--nav-muted-2);text-decoration:none;white-space:nowrap;padding:12px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.cosimo-nav .nav-sub a:hover{color:var(--nav-ink)}
.cosimo-nav .nav-sub a.spy-active,.cosimo-nav .nav-sub a[aria-current="page"]{color:var(--nav-ink);border-bottom-color:var(--nav-accent-underline)}

.cosimo-nav .nav-toggle{display:none;margin-left:auto;width:42px;height:42px;border:none;background:none;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0}
.cosimo-nav .nav-toggle span{display:block;height:2px;width:24px;background:var(--nav-ink);border-radius:2px;transition:transform .2s,opacity .2s}
.cosimo-nav .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cosimo-nav .nav-toggle.open span:nth-child(2){opacity:0}
.cosimo-nav .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.cosimo-nav .mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--nav-rule);box-shadow:0 12px 30px rgba(10,14,20,.14)}
.cosimo-nav .mobile-menu.open{display:block}
.cosimo-nav .mobile-menu .mm{max-width:1240px;margin:0 auto;padding:6px 20px 16px;display:flex;flex-direction:column}
.cosimo-nav .mobile-menu a{text-decoration:none}
.cosimo-nav .mobile-menu .mm-top{font-size:16px;font-weight:600;color:var(--nav-ink);padding:13px 2px;border-bottom:1px solid var(--nav-hairline)}
.cosimo-nav .mobile-menu .mm-top.active{color:var(--nav-accent-ink)}
.cosimo-nav .mobile-menu .mm-group{font-family:'Poppins',system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--nav-muted-2);padding:16px 2px 2px}
.cosimo-nav .mobile-menu .mm-sub{display:flex;flex-direction:column;padding:4px 0 8px 14px;border-bottom:1px solid var(--nav-hairline)}
.cosimo-nav .mobile-menu .mm-sub a{font-size:14.5px;font-weight:500;color:var(--nav-muted);padding:9px 2px}
.cosimo-nav .mobile-menu .mm-sub a:hover{color:var(--nav-ink)}

.cosimo-anchor{scroll-margin-top:124px}

@media(max-width:720px){
  .cosimo-nav .nav-primary .row{padding:12px 16px}
  .cosimo-nav .wordmark{font-size:20px}
  .cosimo-nav .np-nav{display:none}
  .cosimo-nav .nav-sub{display:none}
  .cosimo-nav .nav-toggle{display:flex}
  .cosimo-anchor{scroll-margin-top:78px}
}
