/* Trinovation.co shared menu styles. The menu itself is generated on every
 * page by brand/site-nav/build_nav.py. Link colours follow each page's own nav;
 * site.js sets --trn-menu-bg to the nav's (opaque) background. */

/* ── Dropdowns (desktop) ───────────────────────────────────────────────── */
.nav-dd { position: relative; }
.nav-dd > a::after { content: "\25BE"; font-size: 0.7em; margin-left: 4px; opacity: 0.7; }
.nav-sub {
  display: none; position: absolute; top: 100%; left: -16px; z-index: 200;
  min-width: 220px; margin: 0; padding: 8px 0; list-style: none;
  background: var(--trn-menu-bg, #0A1628);
  border: 1px solid rgba(127, 127, 127, 0.25); border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}
.nav-sub li { margin: 0; }
.nav-sub a { display: block; padding: 8px 16px; white-space: nowrap; font-weight: 500 !important; }
.nav-sub a:hover { text-decoration: underline; text-underline-offset: 3px; }
.nav-dd:hover .nav-sub, .nav-dd:focus-within .nav-sub, .nav-dd.trn-exp .nav-sub { display: block; }

/* "You are here": underline the section the current page belongs to. */
.nav-links > li.trn-active > a {
  font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* Keep top-level labels on one line. */
.nav-links > li > a { white-space: nowrap; }

/* ── Open mobile menu: accordion ───────────────────────────────────────── */
.nav-links.open .nav-sub, .nav-links.trn-open .nav-sub {
  display: none; position: static; min-width: 0; padding: 0 0 6px 14px;
  background: none; border: 0; box-shadow: none;
}
.nav-links.open .nav-dd.trn-exp .nav-sub, .nav-links.trn-open .nav-dd.trn-exp .nav-sub { display: block; }
.nav-links.open .nav-dd > a, .nav-links.trn-open .nav-dd > a { display: flex !important; justify-content: space-between; }
.nav-links.open .nav-dd > a::after, .nav-links.trn-open .nav-dd > a::after { content: "+"; font-size: 1.1em; opacity: 0.6; }
.nav-links.open .nav-dd.trn-exp > a::after, .nav-links.trn-open .nav-dd.trn-exp > a::after { content: "\2212"; }
.nav-links.open > li.trn-active > a, .nav-links.trn-open > li.trn-active > a { text-decoration: none; }

/* ── Light pages that have no menu styling of their own ────────────────── */
.nav-links.trn-basic { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav-links.trn-basic > li > a { font-size: 0.875rem; font-weight: 500; color: #475569; text-decoration: none; }
.nav-links.trn-basic > li > a:hover { color: #0A1628; }
.nav-links.trn-basic .nav-sub a { color: #475569; font-size: 0.875rem; text-decoration: none; }
.nav-links.trn-basic .nav-cta {
  background: #0EA5E9; color: #fff !important; padding: 8px 18px; border-radius: 8px; font-weight: 600;
}
.nav-links.trn-basic .nav-cta:hover { background: #0284C7; }
@media (max-width: 900px) {
  .nav-links.trn-mobile-nav:not(.trn-open) { display: none !important; }
}

/* ── Mid-size screens: tighten so the menu fits on one line ────────────── */
@media (min-width: 901px) and (max-width: 1240px) {
  .nav-links { gap: 18px !important; }
  .nav-links > li > a { font-size: 0.85rem !important; }
  .nav-links .nav-cta { padding: 7px 14px !important; }
}

/* ── Top-level "Free Checklist" link: always visible, teal ─────────────── */
.nav-links .trn-hl { color: #0EA5E9 !important; font-weight: 600 !important; }
.nav-links .trn-hl:hover { color: #0284C7 !important; }
.nav-links .trn-hl[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ── Thank-you pages: simple top bar carrying the same menu ────────────── */
.trn-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; border-bottom: 1px solid #E2E8F0; }
.trn-topbar-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; justify-content: space-between; position: relative; }
.trn-topbar-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; letter-spacing: 0.02em; text-decoration: none; }
.trn-topbar-logo img { width: 32px; height: 32px; }
body.trn-has-topbar { padding-top: 88px !important; }
.trn-topbar .trn-toggle span { background: #0A1628 !important; }
/* The top bar carries the logo, so hide the thank-you pages' own wordmark. */
body.trn-has-topbar .wrap > .logo, body.trn-has-topbar .card > .logo { display: none; }