/**
 * oasis-nav.css — SINGLE SOURCE OF TRUTH for navbar STRUCTURE and BEHAVIOUR.
 * ---------------------------------------------------------------------------
 * Loaded LAST, after every other stylesheet and after the inline <style> block
 * in tpl.php. Nothing else is allowed to define nav geometry, hit areas, panel
 * visibility, or panel transitions.
 *
 * WHY THIS FILE EXISTS
 * A previous flicker fix lived in the tpl.php inline <style> as
 *     #oasisNav .nav-mega-panel--products::before      -> specificity (1,1,1)
 * and was silently beaten by oasis-nav-mega.css
 *     #oasisNav .nav-has-mega .nav-mega-panel::before  -> specificity (1,2,1)
 * which also loaded later. The fix never applied once. Splitting nav rules
 * across 6 files made that failure invisible. Structure now lives here only.
 *
 * THE RULE THIS FILE ENFORCES
 * A hover target must never move or disappear while it is being hovered.
 * Doing so makes the browser re-run hit-testing, which flips the state back,
 * which re-runs hit-testing -> flicker at frame rate. Cosmetic rules (colour,
 * font, gradient, icon glow) intentionally stay in their existing files; they
 * cannot cause hit-test loops.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. NAV BAR SHELL
   One transition declaration, one compositing hint. Previously three
   different durations were declared across tpl.php + oasis-home-nav.css.
   ═══════════════════════════════════════════════════════════════════════════ */

#oasisNav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  direction: ltr !important;
  /* Only compositable properties. Never transition layout properties here. */
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  /* Promote to its own layer so panel repaints never dirty the page behind. */
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Inner pages paint a solid bar immediately — no transition to flash through. */
body.page-inner #oasisNav {
  transition: none;
}

/* Panels must be able to escape the bar. */
#oasisNav,
#oasisNav .nav-container,
#oasisNav .nav-links,
#oasisNav .nav-has-mini,
#oasisNav .nav-has-mega {
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. TRIGGER HIT AREAS
   Each <li> spans the FULL bar height, so its bottom edge is flush with the
   panel's top edge. That flush contact is what lets the cursor travel from
   trigger to panel with no dead zone — see section 4.
   ═══════════════════════════════════════════════════════════════════════════ */

/* NOTE ON SPECIFICITY — the position overrides below MUST all be written at
   the same `#id .class > li.class` weight (1,2,1). A plain `#oasisNav .nav-links
   > li` base rule scores (1,1,1) and would silently beat a bare
   `#oasisNav .nav-has-mega` at (1,1,0), anchoring the bar-wide Products panel
   to its own 117px <li> and throwing it ~212px off screen. That is the exact
   failure mode this file exists to prevent, so keep the weights matched. */

/* NO DEAD SPACE BETWEEN TRIGGERS — diagnosed from a real user report.
   ---------------------------------------------------------------------------
   .nav-links used `gap: 2px 6px`, which put a 6px strip between every menu
   item that belongs to the <ul>, not to any <li>. Measured on the reporter's
   machine:
       Industry   359.7 -> 471.0
       Products   477.0 -> 593.5     6px of nothing in between
       Services   599.5 -> 710.6     6px of nothing
   Dragging the pointer across the bar drops it into that crack between every
   pair of items: the open panel starts closing, the next item then opens, the
   pointer wobbles back — which is the flicker. Their debug log caught it as
   `mouseleave-li ... to: "nav-links"`.
   Sweep tests never saw it because they stepped in 8px increments and jumped
   clean over a 6px gap.
   Fix: column-gap 0, and move the spacing inside each <li> as padding. The
   layout is pixel-identical, but the hit areas now touch, so there is nowhere
   left to fall through. */
#oasisNav .nav-links {
  column-gap: 0;
}

#oasisNav .nav-links > li {
  height: 100%;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  list-style: none;
  padding-left: 3px;
  padding-right: 3px;
}

/* Default: the <li> is the containing block, so a panel centres on its own
   trigger. Applies to the mini dropdowns and to Industry. */
#oasisNav .nav-links > li.nav-has-mini,
#oasisNav .nav-links > li.nav-has-mega {
  position: relative;
}

