/* ============================================================
   components.css — Unison Systems
   Nav · Footer · Service cards · Stat pills · Dropdowns ·
   Pillar blocks · CTA band — all shared UI components
   Loaded on ALL pages.
   ============================================================ */


/* ╔══════════════════════════════════════════════════════════╗
   ║  NAVIGATION — White Nav                                   ║
   ╚══════════════════════════════════════════════════════════╝ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 48px;
  background: #ffffff;
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

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

/* Nav links */
.nav-links {
  display: flex;
  align-items: center;
  gap: 52px;
  list-style: none;
}

.nav-links a {
  color: #1a1830;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s, font-weight 0.1s;
  font-family: 'Outfit', sans-serif;
  position: relative;
}

/* Person image — appears to the LEFT of main nav label on hover/active/open.
   Uses mask so the fill color is driven by CSS (var(--purple-l)) and stays
   in sync with the logo's middle purple. */
.nav-links a::before {
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 20px;
  background-color: var(--purple);
  -webkit-mask: url('../images/purple-menu-person.png') center / contain no-repeat;
          mask: url('../images/purple-menu-person.png') center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

/* Person icon only appears on selection (active), not on hover */
.nav-links li.active > a::before { opacity: 1; }

.nav-links a:hover { color: #1a1830; font-weight: 600; }

/* Active-page text styling — bold, same dark color */
.nav-links li.active > a { font-weight: 700; }

/* Let's Talk CTA pill */
.nav-cta {
  background: var(--purple-d);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 500;           /* NOT bold — 500 only to avoid blurriness */
  font-family: var(--font-body);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: background 0.2s, transform 0.15s;
}

.nav-cta:hover {
  background: var(--purple);
}

.nav-cta svg {
  width: 14px;
  height: 14px;
}

/* ── NAV SUBNAV BAR SYSTEM ──
   Full-width dark bar below the nav.
   Appears on hover (all pages) and is always-on when li.active.
─────────────────────────────────────────────── */

/* li needs position:relative for the ::after bridge to work */
.nav-links li {
  position: relative;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Invisible ::after bridge fills the gap between the li bottom
   and the subnav bar, keeping hover alive as mouse moves down.
   Height covers from li bottom all the way to subnav bar bottom
   (~190px from nav top). Generous sizing ensures no dead zone. */
.nav-links li::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  /* Hit area extension removed — was 110px, which caused subnav switching
     when the cursor was hovering a different main nav li horizontally
     while still in page-content vertical territory. Subnav.mouseenter and
     the cursor-direction triangle handle the gap-crossing case. */
}

.nav-links a.has-dropdown {
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Chevron removed — person image indicator used instead */

/* (Active-page text styling handled by purple pill rules above.) */

/* The subnav bar — solid white drawer hugging the bottom of the nav.
   Narrower (fit-content), centered, with a thin connector line coming
   down from the hovered/active nav item's person icon. */
.nav-subnav {
  position: fixed;
  top: 135px;                    /* hugs nav bottom (nav height = 135px) */
  left: 50%;
  z-index: 90;
  width: max-content;
  max-width: calc(100vw - 32px);
  background: #ffffff;
  border: 1px solid rgba(91,79,207,0.22);
  border-top: none;              /* blends into nav bottom edge */
  border-radius: 0 0 8px 8px;    /* subtle bottom rounding only */
  box-shadow:
    0 6px 18px rgba(91,79,207,0.14),
    0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  justify-content: center;

  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Subnav visibility is controlled entirely by JS via .subnav-open class.
   CSS :hover is NOT used — JS decides when to switch subnavs,
   which prevents the diagonal cursor problem. */
.nav-links li.subnav-open .nav-subnav {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, 0);
  z-index: 95;
}

/* Always visible on destination page */
.nav-links li.active .nav-subnav {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, 0);
  z-index: 90;
}

/* When a non-active li has subnav-open, hide the active subnav */
.nav-links:has(li:not(.active).subnav-open) li.active .nav-subnav {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -6px);
}

/* Inner pill row — fits content tightly, small breathing room at edges */
.nav-subnav-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 10px;
}

.nav-subnav-inner::-webkit-scrollbar { display: none; }

