/* =========================================================
   DAN TOURS — Navigation (Luxury Cinematic)
   ========================================================= */

/* The bar is ALWAYS a floating rounded pill — there is no full-width band
   state. The <nav> itself is only a transparent positioning frame; the
   visible bronze pill is painted on .navbar-inner below.
   --nav-height still reserves the vertical space that hero.css and main.css
   offset their content by, so the pill floats inside that reserve. */
.navbar {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  height: auto;
  display: flex;
  align-items: center;
  background: transparent;
  padding: clamp(8px, 1.3vw, 16px) clamp(14px, 2vw, 34px);
}

/* .scrolled no longer changes the geometry — the pill is already floating.
   Kept as a hook because nav.js and theme.css still key off it. */
.navbar.scrolled {
  background: transparent;
}

/* The pill surface. */
.navbar-inner {
  position: relative;
  display: flex;
  align-items: center;
  /* Logo left · links center · controls right */
  justify-content: space-between;
  width: 100%;
  max-width: none;
  margin: 0 auto;
  gap: calc(24px / var(--ui-scale, 1));
  background: rgba(154, 131, 82, 0.95);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 14px 34px -12px rgba(29, 29, 29, 0.38);
  padding: calc(9px / var(--ui-scale, 1)) calc(9px / var(--ui-scale, 1))
           calc(9px / var(--ui-scale, 1)) calc(28px / var(--ui-scale, 1));
  /* Only non-layout properties transition. */
  transition: background 0.4s ease, box-shadow 0.4s ease,
              border-color 0.4s ease;
}

/* ---- Logo (left) ---- */
.navbar-logo {
  /* Flex items default to a content-based min-width, and the global
     `img { max-width: 100% }` rule (main.css) creates a circular size
     reference for an unconstrained flex child — collapses the logo to
     width:0 without this. */
  flex-shrink: 0;
}
.navbar-logo img {
  /* Counter-scaled against the global 0.63 zoom so the logo renders at its
     true ~54px, not a shrunk 30px. */
  height: calc(54px / var(--ui-scale, 1));
  width: auto;
  max-width: none;
  /* Dark logo: the nav now sits on the light page background (the hero photo
     is an inset card below it), not over the photo. */
  filter: brightness(0) drop-shadow(0 2px 6px rgba(0,0,0,0.16));
  transition: opacity var(--t-base), filter 0.4s ease;
}
.navbar-logo:hover img { opacity: 0.8; }

/* ---- Desktop links ---- */
.nav-links {
  display: flex;
  align-items: center;
  /* Counter-scaled so the spacing isn't shrunk by the global zoom — keeps
     the links airy rather than squeezed together. */
  gap: calc(clamp(24px, 3vw, 44px) / var(--ui-scale, 1));
  list-style: none;
  /* Do NOT grow (flex:1) — a growing+centered box that's narrower than its
     own content overflows symmetrically past its box edges, which silently
     eats into the logo/right-controls gaps (measured as low as 3px). Sized
     to content instead; navbar-inner's justify-content:space-between then
     splits the real leftover space into two equal gaps on its own. */
  flex: 0 0 auto;
  min-width: 0;
}

.nav-link {
  position: relative;
  font-family: var(--font-body);
  /* Divided by --ui-scale so the nav stays readable regardless of the global
     zoom (the navbar is fixed UI chrome, not part of the scaled content). */
  /* extra `/ --text-scale` keeps the navbar at its tuned size, unaffected by
     the content text boost. */
  font-size: calc(0.8rem / var(--ui-scale, 1) / var(--text-scale, 1));
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245,240,235,0.85);
  padding-bottom: 4px;
  transition: color var(--t-fast);
  white-space: nowrap;
}
.nav-link:hover, .nav-link.active { color: var(--off-white); }

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px;
  width: 100%;
  background: var(--gold);
  /* scaleX (compositor-only) instead of animating width — no layout thrash. */
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease-out);
}
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--gold); }

/* Dropdown icon */
.nav-arrow {
  font-size: 0.8rem;
  margin-left: 4px;
  opacity: 0.6;
  transition: transform var(--t-fast);
}
.nav-item.dropdown:hover .nav-arrow { transform: rotate(180deg); }

