/* === VAXONYX — Global Styles (CLEAN, Unified Nav Font) === */

/* ---------- Design tokens ---------- */
:root{
  --vx-blue:#1B427A;
  --vx-ink:#0b1b3a;
  --vx-line:#e6ebf4;
  --vx-orange:#F26B3B;

  --max:1180px;
  --edge:16px;

  --logo-h:42px;
  --header-h:68px;

  /* === NAV TYPOGRAPHY VARS === */
  --nav-top-size:15px;   /* Top-level menu font size */
  --nav-dd-size:15px;    /* Dropdown font size */
  --nav-weight:700;
  --nav-line:1.25;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--vx-ink); background:#fff;
  display:flex; flex-direction:column; min-height:100vh;
}
main{ flex:1; }
.container{ width:min(var(--max),100% - 2*var(--edge)); margin-inline:auto; }
img{ max-width:100%; height:auto; display:block; }
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* =========================================================
   Header / Navigation
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:3000;
  background:#fff; border-bottom:1px solid var(--vx-line);
  height:var(--header-h);
}
.header-row{ height:var(--header-h); display:flex; align-items:center; gap:24px; }
.brand{ display:inline-flex; align-items:center; min-width:0; }
.brand-logo{ height:var(--logo-h); display:block; }

/* Hamburger: hidden on desktop; shown via mobile media query */
.menu-toggle,
.menu-toggle:focus,
.menu-toggle:active{
  border:0; outline:0; box-shadow:none;
  background:transparent; color:var(--vx-blue);
  font-size:26px; line-height:1; padding:0; margin:0;
  cursor:pointer; display:none;
}

/* Primary nav row */
.site-nav{ margin-left:auto; }
.menu{
  display:flex; align-items:center; gap:22px;
  padding:0; margin:0; list-style:none;
}
.menu>li{ position:relative; }

/* ---------- Unified Nav Font (Top-level + Dropdown) ---------- */
.site-header .menu > li > a,
.site-header .dropdown-link,
.site-header .submenu-link{
  font-size:var(--nav-top-size);
  line-height:var(--nav-line);
  font-weight:var(--nav-weight);
  color:var(--vx-blue);
  letter-spacing:.2px;
  text-decoration:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.site-header .menu a:hover{ text-decoration:underline; }
.site-header .menu a:visited{ color:var(--vx-blue); }

/* ---------- Dropdowns (desktop hover) ---------- */
.dropdown-menu{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  background:#fff;
  border:1px solid var(--vx-line);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  display:none;
  min-width:260px;
  padding:8px;
  z-index:3100;
}

/* ✅ Hover bridges — prevent flicker between parent & dropdown */
.dropdown::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:12px; /* same as gap above */
}
.has-sub::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:100%;
  width:8px; /* small horizontal hover zone */
}

.dropdown:hover .dropdown-menu,
.dropdown:focus-within .dropdown-menu{ display:block; }

/* Submenu (flyout) */
.has-sub{ position:relative; }
.submenu{
  position:absolute;
  top:-1px;
  left:100%;
  background:#fff;
  border:1px solid var(--vx-line);
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.12);
  display:none;
  min-width:240px;
  padding:8px;
  z-index:3200;
}
.has-sub:hover>.submenu,
.has-sub:focus-within>.submenu{ display:block; }

