/**
 * Sentinel Shield — Header & Footer CSS
 * File: /assets/css/header-footer.css
 * ──────────────────────────────────────────────
 * Recolored to match FSN IT Solutions brand palette:
 *   Steel Blue  #4E90C8  (the "FSN" medium blue)
 *   Deep Navy   #1B3A5C  (the "IT" dark navy)
 *   Brand Navy  #1B3158  (the SOLUTIONS bar background)
 * Background: dark #2a2d33 environment
 */

/* ── SKIP LINK (accessibility) ─────────────── */
.ss-skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--ss-accent);
  color: #ffffff;
  padding: 10px 20px;
  font-weight: 700;
  font-size: 13px;
  z-index: 99999;
  border-radius: 0 0 8px 0;
  text-decoration: none;
  transition: top 0.2s;
}
.ss-skip-link:focus { top: 0; }

/* ════════════════════════════════════════════
   HEADER
════════════════════════════════════════════ */
.ss-header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 9999;
  /* Dark charcoal base matching the site background */
  background: rgba(34, 37, 43, 0.94);
  /* Steel-blue tinted bottom border */
  border-bottom: 1px solid rgba(78, 144, 200, 0.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background 0.3s, box-shadow 0.3s;
}

/* Scrolled state (class added by JS) */
.ss-header.ss-scrolled {
  background: rgba(34, 37, 43, 0.98);
  box-shadow: 0 2px 30px rgba(0, 0, 0, 0.50);
}

.ss-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* ── Logo ─────────────────────────────────── */
.ss-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.ss-logo img { display: block; height: auto; width: 150px;}
.ss-logo-svg svg { display: block; }
.ss-logo-text {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

/* ── Navigation ───────────────────────────── */
.ss-nav { flex: 1; display: flex; justify-content: center; }
.ss-nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 6px;
}
.ss-nav-link {
  display: block;
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: color 0.2s, background 0.2s;
  white-space: nowrap;
  position: relative;
}
/* Underline indicator — steel blue */
.ss-nav-link::after {
  content: "";
  position: absolute;
  bottom: 0; left: 12px; right: 12px;
  height: 2px;
  background: var(--ss-accent, #4E90C8);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
  border-radius: 1px;
}
.ss-nav-link:hover,
.ss-nav-link--active {
  color: var(--ss-accent, #4E90C8);
  background: rgba(78, 144, 200, 0.08);
}
.ss-nav-link:hover::after,
.ss-nav-link--active::after {
  transform: scaleX(1);
}

/* ── Header CTA Button ─────────────────────── */
.ss-header-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  /* Logo-matching gradient: navy → steel blue */
  background: linear-gradient(135deg, #1B3A5C, #4E90C8);
  color: #ffffff !important;
  font-size: 13.5px;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 7px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(78, 144, 200, 0.30);
  white-space: nowrap;
}
.ss-header-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(78, 144, 200, 0.48);
  color: #ffffff !important;
  text-decoration: none;
}

/* ── Hamburger ─────────────────────────────── */
.ss-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 7px;
  cursor: pointer;
  padding: 8px;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}
.ss-hamburger:hover {
  background: rgba(78, 144, 200, 0.12);
  border-color: rgba(78, 144, 200, 0.30);
}
.ss-hamburger-line {
  display: block;
  width: 100%;
  height: 2px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* Hamburger open state */
.ss-hamburger[aria-expanded="true"] .ss-hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.ss-hamburger[aria-expanded="true"] .ss-hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.ss-hamburger[aria-expanded="true"] .ss-hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile Nav ───────────────────────────── */
@media (max-width: 960px) {
    .ss-header {
    padding: 0px 15px;
}
  .ss-header-inner { padding: 0 24px; }
  .ss-hamburger { display: flex; }
  .ss-header-btn { display: none; }
  .ss-nav {
    position: absolute;
    top: 72px; left: 0;
    width: 100%;
    background: rgba(34, 37, 43, 0.98);
    /* Steel blue tinted borders on mobile drawer */
    border-top: 1px solid rgba(78, 144, 200, 0.18);
    border-bottom: 1px solid rgba(78, 144, 200, 0.10);
    padding: 0;
    display: none;
    justify-content: flex-start;
    backdrop-filter: blur(16px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  }
  .ss-nav.ss-nav--open { display: flex; }
  .ss-nav-list {
    flex-direction: column;
    gap: 0;
    width: 100%;
    padding: 8px 0 12px;
  }
  .ss-nav-link {
    padding: 13px 28px;
    font-size: 15px;
    border-radius: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  .ss-nav-link::after { display: none; }
}
@media (max-width: 480px) {
  .ss-header-inner { padding: 0 20px; height: 62px; }
  .ss-nav { top: 62px; }
}

/* ════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════ */
.ss-footer {
  /* Darkest layer — deepened navy-charcoal */
  background: var(--ss-bg-darker, #1e2026);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ss-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Footer Top ───────────────────────────── */
.ss-footer-top { padding: 60px 0 44px; }
.ss-footer-top .ss-footer-inner {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
}

/* Brand column */
.ss-footer-brand {}
.ss-footer-logo-link {
  display: inline-block;
  margin-bottom: 16px;
  text-decoration: none;
}
.ss-footer-logo-link img { height: auto; display: block; }
.ss-footer-logo-fallback {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  text-decoration: none;
}
.ss-footer-logo-fallback svg { flex-shrink: 0; }

.ss-footer-tagline {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 280px;
}

/* Social icons */
.ss-footer-socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.ss-social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.ss-social-icon:hover {
  /* Steel blue hover — matches brand accent */
  background: rgba(78, 144, 200, 0.18);
  border-color: rgba(78, 144, 200, 0.35);
  color: var(--ss-accent, #4E90C8);
  transform: translateY(-2px);
  text-decoration: none;
}
.ss-social-icon svg { display: block; }

/* Link columns */
.ss-footer-col {}
.ss-footer-col-title {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin: 0 0 18px;
}
.ss-footer-col-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ss-footer-col-links li {}
.ss-footer-col-links a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: none;
  transition: color 0.2s, padding-left 0.2s;
  display: inline-block;
}
.ss-footer-col-links a:hover {
  color: var(--ss-accent, #4E90C8);
  padding-left: 4px;
  text-decoration: none;
}

/* ── Footer Bottom ────────────────────────── */
.ss-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 20px 0;
}
.ss-footer-bottom .ss-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.ss-footer-copy {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.28);
  margin: 0;
}

.ss-footer-badges {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
/* Cert badges: navy bg + steel blue border — mirrors SOLUTIONS bar feel */
.ss-cert-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(27, 49, 88, 0.55);
  border: 1px solid rgba(78, 144, 200, 0.28);
  border-radius: 5px;
  padding: 4px 11px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--ss-accent, #4E90C8);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* ── Responsive ───────────────────────────── */
@media (max-width: 1100px) {
  .ss-footer-top .ss-footer-inner {
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
  }
  .ss-footer-brand {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
  }
  .ss-footer-tagline { max-width: 100%; }
}
@media (max-width: 768px) {
  .ss-footer-top { padding: 40px 0 32px; }
  .ss-footer-top .ss-footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .ss-footer-brand {
    grid-column: 1 / -1;
    display: block;
  }
  .ss-footer-inner { padding: 0 24px; }
  .ss-footer-bottom .ss-footer-inner {
    flex-direction: column;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .ss-footer-top .ss-footer-inner { grid-template-columns: 1fr; }
  .ss-footer-badges { justify-content: center; }
}