/* ═══════════════════════════════════════════════════════════════════════════════
   HEADER (NAV) – glass bar, padding, alignment with main project
   ═══════════════════════════════════════════════════════════════════════════════ */
nav.glass-nav,
nav[class*="glass-nav"] {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  /* Glass bar: frosted background matching main project */
  background-color: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html.dark nav.glass-nav,
html.dark nav[class*="glass-nav"] {
  background-color: rgba(15, 23, 42, 0.92);
}

/* Nav inner container: same horizontal padding as main content and footer */
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: comfortable vertical padding so content isn't cramped */
nav.glass-nav .flex.justify-between.items-center,
nav[class*="glass-nav"] .flex.justify-between.items-center {
  min-height: 3.5rem; /* 56px, matches --nav-height on mobile */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
@media (min-width: 640px) {
  nav.glass-nav .flex.justify-between.items-center,
  nav[class*="glass-nav"] .flex.justify-between.items-center {
    min-height: 4rem; /* 64px, matches --nav-height on desktop */
  }
}

/* Keep mobile nav block (icons + hamburger) pinned to the right on small screens */
@media (max-width: 767px) {
  nav.glass-nav .flex.justify-between > div:last-child,
  nav[class*="glass-nav"] .flex.justify-between > div:last-child {
    margin-left: auto;
  }
}

/* Brand name: theme primary orange everywhere (nav + footer). Overrides app.css .brand-name (#FF6B35). */
nav.glass-nav .brand-name,
nav[class*="glass-nav"] .brand-name,
footer .brand-name,
.brand-name {
  color: #FF6B00 !important;
}

/* Nav branding: tighter, even interline spacing */
nav.glass-nav .brand-text,
nav[class*="glass-nav"] .brand-text {
  gap: 0.0625rem;
}
nav.glass-nav .brand-text .brand-name,
nav.glass-nav .brand-text .brand-tagline,
nav.glass-nav .brand-text .brand-attribution,
nav[class*="glass-nav"] .brand-text .brand-name,
nav[class*="glass-nav"] .brand-text .brand-tagline,
nav[class*="glass-nav"] .brand-text .brand-attribution {
  line-height: 1.15;
  margin: 0;
  padding: 0;
}

nav.glass-nav > div,
nav[class*="glass-nav"] > div {
  min-width: 0;
  max-width: 100%;
}
nav.glass-nav > div > div,
nav[class*="glass-nav"] > div > div {
  min-width: 0;
}

nav.glass-nav .flex.justify-between,
nav[class*="glass-nav"] .flex.justify-between {
  min-width: 0;
  flex-wrap: nowrap;
}

/* Center the menu bar items in the nav (same as React app) */
@media (min-width: 768px) {
  /* Hide mobile-only block (icons + hamburger) on desktop */
  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 .flex.justify-between,
  nav[class*="glass-nav"] .flex.justify-between {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
  }
  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;
  }
  /* Right-side block (Threat Radar, Profile, Theme) – extreme right, flush to edge */
  nav.glass-nav .flex.justify-between > div:nth-child(3),
  nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3),
  nav.glass-nav .flex.justify-between > div:last-child,
  nav[class*="glass-nav"] .flex.justify-between > div:last-child {
    justify-self: end;
    display: flex;
    align-items: center;
  }
}

/* Allow nav links container to shrink on medium screens */
nav.glass-nav > div > div > div:nth-child(2) {
  min-width: 0;
  overflow: visible;
}

/* Ensure nav inner flex doesn't overflow */
nav.glass-nav a.nav-link {
  flex-shrink: 0;
  white-space: nowrap;
}

/* Top-right action buttons: Threat Radar (pill) + icon buttons (rounded square) */
.nav-action-threat-radar {
  background-color: rgb(255 237 225);
  color: rgb(255 107 0);
  min-height: 36px;
  flex-shrink: 0;
  white-space: nowrap;
}
.nav-action-threat-radar:hover {
  background-color: rgb(255 227 205);
  color: rgb(255 107 0);
}
html.dark .nav-action-threat-radar {
  background-color: rgb(255 107 0 / 0.18);
  color: rgb(255 158 88);
}
html.dark .nav-action-threat-radar:hover {
  background-color: rgb(255 107 0 / 0.25);
  color: rgb(255 158 88);
}

/* Profile and theme icon buttons: light grey rounded square */
.nav-action-icon {
  flex-shrink: 0;
}
html.dark .nav-action-icon {
  background-color: hsl(217.2 32.6% 22%) !important;
  color: hsl(210 40% 98%);
}
html.dark .nav-action-icon:hover {
  background-color: hsl(217.2 32.6% 28%) !important;
}

