/* ==========================================================================
   VisibleThread — site-wide navigation restyle (2026)

   Applies the client's supplied nav design (nav-bars.html, variants 1a dark /
   1b light) to the existing theme markup. This file only restyles; it does not
   change nav structure, the WP menu walker, or the mobile drill-down logic.

   Loaded after style.css, so it wins at equal specificity. Selectors mirror the
   ones in style.css section 5 ("NAVIGATION VT-2026 THEME") and carry !important
   only where the rule being overridden already used it.

   State comes from inc/header-appearance.php, which resolves three independent
   axes and emits these body classes:

     body.header-dark        dark pill  (1a) — most pages
     body:not(.header-dark)  light pill (1b) — homepage + glossary
     body.vt-header-band     header sits at the top of the document rather than
                             being pushed down 30px — homepage only
     body.vt-2026-redesign   dark page background

   Pill and page are deliberately separate: the homepage is a DARK page with a
   LIGHT pill, so one cannot be derived from the other. Glossary takes the light
   colours (it already had a hand-rolled light header in Customizer CSS) but
   keeps its normal header placement, or its page spacing shifts.

   The explicit vt-page-* / vt-header-* classes are also emitted, so the
   resolved state can be read straight off the markup when debugging.
   ========================================================================== */

/* On :root, not just #header — #header-announcement is a sibling of #header and
   needs the pill height to offset itself, so it cannot inherit it from there. */
:root {
  --vtnav-pill-h: 72px;
}

#header {
  /* --- pill ------------------------------------------------------------ */
  --vtnav-pill-bg: #171233;
  --vtnav-pill-border: rgba(255, 255, 255, .10);
  --vtnav-pill-shadow: none;
  --vtnav-pill-h: 72px;

  /* --- type ------------------------------------------------------------ */
  --vtnav-link: #fff;
  --vtnav-link-hover-bg: rgba(255, 255, 255, .06);
  --vtnav-chevron: rgba(255, 255, 255, .6);

  /* --- full-width band (§11) ------------------------------------------- */
  /* Band == pill, exactly, on both variants. nav-bars.html 1a had a #171233 pill on
     a slightly-off #0A0722 band, but Fergal's 2026-07-31 direction was to make the
     band the same colour as the pill (his note said "white", against a dark page —
     i.e. the light variant), so the dark variant follows the same rule for symmetry:
     both bands are now flat and the pill reads only from its own border.
     This variant shows on LIGHT pages — glossary, company/about-us, nasa-sewp-vi,
     customer-success. */
  --vtnav-band-bg: #171233;

  /* --- dropdown panel -------------------------------------------------- */
  /* Panel is deliberately DARKER than the pill (#171233) — straight from the
     client's nav-bars.html 1a, which uses #100D1A for both the wide Platform
     panel and the small Company panel. Ours matched the pill until the reference
     file was finally obtained on 2026-07-30. */
  --vtnav-panel-bg: #100D1A;
  --vtnav-panel-border: rgba(255, 255, 255, .10);
  --vtnav-panel-shadow: 0 26px 54px rgba(6, 4, 22, .34);
  --vtnav-heading: #fff;
  --vtnav-item: rgba(255, 255, 255, .7);
  --vtnav-card-title: #fff;
  --vtnav-card-desc: rgba(255, 255, 255, .58);
  --vtnav-rule: rgba(255, 255, 255, .10);

  /* --- shared ---------------------------------------------------------- */
  --vtnav-accent: #533FFB;
  --vtnav-card-hover: rgba(83, 63, 251, .14);
  --vtnav-motion: 170ms ease;
}

/* 1b — light variant. The homepage drops `header-dark` (see functions.php). */
body:not(.header-dark) #header {
  --vtnav-pill-bg: #fff;
  --vtnav-pill-border: #DFE0E3;

  /* Band pairs with the pill, and this variant lands on DARK pages — a dark page is
     what carries the white pill, so the band tracks the pill, never the page.

     Fergal 2026-07-31: "Set Background color to white". Was #F7F8FA (nav-bars.html
     1b), now #fff, matching the pill exactly. That deliberately collapses the
     band-vs-pill contrast Micheál asked for on 2026-07-30 ("a full width div - with
     a slightly off colour"): the pill now reads only from its own 1px border and
     shadow. Fergal's call supersedes it — do not "restore" #F7F8FA. */
  --vtnav-band-bg: #fff;
  --vtnav-pill-shadow: 0 1px 3px rgba(16, 24, 35, .06);

  --vtnav-link: #101823;
  --vtnav-link-hover-bg: rgba(16, 24, 35, .04);
  --vtnav-chevron: #6B7684;

  --vtnav-panel-bg: #fff;
  --vtnav-panel-border: #DFE0E3;
  --vtnav-panel-shadow: 0 26px 54px rgba(16, 24, 35, .16);
  --vtnav-heading: #101823;
  --vtnav-item: #3D4653;
  --vtnav-card-title: #101823;
  --vtnav-card-desc: #6B7684;
  --vtnav-rule: #EAECEF;
}


/* ==========================================================================
   1. THE PILL
   ========================================================================== */

