/* ============================================================================
   JP-832 — Main top navigation cropped on the right at tablet width.
   Pages: GLOBAL header (every page); reported on /de/ and /en/ homepages.
   Repro: iPad 11" (M1) — a Stage-Manager / resizable Safari window that lands
          in the ~1200–1319px band (both orientations of a 12.9"/13" iPad, or an
          M1 iPad driving a wider window, hit this too).
   ============================================================================

   ROOT CAUSE
   ----------
   The floating pill nav (`custom-clone.css` §5/§6) switches from the tablet
   hamburger to the full horizontal desktop nav at Bootstrap `xl` = 1200px
   (`.jtl-nav-inner.d-none.d-xl-flex` shows; `.jtl-nav-tablet-controls.d-xl-none`
   hides). But the horizontal row does NOT actually fit at 1200px:

     • `.jtl-nav-inner`   is `flex: 1 0 0; overflow: hidden`
     • `.jtl-nav-primary` is `flex-shrink: 1; overflow: hidden`

   so when the row is too narrow the primary menu is squeezed and its right-hand
   items are silently CLIPPED (no scrollbar). Measured on prod:

     DE  primary natural width 615px → clips 1200–1299px (fits at 1300).
         binding case: long CTA "Beratung vereinbaren" eats the row.
     EN  primary natural width 671px → clips 1200–1260px (fits at 1280).
         shorter CTA "Talk to Sales" frees the row earlier.

   At 1200px "Login" and "Stores" (DE) are cut off on the right — exactly the
   reported symptom.

   THE FIX
   -------
   Keep the fully-functional tablet (hamburger) nav until the horizontal nav
   actually fits in BOTH languages. DE is the binding case (fits at 1300); 1320
   adds ~20px of headroom so neither language ever clips. So: hold the tablet
   nav across 1200–1319.98px and let the desktop horizontal nav engage only at
   ≥1320px. Nothing is lost below 1320 — every menu item stays reachable through
   the tablet drawer.

   Why not shrink the nav footprint to fit at 1200 instead: the DE row needs
   ~120px it doesn't have at 1200; gap/padding trims can't reclaim that reliably
   across both languages, and it would be fragile against future label changes.
   Raising the breakpoint is the robust fix.

   SPECIFICITY: Bootstrap's `.d-xl-flex` / `.d-xl-none` are `!important` display
   utilities. `#header .jtl-nav-inner.d-xl-flex` (id + 2 classes) out-ranks the
   single-class utility, so `!important` here wins the tie deterministically.

   BLAST RADIUS: global header, every page, only in the 1200–1319.98px band.
   In that band users get the tablet hamburger nav instead of a clipped desktop
   nav — strictly an improvement (the desktop nav there is currently broken).
   ============================================================================ */

@media (min-width: 1200px) and (max-width: 1319.98px) {

    /* Hold the tablet nav; suppress the (non-fitting) horizontal desktop nav. */
    #header .jtl-nav-inner.d-xl-flex {
        display: none !important;
    }
    #header .jtl-nav-tablet-controls.d-xl-none {
        display: flex !important;
    }

    /* The drawer the hamburger targets is `.collapse.d-xl-none` (navbar.php:335).
       From 1200px up, `.d-xl-none` is `display:none !important`, and Bootstrap's
       collapse rule is `.collapse:not(.show){display:none}` — it supplies NO
       display at all once `.show` lands, so the utility keeps the drawer pinned
       shut and the hamburger does nothing. `#id` + 2 classes out-ranks the
       single-class utility, and both carry !important, so the tie resolves our
       way. `.collapsing` is included so the open/close transition frame isn't
       hidden mid-animation. */
    #jtlNavMobile.collapse.show,
    #jtlNavMobile.collapsing {
        display: block !important;
    }

    /* Mirror the 768–1199 tablet pill sizing so the pill looks identical to how
       it renders just below 1200px (custom-clone.css §16). */
    #header .jtl-nav-wrapper {
        padding: 12px 16px;
    }
    #header .jtl-nav-pill {
        padding: 16px 16px 16px 24px;
    }
    #header .jtl-nav-logo svg {
        height: 34px;
        width: auto;
    }
}