/*
 * Site supplement — Tailwind utility classes that aren't in the original
 * Lovable-compiled `index-CTKNY8lc.css` bundle but are used by the SEO/Compare
 * additions in this mirror. Kept in its own file so the vendor bundle stays
 * untouched and this file can be evolved independently.
 */

/* 5-column footer grid (Compare column added post-hoc; original build only
   compiled grid-cols-2/3/4). Matches Tailwind's naming convention so the
   HTML class `md:grid-cols-5` just works. */
@media (min-width: 768px) {
  .md\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* ============================================================
 * Nav dropdown z-index fix
 * ------------------------------------------------------------
 * The sticky nav has z-index: 50. Its hover dropdown menus are
 * absolutely positioned inside `.relative.group` wrappers but
 * had no explicit z-index, so when they expanded they sat at
 * the nav's base level (z=50) — which works fine for siblings
 * inside the nav, but sections downstream with their own
 * stacking contexts (backdrop-blur, filter, or `position`
 * contexts created in the hero/pipeline iframe/footer) could
 * paint on top of the dropdown and visually clip it.
 *
 * Fix: push the sticky nav and its dropdowns to the top of
 * the stack, and ensure the nav itself doesn't clip its own
 * overflow.
 * ============================================================ */
nav.sticky.top-0 {
  z-index: 60;
  overflow: visible;
}

nav.sticky.top-0 .container,
nav.sticky.top-0 > div,
nav.sticky.top-0 .flex {
  overflow: visible;
}

/* Dropdown menus: bump above everything on the page. Target by
 * the absolute-positioned div nested inside a .relative.group. */
nav.sticky.top-0 .relative.group > div.absolute,
nav.sticky.top-0 .group > div[class*="top-full"] {
  z-index: 70;
}

/* When the dropdown becomes visible on hover, guarantee it paints
 * above any later-in-DOM stacking contexts (iframes, transforms,
 * backdrop-filter sections, etc.) by creating a higher local stack. */
nav.sticky.top-0 .relative.group:hover > div.absolute {
  z-index: 80;
}

/* Some downstream sections (pipeline iframe, videos, dashboard mock)
 * have transforms/backdrop-filter that can create stacking contexts.
 * Constrain their z-index so they can never exceed the nav's 60. */
section[id="pipeline-animation"],
section[id="sample-videos"],
section[id="product-ui"],
section[id="flagship-videos"] {
  position: relative;
  z-index: 1;
}