/* =============================================================
   TransRisk v3 — nav.css
   Complete navigation component — shell, dropdowns, mega-menu,
   mobile overlay, scroll behaviour, accessibility.
============================================================= */


/* ═══════════════════════════════════════════════════════════
   NAV SHELL
═══════════════════════════════════════════════════════════ */

/* Light bar. The TransRisk wordmark is black (#211E1F), so the mark can only
   sit on a light ground — the brand deck allows reversed-on-dark or
   full-colour-on-light, and full colour is the stronger of the two here.
   The dark hero begins immediately below, giving a crisp edge. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(15, 31, 46, 0.08);
  transition: background 0.28s ease,
              border-color 0.28s ease,
              box-shadow 0.28s ease,
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Solid after scrolling */
.site-nav.nav--scrolled {
  background: #fff;
  border-color: rgba(15, 31, 46, 0.10);
  box-shadow: 0 1px 2px rgba(15, 31, 46, 0.04),
              0 8px 24px rgba(15, 31, 46, 0.08);
}

/* nav--hidden kept for reference but no longer applied by JS */

/* Inner flex row */
.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 28px;
  height: var(--nav-h);   /* 108px — sized to the full lockup */
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;     /* anchor for mega-menu absolute positioning */
}


/* ── Logo ─────────────────────────────────────────────────── */

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-right: 28px;
  outline-offset: 4px;
}

.nav-logo:focus-visible {
  outline: 2px solid var(--color-green);
  border-radius: var(--radius-md);
}

/* .nav-logo-mark / .nav-logo-name removed — they styled the pre-launch "TR"
   placeholder, which no markup uses now that the real logo ships. */


/* ── Primary nav list ─────────────────────────────────────── */

/* Stretched full-height so `top: 100%` on a dropdown resolves to the bottom
   of the bar. .nav-inner centres its children, so the stretch has to be
   re-declared down the chain: primary -> list -> item. */
.nav-primary {
  flex: 1;
  min-width: 0;
  align-self: stretch;
}

.nav-list {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Stretched to the full bar height so a dropdown's `top: 100%` resolves to
   the bottom edge of the nav, not the bottom of the link. On a 108px bar the
   link is only 28px tall and centred, so anchoring to the link would open the
   panel 35px inside the bar — invisible now that both are white. */
.nav-item {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
}

/* ── Hover bridge ────────────────────────────────────────────
   Fills the 6 px visual gap between the nav-item bottom edge and
   the dropdown top edge.  While the mouse crosses that gap it is
   over this pseudo-element, which is a descendant of the li, so
   mouseleave never fires on the li and the dropdown stays open.
   Only rendered while the dropdown is open (.is-open).
─────────────────────────────────────────────────────────────── */
.nav-item--has-dropdown.is-open::after {
  content: '';
  position: absolute;
  top: 100%;
  /* extend generously left/right so diagonal moves to a wide
     mega-menu corner don't clip the gap detection area */
  left:  -32px;
  right: -32px;
  height: 12px;   /* a bit more than the 6 px gap */
  z-index: 299;   /* just below dropdown (300), above page content */
}

/* Shared styles for <a> and <button> nav links */
.nav-link,
.nav-link--btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #334155;            /* 9.0:1 on white */
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: 7px;
  white-space: nowrap;
  line-height: 1;
  transition: color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}

.nav-link:hover,
.nav-link--btn:hover {
  color: var(--color-navy);
  background: rgba(15, 31, 46, 0.06);
}

.nav-link:focus-visible,
.nav-link--btn:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

/* Active top-level link — green text.
   --color-green (5.31:1 on white), not --color-green-light (3.3:1, fails AA). */
.nav-link.active,
.nav-link--btn.active {
  color: var(--color-green);
  font-weight: 600;
}

/* Dropdown chevron */
.nav-chevron {
  width: 13px;
  height: 13px;
  opacity: 0.55;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.15s ease;
}

.nav-item--has-dropdown.is-open > .nav-link--btn .nav-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}


/* ── CTA button area ──────────────────────────────────────── */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
  flex-shrink: 0;
}


/* ── Hamburger ────────────────────────────────────────────── */

.nav-hamburger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 4px;
  background: none;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: background 0.15s;
  margin-left: 12px;
  flex-shrink: 0;
}

.nav-hamburger:hover {
  background: rgba(15, 31, 46, 0.06);
}

.nav-hamburger:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #334155;
  border-radius: 2px;
  transform-origin: center;
  transition: transform 0.25s ease, opacity 0.18s ease, width 0.18s ease;
}

.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ═══════════════════════════════════════════════════════════
   DROPDOWN BASE
