/* =============================================================================
   Navigation widget

   1.  Tokens
   2.  Shell            .navbar / .navbar__container
   3.  Links            shared <a> styling
   4.  Logo
   5.  Desktop menu     .navbar__menu (upper / lower rows)
   6.  Mega menu        desktop dropdown + pieces shared with the mobile drawer
   7.  CTA button
   8.  Mobile menu      burger, drawer, drawer mega menu
   9.  Sticky header
   10. WP admin bar offsets

   Breakpoints: 1560px (menu gap), 1280px (link size), 1024px (desktop -> mobile)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  --search-black: url('data:image/svg+xml;charset=utf8,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="13" cy="14" r="7" stroke="black" stroke-width="2"/><path d="M18 19L24 24.8411" stroke="black" stroke-width="2" stroke-linecap="round"/></svg>');
  --dropdown-menu-bg: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="50.4069" y="60" width="50.4067" height="18.1464" transform="rotate(180 50.4069 60)" fill="%23B4181E"/><rect x="41.6335" y="60" width="60" height="18.3674" transform="rotate(-90 41.6335 60)" fill="%23B4181E"/></svg>');
  /* Applied as a mask, so its colour comes from background-color. */
  --dropdown-arrow: url('data:image/svg+xml,<svg width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.4092 0C12.4865 5.00079e-05 12.5633 0.0147731 12.6348 0.0439453C12.7065 0.0732736 12.7723 0.116707 12.8271 0.170898C12.882 0.225061 12.9254 0.289607 12.9551 0.360352C12.9848 0.431126 13 0.507384 13 0.583984C12.9999 0.660392 12.9847 0.736034 12.9551 0.806641C12.9254 0.877343 12.8819 0.941951 12.8271 0.996094L6.91797 6.8291C6.86322 6.88317 6.79808 6.92575 6.72656 6.95508C6.65483 6.98443 6.57765 7 6.5 7C6.42235 7 6.34517 6.98443 6.27344 6.95508C6.20192 6.92575 6.13678 6.88317 6.08203 6.8291L0.172852 0.996094C0.0622204 0.886764 0.000104988 0.738511 0 0.583984C0 0.429272 0.0620666 0.28033 0.172852 0.170898C0.283633 0.0615438 0.434162 0.000101193 0.59082 0C0.7475 0 0.89794 0.061609 1.00879 0.170898L6.5 5.5918L11.9912 0.170898C12.0461 0.116824 12.111 0.0732287 12.1826 0.0439453C12.2543 0.0146782 12.3316 0 12.4092 0Z" fill="black" stroke="black"/></svg>');
  --grey-arrow-right: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgNyAxMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBzdHJva2U9IiMzMzMiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjciIGQ9Ik0uODUgOS44NWw1LTQuNjM2TC44NS44NSIvPjwvc3ZnPg==);

  --color-primary-white: #FFFFFF;
  --color-primary-red: #B4181E;
  --color-secondary-red: #ED1C24;
  --color-medium-grey: #CCCCCC;
  --color-dark-grey: #858585;
}


/* -----------------------------------------------------------------------------
   2. Shell
   -------------------------------------------------------------------------- */

/* Scroll probe: the IntersectionObserver in navigation.js toggles .sticky once
   this element leaves the viewport. */
.sentinel {
  height: .1px;
}

.navbar {
  position: relative;
  left: 0;
  z-index: 1000;
  width: 100%;
  background: var(--color-primary-white);
}

.navbar__container {
  display: grid;
  grid-template-columns: clamp(60px, 5.5%, 80px) 1fr auto;
  grid-template-rows: 100%;
  gap: 2.5vw;
  width: 90%;
  margin: 0 auto;
  justify-content: unset;
  transition: all ease .5s;
}

@media (max-width: 1024px) {
  .navbar__container {
    grid-template-columns: 60px calc(100% - 60px - 64px) 64px;
    gap: 0;
    width: 100%;
    height: 60px;
    padding-right: 0;
  }
}


/* -----------------------------------------------------------------------------
   3. Links
   -------------------------------------------------------------------------- */

