/* ===========================================================
   TechSolvera Navbar — built from scratch, fully namespaced
   under .tsnav so nothing in the legacy stylesheet (style.css)
   can collide with or override it, and vice versa.

   Color palette (warm charcoal + cream-gray + gold, replacing the earlier
   blue/navy branding). Defined here as :root custom properties because
   navbar.css loads on every page — home.css and the shared parts of
   style.css that were brought into this palette (contact form, industries
   carousel) reference these same variables rather than repeating hex
   values, so the whole palette can still be retuned from one place.
   =========================================================== */

:root {
  --th-ink: #2a2721;
  --th-ink-dim: #4a473f;
  --th-ink-soft: #6b6862;
  --th-ink-muted: #8c887d;
  --th-bg: #ffffff;
  --th-bg-alt: #f6f4ef;
  --th-border: #ece8df;
  --th-gold: #c89530;
  --th-gold-light: #e0b04e;
  --th-gold-deep: #8f6a23;
  --th-gold-soft-bg: #faf0da;
  --th-gold-soft-bg-hover: #f5e3b3;
  --th-shadow-rgb: 42, 39, 33;
}

.tsnav, .tsnav * { box-sizing: border-box; }

.tsnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2000;
  background: var(--th-bg);
  box-shadow: 0 1px 2px rgba(var(--th-shadow-rgb), 0.06);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* align-items: stretch (rather than center) so .tsnav-menu/.tsnav-list/each
   <li> inherit the bar's full 72px height down the chain — that's what lets
   every nav link's hoverable area reach all the way to the bar's bottom
   edge with zero gap before a panel, see .tsnav-list > li > a below. */
.tsnav-bar {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  padding: 0 24px;
  height: 72px;
}

.tsnav-logo {
  display: flex;
  align-items: center;
  font-size: 20px;
  font-weight: 800;
  color: var(--th-ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

/* ---------- Desktop menu ---------- */
.tsnav-list {
  display: flex;
  align-items: stretch;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Deliberately NOT position:relative here. A panel needs to center on the
   whole header, not on its own (much narrower) trigger <li> — centering
   under the trigger overflowed off the right edge of the screen for items
   that sit close to it (Training & Upskilling). Leaving the <li> unpositioned
   means its .tsnav-panel child's position:absolute resolves against .tsnav
   instead (the nearest positioned ancestor, which is position:fixed and
   spans the full viewport width) — see .tsnav-panel's left/transform below. */
.tsnav-list > li {
  display: flex;
}

/* The link fills the full bar height (not just its own text height) so the
   list item's hoverable box reaches all the way down to the bar's bottom
   edge, which is exactly where the panel starts (see .tsnav-panel's
   top: 100%). With no gap between "where hover is true" and "where the
   panel begins", there's no dead zone for the mouse to cross while moving
   from the link down into the panel — which is what was closing the panel
   before the cursor ever reached a submenu item. */
.tsnav-list > li > a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 16px;
  color: var(--th-ink);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  transition: background-color .15s ease, color .15s ease;
}
.tsnav-list > li > a:hover {
  background-color: var(--th-bg-alt);
  color: var(--th-gold-deep);
}

/* Decorative chevron next to items that reveal a panel — purely visual,
   never intercepts a click, so it can never fight the link underneath it. */
.tsnav-has-panel > a::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top: -3px;
  opacity: .55;
  transition: transform .18s ease;
}
.tsnav-has-panel.tsnav-open > a::after,
.tsnav-has-panel:focus-within > a::after {
  transform: rotate(225deg);
  margin-top: 3px;
}

/* ---------- Panels (mega-menu + simple dropdown) ---------- */
/* Shared chrome + positioning for EVERY panel (mega menu and simple
   dropdowns alike) so they all look and behave the same way, per feedback.
   top: 100% (not 100% + a gap) means the panel starts exactly where the
   stretched <li> ends — combined with the full-height link above, there is
   no empty space for the mouse to cross, so hover never drops while moving
   from the link down into the panel.
   left: 50% + translateX(-50%) centers the panel under its own trigger
   link's box rather than flush against its left edge, which keeps wide
   panels from running off whichever side has less room. */
.tsnav-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--th-bg);
  border-radius: 14px;
  border: 1px solid var(--th-border);
  border-top: 3px solid var(--th-gold);
  box-shadow: 0 24px 48px rgba(var(--th-shadow-rgb), 0.14);
  z-index: 2001;
}