/* ---------- Dropdown Item Typography ---------- */
.dropdown-menu a,
.submenu a{
  font-size:var(--nav-dd-size);
  line-height:var(--nav-line);
  font-weight:var(--nav-weight);
  display:block;
  padding:7px 10px;
  border-radius:8px;
  color:var(--vx-blue);
  text-decoration:none;
  white-space:nowrap;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.dropdown-menu a:hover,
.submenu a:hover{ background:rgba(27,66,122,.08); }

/* Remove bullets, unify spacing */
.menu, .menu li,
.dropdown-menu, .dropdown-menu li,
.submenu, .submenu li{
  list-style:none;
  margin:0;
  padding:0;
}
.dropdown-menu li + li,
.submenu li + li{ margin-top:6px; }

/* ---------- “Ask Vaxonyx AI” button ---------- */
.vx-fab{
  border:0; border-radius:999px; padding:10px 14px;
  background:var(--vx-orange); color:#fff; font-weight:800;
  box-shadow:0 10px 22px rgba(242,107,59,.36); cursor:pointer;
}
.vx-fab:hover{ filter:brightness(1.06); }
.vx-fab-desktop{ display:inline-flex; }
.ai-inline{ display:none; }

/* =========================================================
   Homepage Hero (tight)
   ========================================================= */
.vx-hero{
  background:linear-gradient(to bottom,#2196f3,#001c39);
  color:#fff; text-align:center;
  padding:180px 20px 120px;
  min-height:640px;
  display:flex; align-items:center; justify-content:center;
}
.vx-hero .vx-inner{ width:min(1120px,92%); margin-inline:auto; }
.vx-hero .vx-line{
  margin:0; font-weight:800; line-height:1.12; color:#fff;
  font-size:clamp(22px,3.2vw,40px);
}
.vx-hero .vx-line + .vx-line{ margin-top:28px; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  border-top:1px solid var(--vx-line);
  background:#f7f9fc;
  color:var(--vx-ink);
}
.footer-grid{
  display:grid; grid-template-columns:1.3fr .9fr 1.1fr;
  gap:32px; padding:48px 0 28px;
  width:min(var(--max),100% - 2*var(--edge)); margin-inline:auto;
}
.foot-brand .brand-logo{ height:var(--logo-h); margin-bottom:12px; }
.foot-brand p{ margin:14px 0 0; line-height:1.6; color:#0b1b3a; }

.foot-title{ font-weight:800; font-size:1.05rem; color:#0b1b3a; margin:0 0 8px; }
.foot-subtitle{ font-weight:700; color:#0b1b3a; margin-top:12px; margin-bottom:4px; }

.links{ padding:0; margin:0; list-style:none; }
.links li+li{ margin-top:6px; }
.links a{ color:var(--vx-blue); font-weight:600; text-decoration:none; }
.links a:hover{ text-decoration:underline; }
.site-footer a:visited{ color:var(--vx-blue); }

.email{ color:var(--vx-blue); text-decoration:none; display:inline-block; margin-top:2px; font-weight:600; }
.email:hover{ text-decoration:underline; }

.foot-follow{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.foot-follow .follow-label{ font-weight:800; color:#0b1b3a; }

/* LinkedIn pill button */
.btn-social{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.45rem 1.1rem; border-radius:9999px;
  background:#fff; border:1.5px solid var(--vx-line);
  color:var(--vx-blue); font-weight:700; text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.05);
  transition:all .2s ease;
}
.btn-social.linkedin{ color:#1B427A!important; }
.btn-social.linkedin:hover,
.btn-social.linkedin:focus{
  background:#1B427A!important;
  color:#fff!important;
  border-color:#1B427A!important;
  text-decoration:none!important;
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(27,66,122,.25);
}

.footer-bottom{
  padding:16px 0 22px; text-align:center;
  color:#6b7a90; font-size:14px; border-top:1px solid var(--vx-line);
}

/* =========================================================
   Responsive
   ========================================================= */

/* Desktop: ensure hamburger is hidden */
@media (min-width:921px){
  .menu-toggle{
    display:none!important;
    width:0!important; height:0!important;
    overflow:hidden!important; padding:0!important; margin:0!important;
    border:0!important; background:transparent!important; box-shadow:none!important;
  }
}

/* Mobile / Tablet */
@media (max-width:920px){
  :root{ --logo-h:36px; --header-h:64px; }

  .menu-toggle{
    display:inline-flex!important;
    align-items:center; justify-content:center;
    touch-action:manipulation;
  }

  .site-nav{
    position:fixed; inset:var(--header-h) 0 0 0;
    background:#fff; transform:translateX(100%); transition:transform .25s ease;
    border-top:1px solid var(--vx-line); padding:10px 0 24px; overflow:auto;
    z-index:3500; -webkit-overflow-scrolling:touch;
  }
  body.nav-open .site-nav{ transform:translateX(0); }

  .menu{ flex-direction:column; align-items:stretch; gap:8px; padding:0 16px; }

  .dropdown-menu, .submenu{
    position:static; transform:none; box-shadow:none;
    border:1px solid var(--vx-line); border-radius:10px; padding:8px; margin:6px 0 10px; display:none;
  }
  .dropdown.open > .dropdown-menu{ display:block; }
  .has-sub.open > .submenu{ display:block; }

  .footer-grid{ grid-template-columns:1fr; text-align:center; }
  .foot-follow{ justify-content:center; }

  .vx-fab-desktop{ display:none; }
  .ai-inline{ display:block; }

  .vx-hero{ padding:120px 16px 90px; min-height:520px; }
  .vx-hero .vx-line{
    white-space:normal; line-height:1.24;
    font-size:clamp(20px,5vw,28px);
  }
  .vx-hero .vx-line + .vx-line{ margin-top:20px; }
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}