/* Individual pill — Outfit, same font as main nav, slightly smaller */
.nav-links .nav-subnav-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 24px;    /* left padding makes room for person image */
  margin: 3px 1px;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #1a1830;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s, font-weight 0.1s;
  flex-shrink: 0;
  position: relative;
}

/* Person image — appears to the left of subnav pill on hover/active.
   Mask + background-color so the fill color stays in sync with the logo. */
.nav-links .nav-subnav-pill::before {
  content: '';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 16px;
  background-color: var(--purple);
  -webkit-mask: url('../images/purple-menu-person.png') center / contain no-repeat;
          mask: url('../images/purple-menu-person.png') center / contain no-repeat;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

/* Person icon only appears on selection (active), not on hover */
.nav-links .nav-subnav-pill.active::before { opacity: 1; }

/* Bold text on hover + active, no pill background */
.nav-links .nav-subnav-pill:hover,
.nav-links .nav-subnav-pill.active {
  color: #1a1830;
  font-weight: 700;
  background: transparent;
  border-color: transparent;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  STAT PILLS                                               ║
   ╚══════════════════════════════════════════════════════════╝ */
.stat-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  text-align: center;
  backdrop-filter: blur(8px);
  min-width: 0;
  height: 95px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
}

.stat-card .num {
  font-family: var(--font-head);
  font-size: 28px;
  font-weight: 800;
  color: var(--purple-l);
  letter-spacing: -0.5px;
  line-height: 1.2;
  white-space: nowrap; /* CRITICAL — prevents "AI+Human" wrapping */
}

.stat-card .lbl {
  font-size: 11px;
  color: var(--gray-m);
  margin-top: 5px;
  font-weight: 400;
  line-height: 1.3;
  padding: 0 6px;
}

/* Stat variants */
.stat-white {
  background: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.9) !important;
}
.stat-white .num {
  color: var(--purple-d) !important;
  font-size: 28px !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  white-space: nowrap !important;
}
.stat-white .lbl { color: #555 !important; }

.stat-glass {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-top: 3px solid var(--purple-l) !important;
}
.stat-glass .num { color: var(--purple-l) !important; }
.stat-glass .lbl { color: var(--gray-lt) !important; }


/* ╔══════════════════════════════════════════════════════════╗
   ║  SERVICE CARDS                                            ║
   ╚══════════════════════════════════════════════════════════╝ */
.services {
  background: var(--gray-1);
}

.services-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 60px;
  flex-wrap: wrap;
  gap: 24px;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  width: 100%;
}

.service-card {
  background: var(--gray-2);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  position: relative;
  overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
  display: flex;
  flex-direction: column;
  cursor: default;
}

/* Purple top border reveal on hover */
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--purple);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

.service-card:hover {
  border-color: rgba(91,79,207,0.4);
  transform: translateY(-4px);
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(91,79,207,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-size: 22px;
}

.service-card h3 {
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--white);
}

.service-card p {
  flex: 1;
  font-size: 14px;
  color: var(--gray-lt);
  line-height: 1.7;
  margin-bottom: 24px;
}

.service-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  background: rgba(91,79,207,0.12);
  color: var(--purple-l);
  border: 1px solid rgba(91,79,207,0.2);
  border-radius: 99px;
  padding: 4px 12px;
  margin-right: 6px;
  margin-bottom: 6px;
}

/* REQUIRED WRAPPER — prevents tags from stretching full-width */
.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.service-tags .service-tag {
  margin: 0;
}

.service-link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-l);
  text-decoration: none;
  margin-top: 20px;
  transition: gap 0.2s;
}

.service-link:hover { gap: 10px; }

/* AI card accent */
.card-ai { border-color: rgba(0,198,162,0.2); }
.card-ai::before { background: var(--teal); }
.card-ai .service-icon { background: rgba(0,198,162,0.12); }
.card-ai .service-tag  { background: rgba(0,198,162,0.1); color: var(--teal); border-color: rgba(0,198,162,0.2); }
.card-ai .service-link { color: var(--teal); }

