/*
 * IBP ibpbase theme: Max Mega Menu skin (replaces UberMenu look)
 * ------------------------------------------------------------------
 * Recreates the UberMenu 3.x menu on the ibpbase-family themes
 * using Max Mega Menu (free) markup. Shared by all 20 sites. Each site's
 * colors come from CSS variables printed by ibp-mmm-bridge.php.
 *
 * Assumes: theme location "top"  ->  #mega-menu-wrap-top / #mega-menu-top
 *          Max Mega Menu responsive breakpoint = 0px (the theme's own
 *          off-canvas .slide-menu handles mobile, as it does today)
 */

/* ---------- Defaults (overridden per site by the bridge) ---------- */
:root {
  --ibp-font: 'neuzeit-grotesk', sans-serif;
  --ibp-text: #000000;          /* top-level link             */
  --ibp-hover: #7c131a;         /* top-level hover text       */
  --ibp-hover-bg: transparent;  /* top-level hover background */
  --ibp-dead-hover: var(--ibp-text); /* hover on "#" parent items */
  --ibp-sub: #6a6d73;           /* dropdown link              */
  --ibp-sub-hover: #7c131a;     /* dropdown hover             */
  --ibp-sub-pad: 15px 20px;
  --ibp-sub-minw: 150px;
  --ibp-sub-offset: 0px;        /* cgdoor shifts dropdowns 80px */
  --ibp-cta: #7c131a;           /* "Contact Us" box           */
  --ibp-cta-text: #ffffff;
  --ibp-cta-hover: #a11c25;
  --ibp-cta-hover-text: #ffffff;
  --ibp-mobile: #7c131a;        /* off-canvas panel color     */
  --ibp-mobile-hover: #000000;
  --ibp-mega-width: 600px;      /* two-column / mega dropdown width */
  --ibp-2col-rows: 6;
  --ibp-line-height: 24.55px;  /* UberMenu 3.1.1 rows were 54.55px; 3.8.5 rows are 54px (use 24px) */
}

/* ---------- Shared (all widths) ---------- */
.main-navigation #mega-menu-wrap-top.mega-menu-wrap,
.main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu {
  background: transparent;
  border: 0;
  width: 100%;
  padding: 0;
  margin: 0;
}
.main-navigation #mega-menu-wrap-top.mega-menu-wrap { box-shadow: none !important; } /* no page-dimming overlay (UberMenu had none) */
.main-navigation #mega-menu-wrap-top.mega-menu-wrap .mega-menu-toggle { display: none !important; }

.main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-item,
.main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-item a.mega-menu-link {
  min-height: 0 !important; /* ignore Max Mega Menu's "item height" settings */
}
.main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-item a.mega-menu-link {
  display: block;
  font-family: var(--ibp-font);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: var(--ibp-line-height); /* UberMenu's inline-block title made rows 54.55px tall */
  text-transform: none;
  text-decoration: none;
  height: auto;
  transition: color .5s ease 0s, background-color .5s ease 0s;
}
.main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu .mega-indicator { display: none; } /* UberMenu showed no arrows */

/* ---------- Desktop (>= 1200px) ----------
 * Link colors use !important on purpose: several of these sites have
 * blanket rules like "ul li a:hover{color:...!important}" in style.css
 * that would otherwise repaint the menu (e.g. hide the Contact Us text).
 */
