/*
  USW reversed primary navigation colour overrides.
  Load after new.842d4af4.css.

  Purpose:
  - Keep utility quick links red with white text.
  - Reverse the open desktop dropdown tab from black/white to white/black.
  - Reverse dropdown and submenu panels from dark background/white text to white background/black text.
  - Reverse the mobile offcanvas panel from black/white to white/black.
*/

.offcanvas-primary-nav {
  --reverse-utility-nav-bg: #be0f34;
  --reverse-utility-nav-text: #ffffff;
  --reverse-utility-nav-focus: #ffffff;
  --reverse-nav-bg: #ffffff;
  --reverse-nav-text: #000000;
  --reverse-nav-border: #000000;
  --reverse-nav-accent: #be0f34;
}

/* Shared quick links */

.offcanvas-primary-nav__quick-links {
  background-color: var(--reverse-utility-nav-bg);
  color: var(--reverse-utility-nav-text);
}

.offcanvas-primary-nav__quick-links a {
  color: var(--reverse-utility-nav-text);
}

.offcanvas-primary-nav__quick-links a:hover,
.offcanvas-primary-nav__quick-links a:focus {
  text-decoration-color: var(--reverse-utility-nav-text);
}

.offcanvas-primary-nav__quick-links a:focus,
.offcanvas-primary-nav__quick-links a:focus-visible {
  outline-color: var(--reverse-utility-nav-focus);
}

/* Shared dropdown and submenu panels */

.offcanvas-primary-nav__nav .dropdown-menu {
  background-color: var(--reverse-nav-bg);
  color: var(--reverse-nav-text);
}

.offcanvas-primary-nav__nav .dropdown-menu a,
.offcanvas-primary-nav__nav .dropdown-menu span,
.offcanvas-primary-nav__nav .dropdown-menu h2,
.offcanvas-primary-nav__nav .dropdown-menu h3,
.offcanvas-primary-nav__nav .dropdown-menu p {
  color: var(--reverse-nav-text);
}

.offcanvas-primary-nav__nav .dropdown-menu a:focus,
.offcanvas-primary-nav__nav .dropdown-menu a:focus-visible,
.offcanvas-primary-nav__nav .dropdown-menu button:focus,
.offcanvas-primary-nav__nav .dropdown-menu button:focus-visible {
  outline-color: var(--reverse-nav-border);
}

.offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu button.dropdown-toggle svg {
  color: var(--reverse-nav-text);
}

/* Dropdown CTA area */

.dropdown-menu-cta,
.dropdown-menu-cta__inner {
  border-color: var(--reverse-nav-border);
}

.dropdown-menu-cta__inner,
.dropdown-menu-cta__inner h3,
.dropdown-menu-cta__inner p {
  color: var(--reverse-nav-text);
}

.dropdown-menu-cta__inner h3,
.dropdown-menu-cta__inner p {
  background-color: transparent;
}

/* Keep red CTA buttons white inside reversed dropdowns */

.offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu a.btn,
.offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu a.btn-primary {
  color: #ffffff;
  --bs-btn-color: #ffffff;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-active-color: #ffffff;
  --bs-btn-disabled-color: #ffffff;
}

.offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu a.btn:hover,
.offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu a.btn:focus,
.offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu a.btn:focus-visible,
.offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu a.btn:active {
  color: #ffffff;
}

/* Mobile navigation */