/* Every anchor in the widget -- desktop menu, mega menus and mobile drawer --
   inherits from here, so the component rules below only set what differs. */
.navbar a {
  font-size: var(--font-size-body);
  line-height: 1.3em !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  color: var(--color-primary-black);
  transition: all ease-in-out .4s;
}

@media (max-width: 1280px) {
  .navbar a {
    font-size: clamp(14px, 0.8333333333vw, 16px);
  }
}

.navbar a:hover {
  color: var(--color-primary-red);
}

.navbar a.view-all-link {
  color: var(--color-secondary-red) !important;
  font-weight: bold;
  text-transform: uppercase;
}

.navbar a.view-all-link:hover {
  text-decoration: underline !important;
}


/* -----------------------------------------------------------------------------
   4. Logo
   -------------------------------------------------------------------------- */
.navbar__logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  grid-column: 1;
  max-width: 222px;
  max-height: 90px;
  transition: all ease .4s;
}

.navbar__logo a {
  height: 90px;
}

.navbar__logo img {
  width: 100%;
  height: 90px !important;
  object-fit: contain;
  transition: all ease .4s;
}

@media (max-width: 1024px) {
  .navbar__logo {
    max-width: 151px;
    max-height: 60px;
  }

  .navbar__logo a,
  .navbar__logo img,
  .navbar.sticky .navbar__logo a,
  .navbar.sticky .navbar__logo img {
    height: 60px !important;
  }
}


/* -----------------------------------------------------------------------------
   5. Desktop menu
   -------------------------------------------------------------------------- */
.navbar__menu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: end;
  grid-column: 2;
  grid-row: 1;
}

@media (max-width: 1024px) {
  .navbar__menu {
    display: none;
  }
}

.navbar__menu > div:last-child,
.navbar__menu > div:only-child {
  border-bottom: 0;
}

.navbar__menu__upper,
.navbar__menu__lower {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
  width: 100%;
  height: fit-content;
  opacity: 1;
  transform: none;
  transition: all ease .3s;
}

.navbar__menu__upper {
  justify-content: flex-end;
}

.navbar__menu__lower {
  border-top: 1px solid #cdcdcd;
}

@media (max-width: 1560px) {
  .navbar__menu__lower {
    gap: 0 20px;
  }
}

.navbar__menu__upper .navbar__item,
.navbar__menu__lower .navbar__item {
  padding: 10px 0;
}

.navbar__menu__upper .navbar__item > a {
  font-size: var(--font-size-body-small) !important;
  line-height: 20px !important;
  letter-spacing: 0 !important;
}

/* Magnifier glyph on menu items flagged with the .search-popup class. */
.navbar__menu__upper .navbar__item a.search-popup::before,
.navbar__menu__lower .navbar__item a.search-popup::before {
  content: "";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 100%;
  margin-right: 5px;
  background-image: var(--search-black);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}


/* -----------------------------------------------------------------------------
   6. Mega menu (desktop)
   -------------------------------------------------------------------------- */
.navbar__mega-menu {
  position: relative;
}

.navbar__item.navbar__mega-menu > a {
  position: relative;
  padding-right: 15px;
}

/* Caret. Masked rather than painted, so the open state only swaps a colour. */
.navbar__item.navbar__mega-menu > a::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 9px;
  height: 5px;
  background-color: var(--color-primary-black, #000);
  -webkit-mask: var(--dropdown-arrow) center / 100% 100% no-repeat;
  mask: var(--dropdown-arrow) center / 100% 100% no-repeat;
  transform: translateY(-50%);
  transition: all ease-in-out .2s;
}

.navbar__item.open > a::after {
  background-color: var(--color-primary-red);
  transform: translateY(-50%) rotate(180deg);
}

/* navigation.js leaves [hidden] on the panel; .open outranks it. */
.navbar__item.open > .mega-menu {
  display: block;
}

.navbar__mega-menu .mega-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  width: max-content;
  min-width: 100%;
  max-width: 785px;
  margin: auto;
  padding: 30px 35px 60px 30px;
  background: var(--dropdown-menu-bg) no-repeat right 15px bottom 15px / clamp(36px, 2.29vw, 44px) clamp(36px, 2.29vw, 44px);
  background-color: var(--color-primary-white);
  box-shadow: 0px 2px 6px rgba(0, 0, 0, .10);
}