/* Base panel classes (.tsnav-mega / .tsnav-dropdown below) intentionally
   never set `display` themselves — only these rules do. Letting a base
   class set its own unconditional `display` was the earlier bug: it had
   equal CSS specificity to these rules and, being declared later in the
   file, silently won the cascade and kept the panel visibly open at all
   times regardless of hover state.
   .tsnav-open is added/removed by navbar.js (mouseenter/mouseleave with a
   short grace period) rather than relying on raw CSS :hover here — a mega
   menu this wide has to be centered under a much narrower trigger link, so
   a straight mouse path from the link to a side item can cross a sliver of
   space that belongs to neither box; CSS :hover has no tolerance for that
   and drops instantly, which is what was closing the panel before the
   cursor reached a submenu item. :focus-within is untouched, so tabbing
   through links with a keyboard still opens panels with no JS involved. */
.tsnav-has-panel.tsnav-open > .tsnav-mega,
.tsnav-has-panel:focus-within > .tsnav-mega {
  display: flex;
}
.tsnav-has-panel.tsnav-open > .tsnav-dropdown,
.tsnav-has-panel:focus-within > .tsnav-dropdown {
  display: grid;
}

/* ---------- Mega menu (Services) ---------- */
/* grid-template-columns uses auto-fit/minmax instead of a fixed column
   count, and every category renders as the same self-contained
   .tsnav-mega-cell card (own border/radius/padding) rather than relying on
   nth-child or "last cell" selectors to fake dividers between cells. That
   means adding, removing, or reordering categories in nav-data.php just
   works — the grid reflows on its own and no CSS has to be touched.
   max-height + overflow-y stays only as a last-resort safety net for
   genuinely extreme cases (e.g. a very long category list on a tiny
   window) — the real fix for normal use is keeping actual content height
   low enough that visitors never have to scroll to see every category; see
   TSNAV_CATEGORY_COLUMN_SPLIT_THRESHOLD in nav-data.php, which is what
   keeps a long category (like Salesforce Services today) from dictating
   the whole panel's height on its own. */
.tsnav-mega {
  width: 940px;
  max-width: min(92vw, 940px);
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 14px;
}

.tsnav-mega-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.tsnav-mega-cell {
  padding: 14px 16px;
  border: 1px solid var(--th-border);
  border-radius: 12px;
}

.tsnav-cat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--th-gold-deep);
  margin: 0 0 8px;
}

/* Applied automatically (see nav-data.php) to any category whose item count
   passes the split threshold, so a long list takes fewer rows instead of
   growing tall enough to push the panel past the fold. */
.tsnav-sublist-cols {
  column-count: 2;
  column-gap: 14px;
}
.tsnav-sublist-cols li {
  break-inside: avoid;
}

/* Shared by every category header AND every simple-dropdown item (Staff
   Augmentation / Training & Upskilling) — one icon treatment everywhere in
   the nav instead of two different styles that can drift apart. */
.tsnav-icon-badge {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--th-gold-light), var(--th-gold));
  color: var(--th-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
}

.tsnav-sublist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tsnav-sublist a {
  display: block;
  padding: 5px 9px;
  margin: 0 -9px;
  border-radius: 7px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--th-ink-dim);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}
.tsnav-sublist a:hover {
  background-color: var(--th-gold-soft-bg);
  color: var(--th-gold-deep);
  padding-left: 14px;
}