#header .container.vt-header-radius {
  min-height: var(--vtnav-pill-h);
  border-radius: 999px;
  background: var(--vtnav-pill-bg);
  border: 1px solid var(--vtnav-pill-border);
  box-shadow: var(--vtnav-pill-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-left: 26px;
  padding-right: 14px;
  gap: 24px;
  transition: background var(--vtnav-motion), border-color var(--vtnav-motion);
}

/* style.css:4378 has `body:not(.vt-2026-redesign) #header .container
   { background:#16151a }` at (0,1,2,1) — the `body` element selector beats the
   rule above at (0,1,2,0). Since only ~24 page IDs carry `vt-2026-redesign`,
   that covers most of the site, so without this the pill keeps its old colour
   everywhere — and on a light-header page it stays dark under dark link text,
   which is unreadable. */
body:not(.vt-2026-redesign) #header .container.vt-header-radius {
  background: var(--vtnav-pill-bg);
}

/* The panel is detached in the new design, so the pill keeps its full radius
   while a menu is open. Neutralises the .vt-header-radius-open JS hook. */
body.header-dark #header .container.vt-header-radius.vt-header-radius-open,
#header .container.vt-header-radius.vt-header-radius-open {
  border-radius: 999px !important;
}

/* Logo: swap to the ink mark whenever the header is light. style.css only ever
   hid `.logo-light`, so without this both logos render on light pages. */
body:not(.header-dark) #header svg.logo-dark {
  display: none;
}

body:not(.header-dark) #header svg.logo-light {
  display: block;
}


/* ==========================================================================
   2. TOP-LEVEL LINKS
   ========================================================================== */

#nav-new.vt-2026>ul>li>a {
  color: var(--vtnav-link) !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 26px;
  border-radius: 999px;
  transition: color var(--vtnav-motion), background var(--vtnav-motion);
}

#nav-new.vt-2026>ul>li>a:hover {
  background: var(--vtnav-link-hover-bg);
}

/* Chevron. Two data-URIs rather than one masked asset: a mask that fails to
   load leaves no chevron at all, and this is client-facing. */
#nav-new.vt-2026>ul>li>a::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 8px !important;
  left: unset;
  width: 15px;
  height: 15px;
  margin-top: -7.5px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.6)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  transform: rotate(0deg);
  transition: transform 160ms ease;
}

body:not(.header-dark) #nav-new.vt-2026>ul>li>a::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%236B7684' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Open state rotates the same asset — there is no second "chevron-up" image, so
   these rules only ever need to touch `transform`. They previously also
   restated background-image, which forced every one to be duplicated per theme
   and made the two states fight each other on specificity.

   Split by breakpoint on purpose. Driving the rotation from :hover at all
   widths leaves the chevron stuck open on touch devices: :hover sticks to the
   last-tapped element, so collapsing a row left its chevron rotated until you
   tapped a different one. Below 1200px the drill-down state class is the only
   correct source. */
@media (min-width: 1201px) {

  #nav-new.vt-2026>ul>li:hover>a::after {
    transform: rotate(180deg);
  }
}

@media (max-width: 1200px) {

  #nav-new.vt-2026>ul>li.top-level-active>a::after {
    transform: rotate(180deg);
  }
}

/* Items without a submenu get no chevron. */
#nav-new.vt-2026>ul#menu-main-rhs>li>a::after,
#nav-new.vt-2026>ul#menu-buttons-mobile>li>a::after {
  display: none;
}


/* ==========================================================================
   3. DROPDOWN PANELS
   ========================================================================== */

#nav-new.vt-2026 .columns-menu,
#nav-new.vt-2026>ul>li:hover ul.sub-menu:not(.columns-menu) {
  background: var(--vtnav-panel-bg);
  border: 1px solid var(--vtnav-panel-border);
  border-radius: 22px;
  box-shadow: var(--vtnav-panel-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

/* style.css carries higher-specificity copies of these under
   `body:not(.vt-2026-redesign)` — which is MOST of the site, since only ~24
   page IDs are in the redesign list. They set `overflow:hidden` (which clips
   the hover bridge below, making Customers and Company unreachable on those
   pages) and `background:#141414`. Restated here at matching specificity.
   Caught on /glossary/, where the plain submenus were dead while the
   columns-menus worked. */
body:not(.vt-2026-redesign) #nav-new.vt-2026 .columns-menu,
body:not(.vt-2026-redesign) #nav-new.vt-2026>ul>li:hover ul.sub-menu:not(.columns-menu) {
  background: var(--vtnav-panel-bg);
  border: 1px solid var(--vtnav-panel-border);
  border-radius: 22px;
  box-shadow: var(--vtnav-panel-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
}

#nav-new.vt-2026 .columns-menu {
  top: calc(var(--vtnav-pill-h) + 14px);
  padding: 34px 40px;
}

#nav-new.vt-2026>ul ul.sub-menu:not(.columns-menu) {
  padding: 14px;
}

#nav-new.vt-2026 .columns-menu h5 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--vtnav-heading);
  margin-bottom: 16px;
  padding: 0 22px;
}

