/* ==========================================================================
   Enarah Occurence Premium Navbar Design System (High Specificity Overrides)
   ========================================================================== */

/* 1. Desktop Styles (min-width: 992px) */
@media (min-width: 992px) {

   /* Base Header Alignment & Glassmorphism */
   body header.header,
   header.header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 999 !important;
      background: rgba(10, 10, 10, 0.4) !important;
      backdrop-filter: blur(12px) !important;
      -webkit-backdrop-filter: blur(12px) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
      padding: 15px 0 !important;
      display: block !important;
      height: auto !important;
   }

   /* Prevent main body content from going under the navbar on desktop when scrolling */
   html {
      scroll-padding-top: 90px;
   }

   /* Scrolled State */
   body header.header.scrolled,
   header.header.scrolled {
      background: rgba(10, 10, 10, 0.92) !important;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4) !important;
      padding: 8px 0 !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
   }

   /* Header Content Flexbox Layout */
   body .header-content,
   .header-content {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      width: 100% !important;
      padding: 0 15px !important;
   }

   body .header-logo,
   .header-logo {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-start !important;
      flex: 0 0 auto !important;
      padding: 0 !important;
      width: auto !important;
   }

   body img.logo,
   header.header img.logo,
   .logo {
      max-height: 70px !important;
      height: 70px !important;
      width: auto !important;
      display: block !important;
      transition: transform 0.3s ease !important;
   }

   body img.logo:hover {
      transform: scale(1.02) !important;
   }

   /* Navigation List & Items */
   body .main-nav,
   .main-nav {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      flex: 1 0 auto !important;
      position: relative !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      width: auto !important;
      background: transparent !important;
      box-shadow: none !important;
      border: none !important;
      padding: 0 !important;
      margin: 0 !important;
      overflow: visible !important;
      max-height: none !important;
   }

   body .main-nav ul,
   .main-nav ul {
      display: flex !important;
      flex-direction: row !important;
      margin: 0 !important;
      padding: 0 !important;
      list-style: none !important;
      align-items: center !important;
   }

   body .main-nav li,
   .main-nav li {
      display: block !important;
      position: relative !important;
      margin-left: 32px !important;
      padding: 0 !important;
      border: none !important;
      float: none !important;
      width: auto !important;
   }

   body .main-nav li a,
   .main-nav li a {
      color: rgba(255, 255, 255, 0.8) !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      text-transform: uppercase !important;
      letter-spacing: 1.2px !important;
      padding: 10px 0 !important;
      text-decoration: none !important;
      transition: color 0.3s ease !important;
      display: inline-block !important;
   }

   body .main-nav li a:hover {
      color: #ffffff !important;
   }

   /* Link Hover Underline Animation */
   body .main-nav li a::after {
      content: '' !important;
      position: absolute !important;
      width: 0 !important;
      height: 2px !important;
      bottom: 2px !important;
      left: 50% !important;
      background: linear-gradient(90deg, #399bff, #ee71f9) !important;
      transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), left 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
   }

   body .main-nav li a:hover::after,
   body .main-nav li.active a::after {
      width: 100% !important;
      left: 0 !important;
   }

   /* Dropdown Indicators */
   body .dropdown-toggle {
      display: inline-block !important;
      margin-left: 6px !important;
      font-size: 9px !important;
      vertical-align: middle !important;
      transition: transform 0.3s ease !important;
      color: rgba(255, 255, 255, 0.5) !important;
   }

   body .has-submenu:hover .dropdown-toggle {
      transform: rotate(180deg) !important;
      color: #ee71f9 !important;
   }

   /* Desktop Submenu (Dropdown) styling */
   body .main-nav .submenu,
   .submenu {
      display: block !important;
      visibility: hidden !important;
      opacity: 0 !important;
      position: absolute !important;
      top: 100% !important;
      left: 50% !important;
      transform: translateX(-50%) translateY(15px) scale(0.95) !important;
      width: 260px !important;
      background: rgba(12, 12, 12, 0.95) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      border: 1px solid rgba(255, 255, 255, 0.08) !important;
      border-radius: 8px !important;
      box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5) !important;
      padding: 12px 0 !important;
      z-index: 1000 !important;
      text-align: left !important;
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s !important;
      margin: 0 !important;
   }

   body .has-submenu:hover .submenu {
      visibility: visible !important;
      opacity: 1 !important;
      transform: translateX(-50%) translateY(5px) scale(1) !important;
   }

   body .main-nav .submenu li {
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      width: 100% !important;
      border: none !important;
   }

   body .main-nav .submenu li a {
      display: block !important;
      padding: 10px 20px !important;
      color: rgba(255, 255, 255, 0.75) !important;
      font-size: 13px !important;
      font-weight: 400 !important;
      letter-spacing: 0.5px !important;
      text-transform: none !important;
      transition: all 0.25s ease !important;
      border-bottom: none !important;
   }

   body .main-nav .submenu li a::after {
      display: none !important;
      /* Disable main underline on subitems */
   }

   body .main-nav .submenu li a:hover {
      background: rgba(255, 255, 255, 0.04) !important;
      color: #399bff !important;
      padding-left: 24px !important;
   }
}

