/* ==========================================================================
   CHRIS ONLINE CYBER SERVICES — navbar.css
   A floating navy bar with a cyan accent. It sits over the navy hero and
   stays readable over the light sections once you scroll.
   Class names unchanged. Works with or without style.css loaded first.
   ========================================================================== */

/* Tokens: keep in sync with style.css */
:root{
  --navy:#0B1220;--navy-2:#111B2E;--navy-3:#18243A;
  --navy-line:rgba(148,163,184,.2);
  --on-navy:#E6EDF6;--on-navy-2:#9FB0C6;
  --cyan:#22D3EE;--cyan-soft:#67E8F9;
  --sans:"Space Grotesk",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --r-xs:6px;--r-sm:10px;--r-md:14px;--r-lg:20px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --t:180ms var(--ease);
}

/* ==========================================================================
   BAR
   ========================================================================== */

.cx-navbar{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%);
  width:min(96%,1280px);
  z-index:1000;
  font-family:var(--sans);
}

.cx-nav-shell{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px 10px 16px;
  background:rgba(11,18,32,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid var(--navy-line);
  border-radius:var(--r-md);
  transition:background var(--t),box-shadow var(--t);
}

/* after the page scrolls */
.cx-navbar.scrolled .cx-nav-shell{
  background:rgba(11,18,32,.95);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.5);
}

.cx-navbar :focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:var(--r-xs)}

/* ==========================================================================
   LOGO
   ========================================================================== */

.cx-logo{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

.cx-logo-mark{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--r-sm);
  background:var(--cyan);
  color:var(--navy);
  font-weight:700;
  font-size:1.3rem;
  line-height:1;
}

.cx-logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.cx-logo-text strong{
  color:var(--on-navy);
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.01em;
}

.cx-logo-text span{
  color:var(--on-navy-2);
  font-size:.78rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
}

/* ==========================================================================
   LINKS
   ========================================================================== */

.cx-nav-links{
  display:flex;
  gap:4px;
  align-items:center;
}

.cx-nav-links a{
  position:relative;
  padding:10px 14px;
  border-radius:var(--r-xs);
  color:var(--on-navy-2);
  text-decoration:none;
  font-size:.95rem;
  font-weight:500;
  transition:color var(--t),background var(--t);
}

.cx-nav-links a:hover{
  color:var(--on-navy);
  background:rgba(255,255,255,.07);
}

/* the current page gets a cyan underline, and only the current page */
.cx-nav-links a::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:5px;
  height:2px;
  border-radius:999px;
  background:var(--cyan);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s var(--ease);
}

.cx-nav-links a.active{
  color:var(--on-navy);
  font-weight:600;
}

.cx-nav-links a.active::after{transform:scaleX(1)}

/* ==========================================================================
   CTA
   ========================================================================== */

.cx-nav-right{
  display:flex;
  align-items:center;
  gap:12px;
}

.cx-nav-cta{
  padding:12px 20px;
  border-radius:var(--r-sm);
  color:var(--navy);
  background:var(--cyan);
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
  line-height:1;
  transition:background var(--t);
}

.cx-nav-cta:hover{
  color:var(--navy);
  background:var(--cyan-soft);
}

/* ==========================================================================
   HAMBURGER
   ========================================================================== */

.cx-menu-btn{
  display:none;
  width:44px;
  height:44px;
  border:1px solid rgba(148,163,184,.4);
  border-radius:var(--r-sm);
  background:transparent;
  cursor:pointer;
  transition:background var(--t);
}

.cx-menu-btn:hover{background:rgba(255,255,255,.07)}

.cx-menu-btn span{
  display:block;
  width:20px;
  height:2px;
  margin:5px auto;
  border-radius:2px;
  background:var(--on-navy);
  transition:transform .25s var(--ease),opacity .25s var(--ease);
}

/* ==========================================================================
   MOBILE MENU
   ========================================================================== */

.cx-mobile-menu{
  position:fixed;
  inset:0;
  z-index:999;
  background:rgba(5,10,20,.6);
  opacity:0;
  visibility:hidden;
  transition:opacity .25s var(--ease),visibility .25s;
}

.cx-mobile-menu.open{
  opacity:1;
  visibility:visible;
}

.cx-mobile-panel{
  position:absolute;
  top:84px;
  right:14px;
  left:14px;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:14px;
  background:var(--navy-2);
  border:1px solid var(--navy-line);
  border-radius:var(--r-lg);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transform:translateY(-8px);
  transition:transform .25s var(--ease);
}

.cx-mobile-menu.open .cx-mobile-panel{transform:none}

.cx-mobile-panel a{
  padding:15px 16px;
  border-radius:var(--r-sm);
  color:var(--on-navy);
  text-decoration:none;
  font-size:1.05rem;
  font-weight:500;
  transition:background var(--t);
}

.cx-mobile-panel a:hover,
.cx-mobile-panel a.active{background:rgba(255,255,255,.07)}

/* 2-class selector so it beats the plain panel-link colour above */
.cx-mobile-panel .cx-mobile-cta{
  margin-top:8px;
  color:var(--navy);
  background:var(--cyan);
  text-align:center;
  font-weight:600;
}

.cx-mobile-panel .cx-mobile-cta:hover{
  color:var(--navy);
  background:var(--cyan-soft);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media(max-width:980px){

  .cx-nav-links,
  .cx-nav-cta{display:none}

  .cx-menu-btn{display:block}

}

@media(max-width:480px){

  .cx-navbar{top:10px}

  .cx-nav-shell{padding:8px 10px 8px 12px}

  .cx-logo-mark{
    width:38px;
    height:38px;
    font-size:1.2rem;
  }

  .cx-logo-text span{display:none}

  .cx-mobile-panel{top:76px}

}

@media(prefers-reduced-transparency:reduce){
  .cx-nav-shell{background:var(--navy);backdrop-filter:none;-webkit-backdrop-filter:none}
}

@media(prefers-reduced-motion:reduce){
  .cx-navbar *,.cx-mobile-menu,.cx-mobile-panel{transition-duration:.01ms!important}
}