/* ==========================================================================
   i18n-fix-nav.css — Option B (with anti-bleed fix)
   Goal: give “DEMO & DOWNLOAD” more left/right breathing room by allocating
         it more width and taking a little from the other tabs.
   Fix: clip each tab to its own <li> so hover/active fills cannot spill.
   Load AFTER assets/css/main.css
   ========================================================================== */

/* Base safety */
#header nav ul li a {
  box-sizing: border-box !important;
  white-space: nowrap !important;
}

/* Mobile: stacked nav, allow wrapping */
@media screen and (max-width: 480px) {
  #header nav ul li a {
    white-space: normal !important;
  }
}

/* Desktop/tablet */
@media screen and (min-width: 481px) {

  #header nav ul {
    display: flex !important;
    width: 100%;
    max-width: 70rem; /* adjust if you want the whole bar narrower/wider */
    margin: 0 auto;
  }

  /* Each tab is a flex item — IMPORTANT: clip to prevent bleed */
  #header nav ul li {
    display: flex !important;
    min-width: 0 !important;

    position: relative !important;
    overflow: hidden !important; /* <-- stops DEMO background bleeding into neighbors */

    flex: 1 1 0 !important; /* default; overridden below */
  }

  /* Anchor fills its li cleanly */
  #header nav ul li a {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0 1.25rem !important;
    text-align: center !important;
  }

   #header nav ul li a {
    font-size: 0.74rem !important;      /* optional; keep if you like the look */
  }
   
  #header nav ul li a[data-i18n="nav.demo"] {
    letter-spacing: 0.05rem !important; 
    font-size: 0.74rem !important;
  }
}