/* =====================================================================
   W.I. Freight navbar — modern + mobile responsive
   Everything is scoped under .wifn so the old navbar CSS can't clash.
   Brand colours come from the CMS colour scheme (--color-primary etc.)
   ===================================================================== */

.wifn {
  --wn-primary: var(--color-primary, #2e3192);
  --wn-accent: var(--color-secondary, #be0119);
  --wn-ink: #14163a;
  --wn-muted: #6b6f86;
  --wn-line: rgba(20, 22, 58, 0.08);
  --wn-tint: rgba(46, 49, 146, 0.06);
  --wn-radius: 14px;
  --wn-font: "Grotesk", "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --wn-bar-h: 76px;
  --wn-ease: cubic-bezier(.2, .8, .2, 1);

  position: sticky;
  top: 0;
  z-index: 1030;
  font-family: var(--wn-font);
}

.wifn *,
.wifn *::before,
.wifn *::after { box-sizing: border-box; }

.wifn a { text-decoration: none; }
.wifn ul { list-style: none; margin: 0; padding: 0; }
.wifn li { list-style: none; margin: 0; padding: 0; }
.wifn img { display: block; max-width: 100%; }
.wifn button { font-family: inherit; }
/* the site sets a font on every element (*), so set ours explicitly */
.wifn *:not(.bi) { font-family: var(--wn-font); }

.wifn-container {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Top contact strip ---------- */
.wifn-strip {
  background: var(--wn-primary);
  color: rgba(255, 255, 255, .88);
  font-size: .85rem;
  max-height: 40px;
  overflow: hidden;
  transition: max-height .35s var(--wn-ease), opacity .25s;
}
.wifn-strip-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  gap: 1rem;
}
.wifn-strip-left { display: flex; align-items: center; gap: 2rem; }
.wifn-strip a,
.wifn-strip-right {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255, 255, 255, .88);
  white-space: nowrap;
  line-height: 1;
  transition: color .2s;
}
.wifn-strip a:hover { color: #fff; }
.wifn-strip svg {
  width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  flex-shrink: 0;
}
.wifn-strip .bi { font-size: 15px; line-height: 1; }

.wifn.is-scrolled .wifn-strip { max-height: 0; opacity: 0; }

/* ---------- Main bar ---------- */
.wifn-bar {
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s, border-color .3s, background .3s;
}
@supports (backdrop-filter: blur(10px)) {
  .wifn-bar { background: rgba(255, 255, 255, .85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); }
}
.wifn.is-scrolled .wifn-bar {
  border-bottom-color: var(--wn-line);
  box-shadow: 0 10px 30px -18px rgba(20, 22, 58, .35);
}

.wifn-bar-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--wn-bar-h);
  transition: height .3s var(--wn-ease);
}
.wifn.is-scrolled .wifn-bar-inner { height: 64px; }

.wifn-logo { flex: 0 0 auto; display: flex; align-items: center; }
.wifn-logo img {
  height: 54px;
  width: auto;
  transition: height .3s var(--wn-ease);
}
.wifn.is-scrolled .wifn-logo img { height: 46px; }

/* ---------- Desktop navigation ---------- */
.wifn-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-width: 0;
}
.wifn-menu { display: flex; align-items: center; gap: .25rem; margin: 0 auto; }
.wifn-menu > li { position: relative; }

.wifn-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .6rem .95rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--wn-primary); /* same colour as "Purchase Repackaging" */
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.wifn-link:hover,
.wifn-has-drop.is-open > .wifn-link { color: var(--wn-primary); background: var(--wn-tint); }
.wifn-link.is-current,
.wifn-has-drop.is-section > .wifn-link { color: var(--wn-primary); }
.wifn-link.is-current::after,
.wifn-has-drop.is-section > .wifn-link::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 2px;
  width: 18px; height: 3px;
  border-radius: 3px;
  background: var(--wn-accent);
  transform: translateX(-50%);
}
/* menu icons: red, like the Purchase Repackaging box */
.wifn-ico { color: var(--wn-accent); font-size: 1.05em; line-height: 1; transition: transform .25s var(--wn-ease); }
.wifn-link:hover .wifn-ico { transform: translateY(-1px) scale(1.1); }
.wifn-chev { color: var(--wn-primary); }

.wifn-chev { font-size: .75rem; transition: transform .25s var(--wn-ease); }
.wifn-has-drop.is-open .wifn-chev { transform: rotate(180deg); }

