/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER (NAV) – glass bar, --nav-height, alignment with main content
   CyberSoluce: single source of truth for nav offset and mobile menu positioning.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --nav-height: 66px;
  --safe-top: env(safe-area-inset-top, 0px);
  --nav-safe-height: calc(var(--nav-height) + var(--safe-top));
  --breadcrumb-height: 0px;
}
@media (min-width: 640px) {
  :root {
    --nav-height: 66px;
    --nav-safe-height: calc(var(--nav-height) + var(--safe-top));
  }
}

nav.glass-nav,
nav[class*="glass-nav"] {
  position: fixed !important;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding-top: var(--safe-top);
  min-height: var(--nav-safe-height);
}
html.dark nav.glass-nav,
html.dark nav[class*="glass-nav"] {
  background-color: rgba(15, 23, 42, 0.92);
}

nav.glass-nav .flex.justify-between.items-center,
nav[class*="glass-nav"] .flex.justify-between.items-center {
  height: var(--nav-height) !important;
  min-height: var(--nav-height) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

main {
  padding-top: calc(var(--nav-height, 64px) + var(--breadcrumb-height)) !important;
}

/* Sticky breadcrumb bar: position below main nav (avoids inline style in HTML) */
nav[aria-label="Breadcrumb"].sticky-below-nav {
  top: var(--nav-height, 66px);
}

[data-mobile-menu="true"].md\:hidden {
  top: var(--nav-safe-height, var(--nav-height, 64px)) !important;
}

footer.border-t,
#footer {
  flex-shrink: 0;
}

/* ═══ Nav link base and hover: single source of truth for all pages (placeholder + inline nav) ═══ */
.glass-nav a.nav-link,
.glass-nav .nav-link,
.glass-nav a[class*="nav-link"],
.mobile-nav-link.nav-link,
a.mobile-nav-link {
  color: hsl(var(--foreground)) !important;
  transition: background-color 0.15s ease, color 0.15s ease;
}
/* Inactive link hover: same for every nav item */
.glass-nav a.nav-link:hover,
.glass-nav .nav-link:hover,
.glass-nav a[class*="nav-link"]:hover,
.mobile-nav-link:hover,
a.mobile-nav-link:hover {
  background-color: rgba(0, 91, 150, 0.1) !important;
  color: hsl(var(--foreground)) !important;
}
html.dark .glass-nav a.nav-link:hover,
html.dark .glass-nav .nav-link:hover,
html.dark .glass-nav a[class*="nav-link"]:hover,
html.dark .mobile-nav-link:hover,
html.dark a.mobile-nav-link:hover {
  background-color: rgba(51, 161, 222, 0.15) !important;
  color: hsl(var(--foreground)) !important;
}

/* Active nav link: current page highlighted with project theme (command-blue / action-cyan) */
.glass-nav a.nav-link.nav-link-active,
.glass-nav a.nav-link.bg-primary,
.glass-nav a[aria-current="page"],
.mobile-nav-link.nav-link-active,
.mobile-nav-link.bg-primary,
.mobile-nav-link[aria-current="page"] {
  background-color: var(--command-blue, #005B96) !important;
  color: #ffffff !important;
}
.glass-nav a.nav-link.nav-link-active:hover,
.glass-nav a.nav-link.bg-primary:hover,
.glass-nav a[aria-current="page"]:hover,
.mobile-nav-link.nav-link-active:hover,
.mobile-nav-link.bg-primary:hover,
.mobile-nav-link[aria-current="page"]:hover {
  background-color: var(--command-blue, #005B96) !important;
  filter: brightness(1.1);
  color: #ffffff !important;
}
html.dark .glass-nav a.nav-link.nav-link-active,
html.dark .glass-nav a.nav-link.bg-primary,
html.dark .glass-nav a[aria-current="page"],
html.dark .mobile-nav-link.nav-link-active,
html.dark .mobile-nav-link.bg-primary,
html.dark .mobile-nav-link[aria-current="page"] {
  background-color: var(--action-cyan, #33A1DE) !important;
  color: #0f172a !important;
}
html.dark .glass-nav a.nav-link.nav-link-active:hover,
html.dark .glass-nav a.nav-link.bg-primary:hover,
html.dark .glass-nav a[aria-current="page"]:hover,
html.dark .mobile-nav-link.nav-link-active:hover,
html.dark .mobile-nav-link.bg-primary:hover,
html.dark .mobile-nav-link[aria-current="page"]:hover {
  background-color: var(--action-cyan, #33A1DE) !important;
  filter: brightness(1.15);
  color: #0f172a !important;
}