/* ---- Dropdown ---- */
.nav-item.dropdown { position: relative; }

.dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(201,168,76,0.2);
  border-top: 2px solid var(--gold);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 32px;
  min-width: 640px;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  pointer-events: none;
}

.nav-item.dropdown:hover .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.dropdown-col-title {
  font-size: calc(0.893rem / var(--ui-scale, 1) / var(--text-scale, 1));
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(245,240,235,0.08);
}

.dropdown-links { display: flex; flex-direction: column; gap: 8px; }

.dropdown-link {
  font-size: calc(0.92rem / var(--ui-scale, 1) / var(--text-scale, 1));
  color: rgba(245,240,235,0.65);
  transition: color var(--t-fast), transform var(--t-fast);
}
.dropdown-link:hover { color: var(--off-white); transform: translateX(6px); }

/* ---- Right controls ---- */
.nav-right {
  display: flex;
  align-items: center;
  /* Matches the navbar-inner gap so the lang-switcher↔CTA spacing feels
     consistent with the rest of the navbar, not tighter. */
  gap: calc(28px / var(--ui-scale, 1));
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 6px;
}

.lang-btn {
  font-family: var(--font-body);
  font-size: calc(0.839rem / var(--ui-scale, 1) / var(--text-scale, 1));
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(245,240,235,0.5);
  background: none;
  border: none;
  cursor: pointer;
  /* keeps the tap area finger-sized on touch screens */
  padding: 10px 6px;
  transition: color var(--t-fast);
}
.lang-btn.active, .lang-btn:hover { color: var(--off-white); }

/* Each language has its own page now, so the switcher is four links rather
   than four buttons. The rule above was written for <button>, which is
   already a replaced inline-block; an <a> needs to be told. */
a.lang-btn { display: inline-block; text-align: center; text-decoration: none; }
a.lang-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.lang-divider {
  color: rgba(245,240,235,0.2);
  font-size: calc(0.8rem / var(--ui-scale, 1) / var(--text-scale, 1));
}

.btn-nav-cta {
  display: inline-block;
  padding: calc(13px / var(--ui-scale, 1)) calc(32px / var(--ui-scale, 1));
  /* Gold fill retained by request. Because the nav bar is now the SAME
     bronze, the button would otherwise disappear into it — the 2px black
     border is what separates it, exactly as the old dmtours.net CTA did. */
  border: 2px solid #000000;
  border-radius: 999px;
  background: var(--gold);
  color: var(--warm);
  font-family: var(--font-body);
  font-size: calc(0.82rem / var(--ui-scale, 1) / var(--text-scale, 1));
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: background var(--t-base), border-color var(--t-base),
              color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  white-space: nowrap;
  /* A bronze glow is invisible against a bronze bar — shadow goes dark. */
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.35);
}
.btn-nav-cta:hover {
  background: var(--gold-deep);
  border-color: #000000;
  color: var(--warm);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.45);
}

/* ---- Hamburger (mobile only; sits in .nav-right on the right) ---- */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: calc(7px / var(--ui-scale, 1));
  /* finger-sized tap area around the icon */
  padding: 12px 10px;
  cursor: pointer;
  background: none;
  border: none;
  z-index: 1100;
}
.hamburger span {
  display: block;
  width: calc(30px / var(--ui-scale, 1));
  height: calc(2px / var(--ui-scale, 1));
  background: var(--off-white);
  transition: transform 0.35s ease, opacity 0.2s ease;
}
/* X-close: shift top/bottom bars by (bar height + gap) = 9px so they meet at center. */
.hamburger.open span:nth-child(1) { transform: translateY(calc(9px / var(--ui-scale, 1))) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(calc(-9px / var(--ui-scale, 1))) rotate(-45deg); }

/* ---- Mobile overlay ---- */
.mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.mobile-overlay.open { opacity: 1; visibility: visible; }