═══════════════════════════════════════════════════════════ */

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05),
              0 20px 48px -8px rgba(0,0,0,0.13);
  padding: 6px;
  min-width: 280px;
  z-index: 300;
  /* Closed state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease,
              visibility 0.18s ease,
              transform 0.18s ease;
}

/* Open state */
.nav-item--has-dropdown.is-open > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Small arrow pointing up */
.nav-dropdown::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 20px;
  width: 10px;
  height: 10px;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  border-left: 1px solid #e5e7eb;
  transform: rotate(45deg);
  border-radius: 2px 0 0 0;
}


/* ── Standard dropdown items (dd-item) ───────────────────── */

.dd-item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.12s;
  color: inherit;
}

.dd-item:hover {
  background: rgba(45, 122, 58, 0.05);
}

.dd-item:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: -2px;
  border-radius: 8px;
}

.dd-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  color: #374151;
  flex-shrink: 0;
}

.dd-icon svg {
  width: 15px;
  height: 15px;
}

.dd-item:hover .dd-icon {
  background: rgba(45, 122, 58, 0.08);
  border-color: rgba(45, 122, 58, 0.18);
  color: var(--color-green);
}

.dd-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dd-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dd-desc {
  font-size: 0.75rem;
  color: var(--color-muted);
  line-height: 1.4;
}

/* "View all" header item — sits above the eight industries, so the rule
   separates it from the list below rather than from the list above. */
.dd-item--view-all {
  margin-bottom: 4px;
  padding-bottom: 9px;
  border-bottom: 1px solid #f3f4f6;
}

.dd-item--view-all .dd-title {
  color: var(--color-green-dark);
}

.dd-item--view-all:hover {
  background: rgba(45, 122, 58, 0.06);
}

/* Dropdown section label */
.dd-section-label {
  padding: 6px 10px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
}


/* ═══════════════════════════════════════════════════════════
   MEGA MENU (Product)
═══════════════════════════════════════════════════════════ */

/* Left-aligned to the Product trigger rather than centred on it. Centring a
   700px card on a trigger ~270px from the left pushed 79px of it off the left
   edge of the viewport and clipped the first column. */
.nav-dropdown--mega {
  width: 700px;
  min-width: 0;
  padding: 16px;
  left: 0;
  transform: translateY(-6px);
  /* Prevent viewport overflow */
  max-width: calc(100vw - 48px);
}

.nav-dropdown--mega::before {
  left: 28px;
  transform: rotate(45deg);
}

/* Open state overrides transform */
.nav-item--has-dropdown.is-open > .nav-dropdown--mega {
  transform: translateY(0);
}

/* Mega header */
.mega-header {
  padding: 2px 8px 12px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 10px;
}

.mega-header-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* 2-column grid */
.mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}

/* Individual mega item */
.mega-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.12s;
  color: inherit;
}

.mega-item:hover {
  background: rgba(45, 122, 58, 0.05);
}

.mega-item:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: -2px;
  border-radius: 8px;
}

.mega-icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(45, 122, 58, 0.08);
  border: 1px solid rgba(45, 122, 58, 0.15);
  border-radius: 7px;
  color: var(--color-green);
  flex-shrink: 0;
  transition: background 0.12s, border-color 0.12s;
}

.mega-icon svg {
  width: 14px;
  height: 14px;
}

.mega-item:hover .mega-icon {
  background: rgba(45, 122, 58, 0.13);
  border-color: rgba(45, 122, 58, 0.25);
}

.mega-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mega-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.mega-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
}

.mega-desc {
  font-size: 0.72rem;
  color: #6b7280;
  line-height: 1.45;
}

/* NEW badge */
.nav-badge-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1px 5px;
  border-radius: 100px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: rgba(45, 122, 58, 0.10);
  color: var(--color-green-dark);
  border: 1px solid rgba(45, 122, 58, 0.22);
  line-height: 1.5;
  flex-shrink: 0;
}

/* Mega footer — "View full product overview" link */
.mega-footer {
  padding-top: 12px;
  margin-top: 8px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mega-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-green-dark);
  text-decoration: none;
  padding: 5px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.mega-footer-link svg {
  width: 14px;
  height: 14px;
}

.mega-footer-link:hover {
  color: var(--color-green);
  background: rgba(45, 122, 58, 0.06);
}

.mega-footer-link:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════
   MOBILE OVERLAY
═══════════════════════════════════════════════════════════ */

.nav-mobile {
  display: none;  /* shown only via media query below */
  position: fixed;
  inset: 0;
  z-index: 400;
  background: var(--color-navy);
  flex-direction: column;
  overflow: hidden;
  /* Slide in from right */
  transform: translateX(100%);
  transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-mobile.is-open {
  transform: translateX(0);
}

/* Mobile header bar */
.nav-mobile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: var(--nav-h);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

/* Close button */
/* The drawer header is white (see .nav-mobile-header background), so this
   button and its glyph must be dark. The earlier white values were written
   for a dark header and rendered an invisible white X on white. */
.nav-mobile-close {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 31, 46, 0.05);
  border: 1px solid rgba(15, 31, 46, 0.12);
  border-radius: 8px;
  color: #334155;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.nav-mobile-close:hover {
  background: rgba(15, 31, 46, 0.10);
  color: var(--color-navy);
}