/* Panel motion — desktop only. Below 1200px the drill-down toggles `display`,
   and animating a display switch is not possible; that breakpoint keeps the
   existing behaviour untouched. */
@media (min-width: 1201px) {

  #nav-new.vt-2026 .columns-menu {
    display: flex !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity var(--vtnav-motion), transform var(--vtnav-motion), visibility var(--vtnav-motion);
  }

  #nav-new.vt-2026 li:hover>.columns-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Solutions / Resources carry their own X offset in style.css (!important),
     so both rest and open states must restate it. */
  #nav-new.vt-2026 .menu-item-69263 .columns-menu {
    transform: translateX(-35%) translateY(6px) !important;
  }

  #nav-new.vt-2026 .menu-item-69263:hover>.columns-menu {
    transform: translateX(-35%) translateY(0) !important;
  }

  #nav-new.vt-2026 .menu-item-69254 .columns-menu {
    transform: translateX(-70%) translateY(6px) !important;
  }

  #nav-new.vt-2026 .menu-item-69254:hover>.columns-menu {
    transform: translateX(-70%) translateY(0) !important;
  }

  /* Products spans the pill width and is not X-shifted. */
  #nav-new.vt-2026 .menu-item-69258 .columns-menu.sub-menu {
    transform: translateY(6px) !important;
  }

  #nav-new.vt-2026 .menu-item-69258:hover>.columns-menu.sub-menu {
    transform: translateY(0) !important;
  }

  /* Plain (non-column) submenus: Customers, Company. */
  #nav-new.vt-2026>ul>li>ul.sub-menu:not(.columns-menu) {
    display: block !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(6px);
    transition: opacity var(--vtnav-motion), transform var(--vtnav-motion), visibility var(--vtnav-motion);
    top: calc(var(--vtnav-pill-h) + 14px);
  }

  #nav-new.vt-2026>ul>li:hover>ul.sub-menu:not(.columns-menu) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Hover bridging — without this every dropdown is unreachable. The panel is
     detached and show/hide is pure :hover, so the cursor must cross dead space.

     Two parts, mirroring the client's own markup (`.vt-hasmenu` is
     `display:flex; align-items:center; height:72px` in nav-bars.html):

     1. The item fills the full pill height. By default the link is ~25px tall
        and centred, so `li:hover` was lost ~30px above the pill's bottom edge.
     2. The panel carries a bridge across the remaining designed 14px gap.

     Sized to exactly the gap so it never overlays the pill, where it would
     otherwise eat clicks on Sign In / Free Trial. The bridge spans the panel's
     own width, which matters for Products / Solutions / Resources — their
     panels are X-offset from the link, so the cursor travels diagonally and
     leaves the link's own column almost immediately. */
  #nav-new.vt-2026>ul#menu-main-nav>li {
    height: var(--vtnav-pill-h);
    display: flex;
    align-items: center;
  }

  #nav-new.vt-2026 .columns-menu::before,
  #nav-new.vt-2026>ul>li>ul.sub-menu:not(.columns-menu)::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 14px;
  }
}


/* ==========================================================================
   4. PANEL ITEMS
   ========================================================================== */

#nav-new.vt-2026>ul ul li a {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--vtnav-item) !important;
  padding: 8px 22px;
  border-radius: 10px;
  transition: color var(--vtnav-motion), background var(--vtnav-motion);
}

#nav-new.vt-2026>ul ul li a:hover {
  color: var(--vtnav-accent) !important;
  background: transparent;
  font-weight: 400;
}

/* The old design slid a purple arrow in on hover; the new one is colour-only. */
#nav-new.vt-2026>ul ul li a::after {
  display: none !important;
}

/* style.css:2996 flips these anchors to `display:inline-block` on :hover, which
   collapses them to content width. In the Products grid that pulls the card off
   its 243px column (the shortest, Free Trial, drops to 221px) and leaves the
   gradient outline — drawn on the li, not the a — floating around nothing. */
#nav-new.vt-2026>ul ul li a:hover {
  display: block;
}


/* ==========================================================================
   5. PRODUCTS CARDS (#menu-platform)
   ========================================================================== */

#nav-new.vt-2026 #menu-platform li a {
  padding: 14px;
  padding-bottom: 14px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: background var(--vtnav-motion), border-color var(--vtnav-motion);
}

#nav-new.vt-2026 #menu-platform li a:hover {
  background: var(--vtnav-card-hover) !important;
}

#nav-new.vt-2026 #menu-platform li a .nav-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--vtnav-card-title);
  margin-bottom: 8px;
}

#nav-new.vt-2026 #menu-platform li a .nav-desc {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--vtnav-card-desc);
}

#nav-new.vt-2026 #menu-platform li a:hover .nav-title,
#nav-new.vt-2026 #menu-platform li a:hover .nav-desc {
  color: var(--vtnav-card-title);
}

/* --- the two highlighted cards ------------------------------------------
   "Free Trial" (.gradient-border) and "Schedule A Demo" (.purple) are the two
   CTA cards. Both had broken hovers: the gradient outline is drawn on the li at
   radius 17.5 while the card radius was 10, so the ring never lined up; and the
   purple fill kept the panel's dark title colour, leaving #101823 text on a
   #533FFB fill.
   ------------------------------------------------------------------------ */

