/* --- iOS viewport/keyboard hotfix (must load LAST) --- */

/* Stop sideways scroll and ensure background paints full height */
html, body {
  overflow-x: hidden !important;
  width: 100% !important;
  max-width: 100% !important;
  background-attachment: scroll !important; /* avoid snapshot artifacts */
  background-color: #0b0b0c;                 /* site bg */
}

/* Dynamic viewport units and keyboard compensation set via JS */
:root {
  --vh: 1vh;            /* will be replaced with visualViewport.height * 0.01 */
  --kb-bottom: 0px;     /* keyboard height exposed by JS */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* OUTER WRAPPERS: use min-height (not 100vh) and pad for keyboard/safe-area */
body > #root,
body > main,
.page,
.screen,
.main,
.auth-page,
.auth,
.signup,
.login {
  min-height: calc(var(--vh) * 100) !important;
  padding-bottom: calc(max(16px, var(--safe-bottom)) + var(--kb-bottom)) !important;
  box-sizing: border-box !important;
}

/* Prefer sticky over fixed footers on mobile so they move with the viewport */
.footer-sticky, .bottom-bar, .cta-footer {
  position: sticky !important;
  bottom: 0 !important;
  padding-bottom: var(--safe-bottom) !important;
  z-index: 10;
  background: rgba(0,0,0,0.72);
  backdrop-filter: saturate(120%) blur(8px);
}

/* Inputs: prevent focus-zoom and ensure they scroll above the keyboard */
input, textarea, select {
  font-size: 16px !important;          /* blocks iOS auto-zoom */
  scroll-margin-bottom: 140px !important;
}

/* Kill hard 100vh/100vw sections which cause the black gap when keyboard toggles */
.full-viewport, .hero, .section {
  width: 100% !important;
}

@media (max-width: 768px) {
  /* Make big headings responsive to avoid horizontal overflow */
  .hero h1, .page h1 {
    font-size: clamp(22px, 6vw, 40px) !important;
    line-height: 1.15 !important;
  }
}

/* Additional auth page specific fixes */
.auth {
  min-height: calc(var(--vh) * 100) !important;
}

/* Auth page wrapper fix - target the exact structure */
div.min-h-screen.bg-gradient-to-br {
  min-height: calc(var(--vh) * 100) !important;
  background-attachment: scroll !important;
}

/* For auth pages, ensure the background covers the entire visible area */
@supports (height: 100dvh) {
  .min-h-screen {
    min-height: 100dvh !important;
  }
}

/* Ensure auth content containers scroll properly */
.auth-container,
.login-container,
.signup-container {
  padding-bottom: calc(max(16px, var(--safe-bottom)) + var(--kb-bottom)) !important;
  box-sizing: border-box !important;
}

/* Override problematic min-h-screen classes that cause black gaps */
.min-h-screen {
  min-height: calc(var(--vh) * 100) !important;
}

/* Fix auth page specific centering issue with keyboard */
.min-h-screen.flex.items-center {
  /* On mobile, don't center vertically when keyboard might appear */
  align-items: flex-start !important;
  padding-top: 2rem !important;
  min-height: calc(var(--vh) * 100) !important;
}

/* Add specific class for auth page if needed */
@media (max-width: 768px) {
  .min-h-screen {
    /* Use viewport height instead of screen height on mobile */
    min-height: calc(var(--vh) * 100) !important;
    /* Ensure background covers full area even with keyboard */
    background-attachment: scroll !important;
  }
  
  /* Fix centering behavior on mobile auth pages */
  .min-h-screen.flex {
    align-items: flex-start !important;
    justify-content: center !important;
    padding-top: max(2rem, env(safe-area-inset-top)) !important;
  }
}

/* Landing page specific fixes */
div[data-page="landing"] {
  min-height: calc(var(--vh) * 100) !important;
  background-attachment: scroll !important;
}

/* Target landing page backgrounds specifically */
[data-page="landing"] {
  min-height: calc(var(--vh) * 100) !important;
  background-attachment: scroll !important;
}

/* SIMPLE viewport fix for iOS Safari keyboard - NO body/html height changes */
@media (max-width: 768px) {
  /* Only target min-h-screen elements, NOT body/html */
  .min-h-screen, 
  [class*="min-h-screen"],
  [class*="h-screen"] {
    min-height: calc(var(--vh) * 100) !important;
    height: auto !important;
  }
  
  /* Prevent any fixed body heights that cause black screens */
  body, html {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    background-attachment: scroll !important;
  }
}