Fix iPhone Safari viewport and mobile footer issues

Hero Section Viewport Fix:
- Changed body from min-height to height:100% for proper iOS inheritance
- Updated layout wrapper from min-h-screen to h-full
- Created app.vue with explicit height wrapper for Nuxt root
- Maintains complete height inheritance chain: html > body > #__nuxt > layout

Mobile Footer Fix:
- Fixed CSS conflict: removed grid-template-columns from flex container
- Added proper flex column layout for mobile stacking
- Removed margin-left:auto that was causing horizontal overflow
- Added word-wrap and padding for proper text wrapping
- Centered all footer content on mobile devices

These changes ensure the hero section fills the entire iPhone Safari viewport
including the URL bar area, and the footer displays correctly without cutoff.

apps/website/app.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="__nuxt-app" class="h-full">
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>
+
+<style>
+#__nuxt-app {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Ensure Nuxt's root wrapper inherits height */
+#__nuxt {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

apps/website/assets/css/main.css

@@ -19,8 +19,8 @@ html {
 body {
   overscroll-behavior-y: contain;
   -webkit-overflow-scrolling: touch;
-  min-height: 100vh;
+  height: 100%;
-  min-height: -webkit-fill-available;
+  height: -webkit-fill-available;
   /* Prevent double-tap zoom on mobile */
   touch-action: manipulation;
   /* Prevent horizontal scrolling */

apps/website/assets/css/voyage-layout.css

@@ -1839,10 +1839,31 @@ html {
     }
 
     .footer-content {
-        grid-template-columns: 1fr;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 2rem;
         text-align: center;
     }
 
+    .footer-brand {
+        max-width: 100%;
+        margin: 0;
+    }
+
+    .footer-contact {
+        margin-left: 0;
+        width: 100%;
+        text-align: center;
+    }
+
+    .footer-contact p,
+    .footer-brand p {
+        word-wrap: break-word;
+        overflow-wrap: break-word;
+        padding: 0 1rem;
+    }
+
     /* Fix booking cards for mobile */
     .booking-options {
         grid-template-columns: 1fr;

apps/website/layouts/default.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div class="h-full flex flex-col">
     <AppNavbar />
     <main class="flex-grow">
       <slot />