/* ===========================================
   HEADER MOBILE FIX
   Mobile-only improvements. Does NOT touch
   desktop layout (>=992px) at all.
   =========================================== */

/* --- TABLET + MOBILE (<992px): Layout fixes --- */
@media (max-width: 991.98px) {
  /* Reorder: Logo(0) → Icons(2) → Toggler(3) → Collapse(wraps) */
  .navbar > .container > .navbar-toggler {
    order: 3;
    margin-left: 4px !important;
  }
  .navbar > .container > .d-lg-none.d-flex.align-items-center {
    order: 2;
  }
  .navbar > .container > .navbar-collapse {
    order: 4;
  }

  /*
   * Single search bar on mobile:
   * The search form lives inside #mainNavbar (the collapse).
   * When the collapse is closed, everything inside is hidden.
   * When the collapse is open (.show), the search form appears.
   * This rule ensures the search form's d-flex does not leak.
   */
  #mainNavbar:not(.show) .search-form {
    display: none !important;
  }
}

/* --- SMALL PHONES (<576px) --- */
@media (max-width: 575.98px) {
  .navbar-brand img {
    height: 44px !important;
    max-width: 105px !important;
  }

  .d-lg-none .btn-sm,
  .d-lg-none .dropdown > a {
    padding: 6px 9px !important;
  }

  .announcement-bar .announcement-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 50%;
  }
  .announcement-bar .small {
    font-size: 0.75rem;
  }
}

/* --- VERY SMALL PHONES (<400px) --- */
@media (max-width: 399.98px) {
  .navbar-brand img {
    height: 40px !important;
    max-width: 90px !important;
  }

  .d-lg-none .btn-sm,
  .d-lg-none .dropdown > a {
    padding: 5px 7px !important;
  }
  .d-lg-none .btn-sm i,
  .d-lg-none .dropdown > a i {
    font-size: 1.2rem;
  }

  .navbar-toggler {
    padding: 6px !important;
  }
  .navbar-toggler i {
    font-size: 1.4rem !important;
  }

  .announcement-bar .announcement-text {
    max-width: 45%;
  }
  .announcement-bar .small {
    font-size: 0.7rem;
  }
}

/* --- EXTRA SMALL PHONES (<360px) --- */
@media (max-width: 359.98px) {
  .navbar-brand img {
    height: 36px !important;
    max-width: 80px !important;
  }

  .d-lg-none .btn-sm,
  .d-lg-none .dropdown > a {
    padding: 4px 6px !important;
  }
  .d-lg-none .btn-sm i,
  .d-lg-none .dropdown > a i {
    font-size: 1.1rem;
  }

  .navbar-toggler {
    padding: 5px !important;
  }
  .navbar-toggler i {
    font-size: 1.3rem !important;
  }

  .d-lg-none .badge {
    font-size: 0.5rem !important;
    padding: 1px 3px !important;
    min-width: 14px;
  }

  .announcement-bar .announcement-text {
    max-width: 40%;
    font-size: 0.65rem;
  }
}