/* Trigger-to-panel bridge, only as wide as the trigger itself.
   ---------------------------------------------------------------------------
   The panel starts at top:100% of the <li>, so in theory the two boxes touch
   exactly. In practice, at Windows display scaling of 125% / 150% the two edges
   land on fractional device pixels and can leave a sub-pixel gap that belongs
   to NEITHER element. Crossing it fires mouseleave, the panel starts closing,
   the cursor lands back on it, it reopens — flicker, and only on scaled
   displays, which is why a 100%-scale test never sees it.
   This strip is 8px tall, sits directly under the trigger, and is exactly as
   wide as the trigger — so unlike the old ::before bridge (which was 60px wider
   than the panel on each side and 24px tall) it cannot reach a neighbouring
   trigger's hit area. */
#oasisNav .nav-links > li.nav-has-mega::after,
#oasisNav .nav-links > li.nav-has-mini::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 8px;
  background: transparent;
  pointer-events: none;
}

#oasisNav .nav-links > li.nav-has-mega.is-open::after,
#oasisNav .nav-links > li.nav-has-mini.is-open::after {
  pointer-events: auto;
}

/* Products opens a bar-wide panel, so its <li> must NOT be the containing
   block — the panel centres on #oasisNav instead. Same weight as the rule
   above, placed after it, so source order decides. */
#oasisNav .nav-links > li.nav-has-mega {
  position: static;
}

/* …but Industry is a narrow mega panel that does centre on its trigger. */
#oasisNav .nav-links > li.nav-has-mega--industry {
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. PANEL VISIBILITY STATE MACHINE
   Driven exclusively by JS classes on the <li>:
     (none)        closed, not rendered, not hit-testable
     .is-open      rendered + hit-testable, still transparent
     .is-visible   faded in
     .is-closing   fading out, still rendered so the outgoing panel can
                   cross-fade under the incoming one instead of hard-cutting
   Only opacity and transform ever animate. Both are compositor-only.
   ═══════════════════════════════════════════════════════════════════════════ */

#oasisNav .nav-mega-panel,
#oasisNav .nav-mini-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-top: 0;
  /* This padding IS the trigger->panel bridge. It is part of the panel's own
     hit area and sits exactly in the gap between the bar and the visible card,
     so no ::before overlay is needed. See section 4. */
  padding-top: 20px;
  background: transparent;
  border: none;
  box-shadow: none;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  display: none;
  pointer-events: none;
  z-index: 100001;
  /* No backface-visibility / will-change / translateZ here on purpose. Forcing
     a permanent compositor layer on a panel this large (up to 1600px wide)
     makes Chrome present partially-rasterised tiles as it fades in — the panel
     appears with icons or column headings missing for a frame or two. The
     opacity transition promotes the layer for its duration anyway, which is
     all that is wanted. */
}

#oasisNav .nav-has-mega.is-open  > .nav-mega-panel,
#oasisNav .nav-has-mini.is-open  > .nav-mini-panel,
#oasisNav .nav-has-mega.is-closing > .nav-mega-panel,
#oasisNav .nav-has-mini.is-closing > .nav-mini-panel {
  display: block;
}

/* Hit-testable only while genuinely open. A closing panel is inert, so the
   cursor falls through to whatever is underneath instead of re-triggering
   the panel it is in the middle of leaving. */
#oasisNav .nav-has-mega.is-open > .nav-mega-panel,
#oasisNav .nav-has-mini.is-open > .nav-mini-panel {
  pointer-events: auto;
}

#oasisNav .nav-has-mega.is-visible > .nav-mega-panel,
#oasisNav .nav-has-mini.is-visible > .nav-mini-panel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  transition: opacity .18s ease, transform .18s ease;
}

