/* =====================================================================
   Site navigation: mega menus (desktop), accordions (mobile drawer) and
   the footer link block. Loaded by mu-plugins/089-tely-nav.php on every
   page except the ad pages. main.css tokens and the homepage's own
   dropdown treatment (.nav-dropdown) only; no new colours.
   ===================================================================== */

/* ---------- Desktop: top-level items ---------- */
.tn-links { gap: 28px; }
.tn-group { position: static; }      /* panels anchor to .nav-links (centred) */
.tn-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0;
  font-family: var(--sans); font-weight: 400; font-size: 18px; letter-spacing: -0.4px;
  background: none; border: 0; cursor: pointer;   /* colour from .nav-link (white over dark, ink on light) */
}
.tn-links > .nav-link { display: inline-flex; align-items: center; min-height: 44px; }
.tn-btn .tn-chev { opacity: 0.7; }
.tn-group.is-open .tn-btn .tn-chev { transform: rotate(180deg); }
.tn-group.is-open .tn-btn { opacity: 1; }
.tn-btn:focus-visible,
.tn-links > .nav-link:focus-visible,
.tn-panel a:focus-visible,
.tn-acc-btn:focus-visible,
.tn-acc-link:focus-visible,
.tn-foot a:focus-visible {
  outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px;
}
@media (max-width: 1280px) {
  .tn-links { gap: 20px; }
  .tn-links .nav-link, .tn-btn { font-size: 16px; }
}

/* ---------- Desktop: panels (same surface as .nav-dropdown) ---------- */
.tn-panel {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%);
  width: min(940px, calc(100vw - 96px));
  padding: 10px;
  background: var(--bg);
  border: 1px solid var(--border2);
  border-radius: 12px;
  box-shadow: 0 24px 48px -16px rgba(10, 17, 26, 0.18), 0 2px 4px rgba(10, 17, 26, 0.04);
  color: var(--ink); text-align: left; white-space: normal;
  /* Opens instantly: no fade, so it never sits half-transparent over the hero
     (a throttled or busy page can stall a compositor transition). */
  visibility: hidden; pointer-events: none;
  z-index: 110;
}
.tn-panel--two { width: min(640px, calc(100vw - 96px)); }
/* One short column (Resources): the panel hangs under its own button, not centred on the bar. */
.tn-group:has(.tn-panel--one) { position: relative; }
.tn-panel--one { width: 340px; }
.tn-panel--one .tn-cols { grid-template-columns: minmax(0, 1fr); }
/* A two-column panel with item descriptions (Challenges): wide enough that each title and its line fit. */
.tn-panel--two:has(.tn-item-d) { width: min(780px, calc(100vw - 96px)); }
/* hover bridge across the 14px gap so the panel does not close on the way down */
.tn-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.tn-group.is-open .tn-panel { visibility: visible; pointer-events: auto; }

.tn-hub {
  display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 16px;
  padding: 16px 18px; margin-bottom: 6px;
  border-radius: 8px; background: var(--warm);
  color: var(--ink); transition: background 0.2s ease;
}
.tn-hub:hover { background: var(--warm2); }
.tn-hub-t { font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.1; letter-spacing: -0.2px; }
.tn-hub-d { font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.4; color: var(--muted); text-wrap: pretty; }
.tn-hub-arrow { font-size: 16px; }