/* Match the card radius to the gradient ring: the ring is inset 0 on the li at
   17.5px with a 2px band, so its inner edge lands at ~15.5px. */
#nav-new.vt-2026 #menu-platform li.vt-nav-item a {
  border-radius: 15px;
}

/* Free Trial: the gradient ring is the whole point, so the fill stays quiet and
   lets it read. */
#nav-new.vt-2026 #menu-platform li.vt-nav-item.gradient-border a:hover {
  background: rgba(83, 63, 251, .08) !important;
}

/* Schedule A Demo: solid accent fill, and the text has to invert with it. */
#nav-new.vt-2026 #menu-platform li.vt-nav-item.purple a:hover {
  background: var(--vtnav-accent) !important;
  border-color: var(--vtnav-accent) !important;
}

#nav-new.vt-2026 #menu-platform li.vt-nav-item.purple a:hover .nav-title,
#nav-new.vt-2026 #menu-platform li.vt-nav-item.purple a:hover .nav-desc {
  color: #fff;
}


/* ==========================================================================
   6. RIGHT-HAND BUTTONS
   ========================================================================== */

#nav-new.vt-2026 #menu-main-rhs>li>a,
#nav-new.vt-2026 #menu-buttons-mobile>li>a {
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  transition: background var(--vtnav-motion), color var(--vtnav-motion), border-color var(--vtnav-motion);
}

/* Sign In — quiet button. */
#nav-new.vt-2026 #menu-main-rhs>li:first-child>a {
  background: transparent;
  border: 1px solid var(--vtnav-pill-border);
  color: var(--vtnav-link) !important;
}

body:not(.header-dark) #nav-new.vt-2026 #menu-main-rhs>li:first-child>a {
  border-color: #DFE0E3;
}

#nav-new.vt-2026 #menu-main-rhs>li:first-child>a:hover {
  background: var(--vtnav-link-hover-bg);
}

/* Free Trial — accent button. */
#nav-new.vt-2026 #menu-main-rhs>li:last-child>a,
#nav-new.vt-2026 #menu-buttons-mobile>li:last-child>a {
  background: var(--vtnav-accent);
  color: #fff !important;
  border: 1px solid var(--vtnav-accent);
}

#nav-new.vt-2026 #menu-main-rhs>li:last-child>a:hover,
#nav-new.vt-2026 #menu-buttons-mobile>li:last-child>a:hover {
  background: #4331d6;
  border-color: #4331d6;
  color: #fff !important;
}


/* ==========================================================================
   7. HOMEPAGE HEADER

   The header has no background of its own; the page background shows through,
   so the white pill reads as sitting directly on the section below it.

   !important on background and padding is not decoration: style.css:4394 sets
   `#header { background-color: unset !important }`, and a 767-1419px rule sets
   `#header { padding: 0 !important }`. Both would otherwise win on the cascade
   regardless of this file's specificity or load order.
   ========================================================================== */
/* The header carries no background of its own — the page background shows
   through behind the pill, so the pill reads as sitting on the section below.

   It deliberately stays IN FLOW. Floating it over the hero was tried and
   rejected: the hero's own top padding assumes the header occupies space, so
   taking it out of flow drove the headline and the right-hand card up under
   the pill and the announcement bar. Reserving the space costs nothing
   visually once the header is transparent, and needs no offsets that have to
   be kept in sync with the announcement bar's height. */
body.vt-header-band #header {
  position: relative;
  top: 0;
  left: 0;
  max-width: none;
  transform: none;
  -webkit-transform: none;
  background-color: transparent !important;
  /* Was 20px, from nav-bars.html's `padding: 20px 24px`. Fergal 2026-07-31:
     "Remove top and bottom padding" — so the band is exactly as tall as the pill.
     Kept as an explicit `0 !important` rather than deleted: style.css only sets
     `#header { padding: 0 !important }` between 767 and 1419px, so above 1419px
     removing these would leave the padding uncovered. */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Desktop only. Left unscoped this outranks the <=1200px pill rule below
   (0,1,3,1 vs 0,1,2,1) and would reset its side margins back to auto. */
@media (min-width: 1201px) {

  body.vt-header-band #header .container.vt-header-radius {
    max-width: 1385px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* The floating header reserved space in the page below it; a static header
   must not. */
body.vt-header-band .eq-first-section {
  padding-top: 0 !important;
}

body.vt-header-band #main>.elementor>.elementor-section-wrap>section:first-child,
body.vt-header-band #main>.elementor>.elementor-inner>.elementor-section-wrap>section:first-child {
  padding-top: 0 !important;
}


/* ==========================================================================
   7b. NARROW DESKTOP (1201-1419px)

   style.css sets `#header { padding: 0 !important }` between 767px and 1419px.
   #header is capped at max-width:1385px, so above ~1385px the pill gets side
   room from the viewport — but below it the pill runs flush to both edges and
   its 999px corners are cut off. Restore the inset.
   ========================================================================== */

