/**
 * Mobile Logo Size Increase
 * Makes header logo 20% bigger on mobile without changing header size
 * Ensures logo fits within header constraints
 */

@media (max-width: 768px) {
  /* Increase logo image by 20% but ensure it fits */
  .header .logo-image,
  .header .logo-image img,
  .header .logo-link .logo-image,
  .header .logo-link .logo-image img {
    transform: scale(1.2) !important;
    transform-origin: left center !important;
    max-width: calc(177px * 1.2) !important; /* 212.4px - 20% larger */
    width: auto !important;
    height: auto !important;
  }

  /* Adjust logo section to accommodate larger logo without changing header size */
  .header .logo-section {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: calc(177px * 1.2 + 1rem) !important; /* Logo + padding */
    overflow: visible !important;
  }

  /* Ensure logo link doesn't overflow and fits container */
  .header .logo-link {
    max-width: 100% !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }

  /* Prevent logo from pushing other elements - adjust header content */
  .header .header-content {
    align-items: center !important;
    gap: 0.5rem !important; /* Reduced gap to make room */
    padding: 0 0.75rem !important; /* Slightly reduce padding */
    justify-content: space-between !important;
  }

  /* Ensure hamburger menu stays in place and has enough space */
  .header .mobile-menu-toggle {
    flex-shrink: 0 !important;
    margin-left: 0.5rem !important;
    width: 44px !important;
    height: 44px !important;
  }

  /* Logo image container - ensure it doesn't overflow */
  .header .logo-image {
    max-width: 100% !important;
    overflow: visible !important;
    display: flex !important;
    align-items: center !important;
  }
}

/* Extra small mobile devices - reduce scale to ensure it fits */
@media (max-width: 480px) {
  .header .logo-image,
  .header .logo-image img,
  .header .logo-link .logo-image,
  .header .logo-link .logo-image img {
    transform: scale(1.1) !important; /* 10% increase on very small screens */
    transform-origin: left center !important;
    max-width: calc(177px * 1.1) !important; /* ~195px */
  }

  .header .logo-section {
    max-width: calc(177px * 1.1 + 0.75rem) !important;
  }

  .header .header-content {
    gap: 0.375rem !important;
    padding: 0 0.5rem !important;
  }

  .header .mobile-menu-toggle {
    width: 40px !important;
    height: 40px !important;
    margin-left: 0.25rem !important;
  }
}

/* Very small screens - ensure logo fits */
@media (max-width: 360px) {
  .header .logo-image,
  .header .logo-image img,
  .header .logo-link .logo-image,
  .header .logo-link .logo-image img {
    transform: scale(1.05) !important; /* 5% increase on tiny screens */
    max-width: calc(177px * 1.05) !important; /* ~186px */
  }

  .header .logo-section {
    max-width: calc(177px * 1.05 + 0.5rem) !important;
  }

  .header .header-content {
    gap: 0.25rem !important;
    padding: 0 0.375rem !important;
  }
}