/* Cybersecurity card accent */
.card-cyber { border-color: rgba(255,160,50,0.15); }
.card-cyber::before { background: #FFA032; }
.card-cyber .service-icon { background: rgba(255,160,50,0.1); }
.card-cyber .service-tag  { background: rgba(255,160,50,0.08); color: #FFBE74; border-color: rgba(255,160,50,0.2); }
.card-cyber .service-link { color: #FFBE74; }


/* ╔══════════════════════════════════════════════════════════╗
   ║  CTA BAND                                                 ║
   ╚══════════════════════════════════════════════════════════╝ */
.cta-band {
  background: var(--purple-d);
  padding: 80px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 300px;
  background: radial-gradient(ellipse, rgba(123,110,232,0.4) 0%, transparent 70%);
}

.cta-band h2 {
  color: var(--white);
  position: relative;
}

.cta-band p {
  color: rgba(255,255,255,0.7);
  font-size: 18px;
  max-width: 560px;
  margin: 16px auto 40px;
  position: relative;
}

.cta-band .btn-group {
  display: flex;
  gap: 16px;
  justify-content: center;
  position: relative;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  FOOTER                                                   ║
   ╚══════════════════════════════════════════════════════════╝ */
footer {
  background: #080710;
  padding: 64px 48px 32px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 56px;
}

.footer-brand p {
  font-size: 14px;
  color: var(--gray-m);
  line-height: 1.7;
  margin-top: 16px;
  max-width: 280px;
}

.footer-contact {
  margin-top: 24px;
}

.footer-contact a {
  display: block;
  font-size: 14px;
  color: var(--purple-l);
  text-decoration: none;
  margin-bottom: 6px;
}

.footer-col h5 {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 20px;
  text-transform: uppercase;
}

.footer-col h5 a {
  color: inherit;
  font-size: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.footer-col h5 a:hover { color: var(--purple-l); }

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  font-size: 13px;
  color: var(--gray-m);
  text-decoration: none;
  border: none;
  transition: color 0.2s;
}

.footer-col a:hover {
  color: var(--purple-l);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 24px;
}

.footer-bottom p {
  font-size: 12px;
  color: var(--gray-3);
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-size: 12px;
  color: var(--gray-3);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--gray-m);
}

.footer-logo {
  display: inline-block;
  line-height: 0;
  border: none;
}

.footer-logo img {
  height: 95px;
  width: auto;
  display: block;
  border: none;
  outline: none;
}


/* ╔══════════════════════════════════════════════════════════╗
   ║  MOBILE NAV — ≤ 768px                                     ║
   ║  Hamburger → right-side drawer + accordion subnavs        ║
   ╚══════════════════════════════════════════════════════════╝ */

/* Hidden on desktop */
.nav-hamburger    { display: none; }
.mobile-cta-wrapper { display: none; }
.nav-overlay      { display: none; }

@media (max-width: 768px) {
  /* Tighter nav on mobile */
  nav {
    padding: 14px 20px;
    z-index: 200;                 /* above drawer + overlay */
  }

  /* Swap full wordmark for mobile-specific icon+name combo */
  .nav-logo img {
    content: url('../images/logo-mobile.png');
    height: 45px;
    width: auto;
  }

  /* Hide desktop nav content; hamburger replaces it */
  .nav-links:not(.mobile-open) { display: none; }
  .nav-cta                     { display: none; }

  /* ── Hamburger button ─────────────────────────────────────── */
  .nav-hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  .nav-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #1a1830;
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }

  .nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-hamburger.open span:nth-child(2) { opacity: 0; }
  .nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ── Overlay behind drawer ────────────────────────────────── */
  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 19, 24, 0.45);
    opacity: 0;
    pointer-events: none;
    z-index: 150;
    transition: opacity 0.25s ease;
  }

  .nav-overlay.visible {
    opacity: 1;
    pointer-events: all;
  }

  /* ── Drawer (repurposes .nav-links) ───────────────────────── */
  .nav-links.mobile-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 100px 0 24px;

    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(85vw, 360px);
    overflow-y: auto;
    overscroll-behavior: contain;

    background: #ffffff;
    box-shadow: -12px 0 32px rgba(20, 19, 24, 0.12);
    z-index: 160;
    animation: drawerSlideIn 0.25s ease-out both;
  }

  @keyframes drawerSlideIn {
    from { transform: translateX(100%); }
    to   { transform: translateX(0); }
  }

  .nav-links.mobile-open li {
    width: 100%;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid rgba(20, 19, 24, 0.06);
    position: static;
  }

  /* Kill all desktop pseudo-elements that targeted li/a */
  .nav-links.mobile-open li::before,
  .nav-links.mobile-open li::after,
  .nav-links.mobile-open li > a::before,
  .nav-links.mobile-open li > a::after { display: none; }

  .nav-links.mobile-open li > a {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 24px;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #1a1830;
    text-decoration: none;
    transition: background 0.15s ease;
  }

  .nav-links.mobile-open li > a:active {
    background: rgba(20, 19, 24, 0.04);
  }

  /* Chevron on parents with dropdowns */
  .nav-links.mobile-open a.has-dropdown {
    position: relative;
    padding-right: 56px;
  }

  /* Vertical divider marks the chevron hit zone (expand vs navigate) */
  .nav-links.mobile-open a.has-dropdown > .mobile-chev::before {
    content: '';
    position: absolute;
    right: 22px;
    top: -14px;
    bottom: -14px;
    width: 1px;
    background: rgba(20, 19, 24, 0.08);
  }

  .nav-links.mobile-open a.has-dropdown .mobile-chev {
    display: block;
    position: absolute;
    right: 24px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #6B6882;
    border-bottom: 2px solid #6B6882;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.25s ease;
  }

  .nav-links.mobile-open li.mobile-expanded a.has-dropdown .mobile-chev {
    transform: translateY(-35%) rotate(-135deg);
  }

  /* ── Nested subnav (accordion) ────────────────────────────── */
  .nav-links.mobile-open .nav-subnav {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    display: none;
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
    background: #F5F4F9;
    border: none;
    border-top: 1px solid rgba(20, 19, 24, 0.06);
    border-radius: 0;
    box-shadow: none;
    opacity: 1 !important;
    pointer-events: all !important;
    transform: none !important;
    transition: none;
    animation: none;
    z-index: auto !important;
  }

  .nav-links.mobile-open li.mobile-expanded .nav-subnav {
    display: block;
  }

  .nav-links.mobile-open .nav-subnav-inner {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 0;
    gap: 0;
    overflow: visible;
  }

  .nav-links.mobile-open .nav-subnav-pill {
    display: block;
    width: 100%;
    padding: 12px 24px 12px 44px;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #1a1830;
    background: transparent;
    border: none;
    border-radius: 0;
  }

  .nav-links.mobile-open .nav-subnav-pill::before,
  .nav-links.mobile-open .nav-subnav-pill::after { display: none; }

  .nav-links.mobile-open .nav-subnav-pill:active {
    background: rgba(20, 19, 24, 0.04);
  }

  /* ── Mobile Let's Talk — matches other nav items ──────────── */
  .mobile-cta-wrapper {
    display: block;
    border-bottom: none !important;
  }

  .mobile-cta-wrapper a {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #1a1830;
    text-decoration: none;
    background: transparent;
    transition: background 0.15s ease;
  }

  .mobile-cta-wrapper a:active {
    background: rgba(20, 19, 24, 0.04);
  }

  /* Body scroll lock when drawer is open */
  body.nav-open { overflow: hidden; }

  /* ── Footer responsive — stack columns ────────────────────── */
  footer { padding: 48px 24px 24px; }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 32px;
  }

  .footer-logo img { height: 72px; }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .footer-links { gap: 16px; flex-wrap: wrap; }

  /* ── Homepage hero slider — show first slide only ─────────── */
  .slide:first-child {
    opacity: 1 !important;
    z-index: 1 !important;
  }
  .slide:not(:first-child) { display: none !important; }
  .slider-controls         { display: none !important; }
}

/* ── Tablet/narrow-desktop: tighten nav links ────────────────── */
@media (max-width: 1024px) and (min-width: 769px) {
  .nav-links { gap: 30px; }
  .nav-links a { font-size: 16px; }
  .nav-logo img { height: 72px; }
}