/*==============================================
  MOBILE NAVBAR OVERLAY FIX
  Solves overlap issues on iOS and Android
  Hotel Nehrus - March 2026
  ================================================*/

/* Root safe area variables */
:root {
    /* Safe area insets for notched devices */
    --safe-area-inset-top: env(safe-area-inset-top, 0);
    --safe-area-inset-left: env(safe-area-inset-left, 0);
    --safe-area-inset-right: env(safe-area-inset-right, 0);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
    
    /* Navbar height tracking - Standardized to 100px to match Luxury Design */
    --navbar-height: 100px;
    --navbar-height-scrolled: 100px;
}

/*==============================================
  NAVBAR POSITIONING - FIXED INSTEAD OF STICKY
  ================================================*/

.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1050;
    padding-top: var(--safe-area-inset-top);
    margin: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Top bar visibility control */
.top-bar {
    display: none !important;
}

.navbar-luxury {
    position: static;
    background: transparent;
    padding: 1rem 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    width: 100%;
}

/*==============================================
  BODY PADDING - ACCOUNTS FOR NAVBAR
  ================================================*/

body {
    /* Stabilized padding to prevent jumping during scroll */
    padding-top: 100px;
    margin: 0;
}

@media (max-width: 1299.98px) {
    body {
        padding-top: 70px;
    }
}

/* When navbar is scrolled - DISABLED to prevent jitter */
body.navbar-scrolled {
    /* Maintain same padding to prevent jump */
    padding-top: 100px;
}

@media (max-width: 1299.98px) {
    body.navbar-scrolled {
        padding-top: 70px;
    }
}

/*==============================================
  SPECIFIC MOBILE BREAKPOINTS
  ================================================*/

/* MOBILE: 320px - 480px (Small phones) */
@media (max-width: 480px) {
    :root {
        --navbar-height: 70px;
    }
    
    .main-header {
        padding-left: var(--safe-area-inset-left);
        padding-right: var(--safe-area-inset-right);
    }
    
    body {
        padding-top: calc(70px + var(--safe-area-inset-top));
    }
    
    .navbar-luxury {
        padding: 0.75rem 0;
    }
    
    .navbar-brand-luxury {
        gap: 0.5rem;
    }
    
    .navbar-logo {
        height: 85px !important;
        filter: drop-shadow(0 0 0.5px rgba(180, 0, 0, 0.4)) !important;
    }
    
    .navbar-brand-text h4 {
        font-size: 1rem;
    }
    
    .navbar-brand-text span {
        font-size: 0.6rem;
    }
}

/* MOBILE: 481px - 768px (Medium phones & small tablets) */
@media (max-width: 768px) {
    .main-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1050;
    }
    
    /* Hide collapse menu by default on mobile */
    .navbar-collapse {
        display: none !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: white;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        border-radius: 0 0 12px 12px;
        margin: 0.5rem;
        padding: 1rem;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Show collapse menu when opened */
    .navbar-collapse.show {
        display: block !important;
        position: fixed;
        top: calc(70px + var(--safe-area-inset-top));
        max-height: calc(100vh - 70px);
        animation: slideDown 0.3s ease-out;
    }
    
    .nav-link-luxury {
        padding: 0.75rem 1rem !important;
    }
    
    .nav-link-luxury::after {
        display: none;
    }
    
    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/*==============================================
  HERO SECTION - COMPENSATE FOR NAVBAR
  ================================================*/

.hero-section {
    position: relative;
    margin-top: 0;
    padding-top: calc(80px + var(--safe-area-inset-top));
}

@media (max-width: 768px) {
    .hero-section {
        padding-top: calc(70px + var(--safe-area-inset-top));
        min-height: calc(100vh - 70px);
    }
}

/*==============================================
  PAGE SECTIONS - REMOVE CONFLICTING PADDING
  ================================================*/

main {
    position: relative;
    z-index: 1;
}

/* Mobile collapse menu - hidden by default */
@media (max-width: 991.98px) {
    .navbar-collapse {
        display: none !important;
    }
    
    .navbar-collapse.show {
        display: block !important;
    }
}

/* Remove or adjust section paddings */
.page-section {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

@media (max-width: 768px) {
    .page-section {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}

/*==============================================
  DROPDOWN MENUS - MOBILE FIX
  ================================================*/

.dropdown-menu {
    position: fixed !important;
    top: auto;
    left: auto;
}

@media (min-width: 992px) {
    .dropdown-menu {
        position: absolute !important;
    }
}

/*==============================================
  BOTTOM NAVIGATION / ACTION BUTTONS
  ================================================*/

.floating-buttons {
    position: fixed;
    bottom: calc(1rem + var(--safe-area-inset-bottom));
    right: calc(1rem + var(--safe-area-inset-right));
    z-index: 1040;
}

/*==============================================
  iOS & ANDROID SPECIFIC FIXES
  ================================================*/

/* iOS Specific - using max() for safe area */
@supports (padding: max(0px)) {
    body {
        padding-top: max(100px + var(--safe-area-inset-top), 100px);
    }
    
    body.navbar-scrolled {
        padding-top: max(100px + var(--safe-area-inset-top), 100px);
    }
    
    .main-header {
        padding-top: max(var(--safe-area-inset-top), 0);
    }
    
    .floating-buttons {
        bottom: max(1rem + var(--safe-area-inset-bottom), 1rem);
        right: max(1rem + var(--safe-area-inset-right), 1rem);
    }
}

/* Safari specific */
@media (prefers-color-scheme: light) {
    .main-header {
        background: rgb(255, 255, 255);
    }
}

/*==============================================
  SCROLL BEHAVIOR & MOMENTUM
  ================================================*/

.navbar-collapse {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

html {
    scroll-behavior: smooth;
}

/*==============================================
  RESPONSIVENESS FINE-TUNING
  ================================================*/

/* Extra small devices (320px - 374px) */
@media (max-height: 600px) {
    .main-header {
        position: fixed;
        top: 0;
    }
    
    .navbar-luxury {
        padding: 0.5rem 0;
    }
    
    body {
        padding-top: 70px;
    }
}

/* Landscape orientation on mobile */
@media (max-width: 1024px) and (orientation: landscape) {
    :root {
        --navbar-height: 60px;
    }
    
    .main-header {
        padding-top: var(--safe-area-inset-top);
    }
    
    body {
        padding-top: calc(60px + var(--safe-area-inset-top));
    }
    
    .navbar-luxury {
        padding: 0.5rem 0;
    }
    
    .navbar-logo {
        height: 60px !important;
    }
    
    .navbar-brand-text h4 {
        font-size: 1rem;
    }
    
    .hero-section {
        min-height: auto;
        height: calc(100vh - 60px);
    }
}

/*==============================================
  KEYBOARD VISIBILITY (Mobile keyboards)
  ================================================*/

@supports (padding: env(safe-area-inset-bottom)) {
    body {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/*==============================================
  NO HORIZONTAL SCROLL
  ================================================*/

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Prevent layout shift when scrollbar appears */
html {
    scrollbar-gutter: stable;
}

/*==============================================
  PRINT STYLES
  ================================================*/

@media print {
    .main-header {
        position: static;
        padding-top: 0;
    }
    
    body {
        padding-top: 0;
    }
}