/* ============ NAV ============
   Shared across every page: the .pt-nav* / .pt-dropdown* / .pt-mobile-* /
   .pt-mega* rules used to be duplicated in home.css, payroll-processing.css
   and governance.css. Consolidated here and loaded by every page that mounts
   NavBar (from lib/HomeSections.jsx), so a nav change is a one-file edit. */

/* On "mostly-static" pages NavBar mounts alone into #nav-root, so #nav-root
   is .pt-nav's only child and would otherwise become its containing block —
   auto-height would then equal the nav's own ~80px, giving position:sticky
   nowhere to stay stuck once you scroll a fraction of the page. display:
   contents drops #nav-root's own box so .pt-nav's containing block becomes
   body (the full page), matching how the full-React-app pages already work
   (NavBar shares a wrapper with the whole page there). */
#nav-root { display: contents; }
.pt-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(241,232,226,.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .25s, background .25s;
}
.pt-nav--scrolled {
  box-shadow: 0 8px 24px -14px rgba(26,22,19,.4);
  background: rgba(241,232,226,.96);
}
.pt-nav-inner {
  max-width: 1180px; margin: 0 auto;
  padding: 16px clamp(20px,5vw,48px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  position: relative; z-index: 2;
}
.pt-nav-links {
  display: flex; align-items: center; gap: 36px;
  list-style: none; margin: 0; padding: 0;
  font-size: 17.8px; font-weight: 500; color: var(--ink-2);
}
.pt-nav-item { position: relative; }
.pt-nav-item > span { cursor: pointer; }
.pt-nav-item > span:hover, .pt-nav-item > a:hover { color: var(--accent); }
.pt-nav-item--active > a, .pt-nav-item--active > span { color: var(--accent); }
.pt-nav-caret { margin-left: 3px; font-size: 10.8px; opacity: .6; }
.pt-nav-cta {
  font-size: 16.3px; font-weight: 500; white-space: nowrap;
  color: var(--paper); background: var(--ink);
  border: none; padding: 11px 22px; border-radius: 999px;
  transition: background .18s, transform .18s;
}
.pt-nav-cta:hover { background: #2E2823; transform: translateY(-1px); }

.pt-dropdown {
  position: absolute; top: calc(100% + 12px); left: 0;
  background: var(--paper-alt); border: 1px solid var(--border);
  border-radius: 12px; padding: 8px; min-width: 200px;
  box-shadow: 0 16px 40px -16px rgba(26,22,19,.2);
  list-style: none; margin: 0; z-index: 100;
}
.pt-dropdown li a {
  display: block; padding: 9px 14px; border-radius: 8px;
  font-size: 15.7px; color: var(--ink-2); transition: background .15s;
}
.pt-dropdown li a:hover { background: var(--paper); }

/* ===== PLATFORM MEGA MENU (desktop only, see breakpoint below) ===== */
.pt-mega {
  position: absolute; top: calc(100% + 12px); left: -20px;
  background: var(--paper-alt); border: 1px solid var(--border);
  border-radius: 14px; padding: 12px; box-shadow: 0 20px 48px -20px rgba(26,22,19,.22);
  z-index: 100;
}
.pt-mega-cards { display: flex; align-items: stretch; gap: 4px; list-style: none; margin: 0; padding: 0; }
.pt-mega-card {
  display: block;
  width: 220px; padding: 14px; border-radius: 10px; text-decoration: none; color: var(--ink);
  transition: background .15s;
}
.pt-mega-card:hover, .pt-mega-card:focus-visible { background: var(--paper); outline: none; }
.pt-mega-title { display: block; font-size: 15.7px; font-weight: 600; color: var(--ink); }
.pt-mega-desc { font-size: 13.5px; color: var(--ink-2); margin-top: 2px; line-height: 1.4; }
.pt-mega-footer {
  display: block; margin-top: 9px; padding: 12px 14px 2px;
  border-top: 1px solid var(--border);
  font-size: 13.7px; color: var(--ink-2); text-decoration: none;
}
.pt-mega-footer:hover { color: var(--accent); }

/* ===== MOBILE NAV / HAMBURGER ===== */
.pt-nav-actions { display: flex; align-items: center; gap: 14px; }
.pt-nav-toggle {
  display: none;
  width: 42px; height: 42px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 1px solid var(--border); border-radius: 10px;
}
.pt-nav-toggle-bar {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink); transition: transform .25s ease, opacity .2s ease;
}
.pt-nav-toggle--open .pt-nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.pt-nav-toggle--open .pt-nav-toggle-bar:nth-child(2) { opacity: 0; }
.pt-nav-toggle--open .pt-nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.pt-mobile-menu {
  position: fixed; left: 0; right: 0; top: 0; z-index: 1;
  background: var(--paper-alt); border-bottom: 1px solid var(--border);
  box-shadow: 0 24px 48px -24px rgba(26,22,19,.35);
  padding: 84px clamp(20px,5vw,48px) 28px;
  max-height: 100dvh; overflow-y: auto;
  transform: translateY(-100%); opacity: 0; visibility: hidden;
  transition: transform .3s ease, opacity .3s ease, visibility .3s;
}
.pt-mobile-menu--open { transform: translateY(0); opacity: 1; visibility: visible; }
.pt-mobile-list { list-style: none; margin: 0; padding: 0; }
.pt-mobile-group { padding: 14px 0; border-bottom: 1px solid var(--border); }
.pt-mobile-heading, .pt-mobile-link {
  display: block; font-size: 20px; font-weight: 600; color: var(--ink); text-decoration: none;
}
.pt-mobile-link:hover { color: var(--accent); }
.pt-mobile-sublist { list-style: none; margin: 8px 0 0; padding: 0; }
.pt-mobile-sublink {
  display: block; padding: 8px 0; font-size: 16.5px; color: var(--ink-2); text-decoration: none;
}
.pt-mobile-sublink:hover { color: var(--accent); }
.pt-mobile-cta {
  display: block; text-align: center; margin-top: 22px;
  font-size: 17.3px; font-weight: 500; color: var(--paper); background: var(--ink);
  padding: 14px 22px; border-radius: 999px; text-decoration: none;
}
.pt-mobile-cta:hover { background: #2E2823; }

@media (max-width: 900px) {
  .pt-nav-links { display: none; }
  .pt-nav-toggle { display: flex; }
  .pt-nav-cta { display: none !important; }
  .pt-mega { display: none; }
}