/* MOBILE MENU FIX - Apply to all Corpex pages */
/* Include this CSS file AFTER the main page CSS */

/* Override for screens 480px-768px where Reg.css hides hamburger */
@media (min-width: 480px) and (max-width: 768px) {
   /* HIDE Layer2, Layer3 duplicate menus */
   #Layer2,
   #Layer3 {
      display: none !important;
   }

   .DropdownMenu3 .navbar-toggle,
   #DropdownMenu3 .navbar-toggle,
   .navbar-toggle {
      display: block !important;
      visibility: visible !important;
   }
   .DropdownMenu3-navbar-collapse.collapse {
      display: block !important;
      position: fixed !important;
      right: -300px !important;
      height: 100vh !important;
      overflow: visible !important;
   }

   /* Hide the container bar */
   #DropdownMenu3 .container {
      background: transparent !important;
      height: auto !important;
      min-height: 0 !important;
   }
}

@media (max-width: 768px) {
   /* HIDE DUPLICATE MENU (Layer2, Layer3) on mobile */
   #Layer2,
   #Layer3 {
      display: none !important;
   }

   /* Fixed header */
   #Layer1 {
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      z-index: 99999 !important;
      background: #1a1a2e !important;
      box-shadow: 0 2px 15px rgba(0,0,0,0.3) !important;
      height: auto !important;
      min-height: 60px !important;
   }

   /* Body padding for fixed header */
   body {
      padding-top: 70px !important;
      width: 100% !important;
      max-width: 100% !important;
      margin: 0 !important;
      box-sizing: border-box !important;
   }

   /* ===== FULL WIDTH CONTENT FIX ===== */
   /* Fix wrapper elements (wb_LayoutGrid*) - they use table display which constrains width */
   #wb_LayoutGrid3,
   #wb_LayoutGrid6,
   #wb_LayoutGrid16,
   [id^="wb_LayoutGrid"]:not(#wb_LayoutGrid2) {
      display: block !important;
      width: 100% !important;
      table-layout: auto !important;
   }

   /* Fix inner grid elements - they have max-width: 1140px */
   #LayoutGrid3,
   #LayoutGrid6,
   #LayoutGrid16,
   [id^="LayoutGrid"]:not(#LayoutGrid2) {
      width: 100% !important;
      max-width: 100% !important;
      padding-left: 15px !important;
      padding-right: 15px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      box-sizing: border-box !important;
   }

   /* Fix rows inside grids */
   #LayoutGrid3 > .row,
   #LayoutGrid6 > .row,
   #LayoutGrid16 > .row,
   [id^="LayoutGrid"]:not(#LayoutGrid2) > .row {
      width: 100% !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
   }

   /* Reset columns to full width on mobile - except header columns */
   #LayoutGrid3 > .row > .col-1,
   #LayoutGrid3 > .row > .col-2,
   #LayoutGrid6 > .row > .col-1,
   #LayoutGrid16 > .row > .col-1,
   [id^="LayoutGrid"]:not(#LayoutGrid2) > .row > [class^="col-"] {
      width: 100% !important;
      max-width: 100% !important;
      float: none !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
   }

   /* Fix container element */
   #container {
      width: 100% !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
   }

   /* Fix contact footer */
   #wb_contact,
   #contact {
      width: 100% !important;
      max-width: 100% !important;
   }

   /* Header layout */
   #LayoutGrid2 {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      padding: 10px 15px !important;
   }

   #LayoutGrid2 > .row {
      display: flex !important;
      flex-direction: row !important;
      align-items: center !important;
      justify-content: space-between !important;
      width: 100% !important;
   }

   #LayoutGrid2 > .row > .col-1 {
      flex: 0 0 auto !important;
      width: auto !important;
   }

   #LayoutGrid2 > .row > .col-2 {
      flex: 0 0 auto !important;
      width: auto !important;
   }

   /* Fix col-2-padding pushing hamburger down */
   #LayoutGrid2 > .row > .col-2 > .col-2-padding {
      padding: 0 !important;
      margin: 0 !important;
   }

   /* Menu wrapper - reset all backgrounds and heights */
   #wb_DropdownMenu3,
   #DropdownMenu3,
   .DropdownMenu3 {
      position: static !important;
      width: auto !important;
      height: auto !important;
      background: transparent !important;
      background-color: transparent !important;
      background-image: none !important;
      min-height: 0 !important;
      border: none !important;
      box-shadow: none !important;
   }

   /* Container inside menu - prevent extra bars */
   #DropdownMenu3 .container,
   .DropdownMenu3 .container {
      display: flex !important;
      align-items: center !important;
      justify-content: flex-end !important;
      width: auto !important;
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      background: transparent !important;
      position: static !important;
      height: auto !important;
      min-height: 0 !important;
      border: none !important;
      box-shadow: none !important;
   }

   /* Navbar header with hamburger */
   .DropdownMenu3 .navbar-header {
      display: block !important;
      float: none !important;
      position: static !important;
   }

   /* Hamburger button - FORCE VISIBLE */
   .navbar-toggle,
   .DropdownMenu3 .navbar-toggle,
   #DropdownMenu3 .navbar-toggle {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      position: static !important;
      float: none !important;
      margin: 0 !important;
      padding: 10px !important;
      background: transparent !important;
      border: 1px solid rgba(255,255,255,0.3) !important;
      border-radius: 4px !important;
      cursor: pointer !important;
      width: auto !important;
      height: auto !important;
   }

   .navbar-toggle .icon-bar,
   .DropdownMenu3 .navbar-toggle .icon-bar,
   #DropdownMenu3 .navbar-toggle .icon-bar {
      display: block !important;
      visibility: visible !important;
      width: 22px !important;
      height: 2px !important;
      background-color: #fff !important;
      margin: 4px 0 !important;
      border-radius: 1px !important;
   }

   /* Menu panel - slides from right */
   .DropdownMenu3-navbar-collapse {
      display: block !important;
      position: fixed !important;
      top: 0 !important;
      right: -300px !important;
      width: 280px !important;
      height: 100vh !important;
      background: #1a1a2e !important;
      padding: 60px 0 20px 0 !important;
      box-sizing: border-box !important;
      z-index: 99998 !important;
      overflow-y: auto !important;
      transition: right 0.3s ease !important;
      box-shadow: -5px 0 20px rgba(0,0,0,0.3) !important;
   }

   /* Close button */
   .mobile-menu-close {
      position: absolute !important;
      top: 15px !important;
      right: 15px !important;
      width: 40px !important;
      height: 40px !important;
      background: rgba(255,255,255,0.1) !important;
      border: none !important;
      border-radius: 50% !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      z-index: 99999 !important;
      transition: background 0.3s ease !important;
   }

   .mobile-menu-close:hover {
      background: rgba(255,255,255,0.2) !important;
   }

   .mobile-menu-close::before,
   .mobile-menu-close::after {
      content: '' !important;
      position: absolute !important;
      width: 20px !important;
      height: 2px !important;
      background: #fff !important;
   }

   .mobile-menu-close::before {
      transform: rotate(45deg) !important;
   }

   .mobile-menu-close::after {
      transform: rotate(-45deg) !important;
   }

   .DropdownMenu3-navbar-collapse.collapse {
      display: block !important;
      right: -300px !important;
   }

   /* Show menu when open */
   .DropdownMenu3-navbar-collapse.collapse.show,
   .DropdownMenu3-navbar-collapse.in {
      right: 0 !important;
   }

   /* Menu list */
   .DropdownMenu3 .navbar-nav {
      float: none !important;
      width: 100% !important;
      display: block !important;
      margin: 0 !important;
      padding: 0 !important;
      background: #1a1a2e !important;
   }

   /* Menu items */
   .DropdownMenu3 .navbar-nav > li {
      float: none !important;
      display: block !important;
      width: 100% !important;
      margin-bottom: 0 !important;
      list-style: none !important;
      border-bottom: 1px solid rgba(255,255,255,0.1) !important;
      background: #1a1a2e !important;
   }

   /* Menu item links */
   .DropdownMenu3 .navbar-nav > li > a {
      color: #ffffff !important;
      background: transparent !important;
      padding: 18px 25px !important;
      display: block !important;
      width: 100% !important;
      font-size: 16px !important;
      text-align: left !important;
      box-sizing: border-box !important;
   }

   /* Hide dropdown submenus by default */
   .DropdownMenu3 .dropdown-menu {
      display: none !important;
      position: static !important;
      background: rgba(0,0,0,0.3) !important;
      width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
      box-shadow: none !important;
      border: none !important;
   }

   /* Show submenu when parent has .show class */
   .DropdownMenu3 .navbar-nav > li.show > .dropdown-menu {
      display: block !important;
   }

   .DropdownMenu3 .dropdown-menu > li > a {
      color: #cccccc !important;
      background: transparent !important;
      padding: 14px 40px !important;
      font-size: 14px !important;
      border-bottom: 1px solid rgba(255,255,255,0.05) !important;
   }

   /* Mobile scroll fix */
   html {
      overflow-y: auto !important;
      overflow-x: hidden !important;
   }
}