/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER (NAV) – Same structure as CyberCaution: single nav, md breakpoint.
   Desktop: 3 right actions. Mobile: 2 actions + hamburger.
   ═══════════════════════════════════════════════════════════════════════════════ */
:root {
  --nav-height: 56px;
  --safe-top: env(safe-area-inset-top, 0px);
  --nav-safe-height: calc(var(--nav-height) + var(--safe-top));
}
@media (min-width: 640px) {
  :root {
    --nav-height: 64px;
    --nav-safe-height: calc(var(--nav-height) + var(--safe-top));
  }
}

/* Base: nav bar min-height and safe area */
nav.glass-nav,
nav#mainNav.glass-nav,
nav[class*="glass-nav"] {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  padding-bottom: 0;
  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);
}
/* Dark theme: header background (class is on html via theme toggle) */
html.dark nav.glass-nav,
html.dark nav#mainNav.glass-nav,
html.dark nav[class*="glass-nav"],
.dark nav.glass-nav,
.dark nav#mainNav.glass-nav,
.dark nav[class*="glass-nav"] {
  background-color: rgba(15, 23, 42, 0.92) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* Header logo: 60×60 (CyberCorrect – same structure as CyberCaution) */
nav.glass-nav > div > div > a > img[alt="CyberCorrect Logo"],
nav.glass-nav > div > div > a > img[alt="CyberCorrect™ Logo"],
nav#mainNav.glass-nav > div > div > a > img[alt="CyberCorrect Logo"],
nav#mainNav.glass-nav > div > div > a > img[alt="CyberCorrect™ Logo"],
nav[class*="glass-nav"] img[alt="CyberCorrect Logo"],
nav[class*="glass-nav"] img[alt="CyberCorrect™ Logo"],
nav.glass-nav img.h-16,
nav[class*="glass-nav"] img.h-16 {
  width: 60px !important;
  height: 60px !important;
  min-width: 60px !important;
  min-height: 60px !important;
  max-width: 60px !important;
  max-height: 60px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  object-fit: contain !important;
}
/* Nav inner container: same horizontal padding as main content */
nav.glass-nav > div,
nav[class*="glass-nav"] > div {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  nav.glass-nav > div,
  nav[class*="glass-nav"] > div {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
@media (min-width: 1024px) {
  nav.glass-nav > div,
  nav[class*="glass-nav"] > div {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Nav row: bind to --nav-height so header/menu align */
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;
}
nav.glass-nav .flex.justify-between.items-center > div:first-child,
nav[class*="glass-nav"] .flex.justify-between.items-center > div:first-child {
  flex-shrink: 0 !important;
  min-width: 200px !important;
}
nav.glass-nav .flex.justify-between.items-center > div:nth-child(2),
nav[class*="glass-nav"] .flex.justify-between.items-center > div:nth-child(2) {
  min-width: 0 !important;
  margin-left: 0.5rem !important;
  /* visible: overflow:hidden clipped the Privacy Review dropdown (absolute below bar) */
  overflow: visible !important;
}

/* Mobile (max-width: 767px = below md): single nav visible, mobile block shown */
@media (max-width: 767px) {
  nav.glass-nav,
  nav#mainNav.glass-nav,
  nav[class*="glass-nav"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 70 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: var(--nav-safe-height) !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  nav.glass-nav > div,
  nav[class*="glass-nav"] > div {
    display: flex !important;
    align-items: center !important;
    min-width: 0;
  }

  /* Nav row on mobile: two-column layout so brand is left, actions right */
  nav.glass-nav .flex.justify-between.items-center,
  nav[class*="glass-nav"] .flex.justify-between.items-center {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    width: 100% !important;
    gap: 0.5rem;
  }
  nav.glass-nav .flex.justify-between.items-center > *:nth-child(1),
  nav[class*="glass-nav"] .flex.justify-between.items-center > *:nth-child(1) {
    grid-column: 1;
    min-width: 0;
  }
  /* Hide desktop center nav and right actions on mobile */
  nav.glass-nav .flex.justify-between.items-center > *:nth-child(2),
  nav.glass-nav .flex.justify-between.items-center > *:nth-child(3),
  nav[class*="glass-nav"] .flex.justify-between.items-center > *:nth-child(2),
  nav[class*="glass-nav"] .flex.justify-between.items-center > *:nth-child(3) {
    display: none !important;
  }
  /* Mobile controls in column 2 (right) */
  nav.glass-nav .flex.justify-between.items-center > *:nth-child(4),
  nav[class*="glass-nav"] .flex.justify-between.items-center > *:nth-child(4) {
    grid-column: 2;
    display: flex !important;
    justify-self: end;
  }
}

/* Desktop (md and up): grid layout, hide mobile block (4th child), show center + right */
@media (min-width: 768px) {
  nav.glass-nav .flex.justify-between > div:nth-child(4),
  nav[class*="glass-nav"] .flex.justify-between > div:nth-child(4) {
    display: none !important;
  }
  nav.glass-nav .hidden.md\:flex,
  nav[class*="glass-nav"] .hidden.md\:flex {
    display: flex !important;
  }
  nav.glass-nav .flex.justify-between,
  nav[class*="glass-nav"] .flex.justify-between {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem 2rem;
  }
  nav.glass-nav .flex.justify-between > div:first-child,
  nav[class*="glass-nav"] .flex.justify-between > div:first-child {
    justify-self: start;
  }
  nav.glass-nav .flex.justify-between > div:nth-child(2),
  nav[class*="glass-nav"] .flex.justify-between > div:nth-child(2) {
    justify-self: center;
    align-self: center;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  nav.glass-nav .flex.justify-between > div:nth-child(3),
  nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) {
    justify-self: end;
    display: flex;
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER – Vertical menu (Solutions, Resources, Legal) always visible, no overflow
   ═══════════════════════════════════════════════════════════════════════════════ */
#footer {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  box-sizing: border-box;
}
#footer > div {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}
#footer .footer-nav-columns {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  max-width: 100%;
}
#footer .footer-nav-column {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 640px) {
  #footer .footer-nav-column {
    min-width: 8rem;
  }
}
#footer .footer-nav-column ul.space-y-1 {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  list-style: none;
  padding-left: 0;
  margin: 0 0 0.5rem 0;
}
#footer .footer-nav-column ul.space-y-1 li {
  display: block;
}

/* Privacy Review nav: dropdown is opacity-0 + invisible and only group-hover:visible.
   Inline script toggles .dropdown-open on #privacy-check-nav for click / focus — mirror hover. */
#mainNav #privacy-check-nav.dropdown-open .privacy-check-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Mobile sheet: align below full nav bar including safe-area inset */
#mobileMenu {
  top: var(--nav-safe-height, var(--nav-height, 64px)) !important;
}
#mobileMenu > div:first-child {
  max-height: calc(100vh - var(--nav-safe-height, var(--nav-height, 64px)) - env(safe-area-inset-bottom, 0px)) !important;
}