/* Base layout control */
@media (max-width: 1280px) {
  .em-header-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0 6px !important; /* Reduced from 12px to allow more space */
  }

  .em-logo {
    flex: 0 0 auto !important;
    min-width: 140px !important;
  }

  .em-logo img {
    height: 40px !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .em-header-info {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-start !important;
    gap: 12px !important;
    margin-top: 0 !important;
    flex-wrap: nowrap !important;
  }

  .em-header-info a {
    gap: 4px !important;
    display: flex !important;
    align-items: center !important;
  }

  .em-header-info a div {
    display: none !important;
  }

  .em-desktop-menu {
    display: none !important;
  }
}

/* Tablet and small desktop (tighten vertical spacing earlier) */
@media (max-width: 992px) {
  .em-header-info {
    gap: 10px !important;
  }

  .em-header-info a {
    line-height: 1.1 !important;
  }

  .em-logo img {
    height: 44px !important;
  }
}

/* Very narrow screens - keep in one row */
@media (max-width: 460px) {
  .em-header-wrapper {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
  }

  .em-header-info {
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 0 !important;
  }
}

/* Prevent wrapping until 380px - last-resort column layout */
@media (max-width: 380px) {
  .em-header-wrapper {
    flex-direction: column !important;
    align-items: center !important;
  }

  .em-header-info {
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-top: 10px !important;
  }
}

/* Optimize layout between 420px and 380px */
@media (max-width: 420px) {
  .em-header-wrapper {
    padding: 0 4px !important;
  }

  .em-logo img {
    height: 32px !important;
  }

  .em-header-info {
    gap: 6px !important;
  }

  .em-header-info a {
    gap: 2px !important;
  }
}

/* Utility: hide mobile-only items */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}