/* 2. Mobile Responsive Styles (max-width: 991px) */
@media (max-width: 991px) {

   body header.header,
   header.header {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      height: 70px !important;
      padding: 0 !important;
      background: rgba(10, 10, 10, 0.96) !important;
      backdrop-filter: blur(10px) !important;
      -webkit-backdrop-filter: blur(10px) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
      z-index: 9999 !important;
      display: flex !important;
      align-items: center !important;
   }

   body header.header>.container-fluid,
   header.header>.container-fluid {
      width: 100% !important;
      flex: 1 1 auto !important;
      padding: 0 !important;
   }

   body .header-content,
   .header-content {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      width: 100% !important;
      height: 100% !important;
      padding: 0 20px !important;
   }

   body .header-content::before,
   body .header-content::after,
   .header-content::before,
   .header-content::after {
      display: none !important;
   }

   /* Header Logo Column acts as full width container for Logo + Hamburger */
   body .header-logo,
   .header-logo {
      display: flex !important;
      justify-content: space-between !important;
      align-items: center !important;
      width: 100% !important;
      height: 100% !important;
      padding: 0 !important;
      flex: 1 1 auto !important;
      float: none !important;
      position: relative !important;
   }

   body img.logo,
   header.header img.logo,
   .logo {
      max-height: 200px !important;
      width: auto !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
   }

   /* Neutralize the container behavior of the sibling menu column */
   body .header-content>.text-right,
   .header-content>.text-right {
      position: static !important;
      width: 0 !important;
      height: 0 !important;
      padding: 0 !important;
      margin: 0 !important;
      flex: 0 0 0px !important;
   }

   body .toggle-mobile-but,
   .toggle-mobile-but {
      display: block !important;
      position: relative !important;
      width: 24px !important;
      height: 24px !important;
      cursor: pointer !important;
      flex: 0 0 auto !important;
      z-index: 10000 !important;
      left: auto !important;
      right: auto !important;
      top: auto !important;
      transform: none !important;
   }

   /* Hamburger Icon Design */
   body .mobile-but,
   .mobile-but {
      display: block !important;
      position: absolute !important;
      right: 0 !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 24px !important;
      height: 18px !important;
      margin: 0 !important;
      z-index: 10000 !important;
      left: auto !important;
   }

   body .mobile-but .lines,
   body .mobile-but .lines:after,
   body .mobile-but .lines:before,
   .mobile-but .lines,
   .mobile-but .lines:after,
   .mobile-but .lines:before {
      height: 2px !important;
      width: 24px !important;
      background: #ffffff !important;
      display: block !important;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
   }

   body .mobile-but .lines,
   .mobile-but .lines {
      position: absolute !important;
      top: 8px !important;
   }

   body .mobile-but .lines:after,
   body .mobile-but .lines:before,
   .mobile-but .lines:after,
   .mobile-but .lines:before {
      content: " " !important;
      position: absolute !important;
      left: 0 !important;
   }

   body .mobile-but .lines:after,
   .mobile-but .lines:after {
      top: 6px !important;
   }

   body .mobile-but .lines:before,
   .mobile-but .lines:before {
      top: -6px !important;
   }

   /* Active Hamburger state (X Shape) */
   body .toggle-mobile-but.active .mobile-but .lines,
   .toggle-mobile-but.active .mobile-but .lines {
      background: transparent !important;
   }

   body .toggle-mobile-but.active .mobile-but .lines:after,
   .toggle-mobile-but.active .mobile-but .lines:after {
      transform: rotate(45deg) !important;
      top: 0 !important;
   }

   body .toggle-mobile-but.active .mobile-but .lines:before,
   .toggle-mobile-but.active .mobile-but .lines:before {
      transform: rotate(-45deg) !important;
      top: 0 !important;
   }

   /* Mobile Drawer Overlay spans full width relative to viewport */
   body .main-nav,
   .main-nav {
      display: none !important;
      position: fixed !important;
      top: 70px !important;
      left: 0 !important;
      right: 0 !important;
      width: 100vw !important;
      height: auto !important;
      background: rgba(12, 12, 12, 0.98) !important;
      backdrop-filter: blur(20px) !important;
      -webkit-backdrop-filter: blur(20px) !important;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
      z-index: 9998 !important;
      overflow-y: auto !important;
      max-height: calc(100vh - 70px) !important;
      padding: 0 !important;
      margin: 0 !important;
   }

   body .main-nav.active,
   .main-nav.active {
      display: block !important;
   }

   body .main-nav ul,
   .main-nav ul {
      margin: 0 !important;
      padding: 15px 25px !important;
      list-style: none !important;
      display: block !important;
      /* controlled by JS container class instead */
   }

   body .main-nav li,
   .main-nav li {
      display: block !important;
      width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
      float: none !important;
   }

   body .main-nav li:last-child,
   .main-nav li:last-child {
      border-bottom: none !important;
   }

   body .main-nav li a,
   .main-nav li a {
      display: block !important;
      padding: 14px 10px !important;
      color: rgba(255, 255, 255, 0.85) !important;
      font-size: 14px !important;
      font-weight: 500 !important;
      text-transform: uppercase !important;
      letter-spacing: 1px !important;
      text-decoration: none !important;
      text-align: left !important;
      transition: color 0.25s ease !important;
      width: 100% !important;
   }

   body .main-nav li a:hover,
   body .main-nav li.active a,
   .main-nav li a:hover,
   .main-nav li.active a {
      color: #399bff !important;
      background: transparent !important;
   }

   /* Mobile Submenu Accordion Layout */
   body .main-nav .submenu,
   .submenu {
      display: none !important;
      /* Hide by default */
      position: relative !important;
      left: 0 !important;
      top: 0 !important;
      width: 100% !important;
      box-shadow: none !important;
      padding: 0 !important;
      background: rgba(255, 255, 255, 0.02) !important;
      border-left: 2px solid #ee71f9 !important;
      margin-bottom: 10px !important;
      margin-top: 0 !important;
      border-radius: 0 !important;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      transition: none !important;
      border-right: none !important;
      border-top: none !important;
      border-bottom: none !important;
   }

   body .main-nav .has-submenu.active .submenu,
   .has-submenu.active .submenu {
      display: block !important;
      /* Show when parent is active */
   }

   body .main-nav .submenu li,
   .submenu li {
      border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
      padding: 0 !important;
      margin: 0 !important;
   }

   body .main-nav .submenu li a,
   .submenu li a {
      padding: 10px 20px !important;
      font-size: 13px !important;
      text-transform: none !important;
      color: rgba(255, 255, 255, 0.65) !important;
      width: 100% !important;
   }

   body .main-nav .submenu li a:hover,
   .submenu li a:hover {
      padding-left: 20px !important;
      background: transparent !important;
      color: #399bff !important;
   }

   /* Mobile sub-indicator styling */
   body .dropdown-toggle,
   .dropdown-toggle {
      float: right !important;
      font-size: 10px !important;
      color: rgba(255, 255, 255, 0.4) !important;
      margin-top: 3px !important;
      transition: transform 0.25s ease !important;
   }

   body .has-submenu.active .dropdown-toggle,
   .has-submenu.active .dropdown-toggle {
      transform: rotate(180deg) !important;
      color: #ee71f9 !important;
   }

   /* Prevent hero title clashing with the fixed header */
   body section.hero,
   body section.single-hero,
   section.hero,
   section.single-hero {
      padding-top: 70px !important;
   }
}