@media (min-width: 1201px) and (max-width: 1419px) {

  #header {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* ==========================================================================
   7c. GLOSSARY — compatibility with the production Customizer CSS

   Production carries ~6.4 KB of Customizer CSS (absent on sandbox) that
   hand-rolled a light header for the glossary listing and term pages before
   this mechanism existed. Two of its rules now conflict:

     .page-glossary #header .container { background: rgba(8,1,29,.04) !important }
     @media (max-width:1200px) { body.single-glossary svg.logo-dark { display:inline !important }
                                 .single-glossary #nav-new ... a { color:#fff !important } }

   Those pages are now driven by vt_use_light_header() instead, so the pill is a
   proper light pill at every width. Left alone, the second rule would put white
   links and the white logo on it below 1200px. Since Customizer CSS is stored
   in the database and loads after every enqueued stylesheet, it can only be
   beaten on specificity — hence the explicit overrides here.

   These become redundant once those glossary rules are deleted from
   Appearance -> Customize -> Additional CSS, which is the tidier end state.
   ========================================================================== */

body.page-glossary #header .container.vt-header-radius,
body.single-glossary #header .container.vt-header-radius {
  background: var(--vtnav-pill-bg) !important;
}

/* The `html` prefix and the .nav-open variants are load-bearing. Production's
   rule is `body.nav-open.page-glossary #nav-new.vt-2026>ul>li>a{color:#fff
   !important}` = (0,1,3,4); without them this override is (0,1,2,4) and loses,
   putting white labels on the white drawer. */
html body.page-glossary #nav-new.vt-2026>ul>li>a,
html body.single-glossary #nav-new.vt-2026>ul>li>a,
html body.nav-open.page-glossary #nav-new.vt-2026>ul>li>a,
html body.nav-open.single-glossary #nav-new.vt-2026>ul>li>a {
  color: var(--vtnav-link) !important;
}

/* Logo variant. This block used to force `.logo-light` unconditionally, from the
   days when glossary was assumed to always carry a light pill. `.logo-light` is
   the DARK-ink mark (its 13 wordmark paths are hard-coded fill="#08011D"), so
   once the glossary pill resolved dark the wordmark went navy-on-navy and only
   the icon was legible.

   Mirror the base switch at the top of this file instead — dark pill gets the
   white-ink mark — while keeping the specificity and !important needed to beat
   production's Customizer CSS, which has
   `@media (max-width:1200px) { body.single-glossary svg.logo-dark { display:inline !important } }`
   at (0,0,2,2). These are (0,1,3,2) and win at every width. */
body.page-glossary.header-dark #header svg.logo-dark,
body.single-glossary.header-dark #header svg.logo-dark {
  display: block !important;
}

body.page-glossary.header-dark #header svg.logo-light,
body.single-glossary.header-dark #header svg.logo-light {
  display: none !important;
}

body.page-glossary:not(.header-dark) #header svg.logo-light,
body.single-glossary:not(.header-dark) #header svg.logo-light {
  display: block !important;
}

body.page-glossary:not(.header-dark) #header svg.logo-dark,
body.single-glossary:not(.header-dark) #header svg.logo-dark {
  display: none !important;
}


/* ==========================================================================
   8. MOBILE / TABLET (<= 1200px)

   Structure and drill-down behaviour are unchanged. This restyles the bar into
   a pill, replaces the scaleY drawer transition (which visibly distorts the
   text while animating) with opacity + translate, and stops the drawer from
   letting page content show through beneath it.
   ========================================================================== */