/* Spacing between right-side actions (Threat Radar, Profile, Theme) */
nav.glass-nav .flex.justify-between > div:nth-child(3),
nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) {
  gap: 0.5rem;
}
@media (min-width: 768px) {
  nav.glass-nav .flex.justify-between > div:nth-child(3),
  nav[class*="glass-nav"] .flex.justify-between > div:nth-child(3) {
    gap: 0.625rem;
  }
}

/* On md screens (768px-1024px): tighter nav to fit */
@media (min-width: 768px) and (max-width: 1024px) {
  nav.glass-nav a.nav-link {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
    font-size: 0.7rem;
  }
  nav.glass-nav a.nav-link svg {
    width: 0.875rem;
    height: 0.875rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   ACTIVE STATE – menu bar buttons (single source of truth for website)
   ═══════════════════════════════════════════════════════════════════════════════ */
nav.glass-nav .nav-link,
nav.glass-nav .mobile-nav-link {
  color: hsl(var(--foreground));
  text-decoration: none;
  transition: all 0.2s ease;
}

nav.glass-nav .nav-link:not(.nav-link-active):not(.bg-primary):hover,
nav.glass-nav .mobile-nav-link:not(.nav-link-active):not(.bg-primary):hover {
  color: rgb(255 107 0);
  background-color: rgb(255 107 0 / 0.1);
}

nav.glass-nav .nav-link.nav-link-active,
nav.glass-nav .nav-link.bg-primary,
nav.glass-nav .mobile-nav-link.nav-link-active,
nav.glass-nav .mobile-nav-link.bg-primary {
  background-color: rgb(255 107 0) !important;
  color: white !important;
}

nav.glass-nav .nav-link.nav-link-active:hover,
nav.glass-nav .nav-link.bg-primary:hover,
nav.glass-nav .mobile-nav-link.nav-link-active:hover,
nav.glass-nav .mobile-nav-link.bg-primary:hover {
  background-color: rgb(255 107 0) !important;
  color: white !important;
}

nav.glass-nav .nav-link svg,
nav.glass-nav .mobile-nav-link svg {
  color: currentColor;
}

/* Breadcrumb bar: align trail to the left (legal and any page with data-breadcrumb) */
nav[aria-label="Breadcrumb"][data-breadcrumb="true"] .flex-1.flex {
  justify-content: flex-start;
}

/* Mobile menu above breadcrumb bar so they don't mix when menu is open */
@media (max-width: 767px) {
  [data-mobile-menu="true"] {
    z-index: 45;
  }
  body.mobile-menu-open nav[aria-label="Breadcrumb"] {
    visibility: hidden;
    pointer-events: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   FOOTER – padding, spacing, alignment with main project
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Footer does not shrink when content is short */
footer.border-t {
  flex-shrink: 0;
}

/* Footer outer padding: match main content rhythm (generous vertical padding) */
footer.border-t .max-w-7xl.mx-auto:first-of-type,
footer .max-w-7xl.mx-auto {
  padding-top: 2rem;
  padding-bottom: 1rem;
}
@media (min-width: 640px) {
  footer.border-t .max-w-7xl.mx-auto:first-of-type,
  footer .max-w-7xl.mx-auto {
    padding-top: 2.5rem;
    padding-bottom: 1.25rem;
  }
}

/* Footer section headings: consistent margin */
footer h3.font-bold {
  margin-bottom: 0.75rem;
}

/* Footer link lists: vertical spacing between items (was space-y-0, too tight) */
footer ul.space-y-0 li,
footer ul.leading-tight li {
  margin-bottom: 0.375rem;
}
footer ul.space-y-0 li:last-child,
footer ul.leading-tight li:last-child {
  margin-bottom: 0;
}

/* Footer main content block: gap between brand column and link columns */
footer .flex.flex-col.md\\:flex-row.md\\:items-start {
  gap: 1.5rem;
  margin-bottom: 0.5rem;
}
@media (min-width: 768px) {
  footer .flex.flex-col.md\\:flex-row.md\\:items-start {
    gap: 2rem;
    margin-bottom: 0.75rem;
  }
}

/* Footer bottom bar (status + copyright): comfortable top padding on all pages */
footer .max-w-7xl > div.border-t.border-border {
  padding-top: 1rem !important;
}

/* Remove footer top contour line site-wide (no visible top border) */
footer.border-t,
footer[class*="border-t"] {
  border-top-width: 0 !important;
  border-top-style: solid;
  border-top-color: transparent !important;
}
html.dark footer.border-t,
html.dark footer[class*="border-t"] {
  border-top-width: 0 !important;
  border-top-color: transparent !important;
}
/* Inner horizontal line in footer (above status/copyright row): subtle, not white */
footer .border-t.border-border {
  border-top-color: hsl(214.3 31.8% 91.4% / 0.25);
}
html.dark footer .border-t.border-border {
  border-top-color: hsl(217.2 32.6% 25% / 0.35);
}