#oasisNav .nav-has-mega.is-closing > .nav-mega-panel,
#oasisNav .nav-has-mini.is-closing > .nav-mini-panel {
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. THE HOVER BRIDGE IS DELETED — THIS IS THE PRIMARY FLICKER FIX
   ---------------------------------------------------------------------------
   Two files previously drew an invisible ::before on every panel:
       left:-60px; right:-60px; top:-24px; height:44px
   Because .nav-links > li is the full 96px bar height, that 24px overhang sat
   ON TOP of the bottom 24px of every NEIGHBOURING trigger's hit area, up to
   ~1700px wide for the Products panel. Sweeping the cursor across the bar then
   produced an enter/leave storm between the open <li> and the covered ones.
   It was never needed: the <li> bottom edge and the panel top edge already
   touch, and the panel's own 20px padding-top spans the visual gap.
   ═══════════════════════════════════════════════════════════════════════════ */

#oasisNav .nav-mega-panel::before,
#oasisNav .nav-mini-panel::before,
#oasisNav .nav-has-mega .nav-mega-panel::before,
#oasisNav .nav-has-mini .nav-mini-panel::before,
#oasisNav .nav-mega-panel--products::before,
#oasisNav .nav-mega-panel--industry::before {
  content: none !important;
}

/* ── SIDEWAYS TOLERANCE — different thing, do not confuse with the bridge ──
   Diagnosed from a real report: the pointer sat at x=363 while the Industry
   panel's left edge was x=356.7, moving downward. Six pixels of drift put it
   on the page background behind the panel, so the menu closed under the user.
   The panel is left-aligned to its trigger, so its left edge IS the trigger's
   left edge — a cliff exactly where the cursor naturally travels.

   THE CRITICAL DIFFERENCE from the bridge deleted above: that one had
   `top: -24px`, so it reached UP into the bar and covered neighbouring
   triggers. This one starts at top:0 and only ever grows LEFT, RIGHT and DOWN
   — entirely below the navbar, where nothing but page content sits and the
   panel already paints on top. It cannot touch another trigger's hit area.
   Never give this a negative `top`. */
#oasisNav .nav-has-mega.is-open > .nav-mega-panel::after,
#oasisNav .nav-has-mini.is-open > .nav-mini-panel::after {
  content: '';
  position: absolute;
  top: 0;
  left: -44px;
  right: -44px;
  bottom: -36px;
  z-index: -1;
  background: transparent;
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. PANEL SIZING
   ═══════════════════════════════════════════════════════════════════════════ */

/* Industry is CENTRED on its trigger (requested). It inherits left:50% and
   translateX(-50%) from the base panel rule in §3 — there are deliberately no
   left/transform overrides here, because an override would also have to
   restate the transform in the .is-visible and .is-closing states and those
   three declarations previously drifted apart.

   WIDTH IS THE CONSTRAINT, AND IT IS NOT COSMETIC. The trigger sits well left
   of centre, so a centred panel can only be as wide as twice the distance from
   the viewport edge to the trigger's centre. An earlier attempt at centring
   used the full 860px and pushed the left edge to -48px at 1440px.

   Measured trigger centre and the widest panel that still clears a 16px
   margin, at the widths where hover panels are enabled (>1400px, see §9):

       1401px -> centre 363 -> max 694     1600px -> centre 452 -> max 873
       1440px -> centre 382 -> max 733     1920px -> centre 612 -> max 1193
       1536px -> centre 420 -> max 809     2560px -> centre 932 -> max 1833

   Hence 672px below 1700px. Re-measure before widening it. */
#oasisNav .nav-mega-panel--industry {
  width: min(672px, calc(100vw - 32px));
}

/* Above 1700px the trigger has moved right far enough for the original width. */
@media (min-width: 1700px) {
  #oasisNav .nav-mega-panel--industry {
    width: min(860px, calc(100vw - 32px));
  }
}

#oasisNav .nav-mega-panel--products {
  width: min(1600px, calc(100vw - 32px));
  max-height: calc(100dvh - var(--nav-height) - 28px);
}

/* The card previously used 99vw here and 100vw-32px there. vw ignores the
   scrollbar, so on a scrolled page 99vw could exceed the visible width and
   push a horizontal overflow. One value, scrollbar-aware, wins. */
#oasisNav .nav-mega-panel--products .nav-drop-card {
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - var(--nav-height) - 44px);
  display: flex;
  flex-direction: column;
}