.navbar__mega-menu .nav-container {
  display: flex;
  flex-direction: row;
  gap: 100px;
}

.navbar__mega-menu .nav-container .mega-menu__columns {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 80px;
  margin-right: 40px;
}

.navbar__mega-menu .mega-menu__item {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 0 0 100%;
}

.navbar__mega-menu .mega-menu__title + .mega-menu__links {
  padding: 0 10px;
}

/* Shared by the desktop panel and the mobile drawer. */
.navbar__mega-menu .mega-menu__title,
.navbar__mobile-menu__drawer .mega-menu__title {
  letter-spacing: 0;
  color: var(--color-dark-grey);
  border-bottom: 1px solid var(--color-medium-grey);
}

.navbar__mega-menu .mega-menu__links,
.navbar__mobile-menu__drawer .mega-menu__links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Wide variant: navigation.php adds .navbar__mega-large to the item (desktop). */
.navbar__mega-large .mega-menu {
  z-index: 1000;
}

.navbar__mega-menu.navbar__mega-large .mega-menu__item {
  flex: 0 0 calc(50% - 40px);
}

.navbar__mega-menu .mega-menu__item:has(.view-all-link) {
  flex: 0 0 100%;
}

.navbar__mega-large .mega-menu__links {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(8, auto);
  gap: 0 40px;
}

.navbar__mega-large .mega-menu__links > * {
  margin-bottom: 20px;
}

.navbar__mega-large .mega-menu__links > *:nth-child(8n),
.navbar__mega-large .mega-menu__links > *:last-child {
  margin-bottom: 0;
}


/* -----------------------------------------------------------------------------
   7. CTA button
   -------------------------------------------------------------------------- */
.navbar .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
  height: 100%;
  max-height: unset !important;
  font-weight: 700;
}

.navbar .btn-primary:hover {
  color: var(--color-primary-white) !important;
}

@media (max-width: 1024px) {
  .navbar .btn-primary {
    grid-column: 2;
    align-self: center;
    padding: 8px 16px !important;
    font-size: 14px !important;
  }
}


/* -----------------------------------------------------------------------------
   8. Mobile menu
   -------------------------------------------------------------------------- */
.navbar__mobile-menu {
  display: none;
}

@media (max-width: 1024px) {
  .navbar__mobile-menu {
    display: block;
    grid-column: 3;
  }
}

.navbar__mobile-menu__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0 12px;
}

.navbar__mobile-menu__icon .burger-icon {
  cursor: pointer;
  opacity: 1;
  visibility: visible;
  transition: all ease-in-out .2s;
}

/* Hide the burger while the drawer is open -- the drawer has its own close btn. */
.navbar__mobile-menu:has(.navbar__mobile-menu__drawer:not([hidden])) .navbar__mobile-menu__icon .burger-icon {
  opacity: 0;
  visibility: hidden;
}

/* --- Drawer ---------------------------------------------------------------- */
.navbar__mobile-menu__drawer {
  position: fixed;
  top: 60px;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  overflow: scroll;
  background: var(--color-primary-white);
}

@media (max-width: 1024px) {
  .navbar__mobile-menu__drawer {
    height: calc(100% - 60px);
  }
}

.navbar__mobile-menu__drawer__container {
  padding: 20px 0;
}

.navbar__mobile-menu__drawer__close {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  justify-content: flex-end;
  width: 64px;
  height: 60px;
  padding: 0;
}

.navbar__mobile-menu__drawer__close__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 60px !important;
  background: none !important;
  border: none !important;
  cursor: pointer;
}

/* --- Drawer links ---------------------------------------------------------- */
.navbar__mobile-menu__drawer__links {
  display: flex;
  flex-direction: column !important;
}

.navbar__mobile-menu__drawer__link {
  position: relative;
}

.navbar__mobile-menu__drawer__links--upper {
  padding-bottom: 20px;
}