.nav-mobile-close:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: 2px;
}

.nav-mobile-close svg { width: 20px; height: 20px; }

/* Scrollable nav body */
.nav-mobile-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 0 20px;
}

.nav-mobile-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mobile link row (a or button) */
.nav-mobile-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 14px 24px;
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: color 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.nav-mobile-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

.nav-mobile-link:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: -3px;
}

.nav-mobile-link.active {
  color: var(--color-green-light);
}

/* Accordion chevron */
.nav-mobile-chevron {
  width: 16px;
  height: 16px;
  opacity: 0.45;
  flex-shrink: 0;
  transition: transform 0.2s ease, opacity 0.15s;
}

.nav-mobile-trigger[aria-expanded="true"] .nav-mobile-chevron {
  transform: rotate(180deg);
  opacity: 0.9;
}

/* Sub-menu drawer */
.nav-mobile-sub {
  background: rgba(255, 255, 255, 0.025);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding: 4px 0;
}

.nav-mobile-sub[hidden] { display: none; }

/* Sub-menu items */
.nav-mobile-sub-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 24px 10px 28px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.60);
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
}

.nav-mobile-sub-link:hover {
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.04);
}

.nav-mobile-sub-link:focus-visible {
  outline: 2px solid var(--color-green);
  outline-offset: -2px;
}

.nav-mobile-sub-icon {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  flex-shrink: 0;
}

.nav-mobile-sub-icon svg {
  width: 13px;
  height: 13px;
  color: rgba(255, 255, 255, 0.50);
}

.nav-mobile-sub-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-mobile-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  margin: 6px 24px;
}

/* Pinned CTA footer */
.nav-mobile-footer {
  flex-shrink: 0;
  padding: 16px 20px 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-mobile-footer .btn-primary {
  width: 100%;
  justify-content: center;
}


/* ═══════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
═══════════════════════════════════════════════════════════ */

/* Tablet and below → hamburger, hide desktop nav */
@media (max-width: 1024px) {
  .nav-primary  { display: none; }
  .nav-actions  { display: none; }
  .nav-hamburger { display: flex; }
  .nav-mobile   { display: flex; }

  .nav-logo { margin-right: 0; }
  .nav-inner { justify-content: space-between; }
}

/* Desktop → always show desktop nav, never show mobile */
@media (min-width: 1025px) {
  .nav-hamburger { display: none !important; }
  .nav-mobile    { display: none !important; }
}

/* On very large screens, keep mega-menu from over-extending */
@media (min-width: 1400px) {
  .nav-dropdown--mega { width: 720px; }
}

/* Tighten up nav on mid-range desktops */
@media (max-width: 1200px) {
  .nav-inner { padding: 0 20px; }
  .nav-logo  { margin-right: 16px; }

  .nav-link,
  .nav-link--btn { padding: 7px 10px; font-size: 0.875rem; }

  .nav-dropdown--mega { width: min(680px, calc(100vw - 40px)); }
}

/* ═══════════════════════════════════════════════════════════════
   BRAND LOGOS
   Sizes come from the brand guideline minimums, not from taste:

     TransRisk  — 1.7215:1, min 120px wide  → 70px tall
     TransGraph — 3.639:1,  min 130px wide  → 36px tall

   Clear space = height of each mark's green bar, which at these
   sizes is 2.2px (TransRisk) and 5.9px (TransGraph). The 80px nav
   bar leaves 5px above and below the logo, so the rule is met.

   The minimum widths also mean the logo is NOT reduced on mobile —
   shrinking it would breach the guideline. See docs/logo-asset-qa.md.
   No shadows, filters or opacity may be applied to either mark.
═══════════════════════════════════════════════════════════════ */

/* Header + mobile drawer carry the full lockup including the tagline. */
.nav-logo img {
  height: 96px;          /* 165px declared = 130px visible mark */
  width: auto;
  display: block;
}

/* Footer uses the compact lockup: .footer-tagline already prints
   "Exposure – P&L – VaR" as text, so the tagline must not appear twice. */
.footer-col--brand .nav-logo img { height: 70px; }

/* ── TransGraph ownership mark, footer lower bar ── */
.footer-owner {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* clear space: X = descriptor-bar height = 5.9px at this size */
  padding: 6px 6px 6px 0;
  outline-offset: 4px;
}

.footer-owner img {
  height: 36px;          /* = 131px wide, the brand minimum */
  width: auto;
  display: block;
}

/* Ownership mark leads the bottom bar; copy and legal links follow. */
.footer-bottom { flex-wrap: wrap; }
.footer-bottom .footer-copy { flex: 1 1 320px; }

@media (max-width: 640px) {
  /* Logos hold their minimum size; the row stacks instead. */
  .footer-bottom { justify-content: flex-start; }
}