@media (max-width: 1200px) {

  body #header {
    padding: 12px 0 !important;
    background: transparent;
  }

  body.vt-header-band #header {
    background-color: transparent !important;
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Pill, inset from the screen edges. Fixed height (not min-height) so the
     drawer, which is positioned against this box, lands predictably. */
  body #header .container.vt-header-radius {
    width: auto;
    margin: 0 12px;
    padding: 0 8px 0 16px;
    height: 60px;
    min-height: 60px;
    align-items: center;
    border-radius: 999px !important;
    background: var(--vtnav-pill-bg);
    border: 1px solid var(--vtnav-pill-border);
    box-shadow: var(--vtnav-pill-shadow);
  }

  /* Square off the bottom while the drawer is attached below it, and drop the
     bottom border so it does not draw a seam across the join.

     `display:flex` is restored here because style.css has a legacy rule
     `.nav-open #header > div, .nav-open #nav, .nav-open #nav ul {display:block}`
     at (0,1,1,1), which outranks `#header > div {display:flex}` at (0,1,0,1).
     It dates from the old markup — it still targets `#nav`, which no longer
     exists. Losing flex un-blockifies the logo (block -> inline) and drops it
     13px to the top of the pill the moment the drawer opens. */
  body.nav-open #header .container.vt-header-radius {
    display: flex;
    align-items: center;
    border-radius: 24px 24px 0 0 !important;
    border-bottom-color: transparent;
    /* The pill's drop shadow would otherwise cast a line across the drawer
       joined directly beneath it. */
    box-shadow: none;
  }

  #header .logo svg {
    max-width: 170px !important;
    height: auto;
  }

  /* Hamburger — style.css parks it at `position:absolute; top:-26px; right:15px`
     (and `top:0 !important` when active), which mis-centres it in the pill and
     leaves the X clipped at the drawer seam.
     The bars and the criss-cross X are absolutely positioned against `.inner`
     with hardcoded offsets (top: ±10px for the bars, ±14.1421px for the X arms,
     where 14.1421 = 40 * sqrt(2) / 2). Those constants assume a 40px-wide
     `.inner`, so the width is kept and only the centring is corrected.

     Pinned absolutely against the pill rather than left in the flex row: in the
     row it sat correctly closed but shifted ~28px down once `.active` was added.
     Absolute centring is identical in both states.

     Icon width is a variable because the criss-cross X derives from it: the two
     arms are the inner's full width rotated 45deg, so their vertical offset is
     w * sin(45) / 2 = w * 0.35355 and their left inset is w * (1 - cos(45)) / 2
     = w * 0.14645. style.css hardcodes those for a 40px inner (14.1421 and
     5.8579); expressing them as calc() keeps the X correct at any width. */
  #header .hamburger,
  #header .hamburger.active {
    --vtnav-burger-w: 26px;
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    left: auto !important;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    padding: 0;
    margin: 0;
    z-index: 2;
  }

  #header .hamburger>.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--vtnav-burger-w);
    margin: 0;
    transform: translateX(-50%);
  }

  /* Equal bars, tighter stack. style.css tapers them to 80% and 60%, which at
     this size reads as a rendering fault rather than a flourish. */
  #header .hamburger span.bar {
    width: 100% !important;
    height: 2px;
    border-radius: 2px;
  }

  #header .hamburger span.bar:nth-child(1) {
    top: -8px;
  }

  #header .hamburger span.bar:nth-child(3) {
    top: 8px;
  }

  #header .hamburger--criss-cross>.inner::before {
    top: calc(var(--vtnav-burger-w) * -0.35355);
    left: calc(var(--vtnav-burger-w) * 0.14645);
  }

  #header .hamburger--criss-cross>.inner::after {
    top: calc(var(--vtnav-burger-w) * 0.35355);
    left: calc(var(--vtnav-burger-w) * 0.14645);
  }

  #header .hamburger--criss-cross>.inner::before,
  #header .hamburger--criss-cross>.inner::after,
  #header .hamburger span.bar,
  #header .hamburger.active span.bar {
    background-color: var(--vtnav-link);
  }

  /* Drawer: replaces scaleY, which stretches the text during the transition.
     Its offset parent is `.container` (which is position:relative), not
     #header — so these insets are measured from the pill, and -1px pulls the
     drawer out over the pill's 1px border so the two edges line up. */
  body #header #nav-new,
  body.nav-open #header #nav-new {
    position: absolute;
    /* !important: style.css pins these to 0 !important while .nav-open is set. */
    left: -1px !important;
    right: -1px !important;
    top: 100%;
    width: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--vtnav-motion), transform var(--vtnav-motion), visibility var(--vtnav-motion);
    background: var(--vtnav-panel-bg);
    border: 1px solid var(--vtnav-panel-border);
    border-top: 0;
    border-radius: 0 0 24px 24px;
    box-shadow: var(--vtnav-panel-shadow);
    padding: 8px 0 20px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }

  body.nav-open #header #nav-new,
  #header.is-open #nav-new {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* style.css turns #header into a full-height fixed overlay while open; with a
     self-contained drawer that is no longer needed and it was what let the hero
     bleed through underneath. */
  #header.is-open {
    position: absolute;
    min-height: 0;
    overflow: visible;
    bottom: auto;
  }

  body.vt-header-band #header.is-open {
    position: relative;
  }

  /* Hairline between top-level rows so the drawer reads as a list. Drawn on the
     li, not the a, so it spans the full width regardless of the row's padding,
     and suppressed on the last row and while a row is drilled open. */
  #nav-new.vt-2026>ul#menu-main-nav>li {
    border-bottom: 1px solid var(--vtnav-rule);
    margin: 0 20px;
  }

  #nav-new.vt-2026>ul#menu-main-nav>li:last-child,
  #nav-new.vt-2026>ul#menu-main-nav>li.top-level-active {
    border-bottom-color: transparent;
  }

  /* margin:0 resets style.css's `margin: 15px 0` on the anchor, which is there
     for the desktop pill. Left in place it stacks with the padding here, making
     each row 62px tall with the label sitting above its own centre. */
  #nav-new.vt-2026>ul:nth-child(1)>li>a {
    font-size: 16px;
    font-weight: 600;
    padding: 16px 0;
    margin: 0;
    color: var(--vtnav-link) !important;
    border-radius: 0;
  }

  #nav-new.vt-2026>ul:nth-child(1)>li>a:hover,
  #nav-new.vt-2026>ul:nth-child(1)>li.top-level-active>a {
    background: transparent;
    color: var(--vtnav-accent) !important;
  }

  /* style.css draws a back-caret as a background-image on the drilled-open row,
     positioned at x:20px with `padding-left: 45px` to clear it. The row padding
     is zeroed above (the li carries the side margin now), so without restoring
     room the caret lands on top of the label. Moved to the row's own left edge
     and given a matching indent, so it reads as "< Platform". */
  #nav-new.vt-2026>ul:nth-child(1)>li.top-level-active>a {
    padding-left: 22px;
    background-position-x: 2px !important;
    background-position-y: 50% !important;
  }

  /* The li now carries the 20px side margin, so the chevron aligns to the row
     edge rather than being inset a second time. */
  #nav-new.vt-2026>ul>li>a::after {
    right: 0 !important;
  }

  #nav-new.vt-2026 .columns-menu,
  #nav-new.vt-2026>ul>li:hover ul.sub-menu:not(.columns-menu),
  #header #nav-new ul ul.sub-menu.active {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    padding: 0 0 8px;
  }

  #nav-new.vt-2026 .columns-menu h5 {
    padding: 10px 0 4px;
    margin-bottom: 2px;
  }

  /* 12px reads as one indent level in from the top-level rows, which already
     sit 20px from the screen edge via the li margin. */
  #nav-new.vt-2026>ul ul li a {
    font-size: 15px;
    padding: 9px 0 9px 12px;
  }

  #nav-new.vt-2026 #menu-platform li a {
    padding: 9px 0 9px 12px;
  }

  #nav-new.vt-2026 #menu-platform li a .nav-title {
    font-size: 15px;
    margin-bottom: 2px;
  }

  /* Card descriptions are noise in a phone drawer. */
  #nav-new.vt-2026 #menu-platform li a .nav-desc {
    display: none;
  }

  /* Client 2026-07-31: "On mobile - the free trial + login buttons could do with
     more padding."

     Measured first, because the honest answer was not "add padding". The two
     buttons are `flex: 1 1 0%` with the default `min-width: auto`, so they sit at
     their min-content width and cannot shrink: 192px + 149px + 10px gap = 351px
     inside a 294px content box at 360px viewport. The row was already ~9px over
     budget and pressed against its own padding, which is what reads as cramped.
     Adding padding side by side makes that strictly worse — it only ever fit by
     taking padding away.

     So allow the row to wrap. `flex-wrap: wrap` + `flex: 1 1 auto` stacks the
     buttons full-width exactly when they no longer fit and keeps them side by
     side when there is room (a 768px drawer has 704px, ample), so there is no
     magic phone breakpoint to maintain. */
  #nav-new #menu-buttons-mobile {
    padding: 18px 20px 20px;   /* was 6px at the bottom — buttons sat on the edge */
    gap: 12px;
    margin: 0;
    flex-wrap: wrap;
  }

  #nav-new.vt-2026 #menu-buttons-mobile>li {
    flex: 1 1 auto;
  }

  /* style.css gives these a margin-left:5px, which pushes them past the row. */
  #nav-new.vt-2026 #menu-buttons-mobile>li>a {
    width: 100%;
    margin-left: 0;
    justify-content: center;
    height: 52px;
    padding: 0 20px;
  }

  #nav-new.vt-2026 #menu-buttons-mobile>li:first-child>a {
    background: transparent;
    border: 1px solid var(--vtnav-pill-border);
    color: var(--vtnav-link) !important;
  }
}


