/* AL NOOR EXIM - header fix. Loaded on every page. 19 Sep 2026.
   Problem it solves: the header row squeezed every menu label until the text
   broke in half ("Red / Onion", "AL NOOR / EXIM"), and on wide screens the
   link strip pushed the page sideways. Nothing here changes colours or text. */

/* 1. A menu label must never break in half */
.brand,
.nav-links a,
.hd .in .nav a,
.nav-cta,
.wa-s{white-space:nowrap}

/* 2. Brand, CTA and the WhatsApp circle keep their size */
.brand,
.nav-cta,
.wa-s{flex:0 0 auto}

/* 3. If the links do not fit, break BETWEEN links - never inside a label.
      Nothing is ever hidden or scrolled out of reach. */
.nav-links,
.hd .in .nav{
  flex:1 1 auto;min-width:0;
  flex-wrap:wrap;
  row-gap:8px;
}
.nav-links a,
.hd .in .nav a{flex:0 0 auto}

/* 4. Phones had NO menu at all - the links were hidden with nothing to
      replace them. Give them back, on their own row under the brand. */
@media (max-width:820px){
  .nav{flex-wrap:wrap;height:auto;padding:10px 0}
  .nav-links{display:flex!important;order:3;width:100%;gap:18px;padding-top:10px}
}
@media (max-width:560px){
  .hd .in{flex-wrap:wrap}
  .hd .in .nav{display:flex!important;order:3;width:100%;gap:14px;padding-top:10px}
  .nav-links{gap:14px}
}

/* 5. Embedded maps and videos must not push the page sideways */
iframe{max-width:100%}

/* 6. Breathing room between brand, links and buttons */
header > .wrap.nav{gap:16px}
.hd .in{gap:18px}

/* 7. Tighter link spacing on desktop so the trimmed menu fits one row */
@media (min-width:821px){
  .nav-links{column-gap:18px}
  .hd .in .nav{column-gap:16px}
}