.wifn-link:focus-visible,
.wifn-tile:focus-visible,
.wifn-btn:focus-visible,
.wifn-cart:focus-visible,
.wifn-burger:focus-visible,
.wifn-logo:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--wn-primary) 45%, transparent);
  outline-offset: 2px;
}

/* Dropdown panel */
.wifn-drop {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  width: 560px;
  padding: 1.1rem;
  background: #fff;
  border: 1px solid var(--wn-line);
  border-radius: 18px;
  box-shadow: 0 30px 60px -20px rgba(20, 22, 58, .28), 0 8px 20px -12px rgba(20, 22, 58, .2);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 8px);
  transition: opacity .2s, transform .25s var(--wn-ease), visibility 0s .25s;
}
.wifn-drop::before { /* hover bridge */
  content: "";
  position: absolute;
  left: 0; right: 0; top: -16px; height: 16px;
}
.wifn-has-drop.is-open > .wifn-drop {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity .2s, transform .25s var(--wn-ease), visibility 0s;
}
.wifn-drop-title {
  margin: 0 0 .6rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wn-muted);
}
.wifn-drop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }

.wifn-tile {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .7rem;
  border-radius: 12px;
  color: var(--wn-primary);
  transition: background .2s, transform .2s;
}
.wifn-tile:hover { background: var(--wn-tint); color: var(--wn-primary); }
.wifn-tile.is-current { background: var(--wn-tint); }
.wifn-tile-icon {
  flex: 0 0 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(46, 49, 146, .10), rgba(190, 1, 25, .08));
  transition: transform .25s var(--wn-ease);
}
.wifn-tile:hover .wifn-tile-icon { transform: scale(1.06) rotate(-3deg); }
.wifn-tile-icon img { width: 26px; height: 26px; object-fit: contain; }
.wifn-tile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wifn-tile-text strong { font-size: .95rem; font-weight: 600; line-height: 1.25; }
.wifn-tile-text small { font-size: .8rem; color: var(--wn-muted); line-height: 1.3; }

/* Buttons */
.wifn-auth { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.wifn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 1.15rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition: background .2s, color .2s, box-shadow .2s, transform .15s;
}
.wifn-btn-ghost { color: var(--wn-primary); }
.wifn-btn-ghost:hover { color: var(--wn-primary); background: var(--wn-tint); }
.wifn-btn-primary {
  color: #fff;
  background: var(--wn-accent);
  box-shadow: 0 8px 18px -8px color-mix(in srgb, var(--wn-accent) 70%, transparent);
}
.wifn-btn-primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -8px color-mix(in srgb, var(--wn-accent) 75%, transparent);
}

/* Right-hand actions: cart + burger */
.wifn-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.wifn-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  color: var(--wn-primary);
  background: var(--wn-tint);
  font-size: 1.25rem;
  transition: background .2s, transform .15s;
}
.wifn-cart:hover { color: var(--wn-primary); background: rgba(46, 49, 146, .12); }
.wifn-cart .bi { line-height: 1; }
.wifn-cart .badge {
  position: absolute;
  top: -2px; right: -2px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--wn-accent);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
}

.wifn-burger { display: none; }
.wifn-drawer-extra { display: none; }
.wifn-drawer-head { display: none; }
/* Blurred backdrop: behind an open dropdown (desktop) or the menu drawer (mobile) */
.wifn-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(14, 16, 44, .28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
}
.wifn.is-drop-open .wifn-overlay,
.wifn.is-menu-open .wifn-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility 0s;
}
@media (min-width: 1025px) {
  /* keep the bar (and its dropdowns) above the blur */
  .wifn-bar, .wifn-strip { position: relative; z-index: 2; }
}

/* Medium desktops: tighten spacing */
@media (max-width: 1240px) and (min-width: 1025px) {
  .wifn-bar-inner { gap: 1rem; }
  .wifn-link { padding: .55rem .7rem; font-size: .95rem; }
  .wifn-btn { padding: 0 .9rem; }
  .wifn-logo img { height: 46px; }
  .wifn-strip-left { gap: 1.25rem; }
}

/* =====================================================================
   Tablet & mobile: slide-in drawer
   ===================================================================== */