.navbar__mobile-menu__drawer__links--upper .navbar__mobile-menu__drawer__link > a {
  display: block;
  width: 100%;
  padding: 15px 20px;
  font-size: 18px !important;
  line-height: 26px !important;
  letter-spacing: 0 !important;
}

.navbar__mobile-menu__drawer__links--lower {
  flex-wrap: wrap;
  gap: 30px;
  padding: 30px 20px;
  background-color: var(--color-ivory);
}

.navbar__mobile-menu__drawer__links--lower .navbar__mobile-menu__drawer__link > a {
  font-size: 16px !important;
  line-height: 22px !important;
  letter-spacing: 0 !important;
}

/* --- Drawer mega menu ------------------------------------------------------ */
.navbar__mobile-menu__drawer__link--mega > a {
  position: relative;
}

.navbar__mobile-menu__drawer__link--mega > a::after {
  content: var(--grey-arrow-right);
  position: absolute;
  top: 50%;
  right: 20px;
  width: 9px;
  height: auto;
  transform: translateY(-50%);
}

.navbar__mobile-menu__drawer__link--mega > a[aria-expanded="true"] {
  color: var(--color-primary-red) !important;
}

.navbar__mobile-menu__drawer__link--mega > a[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(90deg);
}

.navbar__mobile-menu__drawer__link--mega > a[aria-expanded="true"] + .mega-menu--mobile .mega-menu__columns {
  padding-left: 20px;
}

.navbar__mobile-menu__drawer__link--mega > a[aria-expanded="true"] + .mega-menu--mobile .mega-menu__columns .nav-container {
  padding: 15px 0;
}

.navbar__mobile-menu__drawer__link .nav-container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 15px 20px;
}

.navbar__mobile-menu__drawer__link .nav-container .mega-menu__item {
  margin-bottom: 50px;
}

.navbar__mobile-menu__drawer__link .nav-container .mega-menu__item:last-child {
  margin-bottom: 0;
}

.navbar__mobile-menu__drawer .mega-menu__title {
  font-size: 16px;
  line-height: 22px;
}

.navbar__mobile-menu__drawer .mega-menu__links > a {
  font-size: 18px !important;
  line-height: 26px !important;
  letter-spacing: 0 !important;
}

.navbar__mobile-menu__drawer__external-button {
  display: none;
}


/* -----------------------------------------------------------------------------
   9. Sticky header
   .sticky = scrolled past the sentinel; .scroll-up = scrolling back up, which
   restores the full-height header.
   -------------------------------------------------------------------------- */
.navbar.sticky {
  position: fixed !important;
  top: 0;
  z-index: 999;
  width: 100%;
  background-color: #FFFFFFEB;
  border-bottom: 1px solid var(--color-primary-white);
  box-shadow: 0px 4px 24px 0px #0000001A;
}

.navbar.sticky:not(.scroll-up) .navbar__container {
  max-height: 65px;
}

.navbar.sticky:not(.scroll-up) .navbar__logo a,
.navbar.sticky:not(.scroll-up) .navbar__logo img {
  height: 65px !important;
}

.navbar.sticky:not(.scroll-up) .navbar__menu {
  justify-self: center;
}

/* Collapse the secondary row into the primary one. */
.navbar.sticky:not(.scroll-up) .navbar__menu__upper {
  height: 0;
  opacity: 0;
  transform: translateY(-40px);
}

.navbar.sticky:not(.scroll-up) .navbar__menu__lower {
  border-top: 0px solid transparent;
}

.navbar.sticky:not(.scroll-up) .btn-primary {
  align-self: center;
}


/* -----------------------------------------------------------------------------
   10. WP admin bar offsets
   -------------------------------------------------------------------------- */
body.admin-bar .navbar.sticky {
  top: 32px;
}

@media (max-width: 767px) {
  body.admin-bar .navbar.sticky {
    top: 0;
  }
}

body.admin-bar .navbar__mobile-menu__drawer {
  top: calc(60px + 44px);
}

@media (max-width: 1024px) {
  body.admin-bar .navbar__mobile-menu__drawer {
    height: calc(100% - 134px);
  }

  body.admin-bar .navbar__mobile-menu__drawer__close {
    top: 44px;
  }
}