@media (max-width: 1199.98px) {
  .offcanvas-primary-nav,
  .offcanvas-primary-nav .offcanvas-body,
  .offcanvas-primary-nav__nav {
    background-color: var(--reverse-nav-bg);
    color: var(--reverse-nav-text);
  }

  .offcanvas-primary-nav .btn-close,
  .offcanvas-primary-nav [data-bs-dismiss="offcanvas"] {
    opacity: 1;
    filter: none;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.3 5.71L16.89 4.3L12 9.17L7.11 4.3L5.7 5.71L10.59 10.6L5.7 15.49L7.11 16.9L12 12.01L16.89 16.9L18.3 15.49L13.41 10.6L18.3 5.71Z' fill='black'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.5rem;
  }

  .offcanvas-primary-nav__quick-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem clamp(1.75rem, 5vw, 3rem);
    min-height: 3.25rem;
    height: auto;
    margin: 0 0 5rem;
    padding: 0.75rem clamp(1.25rem, 4vw, 2rem);
    list-style: none;
    background-color: var(--reverse-utility-nav-bg);
    color: var(--reverse-utility-nav-text);
    border-bottom: 2px solid var(--reverse-nav-border);
  }

  .offcanvas-primary-nav__quick-links li {
    margin: 0;
    padding: 0;
  }

  .offcanvas-primary-nav__quick-links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0;
    color: var(--reverse-utility-nav-text);
    line-height: 1.1;
    text-decoration-color: transparent;
  }

  .offcanvas-primary-nav__quick-links a:focus,
  .offcanvas-primary-nav__quick-links a:focus-visible {
    outline: 2px solid var(--reverse-utility-nav-focus);
    outline-offset: 3px;
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) {
    border-bottom: 1px solid var(--reverse-nav-border);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link span,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown a.main-link,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown span.main-link {
    color: var(--reverse-nav-text);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.71751 14.9671V13.3172H13.3172V6.71751H14.9671V13.3172H21.5668V14.9671H14.9671V21.5667H13.3172V14.9671H6.71751Z' fill='black'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 1.8125rem;
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link.dropdown-toggle.show::after {
    background-image: url("data:image/svg+xml,%3Csvg width='29' height='29' viewBox='0 0 29 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.71751 14.9671V13.3172H21.5668V14.9671H6.71751Z' fill='black'/%3E%3C/svg%3E");
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu.show {
    --bs-dropdown-box-shadow: none;
    background-color: var(--reverse-nav-bg);
    box-shadow: none;
    color: var(--reverse-nav-text);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover {
    background-color: var(--reverse-nav-bg);
    border-top: 1px solid var(--reverse-nav-border);
    color: var(--reverse-nav-text);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover .main-link,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover .dropdown-menu,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover .dropdown-menu a,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover .dropdown-menu span {
    background-color: transparent;
    color: var(--reverse-nav-text);
  }

  .offcanvas-primary-nav .main-link:focus,
  .offcanvas-primary-nav .main-link:focus-visible,
  .offcanvas-primary-nav__nav .main-link:focus-visible,
  .offcanvas-primary-nav__nav .dropdown-toggle:focus-visible,
  .offcanvas-primary-nav__nav .dropdown-menu a:focus,
  .offcanvas-primary-nav__nav .dropdown-menu a:focus-visible,
  .offcanvas-primary-nav__nav .dropdown-menu button:focus,
  .offcanvas-primary-nav__nav .dropdown-menu button:focus-visible {
    outline-color: var(--reverse-nav-border);
  }
}

/* Desktop navigation */

@media (min-width: 1200px) {
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link,
  .banner--split .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link {
    color: var(--reverse-nav-text);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link:focus,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link:focus-visible,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link:focus,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link:focus-visible {
    outline-color: var(--reverse-nav-border);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link.dropdown-toggle:not(.dropdown-toggle-quick-links).show::before,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link.dropdown-toggle:not(.dropdown-toggle-quick-links).show::before,
  .banner--split .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link.dropdown-toggle:not(.dropdown-toggle-quick-links).show::before {
    background-color: var(--reverse-nav-bg);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover .dropdown-menu {
    background-color: var(--reverse-nav-bg);
    color: var(--reverse-nav-text);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu a,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu span,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover .dropdown-menu a,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover .dropdown-menu span {
    color: var(--reverse-nav-text);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu__top-level-link a {
    color: var(--reverse-nav-text);
    text-decoration-color: var(--reverse-nav-accent);
    text-decoration-thickness: 2px;
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu button.dropdown-toggle:focus-visible,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu__body ul a:focus-visible,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-menu__top-level-link a:focus-visible {
    outline-color: var(--reverse-nav-border);
  }

  .dropdown-menu-cta {
    border-left-color: var(--reverse-nav-border);
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link.dropdown-toggle.show::after,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link.dropdown-toggle.show::after,
  .banner--split .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown.dropdown-visible .main-link.dropdown-toggle.show::after,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link.dropdown-toggle.show::after,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link.dropdown-toggle.show::after,
  .banner--split .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .main-link.dropdown-toggle.show::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8.6L6 14.6L7.4 16L12 11.4L16.6 16L18 14.6L12 8.6Z' fill='black'/%3E%3C/svg%3E");
  }
}
  
/* Remove unwanted Bootstrap caret from desktop dropdown close buttons */

@media (min-width: 1200px) {
  .offcanvas-primary-nav__nav .dropdown-menu .js-close-dropdown-toggle::after {
    display: none;
    content: none;
  }
}

/* Desktop Discover menu: keep top-level item white when open */

@media (min-width: 1200px) {
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover.dropdown-visible .main-link,
  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover.dropdown-visible .main-link span,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover.dropdown-visible .main-link,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover.dropdown-visible .main-link span {
    color: #ffffff;
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover .main-link.dropdown-toggle:not(.dropdown-toggle-quick-links).show::before,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover .main-link.dropdown-toggle:not(.dropdown-toggle-quick-links).show::before {
    background-color: transparent;
  }

  .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover.dropdown-visible .main-link.dropdown-toggle.show::after,
  .banner--invert .offcanvas-primary-nav__nav > ul:not(.offcanvas-primary-nav__quick-links) .dropdown-discover.dropdown-visible .main-link.dropdown-toggle.show::after {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 8.6L6 14.6L7.4 16L12 11.4L16.6 16L18 14.6L12 8.6Z' fill='white'/%3E%3C/svg%3E");
  }
}