/*  Mobile mode threshold:  1300px */

  /* Desktop (1300px and up): keep desktop nav visible, hide mobile menu */
  @media (min-width: 1300px) {

    .mobile_menu { display: none !important; }

    /* header socials & topbar translate visible */
    #lp-topbar .social_media_links { display: flex !important; }
    #gt-li { display: flex !important; }

    /* hide the nav translate item on desktop */
    #gt-mobile-nav { display: none !important; }
  }

  /* Mobile/Tablet (less than 1300px): show mobile hamburger, hide desktop nav */
  @media (max-width: 1299.98px) {
    #navigation { display: none !important; }
    .mobile_menu { display: block !important; }

    /* hide header social icons and desktop GT on mobile */
    #lp-topbar .social_media_links { display: none !important; }
    #gt-li { display: none !important; }

    /* we are NOT using this nav slot anymore on mobile */
    #gt-mobile-nav { display: none !important; }

    /* Topbar wrap/right-align items so nothing overlaps */
    #lp-topbar .short_contact_list ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 14px;
      justify-content: flex-end;
      margin: 0;
      padding: 0;
    }

    /* Show the EN/FR toggle bar on mobile */
    #gt-mobile-topbar-slot {
      display: flex !important;
      align-items: center;
      justify-content: flex-end;
    }

    /* Compact logo */
    .logo img { width: 100px !important; height: 100px !important; }
    .logo span { font-size: 26px !important; }
    .logo small { font-size: 12px !important; }

    /* Header paddings a bit tighter */
    .main-header-area .container-fluid {
      padding-left: 16px;
      padding-right: 16px;
    }

    /* If we ever put GT widget in nav again, keep it compact */
    #gt-mobile-nav #google_translate_element{
      --gt-height: 28px;
      padding: 2px 6px;
      border-radius: 10px;
      font-size: 12px;
      margin: 6px 0;
    }
    #gt-mobile-nav #google_translate_element .goog-te-combo{
      height: calc(var(--gt-height) - 6px);
      font-size: 12px !important;
      max-width: 120px;
      min-width: 100px;
      padding: 0 14px 0 22px !important;
    }
    #gt-mobile-nav #google_translate_element::after{
      right: 6px;
      width: 6px;
      height: 4px;
    }
    #gt-mobile-nav #google_translate_element::before{
      left: 6px;
      width: 12px;
      height: 12px;
      background-size: 12px 12px;
    }
  }