.tn-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 6px; }
.tn-panel--two .tn-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Specialties: four grouped columns (tely_sh_nav()). */
.tn-panel--specialties .tn-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tn-col-h {
  display: flex; align-items: center; gap: 10px;
  margin: 0 18px 4px; padding: 14px 0 10px;
  border-bottom: 1px solid var(--border2);
  font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: 1.3;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.tn-list { list-style: none; margin: 0; padding: 0; }
.tn-item {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  min-height: 44px; padding: 11px 18px; border-radius: 8px;
  color: var(--ink); transition: background 0.2s ease;
}
.tn-item:hover { background: var(--warm); }
.tn-item-t { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.3; letter-spacing: -0.3px; }
.tn-item-d { font-family: var(--sans); font-weight: 300; font-size: 13px; line-height: 1.4; color: var(--muted); }
.tn-panel--two .tn-item-t { font-weight: 400; }

/* ---------- Mobile drawer: accordions ---------- */
/* main.css centres the drawer content in a fixed card (overflow hidden). With an
   accordion open the list is taller than the card, so the inner box scrolls,
   starts at the top when it overflows (auto margins instead of centring) and
   fades out under the pinned logo + close button. */
@media (max-width: 1024px) {
  .nav-drawer-inner.tn-drawer {
    justify-content: flex-start;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 80px, #000 100px);
            mask-image: linear-gradient(to bottom, transparent 0, transparent 80px, #000 100px);
  }
  .tn-drawer > :first-child { margin-top: auto; }
  .tn-drawer > :last-child { margin-bottom: auto; }
  .tn-drawer > * { flex-shrink: 0; }
  /* Open menu sits on cream: ink logo (main.css keeps the white one at the top of a dark hero). */
  body.tn-on.nav-open .nav-logo-img--default { opacity: 0 !important; }
  body.tn-on.nav-open .nav-logo-img--ink { opacity: 1 !important; }
}
.tn-drawer .nav-drawer-link { display: flex; align-items: center; min-height: 44px; }
.tn-acc-btn {
  width: 100%; justify-content: space-between; text-align: left;
  background: none; border: 0; border-bottom: 1px solid rgba(10, 17, 26, 0.1); cursor: pointer;
}
.tn-acc-btn .tn-chev { width: 16px; height: 16px; opacity: 0.6; }
.tn-acc-btn[aria-expanded="true"] .tn-chev { transform: rotate(180deg); }
.tn-acc-btn[aria-expanded="true"] { border-bottom-color: transparent; }
.tn-acc-panel { padding: 0 0 14px; border-bottom: 1px solid rgba(10, 17, 26, 0.1); }
.tn-acc-panel[hidden] { display: none; }
.tn-acc-h {
  margin: 14px 0 2px;
  font-family: var(--sans); font-weight: 400; font-size: 12px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.tn-acc-link {
  display: flex; align-items: center; min-height: 44px;
  font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.3;
  color: var(--ink);
}
.tn-acc-link--hub { font-weight: 500; }
.tn-acc-link:hover { opacity: 0.6; }

/* ---------- Footer link block (inside the CTA strip, over the video) ---------- */
.tn-foot {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px;
  padding: 36px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.tn-foot + .cta-strip-inner { border-top-color: rgba(255, 255, 255, 0.14); padding-top: 24px; }
.tn-foot-h {
  margin: 0 0 12px;
  font-family: var(--sans); font-weight: 400; font-size: 13px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6);
}
.tn-foot ul { list-style: none; margin: 0; padding: 0; }
.tn-foot-col--wide ul { columns: 2; column-gap: 32px; }
.tn-foot li { break-inside: avoid; }
.tn-foot a {
  display: inline-block; padding: 4px 0;
  font-family: var(--sans); font-weight: 300; font-size: 14px; line-height: 1.4;
  color: rgba(255, 255, 255, 0.75); transition: color 0.2s ease;
}
.tn-foot a:hover { color: var(--white); }
/* Desktop: the strip is absolutely positioned at the bottom of the CTA; make
   room for the taller strip and darken behind it so the links read over the clip. */
body.tn-on .cta { padding-bottom: 440px; }
body.tn-on .cta > .site-footer { background: linear-gradient(to top, rgba(10, 17, 26, 0.82) 0%, rgba(10, 17, 26, 0.55) 70%, rgba(10, 17, 26, 0) 100%); }

@media (max-width: 1200px) {
  .tn-foot { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 24px; }
  .tn-foot-col--wide ul { column-gap: 24px; }
}
@media (max-width: 1024px) {
  body.tn-on .cta { padding-bottom: 0; }
  body.tn-on .cta > .site-footer { background: rgba(10, 17, 26, 0.6); }
  .tn-foot { grid-template-columns: 1fr 1fr; gap: 28px 20px; padding-top: 28px; }
  .tn-foot-col--wide { grid-column: 1 / -1; }
  .tn-foot a { display: flex; align-items: center; min-height: 44px; padding: 0; }
}
@media (max-width: 1024px) {
  .tn-foot-col--wide ul { column-gap: 20px; }
}

/* Footer strip: logo and legal links get a 44px tap target on touch screens
   (they were 36px / 19px; the brief asks for 44px). */
@media (max-width: 1024px) {
  body.tn-on .cta-strip-left .nav-logo { min-height: 44px; }
  body.tn-on .cta-strip-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Phones: the fixed "Book a call" pill hides while the hero's own buttons are on screen (js/nav.js). */
body.hero-cta-in-view .tely-sticky-cta { opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; }
/* Before js/nav.js has measured anything (first paint), pages with a hero button row start
   with the pill already hidden, with no transition, so it never flashes over those buttons.
   nav.js adds .hero-cta-ready after its first check; from then on .hero-cta-in-view decides. */
body:has(.sv-hero-ctas, .sp-hero-ctas, .ch-hero-ctas, .hv-hero-b-actions, .hv-hero-search, .hv3-ask):not(.hero-cta-ready) .tely-sticky-cta {
  opacity: 0; transform: translateX(-50%) translateY(20px); pointer-events: none; transition: none;
}

/* ========== Dropdowns v4: same minimal language as the Figma nav (2:112) ==========
   White frosted panel with the 12px radius of the nav pills, hung from the left
   edge of the left pill; Manrope only, quiet grey column labels, no rules or
   diamonds, soft hover rows. */
.nav-left { position: relative; }
.nav-left .tn-links { position: static !important; }
.nav-left .tn-group { position: static; }
.nav-left .tn-panel {
  top: calc(100% + 8px); left: 0; transform: none;
  width: min(900px, calc(100vw - 120px));
  padding: 6px; border: 0; border-radius: 12px;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 0 0 1px rgba(10, 17, 26, 0.06), 0 24px 48px -20px rgba(10, 17, 26, 0.28);
}
.nav-left .tn-panel::before { top: -10px; height: 10px; }
.nav-left .tn-group:has(.tn-panel--one) { position: relative; }
.nav-left .tn-panel--one { width: 300px; left: 0; }
.nav-left .tn-hub {
  grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 4px; border-radius: 10px; background: #f4f3ef;
}
.nav-left .tn-hub:hover { background: #ecebe6; }
.nav-left .tn-hub-t { font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1.2; letter-spacing: 0; color: #0a111a; }
.nav-left .tn-hub-d { font-family: var(--sans); font-weight: 400; font-size: 13px; color: #8c949e; }
.nav-left .tn-hub-arrow { font-size: 14px; color: #8c949e; }
.nav-left .tn-cols { gap: 0 4px; }
.nav-left .tn-col-h {
  margin: 0; padding: 12px 16px 6px; border: 0; gap: 0;
  font-family: var(--sans); font-weight: 500; font-size: 12px; line-height: 1.3;
  letter-spacing: 0; text-transform: none; color: #8c949e;
}
.nav-left .tn-col-h .hiw-diamond { display: none; }
.nav-left .tn-item { min-height: 38px; padding: 8px 16px; border-radius: 10px; gap: 2px; }
.nav-left .tn-item:hover { background: #f4f3ef; }
.nav-left .tn-item-t { font-family: var(--sans); font-weight: 400; font-size: 15px; line-height: 1.3; letter-spacing: 0; color: #0a111a; }
.nav-left .tn-item-d { font-family: var(--sans); font-weight: 400; font-size: 12.5px; color: #8c949e; }