@media (min-width: 1200px) {
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu {
    display: table;
    width: 100%;
    text-align: center;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item {
    display: table-cell;
    float: none;
    text-align: center;
    margin: 0;
    position: relative;
  }
  /* top-level links */
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item > a.mega-menu-link {
    color: var(--ibp-text) !important;
    background-color: transparent !important;
    padding: 15px 20px;
    text-align: center;
    border: 0;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item:hover > a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item > a.mega-menu-link:focus {
    color: var(--ibp-hover) !important;
    background-color: var(--ibp-hover-bg) !important;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.dead-link-anchor:hover > a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.dead-link-anchor.mega-toggle-on > a.mega-menu-link {
    color: var(--ibp-dead-hover) !important;
    cursor: auto;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-current-menu-item > a.mega-menu-link {
    color: var(--ibp-text) !important; /* UberMenu did not highlight the current page */
  }

  /* "Contact Us" box: works with or without the mega- class prefix */
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.contact-active > a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.mega-contact-active > a.mega-menu-link {
    background-color: var(--ibp-cta) !important;
    color: var(--ibp-cta-text) !important;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.contact-active:hover > a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.mega-contact-active:hover > a.mega-menu-link {
    background-color: var(--ibp-cta-hover) !important;
    color: var(--ibp-cta-hover-text) !important;
  }

  /* flyout dropdowns */
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-flyout ul.mega-sub-menu,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
    background: #ffffff;
    border: 0;
    border-top: 1px solid #cccccc;
    box-shadow: 0 4px 6px 0 rgba(0, 0, 0, .4);
    border-radius: 0;
    padding: 0;
    text-align: left;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-flyout > ul.mega-sub-menu {
    top: 100%;
    left: 0;
    width: max-content;
    min-width: var(--ibp-sub-minw);
    max-width: 420px;
    margin-left: var(--ibp-sub-offset);
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu {
    top: 0;
    left: 100%;
    width: max-content;
    min-width: var(--ibp-sub-minw);
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu ul.mega-sub-menu li.mega-menu-item {
    width: 100%;
    float: none;
    text-align: left;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column > a.mega-menu-link {
    color: var(--ibp-sub) !important;
    background-color: transparent !important;
    padding: var(--ibp-sub-pad);
    font-size: 18px;
    font-weight: 400;
    text-transform: none;
    text-align: left;
    white-space: nowrap;
    border: 0;
    margin: 0;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:hover,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item a.mega-menu-link:focus {
    color: var(--ibp-sub-hover) !important;
    background-color: transparent !important;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-flyout ul.mega-sub-menu li.mega-menu-item.dead-link-anchor > a.mega-menu-link:hover,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-item.dead-link-anchor > a.mega-menu-link:hover {
    color: var(--ibp-sub) !important;
    cursor: pointer;
  }

  /* Two-column dropdown (NH "Services"). Add the CSS class "ibp-2col" to the
     parent menu item; its children stay a flat list and flow top-to-bottom,
     6 per column, like UberMenu's column layout. Mobile is unaffected. */
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.ibp-2col > ul.mega-sub-menu,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.mega-ibp-2col > ul.mega-sub-menu {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--ibp-2col-rows), auto);
    justify-content: start;
    width: var(--ibp-mega-width);
    max-width: none;
    left: 50%;
    margin-left: calc(var(--ibp-mega-width) / -2);
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.ibp-2col > ul.mega-sub-menu > li.mega-menu-item,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item.mega-ibp-2col > ul.mega-sub-menu > li.mega-menu-item {
    width: auto;
  }

  /* Mega panel (Max Mega Menu "Mega Menu" sub menu type), if you prefer it:
     centered under its item, columns side by side */
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu { position: relative; }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
    width: var(--ibp-mega-width);
    left: 50%;
    margin-left: calc(var(--ibp-mega-width) / -2);
    top: 100%;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu {
    display: flex;
    align-items: flex-start;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item {
    width: auto;
    flex: 0 0 auto;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-item,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu > ul.mega-sub-menu li.mega-menu-column {
    padding: 0;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-megamenu ul.mega-sub-menu ul.mega-sub-menu {
    position: static;
    box-shadow: none;
    border: 0;
    width: auto;
  }
}

/* ---------- Mobile / tablet (< 1200px) ---------- *
 * The theme's hamburger opens .slide-menu (off-canvas). Inside it the
 * menu is a vertical list; each submenu is its own full-height panel
 * that slides in from the right (ibp-mmm-menu.js adds the arrow
 * buttons and the "Back" row, the same way common.js did for UberMenu).
 */
@media (max-width: 1199px) {
  /* Keep the menu in normal flow inside the theme's panel, even if Max Mega
     Menu's own mobile styles are active (e.g. breakpoint left at 768px). */
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu {
    display: block !important;
    position: static !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    background: transparent !important;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-menu-item {
    display: block;
    width: 100%;
    float: none;
    position: relative;
    text-align: left;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-item > a.mega-menu-link {
    color: #ffffff;
    background: transparent;
    padding: 15px 20px;
    text-align: left;
    white-space: normal;
    transition: none;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-item > a.mega-menu-link:hover {
    color: var(--ibp-mobile-hover);
  }
  /* Max Mega Menu's default theme paints submenu links #ddd on hover/focus */
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:hover,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link:focus {
    background: transparent !important;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.dead-link-anchor > a.mega-menu-link:hover {
    color: #ffffff;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.contact-active > a.mega-menu-link,
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu > li.mega-contact-active > a.mega-menu-link {
    background: var(--ibp-cta);
  }

  /* each submenu = its own sliding panel */
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-item ul.mega-sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    position: fixed !important;
    top: 0 !important;
    left: auto !important;
    right: -50% !important;
    bottom: auto;
    width: 50% !important;
    min-width: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 10px 15px !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--ibp-mobile) !important;
    box-shadow: none !important;
    border: 0 !important;
    z-index: 11;
    transition: right .5s ease-out !important;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-item ul.mega-sub-menu.toggle-on {
    right: 0 !important;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu ul.mega-sub-menu ul.mega-sub-menu.toggle-on {
    width: 100% !important;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu ul.mega-sub-menu li.mega-menu-item {
    width: 100% !important;
    float: none;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu .sub-menu-back {
    display: block;
    cursor: pointer;
    font-size: 18px; /* Max Mega Menu's reset drops it to 14px */
    line-height: 1.3;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu .dropdown-toggle {
    display: block;
  }
}
@media (max-width: 767px) {
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-item ul.mega-sub-menu {
    right: -100% !important;
    width: 100% !important;
  }
  .main-navigation #mega-menu-wrap-top.mega-menu-wrap #mega-menu-top.max-mega-menu li.mega-menu-item ul.mega-sub-menu.toggle-on {
    right: 0 !important;
  }
}