/* ---- Mobile menu — full-screen ---- */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--page);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px var(--container-pad);
  overflow-y: auto; /* short viewports scroll instead of clipping content */
  /* Full-screen fade + gentle zoom-out settle — reads as the menu expanding
     open rather than sliding in from an edge, which pairs with the left-side
     hamburger. Staggered link reveals are handled below. */
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 0.45s var(--ease-out),
              transform 0.6s var(--ease-out),
              visibility 0s linear 0.5s;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.45s var(--ease-out),
              transform 0.7s var(--ease-out),
              visibility 0s;
}

/* Pinned to the menu's top-right corner, sitting directly over where the
   hamburger is in the navbar — the menu (z-index 1100) paints over the navbar
   (1000), so the hamburger's own X-morph is buried behind it and this button
   is the only reachable close control. Same tap point to open and to close.
   Offsets and box are counter-scaled against the global `zoom` so this is a
   true 44x44 device-pixel target rather than a zoom-shrunk 32x32. */
.mobile-menu-close {
  position: absolute;
  top:   calc(20px / var(--ui-scale, 1));
  right: calc(11px / var(--ui-scale, 1));
  width:  calc(44px / var(--ui-scale, 1));
  height: calc(44px / var(--ui-scale, 1));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--off-white);
  font-size: calc(1.2rem / var(--ui-scale, 1) / var(--text-scale, 1));
  opacity: 0.7;
  transition: opacity var(--t-fast);
}
.mobile-menu-close:hover { opacity: 1; }

.mobile-nav-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  list-style: none;
  width: 100%;
  text-align: center;
}

.mobile-nav-link {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  font-weight: 300;
  color: rgba(245,240,235,0.8);
  padding: 16px 0;
  transition: color var(--t-fast);
  line-height: 1;
}
.mobile-nav-link:hover { color: var(--gold); }

/* Stagger mobile links */
.mobile-nav-item { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }
.mobile-menu.open .mobile-nav-item:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.1s; }
.mobile-menu.open .mobile-nav-item:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.17s; }
.mobile-menu.open .mobile-nav-item:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.24s; }
.mobile-menu.open .mobile-nav-item:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.31s; }
.mobile-menu.open .mobile-nav-item:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.38s; }

/* Mobile submenu */
.mobile-submenu {
  display: none;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid rgba(245,240,235,0.08);
  margin-top: 4px;
}
.mobile-nav-item.open .mobile-submenu { display: flex; }

.mobile-submenu-link {
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  transition: color var(--t-fast);
}
.mobile-submenu-link:hover { color: var(--off-white); }

.mobile-nav-toggle {
  font-size: 0.883rem;
  color: var(--muted);
  /* enlarge the chevron's tap area — the icon itself is ~11px */
  padding: 14px;
  margin: -14px;
  transition: transform var(--t-fast);
}
.mobile-nav-item.open .mobile-nav-toggle { transform: rotate(180deg); }

.mobile-menu-footer {
  /* Part of the centered flex flow (not pinned to the viewport bottom) so
     the nav links and footer form one visually balanced group instead of
     leaving a large dead gap between two separately-centered blocks. */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  margin-top: clamp(32px, 6vh, 56px);
  padding: 0 var(--container-pad);
}

.mobile-lang-switcher {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The shared .lang-btn padding is authored in the zoomed coordinate space, so
   the global `zoom` shrinks these to ~27x34 real pixels. In the menu — where
   they are a primary touch control, not desktop nav chrome — pin them to a
   44x44 device-pixel box. Scoped to the menu so the desktop bar is untouched. */
.mobile-lang-switcher .lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width:  calc(44px / var(--ui-scale, 1));
  min-height: calc(44px / var(--ui-scale, 1));
  padding: 0 calc(6px / var(--ui-scale, 1));
}

.mobile-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: calc(44px / var(--ui-scale, 1));
  padding: 14px 40px;
  background: var(--gold);
  color: var(--black);
  font-size: 0.91rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: opacity var(--t-base);
}
.mobile-cta-btn:hover { opacity: 0.85; }

