/* Mobile Logo Center CSS */

/* Center logo in mobile view */
@media (max-width: 900px) {
  /* Container positioning */
  header .container,
  .header .container,
  .main-header .container {
    justify-content: center !important;
    position: relative !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
  
  /* Logo positioning - HIDE LOGO COMPLETELY ON MOBILE */
  header .logo,
  header a.logo,
  .header .logo,
  .header a.logo,
  .main-header .logo,
  .main-header a.logo,
  .logo,
  a.logo {
    display: none !important;
  }
  
  /* Logo text styling - HIDDEN ON MOBILE */
  header .logo,
  .header .logo,
  .main-header .logo,
  .logo {
    display: none !important;
  }
  
  /* Hamburger positioning - ensure it doesn't overlap logo and is clickable */
  header .hamburger,
  .header .hamburger,
  .main-header .hamburger,
  .hamburger {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 1002 !important;
    width: 45px !important;
    height: 45px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 8px !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* Hamburger lines styling */
  header .hamburger span,
  .header .hamburger span,
  .main-header .hamburger span,
  .hamburger span {
    display: block !important;
    width: 25px !important;
    height: 3px !important;
    margin: 4px 0 !important;
    background-color: #333 !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
  }

  /* Hamburger active state */
  header .hamburger.active span:nth-child(1),
  .header .hamburger.active span:nth-child(1),
  .main-header .hamburger.active span:nth-child(1),
  .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }

  header .hamburger.active span:nth-child(2),
  .header .hamburger.active span:nth-child(2),
  .main-header .hamburger.active span:nth-child(2),
  .hamburger.active span:nth-child(2) {
    opacity: 0 !important;
  }

  header .hamburger.active span:nth-child(3),
  .header .hamburger.active span:nth-child(3),
  .main-header .hamburger.active span:nth-child(3),
  .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px) !important;
  }
  
  /* Ensure logo image is properly sized */
  header .logo img,
  .header .logo img,
  .main-header .logo img,
  .logo img {
    max-height: 40px !important;
    width: auto !important;
  }
}

/* Extra small screens - further adjustments */
@media (max-width: 480px) {
  /* Hide logo on very small screens too */
  header .logo,
  .header .logo,
  .main-header .logo,
  .logo {
    display: none !important;
  }

  /* Adjust hamburger for very small screens */
  header .hamburger,
  .header .hamburger,
  .main-header .hamburger,
  .hamburger {
    right: 5px !important;
    width: 40px !important;
    height: 40px !important;
  }
}

/* Mobile navigation menu styles */
@media (max-width: 900px) {
  /* Navigation menu when opened */
  header nav ul.open,
  .header nav ul.open,
  .main-header nav ul.open,
  nav ul.open,
  #main-nav.open {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: white !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    z-index: 1000 !important;
    padding: 1rem !important;
    margin: 0 !important;
    border-top: 1px solid #eee !important;
  }

  /* Navigation menu items */
  header nav ul.open li,
  .header nav ul.open li,
  .main-header nav ul.open li,
  nav ul.open li,
  #main-nav.open li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }

  /* Navigation menu links */
  header nav ul.open li a,
  .header nav ul.open li a,
  .main-header nav ul.open li a,
  nav ul.open li a,
  #main-nav.open li a {
    display: block !important;
    padding: 12px 16px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 16px !important;
    border: none !important;
    background: none !important;
    width: 100% !important;
    text-align: left !important;
  }

  /* Navigation menu link hover */
  header nav ul.open li a:hover,
  .header nav ul.open li a:hover,
  .main-header nav ul.open li a:hover,
  nav ul.open li a:hover,
  #main-nav.open li a:hover {
    background-color: #f5f5f5 !important;
    color: #007bff !important;
  }
}