/* ==========================================================================
   9. ANNOUNCEMENT BAR — hidden on small screens

   Requested by the client. Note this is a layout fix, not a byte saving: the
   markup and header-announcement.js still load. What it does buy is a large
   above-the-fold win — at 390px the bar wraps to roughly one word per line and
   pushes the hero almost entirely below the fold.
   ========================================================================== */

@media (max-width: 782px) {

  #header-announcement {
    display: none !important;
  }

  /* Drop the space the bar reserved, or the header floats over a gap. */
  body.has-announcement-bar.bar-type-above #header,
  body.has-announcement-bar.bar-type-under #header,
  body.has-announcement-bar.bar-type-over #header,
  body.has-announcement-bar.bar-type-above #header.scrolled,
  body.has-announcement-bar.bar-type-under #header.scrolled,
  body.has-announcement-bar.bar-type-over #header.scrolled {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    top: 0;
  }

  body.has-announcement-bar {
    padding-top: 0 !important;
  }
}


/* ==========================================================================
   10. MOBILE PERFORMANCE

   The redesign page background is a full-width PNG served at desktop size. On a
   phone it is downloaded in full, decoded, and then scaled to a strip nobody
   reads. The flat colour underneath is the same one the image sits on.
   ========================================================================== */

@media (max-width: 768px) {

  body.vt-2026-redesign {
    background-image: none;
  }
}