/* ---------- Simple dropdown (Staff Augmentation / Training & Upskilling) ----------
   Same grid-based language and the same .tsnav-icon-badge icon treatment as
   the mega menu's category headers, so every panel in the nav reads as one
   consistent design. auto-fit/minmax means the number of items is never
   assumed — adding a 6th item to nav-data.php just reflows the grid. */
.tsnav-dropdown {
  width: 620px;
  max-width: min(92vw, 620px);
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 4px 10px;
  padding: 16px;
}
.tsnav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--th-ink-dim);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
.tsnav-dropdown a:hover {
  background-color: var(--th-gold-soft-bg);
  color: var(--th-gold-deep);
}

/* The one real, functional destination in the Training & Upskilling panel —
   set apart from the placeholder items around it as a full-width highlight
   row rather than just another grid cell. */
.tsnav-dropdown a.tsnav-dropdown-highlight {
  grid-column: 1 / -1;
  justify-content: center;
  margin-top: 6px;
  background-color: var(--th-gold-soft-bg);
  color: var(--th-gold-deep);
  font-weight: 700;
}
.tsnav-dropdown a.tsnav-dropdown-highlight:hover {
  background-color: var(--th-gold-soft-bg-hover);
}

/* ---------- Mobile hamburger toggle ---------- */
.tsnav-toggle {
  display: none;
  align-self: center;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
.tsnav-toggle span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--th-ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.tsnav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.tsnav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tsnav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Mobile layout ---------- */
@media (max-width: 900px) {
  .tsnav-mega { width: 660px; }
  .tsnav-mega-cell { padding: 18px 20px; }
  .tsnav-dropdown { width: 480px; }
}

@media (max-width: 768px) {
  .tsnav-bar { height: 64px; padding: 0 18px; }
  .tsnav-toggle { display: flex; }

  .tsnav-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--th-bg);
    overflow-y: auto;
    border-top: 1px solid var(--th-border);
  }
  .tsnav-menu.tsnav-menu-open { display: block; }

  .tsnav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 24px;
  }
  /* Desktop makes each <li> a row-flex container so the link can stretch to
     fill the full bar height (closes the hover dead-zone before a panel).
     That same row layout is wrong on mobile — it sits the link and panel
     side by side instead of stacking them, squeezing the panel into
     whatever width is left after the link and shifting it rightward. Block
     layout here lets the panel simply flow below the link, full width. */
  .tsnav-list > li {
    display: block;
  }
  .tsnav-list > li > a {
    padding: 15px 20px;
    border-radius: 0;
    border-bottom: 1px solid var(--th-border);
  }

  /* position:static alone isn't enough here — transform keeps applying
     regardless of position, so without resetting it too, the desktop
     centering transform (translateX(-50%), see the base .tsnav-panel rule)
     was still shifting this full-width mobile panel half its own width off
     the left edge of the screen. */
  .tsnav-panel {
    display: none;
    position: static;
    left: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--th-bg-alt);
  }
  .tsnav-has-panel.tsnav-open > .tsnav-panel { display: block; }
  /* Hover/focus-within must NOT reveal panels on touch screens — only the
     explicit .tsnav-open class (set by a tap) should, so remove the hover
     trigger at this breakpoint. */
  .tsnav-has-panel:hover > .tsnav-panel,
  .tsnav-has-panel:focus-within > .tsnav-panel {
    display: none;
  }
  .tsnav-has-panel.tsnav-open > .tsnav-panel {
    display: block;
  }

  /* The mega grid's auto-fit/minmax columns already collapse to a single
     column on their own at this width — no override needed, which is the
     whole point of not hardcoding a column count in the first place. */
  .tsnav-mega {
    position: static;
    transform: none;
    width: 100%;
    max-width: 100%;
    max-height: none;
    overflow: visible;
    padding: 12px;
  }
  .tsnav-sublist-cols { column-count: 1; }

  .tsnav-dropdown {
    width: 100%;
    max-width: 100%;
    grid-template-columns: 1fr;
    padding: 10px;
  }
}