website/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

/* iOS Safari Safe Area Support */
html {
  /* Allow content to extend into safe areas */
  min-height: 100vh;
  min-height: -webkit-fill-available;
  background: white; /* Explicit white fallback */
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  background: white; /* Explicit white fallback */
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* Full-bleed video that extends into safe areas */
.full-bleed-video-container {
  position: absolute;
  /* Extend beyond viewport into safe areas using negative margins */
  top: calc(env(safe-area-inset-top, 0px) * -1);
  left: calc(env(safe-area-inset-left, 0px) * -1);
  right: calc(env(safe-area-inset-right, 0px) * -1);
  bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
  width: calc(100% + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  height: calc(100% + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  background: white; /* White fallback when video doesn't load */
}

/* Safe area padding for content */
.safe-area-padding-top {
  padding-top: env(safe-area-inset-top, 0px);
}

.safe-area-padding-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}