/* ==========================================================================
   11. FULL-WIDTH HEADER BAND

   Client direction 2026-07-30 (Micheál, Asana): "I want a more solid bar across
   the full width and the pill within it. So when using either dark or light there
   should be a full width div - with a slightly off colour."

   So the header is a solid full-width strip and the pill sits inside it. The
   structure for that already existed — §7 keeps #header in flow, full-bleed, with
   20px above and below the pill — it was only ever `background-color:
   transparent`. This section supplies the colour.

   The band colour tracks the PILL axis — see the token comment below, which is
   the authoritative statement of it. (A paragraph here previously claimed the
   opposite, that the band tracks the PAGE. That was a leftover from the first
   attempt and it contradicted both the code and the comment 30 lines down; it
   has been removed rather than corrected, so there is only one account of this.)

   Two earlier approaches were tried and dropped on the sandbox the same day; the
   repo never carried either, so there is nothing here to compare against.

   The first pulled the first section up behind a transparent header so the hero
   became the backdrop. An opaque band makes that invisible, and worse: the pull
   hid the top ~182px of every hero image behind the band, shifting the
   composition of each one. Two spacing fixes from that work are deliberately
   kept below, because they are independently correct and the client asked for
   them.

   That approach also set `#header { z-index: 60 }`, which created a stacking
   context capping every dropdown inside the header BELOW the announcement bar's
   `z-index: 9999` — the bar then painted over the open dropdowns and made them
   unreadable, exactly as the client reported. The header must sit ABOVE the bar,
   hence the 10000 below.
   ========================================================================== */

#header {
  z-index: 10000;
}

/* From the client's nav-bars.html, obtained 2026-07-30:
     1a  #171233 pill on a #0A0722 band, padding 20px 24px
     1b  #fff     pill on a #F7F8FA band, plus a 1px #DFE0E3 border
   The 20px vertical padding already matches §7.

   THE BAND TRACKS THE PILL, NOT THE PAGE. That is the whole point and it is easy to
   get backwards. A dark page carries a WHITE pill, so a dark page gets the LIGHT
   band; a light page carries the #171233 pill, so it gets the DARK band. Both colour
   pairs then sit against a page of the opposite tone, which is exactly why they read
   as a distinct bar — and why keying the band off the page axis produced a #0A0722
   band on a #08011d page, one luminance point apart and effectively invisible.

   Both values live in the pill token blocks at the top of this file, so the band is
   part of each variant's palette rather than a separate decision. */
/* Fergal 2026-07-31: "Remove border". The band's 1px #DFE0E3 bottom hairline is
   gone — the declaration is removed rather than set to transparent, since with
   §7's padding now 0 there is no box-height difference between the variants left
   to keep in step. The PILL keeps its own 1px border and shadow: that outline is
   what still reads as a pill once the band behind it is also white, and it is
   what his mockup shows. */
body.vt-header-band #header {
  background-color: var(--vtnav-band-bg) !important;
}

/* "Remove border" (Fergal 2026-07-31) — the PILL's own outline, on top of the band
   hairline already dropped above. With the band now the same colour as the pill, this
   is what makes the header read as one flat bar rather than a pill on a strip.

   `border-color: transparent` rather than `border: none`, so the 1px stays in the box
   model and nothing shifts by 2px. The shadow has to go with it: at the pill's edge,
   `0 1px 3px rgba(16,24,35,.06)` still draws a faint line exactly where the border
   was, so removing only the border would look like the border was still there.

   EVERY WIDTH, including mobile — confirmed 2026-07-31. This was briefly desktop-only
   on the reasoning that the inset mobile pill needs an edge to read as a floating
   card; the client wants it flat there too, so the phone header is simply a white bar.
   Note the 12px inset and the §8 12px vertical padding still apply, they are just no
   longer visible while the pill and the band are the same colour.

   At (0,1,3,1) this outranks §8's `body #header .container.vt-header-radius`
   (0,1,2,1), so the mobile border declaration does not need touching. */
body.vt-header-band #header .container.vt-header-radius {
  border-color: transparent;
  box-shadow: none;
}

/* style.css:4452 gives #header-announcement `margin-top: 5px`, which let 5px of the
   dark body background show between the band and the purple bar. Harmless while the
   band was #F7F8FA and offset from the page anyway; once the band went flat white it
   read as a stray dark line right where the removed hairline had been. Pre-existing
   prod behaviour, not introduced here — it is in the pristine baseline.
   (0,1,1,1) so it beats that (0,1,0,0) rule regardless of load order. */
body.vt-header-band #header-announcement {
  margin-top: 0;
}

/* Retire style.css's `body .eq-first-section { margin-top: -95px }`. It predates
   this work and pulled the hero 95px up under the header, which is why the hero
   text on /resources/guides/ and the homepage sat under the nav. Kept from the
   previous §11 — it is correct regardless of how the header is painted. */
#main > .elementor > .eq-first-section {
  margin-top: 0;
}

/* The two Resources listing pages set `--padding-top: 0` on their hero, so their
   heading landed hard against the header with no breathing room. Requested
   2026-07-30. Keyed on the slug body classes so it ports unchanged; deliberately
   not a blanket minimum, which would break the measured values in the sandbox
   hero padding map. */
body.page-guides #main > .elementor > .e-con.e-con-boxed:first-child > .e-con-inner,
body.page-published-reports #main > .elementor > .e-con.e-con-boxed:first-child > .e-con-inner {
  padding-top: calc(var(--padding-top, 0px) + 56px);
}