/* ═══════════════════════════════════════════════════════════════════
   NAV-FX — shared header interaction layer
   Loaded after each page's own stylesheet so it wins on the few
   properties it overrides. Two markup variants exist across the site:
     index.html  →  .drop  / .chev
     everything else → .dropdown / .chevron
   Both are handled here. .mega is shared by all pages.
   Everything below is desktop-only (min-width:1025px) because the nav
   is replaced by the mobile drawer at 1024px, and the drawer sets its
   own !important overrides that these effects must not fight.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 1025px) {

  /* ── TOP-LEVEL ITEMS ──────────────────────────────────────────── */
  .nav > li > a {
    position: relative;
    isolation: isolate;
    transition: color 200ms cubic-bezier(.4,0,.2,1);
  }

  /* Tinted pill that fades in behind the label. Sits at z-index -1 so
     it never covers the text or the chevron. */
  .nav > li > a::before {
    content: "";
    position: absolute;
    inset: 2px -2px;
    z-index: -1;
    border-radius: 8px;
    background: var(--red-bg, rgba(201,27,0,.07));
    opacity: 0;
    transform: scale(.88);
    transition: opacity 200ms cubic-bezier(.4,0,.2,1),
                transform 260ms cubic-bezier(.34,1.56,.64,1);
  }

  /* Underline that grows from the centre. */
  .nav > li > a::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--red, #C91B00), #FF6A4D);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 260ms cubic-bezier(.4,0,.2,1);
  }

  .nav > li > a:hover::before,
  .nav > li:hover > a::before,
  .nav > li:focus-within > a::before {
    opacity: 1;
    transform: scale(1);
  }

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

  /* Page stylesheets paint a grey background straight onto the anchor for
     :hover and .active. That competes with the tinted pill above, so it is
     cleared here and the pill carries both states in brand colour. */
  .nav > li > a:hover,
  .nav > li > a.active { background: transparent }

  /* The current page keeps its pill and underline at rest. */
  .nav > li > a.active {
    color: var(--red, #C91B00);
    font-weight: 600;
  }
  .nav > li > a.active::before { opacity: 1; transform: scale(1) }

  /* "Digital Transformation" wrapped to two lines on pages whose stylesheet
     omits nowrap, leaving the row uneven. */
  .nav > li > a { white-space: nowrap }

  /* Chevron: rotate and lift the colour on hover. The page stylesheets
     already rotate it; this adds the easing and covers both class names. */
  .nav .chev,
  .nav .chevron {
    transition: transform 260ms cubic-bezier(.34,1.56,.64,1),
                color 200ms cubic-bezier(.4,0,.2,1);
  }
  .nav > li:hover .chev,
  .nav > li:hover .chevron,
  .nav > li:focus-within .chev,
  .nav > li:focus-within .chevron {
    transform: rotate(180deg);
    color: var(--red, #C91B00);
  }

  /* ── PANELS ───────────────────────────────────────────────────── */
  /* Uniform 8px offset — index.html used 4px, the rest 8px. */
  .nav > li > .drop,
  .nav > li > .dropdown,
  .nav > li > .mega { top: calc(100% + 8px) }

  /* Invisible bridge across that gap. Without it the panel closes while
     the cursor is travelling from the tab down to the first row. */
  .nav > li:hover::after,
  .nav > li:focus-within::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 10px;
  }

  /* Softer, longer easing on the panel itself than the page stylesheets use. */
  .nav > li > .drop,
  .nav > li > .dropdown,
  .nav > li > .mega {
    transition: opacity 220ms cubic-bezier(.4,0,.2,1),
                transform 300ms cubic-bezier(.22,1,.36,1),
                visibility 220ms;
  }

  /* A hairline of brand colour along the top of the open panel. */
  .nav > li > .drop::after,
  .nav > li > .dropdown::after,
  .nav > li > .mega::after {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 2px;
    border-radius: 0 0 2px 2px;
    background: linear-gradient(90deg, transparent, var(--red, #C91B00), transparent);
    opacity: 0;
    transition: opacity 320ms cubic-bezier(.4,0,.2,1) 80ms;
  }
  .nav > li:hover > .drop::after,
  .nav > li:hover > .dropdown::after,
  .nav > li:hover > .mega::after,
  .nav > li:focus-within > .drop::after,
  .nav > li:focus-within > .dropdown::after,
  .nav > li:focus-within > .mega::after {
    opacity: 1;
  }

  /* ── PANEL ITEMS: staggered reveal ────────────────────────────── */
  /* Items start nudged left and transparent; opening the panel walks
     them in. The delay is on the open state only, so closing is instant
     and the panel never appears to linger. */
  .nav .drop > li,
  .nav .dropdown > li,
  .nav .mega-grid > a,
  .nav .mega-grid > li {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 240ms cubic-bezier(.4,0,.2,1),
                transform 240ms cubic-bezier(.4,0,.2,1);
  }
  .nav > li:hover .drop > li,
  .nav > li:hover .dropdown > li,
  .nav > li:hover .mega-grid > a,
  .nav > li:hover .mega-grid > li,
  .nav > li:focus-within .drop > li,
  .nav > li:focus-within .dropdown > li,
  .nav > li:focus-within .mega-grid > a,
  .nav > li:focus-within .mega-grid > li {
    opacity: 1;
    transform: translateX(0);
  }
  .nav > li:hover .drop > li:nth-child(1),
  .nav > li:hover .dropdown > li:nth-child(1),
  .nav > li:hover .mega-grid > :nth-child(1),
  .nav > li:focus-within .drop > li:nth-child(1),
  .nav > li:focus-within .dropdown > li:nth-child(1),
  .nav > li:focus-within .mega-grid > :nth-child(1) { transition-delay: 40ms }
  .nav > li:hover .drop > li:nth-child(2),
  .nav > li:hover .dropdown > li:nth-child(2),
  .nav > li:hover .mega-grid > :nth-child(2),
  .nav > li:focus-within .drop > li:nth-child(2),
  .nav > li:focus-within .dropdown > li:nth-child(2),
  .nav > li:focus-within .mega-grid > :nth-child(2) { transition-delay: 70ms }
  .nav > li:hover .drop > li:nth-child(3),
  .nav > li:hover .dropdown > li:nth-child(3),
  .nav > li:hover .mega-grid > :nth-child(3),
  .nav > li:focus-within .drop > li:nth-child(3),
  .nav > li:focus-within .dropdown > li:nth-child(3),
  .nav > li:focus-within .mega-grid > :nth-child(3) { transition-delay: 100ms }
  .nav > li:hover .drop > li:nth-child(4),
  .nav > li:hover .dropdown > li:nth-child(4),
  .nav > li:hover .mega-grid > :nth-child(4),
  .nav > li:focus-within .drop > li:nth-child(4),
  .nav > li:focus-within .dropdown > li:nth-child(4),
  .nav > li:focus-within .mega-grid > :nth-child(4) { transition-delay: 125ms }
  .nav > li:hover .drop > li:nth-child(n+5),
  .nav > li:hover .dropdown > li:nth-child(n+5),
  .nav > li:hover .mega-grid > :nth-child(n+5),
  .nav > li:focus-within .drop > li:nth-child(n+5),
  .nav > li:focus-within .dropdown > li:nth-child(n+5),
  .nav > li:focus-within .mega-grid > :nth-child(n+5) { transition-delay: 150ms }

  /* ── PANEL LINK HOVER ─────────────────────────────────────────── */
  .nav .drop a,
  .nav .dropdown a,
  .nav .mega a {
    position: relative;
    padding-left: 16px !important;
    transition: background 180ms cubic-bezier(.4,0,.2,1),
                color 180ms cubic-bezier(.4,0,.2,1),
                padding-left 200ms cubic-bezier(.4,0,.2,1);
  }
  /* Red marker that grows at the left edge of the hovered row. */
  .nav .drop a::before,
  .nav .dropdown a::before,
  .nav .mega a::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 2px;
    background: var(--red, #C91B00);
    transform: translateY(-50%);
    transition: height 200ms cubic-bezier(.4,0,.2,1);
  }
  .nav .drop a:hover,
  .nav .dropdown a:hover,
  .nav .mega a:hover,
  .nav .drop a:focus-visible,
  .nav .dropdown a:focus-visible,
  .nav .mega a:focus-visible {
    padding-left: 22px !important;
    background: var(--red-bg, rgba(201,27,0,.07));
    color: var(--red, #C91B00);
  }
  .nav .drop a:hover::before,
  .nav .dropdown a:hover::before,
  .nav .mega a:hover::before,
  .nav .drop a:focus-visible::before,
  .nav .dropdown a:focus-visible::before,
  .nav .mega a:focus-visible::before {
    height: 60%;
  }

  /* The current page's row in an open panel. */
  .nav .drop a.active,
  .nav .dropdown a.active,
  .nav .mega a.active {
    color: var(--red, #C91B00);
    font-weight: 600;
    /* Page stylesheets tint the active row grey; brand tint instead. */
    background: var(--red-bg, rgba(201,27,0,.07));
  }
  .nav .drop a.active::before,
  .nav .dropdown a.active::before,
  .nav .mega a.active::before { height: 60% }

  /* Keeping every label on one line costs width, so the row tightens
     between the desktop breakpoint and the point where it fits comfortably.
     Without this the "Let's Talk" button is pushed off-screen at ~1025px. */
  @media (max-width: 1240px) {
    .nav > li > a { padding-left: 8px; padding-right: 8px; font-size: 12.8px }
    .nav > li > a::after { left: 8px; right: 8px }
    .header-inner { gap: 16px }
    /* The secondary "Contact" button already drops out below 1024; it drops
       out earlier here so the primary CTA is not pushed off-screen. Contact
       stays reachable from the footer and the mobile drawer. */
    .header-cta .btn-secondary,
    .header-cta .btn-ghost { display: none }
  }
  @media (max-width: 1080px) {
    .nav > li > a { padding-left: 6px; padding-right: 6px; font-size: 12.2px }
    .nav > li > a::after { left: 6px; right: 6px }
    .header-inner { gap: 12px }
    /* index.html styles the logo as `.logo img`; the rest use `.logo-img`. */
    .logo-img,
    .logo img { height: 21px }
  }

  /* ── HEADER CTA ───────────────────────────────────────────────── */
  .header-cta .btn:hover {
    transform: translateY(-1px);
  }
  .header-cta .btn {
    transition: transform 200ms cubic-bezier(.4,0,.2,1),
                box-shadow 200ms cubic-bezier(.4,0,.2,1),
                background 200ms cubic-bezier(.4,0,.2,1),
                color 200ms cubic-bezier(.4,0,.2,1),
                border-color 200ms cubic-bezier(.4,0,.2,1);
  }
}

/* Motion is decoration here — every state is also carried by colour and
   the marker bar, so removing it loses nothing. */
@media (prefers-reduced-motion: reduce) {
  .nav > li > a::before,
  .nav > li > a::after,
  .nav .chev,
  .nav .chevron,
  .nav .drop > li,
  .nav .dropdown > li,
  .nav .mega-grid > a,
  .nav .mega-grid > li,
  .nav .drop a,
  .nav .dropdown a,
  .nav .mega a,
  .header-cta .btn {
    transition: none !important;
  }
  .nav .drop > li,
  .nav .dropdown > li,
  .nav .mega-grid > a,
  .nav .mega-grid > li {
    opacity: 1;
    transform: none;
  }
}