/* ========================================
 * 3. LAYOUT SYSTEM
 * ======================================== */
/* Main discover page container - full viewport */
.discover-main-container,
.h-screen.flex.flex-col.overflow-visible {
  position: relative;
  width: 100%;
  height: 100vh; /* Fallback for older browsers */
  height: min(100dvh, 100vh); /* Mobile-safe viewport height */
  min-height: 100vh; /* Fallback for older browsers */
  min-height: min(100dvh, 100vh); /* Ensure minimum height */
  z-index: var(--z-map);
  overflow: visible; /* FIXED: Allow top bar to render properly */
  /* STACKING CONTEXT ISOLATION - REMOVED: May cause top bar clipping */
  /* isolation: isolate; */
}

/* FIX: Discover page main flex container and viewport shell can inherit Tailwind's
 * overflow-hidden / min-h-0 utilities. Ensure overflow is visible so the top bar
 * and other fixed elements are not visually clipped on small touch devices.
 */
body.discover-page .h-screen.flex.flex-col {
  overflow: visible !important;
}

/* Target the main content flex wrapper used on discover.html:
 * <main class="flex-1 flex overflow-hidden min-h-0" role="main">
 * On some touch devices, the combination of overflow-hidden + min-h-0 can clip
 * fixed-position children. Force visible overflow for discover page only.
 */
body.discover-page main.flex-1.flex.overflow-hidden.min-h-0[role="main"] {
  overflow: visible !important;
  min-height: auto !important;
}

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* NOTE: Dark mode styles (including NUCLEAR OPTION) consolidated in dark-mode.css */

/* Cover computed styles that might result in gray-800 */

/* ========================================
 * CRITICAL LAYOUT FIXES - LOAD EARLY
 * ======================================== */
/* CRITICAL: 30-character spot card titles - prevent rerender flash */
.spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-overlay .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-content .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
div.spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text {
  margin-top: -0.125rem !important;
  transform: translateX(-3rem) !important;
  display: inline !important;
  white-space: nowrap !important;
}