#oasisNav .nav-mega-panel--products .nav-drop-body--scroll {
  max-height: calc(100dvh - var(--nav-height) - 44px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* oasis-nav-mega.css forced overflow:visible here, defeating the scroll
   container above and letting the grid spill out of the card. */
#oasisNav .nav-mega-panel--products .nav-mega-products-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. ANIMATION GATING
   Decorative infinite animations inside a closed panel keep a compositor layer
   alive and repainting forever. Run them only while the panel is on screen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* COLUMN-HEAD ICONS REMOVED (requested).
   Each of the 6 Products column icons carried an infinite animation, a 5-stage
   colour filter (brightness→saturate→invert→hue-rotate→contrast) and two
   drop-shadow glows. That is the most expensive content in the panel to
   rasterise, and it all lands at the moment the panel opens. Headings stay;
   the icons above them are gone, and the reserved space is reclaimed so the
   columns do not leave a gap where the icon used to be. */
#oasisNav .nav-mega-panel .nav-mega-col__head .mega-col-icon,
#oasisNav .nav-mega-panel .nav-mega-col__head .nav-mega-col__icon-img,
#oasisNav .nav-mini-panel .nav-mega-col__head .mega-col-icon,
#oasisNav .nav-mini-panel .nav-mega-col__head .nav-mega-col__icon-img {
  display: none !important;
}

#oasisNav .nav-mega-panel--products .nav-mega-col__head {
  min-height: 0 !important;
  padding-bottom: 10px;
  margin-bottom: 12px;
}

/* ALL decorative icon motion inside the panels is OFF.
   Six icons were each running an infinite animation (megaIconBob / megaIconSpin
   — a permanent 360° rotation — megaIconPulse / megaIconFloat / navIndIconFloat)
   on top of a 5-stage CSS colour filter and two drop-shadow glows. That is a lot
   of per-frame raster work happening exactly while a 1600px panel is fading in,
   and it lets Chrome present the panel before every icon has finished painting —
   which looks like the panel flickering as it opens.
   Pausing them while closed was not enough: the cost lands on open, which is the
   moment that matters. The icons stay, they simply hold still. */
#oasisNav .nav-mega-panel .nav-mega-link__icon,
#oasisNav .nav-mega-panel .mega-col-icon,
#oasisNav .nav-mega-panel .mega-col-icon svg,
#oasisNav .nav-mega-panel .nav-mega-col__icon-img,
#oasisNav .nav-mini-panel .nav-mega-link__icon,
#oasisNav .nav-mini-panel .mega-col-icon,
#oasisNav .nav-mini-panel .mega-col-icon svg,
#oasisNav .nav-mini-panel .nav-mega-col__icon-img,
#oasisNav .nav-mega-panel .nav-mega-list a:hover .nav-mega-link__icon,
#oasisNav .nav-mega-panel .nav-mega-col__head:hover .mega-col-icon {
  animation: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. LINK UNDERLINE
   transform-only, so it composites. Kept here because it is driven by the
   same .nav-active state the JS state machine owns.
   ═══════════════════════════════════════════════════════════════════════════ */

#oasisNav .nav-links > li > a::after {
  content: '';
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 5px;
  height: 2px;
  background: #dc3545;
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.25, .46, .45, .94);
  pointer-events: none;
}

#oasisNav .nav-links > li > a:hover::after,
#oasisNav .nav-links > li > a:focus-visible::after,
#oasisNav .nav-links > li > a.nav-active::after {
  transform: scaleX(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  #oasisNav,
  #oasisNav .nav-mega-panel,
  #oasisNav .nav-mini-panel,
  #oasisNav .nav-links > li > a::after {
    transition: none !important;
  }
  #oasisNav .nav-mega-panel,
  #oasisNav .nav-mini-panel {
    transform: translateX(-50%) !important;
  }
  #oasisNav .nav-mega-link__icon,
  #oasisNav .mega-col-icon svg {
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. TOUCH / NARROW — hover panels are meaningless without a pointer.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1400px), (hover: none) {
  #oasisNav .nav-mega-panel,
  #oasisNav .nav-mini-panel {
    display: none !important;
  }
}