/* ---- Responsive ---- */
/* Below this width the horizontal links collapse into the hamburger menu. */
@media (max-width: 1000px) {
  .nav-links { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 620px) {
  /* On phones the language switcher + CTA live inside the menu, leaving the
     bar as just logo (left) + hamburger (right). */
  .navbar .lang-switcher,
  .btn-nav-cta { display: none; }
}

/* =========================================================
   KINETIC MOBILE MENU  ("Sterling Gate" — gold-tinted)
   Scoped under .kinetic so pages without the new markup keep
   the original fade menu until the rollout is approved.
   ========================================================= */

/* The panel slides in from the right instead of fading/zooming. */
.mobile-menu.kinetic {
  justify-content: center;
  transform: translateX(102%);
  transition: transform 0.7s var(--ease-out),
              visibility 0s linear 0.7s;
  /* content sits above the layered backdrop */
  overflow: hidden;
}
.mobile-menu.kinetic.open {
  transform: translateX(0);
  transition: transform 0.7s var(--ease-out), visibility 0s;
}

/* ---- Layered backdrop panels ---- */
.kinetic .menu-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.kinetic .backdrop-layer {
  position: absolute;
  inset: 0;
  transform: translateX(101%);
  transition: transform 0.6s var(--ease-out);
}
.kinetic .backdrop-layer.first  { background: rgba(20,20,20,0.55); }
.kinetic .backdrop-layer.second { background: rgba(15,15,15,0.75); }
.kinetic .backdrop-layer.third  { background: var(--page); }
/* Staggered slide-in — outer panels lead, solid base lands last. */
.mobile-menu.kinetic.open .backdrop-layer.first  { transform: translateX(0); transition-delay: 0s; }
.mobile-menu.kinetic.open .backdrop-layer.second { transform: translateX(0); transition-delay: 0.10s; }
.mobile-menu.kinetic.open .backdrop-layer.third  { transform: translateX(0); transition-delay: 0.20s; }

/* ---- Ambient gold shapes (revealed per hovered/tapped item) ---- */
.kinetic .ambient-background-shapes {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.kinetic .bg-shape {
  position: absolute;
  top: 50%; left: 50%;
  width: min(78vmin, 620px);
  height: min(78vmin, 620px);
  transform: translate(-50%, -50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s;
}
.kinetic .bg-shape.active {
  opacity: 1;
  visibility: visible;
}
.kinetic .bg-shape .shape-element {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* ---- Menu content above the backdrop ---- */
.kinetic .mobile-nav-links,
.kinetic .mobile-menu-footer { position: relative; z-index: 2; }
/* The close button must keep its own `position: absolute` (it is corner-pinned,
   not part of the centered column) — it only needs the same stacking lift. */
.kinetic .mobile-menu-close { z-index: 2; }

/* ---- Staggered link reveal: rise + slight rotate ---- */
.mobile-menu.kinetic .mobile-nav-item {
  opacity: 0;
  transform: translateY(140%) rotate(6deg);
  transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out);
}
.mobile-menu.kinetic.open .mobile-nav-item {
  opacity: 1;
  transform: translateY(0) rotate(0);
}
.mobile-menu.kinetic.open .mobile-nav-item:nth-child(1) { transition-delay: 0.30s; }
.mobile-menu.kinetic.open .mobile-nav-item:nth-child(2) { transition-delay: 0.36s; }
.mobile-menu.kinetic.open .mobile-nav-item:nth-child(3) { transition-delay: 0.42s; }
.mobile-menu.kinetic.open .mobile-nav-item:nth-child(4) { transition-delay: 0.48s; }
.mobile-menu.kinetic.open .mobile-nav-item:nth-child(5) { transition-delay: 0.54s; }

/* Each link clips its own rising text for a cleaner kinetic reveal. */
.kinetic .mobile-nav-link { overflow: hidden; }
.kinetic .mobile-nav-link:hover,
.kinetic .mobile-nav-link:focus-visible { color: var(--gold); }

/* ---- Short viewports (landscape phones) ----
   .mobile-menu.kinetic sets `overflow: hidden` so the sliding backdrop panels
   don't spill, which also kills the `overflow-y: auto` the base .mobile-menu
   relies on. At 740x360 the content ran 560px tall in a 500px box: the
   language switcher and the "Safari planen" CTA were cut off with no way to
   scroll to them. Compact the column so it fits outright. */
@media (max-height: 600px) {
  .mobile-menu { padding-top: 20px; padding-bottom: 20px; }
  .mobile-nav-link {
    font-size: clamp(1.25rem, 6.5vh, 1.9rem);
    padding: 7px 0;
  }
  .mobile-menu-footer {
    margin-top: clamp(12px, 2.5vh, 24px);
    gap: 10px;
  }

  /* Last-resort escape hatch, if some combination of long translations and
     OS-level large-text settings still overflows the compaction above. This is
     deliberately only a fallback: .mobile-menu paints its own `--page`
     background across the whole box so nothing shows through, but the backdrop
     tint layers and the close button do travel with the scroll (they sit inside
     the panel's own transform, so neither `absolute` nor `fixed` escapes the
     scroll flow). The compaction tiers are what should keep this from firing. */
  .mobile-menu.kinetic { overflow-x: hidden; overflow-y: auto; }
}

/* Second tier for the genuinely tiny. Kept below 300px so that 320 — iPhone SE
   in landscape, the shortest real phone viewport — still gets the tier above. */
@media (max-height: 300px) {
  .mobile-menu { padding-top: 12px; padding-bottom: 12px; }
  .mobile-nav-link { font-size: clamp(1.05rem, 5.5vh, 1.4rem); padding: 4px 0; }
  .mobile-menu-footer { margin-top: 10px; gap: 8px; }
}

/* Respect reduced-motion: show instantly, no slide/rotate. */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu.kinetic,
  .mobile-menu.kinetic .mobile-nav-item,
  .kinetic .backdrop-layer { transition-duration: 0.001s; }
  .mobile-menu.kinetic .mobile-nav-item { transform: none; }
}

/* =========================================================
   CASCADING DROPDOWN (matches old dmtours.net navigation)
   Level 1: category list · Level 2: fly-out package list
   ========================================================= */
.dropdown-menu.dropdown-cascade {
  display: block;
  min-width: 250px;
  padding: 10px 0;
}

.dd-cats {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dd-cat { position: relative; }

.dd-cat-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 22px;
  font-size: 0.872rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.dd-cat-link::after {
  content: "\203A";            /* › */
  font-size: 0.9rem;
  opacity: 0.7;
}
.dd-cat:hover > .dd-cat-link,
.dd-cat:focus-within > .dd-cat-link {
  background: rgba(201, 168, 76, 0.12);
}

.dd-sub {
  list-style: none;
  margin: 0;
  position: absolute;
  left: 100%;
  top: -10px;
  min-width: 280px;
  padding: 10px 0;
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(201,168,76,0.2);
  border-top: 2px solid var(--gold);
  opacity: 0;
  visibility: hidden;
  transform: translateX(6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}
.dd-cat:hover > .dd-sub,
.dd-cat:focus-within > .dd-sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.dd-sub .dropdown-link {
  display: block;
  padding: 8px 22px;
  white-space: nowrap;
}
.dd-sub .dropdown-link:hover { transform: translateX(6px); }

/* =========================================================
   HOVER-INTENT FIXES
   1) Invisible bridges cover the gaps between trigger,
      panel and fly-outs so slow cursors don't fall through.
   2) A short close delay forgives diagonal movement.
   ========================================================= */
.dropdown-menu::before {
  content: "";
  position: absolute;
  left: -12px;
  right: -12px;
  top: -18px;          /* covers the 16px gap below the nav item */
  height: 18px;
}
.dropdown-menu { transition-delay: 0.18s; }        /* closing */
.nav-item.dropdown:hover .dropdown-menu { transition-delay: 0s; }  /* opening */

.dd-sub::before {
  content: "";
  position: absolute;
  left: -12px;         /* bridge between category column and fly-out */
  top: 0;
  bottom: 0;
  width: 12px;
}
.dd-sub { transition-delay: 0.18s; }
.dd-cat:hover > .dd-sub,
.dd-cat:focus-within > .dd-sub { transition-delay: 0s; }