/* ==========================================================================
   ShadowQS — Design tokens + shared site chrome (header + footer)

   Loaded on every page that uses the site chrome, so the tokens and the
   header/footer are defined in one place:

     index.html                     global.css + home.css
     privacy-policy.html            bootstrap + style.css + global.css
     terms-conditions.html          bootstrap + style.css + global.css

   Secondary pages still use Bootstrap for their body content, so everything
   here is either a token or scoped to the <nav>/<footer> chrome — nothing
   leaks into a Bootstrap-driven page body. On those pages this file must be
   loaded AFTER Bootstrap. Page-body rules (reset, typography, sections, …)
   live in the page stylesheet (home.css) instead.

   The chrome sets its own font stack rather than inheriting, so it renders
   identically on the home page and on the Bootstrap pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --navy: #0d1b2e;
  --navy-2: #12233c;
  --blue: #2f7cf6;
  --blue-dark: #1f5fd0;
  --white: #ffffff;
  --off: #f5f7fa;
  --ink: #16233a;
  --grey: #5c6b82;
  --grey-light: #8aa0b8;
  --line: #e3e9f1;
  --green: #1f9d61;
  --amber: #c77800;

  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   Shared width constraint (chrome + home page sections)
   -------------------------------------------------------------------------- */
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-family: var(--font-body);
  line-height: 1.6;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
}

.logo {
  color: var(--white);
  font-weight: 800;
  font-size: 19px;
  text-decoration: none;
  letter-spacing: -.01em;
}

.nav-logo { display: block; height: 30px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: rgba(255, 255, 255, .75); font-size: 14px; font-weight: 600; text-decoration: none; }
.nav-links a:hover { color: var(--white); }
.nav-links a.cta { padding: 9px 16px; border-radius: 8px; background: var(--blue); color: var(--white); }

@media (max-width: 760px) {
  .nav-links a:not(.cta) { display: none; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
footer {
  background: var(--navy);
  color: #b9c2d6;
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 56px 0 36px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
}
footer a { color: var(--grey-light); text-decoration: none; }
footer a:hover { color: var(--white); }

.foot-grid { display: grid; grid-template-columns: 2fr .8fr; gap: 56px; align-items: start; }
.foot-grid h4 { color: var(--white); font-size: 15px; font-weight: 800; line-height: 1.6; margin: 0 0 12px; }
.foot-grid p { margin: 0; line-height: 1.65; }
.foot-logo { display: block; height: 24px; width: auto; margin-bottom: 18px; }

.foot-links { display: flex; flex-direction: column; gap: 8px; }
.foot-links a { color: #b9c2d6; }
.foot-links a:hover { color: var(--white); }

.foot-badges { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.fbadge {
  display: flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  padding: 10px 16px;
}
.fbadge img { display: block; height: 32px; width: auto; }
.fbadge--cyber img { height: 34px; }
.fbadge--ms img { height: 26px; }
.fbadge .fb-label { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; color: var(--white); line-height: 1.35; }

.copyright {
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  color: #8e9bb8;
}

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr; }
}