/* ========================================
   FONT FIXES - Override broken font paths
   ======================================== */

/* Fix Bootstrap Icons font path with CDN fallback */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css');

/* Fix Remixicon font path with CDN fallback */
@import url('https://cdn.jsdelivr.net/npm/remixicon@3.5.0/fonts/remixicon.css');

/* Hamburger menu positioning */
.navbar .mobile-nav-toggle {
  order: 3;
  margin-left: auto;
}

/* Fix dropdown menu positioning */
.navbar-mobile-menu {
  position: fixed !important;
  top: 60px !important;
  right: 15px !important;
  z-index: 1002 !important;
}

/* ========================================
   HEADER SECTION - Mobile Improvements
   ======================================== */

/* Force main navbar to stay horizontal */
.navbar .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  list-style: none;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.navbar .navbar-nav .nav-item {
  position: relative;
  flex-shrink: 0;
}

.navbar .navbar-nav .nav-item .nav-link {
  white-space: nowrap;
}

/* Override Bootstrap navbar behavior at all screen sizes */
.navbar {
  height: auto !important;
  min-height: 60px !important;
  max-height: 60px !important;
  overflow: visible !important;
}

.navbar .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow: visible !important;
  height: auto !important;
}

/* Override style2.css navbar hiding at 1200px */
@media (max-width: 1200px) {
  .navbar ul {
    display: flex !important;
  }
  
  .mobile-nav-toggle {
    display: none !important;
  }
}

/* Progressive Navigation Collapse */
@media (max-width: 1200px) {
  .navbar .mobile-nav-toggle {
    display: none;
    margin-left: 10px;
  }
}

/* Mobile toggle positioning */
.navbar .mobile-nav-toggle {
  display: none;
  position: fixed;
  right: 15px;
  top: 50px;
  z-index: 1001;
}

/* Prevent navbar collapse behavior from Bootstrap */
@media (max-width: 1200px) {
  .navbar-collapse {
    display: flex !important;
    flex-basis: auto !important;
  }
  
  .navbar-toggler {
    display: none !important;
  }
}

/* Dynamic spacing is now handled by JavaScript */

/* JavaScript will handle all nav item visibility */

/* Fix header layout on mobile */
@media (max-width: 768px) {
  .header .logo img {
    height: 40px;
    width: auto;
  }
}

@media (max-width: 480px) {
  .header .logo img {
    height: 35px;
  }
}



/* ========================================
   HERO SECTION - Mobile Improvements  
   ======================================== */

/* Fix hero video and text on mobile */
@media (max-width: 768px) {
  .hero {
    height: 100vh;
    min-height: 500px;
  }
  
  .video-header,
  .video-header video,
  .video-header .viewport-header {
    top: 0;
    height: 100vh;
  }
  
  .hero h1 {
    font-size: 6vw !important;
    letter-spacing: 2vw;
    padding: 0 20px;
    margin-top: 20vh;
  }
  
  .hero h1 span {
    font-size: 7vw;
    letter-spacing: 1vw;
  }
}

@media (max-width: 480px) {
  .hero h1 {
    font-size: 7vw !important;
    letter-spacing: 1.5vw;
    margin-top: 25vh;
  }
  
  .hero h1 span {
    font-size: 8vw;
    letter-spacing: 0.5vw;
  }
}