@media (max-width: 1024px) {
  .wifn { --wn-bar-h: 68px; }
  .wifn-strip { display: none; }
  /* no blur here: it would trap the fixed drawer inside the bar */
  .wifn-bar { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .wifn-container { padding: 0 16px; }
  .wifn-bar-inner { justify-content: space-between; gap: .75rem; }
  .wifn.is-scrolled .wifn-bar-inner { height: 60px; }
  .wifn-logo img { height: 44px; }
  .wifn.is-scrolled .wifn-logo img { height: 40px; }

  .wifn-burger {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px; height: 44px;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: var(--wn-primary);
    cursor: pointer;
    z-index: 1062;
    transition: background .2s;
  }
  .wifn-burger span {
    display: block;
    width: 20px; height: 2px;
    border-radius: 2px;
    background: #fff;
    transition: transform .3s var(--wn-ease), opacity .2s, width .3s;
  }
  .wifn-burger span:nth-child(2) { width: 14px; margin-left: 6px; }
  .wifn.is-menu-open .wifn-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .wifn.is-menu-open .wifn-burger span:nth-child(2) { opacity: 0; }
  .wifn.is-menu-open .wifn-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* The drawer */
  .wifn-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(380px, 88vw);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: 0 20px 24px;
    background: #fff;
    box-shadow: -30px 0 60px -30px rgba(20, 22, 58, .45);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(105%);
    visibility: hidden;
    transition: transform .4s var(--wn-ease), visibility 0s .4s;
    z-index: 1061;
  }
  .wifn.is-menu-open .wifn-nav {
    transform: translateX(0);
    visibility: visible;
    transition: transform .4s var(--wn-ease), visibility 0s;
  }

  .wifn-overlay { z-index: 1060; background: rgba(14, 16, 44, .4); }

  .wifn-drawer-head {
    display: flex;
    align-items: center;
    height: var(--wn-bar-h);
    margin-bottom: .75rem;
    border-bottom: 1px solid var(--wn-line);
    flex-shrink: 0;
  }
  .wifn-drawer-head img { height: 38px; width: auto; }

  .wifn-menu { flex-direction: column; align-items: stretch; gap: 2px; margin: 0; }
  .wifn-menu > li { border-bottom: 1px solid var(--wn-line); }
  .wifn-link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem .25rem;
    border-radius: 0;
    font-size: 1.1rem;
    background: transparent !important;
  }
  .wifn-link.is-current::after,
  .wifn-has-drop.is-section > .wifn-link::after {
    left: -20px; top: 50%; bottom: auto;
    width: 4px; height: 22px;
    transform: translateY(-50%);
  }
  .wifn-link { justify-content: flex-start; gap: .65rem; }
  .wifn-link .wifn-ico { width: 1.3em; text-align: center; }
  .wifn-chev { margin-left: auto; }
  .wifn-chev { font-size: .9rem; }

  /* Accordion sub menus */
  .wifn-drop {
    position: static;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s var(--wn-ease);
  }
  .wifn-drop::before { display: none; }
  .wifn-has-drop.is-open > .wifn-drop { transform: none; grid-template-rows: 1fr; }
  .wifn-drop > * { overflow: hidden; min-height: 0; }
  .wifn-drop-title { display: none; }
  .wifn-drop-grid { display: block; }
  .wifn-drop-grid { grid-template-columns: 1fr; padding-bottom: .5rem; }
  .wifn-has-drop:not(.is-open) .wifn-tile { visibility: hidden; }
  .wifn-tile { padding: .55rem .5rem; }
  .wifn-tile-icon { flex-basis: 38px; height: 38px; border-radius: 10px; }
  .wifn-tile-icon img { width: 22px; height: 22px; }

  .wifn-drawer-extra { display: block; order: 3; margin-top: auto; padding-top: 1.5rem; }
  .wifn-drawer-contact { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .wifn-drawer-contact a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .8rem .25rem;
    border-radius: 12px;
    background: var(--wn-tint);
    color: var(--wn-primary);
    font-size: .8rem;
    font-weight: 600;
  }
  .wifn-drawer-contact .bi { font-size: 1.25rem; line-height: 1; }
  .wifn-drawer-hours {
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    margin: .9rem 0 0;
    font-size: .85rem;
    color: var(--wn-muted);
  }

  .wifn-auth {
    order: 2;
    flex-direction: column;
    align-items: stretch;
    gap: .6rem;
    margin-top: 1.5rem;
  }
  .wifn-btn { height: 50px; font-size: 1rem; }
  .wifn-btn-ghost { border: 1.5px solid color-mix(in srgb, var(--wn-primary) 30%, transparent); }

  .wifn-actions { position: relative; z-index: 1062; }
}

@media (max-width: 400px) {
  .wifn-logo img { height: 38px; }
  .wifn-cart, .wifn-burger { width: 42px; height: 42px; }
}

/* Stop the page scrolling behind the open drawer */
html.wifn-lock, html.wifn-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wifn *, .wifn *::before, .wifn *::after { transition-duration: .01ms !important; }
}