/* ═══════════════════════════════════════════════════════════════════════
   INGONYAMA TRUST — HEADER NAV AUTO-FIT
   ----------------------------------------------------------------------
   Every other stylesheet collapses the desktop nav into the hamburger by
   viewport width alone (<=1024px), which assumes English label lengths.
   Translated labels are far longer — "Abezindaba Nezimemezelo" for
   "Press & Announcements" — and the nav's content box is capped at
   var(--site-max) (1320px), so a wider screen never buys more room. The row
   therefore overflows at ANY desktop width and the CTA plus the language
   switcher get pushed past the edge and clipped.

   js/nav-fit.js measures the row and sets [data-navfit] on <nav>:
     0           fits natively, no shrinking needed
     1 / 2 / 3   progressively tighter presentations
     collapsed   hamburger fallback, at whatever width it is needed

   !important throughout: the width-based rules this has to override (in
   responsive-fixes.css and shared-responsive.css) are !important too.
   Without JS nothing here applies and the previous behaviour stands.

   Kept in its own file, loaded after unified-layout.css, rather than
   appended to it — unified-layout.css has an unclosed `@media (max-width:
   768px) {` at line 790, so everything after that point in it only applies
   below 768px.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Measuring ───────────────────────────────────────────────────────
   .nl-a carries `transition: all .15s`, so straight after a level is applied
   or cleared the links are mid-animation and measure narrower than they will
   settle at. The script would then read "it fits", drop the level, and let the
   row spring back into overflow. Transitions are frozen for the measuring
   pass, which is synchronous and never painted. */
nav.itb-navfit-measuring,
nav.itb-navfit-measuring * {
  transition: none !important;
  animation: none !important;
}

/* ── Baseline restore ─────────────────────────────────────────────────
   main.css hides .nav-links/.nav-cta by default below 1500px on the
   assumption that this script decides when there's room for them again —
   but it only ever set [data-navfit] to a level (1/2/3/collapsed) when
   shrinking was actually needed, and just REMOVED the attribute otherwise.
   An absent attribute matches nothing here, so on any page whose own CSS
   didn't happen to redeclare .nav-cta elsewhere, the row silently stayed
   hidden even though nav-fit.js had correctly decided it already fit.
   "0" is the explicit "fits natively" state js/nav-fit.js now sets before
   even checking whether shrinking is needed, so this restore always
   applies whenever JS has run and decided anything short of collapsing to
   the hamburger — matching each element's original, non-media-query
   display value in main.css. */
nav[data-navfit="0"] .nav-links,
nav[data-navfit="1"] .nav-links,
nav[data-navfit="2"] .nav-links,
nav[data-navfit="3"] .nav-links {
  display: flex !important;
}
nav[data-navfit="0"] .nav-cta,
nav[data-navfit="1"] .nav-cta,
nav[data-navfit="2"] .nav-cta,
nav[data-navfit="3"] .nav-cta {
  display: inline-flex !important;
}

/* main.css puts `margin-right:auto` on .brand, which concentrates ALL of
   the row's leftover width into one gap immediately after the logo —
   easy to miss in English (the nav content usually fills most of the row
   on its own), glaring in isiZulu at the tighter widths nav-fit steps
   through, where there's more leftover width for it to absorb. Move that
   same "push everything after me to the right edge" behaviour from the
   brand's trailing side to the CTA's leading side instead: brand and
   nav-links sit close together, and the slack shows up as ordinary
   spacing before the Contact button instead of a hole next to the logo.
   A fixed 16px (not 0) keeps a small deliberate gap so the logo still
   visually reads as separate from the nav links rather than touching. */
nav[data-navfit] .brand {
  margin-right: 16px !important;
}
nav[data-navfit] .nav-links {
  margin-left: auto !important;
}

/* The home page also happens to have its own old legacy inline stylesheet
   that unconditionally redeclares .nl-a at font-size:12.5px / padding:7px
   10px, ignoring main.css's own @media(max-width:1400px) step down to
   12px / 7px 9px — so at exactly the "fits with no shrinking needed"
   width (nav-fit's level "0"), home always looks slightly larger/roomier
   than every other page, which never had that override and quietly
   follows main.css's normal responsive step-down instead. Setting it here
   too makes level "0" render identically everywhere, matching what home
   already (accidentally) looks like. Levels 1/2/3 are unaffected — they
   already set their own explicit font-size below. */
nav[data-navfit="0"] .nl-a {
  font-size: 12.5px !important;
  padding: 7px 10px !important;
}

/* ── Level 1 — drop the brand tagline, tighten the row ───────────────── */
nav[data-navfit="1"],
nav[data-navfit="2"],
nav[data-navfit="3"] {
  gap: 2px !important;
}

nav[data-navfit="1"] .brand-txt .bs,
nav[data-navfit="2"] .brand-txt .bs,
nav[data-navfit="3"] .brand-txt .bs { display: none !important; }

nav[data-navfit="1"] .nl-a    { padding: 7px 7px !important; font-size: 12px !important; }
nav[data-navfit="1"] .nav-cta { padding: 8px 14px !important; font-size: 12px !important; }

/* ── Level 2 — smaller type, smaller emblem, narrower gutter ─────────── */
nav[data-navfit="2"] .nl-a    { padding: 6px 5px !important; font-size: 11.5px !important; letter-spacing: -.005em !important; }
nav[data-navfit="2"] .nav-cta { padding: 7px 12px !important; font-size: 11.5px !important; }
nav[data-navfit="2"] .brand img     { width: 44px !important; height: 44px !important; }
nav[data-navfit="2"] .brand-txt .bn { font-size: 13.5px !important; }

/* The nav's content box is capped to --site-max, so at this point the only
   remaining room is the centring gutter. Trade alignment with the sections
   below for a nav that fits — and take the util bar with it so the two
   header rows stay aligned with each other. */
nav[data-navfit="2"],
nav[data-navfit="3"] {
  padding-left:  max(var(--gutter), 24px) !important;
  padding-right: max(var(--gutter), 24px) !important;
}
body:has(nav[data-navfit="2"]) .util-bar,
body:has(nav[data-navfit="3"]) .util-bar {
  padding-left:  max(var(--gutter), 24px) !important;
  padding-right: max(var(--gutter), 24px) !important;
}

/* ── Level 3 — last resort before the hamburger: emblem only ─────────── */
nav[data-navfit="3"] .nl-a    { padding: 5px 4px !important; font-size: 11px !important; letter-spacing: -.01em !important; }
nav[data-navfit="3"] .nav-cta { padding: 7px 10px !important; font-size: 11px !important; }
nav[data-navfit="3"] .brand img { width: 42px !important; height: 42px !important; }
nav[data-navfit="3"] .brand-txt { display: none !important; }

/* ── Collapsed — hand the links to the mobile panel ──────────────────── */
nav[data-navfit="collapsed"] .nav-links,
nav[data-navfit="collapsed"] .nav-item,
nav[data-navfit="collapsed"] .nav-cta { display: none !important; }
nav[data-navfit="collapsed"] .ham     { display: flex !important; }
/* .nav-cta is what normally carries margin-left:auto (see the "Baseline
   restore" rule above) to push the trailing controls to the right edge —
   but it's hidden in this state, so with nothing else picking that up,
   the language switcher (the next flex child after it) was left with no
   push at all and sat right next to the logo instead of next to the
   hamburger. */
nav[data-navfit="collapsed"] .itb-lang { margin-left: auto !important; }